/* =====================================================================
   Product Details page - Premium skin (Etsy / Temu / Shein inspired)
   Scoped to .sp-pdp-bc / .sp-pdp / .sp-pdp-more (classes added in
   product_details.blade.php). Load AFTER custom-style.css.
   Re-theme: change --pp-accent / --pp-accent-2.
   ===================================================================== */

.sp-pdp-bc, .sp-pdp, .sp-pdp-more {
    --pp-accent: #2f6bff;
    --pp-accent-2: #6a5cff;
    --pp-accent-soft: rgba(47, 107, 255, .09);
    --pp-ink: #0f172a;
    --pp-text: #334155;
    --pp-muted: #64748b;
    --pp-line: #e8ecf4;
    --pp-bg: #f6f7fb;
    --pp-radius: 20px;
    --pp-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 32px rgba(15, 23, 42, .06);
    font-family: 'Inter', 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--pp-text);
}
.sp-pdp, .sp-pdp-more { background: var(--pp-bg); }

/* ---------- breadcrumb ---------- */
.sp-pdp-bc { background: #fff; border-bottom: 1px solid var(--pp-line); padding: 11px 0; }
.sp-pdp-bc .breadcrumb { margin: 0; padding: 0; background: transparent; flex-wrap: nowrap; overflow: hidden; }
.sp-pdp-bc .breadcrumb li, .sp-pdp-bc .breadcrumb li a { font-size: 12.5px; font-weight: 500; color: var(--pp-muted); }
.sp-pdp-bc .breadcrumb li a:hover { color: var(--pp-accent); }
.sp-pdp-bc .breadcrumb li.active a { color: var(--pp-ink); font-weight: 600; }

/* ---------- main card ---------- */
.sp-pdp { padding-top: 18px; padding-bottom: 10px; }
.sp-pdp > .container > .bg-white {
    background: #fff !important; border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius); box-shadow: var(--pp-shadow);
    padding: 1.5rem 1.4rem;
}
@media (min-width: 992px) {
    .sp-pdp .col-lg-5 { flex: 0 0 50%; max-width: 50%; }
    .sp-pdp .product-description-wrapper { padding-left: 1.4rem; }
}

/* ---------- gallery ---------- */
.sp-pdp .product-gal { padding: 0; top: 16px; }
.sp-pdp .product-gal-thumb { width: 68px; margin-right: 14px; }
.sp-pdp .product-gal-thumb a { display: block; }
.sp-pdp .product-gal-thumb a img {
    width: 100%; margin: 0 0 10px; border-radius: 14px;
    border: 2px solid var(--pp-line); background: #f8fafc; object-fit: cover;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.sp-pdp .product-gal-thumb a img:hover { border-color: #c4cee0; transform: translateY(-1px); }
.sp-pdp .product-gal-thumb a img.xactive {
    border: 2px solid var(--pp-accent); box-shadow: 0 0 0 4px var(--pp-accent-soft);
}
.sp-pdp .product-gal-img {
    flex: 1; min-width: 0; text-align: center;
    background: #f8fafc; border: 1px solid var(--pp-line); border-radius: 20px; padding: 10px;
}
.sp-pdp .product-gal-img img { border-radius: 14px; width: 100%; height: auto; }

/* ---------- title / rating / stock ---------- */
.sp-pdp .product-description-wrapper { padding-top: .2rem; }
.sp-pdp .product-description-wrapper hr { display: none; }
.sp-pdp .product-description-wrapper .product-title {
    font-size: 24px !important; line-height: 1.3 !important; font-weight: 700 !important;
    letter-spacing: -.02em; color: var(--pp-ink) !important; padding: 0 !important; max-height: none !important;
}
.sp-pdp .product-description-wrapper .rating { margin-top: .35rem; }
.sp-pdp .star-rating i { color: #d4dbe8; }
.sp-pdp .star-rating i.active, .sp-pdp .star-rating .active { color: #f59e0b; }
.sp-pdp .rating-count { font-size: 12.5px; color: var(--pp-muted); }
.sp-pdp .badge.bg-green, .sp-pdp .badge.bg-red {
    font-size: 11.5px; font-weight: 700; padding: .45em .95em; border-radius: 999px; letter-spacing: .01em;
}
.sp-pdp .badge.bg-green { background: rgba(22, 163, 74, .12) !important; color: #15803d !important; }
.sp-pdp .badge.bg-red   { background: rgba(239, 68, 68, .12) !important; color: #b91c1c !important; }

.sp-pdp .sold-by { margin: .9rem 0 0 15px; padding: .7rem 1rem; background: #f8fafc; border: 1px solid var(--pp-line); border-radius: 14px; line-height: 1.35; }
.sp-pdp .sold-by small { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--pp-muted); font-weight: 600; }
.sp-pdp .sold-by a { color: var(--pp-accent); font-weight: 700; font-size: 14px; }

/* ---------- price panel ---------- */
.sp-pdp .sp-price-panel {
    margin: 1.1rem 0 1.2rem; padding: .9rem 1.2rem 1.1rem;
    background: linear-gradient(135deg, #f5f8ff 0%, #f1f0ff 100%);
    border: 1px solid rgba(47, 107, 255, .14); border-radius: 18px;
}
.sp-pdp .sp-price-panel .row { margin-top: .5rem !important; align-items: center; }
.sp-pdp .sp-price-panel .row.mt-3:first-child, .sp-pdp .sp-price-panel .row.mt-4:first-child { margin-top: 0 !important; }
.sp-pdp .product-description-label {
    font-size: 11px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--pp-muted) !important;
}
.sp-pdp .sp-price-panel .product-price {
    font-size: 36px !important; line-height: 1.1 !important; font-weight: 800 !important;
    letter-spacing: -.03em; color: var(--pp-accent) !important; margin: 0 !important;
}
.sp-pdp .sp-price-panel .product-price strong { font-weight: 800; }
.sp-pdp .sp-price-panel .product-price .piece { font-size: 13px; font-weight: 500; color: var(--pp-muted); letter-spacing: 0; }
.sp-pdp .product-price-old, .sp-pdp .product-price-old del { font-size: 15px !important; color: #94a3b8 !important; opacity: 1 !important; font-weight: 500 !important; }
/* when a struck-through old price sits above the live price, drop its label so there is only one "Price" */
.sp-pdp .sp-price-panel .row:has(.product-price-old) .product-description-label { visibility: hidden; }

/* single price: the dynamic price (variant x quantity) replaces the static one once JS has filled it */
.sp-pdp .sp-price-panel:has(#chosen_price_div:not(.d-none)) .sp-static-price { display: none !important; }
.sp-pdp #chosen_price_div { margin: 0 !important; padding: 0 !important; background: transparent; border: 0; }
.sp-pdp .sp-price-panel .product-price strong, .sp-pdp #chosen_price { font-weight: 800; }
.sp-pdp .club-point { border-radius: 999px; padding: .25rem .8rem; }

/* ---------- variants ---------- */
.sp-pdp #option-choice-form .row { margin-top: .8rem; align-items: center; }
.sp-pdp .checkbox-alphanumeric--style-1 label,
.sp-pdp .checkbox-alphanumeric label {
    width: auto; min-width: 44px; height: 40px; padding: 0 1.1rem; line-height: 37px;
    border: 1.5px solid #dbe2ee !important; border-radius: 999px; background: #fff;
    color: var(--pp-text); font-size: 13.5px; font-weight: 600; text-transform: none;
    margin: 0 8px 8px 0; transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.sp-pdp .checkbox-alphanumeric label:hover { border-color: var(--pp-accent) !important; color: var(--pp-accent); }
.sp-pdp .checkbox-alphanumeric input:checked ~ label {
    background: linear-gradient(135deg, var(--pp-accent), var(--pp-accent-2)) !important;
    border-color: transparent !important; color: #fff !important; transform: none;
    box-shadow: 0 8px 20px rgba(47, 107, 255, .28);
}
.sp-pdp .checkbox-color label {
    width: 36px; height: 36px; border: 2px solid #fff !important; border-radius: 50%;
    box-shadow: 0 0 0 1.5px #cbd5e1; opacity: 1; margin: 2px 10px 6px 2px;
}
.sp-pdp .checkbox-color label:hover { box-shadow: 0 0 0 1.5px var(--pp-accent); }
.sp-pdp .checkbox-color input:checked ~ label { transform: none; box-shadow: 0 0 0 2.5px var(--pp-accent); }

/* ---------- quantity stepper ---------- */
.sp-pdp .product-quantity .input-group--style-2 {
    border: 1.5px solid #dbe2ee; border-radius: 999px; padding: 3px; background: #fff; flex-wrap: nowrap;
}
.sp-pdp .input-group--style-2 .input-group-btn > .btn {
    width: 34px; height: 34px; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
    background: #f1f5f9 !important; color: var(--pp-ink); display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease;
}
.sp-pdp .input-group--style-2 .input-group-btn > .btn:hover:not([disabled]) { background: var(--pp-accent) !important; color: #fff; }
.sp-pdp .input-group--style-2 .input-group-btn > .btn[disabled] { opacity: .45; }
.sp-pdp .input-group--style-2 .form-control { border: 0 !important; background: transparent !important; font-weight: 700; color: var(--pp-ink); height: 34px; box-shadow: none; }
.sp-pdp .avialable-amount { font-size: 12.5px !important; color: var(--pp-muted) !important; margin-left: .35rem; }

/* ---------- CTAs ---------- */
.sp-pdp .sp-cta { margin-top: 1.3rem !important; gap: 12px !important; }
.sp-pdp .sp-cta .btn {
    height: 56px; border-radius: 16px; border: 0 !important;
    font-size: 15px; font-weight: 700; letter-spacing: .005em; text-transform: none;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    transition: transform .15s ease, box-shadow .2s ease, filter .15s ease;
}
.sp-pdp .sp-cta .btn i { font-size: 21px; margin: 0; }
.sp-pdp .sp-cta .buy-now {
    background: linear-gradient(135deg, var(--pp-accent), var(--pp-accent-2)) !important; color: #fff !important;
    box-shadow: 0 14px 30px rgba(47, 107, 255, .35);
}
.sp-pdp .sp-cta .add-to-cart { background: var(--pp-ink) !important; color: #fff !important; box-shadow: 0 12px 26px rgba(15, 23, 42, .22); }
.sp-pdp .sp-cta .btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.sp-pdp .sp-cta .btn:active { transform: translateY(0); }
.sp-pdp .sp-cta .btn[disabled] { background: #e2e8f0 !important; color: #94a3b8 !important; box-shadow: none; transform: none; filter: none; }
.sp-pdp .hov-bounce:hover { animation: none !important; }

/* call / whatsapp */
.sp-contact-row { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; margin-top: 12px; }
.sp-contact {
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    height: 48px; padding: 0 .9rem; border-radius: 14px; font-size: 13.5px; font-weight: 600;
    text-decoration: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: transform .15s ease, background .15s ease, box-shadow .2s ease;
}
.sp-contact i { font-size: 20px; }
.sp-contact:hover { transform: translateY(-1px); }
.sp-call { background: #fff; color: #15803d !important; border: 1.5px solid #bbf7d0; }
.sp-call:hover { background: #f0fdf4; }
.sp-wa { background: #22c55e; color: #fff !important; box-shadow: 0 10px 22px rgba(34, 197, 94, .28); }
.sp-wa:hover { background: #16a34a; }

/* trust strip */
.sp-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.sp-trust > div {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px;
    padding: .75rem .4rem; background: #fff; border: 1px solid var(--pp-line); border-radius: 14px;
}
.sp-trust i { font-size: 24px; color: var(--pp-accent); margin-bottom: 2px; }
.sp-trust b { font-size: 12.5px; font-weight: 700; color: var(--pp-ink); }
.sp-trust small { font-size: 11px; color: var(--pp-muted); }

/* save / compare / share */
.sp-pdp .d-table .btn-link {
    border: 1.5px solid var(--pp-line); border-radius: 999px; background: #fff;
    padding: .42rem 1rem !important; font-size: 12.5px; font-weight: 600; color: #475569 !important;
    text-decoration: none !important; margin: 0 6px 6px 0; transition: all .15s ease;
}
.sp-pdp .d-table .btn-link:hover { border-color: var(--pp-accent); color: var(--pp-accent) !important; background: var(--pp-accent-soft); }
.sp-pdp #share .jssocials-share-link { width: 36px; height: 36px; line-height: 36px; padding: 0; border-radius: 50% !important; text-align: center; margin-right: 6px; transition: transform .15s ease; }
.sp-pdp #share .jssocials-share-link:hover { transform: translateY(-2px); }
.sp-pdp #share .jssocials-share { margin: 0; }

/* =====================================================================
   LOWER SECTION  (seller box, tabs, related products)
   ===================================================================== */
.sp-pdp-more { padding: 6px 0 36px; }

/* seller card */
.sp-pdp-more .seller-info-box {
    background: #fff; border: 1px solid var(--pp-line); border-radius: 20px; box-shadow: var(--pp-shadow); overflow: hidden;
}
.sp-pdp-more .seller-info-box .sold-by { padding: 1.2rem; border-bottom: 1px solid var(--pp-line); }
.sp-pdp-more .seller-info-box .sold-by .title {
    border: 0; padding: 0; margin-bottom: .3rem;
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pp-muted);
}
.sp-pdp-more .seller-info-box .sold-by .name { font-size: 16px; font-weight: 700; color: var(--pp-ink); }
.sp-pdp-more .seller-info-box .sold-by .location { font-size: 12.5px; opacity: 1; color: var(--pp-muted); margin-top: 2px; }
.sp-pdp-more .seller-info-box .sold-by .rating { border: 0; background: #f8fafc; border-radius: 12px; padding: .6rem; }
.sp-pdp-more .seller-info-box .medal-badge { background: transparent; width: 34px; }
.sp-pdp-more .seller-info-box .store-btn {
    color: var(--pp-accent); font-weight: 700; font-size: 13.5px; padding: .95rem; transition: background .15s ease;
}
.sp-pdp-more .seller-info-box .store-btn:hover { background: var(--pp-accent-soft); text-decoration: none; }

/* top selling list */
.sp-pdp-more .sidebar-box { background: #fff !important; border: 1px solid var(--pp-line); border-radius: 20px; box-shadow: var(--pp-shadow); overflow: hidden; }
.sp-pdp-more .sidebar-box .box-title { background: #fff; border-bottom: 1px solid var(--pp-line); padding: 1.1rem 1.2rem; font-size: 15px; font-weight: 700; color: var(--pp-ink); }
.sp-pdp-more .sidebar-box .box-content { padding: 1rem 1.1rem .4rem; }
.sp-pdp-more .product-box-3 { border-radius: 14px; padding: 4px; transition: background .15s ease, transform .15s ease; }
.sp-pdp-more .product-box-3:hover { box-shadow: none; transform: none; background: #f8fafc; }
.sp-pdp-more .product-box-3 .product-image { width: 68px; min-width: 68px; max-width: 68px; }
.sp-pdp-more .product-box-3 .product-image img { width: 68px; height: 68px; object-fit: cover; border-radius: 12px; }
.sp-pdp-more .product-box-3 .product-details { width: calc(100% - 68px); min-width: calc(100% - 68px); max-width: calc(100% - 68px); padding: 2px 4px 2px 12px; }
.sp-pdp-more .product-box-3 .title { white-space: normal !important; overflow: visible !important; margin: 0; }
.sp-pdp-more .product-box-3 .title, .sp-pdp-more .product-box-3 .title a { font-size: 13px !important; font-weight: 600; color: var(--pp-ink); }
.sp-pdp-more .product-box-3 .title a { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.sp-pdp-more .product-box-3 .price-box .product-price { font-size: 14px !important; font-weight: 800; color: var(--pp-accent) !important; }

/* tabs */
.sp-pdp-more .product-desc-tab { background: #fff !important; border: 1px solid var(--pp-line); border-radius: 20px; box-shadow: var(--pp-shadow); }
.sp-pdp-more .tabs--style-2 .nav-tabs {
    padding: 0 1.4rem; border-bottom: 1px solid var(--pp-line); border-radius: 20px 20px 0 0; top: 0; z-index: 5;
}
.sp-pdp-more .tabs--style-2 .nav-tabs .nav-item { margin: 0 1.8rem 0 0; font-size: 12.5px; }
.sp-pdp-more .tabs--style-2 .nav-tabs .nav-link {
    padding: 1.05rem 0 !important; border: 0; border-bottom: 3px solid transparent;
    font-size: 12.5px; font-weight: 700; letter-spacing: .07em; color: var(--pp-muted) !important;
    transition: color .15s ease, border-color .15s ease; margin-bottom: -1px;
}
.sp-pdp-more .tabs--style-2 .nav-tabs .nav-link:hover { color: var(--pp-ink) !important; border-bottom-color: transparent; }
.sp-pdp-more .tabs--style-2 .nav-tabs .nav-link.active {
    color: var(--pp-accent) !important; border-bottom: 3px solid var(--pp-accent) !important;
}
.sp-pdp-more .tab-content { font-size: 14px; line-height: 1.75; color: var(--pp-text); }
.sp-pdp-more .tab-content .py-2.px-4 { padding: 1.3rem 1.6rem !important; }
.sp-pdp-more .tab-content img { border-radius: 12px; }
.sp-pdp-more .block-comment { padding: 1rem 1.2rem; margin: 0 1rem 12px; border: 1px solid var(--pp-line); border-radius: 14px; }

/* related products */
.sp-pdp-more .col-xl-9 > .my-2.bg-white { background: transparent !important; padding: 0 !important; margin-top: 1.4rem !important; }
.sp-pdp-more .section-title-1,
.sp-pdp-more .section-title-1 h3,
.sp-pdp-more .section-title-1 h3 span { border: 0 !important; box-shadow: none !important; }
.sp-pdp-more .section-title-1::before, .sp-pdp-more .section-title-1::after, .sp-pdp-more .section-title-1 h3::after { display: none !important; }
.sp-pdp-more .section-title-1 { margin: 0 0 .6rem !important; padding: 0 .3rem !important; }
.sp-pdp-more .section-title-1 h3 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--pp-ink); display: flex; align-items: center; }
.sp-pdp-more .section-title-1 h3::before {
    content: ""; width: 5px; height: 22px; border-radius: 4px; margin-right: .7rem;
    background: linear-gradient(180deg, var(--pp-accent), var(--pp-accent-2));
}
.sp-pdp-more .section-title-1 h3 span { margin-right: 0 !important; }
.sp-pdp-more .products-box-bar { background: transparent !important; padding: 0 !important; }
.sp-pdp-more .infinite-scroll > [class*="col-"] { padding: 6px !important; }

.sp-pdp-more .product-box-2 {
    margin: 0 !important; height: 100%;
    background: #fff; border: 1px solid var(--pp-line); border-radius: 18px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.sp-pdp-more .product-box-2:hover {
    transform: translateY(-5px); border-color: transparent;
    box-shadow: 0 22px 44px rgba(15, 23, 42, .14);
}
.sp-pdp-more .product-box-2 .product-image { margin: 0 !important; background: #f1f5f9; }
.sp-pdp-more .product-box-2 .product-image img { width: 100%; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform .5s ease; }
.sp-pdp-more .product-box-2:hover .product-image img { transform: scale(1.06); }
.sp-pdp-more .product-box-2.alt-box .product-btns {
    background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-top: 1px solid var(--pp-line);
}
.sp-pdp-more .product-box-2.alt-box .product-btns .btn { color: #475569; transition: color .15s ease, background .15s ease; }
.sp-pdp-more .product-box-2.alt-box .product-btns .btn:hover { color: var(--pp-accent); background: var(--pp-accent-soft); }
.sp-pdp-more .product-box-2 .p-md-2 { padding: .85rem .9rem .95rem !important; }
.sp-pdp-more .product-box-2 .price-box { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.sp-pdp-more .product-box-2 .price-box .product-price { font-size: 18px !important; font-weight: 800; letter-spacing: -.02em; color: var(--pp-accent) !important; order: 1; }
.sp-pdp-more .product-box-2 .price-box .old-product-price { font-size: 12px !important; color: #94a3b8; font-weight: 500; order: 2; margin: 0; }
.sp-pdp-more .product-box-2 .star-rating { margin-top: .3rem !important; }
.sp-pdp-more .product-box-2 .star-rating i { font-size: 11px; margin-right: 1px; }
.sp-pdp-more .product-box-2 .product-title { padding: 0 !important; margin: .35rem 0 0 !important; font-size: 13px !important; line-height: 1.4 !important; }
.sp-pdp-more .product-box-2 .product-title a {
    font-size: 13px !important; font-weight: 500; color: var(--pp-ink); white-space: normal !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em;
}
.sp-pdp-more .product-box-2 .product-title a:hover { color: var(--pp-accent); }
.sp-pdp-more .product-box-2 .add-cart-b { margin-top: .7rem; }
.sp-pdp-more .product-box-2 .add-cart-ab {
    display: block; width: 100% !important; padding: .62rem .5rem !important; border: 0 !important; border-radius: 12px !important;
    background: linear-gradient(135deg, var(--pp-accent), var(--pp-accent-2)) !important; color: #fff !important;
    font-size: 13px !important; font-weight: 700; letter-spacing: .01em; text-transform: none; cursor: pointer;
    box-shadow: 0 8px 18px rgba(47, 107, 255, .25); transition: transform .15s ease, filter .15s ease;
}
.sp-pdp-more .product-box-2 .add-cart-ab:hover { transform: translateY(-1px); filter: brightness(1.08); }

/* mobile / small tablet: related products 2 per row */
@media (max-width: 767.98px) {
    .sp-pdp-more .infinite-scroll { margin-left: -4px; margin-right: -4px; }
    .sp-pdp-more .infinite-scroll > [class*="col-"] { flex: 0 0 50% !important; max-width: 50% !important; padding: 4px !important; }
    .sp-pdp-more .product-box-2 { border-radius: 16px; }
    .sp-pdp-more .product-box-2 .p-md-2 { padding: .7rem .7rem .8rem !important; }
    .sp-pdp-more .product-box-2 .price-box .product-price { font-size: 16px !important; }
    .sp-pdp-more .product-box-2 .price-box .old-product-price { font-size: 11px !important; }
    .sp-pdp-more .product-box-2 .product-title a { font-size: 12.5px !important; }
    .sp-pdp-more .product-box-2 .add-cart-ab { padding: .55rem .4rem !important; font-size: 12.5px !important; border-radius: 10px !important; }
    .sp-pdp-more .section-title-1 h3 { font-size: 18px; }
}

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    .sp-pdp > .container > .bg-white { padding: 1rem .9rem; border-radius: 18px; }
    .sp-pdp .product-gal { position: static; flex-direction: column !important; }
    .sp-pdp .product-gal-thumb { width: 100%; margin: 12px 0 0; }
    .sp-pdp .product-gal-thumb .xzoom-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
    .sp-pdp .product-gal-thumb a { flex: 0 0 62px; }
    .sp-pdp .product-gal-thumb a img { margin: 0; }
    .sp-pdp .product-description-wrapper { padding: 1rem .1rem 0; }
}
@media (max-width: 575.98px) {
    .sp-pdp #option-choice-form .row > .col-2 { flex: 0 0 30%; max-width: 30%; }
    .sp-pdp #option-choice-form .row > .col-10 { flex: 0 0 70%; max-width: 70%; }
    .sp-pdp .product-description-wrapper .product-title { font-size: 20px !important; }
    .sp-pdp .sp-price-panel .product-price { font-size: 30px !important; }
    .sp-contact-row { grid-template-columns: 1fr; }
    .sp-pdp .sp-cta .btn { height: 52px; font-size: 14px; }
    .sp-pdp-more .tabs--style-2 .nav-tabs { padding: 0 1rem; overflow-x: auto; flex-wrap: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .sp-pdp *, .sp-pdp-more * { transition: none !important; } }

/* =====================================================================
   FIXES v4 - breadcrumb cleanup + remove extra image borders
   ===================================================================== */

/* ---------- breadcrumb: single clean line, chevron separators, swipe if long ---------- */
.sp-pdp-bc { padding: 0; background: #fff; border-bottom: 1px solid var(--pp-line); }
.sp-pdp-bc .breadcrumb {
    display: flex; flex-wrap: nowrap; align-items: center;
    overflow-x: auto; overflow-y: hidden; white-space: nowrap;
    padding: 12px 0; margin: 0;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.sp-pdp-bc .breadcrumb::-webkit-scrollbar { display: none; }
.sp-pdp-bc .breadcrumb li {
    position: static; flex: 0 0 auto; margin: 0; padding: 0;
    display: inline-flex; align-items: center; line-height: 1.2;
}
.sp-pdp-bc .breadcrumb li a {
    padding: 0; font-size: 12.5px; text-transform: none !important; white-space: nowrap;
}
/* replace the old absolute ">" with a neat chevron */
.sp-pdp-bc .breadcrumb li:not(:last-of-type):after {
    position: static; content: ""; display: inline-block;
    width: 6px; height: 6px; margin: 0 10px 0 9px;
    border-top: 1.5px solid #b6c0d1; border-right: 1.5px solid #b6c0d1;
    transform: rotate(45deg); opacity: 1; bottom: auto; right: auto;
}
.sp-pdp-bc .breadcrumb li.active { flex: 0 1 auto; min-width: 0; }
.sp-pdp-bc .breadcrumb li.active a {
    display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 768px) { .sp-pdp-bc .breadcrumb li.active a { max-width: 480px; } }

/* ---------- gallery: no double box / extra borders ---------- */
.sp-pdp .product-gal-img {
    background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none;
}
.sp-pdp .product-gal-img img,
.sp-pdp .product-gal-img .xzoom {
    border: 0 !important; box-shadow: none !important; border-radius: 14px;
    width: 100%; height: auto; display: block; background: #fff;
}
.sp-pdp .product-gal-img .xzoom-container { display: block; width: 100%; }
/* thumbnails: only one clean border, no stray margin/box */
.sp-pdp .product-gal-thumb .xzoom-thumbs { margin: 0; padding: 0; text-align: left; }
.sp-pdp .product-gal-thumb a img.xzoom-gallery { margin-left: 0; }
.sp-pdp .product-gal-thumb a img.xactive { box-shadow: none; border: 2px solid var(--pp-accent); }

@media (max-width: 991.98px) {
    /* card hugs the screen: less padding/border around the picture */
    .sp-pdp { padding-top: 10px; }
    .sp-pdp > .container { padding-left: 8px; padding-right: 8px; }
    .sp-pdp > .container > .bg-white { padding: 8px; border-radius: 16px; }
    .sp-pdp .product-gal { padding: 0; }
    .sp-pdp .product-gal-img { width: 100%; }
    .sp-pdp .product-gal-thumb .xzoom-thumbs { justify-content: flex-start; }
    .sp-pdp .product-gal-thumb a { flex: 0 0 64px; }
    .sp-pdp .product-gal-thumb a img { width: 64px; height: 64px; border-radius: 12px; border: 2px solid var(--pp-line); box-shadow: none; }
    .sp-pdp .product-description-wrapper { padding: .9rem .4rem 0; }
}

/* =====================================================================
   FIXES v5 - mobile related-products grid: even side space, tight middle gap
   ===================================================================== */
@media (max-width: 767.98px) {
    /* same 10px side space for every block on the page */
    .sp-pdp > .container,
    .sp-pdp-more > .container { padding-left: 10px; padding-right: 10px; }
    .sp-pdp-more > .container > .row { margin-left: 0; margin-right: 0; }
    .sp-pdp-more > .container > .row > [class*="col-"] { padding-left: 0; padding-right: 0; }

    /* 2 columns, 8px gap between cards (rows and columns) */
    .sp-pdp-more .infinite-scroll {
        display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px; margin: 0 !important;
    }
    .sp-pdp-more .infinite-scroll > [class*="col-"] {
        flex: none !important; width: auto !important; max-width: none !important;
        min-width: 0; padding: 0 !important; margin: 0 !important;
    }
    .sp-pdp-more .product-box-2 { margin: 0 !important; }
    .sp-pdp-more .section-title-1 { padding: 0 2px !important; }
}

/* =====================================================================
   FIXES v6 - custom-style.css forces .container{padding:1px !important} on
   mobile, so the side space must be set with !important as well.
   ===================================================================== */
@media (max-width: 767.98px) {
    .sp-pdp > .container,
    .sp-pdp-more > .container { padding-left: 10px !important; padding-right: 10px !important; }
    .sp-pdp-more > .container > .row { margin-left: 0 !important; margin-right: 0 !important; }
    .sp-pdp-more > .container > .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
    .sp-pdp-more .infinite-scroll { gap: 8px !important; }
}

/* =====================================================================
   FIXES v7 - stop the layout jumping while the page loads
   ===================================================================== */
/* 1. reserve image space so nothing moves when lazy images arrive */
.sp-pdp .product-gal-img img.xzoom { aspect-ratio: 1 / 1; object-fit: contain; background: #fff; }
.sp-pdp .product-gal-thumb a img { aspect-ratio: 1 / 1; object-fit: cover; }
.sp-pdp-more .product-box-2 .product-image { aspect-ratio: 1 / 1; overflow: hidden; }

/* 2. carousels before slick.js runs: one tidy clipped row instead of a tall stack */
.slick-carousel:not(.slick-initialized) { display: flex; flex-wrap: nowrap; overflow: hidden; }
.slick-carousel:not(.slick-initialized) > * { flex: 0 0 100%; max-width: 100%; min-width: 0; }
.slick-carousel:not(.slick-initialized)[data-slick-xs-items="2"] > * { flex-basis: 50%; max-width: 50%; }
.slick-carousel:not(.slick-initialized)[data-slick-xs-items="3"] > * { flex-basis: 33.3333%; max-width: 33.3333%; }
.slick-carousel:not(.slick-initialized)[data-slick-xs-items="4"] > * { flex-basis: 25%; max-width: 25%; }
@media (min-width: 576px) {
    .slick-carousel:not(.slick-initialized)[data-slick-sm-items="2"] > * { flex-basis: 50%; max-width: 50%; }
    .slick-carousel:not(.slick-initialized)[data-slick-sm-items="3"] > * { flex-basis: 33.3333%; max-width: 33.3333%; }
}
@media (min-width: 768px) {
    .slick-carousel:not(.slick-initialized)[data-slick-md-items="3"] > * { flex-basis: 33.3333%; max-width: 33.3333%; }
    .slick-carousel:not(.slick-initialized)[data-slick-md-items="6"] > * { flex-basis: 16.6667%; max-width: 16.6667%; }
}
@media (min-width: 992px) {
    .slick-carousel:not(.slick-initialized)[data-slick-lg-items="4"] > * { flex-basis: 25%; max-width: 25%; }
    .slick-carousel:not(.slick-initialized)[data-slick-lg-items="6"] > * { flex-basis: 16.6667%; max-width: 16.6667%; }
    .slick-carousel:not(.slick-initialized)[data-slick-lg-items="8"] > * { flex-basis: 12.5%; max-width: 12.5%; }
}

/* =====================================================================
   FIXES v8 - home "Categories" tiles: before slick.js runs, show the same
   2-row grid as the final result (no tall raw list, no jump on reload)
   ===================================================================== */
.home-cat-tiles .slick-carousel:not(.slick-initialized) {
    display: grid; overflow: hidden;
    grid-template-columns: repeat(4, minmax(0, 1fr));   /* phones: 4 per row */
    grid-template-rows: auto auto; grid-auto-rows: 0;    /* rows=2 -> only the first 2 rows show */
}
.home-cat-tiles .slick-carousel:not(.slick-initialized) > .caorusel-card {
    display: block !important; /* main.css hides un-initialised slick children (display:none) */
    flex: none; width: auto; max-width: none; min-width: 0;
}
@media (min-width: 576px) { .home-cat-tiles .slick-carousel:not(.slick-initialized) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .home-cat-tiles .slick-carousel:not(.slick-initialized) { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 992px) { .home-cat-tiles .slick-carousel:not(.slick-initialized) { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

/* =====================================================================
   FIXES v9 - home "Categories" tiles: never show the un-initialised /
   half-built state. The space is reserved (grid from v8) but invisible
   until slick has built the final layout, then it fades in.
   ===================================================================== */
.home-cat-tiles .slick-carousel:not(.slick-initialized) { visibility: hidden; opacity: 0; }
.home-cat-tiles .slick-carousel.slick-initialized { visibility: visible; animation: hctFade .25s ease both; }
@keyframes hctFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .home-cat-tiles .slick-carousel.slick-initialized { animation: none; } }