@charset "UTF-8";
/* CSS Document */

/* Debug */
/* .b2b_shelf_title, .b2b_shelf_pricetag, .b2b_shelf_talker * { display:none !important; } */

:root {
    --sampson-ui-text:#616163;
    --sampson-ui-gray:#686969;
    --sampson-ui-gray2:#cccccc;
    --sampson-ui-lightgray:#707070;
    --sampson-ui-lightgray2:#f2f2f2;
    --sampson-ui-dimgray:#808080;
    --sampson-ui-darkgray:#2f2f30;
    --sampson-ui-darkgray2:#262626;
    --sampson-ui-orange:#ee3124;
    --sampson-ui-orange-sub:#ba261c;
    --sampson-ui-lightgreen:#00bb46;
    --sampson-ui-green:green;
    --sampson-ui-yellow:#ffbe0d;
    --sampson-ui-gold:#c68d1e;

    --b2b_header_height:74px;
    --b2b_shelfs_bar_height:48px;

    /* --b2b_shelf_img_ratio:.2; */
    /* --b2b_shelf_img_ratio:.170944741532977; */
    /* --b2b_shelf_img_ratio:0.139393939393939; */
    /* --b2b_shelf_img_ratio:0.290382473078351; */ /* Real World dimension with 72ppi */
    --b2b_shelf_img_ratio:1;

}

* { padding:0; margin:0; border:0; font-family:"Montserrat"; }

.b2b_shelfs_bar { height:var(--b2b_shelfs_bar_height); position:sticky; top:0; background-color:var(--sampson-ui-darkgray2); z-index:2000; z-index:1000; z-index:999; }
.b2b_shelfs_bar .container, .b2b_shelfs_bar .container-fluid { display:flex; align-items:center; height:100%; }
.b2b_shelfs_bar .filters { margin-bottom:0; }
.b2b_shelfs_bar .filters img { margin-right:4px; }
.b2b_shelfs_bar .filters .filters_toggle { display:none; }
.b2b_shelfs_bar .btn > .fa { margin-right:.25em; }
.b2b_shelfs_bar .submitButton { font-size:14px; background-color:var(--sampson-ui-lightgreen); text-transform:none; margin-top:0; padding:.4em 1em; margin-bottom:0; }
.b2b_shelfs_bar .submitButton:hover { color:white; }
.b2b_shelfs_bar .resetViewButton, .b2b_shelfs_bar .switchViewButton, .b2b_shelfs_bar .enterdata { background-color: var(--sampson-ui-yellow); color:var(--sampson-ui-darkgray); margin-right:.5em; }

.b2b_shelfs_bar_right { display:flex; }


.rightCol .b2b_shelfs_bar { background:transparent; }
.rightCol .b2b_shelfs_bar > .container { width:auto !important; padding:0; }
.rightCol .switchViewButton { margin-right:0; }


.b2b_shelfs { /* display:flex; */ width:fit-content; width:100%; font-size:16px; line-height:1.3em; /* margin-top:10em; */ padding-top:1.5em; padding-bottom:4em; /* overflow:auto; */ overflow:hidden; background:url('../images/shelf/bg.jpg'); background-position:center center; position:relative; height:auto; }
.b2b_shelfs, .b2b_shelfs * { -webkit-user-select:none; user-select:none; }
.b2b_shelfs.panzoom_enabled { padding-top:0; padding-bottom:0; height:calc(100vh - var(--b2b_header_height) - var(--b2b_shelfs_bar_height)); }
.b2b_shelfs + #base_footer { margin-top:0; }

.b2b_shelfs.tagwidth .b2b_shelf_row_contents { justify-content:flex-start; }
.b2b_shelfs.tagwidth .b2b_shelf_product_wrap { display:flex; flex-direction:column; align-items:center; flex:0; }
.b2b_shelfs.tagwidth .b2b_shelf_pricetag_wrapper { order:2; position:relative; left:unset; transform:unset; top:unset; margin-bottom:-21px; transform:scale(var(--b2b_shelf_font_ratio)); transform-origin:top; }
.b2b_shelfs.tagwidth .b2b_shelf_pricetag { transform:unset; }
.b2b_shelfs.tagwidth .b2b_shelf_product { order:1; }

.b2b_shelfs_control { position:absolute; right:1em; bottom:1em; display:flex; flex-direction:row; z-index:1000; }

.b2b_shelfs_control_wrapper { display:flex; flex-direction:row; align-items:center; }
.b2b_shelfs_control_wrapper + .b2b_shelfs_control_wrapper { margin-left:.5em; }
.b2b_shelfs_control_container { display:flex; flex-direction:column; }
.b2b_shelfs_control_container.middle .b2b_shelfs_control_button {  }

