/* SiteSkyline product pages: buttons, gallery, variations, FAQ,
   category/tag pills and the Sky Reviews carousel (shared by the single
   product template and the front page). */
/* Product Short Explore Button styling matching single-product.php */
.ss-card-btn {
  background-color: #EAF3F8 !important;
  color: #3282B8 !important;
  font-weight: 700 !important;
  font-size: 0.8125rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.375rem !important;
  padding: 0.65rem 1rem !important;
  border-radius: 0.75rem !important;
  transition: all 0.15s ease-in-out !important;
  white-space: nowrap !important;
}
.ss-card-btn:hover {
  background-color: #3282B8 !important;
  color: #ffffff !important;
}

/* ── Force Buy Now button visible — use theme brand color ─── */
.ss-trigger-buy-now-link {
  background-color: #3282B8 !important;
  color: #ffffff !important;
  border: none !important;
}
.ss-trigger-buy-now-link:hover { background-color: #286a96 !important; color: #ffffff !important; }

/* ── Outlined Try Free button matching brand color #3282B8 ── */
.ss-btn-try-free {
  background-color: #ffffff !important;
  border: 2px solid #3282B8 !important;
  color: #3282B8 !important;
  text-decoration: none !important;
}
.ss-btn-try-free:hover {
  background-color: #EAF3F8 !important;
  border-color: #286a96 !important;
  color: #286a96 !important;
}
.ss-btn-try-free svg {
  color: #3282B8 !important;
}
.ss-btn-try-free:hover svg {
  color: #286a96 !important;
}

/* ── Gallery thumbnails active state (prevents top border clipping) ── */
.gallery-thumb-item {
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  color: #64748b;
}
.gallery-thumb-item:hover {
  border-color: #3282B8;
  color: #3282B8;
}
.gallery-thumb-item.active {
  border: 2px solid #3282B8 !important;
  background-color: #EAF3F8 !important;
  color: #3282B8 !important;
  font-weight: 700 !important;
}

/* ── Explore Related Product Button ───────────────────────── */
.ss-explore-btn {
  background-color: #EAF3F8 !important;
  color: #3282B8 !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0.75rem !important;
  transition: all 0.15s ease-in-out !important;
}
.ss-explore-btn:hover {
  background-color: #d0e8f5 !important;
  color: #286a96 !important;
}

/* ── Hide the WooCommerce default form (we render our own buttons) ── */
.ss-cart-hidden { display:none !important; }

/* ── Variation radio rows ───────────────────────────────────── */
.ss-variation-group { margin-bottom:1rem; }
.ss-variation-label-title { font-size:.875rem; color:#64748b; margin-bottom:.625rem; display:block; }
.ss-variation-list { display:flex; flex-direction:column; border:1px solid #e8ecf0; border-radius:.875rem; overflow:hidden; margin-bottom:1rem; }
.ss-var-row {
  display:flex; align-items:center; gap:.75rem;
  padding:.875rem 1rem; border-bottom:1px solid #f0f3f6;
  cursor:pointer; transition:background .15s; background:#fff;
  user-select:none;
}
.ss-var-row:last-child { border-bottom:0; }
.ss-var-row:hover { background:#f8fafc; }
.ss-var-row.active { background:#EAF3F8; }
.ss-var-radio {
  width:1.25rem; height:1.25rem; border-radius:50%;
  border:2px solid #cbd5e1; flex-shrink:0;
  transition:all .2s; background:#fff;
}
.ss-var-row.active .ss-var-radio {
  border-color:#3282B8; background:#3282B8;
  box-shadow: inset 0 0 0 3px #fff;
}
.ss-var-info { display:flex; flex-direction:column; align-items:flex-start; }
.ss-var-name { font-size:.9375rem; font-weight:600; color:#1e293b; line-height:1.3; }
.ss-var-price-group { display:flex; align-items:center; gap:.4rem; flex-shrink:0; }
.ss-var-save { display:inline-block; width:3.8rem; text-align:center; background:#16a34a; color:#fff; font-size:.7rem; font-weight:700; padding:.15rem 0; border-radius:.25rem; white-space:nowrap; margin-top:1px; }
.ss-var-orig { font-size:.8125rem; color:#94a3b8; text-decoration:line-through; }
.ss-var-price { font-size:.9375rem; font-weight:700; color:#1e293b; line-height:1.3; }
.ss-var-price-wrap { display:flex; flex-direction:column; align-items:flex-end; }
.ss-var-billed { font-size:.6875rem; font-weight:600; color:#64748b; line-height:1.3; margin-top:1px; }
.ss-var-period { font-size:.8125rem; font-weight:600; color:#64748b; }

/* ── Billing period toggle ─────────────────────────────────── */
.ss-billing-toggle {
  display:flex; background:#f1f5f9; border-radius:0.625rem;
  padding:3px; margin-bottom:1rem; gap:3px;
}
.ss-billing-option {
  flex:1; display:flex; flex-direction:row; align-items:center; justify-content:center;
  padding:0.5rem 0.5rem; border-radius:0.5rem; border:none;
  background:transparent; cursor:pointer; transition:all .2s;
  position:relative; gap:5px; font-family:inherit;
}
.ss-billing-option:hover { background:rgba(255,255,255,0.6); }
.ss-billing-option.active {
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px rgba(50,130,184,0.1);
}
.ss-billing-label { font-size:0.8125rem; font-weight:700; color:#475569; line-height:1; }
.ss-billing-option.active .ss-billing-label { color:#1e293b; }
.ss-billing-discount {
  font-size:0.625rem; font-weight:800; color:#16a34a;
  background:#dcfce7; padding:2px 5px; border-radius:3px;
  line-height:1;
}
.ss-billing-option.active .ss-billing-discount {
  background:#16a34a; color:#fff;
}
.ss-billing-best {
  position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  font-size:0.5rem; font-weight:800; text-transform:uppercase;
  letter-spacing:0.04em; color:#fff; background:#3282B8;
  padding:1px 6px; border-radius:3px; white-space:nowrap;
  line-height:1.5;
}

/* ── Category + Tag pills ──────────────────────────────────── */
.ss-cat-pill a { display:inline-flex; align-items:center; background:#EAF3F8; color:#3282B8; font-size:.875rem; font-weight:700; padding:.45rem 1rem; border-radius:9999px; text-decoration:none; transition:background .15s; }
.ss-cat-pill a:hover { background:#d0e8f5; }
.ss-tag-pill a { display:inline-flex; align-items:center; background:#f1f5f9; color:#475569; font-size:.8125rem; font-weight:500; padding:.4rem .875rem; border-radius:9999px; text-decoration:none; transition:background .15s; }
.ss-tag-pill a:hover { background:#e2e8f0; color:#1e293b; }

/* ── Compatible-with avatars ───────────────────────────────── */
.ss-compat-avatar { width:2rem; height:2rem; border-radius:.5rem; background:#e2e8f0; display:flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:700; color:#64748b; flex-shrink:0; }

/* ── FAQ accordion ──────────────────────────────────────────── */
.ss-faq-item summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.ss-faq-item summary::-webkit-details-marker { display:none; }
.ss-faq-chevron { transition:transform .25s; flex-shrink:0; }
.ss-faq-item[open] .ss-faq-chevron { transform:rotate(180deg); }

/* ── Sky review carousel: quiet, compact Scandinavian cards ─────────────── */
.ss-review-carousel { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(290px, 31.5%); gap:1rem; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:2px 2px 1.1rem; scrollbar-width:thin; scrollbar-color:#b9c5cb transparent; }
.ss-review-carousel::-webkit-scrollbar { height:7px; }
.ss-review-carousel::-webkit-scrollbar-thumb { background:#b9c5cb; border-radius:999px; }
.ss-review-card { scroll-snap-align:start; min-height:305px; border:1px solid #dce5e8; border-radius:1rem; background:#fff; padding:1.35rem; box-shadow:0 1px 2px rgba(16,42,67,.04); display:flex; flex-direction:column; }
.ss-review-card:hover { border-color:#c5d8e2; box-shadow:0 8px 24px rgba(16,42,67,.07); }
.ss-review-product { display:flex; min-width:0; align-items:center; gap:.6rem; color:#40586a; text-decoration:none; font-size:.76rem; font-weight:750; }
.ss-review-product:hover { color:#3282B8; }
.ss-review-product-icon { height:1.8rem; width:1.8rem; flex:0 0 1.8rem; border-radius:.48rem; background:#edf4f7; object-fit:contain; padding:.18rem; }
.ss-review-product-initial { display:flex; align-items:center; justify-content:center; color:#3282B8; font-size:.6rem; }
.ss-review-copy { max-height:12.5rem; overflow-y:auto; overscroll-behavior:contain; padding-right:.55rem; color:#526779; font-size:.9rem; line-height:1.65; scrollbar-width:thin; scrollbar-color:#c0ccd2 transparent; }
.ss-review-copy::-webkit-scrollbar { width:5px; }.ss-review-copy::-webkit-scrollbar-thumb { background:#c0ccd2; border-radius:999px; }
.ss-review-copy p { margin:0 0 .75rem; }.ss-review-copy p:last-child { margin-bottom:0; }
.ss-review-nav { display:flex; justify-content:center; gap:.55rem; margin-top:1.25rem; }.ss-review-nav button { width:2.2rem; height:2.2rem; border:1px solid #d5e1e6; border-radius:.65rem; background:#fff; color:#526779; cursor:pointer; transition:.15s; }.ss-review-nav button:hover { border-color:#3282B8; background:#3282B8; color:#fff; }
.ss-breadcrumb nav a { color:#3282B8; font-weight:600; text-decoration:none; transition:all 0.15s ease; }
.ss-breadcrumb nav a:hover { text-decoration:underline; color:#1B262C; }
@media (max-width:1024px) { .ss-review-carousel { grid-auto-columns:minmax(290px, 47%); } }
@media (max-width:640px) { .ss-review-carousel { grid-auto-columns:88%; } .ss-review-card { min-height:0; } }