/**
 * FrameFiesta Single Product Page Styles
 * Version: 1.0.0
 *
 * Sections:
 * 1. Layout & Container
 * 2. Product Gallery
 * 3. Product Summary
 * 4. Variation Swatches
 * 5. Select Lenses CTA
 * 6. Trust Badges
 * 7. Product Tabs
 * 8. Services Section
 * 9. Related Products
 * 10. Mobile Responsive
 */

/* ============================================
   1. LAYOUT & CONTAINER
   ============================================ */

.ff-blocksy-product .site-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.ff-blocksy-product .product {
    padding-top: 20px;
}

/* Give gallery more space — Blocksy uses this variable for the 2-column split */
.ff-blocksy-product .product-entry-wrapper {
    --product-gallery-width: 58%;
}

/* Hide Blocksy hero section gap on product pages */
.ff-blocksy-product .hero-section {
    display: none !important;
}

/* Breadcrumb styling */
.ff-blocksy-product .woocommerce-breadcrumb {
    font-size: 13px;
    color: var(--ff-text-light, #767676);
    margin-bottom: 20px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.ff-blocksy-product .woocommerce-breadcrumb a {
    color: var(--ff-text-light, #767676);
    text-decoration: none;
    transition: color 0.2s;
}

.ff-blocksy-product .woocommerce-breadcrumb a:hover {
    color: var(--ff-accent, #3B6BE5);
}

/* ============================================
   2. PRODUCT GALLERY (FIFU + lightSlider)
   ============================================ */

/* Gallery — no extra padding, image fills container */
.ff-blocksy-product .ct-product-gallery-container {
    padding: 0 !important;
}

/* FIFU slider main image — fill container width */
.ff-blocksy-product .fifu-slider {
    width: 100%;
}

.ff-blocksy-product .fifu-slider .lslide {
    background: #fafafa;
    border-radius: 8px;
}

.ff-blocksy-product .fifu-slider .lslide img,
.ff-blocksy-product .fifu-slider .lslide a img {
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
    display: block;
    border-radius: 8px;
    background: #fafafa;
}

/* FIFU thumbnails — large, percentage-based, no cropping */
.ff-blocksy-product .fifu-slider .lSPager.lSGallery,
.ff-blocksy-product .fifu-slider ul.lSPager {
    display: flex !important;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 6px !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

.ff-blocksy-product .fifu-slider .lSPager.lSGallery li,
.ff-blocksy-product .fifu-slider ul.lSPager li {
    width: calc(25% - 9px) !important;
    min-width: 100px !important;
    height: auto !important;
    aspect-ratio: 4/3;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    background: #fafafa;
    cursor: pointer;
    transition: border-color 0.2s;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 6px !important;
    box-sizing: border-box;
    margin-right: 0 !important;
    float: none !important;
}

.ff-blocksy-product .fifu-slider .lSPager.lSGallery li.active,
.ff-blocksy-product .fifu-slider .lSPager.lSGallery li:hover {
    border-color: var(--ff-accent, #3B6BE5);
}

.ff-blocksy-product .fifu-slider .lSPager li a {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center;
    justify-content: center;
}

.ff-blocksy-product .fifu-slider .lSPager li img {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
}

/* Fallback: target FIFU native gallery before lightSlider transforms it */
.ff-blocksy-product .fifu-product-gallery > li img {
    object-fit: contain;
    border-radius: 8px;
    background: #fafafa;
}

/* Sale badge on gallery */
.ff-blocksy-product .onsale {
    background: #e94560;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 5;
}

/* ============================================
   3. PRODUCT SUMMARY
   ============================================ */

/* Blocksy already adds margin-inline-start: 40px on desktop */

/* Product title */
.ff-blocksy-product .entry-summary .product_title {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1.3;
    margin-bottom: 8px;
}

/* SKU / meta line */
.ff-blocksy-product .entry-summary .product_meta {
    font-size: 13px;
    color: var(--ff-text-light, #767676);
    margin-bottom: 16px;
}

.ff-blocksy-product .entry-summary .product_meta .sku_wrapper {
    display: inline-block;
    margin-right: 16px;
}

/* Frame size badge */
.ff-blocksy-product .ff-frame-size {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0f4ff;
    color: var(--ff-accent, #3B6BE5);
    font-size: 13px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.ff-blocksy-product .ff-frame-size svg {
    width: 14px;
    height: 14px;
}

/* Price */
.ff-blocksy-product .entry-summary .price {
    font-size: 26px;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 6px;
}

.ff-blocksy-product .entry-summary .price del {
    font-size: 18px;
    color: #999;
    font-weight: 400;
    margin-right: 8px;
}

.ff-blocksy-product .entry-summary .price ins {
    color: #e94560;
    text-decoration: none;
}

/* Short description */
.ff-blocksy-product .entry-summary .woocommerce-product-details__short-description {
    font-size: 15px;
    color: #515151;
    line-height: 1.7;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

/* Star rating */
.ff-blocksy-product .entry-summary .woocommerce-product-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.ff-blocksy-product .entry-summary .star-rating {
    color: #f5a623;
    font-size: 14px;
}

.ff-blocksy-product .entry-summary .woocommerce-review-link {
    font-size: 13px;
    color: var(--ff-text-light, #767676);
    text-decoration: none;
}

.ff-blocksy-product .entry-summary .woocommerce-review-link:hover {
    color: var(--ff-accent, #3B6BE5);
}

/* ============================================
   4. VARIATION SWATCHES (rtwpvs)
   ============================================ */

/* Larger swatches on single product page */
.ff-blocksy-product .entry-summary .variable-items-wrapper .variable-item {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    transition: all 0.2s;
    cursor: pointer;
}

.ff-blocksy-product .entry-summary .variable-items-wrapper .variable-item:hover {
    border-color: var(--ff-accent, #3B6BE5);
    transform: scale(1.1);
}

.ff-blocksy-product .entry-summary .variable-items-wrapper .variable-item.selected {
    border-color: var(--ff-accent, #3B6BE5);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ff-accent, #3B6BE5);
}

/* Swatch label */
.ff-blocksy-product .entry-summary .variations .label {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 8px;
}

/* ============================================
   5. SELECT LENSES CTA
   ============================================ */

/* Buy buttons: mobile version (after price) hidden on desktop,
   desktop version (after form) hidden on mobile/tablet */
.ff-buy-buttons-mobile { display: none !important; }

@media (max-width: 999px) {
    .ff-buy-buttons-mobile { display: flex !important; }
    .ff-buy-buttons-desktop { display: none !important; }
}

/* APF hiding handled by mu-plugin inline CSS (visibility:hidden, not display:none,
   so wizard JS can still read APF option values/prices from DOM) */

/* Hide add-to-cart button + quantity — wizard replaces them.
   Keep .variations visible for color swatches (rtwpvs). */
.ff-blocksy-product .woocommerce-variation-add-to-cart {
    display: none !important;
}

.ff-blocksy-product form.cart .single_add_to_cart_button {
    display: none !important;
}

.ff-blocksy-product form.cart .quantity {
    display: none !important;
}

/* Blocksy quantity wrapper — hide all instances */
.ff-blocksy-product form.cart .ct-quantity-input {
    display: none !important;
}

/* Ensure variation swatches have spacing */
.ff-blocksy-product .entry-summary .variations {
    margin-bottom: 16px;
}

.ff-blocksy-product .entry-summary .variations td.label label {
    font-weight: 600;
    color: #1a1a2e;
    font-size: 14px;
}

/* Select Lenses button */
.ff-select-lenses-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    background: var(--ff-accent, #3B6BE5);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.ff-select-lenses-btn:hover {
    background: var(--ff-accent-hover, #2D56C8);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 107, 229, 0.3);
}

.ff-select-lenses-btn svg {
    width: 20px;
    height: 20px;
}

/* Frame Only button */
.ff-frame-only-btn {
    display: block;
    width: 100%;
    padding: 12px 24px;
    background: transparent;
    color: #515151;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    margin-bottom: 20px;
}

.ff-frame-only-btn:hover {
    border-color: #999;
    color: #1a1a2e;
}

/* ============================================
   6. TRUST BADGES
   ============================================ */

.ff-trust-badges {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 20px;
}

.ff-trust-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    text-align: center;
}

.ff-trust-badge svg {
    width: 24px;
    height: 24px;
    color: var(--ff-accent, #3B6BE5);
}

.ff-trust-badge-label {
    font-size: 11px;
    font-weight: 500;
    color: #515151;
    line-height: 1.3;
}

/* ============================================
   7. PRODUCT TABS
   ============================================ */

.ff-blocksy-product .woocommerce-tabs {
    margin-top: 50px;
    clear: both;
}

.ff-blocksy-product .woocommerce-tabs ul.tabs {
    list-style: none;
    display: flex;
    gap: 0;
    border-bottom: 2px solid #f0f0f0;
    margin: 0 0 30px;
    padding: 0;
}

.ff-blocksy-product .woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

.ff-blocksy-product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 12px 24px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #767676;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}

.ff-blocksy-product .woocommerce-tabs ul.tabs li a:hover {
    color: #1a1a2e;
}

.ff-blocksy-product .woocommerce-tabs ul.tabs li.active a {
    color: var(--ff-accent, #3B6BE5);
    border-bottom-color: var(--ff-accent, #3B6BE5);
    font-weight: 600;
}

/* Tab panels */
.ff-blocksy-product .woocommerce-tabs .panel {
    font-size: 15px;
    line-height: 1.7;
    color: #515151;
}

.ff-blocksy-product .woocommerce-tabs .panel h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* Reviews tab */
.ff-blocksy-product .woocommerce-tabs #reviews {
    max-width: 800px;
}

.ff-blocksy-product .woocommerce-tabs #reviews .comment-text {
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

/* Additional info table */
.ff-blocksy-product .woocommerce-tabs .shop_attributes {
    border-collapse: collapse;
    width: 100%;
}

.ff-blocksy-product .woocommerce-tabs .shop_attributes th,
.ff-blocksy-product .woocommerce-tabs .shop_attributes td {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

.ff-blocksy-product .woocommerce-tabs .shop_attributes th {
    font-weight: 600;
    color: #1a1a2e;
    width: 30%;
}

/* ============================================
   8. SERVICES SECTION ("Why Choose FrameFiesta")
   ============================================ */

.ff-services-section {
    margin: 50px 0;
    padding: 40px;
    background: #f8f9fa;
    border-radius: 12px;
}

.ff-services-section h2 {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 30px;
}

.ff-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.ff-service-card {
    text-align: center;
    padding: 20px;
}

.ff-service-card svg {
    width: 40px;
    height: 40px;
    color: var(--ff-accent, #3B6BE5);
    margin-bottom: 12px;
}

.ff-service-card h3 {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 6px;
}

.ff-service-card p {
    font-size: 13px;
    color: #767676;
    line-height: 1.5;
    margin: 0;
}

/* ============================================
   9. RELATED PRODUCTS
   ============================================ */

.ff-blocksy-product section.related {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid #f0f0f0;
}

.ff-blocksy-product section.related > h2 {
    font-size: 22px;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 24px;
}

.ff-blocksy-product section.related ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ff-blocksy-product section.related ul.products li.product {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.ff-blocksy-product section.related ul.products li.product:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.ff-blocksy-product section.related ul.products li.product a img {
    border-radius: 8px 8px 0 0;
    width: 100%;
    height: auto;
}

.ff-blocksy-product section.related ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px;
    font-weight: 500;
    padding: 12px 12px 4px;
}

.ff-blocksy-product section.related ul.products li.product .price {
    font-size: 15px;
    font-weight: 600;
    padding: 0 12px 12px;
}

/* ============================================
   10. MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 999px) {
    .ff-blocksy-product .entry-summary {
        padding-left: 0;
        margin-top: 24px;
    }

    .ff-blocksy-product .entry-summary .product_title {
        font-size: 22px;
    }

    .ff-blocksy-product .entry-summary .price {
        font-size: 22px;
    }

    .ff-services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .ff-blocksy-product section.related ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Tabs → accordion on mobile */
    .ff-blocksy-product .woocommerce-tabs ul.tabs {
        flex-wrap: wrap;
    }

    .ff-blocksy-product .woocommerce-tabs ul.tabs li a {
        padding: 10px 16px;
        font-size: 13px;
    }
}

@media (max-width: 575px) {
    .ff-blocksy-product .site-main {
        padding: 0 16px;
    }

    .ff-trust-badges {
        flex-wrap: wrap;
        gap: 12px;
    }

    .ff-trust-badge {
        flex: 0 0 calc(50% - 6px);
    }

    .ff-services-grid {
        grid-template-columns: 1fr;
    }

    .ff-blocksy-product section.related ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .ff-services-section {
        padding: 24px 16px;
        margin: 30px -16px;
        border-radius: 0;
    }
}

/* ============================================
   VIRTUAL TRY-ON (Auglio)
   ============================================
   Auglio v2 injects its "Try With Camera" button into
   '.elementor-widget-woocommerce-product-images .elementor-widget-container'
   (the old Elementor product-image widget). The Blocksy migration replaced the
   gallery with a custom .ff-gallery, so that selector stopped matching and the
   try-on button silently disappeared on every frame. ff-lens-wizard.js now adds
   those two Elementor marker classes to the .ff-gallery / .ff-gallery-main
   elements, so Auglio's native flow injects + reveals the button (only for
   frames that actually have a published try-on model) onto the frame image.
   Anchor it and nudge it just inside the top-right corner. */
.ff-blocksy-product .ff-gallery-main { position: relative; }

.ff-blocksy-product .ff-gallery-main .auglio-tryon-btn-product {
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
}


/* ============================================================
 * Single-product "Available colors" row (matches the homepage card swatches;
 * each dot links to that color's product, current color marked).
 * ============================================================ */
.ff-pdp-colors{margin:16px 0 20px}
.ff-pdp-colors-head{font-size:14px;font-weight:600;color:#5a5568;margin-bottom:9px;letter-spacing:.01em}
.ff-pdp-colors-head strong{color:#1a1726;font-weight:700}
.ff-pdp-color-dots{display:flex;flex-wrap:wrap;gap:11px}
.ff-pdp-dot{width:30px;height:30px;border-radius:50%;display:block;cursor:pointer;
  box-shadow:0 0 0 1.5px #fff,0 0 0 3px rgba(26,23,38,.14);transition:transform .15s,box-shadow .15s}
.ff-pdp-dot:hover{transform:scale(1.14)}
.ff-pdp-dot.ff-light{box-shadow:0 0 0 1px #ddd,0 0 0 1.5px #fff,0 0 0 3px rgba(26,23,38,.14)}
.ff-pdp-dot.ff-active{cursor:default;box-shadow:0 0 0 2px #fff,0 0 0 4.5px #e94560}

/* ============================================================
 * Product pages use the FF (Elementor-free) header/footer injected at
 * wp_body_open / wp_footer. Hide Blocksy's original header + footer.
 * ============================================================ */
#header.ct-header,header.ct-header,.ct-header,.ct-footer,#footer,.elementor-location-header,.elementor-location-footer{display:none !important}


/* ============================================================
 * Related / up-sell product cards on the single-product page — match the
 * FF card design (those grids sit outside .ff-home, so the homepage bridge
 * doesn't reach them). Mirrors the .ff-home ul.products bridge.
 * ============================================================ */
.single-product ul.products{display:grid !important;grid-template-columns:repeat(4,1fr);gap:22px;margin:0;padding:0;list-style:none;width:100%}
.single-product ul.products::before,.single-product ul.products::after{display:none !important}
.single-product ul.products li.product{width:auto !important;float:none !important;margin:0 !important;padding:0 0 2px !important;position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.single-product ul.products li.product:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg)}
.single-product ul.products li.product figure{order:1;margin:0;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:#fff;padding:16px;overflow:hidden}
.single-product ul.products li.product .ct-media-container{margin:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:0;background:transparent;aspect-ratio:auto}
.single-product ul.products li.product img.wp-post-image{width:100%;height:100%;object-fit:contain;aspect-ratio:auto !important;transition:transform .4s}
.single-product ul.products li.product:hover img.wp-post-image{transform:scale(1.04)}
.single-product ul.products li.product .ff-card-colors{order:2;padding:14px 16px 0;margin:0 0 auto;display:flex;flex-wrap:wrap;gap:6px}
.single-product ul.products li.product .woocommerce-loop-product__title{order:3;padding:8px 16px 0;margin:0;font-family:var(--display);font-size:16px;font-weight:600;line-height:1.18}
.single-product ul.products li.product .woocommerce-loop-product__title a{color:var(--ink)}
.single-product ul.products li.product > .price,
.single-product ul.products li.product .star-rating,
.single-product ul.products li.product .woocommerce-product-rating,
.single-product ul.products li.product .entry-meta,
.single-product ul.products li.product .meta-categories,
.single-product ul.products li.product .added_to_cart,
.single-product ul.products li.product .button.add_to_cart_button{display:none !important}
.single-product ul.products li.product .ff-card-foot{order:4;display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding:12px 16px 14px;gap:10px}
.single-product ul.products li.product .ff-card-price2{font-weight:800;color:var(--ink);font-size:15px;line-height:1}
.single-product ul.products li.product .ff-card-price2 del{opacity:.45;font-weight:500;margin-right:5px}
.single-product ul.products li.product .ff-card-price2 ins{text-decoration:none}
.single-product ul.products li.product .ff-card-view{font-size:13px;font-weight:800;color:var(--blue-deep);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.single-product ul.products li.product .ff-card-view:hover{color:var(--rose)}
.single-product ul.products li.product .woosw-btn{position:absolute;top:10px;right:10px;z-index:5;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.10);border:0;padding:0;margin:0;font-size:0;cursor:pointer;transition:.2s}
.single-product ul.products li.product .woosw-btn:hover{background:#fff;transform:scale(1.1)}
.single-product ul.products li.product .woosw-btn *{color:var(--rose)}
.single-product ul.products li.product .woosw-btn svg,.single-product ul.products li.product .woosw-btn i,.single-product ul.products li.product .woosw-btn span{font-size:17px;line-height:1;width:auto;height:auto}
.single-product .related>h2,.single-product .up-sells>h2{font-family:var(--display);font-weight:800;font-size:clamp(22px,3vw,30px);margin:0 0 18px}
@media(max-width:900px){.single-product ul.products{grid-template-columns:repeat(2,1fr);gap:14px}}