/* ====================================================================
   Rodeo Graphics — product-service.css
   Single-product page redesign. Loaded only on is_product() alongside
   shop.css (base WooCommerce styling), rg-service-detail (reused for
   .faq-item / .eyebrow / .section-title) and rg-portfolio (reused for
   the "Our Work" proof strip). This file covers everything new: the
   trust ribbon, vertical gallery thumbnails, tier-row package
   selector, buybox trust/payment rows, About section prose, guarantee
   row, and the sticky bottom bar.
   ==================================================================== */

/* ─── TRUST RIBBON (top strip, above breadcrumb) ─── */
.rg-trust-ribbon { background: var(--gray-900); padding: 0.55rem 5%; }
.rg-trust-ribbon-inner {
  max-width: 1200px; margin: 0 auto; display: flex; align-items: center;
  justify-content: center; gap: 1.75rem; flex-wrap: wrap;
  font-size: 0.75rem; color: var(--gray-400);
}
.rg-trust-ribbon-inner span { white-space: nowrap; }

/* ─── GALLERY: vertical thumbnail rail to the left of the main image ───
   The FlexSlider-generated .woocommerce-product-gallery__wrapper is the
   sliding track (not a direct flex child — it lives inside
   .flex-viewport, and JS gives it an inline width covering every slide
   side by side), so reordering has to target .flex-viewport, the
   actual clipped/visible box and real flex item, not the wrapper. */
.woocommerce div.product div.images { display: flex; gap: 0.6rem; }
.woocommerce div.product div.images .flex-viewport {
  order: 2; flex: 1; min-width: 0;
}
.woocommerce div.product div.images .flex-control-thumbs {
  order: 1; display: flex; flex-direction: column; gap: 0.6rem;
  width: 64px; flex-shrink: 0; margin: 0;
}
.woocommerce div.product div.images .flex-control-thumbs li { width: 100%; }
.woocommerce div.product div.images .flex-control-thumbs li img { width: 100%; }

/* ─── BUYBOX: trust + payment rows under Add to Cart ─── */
.rg-buybox-trust {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem;
  margin: 1rem 0 1.1rem;
}
.rg-buybox-trust span {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; color: var(--gray-600);
}
.rg-bt-ic { font-size: 1rem; line-height: 1; flex-shrink: 0; }

.rg-buybox-payment {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  border-top: 1px solid var(--gray-100); padding-top: 0.9rem; margin-top: 0.5rem;
}
.rg-pay-label { font-size: 0.72rem; color: var(--gray-400); margin-right: 0.2rem; }
.rg-pay-badge {
  font-size: 0.68rem; font-weight: 700; color: var(--gray-600);
  border: 1px solid var(--gray-200); border-radius: var(--r-sm);
  padding: 0.2rem 0.5rem; letter-spacing: 0.01em;
}
.rg-pay-lock { margin-left: auto; font-size: 0.85rem; opacity: 0.6; }

/* SKU is never populated on these products (always shows "N/A"), so it's
   just noise under the buybox — hide only the SKU line, keep categories/tags. */
.woocommerce div.product .product_meta .sku_wrapper { display: none; }

/* ─── REVIEWS (relocated out of the tabs, own section, only rendered
       when reviews exist) — restyle WooCommerce's own reviews template
       to match the rest of the page instead of overriding its markup. ─── */
.rg-product-reviews { background: var(--gray-50); border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); }
.rg-product-reviews #reviews { max-width: 1200px; margin: 0 auto; }
.rg-product-reviews .woocommerce-Reviews-title {
  font-family: 'Sora', 'Sora Fallback', sans-serif; font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800; color: var(--gray-900); margin-bottom: 1.5rem;
}
/* All reviews sit in a single row, equal width — grid-auto-flow: column
   with a single explicit row (rather than a fixed column count) means
   the layout never wraps to a second row no matter how many reviews a
   product has. */
.rg-product-reviews ol.commentlist {
  list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  grid-template-rows: 1fr; gap: 1.25rem; padding: 0; margin: 0;
}
.rg-product-reviews li.review { list-style: none; }
.rg-product-reviews .comment_container {
  background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--r-lg);
  padding: 1.5rem; height: 100%;
}
/* The approved design has no avatar — WooCommerce's default gravatar
   markup is just the generic "mystery person" placeholder for every
   guest reviewer here, so it's dropped rather than styled. */
