.spf-container {
    background: white;
    padding: 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.11);

}

.spf-title {
    font-size: 20px;
    font-weight: 600;
    color: #000;
    margin-bottom: 20px;
}

.spf-slider-wrapper {
    position: relative;
    margin: 30px 0;
}

.spf-track {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    position: relative;
}

.spf-fill {
    height: 100%;
    border-radius: 2px;
    position: absolute;
}

.spf-handle {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    background: #333;
    border-radius: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

.spf-display-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
}

.spf-price-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.spf-label {
    font-size: 14px;
    color: #6c757d;
    font-weight: 400;
}

.spf-values {
    font-size: 14px;
    color: #000;
    font-weight: 500;
}

.spf-button {
    background: rgba(81, 142, 248, 0.20);
    color: #1976d2;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.spf-button:hover {
    background: #bbdefb;
}

/* Hidden range inputs for functionality */
/* make the whole slider slim */
.spf-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Webkit browsers (Chrome, Safari, Edge) */
.spf-input::-webkit-slider-runnable-track {
    height: 2px;
    /* thin line */
    background: #000;
    /* black line */
    border-radius: 1px;
}

.spf-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 5px;
    /* small square/rectangle handle */
    height: 20px;
    background: #000;
    cursor: pointer;
    pointer-events: all;
    margin-top: -9px;
    /* aligns thumb with thin track */
}

/* Firefox */
.spf-input::-moz-range-track {
    height: 2px;
    background: #000;
    border-radius: 1px;
}

.spf-input::-moz-range-thumb {
    width: 10px;
    height: 20px;
    background: #000;
    cursor: pointer;
    border: none;
}

.star-count {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    margin: 13px 0;
}

.rept-price-original {
    font-size: 22.093px !important;
}

.cart-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    /* space between qty box and button */
}

.quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    width: fit-content;
}
.qty-btn {
    width: 32px;
    height: 40px;
    border: none;
    background: #fff;
    font-size: 18px;
    cursor: pointer;
}

.qty-input {
    width: 40px;
    height: 40px;
    border: none;
    text-align: center;
    font-size: 16px;
    outline: none;
    background: #fff;
    border-left: 1px solid #dedadabd;
    border-right: 1px solid #dedadabd;
    color: #B2B3B4;
}

.add-to-cart {
    flex: 1;
    /* button takes full remaining width */
    background: #000;
    color: #fff;
    font-weight: 600;
    border: none;
    padding: 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease;
    font-size: 14px;
}

.add-to-cart:hover {
    background: #333;
}

.color-icon-margin {
    margin: -17px 0 1px;
}

.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    background: #dfdfdf;
    border-radius: 30px;
    text-decoration: none;
    font-size: 14px;
    color: black;
    transition: 0.3s ease;
    height: 40px;
    width: 205px;
}

.whatsapp-btn img {
    height: 50px;
    margin-left: -2px;
    margin-top: 0;
}

.whatsapp-btn:hover {
    background: #e2e2e2;
    color: #000;
}

.contact-wtsp {
    display: flex;
    gap: 1.5rem;
    margin: 1.5rem 0;
    align-items: center;
}

.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
    z-index: 999;
}

/* Sidebar */
.selector-items {
    width: 44%;
}

.cart-sidebar {
    position: fixed;
    top: 0;
    right: -497px;
    width: 464px;

    background: #fff;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    transition: right 0.3s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.cart-sidebar.active {
    right: 0;
}

.cart-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Header */
.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #eee;
}

.closs-bar-top {
    color: #7D6F6F;
    font-size: 17px;
    display: flex;
    gap: 0.2rem;
    align-items: center;
}

.cart-close {
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    font-weight: 200;
    color: #7D6F6F;
}

/* Items */
.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.cart-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 2rem;
}

.cart-item img {
    width: 60px;
    margin-right: 12px;
}

.cart-item-info {
    flex: 1;
}

.remove-item {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    font-weight: 200;
    color: #7D6F6F;
}

/* Footer */
.cart-footer {
    border-top: 1px solid #eee;
    padding: 16px;
}