.b2b_shelfs_control_button { background-color:white; width:28px; height:28px; text-align:center; font-size:1em; margin:0; padding:0; display:flex; align-items:center; justify-content:center; border-radius:.25em; border:1px solid lightgray; cursor:pointer; }
.b2b_shelfs_control_button:hover { background-color:var(--sampson-ui-yellow); }


.b2b_shelfs_wrapper { width:fit-content; height:auto; height:fit-content; z-index:1; display:flex; opacity:0; transition:opacity 300ms; }
.panzoom_enabled > .b2b_shelfs_wrapper { opacity:1; }
/* .panzoom_enabled .b2b_shelfs_wrapper { width:fit-content; } */

.b2b_shelf { display:flex; flex-direction:column; /* margin-right:3.5em; */ align-items:flex-start; /* filter:drop-shadow(10px 40px 30px rgba(0,0,0,.5)); */ /* box-shadow:10px 40px 30px rgba(0,0,0,.5); */ width:min-content; cursor:grab; margin-right:2em; }
.b2b_shelf_title { padding:0 .5em; background-color:var(--sampson-ui-orange); margin-bottom:12px; margin-bottom:.4285em; color:white; font-weight:bold; font-size:28px; font-size:96px; line-height:1.3; }

.b2b_shelf_container {
    /* --width:5610px; */ /* 150ppi */ --width:2693px; /* 72ppi */ width:calc(var(--width) * var(--b2b_shelf_img_ratio)); aspect-ratio:746/1413; /* background-color:red; */ display:flex; align-items:end; flex-wrap:wrap; flex-direction:column; align-items:flex-start; position:relative;
    box-shadow:10px 40px 30px rgba(0,0,0,.5);
    /* filter:drop-shadow(10px 40px 30px rgba(0,0,0,.5)); -webkit-filter:drop-shadow(10px 40px 30px rgba(0,0,0,.5)); */
    /* transform:translateZ(0); -webkit-transform:translateZ(0); -ms-transform:translateZ(0); */
}
.b2b_shelf_container::first-line { padding:1px; text-transform:uppercase; }
.b2b_shelf_container::after { position:relative; /* height:100px; */ content:' '; flex:100; background-color:gray; }

.b2b_shelf_bg { position:absolute; top:0; left:0; width:100%; height:100%; background-color:black; }
.b2b_shelf_bg img { width:100%; height:100%; }

.b2b_shelf_lightbox {
    position:absolute; background:red; width:88%;
    /* --offset_left:148px; left:calc(var(--offset_left) * var(--b2b_shelf_img_ratio)); */
    left:50%; transform:translateX(-50%);
    --offset_top:80px; top:calc(var(--offset_top) * var(--b2b_shelf_img_ratio));
}
.b2b_shelf_lightbox img { width:100%; aspect-ratio:699/287; display:block; }

.b2b_shelf_storage {
    position:absolute; top:0; left:0; bottom:0; right:0; display:flex; align-items:end; flex-wrap:wrap; flex-direction:column; align-items:flex-start;
    
    --padding_top:1134px; padding-top:calc(var(--padding_top) * var(--b2b_shelf_img_ratio));
}

.b2b_shelf_row { --floorplate_height:76px; position:relative; width:100%; margin-bottom:calc(var(--floorplate_height) * var(--b2b_shelf_img_ratio)); }
.b2b_shelf_row::before { content:''; width:100%; height:calc(var(--floorplate_height) * var(--b2b_shelf_img_ratio)); top:100%; position:absolute; background:url('../images/shelf/bg-floorplate.png') left top no-repeat; background-size:100%; }
.b2b_shelf_row::after { content:''; width:93.687%; left:50%; transform:translateX(-50%); aspect-ratio:733/75; bottom:0; position:absolute; z-index:100; background:url('../images/shelf/bg-backplate@2x.jpg') left top no-repeat; background-size:100%; }
.b2b_shelf_row_contents {
    display:flex; align-items:flex-end; position:relative; width:calc(100% - (var(--padding_left) * var(--b2b_shelf_img_ratio))); z-index:200;
    --padding_left:85px; padding-left:calc(var(--padding_left) * var(--b2b_shelf_img_ratio));
}

.b2b_shelf_product_wrap {
    width:min-content; height:min-content; /* background-color:gray; */ /* margin:1em 0 0; */ /* flex:1 1 min-content; */ flex:0 1 min-content; position:relative;
    --padding_top:68px; margin-top:calc(var(--padding_top) * var(--b2b_shelf_img_ratio)); cursor:pointer;
}
.b2b_shelf_product_wrap:last-child { /* flex:1 1 min-content; */ flex:0 1 min-content; }
.b2b_shelf_product_wrap:hover { z-index:1000; }
.b2b_shelf_product_wrap.active { z-index:1000; }

