/* =========================================================
   DAREMARK CART PAGE
   Header intentionally removed — add your existing header above.
   ========================================================= */

:root {
    --dm-navy: #1b3068;
    --dm-navy-dark: #142550;
    --dm-red: #C72C41;
    --dm-red-dark: #a92033;
    --dm-cream: #f1ece3;
    --dm-cream-light: #f7f3ec;
    --dm-paper: #fbf9f5;
    --dm-ink: #211b18;
    --dm-muted: #756d63;
    --dm-line: #d0c6b9;
    --dm-white: #ffffff;
    --dm-green: #58705d;
    --dm-shadow: 0 14px 40px rgba(33, 27, 24, 0.07);
    --dm-radius: 4px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--dm-paper);
    color: var(--dm-ink);
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

.cart-container {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
}

/* =========================================================
   PAGE HEADING
   ========================================================= */

.cart-heading {
    background:
        linear-gradient(90deg, rgba(251, 249, 245, 0.97), rgba(251, 249, 245, 0.88)),
        url("assets/images/cart-banner.jpg") center / cover;
    border-bottom: 1px solid var(--dm-line);
    padding: 48px 0 42px;
    margin-top:60px;
    /* @media (max-width: 850px) {
       margin-top: 0;
    } */
}

.cart-heading .cart-container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}

.cart-eyebrow {
    display: inline-block;
    color: var(--dm-red);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 7px;
}

.cart-heading h1 {
    color: var(--dm-navy);
    font-family: "Poppins", sans-serif;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 500;
    letter-spacing: -1.2px;
    line-height: 1.12;
}

.cart-heading p {
    color: var(--dm-muted);
    margin-top: 9px;
    max-width: 550px;
}

.continue-shopping {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--dm-navy);
    border-bottom: 1px solid var(--dm-navy);
    padding-bottom: 5px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: color .2s ease, border-color .2s ease;
}

.continue-shopping:hover {
    color: var(--dm-red);
    border-color: var(--dm-red);
}

/* =========================================================
   CART SECTION
   ========================================================= */

.cart-section {
    padding: 42px 0 80px;
}

.cart-select-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.select-all {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--dm-ink);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

.select-all input,
.item-select input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.custom-check {
    position: relative;
    display: inline-block;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    border: 1px solid #9d948a;
    border-radius: 2px;
    background: var(--dm-white);
    transition: .2s ease;
}

.select-all input:checked + .custom-check,
.item-checkbox:checked + .custom-check {
    background: var(--dm-red);
    border-color: var(--dm-red);
}

.select-all input:checked + .custom-check::after,
.item-checkbox:checked + .custom-check::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.items-count {
    color: var(--dm-muted);
    font-size: 13px;
}

/* =========================================================
   TWO COLUMN LAYOUT
   ========================================================= */

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    align-items: start;
    gap: 28px;
}

.cart-items-column {
    min-width: 0;
}

/* =========================================================
   CART ITEM
   ========================================================= */

.cart-item {
    position: relative;
    display: grid;
    grid-template-columns: 22px 132px minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    background: var(--dm-white);
    border: 1px solid var(--dm-line);
    border-radius: var(--dm-radius);
    padding: 18px;
    margin-bottom: 15px;
    box-shadow: 0 5px 20px rgba(33, 27, 24, 0.035);
    transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease;
}

.cart-item:hover {
    box-shadow: var(--dm-shadow);
}

.cart-item.removing {
    opacity: 0;
    transform: translateX(20px);
}

.item-select {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 7px;
}

.item-select::before {
    content: "";
    width: 17px;
    height: 17px;
    border: 1px solid #9d948a;
    border-radius: 2px;
    background: #fff;
    position: absolute;
    left: 19px;
    top: 25px;
    pointer-events: none;
}

.item-select:has(input:checked)::before {
    background: var(--dm-red);
    border-color: var(--dm-red);
}

.item-select:has(input:checked)::after {
    content: "";
    position: absolute;
    left: 25px;
    top: 27px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    pointer-events: none;
}

.product-image-wrap {
    position: relative;
    height: 132px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e7e1d9;
    border-radius: 4px;
    background: #faf9f6;
}

.product-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    transition: transform .3s ease;
}

.cart-item:hover .product-image-wrap img {
    transform: scale(1.04);
}

.image-fallback-icon {
    display: none;
    color: var(--dm-red);
    font-size: 28px;
}

.image-fallback .image-fallback-icon {
    display: block;
}