.rg-product-reviews .comment_container > img.avatar { display: none; }
.rg-product-reviews .comment-text { min-width: 0; }
.rg-product-reviews .star-rating { margin-bottom: 0.6rem; font-size: 0.95rem; }
.rg-product-reviews p.meta { margin: 0 0 0.6rem; font-size: 0.85rem; }
.rg-product-reviews .woocommerce-review__author { font-weight: 700; font-size: 0.92rem; color: var(--gray-900); }
.rg-product-reviews .woocommerce-review__verified {
  display: inline-flex; align-items: center; gap: 0.2rem; background: var(--red-pale); color: var(--red);
  font-size: 0.65rem; font-weight: 700; font-style: normal; padding: 0.15rem 0.55rem;
  border-radius: var(--r-pill); margin-left: 0.4rem; text-transform: uppercase; letter-spacing: 0.02em;
}
.rg-product-reviews .woocommerce-review__verified::before { content: '✓ '; }
.rg-product-reviews .woocommerce-review__published-date { color: var(--gray-400); font-size: 0.8rem; }
.rg-product-reviews .description p { color: var(--gray-600); font-size: 0.9rem; line-height: 1.7; margin: 0; }
.rg-product-reviews #respond { margin-top: 2rem; }
.rg-product-reviews #respond .form-submit input {
  background: var(--red); color: #fff; border: none; padding: 0.75rem 1.75rem;
  border-radius: var(--r-md); font-weight: 700; cursor: pointer;
}
@media (max-width: 700px) {
  /* Stays a single row on mobile too (per approved design) rather than
     wrapping — narrow screens scroll horizontally instead. */
  .rg-product-reviews ol.commentlist { grid-auto-columns: 85%; overflow-x: auto; padding-bottom: 0.5rem; }
}

/* ─── TIER-ROW PACKAGE SELECTOR — rendered server-side by
       rg_product_tier_select_ui() with real prices/subtext already in
       place; product-service.js only wires clicks and reveals this
       block (it starts display:none), falling back to the native
       <select> if that JS never runs. ─── */
/* WooCommerce lays quantity + Add to Cart button out as a flex row
   (.woocommerce-variation-add-to-cart), and since rg_product_tier_select_ui()
   hooks into woocommerce_before_add_to_cart_button (inside that same
   row), our tier box was becoming a third flex item squeezed alongside
   them instead of sitting above as its own full-width block. Forcing
   that row to wrap, giving our block flex-basis:100%, and pulling it
   first with order:-1 puts it back on its own line, full width. */
.woocommerce div.product .woocommerce-variation-add-to-cart { flex-wrap: wrap; }
.rg-tier-select {
  border: 1px solid var(--gray-100); border-radius: var(--r-lg);
  padding: 0.35rem; margin-bottom: 1.25rem;
  display: flex; flex-direction: column; gap: 0.35rem;
  flex: 1 0 100%; order: -1; width: 100%;
}
/* The native variation price ("$200.00" floating above the box) is
   redundant now that every tier row shows its own real price and the
   sticky bar/CTA track the selection too. */
