/* Product detail page (product.aspx), inside DWCMaster.master. The gallery, the name / price /
   quantity block and the breadcrumb are HTML built in product.aspx.cs, and the description,
   benefits and usage texts are HTML typed into the admin panel, so they are styled through
   the class names already there (.zoom-wrapper, .product-name, .prod-pric, .cart-qty-wrap ...).
   The image zoom script keeps using .left-product-views / #smallView / #mainView.
   Shared colours come from css/beyoung-theme.css */

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

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

/* ---------- Breadcrumb ---------- */
.product-page .breadcrum
{
    padding: 10px 0 16px;
}

.product-page .breadcrum-container
{
    width: auto;
    padding: 0;
}

.product-page .breadcrum-container ul li a,
.product-page .breadcrum-container ul span
{
    font-family: var(--by-font);
    font-size: 12px;
    letter-spacing: .3px;
}

.product-page .breadcrum-container ul li a:hover
{
    color: var(--by-primary);
}

.product-page .breadcrum-container ul span
{
    color: var(--by-text-muted);
}

/* ---------- Gallery + buy box ---------- */
.product-top
{
    display: flex;
    align-items: flex-start;
}

.product-page .left-product-views
{
    flex: 0 0 47%;
    float: none;
    width: auto;
    min-width: 0;
    padding: 18px;
    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);
}

.product-page .zoom-wrapper
{
    display: flex;
    align-items: flex-start;
}

.product-page .leftthumbs
{
    flex: 0 0 72px;
    float: none;
    width: 72px;
    margin: 0 16px 0 0;
}

.product-page .thumbImage
{
    float: none;
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 0 10px;
    padding: 4px;
    border: 1.5px solid var(--by-border);
    border-radius: 10px;
    background: #fff;
    line-height: normal;
    overflow: hidden;
    transition: border-color .15s ease;
}

.product-page .thumbImage:hover
{
    border-color: var(--by-primary);
}

.product-page .thumbImage a
{
    display: block;
    width: 100%;
    height: 100%;
}

.product-page .thumbImage img
{
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
}

.product-page .zoom-right
{
    flex: 1 1 auto;
    float: none;
    width: auto;
    min-width: 0;
    height: 420px;
    margin: 0;
    text-align: center;
}

.product-page .zoom-right img
{
    max-width: 100%;
    max-height: 100%;
}

.product-page .right-product-details
{
    flex: 1 1 0;
    float: none;
    width: auto;
    min-width: 0;
    margin-left: 40px;
    padding: 4px 0 0;
}

/* name, pack size, short description */
.product-page .product-name br
{
    display: none;
}

.product-page .product-name h2
{
    margin: 0;
    padding: 0;
    font-family: var(--by-font);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.3px;
    line-height: 1.25;
    color: var(--by-text);
}

.product-page .product-name > p
{
    margin: 16px 0 0;
    padding: 0;
    font-family: var(--by-font);
    font-size: 15px;
    letter-spacing: 0;
    line-height: 1.7;
    color: var(--by-text-muted);
}

/* the first line under the name is the pack size ("100 ml"): shown as a small tag */
.product-page .product-name > h2 + br + p
{
    display: inline-block;
    margin-top: 12px;
    padding: 4px 13px;
    border-radius: 999px;
    background: #f6eef5;
    font-size: 13px;
    line-height: 1.5;
    color: var(--by-primary-dark);
}

.product-page .product-name > h2 + br + p b
{
    font-weight: 600;
}

.product-page .product-name > p:has(> b:empty)
{
    display: none;
}

/* price first, then the quantity stepper (the code-behind writes them the other way round) */
.product-page .prod-pric-color-gurant
{
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--by-border-soft);
}

.product-page .prod-pric-color
{
    display: flex;
    flex-direction: column;
    float: none;
    width: auto;
}

.product-page .prod-pric-color br,
.product-page .prod-quntity-cart br
{
    display: none;
}

.product-page .prod-pric
{
    order: 0;
    float: none;
    padding: 0;
}

.product-page .prod-pric h2
{
    margin: 0;
    padding: 0;
    font-family: var(--by-font);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--by-primary);
}

