/* Cleaned main css
   - Removed empty / unused rules
   - Fixed typos and invalid selectors
   - Removed redundant overrides of Bootstrap utility classes
*/

/* Color tokens */
:root {
    --primary-bg-color: #F9F8F6;
    --secondary-bg-color: #EFE9E3;
    --primary-color: #111844;
    --primary-txt-color: #F9F5F0;
    --secondary-txt-color: #222222;
    --secondary-color: #7288AE;
    --button-good-color: #7288AE;
    --button-buy-color: #316C70;
}

/* Primary button tweaks */
.btn-primary {
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.btn-primary:hover {
    transform: scale(1.02);
}

/* Card background */
div.background_card {
    background-color: var(--secondary-bg-color);
}

span.price_style {
    font-size: xx-large;
    margin-bottom: 5%;
    font-family: 'MS Gothic';
}

/* Discount badge */
.discountdBadge {
    border-left: 0.6rem solid transparent;
    color: #fff;
    background: red;
    text-align: center;
    border-radius: 30px;
    color: var(--secondary-txt-color);
    padding: 5px 10px;
    font-size: 20px;
    display: inline-block;
    bottom: 30px;
    position: relative;
}

/* Media and structure */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
    article {
        columns: 1;
    }
    html {
        font-size: 16px;
    }
    #cart-content div.cart-image {
        width: 138px;
        min-width: 138px;
    }

    .desktop-img-header {
        display: none !important;
        width: 0;
    }
    .desktop-img {
        width: 210px;
        display: inline-block !important;
    }
}

@media (min-width: 1200px) {
    div.d-xl-flex {
        display: flex !important;
    }

    div.p-xl-2 {
        padding: 0.5rem !important;
    }
    div.mb-xl-0 {
        margin-bottom: 0 !important;
    }
    div.col-xl-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
}

