/* ==========================================================================
   SKYSTONE - WEBSHOP V24
   Sidebar: 220px / vertical
   Main:    535px / horizontal
   ========================================================================== */

body.template-skystone .webshop-widget {
    width: 100%;

    margin: 10px 0 0;
    padding: 0;

    overflow: hidden;

    border: 1px solid #d4e6ea;

    background:
        url("../../images/fon-bg-account-top.png")
        center top / 100% auto no-repeat,
        url("../../images/fon-bg-account-bottom.png")
        center bottom / 100% auto no-repeat,
        rgba(255,255,255,.97);

    box-sizing: border-box;
}

body.template-skystone .webshop-widget-head {
    min-height: 48px;

    padding: 10px 12px 8px;

    border-bottom: 1px solid #dcebed;

    background: rgba(249,252,253,.72);
}

body.template-skystone .webshop-widget-head > span {
    display: block;

    margin: 0 0 4px;

    color: #72a6b5;

    font-size: 6px;
    line-height: 1;
    letter-spacing: 1.1px;

    text-transform: uppercase;
}

body.template-skystone .webshop-widget-head > h2 {
    margin: 0;

    color: #075f78;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

body.template-skystone .webshop-widget-products {
    width: 100%;

    box-sizing: border-box;
}

body.template-skystone .webshop-widget-empty {
    padding: 16px 10px;

    color: #789aa5;

    font-size: 7px;
    text-align: center;
}

body.template-skystone .webshop-widget-product {
    min-width: 0;

    color: inherit;
    text-decoration: none;

    box-sizing: border-box;

    transition:
        background-color .16s ease,
        transform .16s ease;
}

body.template-skystone .webshop-widget-product-image {
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #d5e6ea;

    background:
        linear-gradient(
            145deg,
            #eef9fb,
            #dceff3
        );

    box-sizing: border-box;
}

body.template-skystone .webshop-widget-product-image img {
    display: block;

    max-width: 90%;
    max-height: 90%;

    width: auto;
    height: auto;

    object-fit: contain;

    image-rendering: auto;
}

body.template-skystone .webshop-widget-no-image {
    color: #78a3b0;

    font-size: 6px;
    font-weight: 700;
}

body.template-skystone .webshop-widget-product-copy {
    min-width: 0;
}

body.template-skystone .webshop-widget-product-copy strong {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #08799b;

    font-size: 7px;
    font-weight: 700;
    line-height: 1.15;
}

body.template-skystone .webshop-widget-product-copy small {
    display: block;

    margin-top: 4px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #315f6e;

    font-size: 6px;
    font-weight: 600;
    line-height: 1.1;
}


/* ==========================================================================
   SIDEBAR - 220px / referência vertical
   ========================================================================== */

body.template-skystone
.webshop-widget-sidebar
.webshop-widget-products {
    padding: 5px 8px 9px;
}

body.template-skystone
.webshop-widget-sidebar
.webshop-widget-product {
    min-height: 49px;

    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    gap: 8px;
    align-items: center;

    padding: 5px 0;

    border-bottom: 1px solid #e1ecef;
}

body.template-skystone
.webshop-widget-sidebar
.webshop-widget-product:last-child {
    border-bottom: 0;
}

body.template-skystone
.webshop-widget-sidebar
.webshop-widget-product-image {
    width: 42px;
    height: 42px;
}

body.template-skystone
.webshop-widget-sidebar
.webshop-widget-product:hover {
    background: #f3fafb;
}

body.template-skystone
.webshop-widget-sidebar
.webshop-widget-product:hover
.webshop-widget-product-copy strong {
    color: #055f7e;
}


/* ==========================================================================
   MAIN - 535px / horizontal
   ========================================================================== */

body.template-skystone
.webshop-widget-main
.webshop-widget-products {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0,1fr));

    gap: 7px;

    padding: 9px 10px 11px;
}

body.template-skystone
.webshop-widget-main
.webshop-widget-product {
    min-width: 0;

    padding: 5px;

    border: 1px solid #d9e8eb;

    background: #fbfefe;

    text-align: center;
}

body.template-skystone
.webshop-widget-main
.webshop-widget-product-image {
    width: 100%;
    height: 72px;

    margin-bottom: 6px;
}

body.template-skystone
.webshop-widget-main
.webshop-widget-product-copy strong {
    font-size: 6.3px;

    text-align: center;
}

body.template-skystone
.webshop-widget-main
.webshop-widget-product-copy small {
    font-size: 5.3px;

    text-align: center;
}

body.template-skystone
.webshop-widget-main
.webshop-widget-product:hover {
    transform: translateY(-2px);

    border-color: #a9d6df;

    background: #f2fbfc;
}


/* Quantidades maiores que 5 quebram para a próxima linha. */
@media (max-width: 620px) {
    body.template-skystone
    .webshop-widget-main
    .webshop-widget-products {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

    body.template-skystone
    .webshop-widget-main
    .webshop-widget-product-image {
        height: 82px;
    }
}