/* ╔══════════════════════════════════════════════════════╗
   ║  JJW SINGLE PRODUCT  v3.0 — Playful + Animated       ║
   ║  Box variations, spinning borders, bouncy buttons     ║
   ╚══════════════════════════════════════════════════════╝ */

/* ── Full-width breakout ───────────────────── */
body.single-product .entry-title,
body.single-product .page-title,
body.single-product .entry-header { display:none !important; }
body.single-product .entry-content,
body.single-product .woocommerce,
body.single-product #primary,
body.single-product .site-main {
    max-width:100% !important; width:100% !important;
    padding:0 !important; margin:0 !important; float:none !important;
}
body.single-product #secondary { display:none !important; }

.jsp { background:var(--jj-bg); padding-bottom:60px; }


/* ══════════════════════════════════════════════
   LAYOUT: 2-column
   ══════════════════════════════════════════════ */
.jsp__layout {
    max-width:1400px; margin:0 auto; padding:24px 32px;
    display:grid; grid-template-columns:1fr 1fr;
    gap:48px; align-items:start;
}
@media (max-width:900px) { .jsp__layout { grid-template-columns:1fr; gap:0; padding:0; } }


/* ══════════════════════════════════════════════
   GALLERY
   ══════════════════════════════════════════════ */
.jsp__gallery-desktop { display:flex; flex-direction:column; gap:4px; }
.jsp__img-wrap {
    position:relative; overflow:hidden;
    border-radius:var(--jj-radius);
    background:var(--jj-blue-light);
}
.jsp__img {
    width:100%; display:block;
    transition:transform 0.5s var(--jj-ease-smooth);
}
.jsp__img-wrap:hover .jsp__img { transform:scale(1.03); }

.jsp__sale-badge {
    position:absolute; top:12px; left:12px;
    padding:5px 14px;
    background:var(--jj-pink); color:#fff;
    font-family:var(--jj-font); font-size:11px; font-weight:700;
    border-radius:var(--jj-radius-pill);
    z-index:2;
}