.view-cart {
    display: block;
    width: 100%;
    padding: 14px 10px;
    background: #E1EBFF;
    color: #1C61E9;
    border: none;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.view-cart:hover {
    background: #d2e0ff;
    color: #0d47a1;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(28, 97, 233, 0.2);
}

.checkout {
    display: block;
    width: 100%;
    padding: 14px 10px;
    background: #000;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.checkout:hover {
    background: #333;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.cart-item-info h4 {
    color: #4B4B4B;
    font-size: 16.3px;
    font-weight: 500;
    margin: 0;

}

.cart-sku {
    color: #4B4B4B;
    font-size: 19.3px;
    font-weight: 500;
    margin: 10px 0;
}

.cart-sku span {
    color: #7D6F6F;
}

.cart-price-line {
    font-size: 14.5px;
}

.cart-qty,
.cart-multiply {
    color: #D0D0D0;
    font-weight: 400;
}

.cart-price {
    color: #4B4B4B;
    font-weight: 700;
}

.subtotal {
    color: #9D9393;
    font-size: 20.3px;
    font-style: normal;
    font-weight: 500;
    line-height: 29.6px;
    /* 145.813% */
}

.subtotal span {
    color: #000;
    font-weight: 600;
}

.checkout-section {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    background: #F4F3DE;
    padding: 4rem 0;
    justify-content: center;
    gap: 1rem;
}


.checkout-items {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.checkout-step {
    color: #767676;
    text-align: center;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0;
}


.checkout-step.active {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    color: #242424;
}

.empty-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
        margin-bottom: 10rem;
}

.empty-cart h2 {
    color: #242424;
    text-align: center;
    font-size: 44px;
    font-style: normal;
    font-weight: 500;
    margin: 0;
}

.empty-cart p {
    color: #767676;
    text-align: center;
    font-size: 15.5px;
    font-weight: 400;
    width: 30%;
    margin: 17px 0px;
}

.empty-cart button {
    border-radius: 5px;
    background: #000;
    padding: 13.59px 27.639px;
    font-size: 14px;
    font-weight: 400;
    border: none;
    color: white;

}


.whishistt{
    display: flex !important;
}







.shopping-cart-container {

    margin: 0 auto;
    display: flex;
    gap: 30px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10rem;
      align-items: flex-start;
}

.cart-items-section {
    flex: 2;
    padding: 30px;
    background: white;
    border-radius: 11.887px;


}

.border-cart {
    padding: 25px 0px 23px;
    border-top: 2px solid #2a2a2a69;
    border-bottom: 2px solid #2a2a2a69;
    width:150%;
}

.summary-boder {
    padding: 10px;
    border: 1px solid black;
    border-radius: 8px;
}

.cart-summary-sidebar {
    flex: 1;
 
    padding: 30px;
    background: white;
    border-radius: 11.887px;
}

.cart-table-header {
    display: grid;
    grid-template-columns: 4fr 1fr 1fr 1fr;
    padding-bottom: 20px;
    border-bottom: 2px solid #e5e5e5;
    margin-bottom: 20px;
}

.cart-table-header span {
    font-weight: 600;
    color: #242424;
    text-transform: uppercase;
    font-size: 15px;
}

.cart-product-row {
    display: grid;
    grid-template-columns: 4fr 1fr 1fr 1fr;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #e5e5e5;
    align-items: center;
}

.product-info-wrapper {
    display: flex;
    gap: 15px;
    align-items: center;
}

.product-thumbnail {
    width: 60px;
    height: 60px;
    background: #2c3e50;
    border-radius: 4px;
    flex-shrink: 0;
}

.product-thumbnail.green-variant {
    background: #34495e;
}

.product-meta h3 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
    color: #333;
    line-height: 1.4;
}

.product-meta .product-sku {
    font-size: 12px;
    color: #666;
}

.item-remove-button {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 18px;
    margin-right: 10px;
}

.item-remove-button:hover {
    color: #e74c3c;
}

