/* =========================================================
PAGE RESET
========================================================= */

.sd-player-page {
width: 100%;
background: #ffffff;
color: #111111;
font-family: Arial, Helvetica, sans-serif;
overflow: hidden;
}

.sd-player-page * {
box-sizing: border-box;
}

.sd-player-page a {
text-decoration: none;
}

/* =========================================================
TOP PROMO BAR
========================================================= */

.sd-player-promo {
background: #0b0b0b;
color: #ffffff;
text-align: center;
padding: 11px 15px;
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
}

.sd-player-promo span {
color: #d4af37;
}

/* =========================================================
MAIN PRODUCT AREA
========================================================= */

.sd-player-main {
max-width: 1380px;
margin: 0 auto;
padding: 65px 35px 70px;

display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 75px;
align-items: start;
}

/* =========================================================
PRODUCT GALLERY
========================================================= */

.sd-player-gallery {
position: relative;
}

.sd-player-image-box {
min-height: 680px;

background:
radial-gradient(
circle at center,
#ffffff 0%,
#f5f5f5 65%,
#e8e8e8 100%
);

border: 1px solid #e3e3e3;

display: flex;
align-items: center;
justify-content: center;

position: relative;

overflow: hidden;
}

.sd-player-image-box::before {
content: “SD SPORTS™”;

position: absolute;

top: 25px;
left: 28px;

font-size: 10px;
font-weight: 900;

letter-spacing: 3px;

color: #b7b7b7;
}

.sd-player-image-box img {
width: 78%;
max-width: 620px;
height: auto;

max-height: 650px;

object-fit: contain;

display: block;

transition: transform .35s ease;
}

.sd-player-image-box:hover img {
transform: scale(1.025);
}

/* =========================================================
OFFER BADGE
========================================================= */

.sd-player-offer-badge {
position: absolute;

top: 25px;
right: 25px;

width: 78px;
height: 78px;

border-radius: 50%;

background:
linear-gradient(
145deg,
#b40000,
#700000
);

color: #ffffff;

display: flex;
align-items: center;
justify-content: center;

text-align: center;

font-size: 11px;
line-height: 1.2;
font-weight: 900;

letter-spacing: .5px;

box-shadow:
0 8px 25px rgba(120,0,0,.25);
}

/* =========================================================
PRODUCT THUMBNAILS
========================================================= */

.sd-player-thumbs {
display: flex;
gap: 10px;

margin-top: 12px;
}

.sd-player-thumb {
width: 78px;
height: 78px;

border: 1px solid #dddddd;

display: flex;
align-items: center;
justify-content: center;

background: #fafafa;

cursor: pointer;

transition:
border-color .2s ease,
box-shadow .2s ease;
}

.sd-player-thumb.active,
.sd-player-thumb:hover {
border-color: #b40000;

box-shadow:
0 0 0 1px #b40000;
}

.sd-player-thumb img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
}

/* =========================================================
PRODUCT INFORMATION
========================================================= */

.sd-player-info {
padding-top: 10px;
}

.sd-player-brand {
color: #b40000;

font-size: 11px;

font-weight: 900;

letter-spacing: 3px;

margin-bottom: 15px;
}

.sd-player-title {
font-size: clamp(34px, 4vw, 56px);

line-height: .98;

font-weight: 900;

letter-spacing: -2px;

margin: 0 0 14px;

text-transform: uppercase;
}

.sd-player-subtitle {
color: #555555;

font-size: 15px;

line-height: 1.6;

margin-bottom: 20px;
}

/* =========================================================
RATING
========================================================= */

.sd-player-rating {
display: flex;
align-items: center;
gap: 10px;

margin-bottom: 25px;
}

.sd-player-stars {
color: #d4af37;

font-size: 16px;

letter-spacing: 2px;
}

.sd-player-review-link {
color: #555555;

font-size: 12px;

text-decoration: underline;
}

/* =========================================================
PRICE
========================================================= */

.sd-player-price-area {
padding: 22px 0;

border-top: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;

margin-bottom: 25px;
}

.sd-player-price-row {
display: flex;

align-items: center;

flex-wrap: wrap;

gap: 12px;
}

.sd-player-sale-price {
font-size: 34px;

font-weight: 900;

color: #b40000;
}

.sd-player-mrp {
font-size: 17px;

color: #888888;

text-decoration: line-through;
}

.sd-player-discount {
background: #111111;

color: #d4af37;

padding: 7px 10px;

font-size: 10px;

font-weight: 900;

letter-spacing: 1px;
}

.sd-player-tax {
color: #777777;

font-size: 11px;

margin-top: 8px;
}

/* =========================================================
KEY SPECS
========================================================= */