/* Mobile gallery */
.jsp__gallery-mobile { display:none; position:relative; }
@media (max-width:900px) {
    .jsp__gallery-desktop { display:none; }
    .jsp__gallery-mobile { display:block; }
}
.jsp__mobile-slider {
    display:flex; overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.jsp__mobile-slider::-webkit-scrollbar { display:none; }
.jsp__mobile-slide {
    flex:0 0 100%; scroll-snap-align:start;
}
.jsp__mobile-slide img { width:100%; display:block; }

.jsp__mobile-pagination {
    position:absolute; bottom:16px; left:16px;
    background:rgba(0,0,0,0.5); color:#fff;
    font-family:var(--jj-font); font-size:12px; font-weight:700;
    padding:6px 14px; border-radius:var(--jj-radius-pill);
    backdrop-filter:blur(8px);
}
.jsp__page-sep { margin:0 3px; opacity:0.5; }
.jsp__sale-badge--mobile { top:12px; left:auto; right:12px; }


/* ══════════════════════════════════════════════
   PRODUCT INFO (sticky)
   ══════════════════════════════════════════════ */
.jsp__info-inner {
    position:sticky; top:calc(var(--jj-header-h) + 24px);
}
@media (max-width:900px) { .jsp__info-inner { position:static; padding:20px; } }

.jsp__cat { font-family:var(--jj-font); font-size:12px; color:var(--jj-text-light); margin-bottom:6px; }
.jsp__cat a { color:var(--jj-blue); text-decoration:none; }

.jsp__title {
    font-family:var(--jj-font); font-size:26px; font-weight:700;
    color:var(--jj-text); line-height:1.3; margin:0 0 12px;
}

.jsp__price {
    font-family:var(--jj-font); font-size:22px; font-weight:700;
    color:var(--jj-text); margin-bottom:16px;
}
.jsp__price del { color:var(--jj-text-faint); margin-right:8px; font-size:16px; font-weight:400; }
.jsp__price ins { text-decoration:none; color:var(--jj-pink); background:none; }
.jsp__price .woocommerce-Price-amount { color:inherit; font-family:inherit; }

.jsp__excerpt {
    font-family:var(--jj-font); font-size:14px; line-height:1.7;
    color:var(--jj-text-mid); margin-bottom:24px;
}

@media (max-width:768px) { .jsp__title { font-size:22px; } .jsp__price { font-size:18px; } }


/* ══════════════════════════════════════════════
   VARIATION BUTTONS — Box layout + spinning border
   ══════════════════════════════════════════════ */
.jsp__var-wrap { margin-bottom:24px; }
.jsp__var-group { margin-bottom:18px; }
.jsp__var-label {
    display:block;
    font-family:var(--jj-font); font-size:13px; font-weight:700;
    color:var(--jj-text-mid); margin-bottom:10px;
}
.jsp__var-options { display:flex; flex-wrap:wrap; gap:8px; }

/* The box button */
.jsp__var-btn {
    position:relative;
    display:inline-flex; align-items:center; justify-content:center;
    padding:10px 22px;
    background:var(--jj-white);
    border:2px solid var(--jj-border);
    border-radius:var(--jj-radius-sm);
    font-family:var(--jj-font); font-size:13px; font-weight:700;
    color:var(--jj-text);
    cursor:pointer; outline:none; line-height:1;
    min-width:48px; overflow:hidden;
    transition:all 0.3s var(--jj-ease);
    z-index:1;
}

/* Spinning shine — subtle by default */
.jsp__var-btn::before {
    content:'';
    position:absolute; top:-150%; left:-150%;
    width:400%; height:400%;
    background:conic-gradient(
        from 0deg,
        transparent 0%, transparent 70%,
        rgba(34,150,208,0.3) 80%,
        transparent 90%
    );
    animation:jsp-spin 4s linear infinite;
    z-index:-1; opacity:0.5;
    transition:opacity 0.3s, background 0.3s;
}

/* Hover */
.jsp__var-btn:hover {
    border-color:var(--jj-blue);
    color:var(--jj-blue);
    box-shadow:var(--jj-shadow-blue);
    transform:translateY(-2px);
}
.jsp__var-btn:hover::before { opacity:1; }

.jsp__var-btn .jsp__var-btn-text { position:relative; z-index:2; }

/* Selected */
.jsp__var-btn.jsp-selected {
    background:linear-gradient(135deg, var(--jj-blue), var(--jj-pink));
    border-color:transparent;
    color:#fff;
    box-shadow:0 4px 16px rgba(34,150,208,0.3);
    transform:translateY(-2px);
}
.jsp__var-btn.jsp-selected::before {
    background:conic-gradient(
        from 0deg,
        transparent 0%, transparent 70%,
        rgba(255,255,255,0.4) 80%,
        transparent 90%
    );
    opacity:1;
}

/* Disabled */
.jsp__var-btn.jsp-disabled { opacity:0.35; cursor:not-allowed; pointer-events:none; }
.jsp__var-btn.jsp-disabled::before { animation:none; background:transparent; }

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

/* Color swatches */
.jsp__var-btn--color {
    padding:4px; min-width:auto; width:40px; height:40px;
    border-radius:50%; overflow:hidden;
}
.jsp__var-btn--color .jsp__var-btn-text { display:none; }
.jsp__color-dot { display:block; width:100%; height:100%; border-radius:50%; }
.jsp__var-btn--color.jsp-selected {
    background:transparent;
    box-shadow:0 0 0 2px var(--jj-white), 0 0 0 4px var(--jj-blue);
}

/* Variation price/desc */
.jsp__var-price {
    font-family:var(--jj-font); font-size:18px; font-weight:700;
    color:var(--jj-text); margin-bottom:16px;
}
.jsp__var-desc {
    font-family:var(--jj-font); font-size:13px; line-height:1.6;
    color:var(--jj-text-mid); margin-bottom:16px;
    padding:12px 16px; background:var(--jj-blue-light);
    border-radius:var(--jj-radius-sm);
}


/* ══════════════════════════════════════════════
   QUANTITY — Animated spinning border
   ══════════════════════════════════════════════ */
.jsp__atc-row {
    display:flex; align-items:center; gap:12px; margin-bottom:20px;
}

.jsp__qty-wrap {
    display:flex; align-items:center;
    height:52px; width:130px;
    position:relative; overflow:hidden;
    border-radius:var(--jj-radius);
    background:var(--jj-blue-light);
}

/* Spinning border */
.jsp__qty-wrap::before {
    content:'';
    position:absolute; top:-100%; left:-100%;
    width:300%; height:300%;
    background:conic-gradient(
        from 0deg,
        transparent 70%,
        var(--jj-blue) 80%,
        transparent 90%
    );
    animation:jsp-spin 3s linear infinite;
    z-index:0;
}

.jsp__qty-inner {
    position:absolute; inset:2px;
    background:var(--jj-white);
    display:flex; align-items:center;
    z-index:1;
    border-radius:calc(var(--jj-radius) - 2px);
}

.jsp__qty-btn {
    display:flex; align-items:center; justify-content:center;
    flex:1; height:100%;
    background:none; border:none;
    color:var(--jj-text-light); cursor:pointer;
    transition:all 0.3s var(--jj-ease);
    padding:0; outline:none;
}
.jsp__qty-btn:hover { color:var(--jj-blue); }
.jsp__qty-btn:active { transform:scale(0.9); }
.jsp__qty-btn svg { stroke:currentColor; }

.jsp__qty-input {
    width:40px; height:100%; text-align:center;
    border:none !important;
    font-family:var(--jj-font); font-size:15px; font-weight:700;
    color:var(--jj-text); background:transparent; outline:none;
    -moz-appearance:textfield; appearance:textfield;
}
.jsp__qty-input::-webkit-outer-spin-button,
.jsp__qty-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }


/* ══════════════════════════════════════════════
   ADD TO CART BUTTON — Gradient pill with glow
   ══════════════════════════════════════════════ */
