/* Shop page (shop.aspx), inside DWCMaster.master. The category links and the product cards
   are HTML built in shop.aspx.cs, so they are styled through the class names it emits
   (.product-box, .product-overlay, .overlay-content, h2.title ...). The page still loads the
   old css/main.css, which the rules below override. Shared colours come from
   css/beyoung-theme.css */

.shop-page
{
    padding: 22px 0 50px;
    font-family: var(--by-font);
    color: var(--by-text);
}

.shop-container
{
    max-width: 1172px;
    margin: 0 auto;
    padding: 0 16px;
}

.shop-banner
{
    margin-bottom: 26px;
    border-radius: var(--by-radius-lg);
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(63, 20, 86, 0.14);
}

.shop-banner img
{
    display: block;
    width: 100%;
    height: auto;
}

.shop-layout
{
    display: flex;
    align-items: flex-start;
}

/* ---------- Category sidebar (desktop) ---------- */
.shop-sidebar
{
    flex: 0 0 262px;
    position: -webkit-sticky;
    position: sticky;
    top: 124px;
    margin-right: 28px;
    border: 1px solid var(--by-border-soft);
    border-radius: var(--by-radius-lg);
    background: #fff;
    box-shadow: 0 4px 14px rgba(63, 20, 86, 0.07);
    overflow: hidden;
}

.shop-sidebar-title
{
    margin: 0;
    padding: 15px 18px;
    background: var(--by-primary-dark);
    background: var(--by-gradient-deep);
    font-family: var(--by-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .6px;
    line-height: 1.3;
    text-transform: uppercase;
    color: #fff;
}

.shop-cats
{
    padding: 8px;
}

/* each category is an <h2> holding an empty icon and the link */
.shop-cats h2
{
    margin: 0 0 2px;
    padding: 0;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    transition: background-color .15s ease;
}

.shop-cats h2 > i, .shop-cats-mobile h2 > i
{
    display: none !important;
}

.shop-cats h2 a
{
    display: block;
    padding: 11px 12px;
    letter-spacing: .3px;
    text-decoration: none;
    color: var(--by-text-soft) !important;
}

.shop-cats h2:hover
{
    background: #f6eef5;
}

.shop-cats h2:hover a
{
    color: var(--by-primary) !important;
}

.shop-cats h2.is-active
{
    background: #f6eef5;
    box-shadow: inset 3px 0 0 var(--by-primary);
}

.shop-cats h2.is-active a
{
    font-weight: 700;
    color: var(--by-primary) !important;
}

.shop-cats h2 img, .shop-cats-mobile h2 img
{
    height: 18px;
    vertical-align: -3px;
}

/* ---------- Category chips (mobile) ---------- */
.shop-cats-mobile
{
    display: none;
}

/* ---------- Product list ---------- */
.shop-main
{
    flex: 1 1 0;
    min-width: 0;
}

.shop-page .features_items
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 20px;
    overflow: visible;
}

/* category title: the inline white-on-purple bar from the code-behind becomes a plain heading */
.shop-page .features_items h2.title
{
    grid-column: 1 / -1;
    margin: 0 0 4px;
    padding: 0 !important;
    background: none !important;
    font-family: var(--by-font);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.2px;
    line-height: 1.25;
    text-align: left;
    color: var(--by-text) !important;
}

.shop-page .features_items h2.title:before
{
    display: none;
}

.shop-page .features_items h2.title:after
{
    content: "";
    display: block;
    position: static;
    width: 56px;
    height: 3px;
    margin-top: 10px;
    border: 0;
    border-radius: 3px;
    background: var(--by-gradient);
}

/* product card */
.shop-page .product-box
{
    float: none;
    width: auto;
    min-height: 0;
    padding: 0;
}

/* flex all the way down so every card in a row is as tall as the tallest one */
.shop-page .product-box
{
    display: flex;
}

