/* ==========================================================================
   Shady Hollow Suds — Extra sections added for the dynamic PHP rebuild:
   payment note, before/after gallery, reviews + review form.
   Reuses design tokens from styles.css.
   ========================================================================== */

/* ---------------- Payment note ---------------- */
.payment-note{
  margin-top:var(--space-6);
  padding:var(--space-5);
  background:var(--bg-cream);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  text-align:center;
}
.payment-note__title{
  font-family:'Fredoka', sans-serif;
  font-weight:600;
  font-size:var(--text-xl);
  color:var(--navy);
  margin-bottom:var(--space-2);
}
.payment-note__body{
  color:var(--text-body);
  font-size:var(--text-sm);
  line-height:1.5;
}

/* ---------------- Gallery ---------------- */
.gallery{ padding-block:var(--space-16); background:var(--bg-soft); }
.gallery__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-8);
  margin-top:var(--space-8);
}
@media (min-width:700px){
  .gallery__grid{ grid-template-columns:repeat(2, 1fr); }
}
.gallery__pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-3);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.gallery__img{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--border); }
.gallery__img img{ width:100%; height:100%; object-fit:cover; }
.gallery__tag{
  position:absolute; bottom:var(--space-2); left:var(--space-2);
  background:rgba(20,20,20,0.75); color:#fff; font-size:var(--text-xs);
  font-weight:600; padding:0.2rem 0.6rem; border-radius:var(--radius-pill);
  text-transform:uppercase; letter-spacing:0.03em;
}
.gallery__tag--after{ background:var(--green); }

/* ---------------- Reviews ---------------- */
.reviews{ padding-block:var(--space-16); }
.reviews__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-5);
  margin-top:var(--space-8);
}
@media (min-width:700px){
  .reviews__grid{ grid-template-columns:repeat(3, 1fr); }
}
.review-card{
  background:var(--bg-soft);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:var(--space-5);
  box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:var(--space-2);
}
.review-card--featured{ border-color:var(--gold); background:#FFFCF3; }
.review-card__stars{ color:var(--gold); font-size:var(--text-lg); letter-spacing:0.1em; }
.review-card__body{ color:var(--text-body); font-size:var(--text-sm); line-height:1.55; flex:1; }
.review-card__name{ color:var(--text-muted); font-size:var(--text-xs); font-weight:600; }

.review-form-card{
  max-width:520px;
  margin:var(--space-12) auto 0;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-6);
  box-shadow:var(--shadow-card);
}
.review-form-card__title{
  font-family:'Fredoka', sans-serif; font-weight:600; font-size:var(--text-lg);
  color:var(--navy); margin-bottom:var(--space-4); text-align:center;
}
.review-form-card .field{ margin-bottom:var(--space-4); }
.review-form-card label{ display:block; font-size:var(--text-sm); font-weight:600; color:var(--text); margin-bottom:var(--space-1); }
.review-form-card input, .review-form-card textarea{
  width:100%; padding:0.65rem 0.8rem; border:1px solid var(--border); border-radius:var(--radius-sm);
  font-family:inherit; font-size:var(--text-base); color:var(--text); background:var(--bg);
}
.review-form-card input:focus, .review-form-card textarea:focus{ outline:2px solid var(--blue); outline-offset:1px; }

.star-picker__stars{ display:flex; gap:0.35rem; }
.star-picker__star{
  background:none; border:none; font-size:1.8rem; line-height:1; color:var(--border);
  padding:0; transition:color 0.15s;
}
.star-picker__star.is-active, .star-picker__star.is-hover{ color:var(--gold); }

.submit-btn--sm{ width:100%; margin-top:var(--space-2); }

/* Reuse .form-msg from styles.css for #reviewMsg */

/* ---------------- Service selection swap note ---------------- */
.swap-note{
  margin-top:var(--space-2);
  padding:0.6rem 0.9rem;
  background:#FFF8E8;
  border:1px solid var(--gold);
  border-radius:var(--radius-sm);
  color:var(--text);
  font-size:var(--text-xs);
  font-weight:600;
  text-align:center;
}
.swap-note[hidden]{ display:none; }

/* ================================================================
   Shop / affiliate products — banner, hero, product grid, best sellers
   Chemical Guys–inspired palette (black / red / white) used for the
   shop banner + hero only; rest of the page keeps the site's own
   brand colors so it still feels like Shady Hollow Suds.
   ================================================================ */