.sd-player-spec-grid {
display: grid;

grid-template-columns:
repeat(3, 1fr);

border: 1px solid #e5e5e5;

margin-bottom: 25px;
}

.sd-player-spec {
padding: 16px 12px;

text-align: center;

border-right: 1px solid #e5e5e5;
}

.sd-player-spec:last-child {
border-right: none;
}

.sd-player-spec-label {
color: #888888;

font-size: 9px;

font-weight: 700;

letter-spacing: 1.5px;

margin-bottom: 6px;

text-transform: uppercase;
}

.sd-player-spec-value {
font-size: 13px;

font-weight: 900;

text-transform: uppercase;
}

/* =========================================================
QUANTITY
========================================================= */

.sd-player-quantity-row {
display: flex;

align-items: center;

gap: 14px;

margin-bottom: 15px;
}

.sd-player-quantity-label {
font-size: 11px;

font-weight: 800;

letter-spacing: 1px;
}

.sd-player-quantity {
display: flex;

align-items: center;

border: 1px solid #cccccc;
}

.sd-player-quantity button {
width: 38px;
height: 38px;

border: none;

background: #f5f5f5;

font-size: 18px;

cursor: pointer;
}

.sd-player-quantity input {
width: 45px;
height: 38px;

border: none;

border-left: 1px solid #ddd;
border-right: 1px solid #ddd;

text-align: center;

font-weight: 800;

font-size: 13px;
}

/* =========================================================
ADD TO CART
========================================================= */

.sd-player-add-cart {
width: 100%;

min-height: 56px;

border: none;

background:
linear-gradient(
135deg,
#b40000,
#7b0000
);

color: #ffffff;

font-size: 12px;

font-weight: 900;

letter-spacing: 1.5px;

cursor: pointer;

transition:
transform .2s ease,
box-shadow .2s ease,
background .2s ease;

margin-bottom: 10px;
}

.sd-player-add-cart:hover {
background:
linear-gradient(
135deg,
#d00000,
#900000
);

transform: translateY(-2px);

box-shadow:
0 10px 25px rgba(130,0,0,.22);
}

/* =========================================================
BUY NOW
========================================================= */

.sd-player-buy-now {
width: 100%;

min-height: 56px;

border: 1px solid #111111;

background: #111111;

color: #ffffff;

font-size: 12px;

font-weight: 900;

letter-spacing: 1.5px;

cursor: pointer;

transition:
background .2s ease,
color .2s ease;
}

.sd-player-buy-now:hover {
background: #d4af37;

border-color: #d4af37;

color: #111111;
}

/* =========================================================
WHATSAPP ORDER
========================================================= */

.sd-player-whatsapp {
width: 100%;

min-height: 50px;

margin-top: 10px;

display: flex;

align-items: center;

justify-content: center;

gap: 8px;

background: #f3f3f3;

border: 1px solid #dddddd;

color: #111111;

font-size: 11px;

font-weight: 900;

letter-spacing: 1px;

transition:
background .2s ease,
border-color .2s ease;
}

.sd-player-whatsapp:hover {
background: #eeeeee;

border-color: #111111;
}

/* =========================================================
DELIVERY CHECKER
========================================================= */

.sd-player-delivery {
margin-top: 22px;

padding: 18px;

background: #f7f7f7;

border: 1px solid #e5e5e5;
}

.sd-player-delivery-title {
font-size: 11px;

font-weight: 900;

letter-spacing: 1px;

margin-bottom: 10px;
}

.sd-player-delivery-row {
display: flex;
}

.sd-player-pincode {
flex: 1;

height: 44px;

border: 1px solid #cccccc;

padding: 0 13px;

font-size: 13px;

outline: none;
}

.sd-player-pincode:focus {
border-color: #111111;
}

.sd-player-check {
width: 90px;

border: none;

background: #111111;

color: #ffffff;

font-size: 10px;

font-weight: 900;

letter-spacing: 1px;

cursor: pointer;
}

.sd-player-delivery-result {
margin-top: 10px;

font-size: 11px;

color: #555555;

line-height: 1.5;
}

/* =========================================================
TRUST STRIP
========================================================= */

.sd-player-trust {
display: grid;

grid-template-columns:
repeat(3, 1fr);

gap: 8px;

margin-top: 18px;
}

.sd-player-trust-item {
text-align: center;

padding: 13px 5px;

border: 1px solid #eeeeee;

background: #ffffff;
}

.sd-player-trust-icon {
font-size: 19px;

margin-bottom: 5px;
}

.sd-player-trust-title {
font-size: 9px;

font-weight: 900;

letter-spacing: .6px;
}

/* =========================================================
DESCRIPTION SECTION
========================================================= */

.sd-player-content {
background: #0b0b0b;

color: #ffffff;

padding: 75px 25px;
}