.item-price-display {
    font-weight: 600;
    color: #333;
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qty-adjust-button {
    background: #f8f8f8;
    border: 1px solid #ddd;
    width: 30px;
    height: 30px;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-adjust-button:hover {
    background: #e8e8e8;
}

.qty-number-input {
    width: 40px;
    text-align: center;
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 3px;
}

.item-subtotal-amount {
    font-weight: 600;
    color: #333;
}

.coupon-application-section {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}


.coupon-code-input {
    font-family: 'Poppins', sans-serif;
    padding: 12px 25px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    color: #757575;
}

.coupon-apply-button {
    background: #000;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    white-space: nowrap;
}

.coupon-apply-button:hover {
    background: #555;
}

.cart-totals-title {
    font-size: 23px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #333;
    margin-top: -9px;
    margin-bottom: 30px;
}

.summary-calculation-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    color: #242424;
}

.summary-calculation-row.final-total {
    font-weight: 600;
    font-size: 18px;
    color: #333;
    border-top: 1px solid #e5e5e5;
    padding-top: 15px;
}

.proceed-checkout-button {
    width: 100%;
    background: #000;
    color: white;
    border: none;
    padding: 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.proceed-checkout-button:hover {
    background: #555;
}

.paylink-payment-button {
    width: 100%;
    background: #00D66F;
    color: white;
    border: none;
    padding: 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.paylink-payment-button:hover {
    background: #00c299;
}

.corporate-quote-info {
    background: #e3f2fd;
    padding: 15px;
    border-radius: 4px;
    font-size: 14px;
    color: #1976d2;
    line-height: 1.4;
}

.info-indicator-icon {
    display: inline-block;
    background: #2196f3;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    margin-right: 8px;
}

.image-product-flex {
    display: flex;
    gap: 1rem;
}

.tax-test {
    color: #000;
}








.order-success-page-wrapper {

    margin: 0 auto;

    border-radius: 8px;
    overflow: hidden;
  
}

.order-received-header-box {
    
    padding: 30px;
    text-align: center;
    border: 2.054px dashed #7A9C59;;
    margin: 30px;
    border-radius: 8px;
}

.order-received-thank-message {
    font-size: 24.242px;
    color: #7A9C59;
    margin: 0;
    font-weight: 600;
}

.order-information-summary-area {
    padding: 0 30px 20px;
}

.order-metadata-grid-layout {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 30px;
    font-size: 14px;
}

.order-meta-field-wrapper {
    text-align: center;
    border-left: 1px solid rgba(0, 0, 0, 0.11);
    padding-left: 30px;
     min-height: 93px;
}
.order-meta-field-wrapper:first-child {
    border-left: none;
}

.order-field-label-text {
    color: #767676;
    margin-bottom: 5px;
    font-size: 16.256px;
    font-weight: 400;
}

.order-field-value-display {
    color: #242424;
    font-size: 16.256px;
    font-weight: 600;
}

.cash-payment-instruction-note {
    font-size: 16.256px;
    color: #767676;
    margin-bottom: 30px;
}

.order-breakdown-section-title {
    font-size: 28.81px;
    font-weight: 500;
    margin-bottom: 25px;
    color: #242424;
}

.purchased-items-display-table {
    width: 100%;
    margin-bottom: 30px;
}

.items-table-column-headers {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.11);
    margin-bottom: 20px;
}

.product-column-header-label {
 
    text-transform: uppercase;
    color: #242424;
font-size: 18.54px;
font-style: normal;
font-weight: 500;
text-transform: uppercase;
}

.total-column-header-label {
    font-weight: 500;
    font-size: 18.54px;
    text-transform: uppercase;
    color: #242424;
}

.purchased-item-details-row {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1.027px solid rgba(0, 0, 0, 0.11);
}

.item-description-column {
    flex: 1;
}

.purchased-item-title {
    font-size: 14px;
    color: #333;
width:70%;
    line-height: 1.4;

font-size: 17.256px;
font-style: normal;
font-weight: 500;

}

.item-quantity-indicator {
    font-size: 13px;
    color: #666;
    margin-bottom: 3px;
}



.item-sku-reference span{
    color:#767676;
    font-weight: 400;

}
.item-sku-reference {
      font-size: 14.331px;
    color: #333;
    margin-bottom: 3px;
    font-weight: 600;
}

.item-line-total-price {
    font-weight: 600;
    color: #000;
    font-size: 16px;
}

.order-cost-breakdown-section {
    margin-top: -27px;
}

.cost-calculation-row {
    display: flex;
    justify-content: space-between;
    padding: 19px 0;
    font-size: 14px;
    border-bottom: 1.027px solid rgba(0, 0, 0, 0.11);
}

.cost-category-label {
    color: #242424;

font-size: 16.256px;
font-style: normal;
font-weight: 500;
line-height: 26.959px; /* 140% */
}

.cost-amount-value {
    font-weight: 600;
    color: #000;
        font-size: 16px;
}

.shipping-method-annotation {


    margin-left: 10px;

    color: #767676;

font-size: 14.405px;

font-weight: 400;

}

.grand-total-summary-row {
    border-bottom: 1.027px solid rgba(0, 0, 0, 0.11);
    margin-top: 10px;
    padding-top: 15px;
    font-weight: 600;
    font-size: 16px;
}

.customer-addresses-display-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 30px;
     margin-bottom: 6rem;
}

.address-details-block h3 {
    font-size: 24.81px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #242424;
}

.address-text-line {
    font-size: 16.182px;
    color: #767676;
    margin-bottom: 3px;
    line-height: 1.8;
}

.payment-type-annotation {
    color: #767676;
    font-size: 16.256px;
    font-weight: 400;

}



.success-padding{
    padding: 10px 280px;
}

.padding-nothing{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
        
}

.checkout-form-input::-webkit-inner-spin-button,
.checkout-form-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.checkout-form-input[type="number"] {
    -moz-appearance: textfield;
}

@media(max-width:1050px){
    .padding-nothing{
  position: inherit;
    }

}

@media(max-width:433px){
    .proceed-checkout-button{
            padding: 13px;
            font-size: 14px;
    }
    .paylink-payment-button {
          padding: 13px;
          font-size: 14px;
    }
    .paylink-payment-button img{
            width: 40px;
    }
    .corporate-quote-info {

 font-size: 12px;
}
}

@media(max-width:503px){
    .cart-sidebar {
        width: 97%;
    }
    .cart-item {
        gap:1rem;
    }
}

@media(max-width:379px){
    .contact-wtsp{
        flex-direction: column;
            align-items: start;
    }
}

@media (max-width: 411px) {
    .whatsapp-btn img {
        height: 32px !important;
        margin-left:-16px;
    }
}
@media(max-width:431px){
    .whatsapp-btn img{
        height: 42px;
    }
    .whatsapp-btn{
        font-size: 11px;
        padding: 0px 16px;
                white-space: nowrap;
    }
    .rpet-btn-wishlist{
            white-space: nowrap;
                font-size: 13.43px;
    }
}

@media (max-width: 1024px) {
    .success-padding {
        padding: 10px 100px; /* tablets */
    }
}

@media (max-width: 768px) {
    .success-padding {
        padding: 10px 40px; /* small tablets & mobiles */
    }
}

@media (max-width: 480px) {
    .success-padding {
        padding: 10px 20px; /* small phones */
    }
}

@media (max-width: 1024px) {
    .order-metadata-grid-layout {
        grid-template-columns: repeat(3, 1fr);
    }
    .order-meta-field-wrapper{
        border:none;
    }
}

@media (max-width: 768px) {
    .order-metadata-grid-layout {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .order-metadata-grid-layout {
        grid-template-columns: 1fr;
            gap: 0px;
    }
    
}

@media(max-width:500px){
    .customer-addresses-display-area{
        display: flow;
    }
}

@media(max-width:467px){
    .purchased-item-title{
        font-size: 15.256px;
    }
    .item-sku-reference {
        font-size: 12.331px;
    }
    .item-quantity-indicator {
            font-size: 12px;
    }
    .cost-amount-value{
            display: flex;
    flex-direction: column;
    align-items: center;
    }
    .shipping-method-annotation{
        margin-left: 0;
    }
    .payment-type-annotation {
            font-size: 14.256px;
    }
    .purchased-item-title {
        width: 77%;
    }
}

@media (max-width: 587px) {
    .cart-items-section {
        overflow-x: auto;
        /* enable horizontal scroll */
        -webkit-overflow-scrolling: touch;
        /* smooth scroll on iOS */
    }

    .cart-items-section .cart-table-header,
    .cart-items-section .cart-product-row {
   
        /* keep row items in a single line */
        min-width: 600px;
        /* ensure content doesn’t wrap */
    }
}


@media(max-width:911px) {
    .cart-table-header {
        gap: 3rem;
    }
}

@media(max-width:739px) {
    .image-product-flex {
        flex-direction: column;
    }

    .cart-product-row {
        align-items: start;
    }
}

@media(max-width:601px) {
    .item-price-display {
        font-size: 14px;
    }

    .qty-btn {
        width: 18px;
        font-size: 11px;
    }

    .cart-product-row {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }

    .cart-table-header {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

@media(max-width:901px) {
    .product-meta h3 {
        font-size: 13px;
    }

    .quantity-selector {
        overflow: visible;
    }

    .cart-table-header {
        gap: 1rem;
    }
}

@media(max-width:643px) {
    .qty-btn {
        width: 24px;
        font-size: 15px;
    }

    .qty-input {
        font-size: 15px;
    }

    .item-subtotal-amount {
        font-size: 15px;
    }
}



@media(max-width:809px) {
    .product-info-wrapper {
        gap: 0px;
    }

    .qty-input {
        width: 20px;
    }
}


@media (max-width: 1246px) {
    .shopping-cart-container {
        flex-direction: column;
    }
}



@media (max-width: 1308px) {
    .checkout-section {
        margin-top: 8rem;
    }

    .empty-cart p {
        width: 50%;
    }

}

@media (max-width: 795px) {
    .empty-cart p {
        width: 90%;
    }
}

@media(max-width:623px) {
    .checkout-step {
        font-size: 17px;
    }
}

@media(max-width:505px) {
    .checkout-step {
        font-size: 14px;
    }

    .empty-cart h2 {
        font-size: 40px;
    }
}

@media(max-width:443px) {
    .checkout-section {
        flex-direction: column;
    }

    .checkout-step {
        font-size: 19px;
    }
}