:root{
  --shop-black:#141414;
  --shop-red:#E21C2B;
  --shop-red-deep:#A81420;
  --shop-gold:#F5A623;
}

/* ---- Animated "Shop Now" banner (used on homepage + shop.php) ---- */
.shop-banner-wrap .container{ max-width:1400px; }
.shop-banner{
  position:relative;
  display:block;
  margin-inline:auto;
  max-width:1400px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  text-decoration:none;
  background:linear-gradient(135deg, var(--shop-black) 0%, #262626 55%, var(--shop-black) 100%);
  box-shadow:var(--shadow-lift);
  isolation:isolate;
}
.shop-banner__product-img{
  position:absolute;
  right:-1%;
  bottom:-8%;
  height:150%;
  width:auto;
  max-width:58%;
  object-fit:contain;
  object-position:bottom right;
  z-index:0;
  pointer-events:none;
  filter:drop-shadow(-8px 14px 28px rgba(0,0,0,0.65)) brightness(1.28) saturate(1.55) contrast(1.2);
}
.shop-banner__scrim{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(ellipse 65% 95% at 82% 55%, rgba(245,166,35,0.22) 0%, rgba(245,166,35,0) 70%),
    linear-gradient(90deg, rgba(12,12,12,0.94) 0%, rgba(12,12,12,0.8) 32%, rgba(12,12,12,0.42) 55%, rgba(12,12,12,0.08) 75%, rgba(12,12,12,0) 100%);
  pointer-events:none;
}
.shop-banner::before{
  /* diagonal shimmer sweep */
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.16) 45%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0.16) 55%, transparent 70%);
  background-size:220% 100%;
  animation:shopBannerShimmer 3.2s ease-in-out infinite;
  pointer-events:none;
}
.shop-banner::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:6px;
  background:linear-gradient(90deg, var(--shop-red), var(--shop-gold), var(--shop-red));
  background-size:200% 100%;
  animation:shopBannerStripe 4s linear infinite;
}
@keyframes shopBannerShimmer{
  0%{ background-position:120% 0; }
  50%{ background-position:-20% 0; }
  100%{ background-position:-20% 0; }
}
@keyframes shopBannerStripe{
  0%{ background-position:0% 0; }
  100%{ background-position:200% 0; }
}
.shop-banner__inner{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  padding:var(--space-10) var(--space-8);
  min-height:380px;
}
.shop-banner__text{ display:flex; flex-direction:column; gap:var(--space-3); max-width:56%; }
.shop-banner__brand-row{ display:flex; align-items:center; gap:var(--space-3); }
.shop-banner__logo{
  flex-shrink:0;
  width:64px;
  height:64px;
  border-radius:50%;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,0.5));
}
.shop-banner__eyebrow{
  font-size:var(--text-lg);
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--shop-gold);
  line-height:1.25;
}
.shop-banner__title{
  font-family:'Fredoka', sans-serif;
  font-weight:700;
  font-size:var(--text-2xl);
  color:#FFFFFF;
  line-height:1.05;
  white-space:nowrap;
  display:block;
  width:100%;
  text-align:center;
}
.shop-banner__cta{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  padding:1rem 1.8rem;
  border-radius:var(--radius-pill);
  background:var(--shop-red);
  color:#FFFFFF;
  font-weight:700;
  font-size:var(--text-lg);
  white-space:nowrap;
  box-shadow:0 4px 14px rgba(226,28,43,0.45);
  transition:transform 0.18s ease, background 0.18s ease;
}
.shop-banner:hover{ transform:translateY(-2px); }
.shop-banner:hover .shop-banner__cta{ background:var(--shop-red-deep); transform:scale(1.04); }
.shop-banner:active{ transform:translateY(0); }

@media (max-width:520px){
  .shop-banner__inner{ flex-direction:column; align-items:flex-start; gap:var(--space-4); min-height:400px; }
  .shop-banner__cta{ width:100%; justify-content:center; }
  .shop-banner__text{ max-width:100%; }
  .shop-banner__logo{ width:52px; height:52px; }
  .shop-banner__inner{ padding-left:var(--space-5); padding-right:var(--space-5); }
  .shop-banner__title{ font-size:clamp(1.3rem, 6vw, 1.85rem); }
  .shop-banner__eyebrow{ font-size:var(--text-base); }
  .shop-banner__product-img{ opacity:0.85; height:112%; max-width:70%; right:-3%; bottom:-4%; }
  .shop-banner__scrim{ background:linear-gradient(180deg, rgba(12,12,12,0.92) 0%, rgba(12,12,12,0.68) 45%, rgba(12,12,12,0.38) 100%); }
}

