@import url('https://fonts.googleapis.com/css?family=Hind:400,500,700');

/* ============================================================
   Gallery Font Theme Token Cascade
   This file loads AFTER ks.min.css in every gallery template,
   so same-specificity rules here win by cascade order.
   ============================================================ */

/* Apply the artist's chosen body font to the body element.
   All elements without their own font-family rule inherit from here.
   Fallback is Source Sans Pro — the de-facto default on gallery pages
   (matches the hardcoded value most .tx* classes use in ks.min.css),
   so artists without a saved preference see no visual change. */
body {
    padding: 0;
    margin: 0;
    color: #333333;
    font-family: var(--gal-font-body, 'Source Sans Pro', sans-serif);
    width:100%;
    display: table;
}

/* Heading elements use the heading font when one is chosen */
header,
h1, h2, h3, h4, h5, h6 {
    font-family: var(--gal-font-heading, inherit);
}

/* Most gallery copy is also wrapped in <font>/<td>; repeating the rule here
   ensures these elements get the body token even when a more specific rule
   in ks.min.css already set something else (same specificity + later load). */
p, a, td, font {
    font-family: var(--gal-font-body, 'Source Sans Pro', sans-serif);
}

/* Typography size-utility classes from ks.min.css all hard-code "Source Sans Pro".
   Same specificity here but loaded later, so these override to the body token. */
.tx2, .tx2l, .tx2b,
.tx3, .tx3menu, .tx3b, .tx3b2,
.tx4, .tx45, .tx4s, .tx4l,
.tx5, .tx5l, .tx55l, .tx5s, .tx55,
.tx6l {
    font-family: var(--gal-font-body, 'Source Sans Pro', sans-serif);
}
    #footer{
        height: 100% !important;
        text-shadow: 0px 0px 0px #ffffff;
        text-align: left !important;
    }
    #footer a{
         text-shadow: 0px 0px 0px #ffffff;
    }
    #footer li{
        text-align: left !important;
    }
    #footer li a{
        font-size: 13px !important;
        line-height: 1.7;
    }
    newsletter-signup{
        text-align: left !important;
    }

.columnsContainer { position: relative; margin: .5em; }

.columnsContainer {
max-width:1200px;
margin: 0 auto;

padding:0px 20px 20px 20px;

}

.applybutton { 
cursor:pointer;
background-color:var(--gal-accent, #de256d);
color:#FFFFFF;
border-radius:10px;
border-width:0px;
padding: 5px 10px 5px 10px;
margin:4px;
}


/* MEDIA QUERIES */

#flipstyle,#fliproom {
cursor:pointer
}

