/**
 * shop.css — Styles for product browsing pages.
 *
 * Replaces styles.css for the new shop system.
 * Preserves all legacy class names, dotted-line background images,
 * product grid layout, and responsive behavior.
 *
 * Note: em_styles.css handles base layout (flexbox, shopcontainer,
 * shop-navigation-container, verticaldots-left, rowsepout, etc.).
 * This file handles product-specific styles only.
 *
 * Background image paths are relative from:
 *   ./iluvana/plugins/shop_products/runtime/css/shop.css
 * to:
 *   graphics/
 */


/* ─── Product Grid (#productgrid) ──────────────────────── */

#productgrid {
    margin: 0px 23px 23px;
    line-height: 1.4em;
}
#productgrid.limit-margin {
    margin-right: 0px;
}
.narrowmargins,
#productgrid .narrowmargins,
#productgrid.narrowmargins {
    margin: 0px 10px 10px;
}
#productgrid p {
    margin: 0px;
    padding: 0px;
}
#productgrid .sep {
    padding-bottom: 5px;
}


/* ─── Category Description Box ─────────────────────────── */

#productgrid .category-description-title {
    font-family: "trajan-pro-3", serif;
    font-weight: 400;
    font-size:30px;
    line-height:1;
}
#productgrid .category-descriptionbox {
    margin-left: 15px;
    margin-bottom: 10px;
}
#productgrid .category-descriptionbox img {
    max-width: 100%;
    height: auto;
}


/* ─── Shop Intro (Landing Page Logo) ──────────────────── */

#shopintro {
    margin-bottom: 15px;
    
    font-family: var(--font-display);
  font-weight: 300;
  color: var(--brown-dark);
}
#shopintro img {
    max-width: 100%;
    height: auto;
    max-height: 37px;
    width: auto;
}


/* ─── Gallery Container ────────────────────────────────── */

#gallery-container {
    width: 100%;
}
#gallery-container:after {
    content: "";
    display: table;
    clear: both;
}


/* ─── Index Item Boxes (Product/Category Grid Cards) ───── */

#productgrid .itembox,
#productgrid .indexitembox {
    position: relative;
    width: 245px;
    height: 245px;
    padding-top: 10px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
}
#productgrid .itembox.float,
#productgrid .indexitembox.float {
    display: block;
    float: left;
}


/* ─── Shop Landing: Category Card Images ───────────────── */

.indexitembox .shopimg {
    height: 175px;
    width: auto;
    max-width: 100%;
    max-height: 175px;
}


/* ─── Grid Title & Price ───────────────────────────────── */

#productgrid .title {
    text-transform: uppercase;
    margin: 0px 10px;
    font-size: 12px;
}
#productgrid .title.stretch {
    margin: 0px 2px;
}
#productgrid .price {
    font-weight: 300;
    color: #000;
    font-size: 12px;
}
#productgrid .price.strikethru {
    text-decoration: line-through;
}
#productgrid .price.special {
    text-transform: uppercase;
    font-size: 11px;
    color: #db7f31;
}


/* ─── Dotted Grid Lines (Pseudo-Elements) ──────────────── */
/*
 * Horizontal dotted lines on bottom of each item box.
 * First row gets both top and bottom lines.
 * Vertical dotted lines on right side, removed every 3rd column.
 */

.indexitembox.dottedlines:before {
    background-image: url(../../../../../graphics/horizontal-dotted-line-dot.png);
    background-repeat: repeat-x;
    position: absolute;
    height: 1px;
    width: 88%;
    bottom: 0;
    content: '';
    background-position: center;
    pointer-events: none;
    left: 0;
    margin: 0px 15px;
}

/* First row (items 1–3) gets top AND bottom dotted lines.
   Using -n+6 matches legacy selector behavior. */
.indexitembox.dottedlines:nth-child(-n+6):before {
    background-image: url(../../../../../graphics/horizontal-dotted-line-dot.png), url(../../../../../graphics/horizontal-dotted-line-dot.png);
    background-repeat: repeat-x;
    position: absolute;
    height: 100%;
    width: 88%;
    top: 0;
    content: '';
    background-position: bottom center, top center;
    pointer-events: none;
    left: 0;
    margin: 0px 15px;
}

/* Vertical dotted line on the right side */
.indexitembox.dottedlines:after,
.suggestedbox-item.dottedlines:after {
    background-image: url(../../../../../graphics/vertical-dotted-line-dot.png);
    background-repeat: repeat-y;
    position: absolute;
    width: 1px;
    height: 86%;
    pointer-events: none;
    top: 0;
    content: '';
    background-position: center;
    right: 0;
    margin: 15px 0px;
}