.product-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-top {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.product-category {
    display: block;
    color: var(--dm-red);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.6px;
    margin-bottom: 3px;
}

.product-info h2 {
    color: var(--dm-navy);
    font-family: "Poppins", sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.35;
}

.sku {
    display: block;
    color: var(--dm-muted);
    font-size: 11px;
    margin-top: 4px;
}

.remove-mobile {
    display: none;
    border: 0;
    background: transparent;
    color: var(--dm-muted);
    font-size: 17px;
}

.product-bottom {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: end;
    gap: 22px;
    margin-top: 18px;
}

.price-area,
.quantity-area,
.item-total {
    display: flex;
    flex-direction: column;
}

.unit-label,
.quantity-label,
.item-total span {
    color: var(--dm-muted);
    font-size: 10px;
    margin-bottom: 2px;
}

.price-area strong {
    color: var(--dm-red);
    font-size: 17px;
    font-weight: 600;
}

.quantity-control {
    display: flex;
    height: 34px;
    border: 1px solid var(--dm-line);
    background: #fff;
}

.qty-btn {
    width: 31px;
    border: 0;
    background: var(--dm-cream-light);
    color: var(--dm-navy);
    font-size: 17px;
    line-height: 1;
    transition: .2s ease;
}

.qty-btn:hover {
    background: var(--dm-red);
    color: #fff;
}

.quantity {
    width: 42px;
    border: 0;
    border-left: 1px solid var(--dm-line);
    border-right: 1px solid var(--dm-line);
    text-align: center;
    outline: none;
    color: var(--dm-ink);
    background: #fff;
    font-size: 13px;
    -moz-appearance: textfield;
}

.quantity::-webkit-outer-spin-button,
.quantity::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.item-total {
    min-width: 105px;
}

.item-total strong {
    color: var(--dm-navy);
    font-size: 15px;
    font-weight: 600;
}

.item-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.wishlist-btn {
    height: 32px;
    border: 1px solid #bbb2a8;
    border-radius: 3px;
    padding: 0 11px;
    color: var(--dm-muted);
    background: #fff;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    transition: .2s ease;
}

.wishlist-btn i {
    margin-right: 5px;
}

.wishlist-btn:hover {
    color: var(--dm-red);
    border-color: var(--dm-red);
}

.delete-btn {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 3px;
    color: #fff;
    background: var(--dm-red);
    transition: .2s ease;
}

.delete-btn:hover {
    background: var(--dm-red-dark);
}

/* =========================================================
   SUMMARY
   ========================================================= */

.cart-summary {
    position: sticky;
    top: 25px;
}

.summary-card {
    background: var(--dm-white);
    border: 1px solid var(--dm-line);
    padding: 25px;
    box-shadow: var(--dm-shadow);
}

.summary-heading {
    padding-bottom: 17px;
    border-bottom: 1px solid var(--dm-line);
    margin-bottom: 17px;
}

.summary-heading span {
    display: block;
    color: var(--dm-red);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    margin-bottom: 3px;
}

.summary-heading h2 {
    color: var(--dm-navy);
    font-family: "Poppins", sans-serif;
    font-size: 23px;
    font-weight: 500;
}

.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 8px 0;
    color: var(--dm-muted);
    font-size: 13px;
}

.summary-row strong {
    color: var(--dm-ink);
    font-weight: 600;
}

.shipping-value {
    color: var(--dm-green) !important;
}

.summary-divider {
    border-top: 1px dashed #aaa197;
    margin: 14px 0 13px;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.summary-total span {
    color: var(--dm-ink);
    font-size: 15px;
    font-weight: 600;
}

.summary-total strong {
    color: var(--dm-navy);
    font-family: "Poppins", sans-serif;
    font-size: 22px;
    font-weight: 600;
}

.tax-note {
    color: var(--dm-muted);
    font-size: 10px;
    line-height: 1.5;
    margin: 10px 0 17px;
}

.checkout-btn,
.quote-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    width: 100%;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    transition: .2s ease;
}

.checkout-btn {
    gap: 10px;
    color: #fff;
    background: var(--dm-red);
}

.checkout-btn:hover {
    background: var(--dm-red-dark);
    transform: translateY(-1px);
}

.quote-btn {
    color: var(--dm-white);
    background: var(--dm-navy);
    margin-top: 9px;
}

.quote-btn:hover {
    background: var(--dm-navy-dark);
}

/* =========================================================
   COUPON
   ========================================================= */

.coupon-card {
    background: var(--dm-cream-light);
    border: 1px solid var(--dm-line);
    padding: 19px;
    margin-top: 14px;
}

.coupon-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.coupon-title > i {
    color: var(--dm-red);
    font-size: 18px;
    margin-top: 3px;
}