.shop-banner-wrap{ padding:0 var(--space-5) var(--space-2); }
.shop-banner-wrap.shop-banner-wrap--section{
  padding-top:var(--space-12);
  padding-bottom:0;
}

/* ---- Shop page hero (matches home page navy logo band) ---- */
.shop-hero{
  background:linear-gradient(180deg, var(--blue-deep) 0%, var(--navy) 100%);
  padding-block:var(--space-10) var(--space-10);
  text-align:center;
}
.shop-hero__logo{
  max-width:640px;
  width:94%;
  margin:0 auto var(--space-5);
  display:block;
}
.shop-hero__eyebrow{
  display:inline-block;
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--yellow);
  margin-bottom:var(--space-3);
}
.shop-hero__title{
  font-family:'Fredoka', sans-serif;
  font-weight:700;
  font-size:var(--text-2xl);
  color:#FFFFFF;
  margin-bottom:var(--space-3);
}
.shop-hero__title .accent{ color:var(--yellow); }
.shop-hero__sub{
  color:#E4EEF5;
  font-size:var(--text-base);
  max-width:34rem;
  margin-inline:auto;
}
.shop-hero__back{
  display:inline-block;
  margin-top:var(--space-6);
  color:#BFD8E8;
  font-size:var(--text-sm);
  text-decoration:none;
}
.shop-hero__back:hover{ color:#FFFFFF; }

/* ---- Affiliate disclosure ---- */
.affiliate-disclosure{
  max-width:640px;
  margin:var(--space-6) auto 0;
  padding:var(--space-4) var(--space-5);
  background:var(--bg-cream);
  border:1px solid var(--gold);
  border-radius:var(--radius-md);
  color:var(--text-body);
  font-size:var(--text-xs);
  line-height:1.5;
}

/* ---- Product grid + category groups (shop.php) ---- */
.shop-category{ padding-block:var(--space-12); }
.shop-category:nth-child(even){ background:var(--bg-soft); }
.shop-category__title{
  font-family:'Fredoka', sans-serif;
  font-weight:600;
  font-size:var(--text-lg);
  color:var(--text);
  margin-bottom:var(--space-6);
  padding-bottom:var(--space-2);
  border-bottom:2px solid var(--shop-red);
  display:inline-block;
}
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  gap:var(--space-5);
}
.product-card{
  display:flex;
  flex-direction:column;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.product-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.product-card__img-wrap{
  position:relative;
  aspect-ratio:1/1;
  background:#FFFFFF;
  overflow:hidden;
}
.product-card__img-wrap img{ width:100%; height:100%; object-fit:cover; }
.product-card__badge{
  position:absolute;
  top:0.5rem; left:0.5rem;
  background:var(--shop-red);
  color:#fff;
  font-size:0.65rem;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:0.25rem 0.5rem;
  border-radius:var(--radius-sm);
}
.product-card__body{ padding:var(--space-4); display:flex; flex-direction:column; gap:0.3rem; flex:1; }
.product-card__brand{ font-size:var(--text-xs); font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; }
.product-card__name{ font-size:var(--text-sm); font-weight:700; color:var(--text); line-height:1.3; }
.product-card__desc{ font-size:var(--text-xs); color:var(--text-muted); line-height:1.4; flex:1; }
.product-card__footer{ display:flex; flex-direction:column; align-items:stretch; margin-top:var(--space-2); gap:0.5rem; }
.product-card__price{ font-family:'Fredoka'; font-weight:700; font-size:var(--text-base); color:var(--text); }
.product-card__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.25rem;
  background:var(--shop-red);
  color:#fff;
  font-size:var(--text-xs);
  font-weight:700;
  padding:0.55rem 0.8rem;
  border-radius:var(--radius-pill);
  text-decoration:none;
  white-space:nowrap;
  width:100%;
  transition:background 0.15s ease, transform 0.15s ease;
}
.product-card__cta:hover{ background:var(--shop-red-deep); transform:scale(1.03); }