/* "Out of Stock" (written with an inline red colour) */
.product-page .prod-pric[style] h2
{
    display: inline-block;
    margin-top: 10px;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--by-danger-bg);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
}

.product-page .cart-qty-wrap
{
    order: 1;
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.product-page .label-qtytxt
{
    margin-right: 14px;
    font-family: var(--by-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--by-text-soft);
}

.product-page .subQty, .product-page .addQty
{
    width: 42px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--by-border);
    background: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    color: var(--by-primary);
    cursor: pointer;
    transition: background-color .15s ease;
}

.product-page .subQty
{
    border-radius: var(--by-radius) 0 0 var(--by-radius);
}

.product-page .addQty
{
    border-radius: 0 var(--by-radius) var(--by-radius) 0;
}

.product-page .subQty:hover, .product-page .addQty:hover
{
    background: #f6eef5;
}

.product-page .txt-qtybox
{
    width: 58px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: solid var(--by-border);
    border-width: 1px 0;
    border-radius: 0;
    background: #fff;
    font-family: var(--by-font);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: var(--by-text);
    outline: none;
}

/* add to cart */
.product-page .prod-quntity-cart
{
    float: none;
    margin: 0;
    padding: 0;
}

.product-page .prod-in-cart
{
    float: none;
    margin-top: 24px;
}

.product-page .prod-in-cart .btn
{
    min-width: 260px;
    height: 54px;
    padding: 0 30px;
    border: 0;
    border-radius: var(--by-radius);
    background: var(--by-primary);
    background-image: var(--by-gradient);
    box-shadow: 0 10px 22px rgba(142, 31, 122, 0.3);
    font-family: var(--by-font);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .3px;
    color: #fff !important;
    transition: box-shadow .15s ease, filter .15s ease, transform .15s ease;
}

.product-page .prod-in-cart .btn i
{
    padding-right: 8px !important;
    font-size: 21px !important;
    vertical-align: -2px !important;
}

.product-page .prod-in-cart .btn:hover, .product-page .prod-in-cart .btn:focus
{
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(142, 31, 122, 0.38);
    filter: brightness(1.08);
    outline: none;
}

/* out of stock: the button is there but cannot be used */
.product-page .prod-in-cart .btn.btndisable,
.product-page .prod-in-cart .btn.btndisable:hover
{
    transform: none;
    box-shadow: none;
    filter: grayscale(.6);
    opacity: .5;
    cursor: not-allowed;
}

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

.product-page .prod-in-cart .btn.is-added,
.product-page .prod-in-cart .btn.is-added:hover
{
    transform: none;
    background: #1e8e4a;
    box-shadow: none;
    filter: none;
    color: #fff !important;
    opacity: 1;
    cursor: default;
}

/* ---------- Description and tabs ---------- */
.product-page .product-more-details
{
    margin-top: 34px;
    padding: 0;
}

.product-card
{
    padding: 26px 28px 24px;
    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);
}

.product-card + .product-card
{
    margin-top: 22px;
}

.product-card-title
{
    margin: 0 0 18px;
    padding: 0;
    font-family: var(--by-font);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--by-text);
}

.product-card-title:after
{
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 10px;
    border-radius: 3px;
    background: var(--by-gradient);
}

/* Texts pasted into the admin panel carry their own fonts and sizes (often from Word);
   they are forced into the site font so the page reads as one piece. */
.product-page .product-des,
.product-page .product-des *,
.product-page .product-tabs .tab-pane,
.product-page .product-tabs .tab-pane *
{
    font-family: var(--by-font) !important;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
}

.product-page .product-des
{
    color: var(--by-text-soft);
    overflow-wrap: break-word;
}

/* bullet lists inside the admin text: two columns with a small purple marker
   (the site-wide CSS removes list bullets, so they are drawn here) */
.product-page .product-des ul,
.product-page .product-tabs .tab-pane ul
{
    margin: 14px 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 40px;
}

.product-page .product-des ul li,
.product-page .product-tabs .tab-pane ul li
{
    position: relative;
    margin: 0 0 10px;
    padding: 0 0 0 20px;
    list-style: none;
    break-inside: avoid;
}

