/* =============================================
   Fusion Food - Single Product Page Styles
   Add to: /wp-content/themes/temptation/
   File:   single-product.css
   Then enqueue in functions.php (see instructions)
   ============================================= */

/* ---------- Variables ---------- */
:root {
    --ff-gold:       #C9A84C;
    --ff-gold-light: #e8c96a;
    --ff-gold-dim:   rgba(201,168,76,0.10);
    --ff-black:      #0a0a0a;
    --ff-surface:    #1a1a1a;
    --ff-card:       #1f1f1f;
    --ff-border:     rgba(201,168,76,0.18);
    --ff-text:       #f0ece4;
    --ff-muted:      #888880;
    --ff-radius:     12px;
    --ff-trans:      0.3s ease;
}

/* ══════════════════════════════════════════════
   FULL-BLEED LAYOUT FIX
   Make the dark background stretch truly edge-to-edge.
   WooCommerce adds body.woocommerce + body.single-product.
   ══════════════════════════════════════════════ */

/* 1. Kill any white body background on the product page */
body.woocommerce.single-product,
body.woocommerce-page.single-product {
    background: #0a0a0a !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Neutralise any WooCommerce / theme global wrappers that
      might constrain width or add side padding */
body.single-product .site,
body.single-product #page,
body.single-product #content,
body.single-product .site-content,
body.single-product #primary,
body.single-product .content-area,
body.single-product main#main,
body.single-product .entry-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}

/* 3. Page wrapper: full-bleed dark container, NO side padding here */
.ff-sp-page {
    background: #0a0a0a;
    color: var(--ff-text);
    min-height: 60vh;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-top: clamp(28px, 4vw, 56px);
    padding-bottom: 80px;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

/* 4. Every direct content section is individually centred.
      Padding moves here so sections feel inset but background bleeds. */
.ff-sp-breadcrumb,
.ff-sp-grid,
.ff-sp-tabs,
.ff-sp-related {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(16px, 4vw, 56px);
    padding-right: clamp(16px, 4vw, 56px);
    box-sizing: border-box;
}

/* ---------- Breadcrumb ---------- */
.ff-sp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ff-muted);
    margin-bottom: 36px;
    font-family: 'Jost', sans-serif;
    flex-wrap: wrap;
}
.ff-sp-breadcrumb a { color: var(--ff-muted); text-decoration: none; transition: color var(--ff-trans); }
.ff-sp-breadcrumb a:hover { color: var(--ff-gold); }
.ff-sp-breadcrumb span { color: var(--ff-gold); opacity: 0.6; }
.ff-sp-breadcrumb-current { color: var(--ff-gold) !important; opacity: 1 !important; }

/* ---------- Main grid ---------- */
.ff-sp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px,5vw,72px);
    margin-bottom: 72px;
    align-items: start;
}
@media (max-width: 900px) {
    .ff-sp-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- Gallery ---------- */
.ff-sp-gallery { position: sticky; top: 20px; }

.ff-sp-main-img {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--ff-radius);
    overflow: hidden;
    background: var(--ff-surface);
    border: 1px solid var(--ff-border);
    margin-bottom: 14px;
    cursor: zoom-in;
}
.ff-sp-main-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.ff-sp-main-img:hover img { transform: scale(1.04); }
.ff-sp-no-img {
    display: flex; align-items: center; justify-content: center;
    cursor: default;
}
.ff-sp-no-img i { font-size: 48px; color: var(--ff-muted); opacity: 0.3; }