#panelroom,#panelstyle,#paneltheme,#panelsize,#panelcolors {
     display: none;
}
 
 
                    .category-title{
                        font-family: var(--gal-font-heading, 'Hind', sans-serif);
                        font-size: calc(16px * var(--gal-font-scale, 1));
                        font-weight: var(--gal-heading-weight, 600);
                        text-transform: var(--gal-title-transform, uppercase);
                        font-variant: var(--gal-title-variant, normal);
                        letter-spacing: var(--gal-title-tracking, 0);
                        position: relative;
                    }
                    font.category-title:after {
    position: absolute;
    bottom: -7px;
    left: 0;
    content: "";
    width: 32px;
    height: 4px;
    background: #E5E5E5;
}

                    .style-list td a:first-child{
                        border-top: 0px !important;;
                    }
                    .room-list td a:first-child{
                        border-top: 0px !important;;
                    }
                    .img-box{
                        position: relative;
                    }
                    /*.img-box img{
                        position: absolute;
                        top: 0;
                        left: 0;
                          -webkit-transition: opacity 0.5s ease-in-out;
                          -moz-transition: opacity 0.5s ease-in-out;
                          -o-transition: opacity 0.5s ease-in-out;
                          transition: opacity 0.5s ease-in-out;
                    }*/
                    .img-box .img-hover{
                        position: absolute;
                        top: 0;
                        left: 0;
                          -webkit-transition: opacity 0.5s ease-in-out;
                          -moz-transition: opacity 0.5s ease-in-out;
                          -o-transition: opacity 0.5s ease-in-out;
                          transition: opacity 0.5s ease-in-out;
                    }
                    .img-default{
                      display: block;
                        
                    }
                  .img-hover{
                     opacity: 0; 
                    z-index: -1;
                 
                    }
                    .img-box:hover .img-default{
                        opacity: 0;
                             -webkit-transition: opacity 0.5s ease-in-out;
                      -moz-transition: opacity 0.5s ease-in-out;
                      -o-transition: opacity 0.5s ease-in-out;
                      transition: opacity 0.5s ease-in-out;   
                     -webkit-transition: opacity 0.5s ease-in-out;
                      -moz-transition: opacity 0.5s ease-in-out;
                      -o-transition: opacity 0.5s ease-in-out;
                      transition: opacity 0.5s ease-in-out;
                    }
                    .img-box:hover .img-hover{
                        
                        z-index: 999;
                        opacity: 1;
                        -webkit-transition: opacity 0.5s ease-in-out;
                          -moz-transition: opacity 0.5s ease-in-out;
                          -o-transition: opacity 0.5s ease-in-out;
                          transition: opacity 0.5s ease-in-out;
                    }
                 
            
                    .gal-width.gallery-item{
                        padding: 0px 12px;
                        padding-bottom:20px;
                    }
                    .gal-width{
                        width: 34%;
                       
                    }
                  
                    .desc p{
                        margin:0;
                        padding:0;
                    }
                    .desc{
                        margin: 16px 0px 15px 5px;
                        padding: 0px 5px 5px 5px;
                                           }
                    /* Artwork captions and artwork title in masonry/grid layouts:
                       family/case/tracking follow the theme, size scales.
                       .artist-name is the artwork title (uppercase small text under each image).
                       .img-title is the artist attribution line below that. */
                    .artist-name,
                    .img-title{
                        font-family: var(--gal-font-heading, 'Hind', sans-serif);
                        font-size: calc(12.9px * var(--gal-font-scale, 1));
                        text-transform: var(--gal-title-transform, none);
                        font-variant: var(--gal-title-variant, normal);
                        letter-spacing: var(--gal-title-tracking, 0);
                        color: #595959;
                        line-height: 17px;
                        color: #b0b0b0;
                    }
                    .img-price{
                        font-size: calc(12.9px * var(--gal-font-scale, 1));
                        color: #000;
                        line-height: 15px;
                    }
                    .select-box{
                padding: 6px 94px;
                border: 1px solid #aaa;
            }

                   .top-box{
                padding: 4px 10px 4px 10px;
               margin:2px 5px 2px 5px;
                border: 1px solid #aaa;
                font-size:12px;
                display:inline-block;

            }

                option {
                font-weight: normal;
                display: block;
                white-space: pre;
                min-height: 1.2em;
                padding: 0px 2px 1px;
            }
                .active{
                    display:block;
                }
                   .room-list span:first-child {
                border-top: 0px !important;
            }
                    @media(max-width:850px){
                        .col-md-3.sidebar{
                            display:none;
                        }
                    }
                    @media(max-width:550px){
                         .gal-width{
                        width: 50%;
                    }
                    }

                    @media(max-width:850px){
                         .gal-width{
                        width: 49%;
                        
                    }
                    }
                    @media(min-width:1510px){
                         .gal-width{
                        width: 24%;
                
                    }
                        .container{
                            width: 1480px;
                        }
                    }

                  @media(min-width:1610px){
                         .gal-width{
                        width: 19%;
                        
                    }
                        .container{
                            width: 1610px;
                        }
                    }
                    @media(min-width:1800px){
                         .gal-width{
                        width: 19.8%;
                    }
                        .container{
                            width: 1770px;
                        }
                    }
               
.masonry { /* Masonry container */
    column-count: 6;
    column-gap: 1em;
}

@media only screen and (min-width: 100px) {
    .masonrybig {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
        column-gap: 1em;
    }

}

@media only screen and (min-width: 900px) {
    .masonrybig {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
        column-gap: 1em;
    }
}

@media only screen and (min-width: 1400px) {
    .masonrybig {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
        column-gap: 1em;
    }
}

