/* Layout */
.shop-navbar { border-radius: 0; border: 0; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.shop-logo { height: 24px; margin-top: -4px; margin-right: 6px; display: inline-block; }
.shop-container { padding-top: 80px; padding-bottom: 30px; }
.shop-page-title { margin: 0 0 10px; }

/* Full width override for themes that clamp width */
.shop-fullwidth .main-container,
.shop-fullwidth .page-content,
.shop-fullwidth .container,
.shop-fullwidth .container-lg,
.shop-fullwidth .container-xl {
    max-width: 100% !important;
    width: 100% !important;
}

/* Cards */
.product-card {
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 18px;
    background: #fff;
    transition: box-shadow .15s ease;
}
.product-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,.06); }
.product-thumb {
    width: 100%; height: 180px; background-size: cover; background-position: center;
    background-color: #f7f7f7; border-radius: 4px;
    margin-bottom: 10px;
}
.product-title { margin: 8px 0 6px; font-weight: 600; }
.product-meta { font-size: 12px; color: #777; margin-bottom: 8px; min-height: 18px; }
.product-price { font-weight: 700; color: #222; }
.product-desc { min-height: 38px; color: #555; }

/* Tables on checkout */
.table-condensed th, .table-condensed td { padding: 8px; }


.navbar-form .form-control {
    width: 200px;
}

/* 15px indentation */
#sidebar .submenu-tight { margin-left: 15px !important; padding-left: 0 !important; }
#sidebar .submenu-tight .nav-link { padding-left: 12px !important; }

/* Caret that rotates when open */
#sidebar .shop-node > .nav-link { position: relative; }
#sidebar .shop-node > .nav-link::after {
    content: "\f107"; /* fa-angle-down */
    font-family: "FontAwesome";
    position: absolute;
    right: 10px;
    transition: transform .2s ease;
}
#sidebar .shop-node.open > .nav-link::after { transform: rotate(180deg); }

/* Show/hide without ACE */
#sidebar .shop-node > .submenu { display: none; }
#sidebar .shop-node.open > .submenu { display: block; }


.product-thumb {
    width: 100%;
    height: 180px; /* or whatever size you want */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 4px;
    margin-bottom: 10px;
}

.product-media {
    position: relative;
    width: 100%;
    padding-top: 100%; /* square aspect ratio; change to 75% for 4:3, 56.25% for 16:9 */
    overflow: hidden;
    border-radius: 4px;
    background: #f7f7f7;
    margin-bottom: 10px;
}

.product-media img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover; /* fills the box, cropping if needed */
}

/* Constrain product page images */
.product-image {
    max-width: 100%;     /* don’t overflow the left column */
    height: auto;        /* keep natural aspect ratio */
    display: block;
    margin: 0 auto 15px; /* center & spacing */
    object-fit: contain; /* Safari/modern browsers: fit inside box */
}



/* Product page image container */
.product-image-container {
    width: 100%;
    max-height: 400px;       /* keeps image from blowing into form */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;        /* anything too tall is clipped */
    background: #f8f8f8;
    border-radius: 4px;
    margin-bottom: 15px;
}

/* Scale product image inside container */
.product-image {
    max-width: 100%;         /* never exceed column width */
    max-height: 100%;        /* never exceed 400px high */
    height: auto;
    width: auto;
    object-fit: contain;     /* shrink proportionally, no distortion */
    display: block;
}