/* ---- Best Sellers highlight section (shop.php bottom + homepage) ---- */
.bestsellers{
  padding-block:var(--space-16);
  background:var(--shop-black);
}
.bestsellers .section-title{ color:#FFFFFF; text-align:center; font-size:calc(var(--text-xl) * 2); }
.bestsellers .section-title .accent{ color:var(--shop-red); }
.bestsellers .section-sub{ text-align:center; color:#C7C7C7; margin-bottom:var(--space-8); }
.bestsellers .product-grid{ grid-template-columns:repeat(4, 1fr); }
.bestsellers .product-card{ background:#1E1E1E; border-color:#333; }
.bestsellers .product-card__img-wrap{ background:#FFFFFF; }
.bestsellers .product-card__name{ color:#FFFFFF; }
.bestsellers .product-card__desc{ color:#9A9A9A; }
.bestsellers .product-card__price{ color:#FFFFFF; }
.bestsellers .product-card__brand{ color:#9A9A9A; }
.bestsellers__viewall-wrap{
  text-align:center;
  margin-top:var(--space-8);
}
.bestsellers__viewall-wrap--top{
  margin-top:0;
  margin-bottom:var(--space-8);
}
.bestsellers__viewall{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  background:linear-gradient(135deg, var(--shop-red) 0%, var(--shop-red-deep) 100%);
  color:#fff;
  font-weight:700;
  font-size:var(--text-lg);
  padding:1.1rem 2.4rem;
  border-radius:var(--radius-pill);
  border:2px solid var(--shop-gold);
  box-shadow:0 8px 24px rgba(226,28,43,0.35);
  text-decoration:none;
  letter-spacing:0.01em;
  transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.bestsellers__viewall .bestsellers__viewall-arrow{
  display:inline-block;
  transition:transform 0.2s ease;
}
.bestsellers__viewall:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 12px 32px rgba(226,28,43,0.5);
  background:linear-gradient(135deg, var(--shop-red-deep) 0%, var(--shop-red) 100%);
}
.bestsellers__viewall:hover .bestsellers__viewall-arrow{ transform:translateX(4px); }
@media (max-width:980px) and (min-width:701px){
  .bestsellers .product-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:700px){
  .bestsellers .product-grid{ grid-template-columns:repeat(2, 1fr); gap:var(--space-3); }
  .bestsellers .product-card__body{ padding:var(--space-3); gap:0.25rem; }
  .bestsellers .product-card__name{ font-size:var(--text-xs); }
  .bestsellers .product-card__desc{ font-size:0.68rem; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
  .bestsellers .product-card__price{ font-size:var(--text-sm); }
  .bestsellers .product-card__cta{ font-size:0.7rem; padding:0.5rem 0.6rem; }
}
@media (max-width:480px){
  .product-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
  .bestsellers__viewall{
    font-size:var(--text-base);
    padding:0.9rem 1.6rem;
    width:100%;
  }
}

/* ---------------- SEO content section (homepage + shop page) ---------------- */
.seo-content{
  padding-block:var(--space-16);
  background:var(--bg);
  border-top:1px solid var(--border);
}
.seo-content .container{ max-width:720px; }
.seo-content__title{ text-align:center; font-size:var(--text-xl); margin-bottom:var(--space-6); }
.seo-content__subtitle{
  font-family:'Fredoka', sans-serif; font-weight:600; font-size:var(--text-lg);
  color:var(--navy); margin-top:var(--space-8); margin-bottom:var(--space-3);
}
.seo-content__body{
  font-size:var(--text-base); color:var(--text-body); line-height:1.65; margin-bottom:var(--space-3);
}
.seo-content__body a{ color:var(--blue); font-weight:600; }
.seo-content__body strong{ color:var(--text); }
.seo-faq{ margin-top:var(--space-2); display:flex; flex-direction:column; gap:var(--space-5); }
.seo-faq__item{
  background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:var(--space-4) var(--space-5);
}
.seo-faq__q{
  font-family:'Fredoka', sans-serif; font-weight:600; font-size:var(--text-base);
  color:var(--navy); margin-bottom:var(--space-2);
}
.seo-faq__a{ font-size:var(--text-sm); color:var(--text-body); line-height:1.6; }

/* ---------------- Category buying-guide list (shop page SEO content) ---------------- */
.seo-content__catlist{ margin:var(--space-3) 0 var(--space-3); padding-left:0; list-style:none; }
.seo-content__catlist li{
  padding:var(--space-3) 0; border-bottom:1px solid var(--border);
  font-size:var(--text-base); color:var(--text-body); line-height:1.6;
}
.seo-content__catlist li:last-child{ border-bottom:none; }
.seo-content__catlist strong{ color:var(--navy); }