.itemmasonry { /* Masonry bricks or child elements */
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

.itemmasonrybig { /* Masonry bricks or child elements */
    display: inline-block;
    margin: 10px;
    width: 95%;
}

@media only screen and (min-width: 100px) {
    .masonry {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }

}

@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 1400px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

/* Wall room preview thumbnails */
.wall-room-thumb {
    display: inline-block;
    border-radius: 4px;
    border: 2px solid transparent;
    margin: 2px 1px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wall-room-thumb img {
    display: block;
    border-radius: 2px;
}

.wall-room-thumb:hover {
    border-color: #3abf6e;
    box-shadow: 0 0 0 1px #3abf6e;
    transform: scale(1.12);
}

/* Row wrapper: align thumbnails and the "view on my wall" box on the same bottom edge */
.wall-room-row a,
.wall-room-row img {
    vertical-align: bottom;
}

/* "View on my wall" box shown after the wall room thumbnails — opens the AI room tool */
.wall-room-airoom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: bottom;
    /* 52px content + 1px borders = 54px, same outer height as the 50px thumbs with their 2px border */
    height: 52px;
    max-width: 62px;
    margin: 2px 1px;
    padding: 0 7px;
    border: 1px solid #c4c4c4;
    border-radius: 0;
    background: #f7f7f7;
    font-size: 9px;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #666;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.wall-room-airoom:hover,
.wall-room-airoom:focus {
    border-color: #3abf6e;
    color: #3abf6e;
    text-decoration: none;
}

/* Smaller variant used on the v2 template (45px thumbnails, no border/margin on the anchors) */
.wall-room-airoom--sm {
    height: 43px;
    margin: 0 1px;
}

/* Variant shown inside the product panels, below each size listing */
.wall-room-row--panel {
    margin-top: 24px;
    margin-bottom: 10px;
}

/* Like button & like count */
.btn-like-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid #d0d0d0;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none;
    background: #f7f7f7;
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
    vertical-align: middle;
}

.btn-like-action i {
    font-size: 14px;
    transition: transform 0.2s ease, color 0.22s ease;
}

.btn-like-action:hover,
.btn-like-action:focus {
    background: #fff0f5;
    border-color: #de256f;
    color: #de256f;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(222, 37, 111, 0.18);
    outline: none;
}

.btn-like-action:hover i,
.btn-like-action:focus i {
    transform: scale(1.35);
    color: #de256f;
}

.like-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 20px;
    background: #f0f0f0;
    color: #666;
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
}

.like-count-badge i {
    color: #de256f;
    font-size: 12px;
}

/* ---- Gallery nav (Gallery / About / Cart / Checkout) ----
   .txmedium is the wrapper div and carries a class selector, which means its
   font-family declaration beats inherited values on the <font> children and
   prevents the generic p,a,td,font token rule from taking effect in some
   engines. This same-specificity rule appears after the ks.min.css definition
   so it wins the cascade and correctly applies the artist's body font.

   .menuartist inherits letter-spacing: -1px from .txmedium; since inheritance
   loses to any directly-applied rule, the token applied here overrides it.
   The -1px fallback keeps every existing gallery unchanged when no tracking
   preference is saved. */
.txmedium {
    font-family: var(--gal-font-body, 'Source Sans Pro', sans-serif);
}

.menuartist {
    letter-spacing: var(--gal-title-tracking, -1px);
}

/* Style-1 sidebar category list items use .tx2l; the class is defined in
   ks.min.css with hardcoded Source Sans Pro. This same-specificity rule loads
   after ks.min.css and wins the cascade, applying the artist's body font. */
.tx2l {
    font-family: var(--gal-font-body, 'Source Sans Pro', sans-serif);
}

/* Category pill button text colour.
   Selector specificity (0,1,1) beats the HTML <font color=""> attribute (0,0,0).
   When --gal-cat-text is not set the var() resolution is guaranteed-invalid
   (no fallback given), so the declaration is treated as if it never existed and
   the <font color> attributes keep controlling the text colour — existing
   galleries are unchanged. When the artist does set a colour the variable wins. */
.category-title > font {
    color: var(--gal-cat-text);
}