.jsp__atc-btn {
    flex:1; position:relative;
    height:52px;
    display:flex; align-items:center; justify-content:center;
    padding:0 32px !important;
    background:linear-gradient(135deg, var(--jj-blue), var(--jj-pink)) !important;
    color:#fff !important; border:none !important;
    border-radius:var(--jj-radius-pill) !important;
    font-family:var(--jj-font) !important; font-size:15px !important; font-weight:700 !important;
    text-transform:none !important; letter-spacing:0 !important;
    cursor:pointer; outline:none; line-height:1;
    min-width:180px;
    transition:all 0.3s var(--jj-ease) !important;
    box-shadow:0 4px 20px rgba(210,23,118,0.2);
}

.jsp__atc-btn:hover {
    transform:translateY(-3px) !important;
    box-shadow:0 8px 28px rgba(210,23,118,0.35) !important;
}

.jsp__atc-btn:active { transform:scale(0.97) !important; }

.jsp__atc-btn:disabled {
    opacity:0.5 !important; cursor:not-allowed !important;
}
.jsp__atc-btn:disabled:hover {
    transform:none !important; box-shadow:0 4px 20px rgba(210,23,118,0.2) !important;
}

.jsp__atc-text { position:relative; z-index:1; }

@media (max-width:768px) {
    .jsp__atc-row { flex-wrap:wrap; }
    .jsp__qty-wrap { width:100%; }
    .jsp__atc-btn { width:100%; min-width:auto; }
}


/* ══════════════════════════════════════════════
   STOCK STATUS
   ══════════════════════════════════════════════ */
.jsp__stock {
    display:flex; align-items:center; gap:8px;
    font-family:var(--jj-font); font-size:13px; font-weight:700;
    margin-bottom:12px;
}
.jsp__stock-dot {
    width:8px; height:8px; border-radius:50%;
}
.jsp__stock--instock .jsp__stock-dot { background:#22c55e; }
.jsp__stock--instock { color:#22c55e; }
.jsp__stock--outofstock .jsp__stock-dot { background:var(--jj-pink); }
.jsp__stock--outofstock { color:var(--jj-pink); }
.jsp__stock--onbackorder .jsp__stock-dot { background:#f59e0b; }
.jsp__stock--onbackorder { color:#f59e0b; }

.jsp__sku {
    font-family:var(--jj-font); font-size:12px;
    color:var(--jj-text-light); margin-bottom:24px;
}


/* ══════════════════════════════════════════════
   ACCORDIONS
   ══════════════════════════════════════════════ */
.jsp__accordions {
    border-top:1px solid var(--jj-border);
}
.jsp__acc { border-bottom:1px solid var(--jj-border); }

.jsp__acc-trigger {
    display:flex; align-items:center; justify-content:space-between;
    width:100%; padding:16px 0;
    background:none; border:none;
    font-family:var(--jj-font); font-size:14px; font-weight:700;
    color:var(--jj-text);
    cursor:pointer; outline:none;
    transition:color 0.2s ease;
}
.jsp__acc-trigger:hover { color:var(--jj-blue); }

.jsp__acc-icon {
    stroke:currentColor; fill:none;
    transition:transform 0.3s var(--jj-ease);
    flex-shrink:0;
}
.jsp__acc-trigger[aria-expanded="true"] .jsp__acc-icon { transform:rotate(45deg); }

.jsp__acc-body {
    max-height:0; overflow:hidden;
    transition:max-height 0.4s var(--jj-ease-smooth);
}
.jsp__acc-body.jsp-acc-open { max-height:600px; }

.jsp__acc-inner {
    padding:0 0 20px;
    font-family:var(--jj-font); font-size:14px; line-height:1.7;
    color:var(--jj-text-mid);
}
.jsp__acc-inner p { margin:0 0 10px; }
.jsp__acc-inner table { width:100%; border-collapse:collapse; }
.jsp__acc-inner th, .jsp__acc-inner td {
    padding:10px 12px; text-align:left;
    border-bottom:1px solid var(--jj-border);
    font-size:13px;
}
.jsp__acc-inner th { font-weight:700; color:var(--jj-text); width:35%; }
.jsp__acc-inner td { color:var(--jj-text-mid); }


/* ══════════════════════════════════════════════
   RELATED PRODUCTS
   ══════════════════════════════════════════════ */
.jsp__related {
    max-width:1400px; margin:0 auto;
    padding:48px 32px 0;
}
.jsp__related-header { margin-bottom:20px; }
.jsp__related-title {
    font-family:var(--jj-font); font-size:20px; font-weight:700;
    color:var(--jj-text);
}
@media (max-width:768px) {
    .jsp__related { padding:32px 16px 0; }
    .jsp__related-title { font-size:18px; }
}


/* ══════════════════════════════════════════════
   HIDE DEFAULT WC ELEMENTS
   ══════════════════════════════════════════════ */
.jsp .woocommerce-variation-add-to-cart,
.jsp .variations_form .variations,
.jsp .woocommerce-variation { display:none !important; }