.ff-sp-badges {
    position: absolute;
    top: 14px; left: 14px;
    display: flex; gap: 8px; flex-wrap: wrap;
}
.ff-badge {
    font-size: 10px;
    font-family: 'Jost', sans-serif;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 100px;
    backdrop-filter: blur(6px);
}
.ff-badge-sale   { background: rgba(200,60,60,0.85); color: #fff; }
.ff-badge-in     { background: rgba(201,168,76,0.85); color: #111; }
.ff-badge-out    { background: rgba(100,100,100,0.80); color: #ddd; }

.ff-sp-zoom {
    position: absolute;
    bottom: 14px; right: 14px;
    width: 36px; height: 36px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity var(--ff-trans);
}
.ff-sp-main-img:hover .ff-sp-zoom { opacity: 1; }

.ff-sp-thumbs {
    display: flex; gap: 10px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ff-gold) transparent;
    padding-bottom: 4px;
}
.ff-sp-thumb {
    flex-shrink: 0;
    width: 70px; height: 70px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    opacity: 0.55;
    transition: all var(--ff-trans);
}
.ff-sp-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.ff-sp-thumb.active, .ff-sp-thumb:hover { border-color: var(--ff-gold); opacity: 1; }

/* ---------- Info column ---------- */
.ff-sp-info { display: flex; flex-direction: column; gap: 0; }

.ff-sp-cat-label {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ff-gold);
    margin-bottom: 12px;
}
.ff-sp-cat-label a { color: var(--ff-gold); text-decoration: none; }

.ff-sp-title {
    font-family: 'Jost', sans-serif;
    font-size: clamp(26px,3.5vw,42px);
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

.ff-sp-rating {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 18px;
}
.ff-sp-stars { display: flex; gap: 3px; }
.ff-sp-stars .fa-star { font-size: 13px; color: var(--ff-surface); }
.ff-sp-stars .fa-star.active { color: var(--ff-gold); }
.ff-sp-rating-txt { font-size: 13px; color: var(--ff-muted); font-family: 'Jost', sans-serif; }

/* WooCommerce price override */
.ff-sp-price .price {
    font-family: 'Jost', sans-serif !important;
    font-size: clamp(24px,3vw,36px) !important;
    font-weight: 700 !important;
    color: var(--ff-gold) !important;
    margin-bottom: 18px;
    display: block;
}
.ff-sp-price .price del {
    font-size: 0.6em !important;
    color: var(--ff-muted) !important;
    font-weight: 400 !important;
    margin-right: 8px;
}
.ff-sp-price .price ins { text-decoration: none !important; }

.ff-sp-short-desc {
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: #aaa9a3;
    margin-bottom: 22px;
}
.ff-sp-short-desc p { margin: 0 0 10px; }

.ff-sp-divider {
    height: 1px;
    background: linear-gradient(to right, var(--ff-gold), transparent);
    opacity: 0.25;
    margin: 20px 0 24px;
}

/* ---------- Variations ---------- */
.ff-sp-variations { margin-bottom: 24px; }
.ff-sp-var-group { margin-bottom: 18px; }

.ff-sp-var-label {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ff-muted);
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px;
}
.ff-sp-selected-val {
    color: var(--ff-gold);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
}

.ff-sp-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.ff-sp-swatch {
    min-width: 44px; height: 42px;
    padding: 0 14px;
    background: var(--ff-surface);
    border: 1.5px solid var(--ff-border);
    border-radius: 8px;
    color: var(--ff-text);
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--ff-trans);
    white-space: nowrap;
}
.ff-sp-swatch:hover { border-color: var(--ff-gold); color: var(--ff-gold); }
.ff-sp-swatch.active {
    border-color: var(--ff-gold);
    background: var(--ff-gold-dim);
    color: var(--ff-gold);
    box-shadow: 0 0 0 1px var(--ff-gold);
}