main {
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

/* Fixed selectors: footer is a class on <footer> */
.footer_shop {
    position: absolute;
    height: 100px;
    bottom: 0;
}
.footer_line {
    line-height: 20px;
}

/* Backgrounds and colors */
div.bg-white {
    background-color: var(--secondary-bg-color);
}
div.bg-soft {
    background-color: var(--primary-bg-color);
}
div.bg-blue {
    background-color: var(--primary-bg-color);
    color: var(--primary-txt-color);
}
div.bg-green {
    background-color: #255255;
}
div.bg-lighterBlue {
    background-color: #EBF4FF;
}

/* Panels and containers */
p.productDetailHeader {
    background-color: var(--primary-bg-color);
    color: var(--secondary-txt-color);
    font-family: 'Bradley Hand', cursive;
}

div.mainHeaderColor {
    background-color: var(--primary-bg-color);
}

div.mainBorderStyle {
    border-color: rgb(153,217,234);
    border-radius: 1rem;
    border-style: solid;
    background-color: var(--primary-bg-color);
    padding: 0.3rem;
}

div.colProductDetails {
    border-radius: 5px;
    border-color: rgb(153,217,234);
    border-style: solid;
    border-width: 5px;
}

div.CardRow {
    border-color: rgb(153,217,234);
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
    border-radius: 5px;
    border-style: solid;
    border-width: 5px;
}

div.Terms {
    background-color: var(--primary-bg-color);
}

/* Buttons: focus outline */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Buy buttons used in layout */
button.btn-buy {
    color: var(--primary-txt-color);
    background-color: var(--button-buy-color);
    font-size: x-large;
    border-color: white;
    border-style: solid;
}

a.btn-buy {
    color: var(--primary-txt-color);
    background-color: var(--button-buy-color);
    font-size: larger;
    border-color: white;
    border-style: solid;
}

/* Small nav button */
button.navButton {
    background-color: var(--button-good-color);
}

/* Hide dropdown caret to use icon only */
.dropdown-toggle::after {
    display: none;
}

/* Fixed font-family syntax and styles for menu links */
a.btn-white {
    color: var(--secondary-txt-color);
    display: flex;
    border-radius: 10px;
    border-color: rgb(153,217,234);
    border-style: solid;
    height: 60px;
    border-width: 5px;
    background-color: white;
    font-family: 'MS Gothic';
    font-size: x-large;
    align-content: center;
}
a.btn-white:hover {
    background: rgb(153,217,234);
    color: var(--primary-txt-color);
}

/* Cart buttons and badge */
button.btn-cart {
    background: #EBF4FF;
    width: 60px;
    height: 40px;
    border-radius: 10px;
    border: none;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}
button.btn-cart:before {
    content: attr(data-count);
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    display: block;
    border-radius: 50%;
    background: #FFC94B;
    border: 1px solid #FFF;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    color: var(--primary-txt-color);
    position: absolute;
    top: -7px;
    left: -7px;
}

button.btn-cart-striped {
    background: #EBF4FF;
    width: 60px;
    height: 40px;
    border-radius: 10px;
    border: none;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

button.badge-bottom-left:before {
    top: auto;
    bottom: -7px;
}

/* Lists, dropdowns and navigations */
ul {
    margin-top: 0.5rem;
    list-style-type: none;
}
li {
    margin-bottom: 0.5rem;
}

/* Link color helper */
a.blackText {
    color: var(--secondary-txt-color);
}
a.blackText:hover {
    color: var(--secondary-txt-color);
}

/* Headings with decorative font */
h1.topText {
    font-family: 'Bradley Hand', cursive;
    color: var(--primary-txt-color);
}
h2.topText, h3.topText {
    margin-left: 10%;
    font-family: 'Bradley Hand', cursive;
    color: #003366;
}
h1.AboutText, h2.AboutText, h3.AboutText, h4.AboutText {
    font-family: 'Bradley Hand', cursive;
    color: var(--secondary-txt-color);
}

/* Alerts */
div.TempAlert {
    background-color: var(--primary-bg-color);
    color: #783F8E;
    width: 50%;
    height: 2%;
    text-align: center;
    font-size: xx-large;
    margin-left: 25%;
    margin-right: 25%;
    align-self: center;
}

/* Business card */
div.CardBussiness {
    margin-top: 1%;
    margin-right: 0.5%;
}

/* Cart badge */
p.cartBadge {
    border-radius: 200px;
    border-color: #BADFE7;
    border-style: dashed;
    border-width: 3px;
    background-color: var(--primary-bg-color);
    text-align: center;
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: large;
}

/* Product layout */
div.productRow {
    background-color: var(--primary-bg-color);
}
div.productCol {
    margin-left: 3%;
    margin-top: 1%;
}

span.bg-discount {
    color: var(--primary-txt-color);
    background-color: rgb(153,217,234);
    padding-left: 0.5%;
    padding-right: 0.5%;
    align-content: center;
}
span.bg-normal {
    color: var(--secondary-txt-color);
    background-color: var(--primary-bg-color);
    padding-left: 0.5%;
    padding-right: 0.5%;
    align-content: center;
}

td.popular {
    border-radius: 10px;
    color: var(--secondary-txt-color);
    background-color: var(--primary-bg-color);
    font-size: larger;
    border-color: white;
    border-style: solid;
}

/* Detail text */
p.detailTitle {
    font-size: x-large;
}
p.detailText,
span.detailText {
    border-top: dashed;
    border-color: #BADFE7;
    font-size: larger;
}

img.inventoryIcon {
    width: 40px;
    height: 40px;
}

mark.markColor {
    background-color: var(--primary-bg-color);
}

div.letter {
    padding: 1%;
    text-align: center;
    border-left: ridge;
    background-color: var(--primary-bg-color);
}

/* SVG / icons */
#cart-header svg {
    stroke-width: 4px;
    stroke: white;
}
svg.feather {
    stroke-width: 3;
    width: 14px;
    height: 14px;
}

/* Cart header */
h4.header {
    font-weight: 600;
    margin-top: 12px;
    padding-left: 5px;
    display: inline-block;
}
div.cart-header {
    position: sticky;
    top: 0;
    background-color: var(--primary-bg-color);
    color: var(--secondary-txt-color);
    z-index: 6;
    padding-left: 12px;
    padding-right: 12px;
}
div.cart-item {
    padding: 15px 12px;
    position: relative;
    border-bottom: 1px solid #ccc;
    background-color: var(--primary-bg-color);
    margin-bottom: 12px;
}

/* Utility: kept for specific cart layout (not removing Bootstrap utilities) */
.cart-item-container .cart-adjust-button-container {
    max-width: 138px;
}
#cart-content input[type=number] {
    width: 45px;
    font-size: 16px;
    text-align: center;
    margin: 0 5px;
}
input.just-number-input {
    text-align: center;
}
#cart-content .campaign-price {
    color: #f00000;
}
#cart-content .ord-price {
    color: #626262;
    text-decoration: line-through;
    font-size: 12px;
}
#cart-content .row-sum {
    font-weight: bold;
    display: inline-block;
    font-size: 16px;
}