/* Remove right border on every 3rd item (3-column grid) */
.indexitembox.dottedlines:nth-child(3n+3):after,
.suggestedbox-item.dottedlines:nth-child(3n+3):after {
    background: none;
}


/* ─── Product Box (Category Listing Items) ─────────────── */

.indexitembox .product-box {
    width: 100%;
    height: 175px;
}
.indexitembox .product-box .product-img {
    position: relative;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
}
.indexitembox .product-box ul {
    margin: 0;
    padding: 0;
}
.indexitembox .product-box ul li {
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Product title in listing */
.product-box li.title {
    font-size: 12px;
    font-weight: 300;
    color: #564c3e;
    min-height: 30px;
    line-height: 1.3;
    margin: 0px 10px;
    text-transform: uppercase;
}
.product-box li.title a {
    color: #564c3e;
    text-decoration: none;
}
.product-box li.title a:hover {
    color: #b45313;
}

/* --- New Product Badges --- */

/* Landing Page Ribbon Container */
.product-box a {
    position: relative;
    display: block;
    overflow: hidden; /* Clips the ribbon to the image corners */
    height: 100%; /* This allows the child .product-img to find its 100% height */
}

.new-badge-ribbon {
    position: absolute;
    top: 12px;
    left: -25px;
    background-color: #c5a059;
    color: #fff;
    width: 100px;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 20px;
    transform: rotate(-45deg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 2;
    pointer-events: none;
}

/* Individual Page Pill */
.new-product-pill {
    display: inline-block;
    vertical-align: middle;
    background: transparent;
    color: #c5a059;
    border: 1px solid #c5a059;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 1px 8px;
    border-radius: 20px;
    margin-left: 10px;
    letter-spacing: 0.5px;
    margin-top: -4px; /* Alignment adjustment for title line */
}


/* ─── Sale / Price Display ─────────────────────────────── */

.product-nosale-box.strikethru,
.indexitembox .product-price.strikethru,
.single-product-box .product-price.strikethru {
    text-decoration: line-through;
}

.product-price.special,
.indexitembox .product-price.special,
.single-product-box .product-price.special {
    color: #db7f31 !important;
}
.special-price-label {
    font-size: 12px;
}

/* Sale box is hidden by default; shown with .inlineblock */
.single-product-box .product-sale-box,
.indexitembox .product-box .product-sale-box {
    display: none;
}
.indexitembox .product-box li.inlineblock,
.single-product-box .product-sale-box.inlineblock,
.indexitembox .product-box .product-sale-box.inlineblock,
.product-sale-box.inlineblock {
    display: inline-block;
}

/* Item hidden utility (avoids conflict with global .hidden) */
.itemhidden {
    display: none !important;
}


/* ─── Availability Label ───────────────────────────────── */

.product-availability {
    font-size: 11px;
    color: #cc0000;
    font-weight: bold;
    text-transform: uppercase;
}
#out_of_stock_item {
    font-size: 11px;
    color: #cc0000;
    font-weight: bold;
}


/* ─── New / Sale Snipes ────────────────────────────────── */

.newproductlabel,
.newcatgegorylabel,
.saleproductsnipe {
    display: none;
}
.indexitembox .product-box .newproductlabel.isnewproductY,
.indexitembox .product-box .saleproductsnipe.issaleproductY {
    display: block;
    width: 64px;
    height: 64px;
    position: absolute;
    top: -10px;
    right: 1px;
    background: url(../../../../../graphics/new-product.png) no-repeat;
}
.indexitembox .product-box .saleproductsnipe.issaleproductY {
    background: url(../../../../../graphics/sale_snipe.png) no-repeat;
}


/* ─── Single Product: Overall Container ────────────────── */

.single-product-box {
    position: relative;
    width: 100%;
    height: auto;
}


/* ─── Single Product: Detail Box ───────────────────────── */

#productgrid .detailbox {
    position: relative;
    padding-bottom: 15px;
    border: none;
    text-align: center;
    font-size: 12px;
}

/* Flex container for Image + Details */
.NEW_product-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 40px;
}

#productgrid .mainimg-container {
    width: 100%;
}
#productgrid .detailbox img.main-img {
    width: 430px;
    max-width: 100%;
    height: auto;
}