.ff-sp-var-notice {
    margin-top: 10px;
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    min-height: 22px;
}
.ff-var-price { color: var(--ff-gold); font-weight: 700; }
.ff-var-oos   { color: #f44336; font-weight: 600; font-size: 13px; }

/* ---------- Stock ---------- */
.ff-sp-stock {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    color: var(--ff-muted);
    margin-bottom: 20px;
}
.ff-sp-stock-dot {
    width: 8px; height: 8px;
    border-radius: 50%; flex-shrink: 0;
}
.ff-sp-stock-dot.in  { background: #4caf50; box-shadow: 0 0 6px rgba(76,175,80,0.5); }
.ff-sp-stock-dot.out { background: #f44336; }

/* ---------- Purchase row ---------- */
.ff-sp-purchase {
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.ff-sp-qty {
    display: flex; align-items: center;
    background: var(--ff-surface);
    border: 1.5px solid var(--ff-border);
    border-radius: 10px;
    overflow: hidden;
    height: 52px;
}
.ff-sp-qty button {
    width: 42px; height: 100%;
    background: none; border: none;
    color: var(--ff-gold);
    font-size: 20px; cursor: pointer;
    font-family: 'Jost', sans-serif;
    transition: background var(--ff-trans);
    display: flex; align-items: center; justify-content: center;
}
.ff-sp-qty button:hover { background: var(--ff-gold-dim); }
.ff-sp-qty input {
    width: 46px; height: 100%;
    background: none;
    border: none;
    border-left: 1px solid var(--ff-border);
    border-right: 1px solid var(--ff-border);
    color: #fff;
    font-family: 'Jost', sans-serif;
    font-size: 16px; font-weight: 700;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
.ff-sp-qty input::-webkit-outer-spin-button,
.ff-sp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }

.ff-sp-add-btn {
    flex: 1; min-width: 160px; height: 52px;
    background: var(--ff-gold);
    border: none; border-radius: 10px;
    color: #111;
    font-family: 'Jost', sans-serif;
    font-size: 13px; font-weight: 800;
    letter-spacing: 0.12em; text-transform: uppercase;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    transition: all var(--ff-trans);
    position: relative; overflow: hidden;
}
.ff-sp-add-btn:hover {
    background: var(--ff-gold-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(201,168,76,0.35);
}
.ff-sp-add-btn:active { transform: translateY(0); box-shadow: none; }
.ff-sp-add-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Meta ---------- */
.ff-sp-meta { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ff-sp-meta-row {
    font-family: 'Jost', sans-serif;
    font-size: 13px; color: var(--ff-muted);
    display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
}
.ff-sp-meta-row strong { color: var(--ff-text); min-width: 72px; }
.ff-sp-meta-row a { color: var(--ff-gold); text-decoration: none; }
.ff-sp-meta-row a:hover { text-decoration: underline; }

/* ---------- Tabs ---------- */
.ff-sp-tabs { margin-bottom: 72px; }
.ff-sp-tab-nav {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--ff-border);
    margin-bottom: 28px;
    overflow-x: auto;
}
.ff-sp-tab-btn {
    font-family: 'Jost', sans-serif;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ff-muted);
    background: none; border: none;
    border-bottom: 2px solid transparent;
    padding: 13px 24px;
    margin-bottom: -1px;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--ff-trans);
}
.ff-sp-tab-btn:hover { color: var(--ff-text); }
.ff-sp-tab-btn.active { color: var(--ff-gold); border-bottom-color: var(--ff-gold); }

.ff-sp-tab-panel { display: none; }
.ff-sp-tab-panel.active { display: block; animation: ffFadeUp 0.3s ease; }
@keyframes ffFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ff-sp-desc-content {
    font-family: 'Jost', sans-serif;
    font-size: 15px; line-height: 1.85;
    color: #aaa9a3; max-width: 740px;
}
.ff-sp-desc-content h2, .ff-sp-desc-content h3 {
    font-size: 20px; font-weight: 700;
    color: #fff; margin: 20px 0 10px;
}
.ff-sp-desc-content p { margin-bottom: 14px; }

.ff-sp-info-table { width: 100%; border-collapse: collapse; max-width: 560px; }
.ff-sp-info-table tr { border-bottom: 1px solid var(--ff-border); }
.ff-sp-info-table td {
    font-family: 'Jost', sans-serif;
    padding: 13px 14px; font-size: 14px;
}
.ff-sp-info-table td:first-child { color: var(--ff-muted); font-weight: 600; width: 40%; }
.ff-sp-info-table td:last-child  { color: var(--ff-text); }

.ff-sp-no-reviews { font-family: 'Jost', sans-serif; font-size: 15px; color: var(--ff-muted); }

/* ---------- Related ---------- */
.ff-sp-related { margin-top: 16px; }
.ff-sp-section-hdr { display: flex; align-items: baseline; gap: 16px; margin-bottom: 32px; }
.ff-sp-section-hdr h2 {
    font-family: 'Jost', sans-serif;
    font-size: clamp(20px,2.5vw,28px);
    font-weight: 800; color: #fff;
    white-space: nowrap;
}
.ff-sp-section-line { flex:1; height:1px; background: linear-gradient(to right, var(--ff-gold), transparent); opacity:.2; }

.ff-sp-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
    gap: 20px;
}
.ff-sp-rel-card {
    background: var(--ff-card);
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radius);
    overflow: hidden;
    text-decoration: none;
    display: block;
    transition: transform var(--ff-trans), box-shadow var(--ff-trans), border-color var(--ff-trans);
}
.ff-sp-rel-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.5);
    border-color: rgba(201,168,76,0.4);
}
.ff-sp-rel-img { aspect-ratio: 4/3; overflow: hidden; }
.ff-sp-rel-img img { width:100%; height:100%; object-fit:cover; display:block; transition: transform 0.5s ease; }
.ff-sp-rel-card:hover .ff-sp-rel-img img { transform: scale(1.06); }
.ff-sp-rel-placeholder { width:100%; height:100%; background:var(--ff-surface); display:flex; align-items:center; justify-content:center; }
.ff-sp-rel-placeholder i { font-size:32px; color:var(--ff-muted); opacity:0.25; }
.ff-sp-rel-body { padding: 16px; }
.ff-sp-rel-name {
    font-family: 'Jost', sans-serif;
    font-size: 15px; font-weight: 700;
    color: #fff; margin-bottom: 6px; line-height: 1.3;
}
.ff-sp-rel-price {
    font-family: 'Jost', sans-serif;
    font-size: 14px; font-weight: 700;
    color: var(--ff-gold); margin-bottom: 12px;
    display: block;
}
.ff-sp-rel-btn {
    display: block; width:100%; text-align:center;
    padding: 9px;
    border-radius: 7px;
    border: 1.5px solid var(--ff-gold);
    color: var(--ff-gold);
    font-family: 'Jost', sans-serif;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    transition: all var(--ff-trans);
}
.ff-sp-rel-card:hover .ff-sp-rel-btn { background: var(--ff-gold); color: #111; }

/* ---------- Lightbox ---------- */
.ff-sp-lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.93);
    z-index: 99999;
    display: none;
    align-items: center; justify-content: center;
    padding: 24px;
}
.ff-sp-lightbox.open { display: flex; }
.ff-sp-lightbox img {
    max-width: 90vw; max-height: 90vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.8);
}
.ff-sp-lb-close {
    position: absolute; top: 18px; right: 18px;
    width: 42px; height: 42px;
    background: rgba(255,255,255,0.1);
    border: none; border-radius: 50%;
    color: #fff; font-size: 20px;
    cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    transition: background var(--ff-trans);
}
.ff-sp-lb-close:hover { background: rgba(255,255,255,0.2); }