.woocommerce div.product .woocommerce-variation-price { display: none; }
.rg-tier-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.8rem 0.9rem; border-radius: var(--r-md);
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
  border: 1.5px solid transparent;
}
.rg-tier-row:hover { background: var(--gray-50); }
.rg-tier-row.active { background: var(--red-pale); border-color: var(--red); }
.rg-tier-main { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.rg-tier-name { font-weight: 700; font-size: 0.95rem; color: var(--gray-900); white-space: nowrap; display: flex; align-items: center; gap: 0.6rem; }
.rg-tier-sub { font-size: 0.82rem; color: var(--gray-500); white-space: nowrap; }
.rg-tier-badge {
  display: inline-block; background: var(--red); color: #fff;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.2rem 0.55rem; border-radius: var(--r-pill); white-space: nowrap;
}
.rg-tier-price {
  font-family: 'Sora', 'Sora Fallback', sans-serif; font-weight: 800; font-size: 1.1rem;
  color: var(--gray-900); flex-shrink: 0; white-space: nowrap; padding-left: 0.75rem;
}
@media (max-width: 480px) {
  .rg-tier-row { flex-wrap: wrap; }
  .rg-tier-name, .rg-tier-sub { white-space: normal; }
}

/* Make the native Add to Cart button read as the primary CTA — sized to
   fill whatever room is left next to the quantity box rather than
   forced to its own full-width line, so quantity + button sit in one
   row (width:100% previously left no space for the ~95px quantity box
   beside it, pushing the button onto its own line every time). */
.woocommerce div.product .single_add_to_cart_button {
  flex: 1 1 auto; width: auto; text-align: center; padding: 1rem;
  font-size: 0.98rem; margin-top: 0.25rem;
}

/* ─── ABOUT THIS SERVICE — two-column: prose + a "Why Rodeo Graphics"
       trust sidebar parsed out of the real product description
       (rg_product_parse_description() in inc/product-service-page.php) ─── */
.rg-about-section { background: var(--white); }
/* Flexbox, not grid — with CSS Grid, a row's height always matches its
   tallest cell even with align-items:start (that only controls in-row
   alignment, not the row track size itself), which left a large empty
   gap under short intro copy whenever the sidebar was taller. Flexbox's
   align-items:flex-start has no such equal-height side effect: each
   column just sizes to its own content. */
.rg-about-layout { display: flex; gap: 3rem; align-items: flex-start; }
.rg-about-layout .rg-about-body { flex: 1; min-width: 0; }
.rg-about-layout.rg-about-no-sidebar .rg-about-body { max-width: 780px; }
.rg-about-body p { margin-bottom: 1.1rem; font-size: 0.95rem; line-height: 1.85; color: var(--gray-600); }
.rg-about-body strong { color: var(--gray-900); }

.rg-about-sidebar {
  background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: var(--r-lg);
  padding: 1.75rem; position: sticky; top: 100px;
  width: 320px; flex-shrink: 0;
}
.rg-about-sidebar-title {
  font-family: 'Sora', 'Sora Fallback', sans-serif; font-weight: 800; font-size: 1.05rem;
  color: var(--gray-900); margin-bottom: 1.1rem;
}
.rg-about-sidebar-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.rg-about-sidebar-list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.86rem; color: var(--gray-600); line-height: 1.55; }
.rg-about-check { color: var(--red); font-weight: 800; flex-shrink: 0; margin-top: 0.1rem; }

.rg-about-body h4 {
  font-family: 'Sora', 'Sora Fallback', sans-serif; font-weight: 800; font-size: 1.05rem;
  color: var(--gray-900); margin: 1.5rem 0 0.7rem;
}
.rg-about-body ul { padding-left: 1.3rem; margin-bottom: 1.5rem; }
.rg-about-body li { margin-bottom: 0.5rem; color: var(--gray-600); font-size: 0.95rem; line-height: 1.7; }

@media (max-width: 860px) {
  .rg-about-layout { flex-direction: column; }
  .rg-about-sidebar { position: static; width: 100%; }
}

/* ─── COMPARE PACKAGES (data-driven table, real tier names/prices,
       positioned between the portfolio proof strip and the FAQ) ─── */
.rg-compare-section { background: var(--white); }
.rg-compare-table {
  max-width: 900px; margin: 2rem auto 0; border: 1px solid var(--gray-100);
  border-radius: var(--r-lg); overflow: hidden;
}
.rg-compare-row {
  display: grid; grid-template-columns: 1.4fr repeat(var(--rg-cols, 3), 1fr);
  border-bottom: 1px solid var(--gray-100);
}
/* Real per-product bullet tables (see rg_service_tier_bullets()) have no
   "Feature" label column — every tier's copy lives in its own cell, so
   the leading 1.4fr track has nothing in it and just shows as dead
   whitespace. Drop it and split the row evenly across tiers instead. */