.product-page .product-des ul li:before,
.product-page .product-tabs .tab-pane ul li:before
{
    content: "";
    position: absolute;
    left: 2px;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--by-accent);
}

.product-page .product-des img,
.product-page .product-tabs .tab-pane img
{
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.product-page .product-tabs img[src=""],
.product-page .product-tabs img:not([src])
{
    display: none;
}

/* tabs as pills (same look as the home page tabs) */
.product-page .product-tabs .nav-tabs
{
    display: flex;
    flex-wrap: wrap;
    width: auto;
    margin: 0 0 18px;
    padding: 6px;
    border: 0 !important;
    border-radius: 14px;
    background: #f6eef5;
}

.product-page .product-tabs .nav-tabs:before,
.product-page .product-tabs .nav-tabs:after
{
    display: none;
}

.product-page .product-tabs .nav-tabs > li
{
    float: none;
    margin: 0;
}

.product-page .product-tabs .nav-tabs > li > a,
.product-page .product-tabs .nav-tabs > li > a:hover,
.product-page .product-tabs .nav-tabs > li > a:focus
{
    margin: 0;
    padding: 10px 22px;
    border: 0;
    border-radius: 10px;
    background: transparent !important;
    font-family: var(--by-font);
    font-size: 14px;
    font-weight: 600 !important;
    letter-spacing: .3px;
    color: var(--by-text-muted) !important;
    outline: 0;
}

.product-page .product-tabs .nav-tabs > li > a:hover
{
    color: var(--by-primary) !important;
}

.product-page .product-tabs .nav-tabs > li.active > a,
.product-page .product-tabs .nav-tabs > li.active > a:hover,
.product-page .product-tabs .nav-tabs > li.active > a:focus
{
    background: var(--by-primary) !important;
    background-image: var(--by-gradient) !important;
    box-shadow: 0 4px 10px rgba(142, 31, 122, 0.25);
    color: #fff !important;
}

.product-page .product-tabs .tab-content
{
    padding: 0;
    color: var(--by-text-soft);
}

.product-page .product-tabs .tab-pane:after
{
    content: "";
    display: table;
    clear: both;
}

.product-page .product-tabs .tab-pane > [class*="col-"]
{
    padding-left: 0;
    padding-right: 0;
}

.product-page .product-tabs .tab-pane p
{
    margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px)
{
    .product-page .right-product-details
    {
        margin-left: 26px;
    }

    .product-page .zoom-right
    {
        height: 340px;
    }

    .product-page .product-name h2
    {
        font-size: 24px;
    }
}

@media (max-width: 767px)
{
    .product-top
    {
        display: block;
    }

    .product-page .left-product-views
    {
        padding: 14px;
    }

    /* thumbnails move under the main photo, in a row */
    .product-page .zoom-wrapper
    {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .product-page .leftthumbs
    {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        flex: 0 0 auto;
        width: auto;
        margin: 12px 0 0;
    }

    .product-page .thumbImage
    {
        width: 60px;
        height: 60px;
        margin: 0 5px;
    }

    .product-page .zoom-right
    {
        width: auto;
        height: 300px;
    }

    .product-page .right-product-details
    {
        margin: 22px 0 0;
    }

    .product-page .product-name h2
    {
        font-size: 22px;
    }

    .product-page .prod-pric h2
    {
        font-size: 25px;
    }

    .product-page .prod-in-cart .btn
    {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .product-card
    {
        padding: 20px 16px 18px;
    }

    .product-card-title
    {
        font-size: 19px;
    }

    .product-page .product-des ul,
    .product-page .product-tabs .tab-pane ul
    {
        columns: 1;
    }

    /* tabs in one row that scrolls sideways */
    .product-page .product-tabs .nav-tabs
    {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .product-page .product-tabs .nav-tabs::-webkit-scrollbar
    {
        display: none;
    }

    .product-page .product-tabs .nav-tabs > li
    {
        flex: 0 0 auto;
    }

    .product-page .product-tabs .nav-tabs > li > a,
    .product-page .product-tabs .nav-tabs > li > a:hover,
    .product-page .product-tabs .nav-tabs > li > a:focus
    {
        padding: 9px 16px;
        font-size: 13px;
        white-space: nowrap;
    }
}