/* ══════════════════════════════════════════════
   WooCommerce Reviews – complete dark-theme rewrite
   High-specificity + !important to beat woocommerce.css
   ══════════════════════════════════════════════ */

/* Wrapper reset */
#reviews,
#reviews * { box-sizing: border-box; }
#reviews { font-family: 'Jost', sans-serif; color: var(--ff-text); background: transparent; }

/* ── Section title ── */
#reviews .woocommerce-Reviews-title {
    font-size: clamp(17px, 2vw, 22px);
    font-weight: 800;
    color: #fff;
    margin: 0 0 28px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ff-border);
    letter-spacing: -0.01em;
    text-transform: uppercase;
}
/* legacy fallback without #reviews scope */
.woocommerce-Reviews-title {
    font-size: clamp(17px,2vw,22px);
    font-weight: 800;
    color: #fff;
    margin: 0 0 28px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ff-border);
    letter-spacing: -0.01em;
}

/* ── No-reviews state ── */
#reviews .woocommerce-noreviews,
#comments .woocommerce-noreviews {
    font-size: 14px;
    color: var(--ff-muted);
    padding: 22px 20px;
    background: var(--ff-surface);
    border: 1px dashed var(--ff-border);
    border-radius: var(--ff-radius);
    margin-bottom: 32px;
}