.shop-page .product-image-wrapper
{
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    border: 1.5px solid #c9a3cc;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(63, 20, 86, 0.05);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.shop-page .product-image-wrapper:hover
{
    transform: translateY(-3px);
    border-color: var(--by-primary);
    box-shadow: 0 14px 30px rgba(63, 20, 86, 0.18);
}

.shop-page .single-products
{
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

/* The code-behind writes every card twice: a plain copy whose "Add to cart" link does
   nothing, and a hover overlay holding the working button. Only the working copy is shown,
   laid out as a normal card instead of an overlay. */
.shop-page .single-products > .productinfo:not(.product-overlay)
{
    display: none;
}

.shop-page .product-overlay
{
    display: flex;
    flex: 1 1 auto;
    position: static;
    width: auto;
    min-width: 0;
    height: auto;
    background: none;
    transition: none;
}

.shop-page .product-overlay .overlay-content
{
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    position: static;
    width: auto;
    min-width: 0;
    height: auto;
    padding: 14px 14px 16px;
    text-align: left;
}

/* photo, then name, then price, then button */
.shop-page .overlay-content > a:first-child
{
    order: 0;
    display: block;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--by-border-soft);
}

.shop-page .overlay-content img
{
    display: block;
    width: 100%;
    height: 180px;
    object-fit: contain;
    transition: transform .25s ease;
}

.shop-page .product-image-wrapper:hover .overlay-content img
{
    transform: scale(1.05);
}

.shop-page .overlay-content > a
{
    order: 1;
    text-decoration: none;
}

.shop-page .overlay-content > a p
{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    min-height: 4.2em;
    margin: 0;
    padding: 0;
    font-family: var(--by-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--by-text);
}

.shop-page .overlay-content > a:hover p
{
    color: var(--by-primary);
}

.shop-page .overlay-content > h2
{
    order: 2;
    margin: 8px 0 14px;
    padding: 0;
    font-family: var(--by-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--by-primary);
}

.shop-page .overlay-content > .add-to-cart
{
    order: 3;
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: 42px;
    margin: auto 0 0;
    padding: 0 10px;
    border: 0;
    border-radius: var(--by-radius);
    background-image: var(--by-gradient);
    box-shadow: 0 6px 14px rgba(142, 31, 122, 0.22);
    font-family: var(--by-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .3px;
    color: #fff !important;
    transition: box-shadow .15s ease, filter .15s ease;
}

.shop-page .overlay-content > .add-to-cart i
{
    margin-right: 6px;
    font-size: 18px;
    vertical-align: -1px;
}

.shop-page .overlay-content > .add-to-cart:hover,
.shop-page .overlay-content > .add-to-cart:focus
{
    box-shadow: 0 10px 20px rgba(142, 31, 122, 0.32);
    filter: brightness(1.08);
    outline: none;
}

/* wait / done states set by addToCart() in shop.aspx, shown on the button itself */
.shop-page .overlay-content > .add-to-cart.is-loading,
.shop-page .overlay-content > .add-to-cart.is-loading:hover
{
    background: #f6eef5 !important;
    box-shadow: none;
    filter: none;
    color: var(--by-primary) !important;
    opacity: 1;
    cursor: default;
}

.shop-page .overlay-content > .add-to-cart.is-added,
.shop-page .overlay-content > .add-to-cart.is-added:hover
{
    background: #1e8e4a !important;
    box-shadow: none;
    filter: none;
    color: #fff !important;
    opacity: 1;
    cursor: default;
}

/* out of stock stays on the button; other failures show briefly and the button resets */
.shop-page .overlay-content > .add-to-cart.is-out,
.shop-page .overlay-content > .add-to-cart.is-out:hover,
.shop-page .overlay-content > .add-to-cart.is-failed,
.shop-page .overlay-content > .add-to-cart.is-failed:hover
{
    background: #fdecea !important;
    border: 1px solid #f3b9b2;
    box-shadow: none;
    filter: none;
    color: #b3321c !important;
    opacity: 1;
    cursor: not-allowed;
}

.shop-empty
{
    grid-column: 1 / -1;
    padding: 40px 20px;
    border: 1px dashed #cdb9d6;
    border-radius: var(--by-radius-lg);
    background: #fff;
    text-align: center;
    color: var(--by-text-muted);
}

/* ---------- Carried over from the page's old inline styles (sign-up popup buttons) ---------- */
.btn-default
{
    background-color: #582c4f !important;
    color: White !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px)
{
    .shop-sidebar
    {
        flex-basis: 220px;
        margin-right: 20px;
    }

    .shop-page .features_items
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-gap: 16px;
    }
}

@media (max-width: 767px)
{
    .shop-page
    {
        padding: 14px 0 36px;
    }

    .shop-banner
    {
        margin-bottom: 16px;
        border-radius: 12px;
    }

    .shop-layout
    {
        display: block;
    }

    .shop-sidebar
    {
        display: none;
    }

    /* categories become one row of chips that scrolls sideways */
    .shop-cats-mobile
    {
        display: flex;
        margin: 0 -16px 18px;
        padding: 2px 16px 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .shop-cats-mobile::-webkit-scrollbar
    {
        display: none;
    }

    .shop-cats-mobile h2
    {
        flex: 0 0 auto;
        margin: 0 8px 0 0;
        padding: 0;
        border: 1.5px solid #c9a3cc;
        border-radius: 999px;
        background: #fff;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.3;
        white-space: nowrap;
    }

    .shop-cats-mobile h2 a
    {
        display: block;
        padding: 9px 15px;
        letter-spacing: .3px;
        text-decoration: none;
        color: var(--by-text-soft) !important;
    }

    .shop-cats-mobile h2.is-active
    {
        border-color: var(--by-primary);
        background: var(--by-primary);
        background: var(--by-gradient);
    }

    .shop-cats-mobile h2.is-active a
    {
        color: #fff !important;
    }

    .shop-page .features_items
    {
        grid-gap: 12px;
    }

    .shop-page .features_items h2.title
    {
        font-size: 21px;
    }

    .shop-page .product-overlay .overlay-content
    {
        padding: 12px;
    }

    .shop-page .overlay-content img
    {
        height: 135px;
    }

    .shop-page .overlay-content > a p
    {
        font-size: 13px;
    }

    .shop-page .overlay-content > h2
    {
        font-size: 15px;
    }

    .shop-page .overlay-content > .add-to-cart
    {
        font-size: 13px;
    }
}