.b2b_shelf_blank_placeholder { width:28px; /* 10mm in metrics @ 72ppi */ height:28px; flex-shrink:0; }
.b2b_shelf_blank_placeholder.w100mm { width:283px; /* 100mm in metrics @ 72ppi */ }

.b2b_shelf_pricetag_wrapper { left:50%; position:absolute; transform:translateX(-50%); top:100%; }
.b2b_shelf_pricetag {
    background-color:white; display:flex; font-weight:bold; padding-left:.125em; padding-right:.125em; border:1px solid var(--sampson-ui-lightgray); font-size:62px; line-height:1.25;
    transform-origin:center top;
}
.b2b_shelf_pricetag sup { font-size:.75em; line-height:1.5; line-height:1.4; top:unset; }

.b2b_shelf_product, .b2b_shelf_talker { margin:0 auto; position:relative; }
.b2b_shelf_product > img, .b2b_shelf_talker > img {
    /* outline: 1px solid yellow; */ display:block; margin:0 auto; width:calc(var(--width) * var(--b2b_shelf_img_ratio)); max-width:unset;
    transition:outline 100ms;
}
.b2b_shelf_product > img:hover, .b2b_shelf_talker > img:hover { /* outline: 5px solid red; */ }

.b2b_shelf_talker_overlay { position:absolute; top:0; width:100%; bottom:0; }
.b2b_shelf_talker_contents { position:relative; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; }
.b2b_shelf_talker_contents .talker_title { position:absolute; top:90px; font-size:51px; font-family:"Roboto"; font-weight:800; color:white; width:100%; text-align:center; line-height:1em; }
.b2b_shelf_talker_contents .talker_contents { position:absolute; top:200px; font-size:162px; font-weight:bold; color:white; width:100%; text-align:center; }

.b2b_shelf_talker_contents.top .talker_title { top:90px; }
.b2b_shelf_talker_contents.top .talker_contents { top:200px; }

.b2b_shelf_talker_contents.new .talker_title { top:18px; color:var(--sampson-ui-yellow) }
.b2b_shelf_talker_contents.new .talker_contents { top:178px; color:white; display:flex; flex-direction:column; align-items:flex-start; width:fit-content; }
.b2b_shelf_talker_contents.new .talker_year { font-size:45px; line-height:1em; font-family:"Roboto Condensed"; margin-bottom:-.07em; }
.b2b_shelf_talker_contents.new .talker_monthday { font-size:68px; line-height:1em; font-family:"Roboto Condensed"; letter-spacing:-.025em; }


.b2b_shelf_flyout {
    display:none; /* width: max-content; */ width:350px; position:absolute; top:0; left:0; background:#333333; color:var(--sampson-ui-gray); font-weight:bold; padding:.75em 1em; border-radius:4px; font-size:90%; z-index:20000; /* border:1px solid var(--sampson-ui-gray); */
    filter: drop-shadow(0px 1px 0px var(--sampson-ui-gray)) drop-shadow(0px -1px 0px var(--sampson-ui-gray)) drop-shadow(1px 0 0px var(--sampson-ui-gray)) drop-shadow(-1px 0 0px var(--sampson-ui-gray));
    -webkit-filter: drop-shadow(0px 1px 0px var(--sampson-ui-gray)) drop-shadow(0px -1px 0px var(--sampson-ui-gray)) drop-shadow(1px 0 0px var(--sampson-ui-gray)) drop-shadow(-1px 0 0px var(--sampson-ui-gray));
    transform:translateZ(0); -webkit-transform:translateZ(0); -ms-transform:translateZ(0);
    /* box-shadow: 0px 2px 0px var(--sampson-ui-gray), 0px -2px 0px var(--sampson-ui-gray), 2px 0 0px var(--sampson-ui-gray), -2px 0 0px var(--sampson-ui-gray); */
}
.b2b_shelf_flyout.active { display:block; }
.b2b_shelf_flyout_arrow {
    position:absolute; background:#333333; width:16px; height:16px; margin-left:4px;
    transform:rotate(45deg);
}

.b2b_shelf_flyout_row { display:flex; justify-content:space-between; align-items:flex-end; }
.b2b_shelf_flyout_row + .b2b_shelf_flyout_row { margin-top:.5em; }
.b2b_shelf_flyout_title { font-size:14px; line-height:1.3; color:white; align-self:flex-start; }
.b2b_shelf_flyout_price { align-self:flex-end; }
.b2b_shelf_flyout_label { background-color:var(--sampson-ui-darkgray2); padding:0 .25em; }

/* .b2b_shelf_flyout .getfree_wrapper { font-size:8px; }
.b2b_shelf_flyout .getfree_tag .txt_buy { top:45%; } */