/* ─── Review cards (ol.commentlist) ─── */
#reviews ol.commentlist {
    list-style: none !important;
    margin: 0 0 40px !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
#reviews ol.commentlist li.review .comment_container {
    display: flex !important;
    gap: 16px !important;
    background: var(--ff-surface) !important;
    border: 1px solid var(--ff-border) !important;
    border-radius: var(--ff-radius) !important;
    padding: 20px !important;
    transition: border-color 0.25s;
}
#reviews ol.commentlist li.review .comment_container:hover {
    border-color: rgba(201,168,76,0.35) !important;
}
#reviews ol.commentlist li.review .comment_container img.avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    border: 2px solid var(--ff-border) !important;
    background: var(--ff-card) !important;
}
#reviews ol.commentlist li.review .comment-text { flex: 1; min-width: 0; }

/* ── Read-only star display (WooCommerce percentage-width trick) ── */
#reviews .star-rating {
    display: block !important;
    overflow: hidden !important;
    position: relative !important;
    height: 14px !important;
    width: 75px !important;
    font-size: 0 !important;
    margin-bottom: 10px !important;
}
#reviews .star-rating::before {
    font-family: 'Font Awesome 6 Free', 'FontAwesome', sans-serif !important;
    font-weight: 900 !important;
    content: '\f005\f005\f005\f005\f005' !important;
    font-size: 12px !important;
    letter-spacing: 3px !important;
    color: #333 !important;
    display: block !important;
    position: absolute !important;
    top: 0; left: 0 !important;
}
#reviews .star-rating span {
    overflow: hidden !important;
    position: absolute !important;
    top: 0; left: 0 !important;
    height: 100% !important;
    display: block !important;
}
#reviews .star-rating span::before {
    font-family: 'Font Awesome 6 Free', 'FontAwesome', sans-serif !important;
    font-weight: 900 !important;
    content: '\f005\f005\f005\f005\f005' !important;
    font-size: 12px !important;
    letter-spacing: 3px !important;
    color: var(--ff-gold) !important;
    display: block !important;
    position: absolute !important;
    top: 0; left: 0 !important;
}

/* Reviewer meta */
#reviews .commentlist p.meta { font-size: 12px; color: var(--ff-muted); margin-bottom: 10px; }
#reviews .commentlist .woocommerce-review__author strong {
    color: var(--ff-text) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}
#reviews .commentlist .woocommerce-review__published-date,
#reviews .commentlist time {
    font-style: italic;
    color: var(--ff-muted) !important;
    font-size: 12px !important;
}
#reviews .commentlist .woocommerce-review__dash { color: var(--ff-border); margin: 0 4px; }

/* Review verified badge */
#reviews .commentlist .woocommerce-review__verified {
    display: inline-block;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5cb85c !important;
    background: rgba(92,184,92,0.12);
    border: 1px solid rgba(92,184,92,0.25);
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 8px;
    vertical-align: middle;
}

/* Review body text */
#reviews .commentlist .description,
#reviews .commentlist .description p {
    font-size: 14px !important;
    line-height: 1.75 !important;
    color: #aaa9a3 !important;
    margin: 0 !important;
}

/* ─── Review form ─── */
#review_form_wrapper {
    margin-top: 36px;
    padding-top: 32px;
    border-top: 1px solid var(--ff-border);
}
/* "Add a review" heading */
#review_form_wrapper .comment-reply-title,
#review_form_wrapper #reply-title,
.comment-reply-title {
    font-size: clamp(14px, 1.6vw, 19px) !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    display: block !important;
    border: none !important;
    background: none !important;
}

/* Form layout: 2-column grid, full-width rows for non-field items */
#review_form .comment-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 16px !important;
    row-gap: 20px !important;
}
#review_form .comment-form .comment-notes,
#review_form .comment-form .comment-form-rating,
#review_form .comment-form .comment-form-comment,
#review_form .comment-form .comment-form-cookies-consent,
#review_form .comment-form .form-submit {
    grid-column: 1 / -1 !important;
}

/* Field wrapper margin (WooCommerce wraps each field in <p>) */
#review_form .comment-form > p,
#review_form .comment-form > div { margin: 0 !important; }