/* Product Details Column */
#productgrid .detailbox #productdetails {
    font-size: 14px;
    text-align: left;
    padding-left: 23px;
    width: 100%;
}

/* Vertical dotted line separator */
#productgrid .detailbox #productdetails #detailsborderwrap {
    padding-left: 12px;
    background-image: url(../../../../../graphics/vertical-dotted-line-dot.png);
    background-repeat: repeat-y;
    background-position: left top;
}

/* Product title on detail page */
#productgrid .detailbox #productdetails .prodtitle {
    color: #9e2d33;
    font-size: 16px;
    line-height: 20px;
    padding-bottom: 5px;
}

/* Product description */
#productgrid .detailbox #productdetails .proddescription {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Product price on detail page */
#productgrid .detailbox #productdetails .prodprice {
    font-weight: 300;
    font-size: 16px;
    line-height: 45px;
    color: #000;
}
#productgrid .detailbox #productdetails .prodprice.strikethru {
    text-decoration: line-through;
}
#productgrid .detailbox #productdetails .prodprice.special {
    text-transform: uppercase;
    color: #db7f31;
}


/* ─── Add-to-Cart Button ────────────────────────────────── */

.atc,
.btc {
    display: inline-block;
    cursor: pointer;
    padding: 8px 18px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    background-color: #AE902C;
    border: none;
    letter-spacing: 0.5px;
    transition: background-color 0.2s;
    position: relative;
    min-width: 100px;
    text-align: center;
}
.atc:hover,
.btc:hover {
    background-color: #967b24;
}
.atc.disabled,
.btc.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ATC busy state — spinner inside button, looks disabled, no clicks */
.atc.atc-busy,
.btc.atc-busy {
    opacity: 0.6;
    pointer-events: none;
    cursor: default;
}
.atc.atc-busy:hover,
.btc.atc-busy:hover {
    background-color: #AE902C;
}
.atc.atc-busy .fa-spinner,
.btc.atc-busy .fa-spinner {
    font-size: 14px;
}

.atc.atc-busy .fa-spinner,
.btc.atc-busy .fa-spinner {
    font-size: 14px;
}

/* External Partner Link Button */
.btc-external, 
a.btc-external:link, 
a.btc-external:visited {
    background-color: transparent;
    color: #AE902C;
    border: 2px solid #AE902C;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px; /* slightly reduced padding to account for 2px border */
}

.btc-external:hover {
    background-color: #AE902C;
    color: #fff;
}


/* Quantity input */
.pqty {
    width: 40px;
    height: 28px;
    text-align: center;
    font-size: 13px;
    border: 1px solid #ccc;
}

/* Control button box (ATC area on product detail) */
.control-btn-box {
    margin-top: 10px;
}
.control-btn-box .atc {
    float: left;
    margin-right: 8px;
}

/* Busy indicator (legacy spinner next to button — kept for compatibility) */
.addToBasketBusy {
    display: none;
    width: 20px;
    height: 20px;
    float: left;
}

/* ATC feedback label — fades in/out */
.atc-feedback {
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    color: #4CAF50;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 6px 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    clear: both;
}
.atc-feedback.atc-feedback-visible {
    opacity: 1;
}

/* Clear float utility */
.clearfloat {
    clear: both;
}
.floatleft {
    float: left;
}
.floatright {
    float: right;
}


/* ─── Variant Selector ──────────────────────────────────── */

.option-select {
    font-size: 12px;
    color: #564c3e;
    padding: 4px 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
}
.product-option-box {
    margin-bottom: 10px;
}


/* ─── Cart Badge ────────────────────────────────────────── */

#numOfCartItems {
    display: inline-block;
    min-width: 14px;
    text-align: center;
    font-weight: bold;
}


/* ─── Suggested Products ────────────────────────────────── */

#productsuggestion {
    position: relative;
    width: 100%;
    height: auto;
    text-align: left;
}
#productsuggestion #prodsuggestheader {
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    top: 5px;
    left: 0px;
    z-index: 2;
}
#productsuggestion.topDottedLine {
    padding-top: 5px;
    background-image: url(../../../../../graphics/horizontal-dotted-line-dot.png);
    background-repeat: repeat-x;
}

.NEW_details-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 30px;
}

.suggestedbox-item {
    position: relative;
}
#productgrid .suggestedbox-item .itembox {
    position: relative;
    width: 227px;
    height: 245px;
}
.suggestedbox-item .itembox img {
    max-width: 100%;
    height: 133px;
    width: auto;
}