.coupon-title h3 {
    color: var(--dm-navy);
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.coupon-title p {
    color: var(--dm-muted);
    font-size: 10px;
    margin-top: 1px;
}

.coupon-form {
    display: grid;
    grid-template-columns: 1fr 76px;
    height: 38px;
    margin-top: 13px;
}

.coupon-form input {
    min-width: 0;
    border: 1px solid var(--dm-line);
    border-right: 0;
    outline: none;
    background: #fff;
    padding: 0 11px;
    color: var(--dm-ink);
    font-size: 11px;
}

.coupon-form input:focus {
    border-color: var(--dm-red);
}

.coupon-form button {
    border: 1px solid var(--dm-red);
    color: #fff;
    background: var(--dm-red);
    font-size: 11px;
    font-weight: 700;
}

.coupon-form button:hover {
    background: var(--dm-red-dark);
}

#couponMessage {
    display: block;
    min-height: 15px;
    margin-top: 6px;
    font-size: 10px;
}

.coupon-error {
    color: #b3261e;
}

.coupon-success {
    color: var(--dm-green);
}

/* =========================================================
   SECURE NOTE
   ========================================================= */

.secure-note {
    display: flex;
    align-items: center;
    gap: 11px;
    border-top: 1px solid var(--dm-line);
    margin-top: 18px;
    padding: 15px 4px 0;
}

.secure-icon {
    display: grid;
    place-items: center;
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    border-radius: 50%;
    color: var(--dm-red);
    background: rgba(199, 44, 65, .08);
    font-size: 13px;
}

.secure-note strong {
    display: block;
    color: var(--dm-navy);
    font-size: 11px;
}

.secure-note span {
    display: block;
    color: var(--dm-muted);
    font-size: 9px;
    line-height: 1.4;
}

/* =========================================================
   EMPTY CART
   ========================================================= */

.empty-cart {
    /* display: none; */
    text-align: center;
    border: 1px dashed var(--dm-line);
    background: var(--dm-white);
    padding: 55px 20px;
}

.empty-cart.show {
    display: block;
}

.empty-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 15px;
    border-radius: 50%;
    color: var(--dm-red);
    background: rgba(199, 44, 65, .08);
    font-size: 22px;
}

.empty-cart h3 {
    color: var(--dm-navy);
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 500;
}

.empty-cart p {
    color: var(--dm-muted);
    font-size: 13px;
    margin: 5px 0 18px;
}

.primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 22px;
    color: #fff;
    background: var(--dm-red);
    font-size: 12px;
    font-weight: 700;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
    .cart-layout {
        grid-template-columns: minmax(0, 1fr) 350px;
    }

    .product-bottom {
        grid-template-columns: 1fr auto;
        row-gap: 14px;
    }

    .item-total {
        justify-self: end;
        text-align: right;
    }

    .item-actions {
        justify-self: end;
    }
}

@media (max-width: 850px) {
    .cart-container {
        width: min(100% - 30px, 700px);
    }

    .cart-heading {
        padding: 34px 0;
    }

    .cart-heading .cart-container {
        align-items: flex-start;
        flex-direction: column;
    }

    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary {
        position: static;
    }

    .summary-card {
        padding: 22px;
    }
}

@media (max-width: 620px) {
    body {
        font-size: 14px;
    }

    .cart-container {
        width: calc(100% - 24px);
    }

    .cart-heading {
        padding: 28px 0;
    }

    .cart-heading h1 {
        font-size: 31px;
    }

    .cart-heading p {
        font-size: 12px;
    }

    .continue-shopping {
        font-size: 12px;
    }

    .cart-section {
        padding: 25px 0 55px;
    }

    .cart-select-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 12px;
    }

    .cart-item {
        grid-template-columns: 1fr;
        gap: 13px;
        padding: 13px;
    }

    .item-select {
        display: none;
    }

    .item-select::before,
    .item-select::after {
        display: none;
    }

    .product-image-wrap {
        width: 100%;
        height: 180px;
    }

    .product-top {
        gap: 10px;
    }

    .product-info h2 {
        font-size: 16px;
    }

    .remove-mobile {
        display: block;
    }

    .item-actions {
        display: none;
    }

    .product-bottom {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        align-items: start;
        margin-top: 17px;
    }

    .item-total {
        justify-self: start;
        text-align: left;
    }

    .quantity-area {
        justify-self: end;
        align-items: flex-end;
    }

    .price-area strong {
        font-size: 16px;
    }

    .summary-total strong {
        font-size: 20px;
    }

    .coupon-card {
        padding: 16px;
    }
}

@media (max-width: 380px) {
    .product-image-wrap {
        height: 150px;
    }

    .product-bottom {
        grid-template-columns: 1fr;
    }

    .quantity-area {
        justify-self: start;
        align-items: flex-start;
    }

    .cart-heading h1 {
        font-size: 28px;
    }

    .summary-card {
        padding: 18px;
    }
}
.blue-bg{
    background-color:var(--dm-navy) !important;
}
.blue-bg:hover{
    background-color: var(--dm-red) !important;
}
.visibility-hidden {
    visibility: hidden;
}