/* Labels */
#review_form .comment-form label {
    display: block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--ff-muted) !important;
    margin-bottom: 8px !important;
}
#review_form .comment-form label .required { color: var(--ff-gold) !important; }

/* Inputs + Textarea */
#review_form textarea#comment,
#review_form input#author,
#review_form input#email,
#review_form input[type="text"],
#review_form input[type="email"] {
    display: block !important;
    width: 100% !important;
    background: var(--ff-surface) !important;
    border: 1.5px solid var(--ff-border) !important;
    border-radius: 10px !important;
    color: var(--ff-text) !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 14px !important;
    padding: 13px 16px !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.25s, box-shadow 0.25s !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
}
#review_form textarea#comment { resize: vertical !important; min-height: 120px !important; }
#review_form textarea#comment:focus,
#review_form input#author:focus,
#review_form input#email:focus,
#review_form input[type="text"]:focus,
#review_form input[type="email"]:focus {
    border-color: var(--ff-gold) !important;
    box-shadow: 0 0 0 3px rgba(201,168,76,0.12) !important;
    background: #212121 !important;
}
#review_form textarea::placeholder,
#review_form input::placeholder { color: #555 !important; }

/* Star rating INPUT – override WooCommerce icon font with Font Awesome
   WC sets text-indent:-999em + overflow:hidden on each <a> – we reset that */
#review_form .comment-form-rating > label {
    display: block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--ff-muted) !important;
    margin-bottom: 12px !important;
}
/* Hide native <select> */
#review_form .comment-form-rating #rating,
#review_form .comment-form-rating select { display: none !important; }

/* Stars outer container (WC outputs a <p class="stars">) */
#review_form p.stars,
#review_form .comment-form-rating .stars {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}
/* Inner <span> WC wraps links in */
#review_form p.stars > span,
#review_form .comment-form-rating .stars > span {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
}
/* Each star <a> */
#review_form p.stars a,
#review_form .comment-form-rating .stars a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    text-indent: 0 !important;
    overflow: visible !important;
    position: static !important;
    font-size: 0 !important;
    text-decoration: none !important;
    transition: transform 0.15s !important;
}
/* The star glyph – override WC's \e020 with FA solid star */
#review_form p.stars a::before,
#review_form .comment-form-rating .stars a::before {
    font-family: 'Font Awesome 6 Free', 'FontAwesome', sans-serif !important;
    font-weight: 400 !important;
    content: '\f005' !important;
    font-size: 24px !important;
    line-height: 1 !important;
    color: #3a3a3a !important;
    display: block !important;
    position: static !important;
    text-indent: 0 !important;
    transition: color 0.15s, font-weight 0.15s !important;
}
/* Hover: fill all up to the hovered star */
#review_form p.stars:hover a::before,
#review_form .comment-form-rating .stars:hover a::before {
    font-weight: 900 !important;
    color: var(--ff-gold) !important;
}
/* Dim stars AFTER the hovered one */
#review_form p.stars a:hover ~ a::before,
#review_form .comment-form-rating .stars a:hover ~ a::before {
    font-weight: 400 !important;
    color: #3a3a3a !important;
}
/* Scale the star under cursor */
#review_form p.stars a:hover,
#review_form .comment-form-rating .stars a:hover { transform: scale(1.2) !important; }
/* WC JS: hover fills stars up to cursor via .active class */
#review_form p.stars a.active::before,
#review_form .comment-form-rating .stars a.active::before {
    font-weight: 900 !important;
    color: var(--ff-gold) !important;
}
/* WC JS: on CLICK, only clicked star gets .active + p.stars gets .selected.
   Mirror WooCommerce's own CSS model:
   1) Fill ALL stars in .selected state
   2) Trim (dim) stars that come AFTER the .active (clicked) one */
#review_form p.stars.selected a::before,
#review_form .comment-form-rating .stars.selected a::before {
    font-weight: 900 !important;
    color: var(--ff-gold) !important;
}
#review_form p.stars.selected a.active ~ a::before,
#review_form .comment-form-rating .stars.selected a.active ~ a::before {
    font-weight: 400 !important;
    color: #3a3a3a !important;
}