.b2b_shelf_flyout .sampProduct { margin-bottom:0; }
.b2b_shelf_flyout .quantitybox { border-radius:0; }
/* .b2b_shelf_flyout .sampProduct .purchasequan { display:flex; flex-wrap:wrap; justify-content:right; }
.b2b_shelf_flyout .sampProduct .purchasevalue { width:125px; }
.b2b_shelf_flyout .samphkd > span { font-size:36px; } */

/* .b2b_shelf_flyout .samprightsection { width:100%; } */
/* .b2b_shelf_flyout .sampbox { width:100%; }
.b2b_shelf_flyout .sampbox2 { width:100%; display:flex; }
.b2b_shelf_flyout .sampbox3 { width:100%; }
.b2b_shelf_flyout .pull-right { float:left !important; } */
.b2b_shelf_flyout .purchasequan { bottom:unset; position:relative; }

.b2b_shelf_flyout_progress {
    position:absolute; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,0.8); backdrop-filter:blur(10px); z-index:1000; display:flex; justify-content:center; align-items:center; opacity:0; pointer-events:none;
    transition:opacity 300ms;
}
.b2b_shelf_flyout_progress.active { opacity:1; pointer-events:unset; }
.b2b_shelf_flyout_progress .spinner { font-size:3em; }


@media screen and (min-width: 1200px) {
    :root {
        /* --b2b_shelf_img_ratio:.3; */
    }
    .b2b_shelf_flyout { width:820px; }
}
@media screen and (max-width: 1199px) {
    :root {
        --b2b_header_height:107px;
    }

    .b2b_shelfs.panzoom_enabled { height:calc(100dvh - var(--b2b_header_height) - var(--b2b_shelfs_bar_height)); }

    .b2b_shelf_flyout { width:660px; }
}
@media screen and (max-width: 991px) {
    :root {
        --b2b_header_height:112px;
    }
    /* .b2b_shelf_flyout .sampProduct .purchasequan { width:100%; } */

    .b2b_shelf_flyout { width:400px; }

    .rightCol .b2b_shelfs_bar { top:unset; height:auto; margin-bottom:1.5em; }
    .rightCol .b2b_shelfs_bar > .container { display:flex; flex-direction:column; flex-wrap:wrap; height:unset; }
    .rightCol .b2b_shelfs_bar > .container > *  { width:100%; }
    .rightCol .b2b_shelfs_bar .b2b_shelfs_bar_left { margin-bottom:.5em; }
    .rightCol .switchViewButton { width:100%; }

}
@media screen and (max-width: 959px) {
    :root {
        /* --b2b_shelf_img_ratio:var(--b2b_shelf_container_ratio); */
    }
    /* .b2b_shelf { padding-left:1em; padding-right:1em; width:100%; margin-right:0; }
    .panzoom_enabled .b2b_shelf { padding-left:0; padding-right:0; margin-right:2em; } */

    /* .b2b_shelf_container { width:100vw; width:100%; background-color:blue; } */
    /* .b2b_shelf_product > img { width:calc(var(--width) * var(--b2b_shelf_img_ratio)); } */

    /* .b2b_shelf_title { transform:scale(var(--b2b_shelf_font_ratio)); transform-origin:left bottom; } */
    /* .b2b_shelf_pricetag { transform:scale(var(--b2b_shelf_font_ratio)); } */
}
@media screen and (min-width: 768px) {
    .b2b_shelfs_bar .filters .collapse { display:block; }
}
@media screen and (max-width: 767px) {
    :root {
        --b2b_header_height:51px;
    }

    /* .b2b_shelfs { height:auto; padding-top:1.5em; padding-bottom:4em; } */

    .b2b_shelfs_bar { top:51px; }
    .b2b_shelfs_bar .filters { display:block; }
    /* .b2b_shelfs { margin-top:51px; } */

    .b2b_shelfs_bar .filters .filters_toggle { display:inline-block; }
    .b2b_shelfs_bar .filters .filters_container { position:absolute; background-color:#333; top:100%; left:0; width:100%; padding:1em; }

    .rightCol .b2b_shelfs_bar .b2b_shelfs_bar_left { display:none; }
}
@media screen and (max-width: 640px) {
    /* .b2b_shelf_flyout .sampProduct .purchasequan>span { display:block; }
    .b2b_shelf_flyout .sampProduct .quanorder { width:34%; } */
    :not(.rightCol) .b2b_shelfs_bar_right .btn_text { display:none; }

    .b2b_shelfs_control_button { width:36px; height:36px; }
}
@media screen and (max-width: 430px) {
    .b2b_shelf_flyout { width:calc(100% - 10px); }
    /* .b2b_shelf_flyout .getfree_wrapper { width:120px; font-size:6px; } */
}
/* @media screen and (max-width: 669px) {
    :root {
        --b2b_shelf_img_ratio:.1;
    }   
} */