.sd-player-content-inner {
max-width: 1100px;

margin: 0 auto;
}

.sd-player-section-label {
color: #d4af37;

font-size: 10px;

font-weight: 900;

letter-spacing: 3px;

margin-bottom: 13px;
}

.sd-player-section-title {
font-size: clamp(30px, 4vw, 48px);

line-height: 1;

font-weight: 900;

margin: 0 0 25px;

text-transform: uppercase;
}

.sd-player-description {
max-width: 850px;

color: #cccccc;

font-size: 15px;

line-height: 1.9;
}

/* =========================================================
DETAILS GRID
========================================================= */

.sd-player-details {
max-width: 1100px;

margin: 45px auto 0;

display: grid;

grid-template-columns:
repeat(2, 1fr);

border-top: 1px solid #333333;

border-left: 1px solid #333333;
}

.sd-player-detail {
padding: 20px;

border-right: 1px solid #333333;

border-bottom: 1px solid #333333;
}

.sd-player-detail-label {
color: #d4af37;

font-size: 9px;

font-weight: 800;

letter-spacing: 1.5px;

margin-bottom: 8px;
}

.sd-player-detail-value {
color: #ffffff;

font-size: 14px;

font-weight: 700;

line-height: 1.5;
}

/* =========================================================
LABEL INFORMATION
========================================================= */

.sd-player-label-section {
max-width: 1100px;

margin: 45px auto 0;

padding: 25px;

border: 1px solid #333333;
}

.sd-player-label-section h3 {
color: #d4af37;

font-size: 12px;

letter-spacing: 2px;

margin: 0 0 18px;
}

.sd-player-label-section p {
color: #cccccc;

font-size: 12px;

line-height: 1.8;

margin: 4px 0;
}

/* =========================================================
REVIEW SECTION
========================================================= */

.sd-player-reviews {
background: #f6f6f6;

padding: 75px 25px;
}

.sd-player-reviews-inner {
max-width: 1100px;

margin: 0 auto;

text-align: center;
}

.sd-player-review-placeholder {
margin-top: 30px;

background: #ffffff;

border: 1px solid #e5e5e5;

padding: 35px;

color: #555555;

font-size: 13px;

line-height: 1.7;
}

/* =========================================================
FINAL CTA
========================================================= */

.sd-player-final {
background:
linear-gradient(
135deg,
#9b0000,
#580000
);

color: #ffffff;

text-align: center;

padding: 65px 25px;
}

.sd-player-final h2 {
margin: 0 0 10px;

font-size: clamp(28px, 4vw, 45px);

font-weight: 900;

text-transform: uppercase;
}

.sd-player-final p {
margin: 0 0 25px;

color: #eeeeee;

font-size: 14px;
}

.sd-player-final-btn {
display: inline-flex;

align-items: center;

justify-content: center;

min-width: 210px;

min-height: 50px;

padding: 0 25px;

background: #d4af37;

color: #111111 !important;

font-size: 11px;

font-weight: 900;

letter-spacing: 1px;
}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

.sd-player-main {
grid-template-columns: 1fr;

gap: 40px;

padding:
45px 20px 55px;
}

.sd-player-image-box {
min-height: 550px;
}

}

@media (max-width: 600px) {

.sd-player-promo {
font-size: 9px;

letter-spacing: 1px;
}

.sd-player-main {
padding:
25px 12px 45px;
}

.sd-player-image-box {
min-height: 430px;
}

.sd-player-image-box img {
width: 90%;

max-height: 410px;
}

.sd-player-offer-badge {
width: 65px;
height: 65px;

top: 15px;
right: 15px;

font-size: 9px;
}

.sd-player-title {
font-size: 35px;
}

.sd-player-sale-price {
font-size: 29px;
}

.sd-player-spec-grid {
grid-template-columns:
repeat(3, 1fr);
}

.sd-player-spec {
padding: 13px 5px;
}

.sd-player-spec-value {
font-size: 10px;
}

.sd-player-trust {
grid-template-columns:
repeat(3, 1fr);
}

.sd-player-trust-title {
font-size: 7px;
}

.sd-player-details {
grid-template-columns: 1fr;
}

.sd-player-content {
padding:
55px 18px;
}

.sd-player-reviews {
padding:
55px 18px;
}

}

/* =========================================================
VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

.sd-player-title {
font-size: 31px;
}

.sd-player-spec-label {
font-size: 7px;
}

.sd-player-spec-value {
font-size: 9px;
}

}

document.addEventListener(
“DOMContentLoaded”,
function () {

/* =====================================================
QUANTITY
===================================================== */

const qtyInput =
document.getElementById(
“sdPlayerQty”
);

