/**
 * Product / BigSample (pictures & products) layout — moved from artpicked_mobile/common/assets/css_pictures_and_products.php
 * Served from public_html/assets/css/ — cache bust: VER_STYLE_MAIN in artpicked_mobile/config.php
 */
    /* -------------- Header Components -------------- */
    /* Desktop header with SKU styling */
    .title-container {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: center;
    }

    .product_info-h1 {
        font-size: 25px;
        font-weight: 600;
        text-align: center;
        margin-top: 25px;
    }

    .product_info-header {
        margin: 25px 0 0;
        display: none;
        flex-direction: row
    }

    .product_info-desktop_sku {
        margin-right: 20px;
        color: #4d8cd4;
        font-weight: 600;
        font-size: 25px;
        margin-top: 25px;
    }

    .product_info-mobile_sku {
        text-align: center;
        color: #4d8cd4;
        font-weight: 600;
        margin-top: 9px;
        font-size: 20px;
    }

    /* -------------- Main Content Layout -------------- */
    .b_crumbs_container+.content.product_info-body,
    .product_info-body {
        padding: 10px 0 0
    }

    .product_info-container {
        padding-top: 10px;
        position: relative
    }

    .product_info-container>div {
        display: inline-block
    }

    .product_info-content {
        width: 767px
    }

    .product_info-rightside {
        width: 360px;
        float: right;
        min-height: 600px; /* Reserve space to prevent layout shift */
    }
    
    /* Prevent layout shift for reviews section */
    #reviews {
        min-height: 150px; /* Reserve space for reviews to prevent layout shift */
    }
    
    /* Prevent layout shift for dynamically loaded print types */
    #print_types_box {
        min-height: 50px; /* Reserve space for print type selection dropdown */
    }
    
    #print_types_main {
        min-height: 200px; /* Reserve space for print type panel to prevent layout shift */
    }

    /* -------------- Product Images -------------- */
    .product_info-image_preview {
        text-align: center;
        padding: 0;
        float: right;
        width: 100%
    }

    .product_info-image_preview>div {
        position: relative;
        display: inline-block;
        margin: 0 auto
    }

    .product_info-image_preview>div>.picture_main_zoom_btn {
        position: absolute;
        left: 0;
        top: 0;
        box-shadow: 0 5px 20px rgba(3, 3, 3, .1);
        z-index: 5
    }

    .product_info-image_preview>div>div>table {
        margin: 0 auto
    }

    .picture_main_zoom_btn {
        width: 36px;
        height: 36px;
        border-radius: 3px;
        background-size: 23px !important;
        border: 1px solid #ccc;
        background: url(/assets/img/icons/zoom-icon.svg) center no-repeat #ccc;
        margin: 10px
    }

    .product_info-image_gallery {
        text-align: center;
        height: auto;
        width: 100%;
        padding-top: 7px;
        direction: rtl;
        overflow: hidden
    }

    .product_info-image_gallery>div {
        margin: 0 auto;
        display: inline-block;
        line-height: 0;
        cursor: pointer;
        width: 20%
    }

    .product_info-image_gallery>div>div {
        margin: 0 auto;
        border: 1px solid #f1f1f1
    }

    .product_info-image_gallery>div table td {
        line-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        outline: 0 !important;
        border: none !important
    }

    .product_info-image_gallery>div img {
        line-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important
    }

    /* -------------- Product Panel Styles -------------- */
    body.he .product_info-panel {
        direction: rtl;
        text-align: right
    }

    .product_info-panel {
        border-radius: 3px;
        border: 1px solid #f0f0f0;
        background: #fbfbfb;
        padding: 14px 15px 15px;
        margin: 0 0 15px
    }

    .product_info-panel_title {
        font-size: 18px;
        font-weight: 600;
        padding-bottom: 15px;
        color: #4d8cd4;
        display: flex;
        align-items: center;
        gap: 8px;
        direction: rtl;
    }

    .product_info-panel_title .window-number {
        display: inline-block;
        width: 21px;
        height: 21px;
        line-height: 21px;
        text-align: center;
        background: var(--omc-primary-color, #4d8cd4);
        color: #FFFFFF;
        font-family: arial, sans-serif;
        font-size: 13px;
        font-weight: bold;
        border-radius: 50%;
        flex-shrink: 0;
        margin-left: 5px;
    }

    .product_info-panel_body {
        background: #fbfbfb
    }

    .product_info-panel_body+.product_info-panel_body {
        border-top: 1px solid #f0f0f0;
        padding-top: 15px;
        margin-top: 25px
    }

    .product_info-panel_table {
        margin-bottom: 15px
    }

    .product_info-panel_table:last-child {
        margin-bottom: 0
    }

    .product_info-panel .constructor-frames__ask.bigtip {
        text-decoration: none
    }

    /* -------------- Product Panel Size Selection -------------- */
    .product_info-panel_size {
        text-align: center
    }

    .product_info-panel_size .btn {
        margin: 0 2px 8px;
        display: none
    }

    .all_visible .product_info-panel_size .btn,
    .product_info-panel_size .btn.btn-visible {
        display: inline-block
    }

    .product_info-panel_size .btn,
    body.he .product_info-panel_size .btn {
        direction: ltr;
        width: 30%;
        padding: 0
    }

    /* -------------- Product Panel Characteristics -------------- */
    .product_info-panel_characteristic {
        height: 20px;
        overflow: hidden
    }

    .print_types_info.active .product_info-panel_characteristic {
        height: auto
    }

    .product_info-panel_characteristic table td {
        vertical-align: top;
        padding-bottom: 10px;
        line-height: 20px
    }

    .product_info-panel_characteristic table td:first-child {
        min-width: 100px
    }

    /* -------------- Product Panel Price -------------- */
    .product_info-panel_price {
        margin: 0 0 10px;
        text-align: center
    }

    .product_info-panel_price>div {
        width: 49%;
        display: inline-block
    }

    .product_info-panel_price>div#print_types_price {
        text-align: center;
        width: 100%
    }

    .product_info-panel_price>div.product_info-shipping+#print_types_price {
        text-align: left;
        width: 49%
    }

    .product_info-shipping {
        font-size: 14px;
        white-space: nowrap;
        text-align: right;
        position: relative;
        top: -3px
    }

    #print_types_price>div {
        display: inline-block;
        font-size: 22px;
        font-weight: 600;
        margin-right: 10px;
        padding-top: 5px
    }

    #print_types_price>div.old_price {
        color: #888;
        position: relative;
        font-size: 18px;
        padding-top: 0
    }

    #print_types_price>div.old_price:before {
        content: ' ';
        background: red;
        width: 120%;
        height: 2px;
        position: absolute;
        top: 8px;
        left: -4px;
        -moz-transform: rotate(14deg);
        -ms-transform: rotate(14deg);
        -webkit-transform: rotate(14deg);
        -o-transform: rotate(14deg);
        transform: rotate(14deg)
    }

    /* -------------- Product Panel Special & Buttons -------------- */
    .product_info-panel_special {
        text-align: center;
        color: orange;
        font-size: 18px;
        direction: ltr;
        margin: 25px 0
    }

    .product_info-panel_special .descript {
        direction: rtl
    }

    .product_info-panel_special svg {
        position: relative;
        bottom: -3px;
        right: 10px;
        width: 20px
    }

    .product_info-panel_special.acive {
        color: #257d27;
        cursor: pointer
    }

    .product_info-panel_button {
        overflow: hidden
    }

    .product_info-panel_button .btn {
        float: right;
        margin: 0;
        width: 49%
    }

    .product_info-panel_button .btn:last-child {
        float: left
    }

    .product_info-btn,
    .product_info-link {
        cursor: pointer;
        text-decoration: underline;
        padding-top: 10px;
        display: inline-block;
        color: #4d8cd4;
        font-weight: 700
    }

    .product_info-btn:hover,
    .product_info-link:hover {
        text-decoration: none
    }

    /* -------------- Action Buttons -------------- */
    .constructor-mainblock__addtofav.btn {
        font-size: 14px
    }

    .constructor-mainblock__addtofav.btn span:before {
        width: 13px;
        height: 15px;
        position: absolute;
        left: -5px;
        top: 3px
    }

    .constructor-mainblock__addtocart.btn-gold {
        color: #fff
    }

    .constructor-mainblock__addtocart.btn-gold:hover {
        color: #fff !important
    }

    .product_info-actions__favorite {
        background: url(/assets/img/icons/heart-regular.svg) center/72% no-repeat #4d8cd4;
        width: 35px;
        height: 35px;
        position: absolute;
        top: -6px;
        left: -6px;
        cursor: pointer;
        color: #fff;
        text-align: center;
        border-radius: 50%;
        line-height: 11px;
        font-size: 11px;
        z-index: 9
    }

    .product_info-actions__favorite.active {
        background: url(/assets/img/icons/heart-solid.svg) center/72% no-repeat #4d8cd4
    }

    /* -------------- Loader Styles -------------- */
    .product_info-container.loader:before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #fff;
        z-index: 10;
        opacity: 0;
        animation: .1s linear 2s forwards anim
    }

    #loader_inner {
        display: block;
        float: none;
        position: absolute;
        top: 100px;
        left: 0;
        right: 0;
        z-index: 22;
        opacity: 0;
        animation: .1s linear 2s forwards anim
    }

    @keyframes anim {
        0% {
            opacity: 0
        }

        20% {
            opacity: .1
        }

        40% {
            opacity: .2
        }

        60% {
            opacity: .3
        }

        80% {
            opacity: .4
        }

        100% {
            opacity: .5
        }
    }

    .cssload-thecube {
        width: 73px;
        height: 73px;
        margin: 49px auto 0;
        position: relative;
        transform: rotateZ(45deg);
        -o-transform: rotateZ(45deg);
        -ms-transform: rotateZ(45deg);
        -webkit-transform: rotateZ(45deg);
        -moz-transform: rotateZ(45deg)
    }

    .cssload-thecube .cssload-cube {
        transform: rotateZ(45deg);
        -o-transform: rotateZ(45deg);
        -ms-transform: rotateZ(45deg);
        -webkit-transform: rotateZ(45deg);
        -moz-transform: rotateZ(45deg);
        float: left;
        width: 50%;
        height: 50%;
        position: relative;
        transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1)
    }

    .cssload-thecube .cssload-cube:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #4d8cd4;
        animation: 3.48s linear infinite both cssload-fold-thecube;
        -o-animation: 3.48s linear infinite both cssload-fold-thecube;
        -ms-animation: cssload-fold-thecube 3.48s infinite linear both;
        -webkit-animation: 3.48s linear infinite both cssload-fold-thecube;
        -moz-animation: 3.48s linear infinite both cssload-fold-thecube;
        transform-origin: 100% 100%;
        -o-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        -webkit-transform-origin: 100% 100%;
        -moz-transform-origin: 100% 100%
    }

    .cssload-thecube .cssload-c2 {
        transform: scale(1.1) rotateZ(90deg);
        -o-transform: scale(1.1) rotateZ(90deg);
        -ms-transform: scale(1.1) rotateZ(90deg);
        -webkit-transform: scale(1.1) rotateZ(90deg);
        -moz-transform: scale(1.1) rotateZ(90deg)
    }

    .cssload-thecube .cssload-c3 {
        transform: scale(1.1) rotateZ(180deg);
        -o-transform: scale(1.1) rotateZ(180deg);
        -ms-transform: scale(1.1) rotateZ(180deg);
        -webkit-transform: scale(1.1) rotateZ(180deg);
        -moz-transform: scale(1.1) rotateZ(180deg)
    }

    .cssload-thecube .cssload-c4 {
        transform: scale(1.1) rotateZ(270deg);
        -o-transform: scale(1.1) rotateZ(270deg);
        -ms-transform: scale(1.1) rotateZ(270deg);
        -webkit-transform: scale(1.1) rotateZ(270deg);
        -moz-transform: scale(1.1) rotateZ(270deg)
    }

    .cssload-thecube .cssload-c2:before {
        animation-delay: .44s;
        -o-animation-delay: .44s;
        -ms-animation-delay: .44s;
        -webkit-animation-delay: .44s;
        -moz-animation-delay: .44s
    }

    .cssload-thecube .cssload-c3:before {
        animation-delay: .87s;
        -o-animation-delay: .87s;
        -ms-animation-delay: .87s;
        -webkit-animation-delay: .87s;
        -moz-animation-delay: .87s
    }

    .cssload-thecube .cssload-c4:before {
        animation-delay: 1.31s;
        -o-animation-delay: 1.31s;
        -ms-animation-delay: 1.31s;
        -webkit-animation-delay: 1.31s;
        -moz-animation-delay: 1.31s
    }

    /* Animation keyframes */
    @keyframes cssload-fold-thecube {

        0%,
        10% {
            transform: perspective(136px) rotateX(-180deg);
            opacity: 0
        }

        25%,
        75% {
            transform: perspective(136px) rotateX(0);
            opacity: 1
        }

        100%,
        90% {
            transform: perspective(136px) rotateY(180deg);
            opacity: 0
        }
    }

    @-o-keyframes cssload-fold-thecube {

        0%,
        10% {
            -o-transform: perspective(136px) rotateX(-180deg);
            opacity: 0
        }

        25%,
        75% {
            -o-transform: perspective(136px) rotateX(0);
            opacity: 1
        }

        100%,
        90% {
            -o-transform: perspective(136px) rotateY(180deg);
            opacity: 0
        }
    }

    @-ms-keyframes cssload-fold-thecube {

        0%,
        10% {
            -ms-transform: perspective(136px) rotateX(-180deg);
            opacity: 0
        }

        25%,
        75% {
            -ms-transform: perspective(136px) rotateX(0);
            opacity: 1
        }

        100%,
        90% {
            -ms-transform: perspective(136px) rotateY(180deg);
            opacity: 0
        }
    }

    @-webkit-keyframes cssload-fold-thecube {

        0%,
        10% {
            -webkit-transform: perspective(136px) rotateX(-180deg);
            opacity: 0
        }

        25%,
        75% {
            -webkit-transform: perspective(136px) rotateX(0);
            opacity: 1
        }

        100%,
        90% {
            -webkit-transform: perspective(136px) rotateY(180deg);
            opacity: 0
        }
    }

    @-moz-keyframes cssload-fold-thecube {

        0%,
        10% {
            -moz-transform: perspective(136px) rotateX(-180deg);
            opacity: 0
        }

        25%,
        75% {
            -moz-transform: perspective(136px) rotateX(0);
            opacity: 1
        }

        100%,
        90% {
            -moz-transform: perspective(136px) rotateY(180deg);
            opacity: 0
        }
    }

    /* -------------- Recommend Frames Styles -------------- */
    #recommend_frames .recommended_title {
        font-size: 16px;
        color: #222;
        padding: 15px 10px 5px;
        display: block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden
    }

    #recommend_frames .catalogproducts-column {
        width: 25%;
        margin: 0 0 10px
    }

    #recommend_frames.two_columh .catalogproducts-column {
        width: 32%
    }

    #recommend_frames .catalogproducts-column .categoryitem {
        width: 100%
    }

    /* -------------- Popover Styles -------------- */
    .webui-popover-content>p {
        line-height: 23px
    }

    .webui-popover {
        background-color: #fff !important
    }

    .webui-popover.top-left>.webui-arrow:after,
    .webui-popover.top-right>.webui-arrow:after,
    .webui-popover.top>.webui-arrow:after {
        border-top-color: #fff !important
    }

    /* Wall preview CTA (מוצר): ghost כתום עדין — תואם wall_vis_promo_critical_style + ghost.css */
    .product_info-panel .wall-vis-ghost-wrap .wall-vis-ghost-btn.wall-vis-ghost-btn--subtle {
        background: #fff !important;
        border: 2px solid #e67e22 !important;
        border-style: solid !important;
        color: #e67e22 !important;
        box-shadow: none !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        padding: 10px 14px !important;
        border-radius: 10px !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    .product_info-panel .wall-vis-ghost-wrap .wall-vis-ghost-btn.wall-vis-ghost-btn--subtle:hover {
        background: rgba(230, 126, 34, 0.06) !important;
        border-color: #cf7118 !important;
        border-width: 2px !important;
        color: #cf7118 !important;
    }

    .product_info-panel .wall-vis-ghost-wrap .wall-vis-ghost-btn--subtle .wall-vis-ghost-btn__inner {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        direction: rtl !important;
    }

    .product_info-panel .wall-vis-ghost-wrap .wall-vis-ghost-btn__badge {
        display: inline-block !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        padding: 4px 8px !important;
        border-radius: 4px !important;
        background: #e67e22 !important;
        color: #fff !important;
        letter-spacing: 0.02em !important;
        flex-shrink: 0 !important;
        vertical-align: middle !important;
    }

    .product_info-panel .wall-vis-ghost-wrap .wall-vis-ghost-btn__text {
        display: inline-block !important;
        color: inherit !important;
    }

    .product_info-panel .wall-vis-ghost-wrap.wall-vis-sidebar-cta-compact {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .product_info-panel .wall-vis-ghost-wrap.wall-vis-sidebar-cta-compact .wall-vis-ghost-btn.wall-vis-ghost-btn--subtle {
        display: inline-flex !important;
        width: max-content !important;
        max-width: 100% !important;
        border: 1px solid #e67e22 !important;
        border-width: 1px !important;
    }

    .product_info-panel .wall-vis-ghost-wrap.wall-vis-sidebar-cta-compact .wall-vis-ghost-btn.wall-vis-ghost-btn--subtle:hover {
        border-width: 1px !important;
    }

    /* -------------- Responsive Styles -------------- */
    /* Desktop (1025px+) */
    @media (min-width: 1025px) {

        .desktop-mobile-container {
            display: none;
        }

        .product_info-header {
            display: none;
        }
    }

    /* Larger screens */
    @media (max-width: 1170px) {

        .product_info-content {
            width: 665px
        }

        .product_info-rightside {
            width: 300px;
            min-height: 500px; /* Reserve space on medium screens */
        }
    }

    /* Tablet (768px-1024px) */
    @media (min-width: 768px) and (max-width: 1024px) {

        .title-container {
            flex-direction: column;
            align-items: center;
        }

        .product_info-desktop_sku {
            display: none;
        }

        .desktop-mobile-container {
            display: block;
        }

        .product_info-header {
            display: flex;
            flex-direction: column;
            margin: 15px 0 0;
        }

        .product_info-container>div {
            display: block;
        }

        .product_info-content {
            width: 100%;
        }

        .product_info-rightside {
            width: 100%;
            float: none;
            padding-top: 40px;
            min-height: 400px; /* Reserve space on tablet to prevent layout shift */
        }
        
        #reviews {
            min-height: 120px; /* Reserve space for reviews on tablet */
        }

        .product_info-panel_size .btn,
        body.he .product_info-panel_size .btn {
            font-size: 12px;
        }
    }

    /* Mobile (0-767px) */
    @media (max-width: 767px) {

        .product_info-desktop_sku {
            display: none;
        }

        .desktop-mobile-container {
            display: block;
        }


        .product_info-header {
            display: flex;
            flex-direction: column;
            margin: 15px 0 0;
        }

        .product_info-image_preview {
            width: 100%;
        }

        .product_info-image_gallery {
            height: auto;
            width: 100%;
            max-width: 100%;
            display: table;
            overflow-x: scroll;
            overflow-y: hidden;
        }

        .product_info-image_gallery>div {
            padding: 2px;
            width: 20%;
            line-height: 0;
            cursor: pointer;
            display: table-cell;
        }

        .product_info-container>div {
            display: block;
        }

        .product_info-content {
            width: 100%;
        }

        .product_info-rightside {
            width: 100%;
            float: none;
            padding-top: 40px;
            min-height: 400px; /* Reserve space on mobile to prevent layout shift */
        }
        
        #reviews {
            min-height: 120px; /* Reserve space for reviews on mobile */
        }

        .b_crumbs_container+.content.product_info-body,
        .product_info-body {
            padding: 5px 0 0;
        }

        .product_info-actions__favorite,
        .product_info-actions__favorite.active {
            width: 30px;
            height: 30px;
            line-height: 10px;
            font-size: 10px;
            left: -4px;
            top: -4px;
            background-size: 74%;
        }

        #recommend_frames .catalogproducts-column,
        #recommend_frames.two_columh .catalogproducts-column {
            width: 50%;
        }

        #recommend_frames .recommended_title {
            white-space: normal;
            overflow: visible;
            line-height: 19px;
            padding: 10px 10px 5px;
        }
    }
    /* ==========================================
       MODERN TOOLTIP SYSTEM (Unified across entire site)
       ========================================== */
    /* CSS removed - now loaded from common/assets/tooltip/tooltip.css */

    /* Hide old legacy webui popovers */
    .webui-popover {
        display: none !important;
    }

    .exhibitor-ad-pdp-wrap {
        display: block;
        width: 100%;
        max-width: 360px;
        margin: 16px auto 24px;
        text-align: center;
        box-sizing: border-box;
        clear: both;
    }

    .exhibitor-ad-pdp-wrap .exhibitor-ad-banner-row {
        margin: 0 auto !important;
        max-width: 280px;
        align-items: center;
    }

    .exhibitor-ad-pdp-wrap .exhibitor-ad-banner-title {
        text-align: center;
    }

    @media (max-width: 767px) {
        .exhibitor-ad-pdp-wrap {
            max-width: 100%;
            padding: 0 16px;
        }

        .exhibitor-ad-pdp-wrap .exhibitor-ad-banner-row {
            max-width: 300px;
        }
    }