.suggestedbox-item .itembox .inlineprodbox {
    width: 100%;
    height: 100%;
    position: relative;
}

.inlineprodbox {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.inlineprodbox img {
    margin-bottom: 10px;
}
.inlineprodbox .title {
    font-size: 12px;
    font-weight: 300;
    color: #564c3e;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.inlineprodbox .price {
    font-size: 12px;
    font-weight: bold;
    color: #000;
}


/* ─── More/Less Description Toggle ─────────────────────── */

.moreless {
    position: relative;
    overflow: hidden;
    transition: max-height 0.45s ease;
}
.more-or-less-control {
    color: #854516;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 6px 0 2px;
    user-select: none;
}
.more-or-less-control:hover {
    text-decoration: underline;
}


/* ─── Busy Icon ─────────────────────────────────────────── */

#gallery-busy-icon {
    text-align: center;
    padding: 10px 0;
}


/* ═══════════════════════════════════════════════════════════
   MEDIA QUERIES
   ═══════════════════════════════════════════════════════════ */

/* ─── Single product layout: collapse early ────────────── */
@media (max-width: 1000px) {
    .detailbox .NEW_product-container.flexbox {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    #productgrid.singleprod .detailbox #productdetails {
        padding-left: 0px;
    }
    #productgrid.singleprod .detailbox #productdetails #detailsborderwrap {
        padding-left: 0px;
        background-image: none;
    }

    /* Shopcontainer single collapses to column */
    .shopcontainer.single.flexrow {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .shopcontainer.single .shop-navigation-container {
        height: 35px;
        overflow: hidden;
        margin-bottom: 20px;
        pointer-events: all;
        -webkit-transition: height 250ms ease-in-out;
        -o-transition: height 250ms ease-in-out;
        -moz-transition: height 250ms ease-in-out;
        transition: height 250ms ease-in-out;
    }
    .shopcontainer.single .shopCategoryListHeader {
        position: relative;
        cursor: pointer;
        border-bottom: 1px solid #b45313;
    }
    .shopcontainer.single .shopCategoryListHeader:after {
        content: '\25BA';
        position: absolute;
        width: 16px;
        height: 16px;
        right: 0;
        top: 0;
    }
    .shop-navigation-container.open .shopCategoryListHeader:after {
        content: '\25BC';
    }
    .shop-navigation-container.open .item-navigation .rowsepout.list2 {
        background: none;
        border-bottom: 1px solid rgba(180, 83, 19, 1);
    }
}

/* ─── 2-column grid fallback ───────────────────────────── */
@media (max-width: 980px) {
    #productgrid #gallery-container {
        text-align: center;
    }
    /* The browser shows only 2 boxes per row */
    .indexitembox.dottedlines:nth-child(2n+2):after {
        background: none;
    }
}

/* ─── Suggested products stack + mobile adjustments ────── */
@media (max-width: 767px) {
    #productsuggestion {
        height: auto;
    }
    #productsuggestion .NEW_details-container.flexrow {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .suggestedbox-item.dottedlines:before {
        background-image: url(../../../../../graphics/horizontal-dotted-line-dot.png);
        background-repeat: repeat-x;
        position: absolute;
        height: 1px;
        width: 88%;
        bottom: 0;
        content: '';
        background-position: center;
        pointer-events: none;
        left: 0;
        margin: 0px 15px;
    }
    .suggestedbox-item.dottedlines:after {
        background: none;
    }
}

/* ─── 1-column grid fallback ───────────────────────────── */
@media (max-width: 723px) {
    .indexitembox.dottedlines:after {
        background: none;
    }
}

/* ─── Default shopcontainer collapse ───────────────────── */
@media (max-width: 540px) {
    .shopcontainer.flexrow {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .shop-navigation-container {
        height: 35px;
        overflow: hidden;
        margin-bottom: 20px;
        pointer-events: all;
        -webkit-transition: height 250ms ease-in-out;
        -o-transition: height 250ms ease-in-out;
        -moz-transition: height 250ms ease-in-out;
        transition: height 250ms ease-in-out;
    }
    .shopCategoryListHeader {
        position: relative;
        cursor: pointer;
        border-bottom: 1px solid #b45313;
    }
    .shopCategoryListHeader:after {
        content: '\25BA';
        position: absolute;
        width: 16px;
        height: 16px;
        right: 0;
        top: 0;
    }
}