const minus =
document.getElementById(
“sdQtyMinus”
);

const plus =
document.getElementById(
“sdQtyPlus”
);

if (minus) {

minus.addEventListener(
“click”,
function () {

let value =
parseInt(
qtyInput.value || 1
);

if (value > 1) {
value–;
}

qtyInput.value = value;

}
);

}

if (plus) {

plus.addEventListener(
“click”,
function () {

let value =
parseInt(
qtyInput.value || 1
);

if (value < 10) {
value++;
}

qtyInput.value = value;

}
);

}

/* =====================================================
PINCODE CHECK
===================================================== */

const checkButton =
document.getElementById(
"sdPlayerCheck"
);

const pincode =
document.getElementById(
"sdPlayerPincode"
);

const deliveryResult =
document.getElementById(
"sdPlayerDeliveryResult"
);

if (checkButton) {

checkButton.addEventListener(
"click",
function () {

const value =
pincode.value.trim();

if (
!/^[0-9]{6}$/.test(
value
)
) {

deliveryResult.innerHTML =
"Please enter a valid 6-digit pincode.";

deliveryResult.style.color =
"#b40000";

return;

}

/*
* IMPORTANT:
* This is only a validation message.
* It does NOT claim a delivery date.
* Real delivery availability should come
* from your WooCommerce shipping setup.
*/

deliveryResult.innerHTML =
"Pincode accepted. Final delivery availability and charges will be confirmed at checkout.";

deliveryResult.style.color =
"#555555";

}
);

}

/* =====================================================
WOOCOMMERCE PRODUCT ID LOOKUP
===================================================== */

let playerProductId = null;

async function findPlayerProduct() {

const possibleSlugs = [
"player-edition",
"player-edition-2"
];

for (
const slug of possibleSlugs
) {

try {

const response =
await fetch(
"/wp-json/wc/store/v1/products?slug="
+ encodeURIComponent(slug)
);

if (!response.ok) {
continue;
}

const products =
await response.json();

if (
Array.isArray(products) &&
products.length
) {

playerProductId =
products[0].id;

return playerProductId;

}

} catch (error) {

console.log(
"Product lookup:",
error
);

}

}

return null;

}

/* =====================================================
ADD TO CART
===================================================== */

const addCart =
document.getElementById(
"sdPlayerAddCart"
);

if (addCart) {

addCart.addEventListener(
"click",
async function () {

const originalText =
addCart.innerText;

addCart.innerText =
"ADDING…";

addCart.disabled =
true;

try {

if (
!playerProductId
) {

await findPlayerProduct();

}

if (
!playerProductId
) {

window.location.href =
"https://sdsportsrohtak.com/player-edition-2/";

return;

}

const quantity =
Math.max(
1,
parseInt(
qtyInput.value || 1
)
);

const response =
await fetch(
"/wp-json/wc/store/v1/cart/add-item",
{
method: "POST",

headers: {
"Content-Type":
"application/json"
},

body: JSON.stringify({
id:
playerProductId,

quantity:
quantity
})
}
);

if (!response.ok) {
throw new Error(
"Cart request failed"
);
}

addCart.innerText =
"ADDED TO CART ✓";

setTimeout(
function () {

window.location.href =
"https://sdsportsrohtak.com/cart/";

},
600
);

} catch (error) {

console.error(
error
);

/*
* Never falsely claim that the item
* was added if WooCommerce failed.
*/

window.location.href =
"https://sdsportsrohtak.com/player-edition-2/";

} finally {

addCart.disabled =
false;

addCart.innerText =
originalText;

}

}
);

}

/* =====================================================
BUY NOW
===================================================== */

const buyNow =
document.getElementById(
"sdPlayerBuyNow"
);

if (buyNow) {

buyNow.addEventListener(
"click",
async function () {

const originalText =
buyNow.innerText;

buyNow.innerText =
"PROCESSING…";

buyNow.disabled =
true;

try {

if (
!playerProductId
) {

await findPlayerProduct();

}

if (
!playerProductId
) {

window.location.href =
"https://sdsportsrohtak.com/player-edition-2/";

return;

}

const quantity =
Math.max(
1,
parseInt(
qtyInput.value || 1
)
);

const response =
await fetch(
"/wp-json/wc/store/v1/cart/add-item",
{
method: "POST",

headers: {
"Content-Type":
"application/json"
},

body: JSON.stringify({
id:
playerProductId,

quantity:
quantity
})
}
);

if (!response.ok) {
throw new Error(
"Buy Now failed"
);
}

window.location.href =
"https://sdsportsrohtak.com/checkout/";

} catch (error) {

console.error(
error
);

window.location.href =
"https://sdsportsrohtak.com/player-edition-2/";

}

}
);

}

}
);