/* =========================================================================
   Premium Single Product Page — .sp-* namespace
   ========================================================================= */

/* ── CSS Variables ─────────────────────────────────────────────────────── */
:root {
	--sp-radius:      10px;
	--sp-radius-sm:   6px;
	--sp-shadow:      0 2px 12px rgba(0,0,0,.07);
	--sp-shadow-lg:   0 8px 32px rgba(0,0,0,.12);
	--sp-transition:  .18s ease;
	--sp-card-border: 1px solid var(--singair-border, #e5e7eb);
}

/* ── Page wrapper ──────────────────────────────────────────────────────── */
.sp-page {
	margin: 0;
	padding: 0;
}

.sp-page__inner {
	padding-top: 1.5rem;
	padding-bottom: 3rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STOREFRONT BUTTON RESET
   The theme's .singair-storefront button rule (specificity 0,1,1) sets orange
   background + padding on every <button>. Use .singair-storefront--product
   scoping (specificity 0,2,0) to restore product-page-specific button styles.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Tab nav buttons ── */
.singair-storefront--product .sp-tab-btn {
	display:        flex;
	flex-shrink:    0;
	width:          auto;
	min-height:     0;
	padding:        .875rem 1.25rem;
	border:         none;
	border-bottom:  2px solid transparent;
	border-radius:  0;
	margin-bottom:  -1px;
	background:     transparent;
	color:          #6b7280;
	font-size:      .875rem;
	font-weight:    600;
	white-space:    nowrap;
}
.singair-storefront--product .sp-tab-btn:hover {
	background: transparent;
	color: #374151;
}
.singair-storefront--product .sp-tab-btn.is-active {
	background:         transparent;
	color:              var(--singair-primary);
	border-bottom-color: var(--singair-primary);
}

/* ── Quantity ±  buttons ── */
.singair-storefront--product .sp-qty-btn {
	display:        flex;
	flex:           0 0 42px;
	width:          42px;
	min-height:     0;
	height:         auto;
	align-self:     stretch;
	padding:        0;
	border:         none;
	border-radius:  0;
	background:     #f3f4f6;
	color:          #374151;
	font-size:      1.25rem;
	font-weight:    400;
	align-items:    center;
	justify-content: center;
}
.singair-storefront--product .sp-qty-btn:hover { background: #e5e7eb; }

/* ── Wishlist / Compare / Share ── */
.singair-storefront--product .sp-action-btn {
	display:        flex;
	flex:           1;
	align-items:    center;
	justify-content: center;
	gap:            .3rem;
	min-height:     0;
	padding:        .5rem .4rem;
	border:         1px solid var(--singair-border, #e5e7eb);
	border-radius:  var(--sp-radius-sm);
	background:     #fff;
	color:          #374151;
	font-size:      .75rem;
	font-weight:    500;
	white-space:    nowrap;
}
.singair-storefront--product .sp-action-btn:hover {
	border-color: var(--singair-primary);
	color:        var(--singair-primary);
	background:   #fff8f5;
}
.singair-storefront--product .sp-wishlist-btn.is-active {
	color: #ef4444;
	border-color: #ef4444;
	background: #fff;
}

/* ── Buy Now (outline) ── */
.singair-storefront--product .sp-btn--outline {
	background:   transparent;
	color:        var(--singair-primary);
	border:       2px solid var(--singair-primary);
	border-radius: var(--sp-radius-sm);
}
.singair-storefront--product .sp-btn--outline:hover {
	background: var(--singair-primary);
	color: #fff;
}

/* ── Gallery controls ── */
.singair-storefront--product .sp-gallery-zoom-btn,
.singair-storefront--product .sp-gallery-arrow {
	min-height:   0;
	padding:      0;
	border-radius: 50%;
	background:   rgba(255,255,255,.9);
	color:        #374151;
	font-weight:  400;
	border:       var(--sp-card-border);
}
.singair-storefront--product .sp-gallery-zoom-btn:hover,
.singair-storefront--product .sp-gallery-arrow:hover { background: #fff; }

/* ── Lightbox controls ── */
.singair-storefront--product .sp-lightbox__close,
.singair-storefront--product .sp-lightbox__prev,
.singair-storefront--product .sp-lightbox__next {
	min-height:   0;
	padding:      0;
	border-radius: 50%;
	background:   rgba(255,255,255,.12);
	color:        #fff;
	font-weight:  400;
	border:       none;
}
.singair-storefront--product .sp-lightbox__close:hover,
.singair-storefront--product .sp-lightbox__prev:hover,
.singair-storefront--product .sp-lightbox__next:hover { background: rgba(255,255,255,.24); }

/* ── Seller View Store button ── */
.singair-storefront--product .sp-seller-btn--store {
	background:   #fff;
	color:        #374151;
	border:       1.5px solid var(--singair-border, #e5e7eb);
	border-radius: var(--sp-radius-sm);
	font-weight:  600;
}
.singair-storefront--product .sp-seller-btn--store:hover {
	border-color: var(--singair-primary);
	color:        var(--singair-primary);
	background:   #fff;
}

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.sp-breadcrumb {
	margin-bottom: 1.25rem;
}
.sp-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .15rem;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: .8125rem;
	color: #6b7280;
}
.sp-breadcrumb__item a {
	color: inherit;
	text-decoration: none;
}
.sp-breadcrumb__item a:hover { color: var(--singair-primary); }
.sp-breadcrumb__item [aria-current="page"] { color: #111827; font-weight: 500; }
.sp-breadcrumb__sep { margin: 0 .2rem; opacity: .5; }

/* ── 2-Column Layout ───────────────────────────────────────────────────── */
.sp-layout {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 2rem;
	align-items: start;
}
.sp-main { min-width: 0; }
.sp-aside {
	position: sticky;
	top: 80px;
}

/* ── Product Top (gallery + info side by side) ──────────────────────────── */
.sp-product-top {
	display: flex;
	gap: 1.75rem;
	margin-bottom: 1.5rem;
	align-items: flex-start;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GALLERY
═══════════════════════════════════════════════════════════════════════════ */
.sp-gallery {
	display: flex;
	/* Markup is thumbs-then-main; reversed = big image on top, thumbs below. */
	flex-direction: column-reverse;
	gap: .75rem;
	flex-shrink: 0;
	width: 460px;
}

/* Thumbnail strip (horizontal, under the main image) */
.sp-thumbs {
	display: flex;
	flex-direction: row;
	gap: .5rem;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	padding-bottom: 2px;
}
.sp-thumbs::-webkit-scrollbar { height: 4px; }
.sp-thumbs::-webkit-scrollbar-thumb { background: var(--singair-border, #e5e7eb); border-radius: 2px; }

/* Scoped: the global .singair-storefront button rule (orange bg, padding,
   min-height, border:0) outranks a bare .sp-thumb-item and paints orange
   bars around the thumbnails. */
.singair-storefront--product .sp-thumb-item {
	width: 72px;
	height: 72px;
	min-height: 0;
	flex-shrink: 0;
	border: 2px solid var(--singair-border, #e5e7eb);
	border-radius: var(--sp-radius-sm);
	overflow: hidden;
	background: #fff;
	cursor: pointer;
	padding: 0;
	transition: border-color var(--sp-transition), transform var(--sp-transition);
}
.singair-storefront--product .sp-thumb-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.singair-storefront--product .sp-thumb-item:hover              { border-color: var(--singair-primary); }
.singair-storefront--product .sp-thumb-item.is-active          { border-color: var(--singair-primary); box-shadow: 0 0 0 2px rgba(255,106,33,.2); }
.singair-storefront--product .sp-thumb-item[aria-selected="true"] { border-color: var(--singair-primary); }

/* Main image */
.sp-gallery-main {
	position: relative;
	border-radius: var(--sp-radius);
	overflow: hidden;
	background: #f8f9fa;
	cursor: zoom-in;
}
.sp-gallery-img {
	width: 100%;
	height: 460px;
	/* Fill the frame edge-to-edge; non-square photos are center-cropped. */
	object-fit: cover;
	display: block;
	transition: opacity .2s ease, transform var(--sp-transition);
}
.sp-gallery-img.is-loading { opacity: .5; }
.sp-gallery-main:hover .sp-gallery-img { transform: scale(1.04); }

/* Zoom button */
.sp-gallery-zoom-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 36px;
	height: 36px;
	background: rgba(255,255,255,.9);
	border: var(--sp-card-border);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #374151;
	backdrop-filter: blur(4px);
	transition: background var(--sp-transition), transform var(--sp-transition);
	z-index: 2;
}
.sp-gallery-zoom-btn:hover { background: #fff; transform: scale(1.1); }

/* Arrows */
.sp-gallery-arrows {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 .5rem;
	pointer-events: none;
}
.sp-gallery-arrow {
	pointer-events: all;
	width: 34px;
	height: 34px;
	background: rgba(255,255,255,.9);
	border: var(--sp-card-border);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.125rem;
	cursor: pointer;
	color: #374151;
	backdrop-filter: blur(4px);
	transition: background var(--sp-transition), transform var(--sp-transition);
}
.sp-gallery-arrow:hover { background: #fff; transform: scale(1.1); }

/* Counter */
.sp-gallery-counter {
	position: absolute;
	bottom: 10px;
	right: 10px;
	background: rgba(0,0,0,.45);
	color: #fff;
	border-radius: 99px;
	padding: .2rem .65rem;
	font-size: .6875rem;
	pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT INFO
═══════════════════════════════════════════════════════════════════════════ */
.sp-info {
	flex: 1;
	min-width: 0;
}

/* Labels */
.sp-labels {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
	margin-bottom: .5rem;
}
.sp-label {
	display: inline-block;
	padding: .2rem .6rem;
	border-radius: 4px;
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	line-height: 1.4;
}
.sp-label--sale       { background: var(--singair-primary); color: #fff; }
.sp-label--new        { background: #10b981; color: #fff; }
.sp-label--featured   { background: #6366f1; color: #fff; }
.sp-label--bestseller { background: #f59e0b; color: #fff; }

/* Brand */
.sp-brand {
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--singair-primary);
	margin: 0 0 .25rem;
}

/* Title */
.sp-title {
	font-size: 1.3125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--singair-secondary, #111827);
	margin: 0 0 .625rem;
}

/* Rating row */
.sp-rating-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .4rem;
	margin-bottom: .75rem;
	font-size: .8125rem;
}
.sp-stars { display: inline-flex; gap: 1px; }
.sp-star             { font-size: 1rem; line-height: 1; }
.sp-star--full       { color: #f59e0b; }
.sp-star--half       { color: #f59e0b; opacity: .7; }
.sp-star--empty      { color: #d1d5db; }
.sp-rating-score     { font-weight: 700; color: #111827; }
.sp-review-link      { color: #6b7280; text-decoration: underline; cursor: pointer; }
.sp-review-link:hover { color: var(--singair-primary); }
.sp-sold-count       { color: #6b7280; }
.sp-sep              { color: #d1d5db; }

/* Price */
.sp-price-row { margin-bottom: .75rem; }
.sp-price-line {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .4rem;
}
.sp-price-current {
	font-size: 1.875rem;
	font-weight: 800;
	color: var(--singair-primary);
	line-height: 1;
}
.sp-price-current .amount { font-size: inherit; color: inherit; }
.sp-price-original {
	font-size: 1rem;
	color: #9ca3af;
	text-decoration: line-through;
}
.sp-save-badge {
	background: #fee2e2;
	color: #b91c1c;
	font-size: .75rem;
	font-weight: 700;
	padding: .15rem .5rem;
	border-radius: 4px;
}
.sp-save-text {
	font-size: .8125rem;
	color: #15803d;
	font-weight: 600;
	margin: .25rem 0 0;
}
.sp-save-text .amount { color: inherit; font-size: inherit; }

/* Short description */
.sp-short-desc {
	font-size: .875rem;
	line-height: 1.65;
	color: #374151;
	margin-bottom: .75rem;
}
.sp-short-desc ul { padding-left: 1.25rem; }
.sp-short-desc li { margin-bottom: .25rem; }
.sp-short-desc p  { margin-bottom: .5rem; }

/* WooCommerce form (native form for variation JS — styled to match our UI) */
.sp-wc-form { margin-bottom: .75rem; }

/* Hide WC's default quantity + ATC button (we proxy from purchase card) */
.sp-wc-form .quantity,
.sp-wc-form .single_add_to_cart_button,
.sp-wc-form .woocommerce-variation-add-to-cart .button {
	display: none !important;
}

/* Style WC variation table as swatch groups */
.sp-wc-form table.variations { border: none; width: 100%; }
.sp-wc-form table.variations td,
.sp-wc-form table.variations th { padding: 0; border: none; vertical-align: top; }
.sp-wc-form table.variations .label { padding-right: .5rem; }
.sp-wc-form table.variations .label label {
	font-size: .8125rem;
	font-weight: 600;
	color: #374151;
	white-space: nowrap;
	display: flex;
	align-items: center;
	height: 36px;
}
/* Keep selects accessible but visually hidden — JS renders swatches instead */
.sp-wc-form table.variations select {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	clip: rect(0,0,0,0);
}
/* Swatch wrapper injected by JS */
.sp-swatch-row    { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-bottom: .5rem; }
.sp-swatch        {
	min-width: 36px;
	height: 36px;
	padding: 0 .625rem;
	border: 2px solid var(--singair-border, #e5e7eb);
	border-radius: 6px;
	background: #fff;
	font-size: .8125rem;
	font-weight: 500;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color var(--sp-transition), box-shadow var(--sp-transition), transform .12s;
	color: #374151;
}
.sp-swatch:hover      { border-color: var(--singair-primary); }
.sp-swatch.is-active  { border-color: var(--singair-primary); color: var(--singair-primary); background: #fff8f5; box-shadow: 0 0 0 3px rgba(255,106,33,.15); }
.sp-swatch--color     { width: 36px; height: 36px; padding: 0; border-radius: 50%; }
.sp-swatch--disabled  { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.sp-swatch-group-label { font-size: .8125rem; font-weight: 600; color: #374151; margin-bottom: .35rem; display: block; }
.sp-swatch-group-label em { font-style: normal; font-weight: 400; color: #6b7280; margin-left: .35rem; }

/* Clear link */
.sp-wc-form .reset_variations,
.sp-wc-form a.reset_variations { font-size: .75rem; color: #6b7280; }

/* Meta table */
.sp-meta-table {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .3rem .75rem;
	font-size: .8125rem;
	margin-top: .75rem;
}
.sp-meta-key { color: #6b7280; font-weight: 500; white-space: nowrap; }
.sp-meta-val { font-weight: 600; color: #111827; }
.sp-stock-in  { color: #15803d; }
.sp-stock-out { color: #b91c1c; }

/* ═══════════════════════════════════════════════════════════════════════════
   TRUST BADGES
═══════════════════════════════════════════════════════════════════════════ */
.sp-trust-badges {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	background: #fff;
	border: var(--sp-card-border);
	border-radius: var(--sp-radius);
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}
.sp-trust-badge {
	display: flex;
	align-items: center;
	gap: .75rem;
}
.sp-trust-badge__icon {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: #f8fafc;
	border-radius: 8px;
	border: 1px solid var(--singair-border, #e5e7eb);
}
.sp-trust-badge__icon i { font-size: 1.125rem; }
.sp-trust-badge__label {
	font-size: .8125rem;
	font-weight: 600;
	color: #111827;
	margin: 0 0 .1rem;
	line-height: 1.2;
}
.sp-trust-badge__sub {
	font-size: .6875rem;
	color: #6b7280;
	margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABS
═══════════════════════════════════════════════════════════════════════════ */
.sp-tabs {
	background: #fff;
	border: var(--sp-card-border);
	border-radius: var(--sp-radius);
	overflow: hidden;
	margin-bottom: 1.5rem;
}
.sp-tabs__nav {
	display: flex;
	border-bottom: 1px solid var(--singair-border, #e5e7eb);
	overflow-x: auto;
	scrollbar-width: none;
}
.sp-tabs__nav::-webkit-scrollbar { display: none; }

.sp-tab-btn {
	flex-shrink: 0;
	padding: .875rem 1.25rem;
	font-size: .875rem;
	font-weight: 600;
	color: #6b7280;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	cursor: pointer;
	transition: color var(--sp-transition), border-color var(--sp-transition);
	white-space: nowrap;
}
.sp-tab-btn:hover    { color: #374151; }
.sp-tab-btn.is-active { color: var(--singair-primary); border-bottom-color: var(--singair-primary); }

.sp-tab-pane { display: none; padding: 1.5rem; }
.sp-tab-pane.is-active { display: block; }

/* Description */
.sp-description { font-size: .9375rem; line-height: 1.75; color: #374151; }
.sp-description img { max-width: 100%; border-radius: var(--sp-radius-sm); }
.sp-description h2, .sp-description h3, .sp-description h4 { color: #111827; margin: 1.25rem 0 .5rem; }
.sp-description ul, .sp-description ol { padding-left: 1.25rem; }
.sp-description li { margin-bottom: .35rem; }
.sp-description table { width: 100%; border-collapse: collapse; }
.sp-description table th,
.sp-description table td { padding: .5rem .75rem; border: 1px solid var(--singair-border, #e5e7eb); font-size: .875rem; }
.sp-description table th { background: #f9fafb; font-weight: 600; }

/* Specs */
.sp-specs-search-wrap { margin-bottom: 1rem; }
.sp-specs-search {
	width: 100%;
	max-width: 320px;
	padding: .5rem .875rem;
	border: 1px solid var(--singair-border, #e5e7eb);
	border-radius: var(--sp-radius-sm);
	font-size: .875rem;
	outline: none;
	transition: border-color var(--sp-transition);
}
.sp-specs-search:focus { border-color: var(--singair-primary); }

.sp-specs-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.sp-specs-row { border-bottom: 1px solid var(--singair-border, #e5e7eb); }
.sp-specs-row:last-child { border-bottom: none; }
.sp-specs-row:nth-child(even) { background: #f9fafb; }
.sp-specs-key {
	padding: .65rem .75rem;
	color: #6b7280;
	font-weight: 500;
	white-space: nowrap;
	width: 40%;
	vertical-align: top;
}
.sp-specs-val { padding: .65rem .75rem; color: #111827; font-weight: 500; }
.sp-specs-empty { font-size: .875rem; color: #9ca3af; text-align: center; padding: 1.5rem 0; }
.sp-specs-row.is-hidden { display: none; }

/* Reviews */
.sp-review-summary {
	display: flex;
	gap: 2rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--singair-border, #e5e7eb);
	flex-wrap: wrap;
}
.sp-review-summary__score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	min-width: 100px;
}
.sp-review-summary__num  { font-size: 3rem; font-weight: 800; color: #111827; line-height: 1; }
.sp-review-summary__total { font-size: .8125rem; color: #6b7280; }
.sp-review-dist          { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: .4rem; justify-content: center; }
.sp-review-dist__row     { display: flex; align-items: center; gap: .6rem; font-size: .75rem; }
.sp-review-dist__label   { width: 24px; text-align: right; color: #6b7280; flex-shrink: 0; }
.sp-review-dist__bar     { flex: 1; height: 8px; background: #f3f4f6; border-radius: 99px; overflow: hidden; }
.sp-review-dist__fill    { height: 100%; background: #f59e0b; border-radius: 99px; transition: width .4s ease; }
.sp-review-dist__count   { width: 24px; text-align: left; color: #6b7280; flex-shrink: 0; }

/* WooCommerce comments integration */
.sp-wc-reviews .woocommerce-Reviews-title { display: none; }
.sp-wc-reviews #reviews #comments { padding: 0; }
.sp-wc-reviews ol.commentlist { padding: 0; list-style: none; }
.sp-wc-reviews ol.commentlist li { margin-bottom: 1.25rem; }
.sp-wc-reviews .comment_container { display: flex; gap: 1rem; }
.sp-wc-reviews .comment-text { flex: 1; background: #f9fafb; border: var(--sp-card-border); border-radius: var(--sp-radius-sm); padding: 1rem; }
.sp-wc-reviews .star-rating { color: #f59e0b; }
.sp-wc-reviews .woocommerce-review__author { font-weight: 600; font-size: .875rem; }
.sp-wc-reviews .woocommerce-review__dash { display: none; }
.sp-wc-reviews .woocommerce-review__published-date { color: #9ca3af; font-size: .75rem; }
.sp-wc-reviews p.description { font-size: .875rem; margin-top: .5rem; color: #374151; }
.sp-wc-reviews #review_form_wrapper { margin-top: 1.5rem; }
.sp-wc-reviews #review_form .comment-form-rating { margin-bottom: .75rem; }

/* Q&A */
.sp-qa-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.sp-qa-item { background: #f9fafb; border: var(--sp-card-border); border-radius: var(--sp-radius-sm); padding: 1rem; }
.sp-qa-question, .sp-qa-answer { display: flex; gap: .6rem; font-size: .875rem; }
.sp-qa-answer { margin-top: .625rem; padding-top: .625rem; border-top: 1px solid var(--singair-border, #e5e7eb); }
.sp-qa-q-icon, .sp-qa-a-icon {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .6875rem;
	font-weight: 700;
	flex-shrink: 0;
}
.sp-qa-q-icon { background: var(--singair-primary); color: #fff; }
.sp-qa-a-icon { background: #10b981; color: #fff; }
.sp-qa-question p, .sp-qa-answer p { margin: 0; line-height: 1.55; color: #374151; }
.sp-qa-empty { color: #9ca3af; font-size: .875rem; }
.sp-qa-form-wrap { border-top: 1px solid var(--singair-border, #e5e7eb); padding-top: 1.25rem; margin-top: 1rem; }
.sp-qa-form-wrap h4 { font-size: .9375rem; margin: 0 0 .75rem; }
.sp-qa-input {
	width: 100%;
	padding: .625rem .875rem;
	border: 1px solid var(--singair-border, #e5e7eb);
	border-radius: var(--sp-radius-sm);
	font-size: .875rem;
	font-family: inherit;
	resize: vertical;
	outline: none;
	transition: border-color var(--sp-transition);
}
.sp-qa-input:focus { border-color: var(--singair-primary); }
.sp-qa-login-prompt { font-size: .875rem; color: #6b7280; }
.sp-qa-login-prompt a { color: var(--singair-primary); }

/* ═══════════════════════════════════════════════════════════════════════════
   PURCHASE CARD
═══════════════════════════════════════════════════════════════════════════ */
.sp-purchase-card {
	background: #fff;
	border: var(--sp-card-border);
	border-radius: var(--sp-radius);
	padding: 1.25rem;
	margin-bottom: .875rem;
	box-shadow: var(--sp-shadow);
}

.sp-pc-price {
	font-size: 1.375rem;
	font-weight: 800;
	color: var(--singair-primary);
	margin-bottom: .875rem;
	line-height: 1;
}
.sp-pc-price .amount { font-size: inherit; color: inherit; }
.sp-pc-price del { color: #9ca3af; font-size: .875rem; text-decoration: line-through; }

.sp-low-stock-warning {
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: var(--sp-radius-sm);
	padding: .45rem .75rem;
	font-size: .8125rem;
	color: #92400e;
	font-weight: 500;
	margin-bottom: .875rem;
}

/* Quantity */
.sp-qty-label {
	display: block;
	font-size: .8125rem;
	font-weight: 600;
	color: #374151;
	margin-bottom: .35rem;
}
.sp-qty-control {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--singair-border, #e5e7eb);
	border-radius: var(--sp-radius-sm);
	overflow: hidden;
	margin-bottom: .875rem;
	width: 140px;
}
.sp-qty-btn {
	width: 42px;
	background: #f3f4f6;
	border: none;
	font-size: 1.25rem;
	color: #374151;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--sp-transition);
	flex-shrink: 0;
}
.sp-qty-btn:hover { background: #e5e7eb; }
.sp-qty-input {
	flex: 1;
	width: 56px;
	text-align: center;
	border: none;
	border-left: 1px solid var(--singair-border, #e5e7eb);
	border-right: 1px solid var(--singair-border, #e5e7eb);
	font-size: 1rem;
	font-weight: 600;
	color: #111827;
	-moz-appearance: textfield;
}
.sp-qty-input::-webkit-inner-spin-button,
.sp-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.sp-qty-input:focus { outline: none; border-color: var(--singair-primary); }

/* Buttons */
.sp-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 100%;
	padding: .875rem 1.25rem;
	border-radius: var(--sp-radius-sm);
	font-size: .9375rem;
	font-weight: 700;
	cursor: pointer;
	border: 2px solid transparent;
	transition: background var(--sp-transition), border-color var(--sp-transition), transform .1s, box-shadow var(--sp-transition);
	margin-bottom: .5rem;
	text-decoration: none;
	font-family: inherit;
	line-height: 1;
}
.sp-btn:last-child { margin-bottom: 0; }
.sp-btn--primary {
	background: var(--singair-primary);
	color: #fff;
	border-color: var(--singair-primary);
}
.sp-btn--primary:hover {
	background: color-mix(in srgb, var(--singair-primary), black 10%);
	box-shadow: 0 4px 16px rgba(255,106,33,.3);
}
.sp-btn--primary:active { transform: scale(.98); }
.sp-btn--outline {
	background: transparent;
	color: var(--singair-primary);
	border-color: var(--singair-primary);
}
.sp-btn--outline:hover { background: var(--singair-primary); color: #fff; }
.sp-btn:disabled,
.sp-btn.is-disabled {
	opacity: .45;
	cursor: not-allowed;
	pointer-events: none;
}
.sp-btn.is-loading .sp-atc-btn-text::after {
	content: '…';
	animation: sp-ellipsis 1s infinite;
}
@keyframes sp-ellipsis {
	0%   { content: '.';   }
	33%  { content: '..';  }
	66%  { content: '...'; }
}

/* Wishlist / Compare / Share */
.sp-actions-row {
	display: flex;
	gap: .5rem;
	margin-bottom: .875rem;
}
.sp-action-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .3rem;
	padding: .5rem .4rem;
	border: 1px solid var(--singair-border, #e5e7eb);
	border-radius: var(--sp-radius-sm);
	font-size: .75rem;
	font-weight: 500;
	color: #374151;
	background: #fff;
	cursor: pointer;
	transition: border-color var(--sp-transition), color var(--sp-transition), background var(--sp-transition);
	white-space: nowrap;
}
.sp-action-btn:hover { border-color: var(--singair-primary); color: var(--singair-primary); background: #fff8f5; }
.sp-wishlist-btn.is-active { color: #ef4444; border-color: #ef4444; }

/* Delivery info */
.sp-delivery-info { border-top: 1px solid var(--singair-border, #e5e7eb); padding-top: .875rem; margin-bottom: .75rem; }
.sp-delivery-row {
	display: flex;
	align-items: flex-start;
	gap: .625rem;
	font-size: .8125rem;
	color: #374151;
	padding: .35rem 0;
}
.sp-delivery-icon {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: #f3f4f6;
	border-radius: 6px;
	margin-top: .05rem;
}
.sp-delivery-icon i { font-size: .875rem; color: var(--singair-primary); }
.sp-delivery-text strong { display: block; font-weight: 600; font-size: .8125rem; color: #111827; }
.sp-delivery-sub { color: #9ca3af; font-size: .75rem; }

/* Secure row */
.sp-secure-row {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: .75rem;
	color: #6b7280;
	margin-bottom: .6rem;
}
.sp-secure-row i { color: #15803d; font-size: .875rem; }

/* Payment chips */
.sp-payment-icons {
	display: flex;
	align-items: center;
	gap: .35rem;
	flex-wrap: wrap;
}
.sp-payment-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 22px;
	padding: 0 .5rem;
	border: 1px solid var(--singair-border, #e5e7eb);
	border-radius: 3px;
	font-size: .625rem;
	font-weight: 800;
	letter-spacing: .03em;
	background: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SELLER CARD
═══════════════════════════════════════════════════════════════════════════ */
.sp-seller-card {
	background: #fff;
	border: var(--sp-card-border);
	border-radius: var(--sp-radius);
	padding: 1.25rem;
	margin-bottom: .875rem;
	box-shadow: var(--sp-shadow);
}
.sp-seller-card__heading {
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #9ca3af;
	margin: 0 0 .75rem;
}
.sp-seller-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.sp-seller-logo {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--singair-border, #e5e7eb);
	flex-shrink: 0;
}
.sp-seller-logo-placeholder {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--singair-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.375rem;
	font-weight: 700;
	flex-shrink: 0;
}
.sp-seller-name {
	display: block;
	font-size: .9375rem;
	font-weight: 700;
	color: #111827;
	text-decoration: none;
	line-height: 1.2;
}
.sp-seller-name:hover { color: var(--singair-primary); }
.sp-seller-verified {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	font-size: .75rem;
	font-weight: 600;
	color: #15803d;
	margin-top: .2rem;
}

.sp-seller-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .5rem;
	text-align: center;
	margin-bottom: 1rem;
	padding: .75rem 0;
	border-top: 1px solid var(--singair-border, #e5e7eb);
	border-bottom: 1px solid var(--singair-border, #e5e7eb);
}
.sp-seller-stat-val   { display: block; font-size: .9375rem; font-weight: 700; color: #111827; }
.sp-seller-stat-label { display: block; font-size: .6875rem; color: #9ca3af; margin-top: .15rem; line-height: 1.2; }

.sp-seller-actions { display: flex; gap: .5rem; margin-bottom: .875rem; }
.sp-seller-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	padding: .6rem .75rem;
	border-radius: var(--sp-radius-sm);
	font-size: .8125rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border: none;
	transition: opacity var(--sp-transition);
}
.sp-seller-btn:hover { opacity: .85; }
.sp-seller-btn--chat  { background: var(--singair-primary); color: #fff; }
.sp-seller-btn--store { border: 1.5px solid var(--singair-border, #e5e7eb); background: #fff; color: #374151; }
.sp-seller-btn--store:hover { border-color: var(--singair-primary); color: var(--singair-primary); }

.sp-seller-meta {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	font-size: .75rem;
	color: #9ca3af;
}
.sp-seller-meta span { display: flex; align-items: center; gap: .35rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   RELATED PRODUCTS
═══════════════════════════════════════════════════════════════════════════ */
.sp-related {
	background: #fff;
	border: var(--sp-card-border);
	border-radius: var(--sp-radius);
	padding: 1.25rem;
	box-shadow: var(--sp-shadow);
}
.sp-related-title {
	font-size: 1rem;
	font-weight: 700;
	color: #111827;
	margin: 0 0 1rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid #f1f3f5;
}

.sp-related-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .25rem;
}

/* ── Compact horizontal card ──────────────────────────────────────────────── */
.sp-related-card {
	display: flex;
	align-items: center;
	gap: .875rem;
	padding: .625rem;
	border-radius: 12px;
	border: 1px solid transparent;
	transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.sp-related-card:hover {
	background: #fff;
	border-color: #eef0f3;
	box-shadow: 0 8px 22px rgb(17 24 39 / 0.07);
}

/* Thumbnail */
.sp-related-thumb {
	position: relative;
	flex-shrink: 0;
	width: 68px;
	height: 68px;
	border-radius: 10px;
	overflow: hidden;
	background: #f5f6f8;
	display: block;
}
.sp-related-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.sp-related-card:hover .sp-related-thumb img { transform: scale(1.07); }
.sp-related-badge {
	position: absolute;
	top: 4px;
	left: 4px;
	background: var(--singair-primary);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	padding: 3px 5px;
	border-radius: 5px;
	letter-spacing: .2px;
}

/* Info */
.sp-related-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .25rem;
}
.sp-related-name {
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
	color: #111827;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sp-related-name a { color: inherit; text-decoration: none; }
.sp-related-card:hover .sp-related-name a { color: var(--singair-primary); }

.sp-related-rating {
	display: flex;
	align-items: center;
	gap: .25rem;
	font-size: 11px;
	color: #f59e0b;
	font-weight: 600;
}
.sp-related-rating .sp-related-reviews { color: #9ca3af; font-weight: 400; }

.sp-related-price {
	font-size: .875rem;
	font-weight: 700;
	color: var(--singair-primary);
	line-height: 1.2;
}
.sp-related-price del {
	color: #9ca3af;
	font-weight: 400;
	font-size: .75rem;
	margin-left: .35rem;
}
.sp-related-price ins { text-decoration: none; }

/* Add-to-cart / select-options button */
.sp-related-add {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	background: var(--singair-primary);
	color: #fff;
	border: none;
	cursor: pointer;
	text-decoration: none;
	font-size: 13px;
	transition: filter .15s ease, transform .15s ease, background-color .2s ease;
}
.sp-related-add:hover {
	filter: brightness(1.07);
	transform: translateY(-1px);
	color: #fff;
}
.sp-related-add:active { transform: translateY(0); }
.sp-related-add--link { background: #111827; }

/* WooCommerce AJAX states (classes toggled by wc-add-to-cart.js) */
.sp-related-add.loading {
	pointer-events: none;
	opacity: .65;
}
.sp-related-add.loading i::before { content: "\f110"; } /* fa-spinner */
.sp-related-add.loading i {
	display: inline-block;
	animation: sp-rel-spin .7s linear infinite;
}
.sp-related-add.added {
	background: #16a34a;
}
.sp-related-add.added i::before { content: "\f00c"; } /* fa-check */

/* Hide WC's auto-appended inline "View cart" link — keep the card compact.
   The cart fragments/count still refresh normally. */
.sp-related-card .added_to_cart { display: none !important; }

@keyframes sp-rel-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════════════════════════════════════════ */
.sp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(0,0,0,.93);
	display: none;
	align-items: center;
	justify-content: center;
	animation: sp-fade-in .2s ease;
}
.sp-lightbox.is-open { display: flex; }
@keyframes sp-fade-in { from { opacity: 0; } to { opacity: 1; } }

.sp-lightbox__img {
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
	border-radius: var(--sp-radius-sm);
	user-select: none;
}
.sp-lightbox__close,
.sp-lightbox__prev,
.sp-lightbox__next {
	position: absolute;
	background: rgba(255,255,255,.12);
	border: none;
	color: #fff;
	cursor: pointer;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--sp-transition);
	font-size: 1.375rem;
}
.sp-lightbox__close,
.sp-lightbox__prev,
.sp-lightbox__next { width: 46px; height: 46px; }
.sp-lightbox__close:hover,
.sp-lightbox__prev:hover,
.sp-lightbox__next:hover { background: rgba(255,255,255,.24); }
.sp-lightbox__close { top: 1.25rem; right: 1.25rem; font-size: 1rem; }
.sp-lightbox__prev  { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.sp-lightbox__next  { right: 1.25rem; top: 50%; transform: translateY(-50%); }
.sp-lightbox__counter {
	position: absolute;
	bottom: 1.25rem;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(255,255,255,.15);
	color: #fff;
	border-radius: 99px;
	padding: .25rem .875rem;
	font-size: .8125rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE STICKY ATC
═══════════════════════════════════════════════════════════════════════════ */
.sp-mobile-atc {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: #fff;
	border-top: 1px solid var(--singair-border, #e5e7eb);
	padding: .75rem 1rem;
	align-items: center;
	gap: .75rem;
	box-shadow: 0 -4px 16px rgba(0,0,0,.08);
}
.sp-mobile-atc__info { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; }
.sp-mobile-atc__img  { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.sp-mobile-atc__price { font-weight: 700; color: var(--singair-primary); font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-mobile-atc__btn  { width: auto; flex-shrink: 0; padding: .75rem 1.25rem; margin-bottom: 0; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
	.sp-layout { grid-template-columns: 1fr 320px; gap: 1.5rem; }
}

@media (max-width: 1024px) {
	.sp-layout { grid-template-columns: 1fr; }
	.sp-aside  { position: static; }
	.sp-mobile-atc { display: flex; }
	.sp-trust-badges { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
	/* Show aside below main */
	.sp-aside > * { margin-bottom: .875rem; }
}

@media (max-width: 900px) {
	.sp-product-top { flex-direction: column; }
	.sp-gallery { width: 100%; max-width: 100%; }
	.sp-gallery-img { height: 340px; }
}

@media (max-width: 768px) {
	.sp-gallery { flex-direction: column-reverse; }
	.sp-thumbs {
		flex-direction: row;
		max-height: none;
		overflow-x: auto;
		overflow-y: visible;
	}
	.sp-thumb-item { flex-shrink: 0; }
	.sp-trust-badges { grid-template-columns: repeat(2, 1fr); padding: .75rem 1rem; }
	.sp-review-summary { flex-direction: column; gap: 1rem; }
}

@media (max-width: 480px) {
	.sp-price-current { font-size: 1.5rem; }
	.sp-title { font-size: 1.125rem; }
	.sp-trust-badges { grid-template-columns: 1fr 1fr; }
	.sp-seller-stats { gap: .25rem; }
	.sp-actions-row { gap: .35rem; }
	.sp-action-btn { font-size: .6875rem; padding: .4rem .3rem; }
}

/* ── Product Q&A (real) ─────────────────────────────────────────────────── */
.sp-qa-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.sp-qa-title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.sp-qa-search { position: relative; display: flex; align-items: center; }
.sp-qa-search i { position: absolute; left: .7rem; color: #9ca3af; font-size: .85rem; }
.sp-qa-search input { height: 38px; padding: 0 .8rem 0 2rem; border: 1px solid #e5e7eb; border-radius: 8px; font-size: .85rem; min-width: 220px; }
.sp-qa-search input:focus { outline: none; border-color: var(--singair-primary); }

.sp-qa-form { background: #fff7f2; border: 1px solid #ffe0cf; border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1.5rem; }
.sp-qa-form__label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .55rem; color: #1f2937; }
.sp-qa-form__row { display: flex; gap: .6rem; align-items: stretch; }
.sp-qa-form .sp-qa-input { flex: 1; min-height: 46px; resize: vertical; margin: 0; }
.sp-qa-form .sp-qa-submit {
	flex-shrink: 0; align-self: stretch; min-height: 46px; padding: 0 1.25rem; border: 0; border-radius: 10px;
	background: var(--singair-primary); color: #fff; font-weight: 700; font-size: .9rem; cursor: pointer;
	display: inline-flex; align-items: center; gap: .45rem;
}
.sp-qa-form .sp-qa-submit:hover { filter: brightness(1.05); }
.sp-qa-form__hint { margin: .55rem 0 0; font-size: .78rem; color: #9ca3af; }

.sp-qa-body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.sp-qa-text { margin: 0; line-height: 1.55; color: #374151; }
.sp-qa-meta { font-size: .74rem; color: #9ca3af; }
.sp-qa-meta--seller { color: #15803d; font-weight: 600; }
.sp-qa-meta--seller i { margin-right: .2rem; }
.sp-qa-pending-answer { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed #e5e7eb; font-size: .8rem; color: #9ca3af; }
.sp-qa-pending-answer i { margin-right: .25rem; }
.sp-qa-login-prompt { display: flex; align-items: center; gap: .4rem; background: #f9fafb; border: 1px solid #f0f0f0; border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1.25rem; }

.sp-qa-root .sp-qa-more {
	display: block; margin: 0 auto; min-height: 42px; padding: 0 1.4rem; border: 1px solid #e5e7eb;
	border-radius: 10px; background: #fff; color: #374151; font-weight: 600; font-size: .85rem; cursor: pointer;
}
.sp-qa-root .sp-qa-more:hover { border-color: var(--singair-primary); color: var(--singair-primary); }

@media (max-width: 560px) {
	.sp-qa-form__row { flex-direction: column; }
	.sp-qa-form .sp-qa-submit { align-self: flex-end; }
	.sp-qa-search input { min-width: 0; width: 100%; }
	.sp-qa-head { flex-direction: column; align-items: stretch; }
}

/* Vendor vacation-mode notice on the single product page */
.sp-vacation-notice { display: flex; align-items: center; gap: .5rem; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 10px; padding: .7rem .9rem; font-size: .85rem; font-weight: 600; margin: 0 0 1rem; }
.sp-vacation-notice i { color: #d97706; }

/* Root overflow fix: sp-layout single-column collapse must shrink below content */
@media (max-width: 900px) {
	.sp-layout { grid-template-columns: minmax(0, 1fr) !important; }
	.sp-layout > *, .sp-main, .sp-aside { min-width: 0; }
	.sp-tabs__nav { overflow-x: auto; scrollbar-width: none; }
	.sp-tabs__nav::-webkit-scrollbar { display: none; }
}