div.text-end {
    text-align: right !important;
}

div.cart-adjust-button-container {
    display: inline-flex;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    max-height: 50px;
}

#cart-content div.cart-image {
    background-color: var(--primary-bg-color);
    width: 75px;
    height: 75px;
    text-align: center;
    line-height: 70px;
    display: block;
    border: 0;
}
#cart-content .img, svg {
    vertical-align: middle;
}
div.cart-image img {
    height: 70px;
    max-width: 70px;
    object-fit: contain;
}
div.cart-product-text {
    position: relative;
    margin-left: 10px;
    margin-bottom: 0;
    margin-right: 20px;
}

div.cart-offcanvas {
    min-width: 20%;
    max-width: 90%;
}
div.cart-container {
    overflow: auto;
}
div.ShoppingBagRows {
    font-size: medium;
    background-color: white;
}
div.ShoppingBagFooter {
    font-size: larger;
    background-color: var(--primary-bg-color);
}

/* cart width helpers */
.cart_w10 { max-width: 10%; }
.cart_w20 { max-width: 20%; }
.cart_w30 { max-width: 30%; }
.cart_w40 { max-width: 40%; }
.cart_w45 { max-width: 45%; }
.cart_w60 { max-width: 60%; }
.cart_w70 { max-width: 70%; }
.cart_w80 { max-width: 80%; }

.cart_row_border {
    border-block-color: rgb(153,217,234);
    border-bottom: dashed;
    border-width: thin;
}

/* Responsive body color rules */
@media screen and (min-width: 768px) {
    body {
        background-color: var(--primary-bg-color);
        color: var(--secondary-txt-color);
    }
}
@media screen and (min-width: 992px) {
    body {
        background-color: var(--primary-bg-color);
        color: black;
    }
}

/* Carousel controls */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 2px solid black;
    background-color: rgb(153,217,234);
    align-items: center;
    border-style: solid;
    cursor: pointer;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    transition: background-color 0.3s ease;
    z-index: 10;
}
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
    left: 0;
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
    right: 0;
}

/* Angled/rotated badge */
.angledBadge {
    border-left: 0.6rem solid transparent;
    transform: rotate(25deg);
    position: absolute;
    right: 110px;
    top: 20px;
    background: red;
    text-align: center;
    border-radius: 30px;
    color: white;
    padding: 5px 10px;
    font-size: 20px;
}
.badgeText {
    margin-top: -1.7rem;
}

/* Carousel layout (multi-carousel) */
.heading { display: block; text-align: center; }
.multi-carousel-container {
    cursor: grab;
    margin: 0 auto;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}
.multi-carousel-container.dragging,
#multiCarousel.dragging { cursor: grabbing; }
.multi-carousel-inner { display: flex; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.multi-carousel-item,
.clone {
    box-sizing: border-box;
    flex: 0 0 25%;
    padding: 0 5px;
    position: relative;
}
.multi-carousel-control-prev:hover,
.multi-carousel-control-next:hover { background-color: rgba(0, 0, 0, 0.7); }

/* Image container with dynamic height */
.img-container {
    border-radius: 1.5rem;
    height: var(--carousel-height, 80vh);
    overflow: hidden;
    position: relative;
}
.img-container img,
#carouselInner img {
    height: 100%;
    object-fit: contain;
    object-position: top;
    pointer-events: none;
    user-drag: none;
    width: 100%;
    -webkit-user-drag: none;
    transition: transform 0.3s ease;
}
.img-container:hover img { transform: translateZ(0) scale(1.02); }

/* Item number styling */
.item-number {
    align-items: center;
    background-color: var(--primary-bg-color);
    border-radius: 50%;
    display: inline-flex;
    font-size: 120%;
    font-weight: bold;
    height: 35px;
    justify-content: center;
    left: 1rem;
    position: absolute;
    top: 1rem;
    width: 35px;
    z-index: 2;
    isolation: isolate;
}

/* Carousel cursor */
#multiCarousel { cursor: grab; touch-action: pan-y; }
#multiCarousel.dragging { user-select: none; -webkit-user-select: none; }

/* Mobile: one item per slide */
@media (max-width: 45em) {
    .multi-carousel-item,
    .clone { flex: 0 0 100%; }
}