.rg-compare-table-real .rg-compare-row { grid-template-columns: repeat(var(--rg-cols, 3), 1fr); }
.rg-compare-row:last-child { border-bottom: none; }
.rg-compare-row.rg-compare-head { background: var(--gray-50); }
.rg-compare-cell {
  padding: 0.9rem 1rem; font-size: 0.88rem; color: var(--gray-600);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.rg-compare-feature {
  justify-content: flex-start; text-align: left; font-weight: 600; color: var(--gray-900);
}
.rg-compare-head .rg-compare-cell { flex-direction: column; padding: 1.1rem 1rem; gap: 0.2rem; }
.rg-compare-head .rg-compare-feature { justify-content: center; }
.rg-compare-tier { font-weight: 700; font-size: 0.85rem; color: var(--gray-900); }
.rg-compare-price { font-family: 'Sora', 'Sora Fallback', sans-serif; font-weight: 800; font-size: 0.95rem; color: var(--gray-900); }
.rg-compare-cell.rg-compare-featured { background: var(--red-pale); }
.rg-compare-check { color: var(--red); font-weight: 800; }
.rg-compare-dash { color: var(--gray-300); }

/* Real per-product bullet list row (see rg_service_tier_bullets() in
   inc/product-service-page.php) — each tier column stacks its own
   feature list instead of sharing rows across tiers, since the real
   marketing copy per tier isn't a shared row-for-row comparison. */
.rg-compare-cell-list { flex-direction: column; align-items: flex-start; text-align: left; padding: 1.25rem 1.1rem; }
.rg-compare-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.rg-compare-bullets li { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.85rem; color: var(--gray-600); line-height: 1.4; }
.rg-compare-bullets .rg-compare-check { flex-shrink: 0; margin-top: 0.15rem; }

@media (max-width: 700px) {
  .rg-compare-table { overflow-x: auto; }
  .rg-compare-row { grid-template-columns: 110px repeat(var(--rg-cols, 3), minmax(90px, 1fr)); min-width: 480px; }
  .rg-compare-table-real .rg-compare-row { grid-template-columns: repeat(var(--rg-cols, 3), minmax(140px, 1fr)); min-width: 420px; }
  .rg-compare-cell { padding: 0.75rem 0.6rem; font-size: 0.8rem; }
}

/* ─── RELATED PRODUCTS GRID: 4 across on desktop, 2 on mobile
       (overrides shop.css's sitewide 3-column .woocommerce ul.products) ─── */
.rg-related-wrap .related.products ul.products,
.rg-related-wrap ul.products {
  grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 960px) {
  .rg-related-wrap .related.products ul.products,
  .rg-related-wrap ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ─── GUARANTEE / TRUST STRIP ─── */
.rg-guarantee-row { padding: 3rem 5%; background: var(--gray-50); border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); }
.rg-guarantee-inner {
  max-width: 1200px; margin: 0 auto; display: flex; align-items: center;
  justify-content: center; gap: 2.5rem; flex-wrap: wrap;
}
.rg-guarantee-item { display: flex; align-items: center; gap: 0.85rem; }
.rg-guarantee-ic {
  width: 44px; height: 44px; border-radius: var(--r-md); background: var(--red-pale);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0;
}
.rg-guarantee-title { font-weight: 700; font-size: 0.9rem; color: var(--gray-900); }
.rg-guarantee-sub { font-size: 0.78rem; color: var(--gray-500); }

/* ─── STICKY BOTTOM BAR ─── */
.rg-sticky-bar {
  position: sticky; bottom: 0; z-index: 40; background: var(--white);
  border-top: 1px solid var(--gray-100); padding: 0.85rem 5%;
  box-shadow: 0 -6px 18px rgba(17,24,39,0.06);
}
.rg-sticky-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.rg-sticky-info { display: flex; flex-direction: column; }
.rg-sticky-name { font-size: 0.78rem; color: var(--gray-500); }
.rg-sticky-price { font-family: 'Sora', 'Sora Fallback', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--gray-900); }
.rg-sticky-actions { display: flex; align-items: center; gap: 1rem; }
.rg-sticky-secure { font-size: 0.72rem; color: var(--gray-400); white-space: nowrap; }
.rg-sticky-cta { padding: 0.7rem 1.6rem; font-size: 0.88rem; }

/* Body needs breathing room above the sticky bar so it never overlaps the footer content on short pages */
body.single-product { padding-bottom: 0; }

/* ─── RESPONSIVE ─── */
@media (max-width: 960px) {
  .woocommerce div.product div.images { flex-direction: column-reverse; }
  .woocommerce div.product div.images .flex-control-thumbs {
    flex-direction: row; width: 100%; overflow-x: auto;
  }
  .woocommerce div.product div.images .flex-control-thumbs li { width: 64px; flex-shrink: 0; }
  .rg-guarantee-inner { gap: 1.5rem; justify-content: flex-start; }
}
@media (max-width: 600px) {
  .rg-trust-ribbon-inner { gap: 0.9rem; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .rg-buybox-trust { grid-template-columns: 1fr; }
  .rg-buybox-payment { gap: 0.4rem; }
  .rg-pay-lock { margin-left: 0; }
  .rg-guarantee-item { width: 100%; }
  .rg-sticky-inner { justify-content: space-between; }
  .rg-sticky-actions { gap: 0.6rem; }
  .rg-sticky-secure { display: none; }
}