/* Cookies consent */
#review_form .comment-form-cookies-consent {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 12px !important;
    color: var(--ff-muted) !important;
}
#review_form .comment-form-cookies-consent input[type="checkbox"] {
    margin-top: 2px !important;
    accent-color: var(--ff-gold) !important;
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
}

/* Helper note */
#review_form .comment-notes {
    font-size: 12px !important;
    color: var(--ff-muted) !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}
#review_form .comment-notes .required { color: var(--ff-gold) !important; }
#review_form .comment-notes a { color: var(--ff-gold) !important; text-decoration: none !important; }
#review_form .comment-notes a:hover { text-decoration: underline !important; }

/* Submit */
#review_form .form-submit { margin: 8px 0 0 !important; }
#review_form .form-submit #submit,
#review_form .form-submit input[type="submit"] {
    background: var(--ff-gold) !important;
    border: none !important;
    border-radius: 10px !important;
    color: #111 !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    padding: 14px 40px !important;
    cursor: pointer !important;
    transition: background 0.25s, transform 0.2s, box-shadow 0.25s !important;
    display: inline-block !important;
    line-height: 1 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
#review_form .form-submit #submit:hover,
#review_form .form-submit input[type="submit"]:hover {
    background: var(--ff-gold-light) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(201,168,76,0.35) !important;
}
#review_form .form-submit #submit:active,
#review_form .form-submit input[type="submit"]:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}

/* Must-be-logged-in notice */
#reviews .must-log-in {
    font-size: 14px !important;
    color: var(--ff-muted) !important;
    padding: 20px !important;
    background: var(--ff-surface) !important;
    border: 1px solid var(--ff-border) !important;
    border-radius: var(--ff-radius) !important;
    margin: 0 !important;
}
#reviews .must-log-in a { color: var(--ff-gold) !important; font-weight: 700; text-decoration: none; }
#reviews .must-log-in a:hover { text-decoration: underline; }

/* ── No reviews custom empty state ── */
.ff-sp-review-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 24px;
    background: var(--ff-surface);
    border: 1px dashed var(--ff-border);
    border-radius: var(--ff-radius);
    margin-bottom: 32px;
}
.ff-sp-review-empty span { font-size: 13px; color: var(--ff-muted); }

/* ---------- WooCommerce notices ---------- */
.ff-sp-page .woocommerce-message,
.ff-sp-page .woocommerce-error,
.ff-sp-page .woocommerce-info {
    padding: 13px 18px; border-radius: 9px;
    font-family: 'Jost', sans-serif;
    font-size: 14px; margin-bottom: 20px;
    border: 1px solid;
}
.ff-sp-page .woocommerce-message { background: rgba(76,175,80,.12); border-color: rgba(76,175,80,.3); color: #81c784; }
.ff-sp-page .woocommerce-error   { background: rgba(244,67,54,.10); border-color: rgba(244,67,54,.2); color: #ef9a9a; }
.ff-sp-page .woocommerce-info    { background: rgba(201,168,76,.10); border-color: rgba(201,168,76,.2); color: var(--ff-gold); }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    /* Inner sections: tighter side padding on tablet */
    .ff-sp-breadcrumb,
    .ff-sp-grid,
    .ff-sp-tabs,
    .ff-sp-related {
        padding-left: clamp(12px, 4vw, 28px);
        padding-right: clamp(12px, 4vw, 28px);
    }
    /* Review form back to 1-column */
    #review_form .comment-form {
        grid-template-columns: 1fr !important;
    }
    #review_form .comment-form .comment-form-author,
    #review_form .comment-form .comment-form-email {
        grid-column: 1 / -1 !important;
    }
}
@media (max-width: 600px) {
    .ff-sp-breadcrumb,
    .ff-sp-grid,
    .ff-sp-tabs,
    .ff-sp-related { padding-left: 14px; padding-right: 14px; }
    .ff-sp-purchase { gap: 10px; }
    .ff-sp-add-btn { min-width: 0; font-size: 12px; }
    .ff-sp-tab-btn { padding: 11px 14px; font-size: 10px; }
    .ff-sp-related-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}