/* my-php-website/assets/style.css (সম্পূর্ণ এবং চূড়ান্ত কোড) */



/* =================================================================

   Global Styles

   ================================================================= */

:root {

    --primary-color: #007bff;

    --secondary-color: #28a745;

    --dark-color: #343a40;

    --light-color: #f8f9fa;

    --border-color: #dee2e6;

    --text-color: #495057;

    --footer-bg: #232f3e;

    --footer-text-color: #dddddd;

}



body {

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    margin: 0;

    background-color: #fff;

    color: var(--text-color);

    line-height: 1.6;

    display: flex;

    flex-direction: column;

    min-height: 100vh;

    overflow-x: hidden; /* মোবাইল ডিভাইসে আনুভূমিক স্ক্রলবার প্রতিরোধ করতে */

}



main {

    flex-grow: 1;

    padding-top: 20px;

}



.container {

    width: 100%;

    max-width: 1600px;

    margin: 0 auto;

    padding: 0 15px;

    box-sizing: border-box;

}



a {

    text-decoration: none;

    color: var(--primary-color);

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



/* =================================================================

   Homepage Sections

   ================================================================= */



/* =================================================================

   AJAX পেজ লোডার

   ================================================================= */

.loader-wrapper {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(255, 255, 255, 0.8);

    z-index: 9999;

    display: flex;

    justify-content: center;

    align-items: center;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: opacity 0.3s ease, visibility 0.3s ease;

}

.loader-wrapper.show {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}

.loader-spinner {

    width: 50px;

    height: 50px;

    border: 5px solid #f3f3f3; /* Light grey */

    border-top: 5px solid #28a745; /* Green */

    border-radius: 50%;

    animation: spin 1s linear infinite;

}

@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}





/* =================================================================

   ক্যাটাগরি ক্যাটালগ সেকশন

   ================================================================= */

.category-catalog-section {

    margin-bottom: 40px;

}



.section-header {

    display: flex;

    justify-content: space-between;

    align-items: baseline;

    border-bottom: 2px solid var(--primary-color);

    padding-bottom: 5px;

    margin-bottom: 15px;

}



.section-header h4 {

    margin: 0;

    font-size: 0.813rem;

}



.category-catalog-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

}



.category-catalog-item {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 12px 5px;

    border: 1px solid var(--border-color);

    border-radius: 8px;

    text-align: center;

    font-size: 0.8rem;

    font-weight: 500;

    color: var(--text-color);

    transition: all 0.3s ease;

}



.category-catalog-item:hover {

    background-color: var(--light-color);

    border-color: var(--primary-color);

    color: var(--primary-color);

}



/* =================================================================

   ক্যাটাগরি পেজ এবং প্রোডাক্ট গ্রিড

   ================================================================= */

.product-category-section {

    margin-bottom: 40px;

}

.product-category-section .section-header h2 {

    font-size: 0.813rem;

    font-weight: 600;

    margin: 0;

}

.product-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;

}

.product-card {

    border: 1px solid #f0f0f0;

    border-radius: 8px;

    background: #fff;

    overflow: hidden;

    position: relative;

    transition: box-shadow 0.3s;

}

.product-card:hover {

    box-shadow: 0 8px 25px rgba(0,0,0,0.1);

}

.product-image-wrapper {

    position: relative;

    overflow: hidden;

}

.product-image {

    width: 100%;

    aspect-ratio: 1 / 1.05;

}

.product-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.product-info {

    padding: 12px 15px;

}

.product-category {

    font-size: 0.8rem;

    color: #888;

    text-transform: uppercase;

    margin-bottom: 8px;

}

.product-name-link {

    text-decoration: none;

}

.product-name {

    font-size: 0.9rem;

    font-weight: 400;

    color: var(--dark-color);

    line-height: 1.4;

    height: 2.5em;

    margin: 0 0 8px 0;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

}

.product-price-container {

    display: flex;

    align-items: center;

    gap: 10px;

}

.product-price {

    font-size: 1.25rem;

    font-weight: bold;

    color: var(--primary-color);

}

.product-badge {

    position: absolute;

    top: 15px;

    left: 15px;

    background-color: var(--secondary-color);

    color: white;

    padding: 5px 10px;

    font-size: 0.8rem;

    font-weight: bold;

    border-radius: 4px;

    z-index: 2;

}

.product-actions {

    position: absolute;

    top: 15px;

    right: -50px;

    display: flex;

    flex-direction: column;

    gap: 10px;

    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    z-index: 3;

}

.product-card:hover .product-actions {

    right: 15px;

}

.action-btn {

    background: #fff;

    border: 1px solid var(--border-color);

    width: 40px;

    height: 40px;

    border-radius: 50%;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1rem;

    color: var(--text-color);

    transition: all 0.3s;

}

.action-btn:hover, .action-btn.active {

    background-color: var(--primary-color);

    color: white;

    border-color: var(--primary-color);

    transform: scale(1.1);

}



/* =================================================================

   Product Details Page

   ================================================================= */

.breadcrumb {

    margin-bottom: 15px;

    font-size: 0.9rem;

}

.breadcrumb a {

    color: var(--primary-color);

}

.product-details-container {

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.product-gallery .product-details-image {

    border: 1px solid var(--border-color);

    border-radius: 8px;

    overflow: hidden;

    aspect-ratio: 1 / 1; 

    background-color: var(--light-color); 

}

.product-gallery .product-details-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.product-gallery-thumbnails {

    display: flex;

    overflow-x: auto;

    gap: 10px;

    padding: 10px 0;

}

.product-gallery-thumbnails::-webkit-scrollbar { height: 5px; }

.product-gallery-thumbnails::-webkit-scrollbar-thumb { background: #ccc; border-radius: 5px; }

.thumbnail-item {

    width: 70px;

    height: 70px;

    object-fit: cover;

    border: 2px solid var(--border-color);

    border-radius: 4px;

    cursor: pointer;

    transition: border-color 0.3s ease;

    flex-shrink: 0;

}

.thumbnail-item:hover, .thumbnail-item.active {

    border-color: var(--primary-color);

}

.product-info-details h4 {

    font-size: 1.5rem;

    font-weight: 600;

    margin-top: 0;

    margin-bottom: 8px;

}

.product-price-large {

    font-size: 1.4rem;

    color: var(--primary-color);

    font-weight: bold;

    margin: 10px 0 20px 0;

}

.actions {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

}

.quantity-input {

    width: 60px;

    text-align: center;

    border: 1px solid var(--border-color);

    border-radius: 4px;

    font-size: 1rem;

    padding: 10px;

}

.btn-add-to-cart {

    background-color: var(--secondary-color);

    color: white;

    border: none;

    padding: 11px 20px;

    border-radius: 4px;

    cursor: pointer;

    font-weight: bold;

}

.product-meta span {

    font-size: 0.9rem;

    display: block;

    margin-top: 5px;

}

.tabs-section {

    margin-top: 40px;

}

.tabs-nav {

    list-style: none;

    padding: 0;

    margin: 0 0 -1px 0;

    display: flex;

    border-bottom: 1px solid var(--border-color);

}

.tabs-nav li a {

    padding: 10px 20px;

    display: block;

    text-decoration: none;

    color: var(--text-color);

    border: 1px solid transparent;

}

.tabs-nav li.active a {

    font-weight: bold;

    border-color: var(--border-color);

    border-bottom-color: #fff;

    border-radius: 5px 5px 0 0;

}

.tabs-content {

    border: 1px solid var(--border-color);

    padding: 20px;

    border-top: none;

}

.tab-content { display: none; }

.tab-content.active { display: block; }





/* =================================================================

   All Other Page Styles (Cart, Checkout, Auth, My Account etc.)

   ================================================================= */

.page-wrapper { padding: 20px 0; }

.cart-header { text-align: center; margin-bottom: 20px; }

#cart-content { display: flex; flex-direction: column; gap: 20px; }

.cart-layout-column { display: flex; flex-direction: column; gap: 20px; }

.cart-card { background-color: #ffffff; padding: 20px; border: 1px solid #e9ecef; border-radius: 12px; width: 100%; box-sizing: border-box; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); }

.cart-items-header { padding-bottom: 15px; margin-bottom: 5px; font-weight: 600; font-size: 1.2rem; color: #333; border-bottom: 1px solid #f0f0f0; }

.cart-item { display: flex; align-items: flex-start; gap: 15px; padding: 20px 0; border-bottom: 1px solid #f0f0f0; }

#cart-items-wrapper form .cart-item:last-of-type { border-bottom: none; }

.product-image-cart { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }

.item-details-wrapper { display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }

.item-details-header { display: flex; justify-content: space-between; align-items: flex-start; }

.product-name-cart { font-weight: 600; font-size: 1rem; color: var(--dark-color); line-height: 1.4; padding-right: 10px; }

.remove-from-cart { color: #999; font-size: 1.2rem; background: none; border: none; cursor: pointer; }

.product-price-cart { font-size: 1rem; color: #666; }

.quantity-control { display: inline-flex; align-items: center; border: 1px solid #ccc; border-radius: 25px; overflow: hidden; height: 40px; width: fit-content; }

.quantity-btn, .quantity-input-cart { margin: 0; padding: 0; background: none; border: none; height: 100%; box-sizing: border-box; font-family: inherit; display: flex; align-items: center; justify-content: center; flex-grow: 0; flex-shrink: 0; }

.quantity-btn { width: 40px; cursor: pointer; font-size: 1.2rem; color: #555; }

.quantity-input-cart { width: 45px; font-size: 1.1rem; font-weight: 700; color: #333; border-left: 1px solid #ccc; border-right: 1px solid #ccc; text-align: center; -moz-appearance: textfield; }

.quantity-input-cart::-webkit-outer-spin-button, .quantity-input-cart::-webkit-inner-spin-button { -webkit-appearance: none; }

.cart-actions { text-align: right; margin-top: 20px; }

.btn-update-cart { border: none; padding: 12px 25px; border-radius: 5px; cursor: pointer; opacity: 0.6; transition: opacity 0.3s; font-weight: bold; background-color: #28a745; color: white; }

.btn-update-cart:not(:disabled) { opacity: 1; }

.coupon-card h3 { margin: 0 0 15px 0; display: flex; align-items: center; gap: 8px; font-size: 1rem; color: #333; font-weight: 600; }

.coupon-area { display: flex; }

#coupon-code-input { flex-grow: 1; padding: 12px; border: 1px solid var(--border-color); border-right: none; border-radius: 5px 0 0 5px; outline: none; }

#apply-coupon-btn { padding: 12px 20px; border: 1px solid var(--dark-color); background-color: var(--dark-color); color: white; cursor: pointer; border-radius: 0 5px 5px 0; }

.cart-summary-new h3 { margin-top: 0; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }

.summary-row-new { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #f0f0f0; }

.total-row-new { font-size: 1.2rem; font-weight: bold; border-bottom: none; }

.btn-checkout-new { display: block; text-align: center; width: 100%; box-sizing: border-box; padding: 15px; border-radius: 5px; margin-top: 20px; font-weight: bold; background-color: #28a745; color: white; }

.empty-cart-message { text-align: center; padding: 50px 20px; background-color: #fff; border: 1px solid var(--border-color); border-radius: 5px; }

.btn-return-to-shop { background: var(--dark-color); color: white; padding: 12px 25px; border-radius: 5px; font-weight: bold; display: inline-block; }

.shipping-row > div { text-align: right; }

.shipping-row p { margin: 0 0 5px; font-size: 0.9rem; color: #666; }

.shipping-row a { text-decoration: underline; cursor: pointer; color: var(--primary-color); font-size: 0.9rem; }

#shipping-calculator { padding: 10px 0; border-bottom: 1px solid #f0f0f0; }

.form-group-shipping { display: flex; gap: 10px; margin-top: 10px; }

#shipping-address-input { flex-grow: 1; padding: 8px; border: 1px solid var(--border-color); border-radius: 4px; }

#update-shipping-btn { padding: 8px 12px; border: none; border-radius: 4px; background-color: var(--dark-color); color: white; cursor: pointer; }

.coupon-discount-row span button { background: none; border: none; color: #e74c3c; font-weight: bold; cursor: pointer; margin-left: 5px; }

.auth-wrapper { display: flex; justify-content: center; align-items: center; padding: 40px 15px; min-height: 70vh; }

.auth-container { background-color: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 5px 25px rgba(0,0,0,0.1); width: 100%; max-width: 420px; border: 1px solid var(--border-color); }

.auth-header { text-align: center; margin-bottom: 25px; }

.auth-header span { font-size: 2rem; font-weight: 600; color: var(--dark-color); }

.auth-form .input_box { position: relative; margin-bottom: 25px; }

.auth-form .input-field { width: 100%; height: 50px; font-size: 1rem; color: var(--text-color); background: transparent; border: 1px solid var(--border-color); border-radius: 5px; padding: 0 15px 0 40px; box-sizing: border-box; outline: none; }

.auth-form .input_box .label { position: absolute; top: 15px; left: 15px; color: #888; transition: all 0.2s ease; pointer-events: none; background-color: #fff; padding: 0 5px; }

.auth-form .input_box .input-field:focus ~ .label, .auth-form .input_box .input-field:valid ~ .label { top: -8px; font-size: 0.8rem; color: var(--primary-color); }

.auth-form .input_box .icon { position: absolute; top: 17px; left: 15px; font-size: 1.1rem; color: #888; }

.auth-form .input-submit { width: 100%; height: 50px; background: var(--primary-color); border: none; border-radius: 5px; color: #fff; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: background-color 0.3s; }

.auth-form .input-submit:hover { background: #0056b3; }

.auth-switch { text-align: center; margin-top: 20px; }

.alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; }

.alert-danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }

.my-account-container { padding: 20px; min-height: 50vh; }

.account-container { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }

.account-sidebar ul { list-style: none; padding: 0; margin: 0; display: flex; border-bottom: 1px solid var(--border-color); }

.account-sidebar ul li a { display: block; padding: 15px; color: var(--dark-color); text-decoration: none; }

.account-sidebar ul li.active a { font-weight: bold; color: var(--primary-color); border-bottom: 2px solid var(--primary-color); }

.account-content { flex-grow: 1; }

.account-content .tab-content { display: none; }

.account-content .tab-content.active { display: block; animation: fadeIn 0.5s; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.table-responsive-wrapper { overflow-x: auto; width: 100%; }

.responsive-table { width: 100%; border-collapse: collapse; }

.status { padding: 4px 10px; border-radius: 12px; color: white; font-size: 0.8rem; text-transform: capitalize; }

.status.order-placed, .status.order-confirmed { background-color: #17a2b8; }

.status.pending-payment, .status.payment-failed { background-color: #ffc107; color: #333; }

.status.delivered { background-color: #28a745; } .status.cancelled { background-color: #dc3545; }

.status.in-transit { background-color: #fd7e14; }

.status.shipped { background-color: #007bff; }

.btn-view { background: var(--primary-color); color: white; padding: 5px 12px; border-radius: 4px; font-size: 0.9rem; text-decoration: none; }

.order-details-summary { background: var(--light-color); padding: 20px; border-radius: 8px; margin-bottom: 30px; line-height: 1.8; }

.order-items-table { width: 100%; border-collapse: collapse; }

.order-items-table th, .order-items-table td { padding: 12px; border-bottom: 1px solid var(--border-color); text-align: left; vertical-align: middle; }

.order-items-table th { background: #f8f9fa; }

.product-cell-content { display: flex; align-items: center; gap: 15px; }

.product-cell-image { border-radius: 4px; flex-shrink: 0; width: 60px; height: 60px; object-fit: cover; }

.checkout-page-container { max-width: 1100px; margin: 20px auto; padding: 0 15px; width: 100%; box-sizing: border-box; }

.checkout-form-grid { display: grid; grid-template-columns: 1fr; gap: 25px; }

.checkout-section { background: transparent; border: 1px solid #e0e0e0; border-radius: 8px; padding: 15px; margin-bottom: 20px; }

.checkout-column-main .checkout-section:last-of-type { margin-bottom: 0; }

.order-summary-card { background: #ffffff; box-shadow: 0 4px 15px rgba(0,0,0,0.06); }

.checkout-section h5 { margin-top: 0; margin-bottom: 15px; font-size: 0.95rem; font-weight: 600; border-bottom: none; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

.form-group { margin-bottom: 15px; }

.form-group label { display: block; margin-bottom: 6px; font-weight: 500; font-size: 0.8rem; }

.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 10px 15px; border: 1px solid #ced4da; border-radius: 25px; box-sizing: border-box; background-color: #fff; font-size: 0.85rem; transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }

.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: #28a745; box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25); }

.form-group select:disabled { background-color: #e9ecef; cursor: not-allowed; }

.schedule-header { display: flex; justify-content: space-between; align-items: center; }

.switch { position: relative; display: inline-block; width: 34px; height: 20px; }

.switch input { opacity: 0; width: 0; height: 0; }

.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; }

.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; }

input:checked + .slider { background-color: #28a745; }

input:checked + .slider:before { transform: translateX(14px); }

.slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }

.payment-method-option { border: 1px solid #ced4da; padding: 12px; border-radius: 25px; display: flex; align-items: center; cursor: pointer; }

.payment-method-option input { margin-right: 10px; }

.payment-method-option label { margin-bottom: 0; font-size: 0.9rem; }

.summary-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f1f1f1; }

.summary-item:last-of-type { border-bottom: none; }

.summary-item img { width: 45px; height: 45px; border-radius: 4px; object-fit: cover; }

.summary-item-details { flex-grow: 1; }

.summary-item-details span { display: block; font-weight: 500; font-size: 0.85rem; }

.summary-item-details small { color: #6c757d; font-size: 0.75rem; }

.summary-item-price { font-weight: 600; font-size: 0.85rem; }

.summary-totals { margin-top: 15px; padding-top: 15px; border-top: 1px solid #e9ecef; }

.summary-line { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.85rem; }

.summary-line.total { font-weight: bold; font-size: 1.05rem; margin-top: 10px; }

.btn-place-order { display: block; width: 100%; padding: 10px 15px; color: white; border: none; cursor: pointer; border-radius: 25px; font-size: 0.9rem; font-weight: bold; margin-top: 20px; background-color: #007bff; transition: background-color 0.3s; }

.btn-place-order:hover { background-color: #0056b3; }

.btn-view-all { font-size: 0.8rem; font-weight: bold; background-color: transparent; color: var(--primary-color); padding: 3px 12px; border-radius: 15px; text-decoration: none; border: 1px solid var(--primary-color); transition: background-color 0.3s, color 0.3s; }

.btn-view-all:hover { background-color: var(--primary-color); color: white; }

.compare-table-wrapper { overflow-x: auto; margin-top: 20px; }

.compare-table { width: 100%; border-collapse: collapse; min-width: 600px; }

.compare-table th, .compare-table td { border: 1px solid var(--border-color); padding: 15px; text-align: center; vertical-align: top; }

.compare-table th { background-color: #f8f8f8; font-weight: bold; text-align: left; }

.compare-table img { max-width: 150px; margin: 0 auto; }

.compare-table .action-btn { margin: 5px; display: inline-block; padding: 8px 12px; font-size: 0.9rem; }

.product-rating { margin-bottom: 8px; color: #ffc107; font-size: 0.9rem; }

.review-count { color: #6c757d; margin-left: 5px; font-size: 0.8rem; }

.search-results-header { text-align: center; padding: 20px 0; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; }

.search-results-header h1 { margin-top: 0; }

.no-results-message { text-align: center; padding: 50px 20px; background-color: #fff; }

.no-results-message p { font-size: 1.2rem; margin-bottom: 20px; }

.btn-return-to-shop { background: var(--dark-color); color: white; padding: 12px 25px; border-radius: 5px; font-weight: bold; display: inline-block; }

.coupon-slider-section {

    margin: 50px auto;

    max-width: 1415px;

    padding: 0 15px;

}

.coupon-slider {

    padding: 10px 0;

}

.coupon-ticket {

    display: flex;

    background: #fff;

    box-shadow: 0 4px 15px rgba(0,0,0,0.06);

    border-radius: 12px;

    height: 130px;

    position: relative;

    border: 1px solid #e2e8f0;

    cursor: grab;

    transition: all 0.3s ease;

    overflow: hidden;

}

.coupon-ticket:active {

    cursor: grabbing;

}

.coupon-ticket:hover {

    transform: translateY(-5px);

    box-shadow: 0 12px 25px rgba(0,0,0,0.09);

    border-color: var(--primary-color);

}

.coupon-ticket::before, .coupon-ticket::after {

    content: '';

    position: absolute;

    width: 20px;

    height: 20px;

    background: #fff;

    border-radius: 50%;

    top: 50%;

    transform: translateY(-50%);

    z-index: 2;

    border: 1px solid #e2e8f0;

}

.coupon-ticket::before {

    left: -11px;

}

.coupon-ticket::after {

    right: -11px;

}

.ticket-left {

    width: 110px;

    border-right: 2px dashed #e2e8f0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 10px;

    flex-shrink: 0;

    background: #f8fafc;

}

.ticket-left img {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    object-fit: cover;

    margin-bottom: 6px;

    border: 2px solid #fff;

    box-shadow: 0 2px 5px rgba(0,0,0,0.05);

}

.ticket-left p {

    font-size: 0.75rem;

    text-align: center;

    margin: 0;

    font-weight: 600;

    color: #475569;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    width: 90px;

    font-family: 'Inter', sans-serif;

}

.ticket-right {

    flex-grow: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 15px;

    background: #ffffff;

}

.ticket-right span {

    font-size: 0.75rem;

    color: #94a3b8;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    font-weight: 500;

    font-family: 'Inter', sans-serif;

}

.ticket-right .coupon-code {

    font-size: 1.3rem;

    font-weight: 700;

    color: var(--primary-color);

    letter-spacing: 1px;

    margin: 5px 0 8px 0;

    font-family: 'Inter', sans-serif;

}

.copy-coupon-btn {

    background: #f1f5f9;

    color: #334155;

    border: none;

    padding: 8px 18px;

    border-radius: 20px;

    cursor: pointer;

    font-size: 0.8rem;

    font-weight: 600;

    transition: all 0.2s ease;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-family: 'Inter', sans-serif;

}

.copy-coupon-btn:hover {

    background-color: var(--primary-color);

    color: #ffffff;

}

.copy-coupon-btn .fa-regular, .copy-coupon-btn .fa-solid {

    margin-right: 0;

}



/* Coupon Swiper Slider Navigation Buttons */

.coupon-slider-container {

    position: relative;

    max-width: 1415px;

    margin: 0 auto;

    padding: 0 10px;

}

.coupon-nav-btn {

    position: absolute;

    top: 40%;

    transform: translateY(-50%);

    width: 40px;

    height: 40px;

    background: #ffffff;

    border-radius: 50%;

    box-shadow: 0 4px 10px rgba(0,0,0,0.1);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 10;

    color: #333;

    transition: all 0.3s ease;

}

.coupon-nav-btn:hover {

    background: #ff4500;

    color: #ffffff;

}

.coupon-prev {

    left: -20px;

}

.coupon-next {

    right: -20px;

}

.coupon-nav-btn.swiper-button-disabled {

    opacity: 0.5;

    cursor: not-allowed;

}

@media (max-width: 1300px) {

    .coupon-prev {

        left: 5px;

    }

    .coupon-next {

        right: 5px;

    }

}

@media (max-width: 767px) {

    .coupon-prev, .coupon-next {

        display: none !important; /* Hide arrows on small screens */

    }

}

.page-block-image { margin: 20px 0; }

.page-block-image.align-left { margin-right: auto; margin-left: 0; text-align: left; }

.page-block-image.align-center { margin-left: auto; margin-right: auto; text-align: center; }

.page-block-image.align-right { margin-left: auto; margin-right: 0; text-align: right; }

.page-block-image img { max-width: 100%; height: auto; display: inline-block; border-radius: 8px; }

.page-block-image.full-width { width: 100vw; max-width: 100vw !important; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }

.page-block-image.full-width img { width: 100%; border-radius: 0; }

.page-block-header { word-wrap: break-word; line-height: 1.4; margin: 20px 0; }



/* Responsive Media Queries */

@media (min-width: 768px) and (max-width: 991px) {

    .product-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }

    .category-catalog-grid { grid-template-columns: repeat(5, 1fr); }



    .product-details-container { flex-direction: row; gap: 40px; }

    .product-gallery, .product-info-details { flex: 1; }

    .account-container { flex-direction: row; gap: 30px; }

    .account-sidebar { flex-basis: 220px; flex-shrink: 0; border-right: 1px solid var(--border-color); border-bottom: none; }

    .account-sidebar ul { flex-direction: column; }

    .account-sidebar ul li a { border-bottom: none !important; }

    .account-sidebar ul li.active a { border-left: 2px solid var(--primary-color); background: var(--light-color); }

    .responsive-table thead { display: table-header-group; background-color: #f8f9fa; }

    .responsive-table th { padding: 15px; text-align: left; font-weight: 600; border-bottom: 2px solid var(--border-color); }

    .responsive-table tr { display: table-row; }

    .responsive-table td { display: table-cell; text-align: left; border-bottom: 1px solid var(--border-color); padding: 15px; vertical-align: middle; }

    .responsive-table th:not(:last-child), .responsive-table td:not(:last-child) { border-right: 1px solid var(--border-color); }

    .responsive-table tbody tr:last-child td { border-bottom: none; }

    .responsive-table td::before { display: none; } 

}



@media (min-width: 992px) {

    .product-grid { grid-template-columns: repeat(4, 1fr); gap: 30px; }

    #cart-content { flex-direction: row; align-items: flex-start; } 

    .cart-layout-column { flex: 1; }

    #cart-summary-column { flex-basis: 380px; flex-shrink: 0; position: sticky; top: 20px; }

    .checkout-page-container { max-width: 1200px; } .checkout-form-grid { grid-template-columns: 1fr 420px; align-items: flex-start; } .checkout-column-sidebar { position: sticky; top: 20px; }

}



@media (max-width: 767px) {

    .responsive-table thead, .order-items-table thead { display: none; } 

    .responsive-table tbody tr, .order-items-table tr { display: block; margin-bottom: 15px; border: 1px solid var(--border-color); border-radius: 5px; padding: 10px; }

    .responsive-table td, .order-items-table td { display: flex; justify-content: space-between; align-items: center; text-align: right; border-bottom: 1px dotted var(--border-color); padding: 12px 5px; }

    .responsive-table td:last-child, .order-items-table td:last-child { border-bottom: none; }

    .responsive-table td::before, .order-items-table td::before { content: attr(data-label); font-weight: bold; text-align: left; padding-right: 10px; }

    .order-items-table td[data-label="Product"] { display: block; padding-bottom: 15px; }

    .order-items-table td[data-label="Product"]::before { display: none; }

}



/* === নতুন এবং সংশোধিত: Deals of The Week সেকশনের জন্য বর্ডারসহ স্টাইল === */



.deals-header-container {

    box-sizing: border-box; /* এটি নিশ্চিত করে যে প্যাডিং এবং বর্ডার প্রস্থের অন্তর্ভুক্ত */

    display: flex;

    flex-direction: column; /* আইটেমগুলোকে একটির নিচে আরেকটি সাজানো */

    align-items: center;    /* মাঝখানে সারিবদ্ধ করা */

    text-align: center;

    margin-bottom: 25px;

    padding: 25px 15px;      /* ভেতরের কন্টেন্টের জন্য প্যাডিং */

    border: 2px solid white; /* আপনার অনুরোধ অনুযায়ী সাদা বর্ডার */

    border-radius: 8px;      /* সামান্য গোলাকার কর্নার */

    box-shadow: 0 0 0 3px #ff6f61; /* সাদা বর্ডারের চারপাশে লাল শ্যাডো */

    background-color: #fff;  /* একটি ব্যাকগ্রাউন্ড কালার, যদি পেজের ব্যাকগ্রাউন্ড ভিন্ন হয় */

}



.deals-title-unified {

    font-size: 1.313rem;      /* আপনার অনুরোধ অনুযায়ী ফন্ট সাইজ */

    font-weight: 700;

    text-transform: uppercase;

    color: var(--dark-color);

    margin: 0 0 15px 0;

    line-height: 1.2;

}



.deal-countdown {

    background-color: #ff6f61;

    color: white;

    padding: 8px 20px;

    border-radius: 20px;

    font-size: 0.9rem;

    font-weight: 500;

    margin: 0 0 15px 0;

}



.deals-of-the-week .btn-view-all {

    font-size: 0.9rem;

    font-weight: 500;

    color: var(--primary-color);

    text-decoration: none;

    transition: color 0.3s;

}



.deals-of-the-week .btn-view-all:hover {

    color: var(--dark-color);

}





/* === নতুন এবং চূড়ান্ত ফুটার স্টাইল === */



/* --- ফুটারের সাধারণ স্টাইল --- */

.site-footer {

    background-color: #1e2732;

    color: #aeb4b9;

    padding-top: 50px;

    font-size: 15px;

}



.footer-grid {

    display: flex;

    flex-wrap: wrap; /* ছোট স্ক্রিনে কলামগুলোকে নিচে নামানোর জন্য */

    padding-bottom: 40px;

}



.footer-bottom {

    background-color: #121a22;

    padding: 20px 0;

    text-align: center;

}



.footer-bottom p {

    margin: 0;

    color: #aeb4b9;

    font-size: 14px;

}





/* --- কলামের ভেতরের কন্টেন্টের স্টাইল --- */

.footer-column-about .footer-logo {

    font-size: 24px; color: #ffffff; font-weight: 700; margin-top: 0; margin-bottom: 15px;

}

.footer-column-about .footer-description {

    margin-bottom: 20px; line-height: 1.8;

}

.footer-contact-info {

    list-style: none; padding: 0; margin: 0;

}

.footer-contact-info li {

    display: flex; align-items: flex-start; margin-bottom: 12px;

}

.footer-contact-info i {

    color: var(--primary-color); margin-right: 15px; margin-top: 4px; width: 15px; text-align: center;

}

.footer-heading {

    font-size: 18px; color: #ffffff; font-weight: 600; margin-top: 0; margin-bottom: 20px;

}

.footer-links {

    list-style: none; padding: 0; margin: 0;

}

.footer-links a {

    color: #aeb4b9; text-decoration: none; display: block; margin-bottom: 10px; transition: all 0.2s ease-in-out;

}

.footer-links a:hover {

    color: #ffffff; padding-left: 5px;

}

.footer-social-icons {

    display: flex;

    gap: 15px;

}

.footer-social-icons a {

    color: #ffffff;

    background-color: #3a4553;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    text-decoration: none;

    transition: background-color 0.2s, transform 0.2s;

}

.footer-social-icons a:hover {

    background-color: var(--primary-color);

    transform: translateY(-2px);

}

.footer-payment-icons {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin-top: 10px;

}

.footer-payment-icons img {

    height: 30px;

}





/* --- মোবাইল এবং ট্যাবলেটের জন্য স্টাইল (767px পর্যন্ত) --- */
@media (max-width: 767px) {
    .site-footer {
        zoom: 0.8; /* মোবাইল ভিউতে জুম আউট ইফেক্ট */
    }

    .footer-grid {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .footer-column {
        width: 100%;
        padding-bottom: 25px;
        border-bottom: 1px solid #3a4553;
        margin-bottom: 20px;
        box-sizing: border-box;
    }

    /* Information & Important Links columns - side by side */
    .footer-column:not(.footer-column-about):not(.footer-column-bottom) {
        width: 50%;
        padding: 0 10px;
        padding-bottom: 20px;
    }

    /* Last column (Follow Us + Payment) - full width but contents side-by-side */
    .footer-column.footer-column-bottom {
        width: 100%;
        padding: 0 10px;
        border-bottom: none;
        margin-bottom: 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 15px;
    }

    .footer-bottom-half {
        width: 50%;
    }

    .footer-bottom-half .footer-heading {
        margin-bottom: 12px;
        font-size: 15px;
    }

    /* Prevent link text from wrapping on mobile */
    .footer-links a {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
        display: block;
    }
}





/* --- শুধুমাত্র ডেস্কটপের জন্য স্টাইল (768px থেকে শুরু) --- */

@media (min-width: 768px) {

    .footer-grid {

        flex-wrap: nowrap; /* কলামগুলোকে নিচে নামতে বাধা দেওয়া হচ্ছে */

    }

    .footer-column {

        padding: 0 20px;

        box-sizing: border-box;

        position: relative;

    }

    .footer-column-about {

        width: 35%;

    }

    .footer-column:not(.footer-column-about) {

        width: 21.66%;

    }

    /* ডিভাইডার (সোজা রেখা) */

    .footer-column:not(:last-child)::after {

        content: '';

        position: absolute;

        right: 0;

        top: 0;

        bottom: 0;

        width: 1px;

        background-color: #3a4553;

    }

    .footer-column:first-child {

        padding-left: 0;

    }

    .footer-column:last-child {

        padding-right: 0;

    }

}

/* my-php-website/assets/style.css (ফাইলের শেষে যোগ করুন) */





/* === নতুন এবং চূড়ান্ত সংশোধিত: প্রোডাক্ট ডিটেইল পেজ V2 স্টাইল === */

.breadcrumb {

    padding: 15px 0;

    font-size: 0.9rem;

    color: #666;

    border-bottom: 1px solid var(--border-color);

    margin-bottom: 25px;

}

.breadcrumb a {

    color: var(--primary-color);

    text-decoration: none;

}

.breadcrumb .fa-house {

    margin-right: 5px;

}

.breadcrumb span {

    color: var(--text-color);

}



.product-details-container-v2 {

    display: grid;

    grid-template-columns: 1fr; /* মোবাইল ডিফল্ট: এক কলাম */

    gap: 25px;

    margin-bottom: 30px;

    align-items: start;

}



/* === কার্ড স্টাইল এখানে যোগ করা হয়েছে === */

.product-gallery-v2,

.product-info-v2 {

    border: 1px solid var(--border-color);

    padding: 20px;

    background-color: #fff;

    border-radius: 0; /* আপনার অনুরোধ অনুযায়ী শার্প কর্নার */

    box-sizing: border-box;

}



/* === বাম কার্ড (গ্যালারি) এর ভেতরের লেআউট === */

.product-gallery-v2 {

    display: flex;

    flex-direction: row;

    gap: 15px;

}



.thumbnail-list-v2 {

    display: flex;

    flex-direction: column;

    gap: 10px;

    flex-shrink: 0;

}



.thumbnail-item-v2 {

    width: 80px;

    height: 80px;

    border: 2px solid var(--border-color);

    cursor: pointer;

    padding: 2px;

    transition: border-color 0.3s;

}

.thumbnail-item-v2 img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.thumbnail-item-v2.active {

    border-color: var(--primary-color);

}



/* === পরিবর্তন: মূল ছবির কন্টেইনারকে সেন্টারে আনা হয়েছে === */

.main-image-v2 {

    flex-grow: 1;

    min-width: 0;

    display: flex;

    justify-content: center; /* Horizontally center */

    align-items: center;   /* Vertically center */

}



.main-image-v2 img {

    width: 100%;

    max-width: 500px;

    height: auto;

    aspect-ratio: 1 / 1;

    object-fit: cover;

}





/* --- ডান কার্ড (প্রোডাক্টের তথ্য) এর ভেতরের স্টাইল --- */

.product-info-v2 {

    display: flex;

    flex-direction: column;

}

.product-info-v2 h1 {

    font-size: 1.6rem; font-weight: 600; color: var(--dark-color); margin: 0 0 5px;

}

.rating-reviews-v2 {

    display: flex; align-items: center; gap: 10px; margin-bottom: 5px;

}

.star-rating-display .fa-star {

    color: #d1d1d1; font-size: 0.9em;

}

.star-rating-display .fa-star.filled {

    color: #ffc107;

}

.reviews-count-link {

    font-size: 0.85rem; color: var(--primary-color); text-decoration: none;

}

.product-id-v2 {

    font-size: 0.85rem; color: #888; margin-bottom: 8px;

}

.price-section-v2 {

    display: flex; gap: 15px; align-items: center; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color);

}

.price-item {

    display: flex; flex-direction: column;

}

.price-item label {

    font-size: 0.75rem; color: #888; margin-bottom: 2px;

}

.price-item .price-value {

    font-size: 1.1rem; font-weight: 600; color: var(--dark-color);

}

.price-item .price-value.regular {

    text-decoration: line-through; color: #999; font-size: 0.9rem;

}

.price-item .price-value.emi {

    font-size: 0.9rem;

}

.special-price-box {

    background-color: #f3f4f6; padding: 5px 10px; border-radius: 5px;

}

.special-price-box .price-value {

    font-size: 1.3rem; color: var(--primary-color); font-weight: 700;

}

#check-availability-btn {

    background-color: var(--secondary-color); color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-weight: 500; margin-bottom: 8px;

}

.quick-overview-v2 {

    margin-bottom: 8px; flex-grow: 1;

}

.quick-overview-v2 h4 {

    margin: 0 0 8px; font-size: 1rem;

}

.quick-overview-v2 ul {

    list-style-type: disc; padding-left: 20px; margin: 0; color: #555; font-size: 0.9rem;

}

.quick-overview-v2 ul li {

    margin-bottom: 3px;

}

.actions-v2 {

    display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);

}

.quantity-control-v2 {

    display: flex; align-items: center; border: 1px solid #ccc; border-radius: 5px;

}

.quantity-control-v2 .quantity-btn {

    background: none; border: none; width: 32px; height: 36px; cursor: pointer; font-size: 1.1rem;

}

.quantity-input-v2 {

    width: 45px; height: 36px; text-align: center; border: none; border-left: 1px solid #ccc; border-right: 1px solid #ccc; font-size: 1rem; font-weight: 500;

}

.btn-add-to-cart-v2 {

    background-color: var(--secondary-color); color: white; border: none; padding: 0 20px; height: 38px; border-radius: 5px; cursor: pointer; font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 8px;

}

.action-btn-v2 {

    height: 38px; padding: 0 18px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; gap: 8px;

}

.action-btn-v2.active {

    border-color: var(--primary-color); color: var(--primary-color);

}

.action-btn-v2 .fa-heart {

    color: #e44d26;

}

.emi-offer-v2, .support-buttons-v2, .share-section-v2 {

    margin-top: 8px;

}

.emi-offer-v2 p {

    margin: 3px 0 0; font-size: 0.8rem;

}

.support-buttons-v2 {

    display: flex; gap: 8px;

}

.support-buttons-v2 button {

    background-color: #f3f4f6; border: 1px solid #e5e7eb; padding: 6px 12px; border-radius: 5px; cursor: pointer; color: #374151; font-size: 0.8em;

}

.share-section-v2 {

    display: flex; align-items: center; gap: 10px;

}

.share-icons {

    display: flex; gap: 8px;

}

.share-icons .social-icon {

    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: white; border-radius: 50%; text-decoration: none; font-size: 0.9em;

}

.whatsapp { background-color: #25D366; }

.email { background-color: #7f8c8d; }

.facebook { background-color: #1877F2; }

.messenger { background-color: #00B2FF; }



/* রিভিউ ফর্মের স্টাইল */

.review-form-container {

    margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border-color);

}

.rating-group .star-rating {

    display: flex; flex-direction: row-reverse; justify-content: flex-end;

}

.star-rating input[type="radio"] { display: none; }

.star-rating label {

    font-size: 1.5rem; color: #ddd; cursor: pointer; transition: color 0.2s;

}

.star-rating input[type="radio"]:checked ~ label,

.star-rating label:hover,

.star-rating label:hover ~ label {

    color: #ffc107;

}

.review-item {

    padding: 15px 0; border-bottom: 1px solid var(--border-color);

}

.review-item:last-child { border-bottom: none; }

.review-rating .fa-star { color: #ffc107; }

.review-meta { font-size: 0.9rem; color: #666; margin: 5px 0; }

.review-comment { margin: 5px 0 0; }



/* === বড় স্ক্রিনের জন্য দুই কলাম লেআউট === */

@media (min-width: 992px) {

    .product-details-container-v2 {

        grid-template-columns: 1fr 1fr; /* 50% - 50% split */

    }

}



/* === ট্যাবলেট এবং মোবাইলের জন্য লেআউট === */

@media (max-width: 767px) {

    .product-gallery-v2 {

        flex-direction: column-reverse; /* মূল ছবি উপরে, থাম্বনেইল নিচে */

        padding: 15px;

    }

    .product-info-v2 {

        padding: 15px;

    }



    .thumbnail-list-v2 {

        flex-direction: row; /* থাম্বনেইল পাশাপাশি */

        overflow-x: auto; /* প্রয়োজনে স্ক্রল করার ব্যবস্থা */

    }

}



/* === পরিবর্তন শুরু: সেন্টারিং এবং এক-কলাম লেআউটের জন্য CSS === */

.product-details-bottom-layout {

    display: grid;

    grid-template-columns: 1fr;

    gap: 30px;

    margin-top: 40px;

    text-align: left;

}



.tabs-section {

    margin-top: 0;

}



.product-spec-tabs-container {

    height: 100%;

}



.spec-tabs-nav {

    list-style: none;

    padding: 0;

    margin: 0 0 0 0;

    display: flex;

    background-color: transparent;

    border: none;

    border-bottom: 2px solid #eee;

    border-radius: 0;

    overflow: visible;

    gap: 0;

}



.spec-tabs-nav li {

    margin: 0;

    text-align: center;

}



.spec-tabs-nav li a {

    display: block;

    padding: 14px 25px;

    text-decoration: none;

    color: #888;

    font-weight: 500;

    font-size: 0.95rem;

    font-family: 'Inter', sans-serif;

    border-right: none;

    border-bottom: 2px solid transparent;

    margin-bottom: -2px;

    transition: color 0.3s, border-color 0.3s;

    white-space: nowrap;

}



.spec-tabs-nav li:last-child a {

    border-right: none;

}



.spec-tabs-nav li.active a {

    background-color: transparent;

    color: #111;

    font-weight: 600;

    border-bottom: 2px solid #111;

}



.spec-tabs-nav li:not(.active) a:hover {

    background-color: transparent;

    color: #333;

    border-bottom: 2px solid #ccc;

}



.spec-tabs-content {

    padding: 30px 25px;

    background-color: #ffffff;

    border: none;

    border-radius: 0;

    text-align: left;

    font-family: 'Inter', sans-serif;

}



.spec-tabs-content .tab-content { display: none; }

.spec-tabs-content .tab-content.active { display: block; animation: fadeIn 0.5s; }



@keyframes fadeIn {

    from { opacity: 0; transform: translateY(10px); }

    to { opacity: 1; transform: translateY(0); }

}



@media (min-width: 992px) {

    .product-details-bottom-layout {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 991px) {

    .product-details-bottom-layout {

        gap: 25px;

    }

}



@media (max-width: 767px) {

    .spec-tabs-nav {

        display: flex;

        flex-wrap: nowrap;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

        border-radius: 5px;

    }

    .spec-tabs-nav::-webkit-scrollbar {

        display: none;

    }

    .spec-tabs-nav li {

        flex-shrink: 0;

    }

}

/* === পরিবর্তন শেষ === */

/* === নতুন এবং চূড়ান্ত: প্রোডাক্ট ডিটেইলস পেজের বটম গ্রিড এবং সিমিলার প্রোডাক্টস (উচ্চতা কমানো) === */



.product-details-bottom-grid {

    display: grid;

    grid-template-columns: 1fr; /* মোবাইল ডিফল্ট: এক কলাম */

    gap: 30px;

    margin-top: 40px;

}



.similar-products-section {

    background-color: #fff;

    height: 100%;

}



/* ডিজাইন অনুযায়ী সিমিলার প্রোডাক্টের হেডার (উচ্চতা কমানো) */

.similar-products-header-wrapper {

    border-bottom: 2px solid black;

    position: relative;

    height: 38px; /* পরিবর্তন: উচ্চতা 48px থেকে 38px করা হয়েছে */

    margin-bottom: 20px;

}

.similar-products-header {

    position: absolute;

    bottom: -2px;

    left: 0;

    background-color: #000000;

    color: #ffffff;

    padding: 8px 25px; /* পরিবর্তন: প্যাডিং 12px থেকে 8px করা হয়েছে */

    clip-path: polygon(0 100%, 100% 100%, 88% 0, 0 0);

}

.similar-products-header h4 {

    margin: 0;

    font-size: 1rem; /* পরিবর্তন: ফন্ট সাইজ 1.1rem থেকে 1rem করা হয়েছে */

    font-weight: 600;

    white-space: nowrap;

}



.similar-products-list {

    padding: 0 20px 20px 20px;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;

}





/* ========================================================================= */

/* CART PAGE REDESIGN                                                        */

/* ========================================================================= */



.cart-page-redesign {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px 80px 20px;

    font-family: 'Inter', sans-serif;

}



/* Breadcrumb */

.cart-breadcrumb-v3 {

    font-size: 0.85rem;

    padding: 20px 0 30px 0;

    color: #555;

}

.cart-breadcrumb-v3 a {

    color: #111;

    text-decoration: underline;

    font-weight: 500;

}

.cart-breadcrumb-v3 span {

    margin: 0 6px;

    color: #999;

}



/* Cart Table Header */

.cart-table-wrapper {

    border-bottom: 1px solid #e0e0e0;

}

.cart-table-header {

    display: grid;

    grid-template-columns: 1fr 280px 150px;

    padding: 0 0 15px 0;

    border-bottom: 1px solid #e0e0e0;

}

.cart-table-header .cart-col-product,

.cart-table-header .cart-col-quantity,

.cart-table-header .cart-col-total {

    font-size: 0.8rem;

    font-weight: 500;

    color: #555;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.cart-table-header .cart-col-quantity {

    text-align: center;

}

.cart-table-header .cart-col-total {

    text-align: right;

}



/* Cart Row */

.cart-row-v3 {

    display: grid;

    grid-template-columns: 1fr 280px 150px;

    align-items: center;

    padding: 30px 0;

    border-bottom: 1px solid #f0f0f0;

}

.cart-row-v3:last-child {

    border-bottom: none;

}



/* Product Info */

.cart-product-info-v3 {

    display: flex;

    align-items: center;

    gap: 20px;

}

.cart-product-img-v3 {

    width: 100px;

    height: 100px;

    object-fit: cover;

    border: 1px solid #eee;

    background: #f9f9f9;

    flex-shrink: 0;

}

.cart-product-details-v3 {

    display: flex;

    flex-direction: column;

    gap: 3px;

}

.cart-product-category {

    font-size: 0.8rem;

    color: #999;

}

.cart-product-name-v3 {

    font-size: 0.95rem;

    font-weight: 600;

    color: #111;

    text-decoration: none;

    line-height: 1.4;

}

.cart-product-name-v3:hover {

    text-decoration: underline;

}

.cart-product-variant {

    font-size: 0.8rem;

    color: #888;

}

.cart-product-price-mob {

    display: none;

}



/* Quantity Column */

.cart-col-quantity {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

}

.cart-qty-control-v3 {

    display: flex;

    align-items: center;

    border: 1px solid #ddd;

    border-radius: 0;

    overflow: hidden;

    height: 40px;

}

.cart-qty-btn-v3 {

    width: 40px;

    height: 40px;

    border: none;

    background: #fff;

    font-size: 1.1rem;

    color: #555;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: background 0.15s;

}

.cart-qty-btn-v3:hover {

    background: #f5f5f5;

}

.cart-qty-input-v3 {

    width: 40px;

    height: 40px;

    border: none;

    border-left: 1px solid #ddd;

    border-right: 1px solid #ddd;

    text-align: center;

    font-size: 0.95rem;

    font-weight: 500;

    color: #111;

    background: #fff;

    -moz-appearance: textfield;

}

.cart-qty-input-v3::-webkit-outer-spin-button,

.cart-qty-input-v3::-webkit-inner-spin-button {

    -webkit-appearance: none;

}

.cart-remove-btn-v3 {

    background: none;

    border: none;

    cursor: pointer;

    color: #bbb;

    font-size: 1.1rem;

    padding: 8px;

    transition: color 0.2s;

}

.cart-remove-btn-v3:hover {

    color: #111;

}



/* Total Column */

.cart-col-total {

    text-align: right;

}

.cart-item-total-v3 {

    font-size: 1rem;

    font-weight: 500;

    color: #111;

}



/* ---- Cart Footer Grid ---- */

.cart-footer-grid {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    gap: 40px;

    margin-top: 50px;

    padding-top: 0;

}

.cart-footer-label {

    display: block;

    font-size: 0.9rem;

    font-weight: 500;

    color: #111;

    margin-bottom: 12px;

}

.cart-footer-label i {

    margin-left: 5px;

    color: #999;

}



/* Order Notes */

.cart-notes-textarea {

    width: 100%;

    border: 1px solid #ddd;

    border-radius: 0;

    padding: 12px 14px;

    font-size: 0.85rem;

    font-family: 'Inter', sans-serif;

    color: #333;

    resize: vertical;

    min-height: 130px;

    box-sizing: border-box;

    transition: border-color 0.2s;

}

.cart-notes-textarea:focus {

    outline: none;

    border-color: #111;

}



/* Estimate Shipping */

.cart-shipping-select {

    width: 100%;

    padding: 10px 14px;

    border: 1px solid #ddd;

    border-radius: 0;

    font-size: 0.85rem;

    font-family: 'Inter', sans-serif;

    color: #555;

    background: #fff;

    margin-bottom: 10px;

    box-sizing: border-box;

    appearance: auto;

}

.cart-shipping-zip {

    width: 100%;

    padding: 10px 14px;

    border: 1px solid #ddd;

    border-radius: 0;

    font-size: 0.85rem;

    font-family: 'Inter', sans-serif;

    color: #333;

    margin-bottom: 12px;

    box-sizing: border-box;

}

.cart-shipping-zip:focus,

.cart-shipping-select:focus {

    outline: none;

    border-color: #111;

}

.cart-shipping-calc-btn {

    display: inline-block;

    background: #111;

    color: #fff;

    border: none;

    padding: 12px 28px;

    font-size: 0.85rem;

    font-weight: 600;

    font-family: 'Inter', sans-serif;

    letter-spacing: 0.5px;

    cursor: pointer;

    border-radius: 30px;

    transition: background 0.2s;

}

.cart-shipping-calc-btn:hover {

    background: #333;

}



/* Subtotal & Checkout */

.cart-footer-summary {

    text-align: right;

}

.cart-subtotal-row {

    display: flex;

    justify-content: flex-end;

    align-items: baseline;

    gap: 15px;

    margin-bottom: 6px;

}

.cart-subtotal-label {

    font-size: 0.95rem;

    font-weight: 700;

    color: #111;

}

.cart-subtotal-amount {

    font-size: 1.15rem;

    font-weight: 500;

    color: #111;

}

.cart-tax-note {

    font-size: 0.8rem;

    color: #888;

    margin: 0 0 20px 0;

}

.cart-checkout-btn-v3 {

    display: inline-block;

    background: #111;

    color: #fff;

    border: none;

    padding: 14px 50px;

    font-size: 0.9rem;

    font-weight: 600;

    font-family: 'Inter', sans-serif;

    letter-spacing: 0.5px;

    cursor: pointer;

    border-radius: 30px;

    text-decoration: none;

    transition: background 0.2s;

}

.cart-checkout-btn-v3:hover {

    background: #333;

    color: #fff;

}



/* Empty Cart State */

.cart-empty-state {

    text-align: center;

    padding: 80px 20px;

}

.cart-empty-state i {

    font-size: 4rem;

    color: #ddd;

    margin-bottom: 20px;

}

.cart-empty-state h2 {

    font-size: 1.8rem;

    font-weight: 700;

    color: #111;

    margin: 0 0 10px 0;

}

.cart-empty-state p {

    font-size: 1rem;

    color: #888;

    margin: 0 0 30px 0;

}

.cart-continue-btn {

    display: inline-block;

    background: #111;

    color: #fff;

    padding: 14px 40px;

    font-size: 0.9rem;

    font-weight: 600;

    border-radius: 30px;

    text-decoration: none;

    transition: background 0.2s;

}

.cart-continue-btn:hover {

    background: #333;

    color: #fff;

}



/* Cart Page Responsive */

@media (max-width: 991px) {

    .cart-footer-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    .cart-footer-summary {

        text-align: left;

    }

}

















.cart-table-header .cart-col-product,

.cart-table-header .cart-col-quantity,

.cart-table-header .cart-col-total {

    font-size: 0.8rem;

    font-weight: 500;

    color: #555;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.cart-table-header .cart-col-quantity {

    text-align: center;

}

.cart-table-header .cart-col-total {

    text-align: right;

}



/* Cart Row */

.cart-row-v3 {

    display: grid;

    grid-template-columns: 1fr 280px 150px;

    align-items: center;

    padding: 30px 0;

    border-bottom: 1px solid #f0f0f0;

}

.cart-row-v3:last-child {

    border-bottom: none;

}



/* Product Info */

.cart-product-info-v3 {

    display: flex;

    align-items: center;

    gap: 20px;

}

.cart-product-img-v3 {

    width: 100px;

    height: 100px;

    object-fit: cover;

    border: 1px solid #eee;

    background: #f9f9f9;

    flex-shrink: 0;

}

.cart-product-details-v3 {

    display: flex;

    flex-direction: column;

    gap: 3px;

}

.cart-product-category {

    font-size: 0.8rem;

    color: #999;

}

.cart-product-name-v3 {

    font-size: 0.95rem;

    font-weight: 600;

    color: #111;

    text-decoration: none;

    line-height: 1.4;

}

.cart-product-name-v3:hover {

    text-decoration: underline;

}

.cart-product-variant {

    font-size: 0.8rem;

    color: #888;

}



/* Quantity Column */

.cart-col-quantity {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

}



.cart-qty-control-v3 {

    display: flex;

    align-items: center;

    border: 1px solid #ddd;

    border-radius: 0;

    overflow: hidden;

    height: 40px;

}

.cart-qty-btn-v3 {

    width: 40px;

    height: 40px;

    border: none;

    background: #fff;

    font-size: 1.1rem;

    color: #555;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: background 0.15s;

}

.cart-qty-btn-v3:hover {

    background: #f5f5f5;

}

.cart-qty-input-v3 {

    width: 40px;

    height: 40px;

    border: none;

    border-left: 1px solid #ddd;

    border-right: 1px solid #ddd;

    text-align: center;

    font-size: 0.95rem;

    font-weight: 500;

    color: #111;

    background: #fff;

    -moz-appearance: textfield;

}

.cart-qty-input-v3::-webkit-outer-spin-button,

.cart-qty-input-v3::-webkit-inner-spin-button {

    -webkit-appearance: none;

}



.cart-remove-btn-v3 {

    background: none;

    border: none;

    cursor: pointer;

    color: #bbb;

    font-size: 1.1rem;

    padding: 8px;

    transition: color 0.2s;

}

.cart-remove-btn-v3:hover {

    color: #111;

}



/* Total Column */

.cart-col-total {

    text-align: right;

}

.cart-item-total-v3 {

    font-size: 1rem;

    font-weight: 500;

    color: #111;

}



/* ---- Cart Footer Grid ---- */

.cart-footer-grid {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    gap: 40px;

    margin-top: 50px;

    padding-top: 0;

}

.cart-footer-label {

    display: block;

    font-size: 0.9rem;

    font-weight: 500;

    color: #111;

    margin-bottom: 12px;

}

.cart-footer-label i {

    margin-left: 5px;

    color: #999;

}



/* Order Notes */

.cart-notes-textarea {

    width: 100%;

    border: 1px solid #ddd;

    border-radius: 0;

    padding: 12px 14px;

    font-size: 0.85rem;

    font-family: 'Inter', sans-serif;

    color: #333;

    resize: vertical;

    min-height: 130px;

    box-sizing: border-box;

    transition: border-color 0.2s;

}

.cart-notes-textarea:focus {

    outline: none;

    border-color: #111;

}



/* Estimate Shipping */

.cart-shipping-select {

    width: 100%;

    padding: 10px 14px;

    border: 1px solid #ddd;

    border-radius: 0;

    font-size: 0.85rem;

    font-family: 'Inter', sans-serif;

    color: #555;

    background: #fff;

    margin-bottom: 10px;

    box-sizing: border-box;

    appearance: auto;

}

.cart-shipping-zip {

    width: 100%;

    padding: 10px 14px;

    border: 1px solid #ddd;

    border-radius: 0;

    font-size: 0.85rem;

    font-family: 'Inter', sans-serif;

    color: #333;

    margin-bottom: 12px;

    box-sizing: border-box;

}



.quantity-control-v2 { display: flex; border: 1px solid #ccc; width: 82px; }

.quantity-control-v2 .quantity-btn, .quantity-control-v2 .quantity-input-cart { border: none; background: white; height: 26px; text-align: center; }

.quantity-control-v2 .quantity-btn { width: 26px; cursor: pointer; }

.quantity-control-v2 .quantity-input-cart { width: 30px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; }

.item-total-price { font-weight: 600; font-size: 0.85rem; white-space: nowrap; }

.remove-from-cart-v2 { background: #e0e0e0; border: 1px solid #ccc; color: #333; width: 26px; height: 26px; cursor: pointer; border-radius: 4px; }



/* --- Right Column: Summary Card & Buttons --- */

.summary-header-v2 {

    margin: 0;

    font-weight: 600;

    font-size: 0.9rem;

    background-color: #f7f7f7;

    padding: 8px 15px;

    border-bottom: 1px solid #e0e0e0;

}

.summary-content-v2 {

    padding: 10px 15px;

}

.summary-line-v2 {

    display: flex;

    justify-content: space-between;

    margin-bottom: 10px;

    font-size: 0.85rem;

}

.summary-line-v2.total {

    font-weight: bold;

    font-size: 0.95rem;

    border-top: 1px solid #e0e0e0;

    padding-top: 10px;

    margin-bottom: 0;

}



.cart-action-buttons-v2 {

    margin-top: 15px;

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.btn-continue-shopping, .btn-checkout-v2 {

    display: block;

    width: 100%;

    padding: 8px;

    text-align: center;

    color: white;

    font-weight: bold;

    border-radius: 4px;

    box-sizing: border-box;

    font-size: 0.85rem;

}

.btn-continue-shopping { background-color: black; }

.btn-checkout-v2 { background-color: #8DC63F; }



/* --- Responsive Adjustments --- */

@media (max-width: 767px) {

    .cart-item-v2 {

        grid-template-columns: auto 1fr auto;

        grid-template-rows: auto auto auto;

        row-gap: 10px;

        align-items: center;

    }

    .cart-item-v2 > input[type="checkbox"] { grid-area: 1 / 1; }

    .product-image-cart-v2 { grid-area: 1 / 2; }

    .product-info-cart-v2 { grid-area: 1 / 3; }

    .btn-emi { grid-area: 2 / 1 / 3 / 2; }

    .quantity-control-v2 { grid-area: 2 / 2 / 3 / 3; justify-self: start; }

    .item-total-price { grid-area: 2 / 3 / 3 / 4; justify-self: end; }

    .remove-from-cart-v2 { grid-area: 3 / 3 / 4 / 4; justify-self: end; }

}

/* === নতুন: খালি কার্টের বার্তা এবং নিষ্ক্রিয় বাটনের জন্য স্টাইল === */

.no-items-message {

  text-align: center;

  padding: 40px 20px;

  color: #888;

  font-style: italic;

}



.btn-checkout-v2.disabled {

  background-color: #cccccc;

  cursor: not-allowed;

  pointer-events: none;

  opacity: 0.6;

}

/* my-php-website/assets/style.css (ফাইলের শেষে যোগ করুন) */



/* === সংশোধিত এবং চূড়ান্ত: চেকআউট পেজের জন্য নতুন স্টাইল === */



/* .container এর ডিফল্ট প্যাডিংকে ওভাররাইড করে দুই পাশের গ্যাপ সরানো হয়েছে */

.checkout-page-container.container {

    padding-left: 0;

    padding-right: 0;

    max-width: 100%; /* সম্পূর্ণ প্রস্থ নিশ্চিত করার জন্য */

    margin-top: 2px;

}



/* ব্রেডক্রাম্বকে কার্ট পেজের মতো স্লিম এবং ফুল-উইডথ করা হয়েছে */

.checkout-breadcrumb {

    font-size: 0.85rem;

    font-weight: normal;

    padding: 6px 15px; /* কার্ট পেজের সাথে হুবহু মিলানো হয়েছে */

    background-color: #f7f7f7;

    border-top: 1px solid #e0e0e0;

    border-bottom: 1px solid #e0e0e0;

    border-left: none;

    border-right: none;

    border-radius: 0; /* শার্প কর্নার */

    margin-bottom: 20px;

    color: var(--text-color);

}



.checkout-breadcrumb a {

    color: var(--dark-color);

    text-decoration: none;

}



.checkout-breadcrumb a:hover {

    color: var(--primary-color);

}



/* ফর্ম এবং অন্যান্য কন্টেন্টকে আবার আগের মতো প্যাডিং দেওয়া হচ্ছে */

.checkout-form-grid {

    padding-left: 15px;

    padding-right: 15px;

}

/* my-php-website/assets/style.css (ফাইলের শেষে যোগ করুন) */



/* === চূড়ান্ত সংশোধিত: চেকআউট পেজের জন্য চূড়ান্ত লেআউট ও স্টাইল === */



.checkout-page-container.container {

    padding-left: 0;

    padding-right: 0;

    max-width: 100%;

    margin-top: 2px;

}



.checkout-breadcrumb {

    font-size: 0.85rem;

    padding: 6px 15px;

    background-color: #f7f7f7;

    border-top: 1px solid #e0e0e0;

    border-bottom: 1px solid #e0e0e0;

    margin-bottom: 20px;

}

.checkout-breadcrumb a { color: var(--dark-color); }



/* === পরিবর্তন: ডান পাশে সামান্য গ্যাপ রাখার জন্য প্যাডিং অ্যাডজাস্ট করা হয়েছে === */

.checkout-form-grid {

    display: grid;

    grid-template-columns: 1fr; /* মোবাইল ডিফল্ট */

    gap: 25px;

    padding: 0 1px; /* দুই পাশে সামান্য গ্যাপ */

}



@media (min-width: 992px) {

    .checkout-form-grid {

        grid-template-columns: 1fr 1fr; /* ডেস্কটপে ৫০-৫০ কলাম */

    }

}





.checkout-section {

    background: #ffffff;

    border: 1px solid #e0e0e0;

    border-radius: 0;

    margin-bottom: 20px;

}



.checkout-section h5 {

    background-color: #f0f0f0;

    padding: 8px 15px;

    margin: 0;

    font-size: 0.9rem;

    font-weight: bold; /* হেডার বোল্ড করা হয়েছে */

    border-bottom: 1px solid #e0e0e0;

}



.checkout-section .form-group {

    padding: 0 15px;

    margin-bottom: 15px;

}

.checkout-section .form-group:first-of-type {

    padding-top: 15px;

}

.checkout-section .form-group:last-of-type,

.checkout-section .attention-box {

    margin-bottom: 0;

    padding-bottom: 15px;

}



/* ... (অন্যান্য ফর্ম স্টাইল অপরিবর্তিত) ... */

.form-group label, .delivery-method-group > label {

    display: block;

    margin-bottom: 6px;

    font-weight: 500;

    font-size: 0.85rem;

}

.delivery-method-group > label {

    font-weight: bold; color: #333; font-size: 0.9rem;

}



.form-group select, .customer-info-field input, .customer-info-field textarea, .custom-pickup-address-group textarea {

    width: 100%;

    padding: 8px 12px;

    border: 1px solid #ced4da;

    border-radius: 4px;

    box-sizing: border-box;

    font-size: 0.85rem;

}

.form-group select:disabled { background-color: #e9ecef; cursor: not-allowed; }



.radio-option {

    display: flex;

    align-items: center;

}

.radio-option input[type="radio"] { margin: 0 8px 0 0; width: auto; }

.radio-option label { font-weight: normal; font-size: 0.9rem; margin-bottom: 0; }



.pickup-location-subgroup { margin-top: 12px; }

.custom-pickup-address-group { margin-top: 10px; }

.customer-information-group { padding-top: 10px; }

.customer-info-field { margin-top: 10px; }



.billing-checkbox-group { display: flex; align-items: center; margin-top: 10px; }

.billing-checkbox-group input { width: auto; margin-right: 8px; }

.billing-checkbox-group label { margin: 0; font-size: 0.85rem; }



.billing-information-group { margin-top: 15px; }

.billing-information-group > label { font-weight: bold; color: #333; font-size: 0.9rem; display: block; margin-bottom: 5px; }

.billing-information-group textarea, .custom-pickup-address-group textarea { min-height: 80px; resize: vertical; }



.attention-box {

    background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px;

    padding: 15px; margin: 15px; font-size: 0.8rem; line-height: 1.6;

}

.attention-box strong { display: block; margin-bottom: 10px; font-size: 0.9rem; }

.attention-box p { margin: 0 0 5px 0; }

.attention-box p:last-child { margin-bottom: 0; }



/* === নতুন: পেমেন্ট সেকশনের জন্য স্টাইল === */

.payment-options-wrapper {

    padding: 15px;

}

.payment-options-wrapper .radio-option {

    margin-bottom: 12px; /* অপশনগুলোর মধ্যে দূরত্ব */

}

.payment-options-wrapper .radio-option:last-child {

    margin-bottom: 0;

}



.checkout-section select:focus, .checkout-section textarea:focus, .checkout-section input:focus {

    outline: none; border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);

}



/* === চূড়ান্ত সংশোধিত: Complete Order সেকশনের জন্য স্টাইল === */



/* নতুন র‍্যাপার, যা বর্ডার ধারণ করবে */

.complete-order-wrapper {

    background-color: #ffffff;

    border: 1px solid #e0e0e0; /* ডেলিভারি সেকশনের মতো বর্ডার */

}



.complete-order-card {

    background-color: #ffffff;

    padding: 0;

    margin-bottom: 0;

    border: none; /* পরিবর্তন: বর্ডার সরানো হয়েছে কারণ র‍্যাপারে বর্ডার আছে */

}



.complete-order-title {

    background-color: #f0f0f0;

    padding: 10px 15px;

    margin: 0;

    font-size: 1.1rem;

    font-weight: 600;

    border-bottom: 1px solid #e0e0e0;

}



.order-summary-content {

    margin: 15px;

    padding: 15px;

    background-color: #fff;

    border: 1px solid #e0e0e0;

}



.summary-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-weight: bold;

    font-size: 1rem;

    padding-bottom: 10px;

    border-bottom: 1px solid #e0e0e0;

}



.summary-body {

    padding: 15px 0 5px 0;

}



.summary-product-item {

    display: flex;

    justify-content: space-between;

    font-size: 0.9rem;

    color: #333;

    padding-bottom: 10px;

}

.summary-product-item:last-child {

    border-bottom: none;

    margin-bottom: 0;

    padding-bottom: 0;

}

.summary-product-item span:first-child {

    max-width: 70%;

    padding-right: 10px;

}

.summary-product-item span:last-child {

    white-space: nowrap;

}



.summary-totals-list {

    padding: 15px 15px 0 15px;

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.summary-total-item {

    display: flex;

    justify-content: space-between;

    font-size: 0.95rem;

}



.summary-total-item.grand-total {

    font-weight: bold;

    font-size: 1.1rem;

    margin-top: 5px;

}



.terms-agreement-group {

    padding: 15px;

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 0.9rem;

}

.terms-agreement-group input[type="checkbox"] {

    margin: 0;

}

.terms-agreement-group label {

    margin: 0;

    font-weight: normal;

    color: #555;

}

.terms-agreement-group strong {

    color: #000;

}



.order-actions {

    display: flex;

    margin-top: 20px;

    gap: 1px;

}



.order-actions button {

    width: 50%;

    flex-grow: 1;

    padding: 15px 20px;

    border: none;

    font-size: 1rem;

    font-weight: 600;

    cursor: pointer;

    text-align: center;

    border-radius: 0;

    color: #ffffff;

}



.btn-back-checkout {

    background-color: #000000;

}



.btn-place-order-final {

    background-color: #a4d092;

}



.btn-place-order-final:disabled {

    background-color: #cccccc;

    cursor: not-allowed;

    opacity: 0.7;

}

/* my-php-website/assets/style.css (ফাইলের শেষে যোগ করুন) */



/* === থ্যাঙ্কিউ পেজের জন্য চূড়ান্ত এবং সম্পূর্ণ রেসপন্সিভ স্টাইল === */



.thankyou-page-wrapper {

    max-width: 800px; margin: 30px auto; background-color: #fff;

    font-family: Arial, sans-serif; color: #333;

    border: 1px solid #e0e0e0; border-radius: 0; padding: 30px;

}

.thankyou-page-wrapper .thankyou-header { text-align: center; margin-bottom: 30px; }

.thankyou-page-wrapper .thankyou-icon-container { color: #28a745; font-size: 4rem; line-height: 1; margin-bottom: 15px; }

.thankyou-page-wrapper .thankyou-header h1, .thankyou-page-wrapper .thankyou-header p { margin: 0 0 10px; }

.thankyou-page-wrapper .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 30px; }

.thankyou-page-wrapper .info-card { border: 1px solid #e0e0e0; border-radius: 0; background-color: #f9f9f9; }

.thankyou-page-wrapper .info-card .card-header { background-color: #f1f1f1; padding: 10px 15px; border-bottom: 1px solid #e0e0e0; }

.thankyou-page-wrapper .info-card .card-header h4 { margin: 0; font-size: 1rem; }

.thankyou-page-wrapper .info-card .card-body { padding: 15px; }

.thankyou-page-wrapper .info-card .card-body p { margin: 0 0 12px; font-size: 0.9rem; }

.thankyou-page-wrapper .info-card .card-body p:last-child { margin-bottom: 0; }



/* === ডেস্কটপ টেবিল === */

.thankyou-page-wrapper .order-summary-card { margin-bottom: 30px; }

.thankyou-page-wrapper .order-summary-card h4 { margin-bottom: 15px; border-bottom: 1px solid #ccc; padding-bottom: 10px; font-size: 1.2rem; }

.thankyou-page-wrapper .summary-table { width: 100%; border-collapse: collapse; }

.thankyou-page-wrapper .summary-table th, .thankyou-page-wrapper .summary-table td { padding: 12px; text-align: left; border-bottom: 1px solid #e0e0e0; }

.thankyou-page-wrapper .summary-table thead th { background-color: #f8f8f8; }

.thankyou-page-wrapper .summary-table tfoot td { border-bottom: none; }

.thankyou-page-wrapper .summary-table .text-right { text-align: right; }



/* === ডেস্কটপ বাটন === */

.thankyou-page-wrapper .thankyou-page-actions { display: flex; gap: 15px; margin-top: 20px; }

.thankyou-page-wrapper .btn-view-details, .thankyou-page-wrapper .btn-continue-shopping {

    width: 50%; padding: 15px 10px; text-decoration: none; font-weight: bold; color: white;

    text-align: center; border: none; cursor: pointer; transition: opacity 0.3s; border-radius: 0;

}

.thankyou-page-wrapper .btn-view-details { background-color: #000000; }

.thankyou-page-wrapper .btn-continue-shopping { background-color: #8DC63F; } /* === রঙ সংশোধন করা হয়েছে === */

.thankyou-page-wrapper .btn-view-details:hover, .thankyou-page-wrapper .btn-continue-shopping:hover { opacity: 0.85; }





/* === মোবাইল রেসপন্সিভ স্টাইল === */

@media (max-width: 767px) {

    .thankyou-page-wrapper { padding: 20px 15px; }

    .thankyou-page-wrapper .info-grid { grid-template-columns: 1fr; }



    /* === মোবাইল অর্ডার সামারি স্টাইল === */

    .thankyou-page-wrapper .summary-table { display: block; border: none; }

    .thankyou-page-wrapper .summary-table thead, .thankyou-page-wrapper .summary-table td[data-label="Subtotal"] { display: none; }

    .thankyou-page-wrapper .summary-table tbody { display: block; }

    .thankyou-page-wrapper .summary-table tr { display: block; }

    .thankyou-page-wrapper .summary-table tbody tr { border: 1px solid #e9ecef; border-radius: 4px; padding: 15px; margin-bottom: 15px; }

    .thankyou-page-wrapper .summary-table td { display: flex; justify-content: space-between; align-items: center; text-align: right; padding: 8px 0; border-bottom: 1px dotted #ccc; }

    .thankyou-page-wrapper .summary-table tbody td:last-of-type { border-bottom: none; }

    .thankyou-page-wrapper .summary-table td::before { content: attr(data-label); font-weight: 600; text-align: left; }

    .thankyou-page-wrapper .summary-table tfoot { display: block; }

    .thankyou-page-wrapper .summary-table tfoot tr { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; }

    .thankyou-page-wrapper .summary-table tfoot tr:last-child { border-top: 1px solid #ccc; margin-top: 8px; padding-top: 12px; font-size: 1.15rem; font-weight: bold; }

    .thankyou-page-wrapper .summary-table tfoot td { display: contents; }

    .thankyou-page-wrapper .summary-table tfoot td[colspan="3"] { font-weight: 600; }

    

    /* === চূড়ান্ত সংশোধিত মোবাইল বাটন স্টাইল === */

    .thankyou-page-wrapper .thankyou-page-actions { flex-direction: column; gap: 10px; }

    .thankyou-page-wrapper .btn-view-details, .thankyou-page-wrapper .btn-continue-shopping {

        width: 100%;

        padding: 12px 10px;

        font-size: 1rem;

        border-radius: 0; /* === শার্প কর্নার === */

        box-sizing: border-box; /* === প্রস্থের সমস্যা সমাধানের জন্য === */

    }

}

/* === মাই একাউন্ট পেজের জন্য সম্পূর্ণ এবং চূড়ান্ত CSS === */



/* পেজ কন্টেইনারের দুই পাশের গ্যাপ সরানো হয়েছে */

.my-account-page-container.container {

    padding-left: 0;

    padding-right: 0;

    max-width: 100%;

    margin-top: 2px;

}



/* === পরিবর্তন শুরু: শুধুমাত্র My Account পেজের ব্রেডক্রাম্বের জন্য স্টাইল নির্দিষ্ট করা হয়েছে === */

.my-account-page-container .checkout-breadcrumb {

    font-size: 0.85rem;

    font-weight: normal;

    padding: 6px 15px;

    background-color: transparent;

    border: none;

    margin-bottom: 0; /* এই পেজের জন্য কোনো বটম মার্জিন থাকবে না */

    color: var(--text-color);

}

/* === পরিবর্তন শেষ === */



.checkout-breadcrumb a {

    color: var(--dark-color);

    text-decoration: none;

}



/* My Account পেজের মূল লেআউট গ্রিড */

.account-layout-grid {

    display: grid;

    grid-template-columns: 3fr 7fr; 

    gap: 25px;

    padding: 20px 1px;

    align-items: start;

}



/* ব্যবহারকারীর তথ্য কার্ডের স্টাইল (কমপ্যাক্ট ভার্সন) */

.account-user-card {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 15px;

    border: 1px solid var(--border-color);

    background-color: #fff;

    border-radius: 0;

}



/* ব্যবহারকারীর আইকনের স্টাইল (আকার কমানো হয়েছে) */

.user-card-icon {

    font-size: 2.5rem;

    color: #4a5568;

    flex-shrink: 0;

}



/* ব্যবহারকারীর তথ্যের ফন্ট সাইজ কমানো হয়েছে */

.user-card-info {

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.user-card-info .user-name {

    font-size: 1rem;

    font-weight: 600;

    color: var(--dark-color);

}



.user-card-info .user-phone,

.user-card-info .user-email {

    font-size: 0.85rem;

    color: var(--text-color);

}



/* Account Navigation Card (উচ্চতা ও ফন্ট কমানো হয়েছে) */

.account-navigation-card {

    border: 1px solid var(--border-color);

    background-color: #fff;

    border-radius: 0;

    margin-top: 20px;

    overflow: hidden;

}



.account-navigation-card ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.account-navigation-card a {

    display: block;

    padding: 12px 20px;

    text-align: center;

    color: var(--dark-color);

    font-weight: 500;

    font-size: 0.9rem;

    text-decoration: none;

    border-bottom: 1px solid var(--border-color);

    transition: all 0.2s ease-in-out;

}



.account-navigation-card li:last-child a {

    border-bottom: none;

}



.account-navigation-card a:not(.active):hover {

    background-color: #f8f9fa;

}



.account-navigation-card a.active {

    background-color: #000000;

    color: #ffffff;

    font-weight: bold;

}



/* Account Main Content and Tabs */

.account-main-content {

    background-color: #fff;

    padding: 25px;

    border: 1px solid var(--border-color);

    border-radius: 0;

}



.account-tab-content {

    display: none;

    animation: fadeIn 0.4s;

}



.account-tab-content.active {

    display: block;

}



@keyframes fadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

}



/* My Orders পেজের নতুন ডিজাইন */

.orders-header {

    margin-bottom: 15px;

}

.orders-header h2 {

    font-size: 1.5rem;

    font-weight: 600;

    margin: 0;

}

.orders-item-count {

    font-size: 0.9rem;

    color: #6c757d;

    margin: 5px 0 0;

}



.order-list-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap; 

    gap: 15px;

    padding: 12px 20px;

    background-color: #f8f9fa;

    border: 1px solid var(--border-color);

    margin-bottom: 15px;

}



.order-id-block, .order-status-block, .order-date-block, .order-total-block {

    display: flex;

    align-items: center;

    gap: 8px;

}



.order-id-block {

    flex-direction: column;

    align-items: flex-start;

    gap: 5px;

}

.order-number {

    font-size: 1.1rem;

    font-weight: 600;

}

.view-order-link {

    font-size: 0.8rem;

    font-weight: bold;

    color: var(--primary-color);

    text-decoration: none;

}



.status-dot {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background-color: #6c757d;

}



/* ডাইনামিক স্ট্যাটাস ডটের জন্য রঙ */

.status-dot.status-dot-order-placed,

.status-dot.status-dot-order-confirmed { background-color: #17a2b8; }

.status-dot.status-dot-pending-payment,

.status-dot.status-dot-payment-failed { background-color: #ffc107; }

.status-dot.status-dot-delivered { background-color: #28a745; }

.status-dot.status-dot-cancelled { background-color: #dc3545; }

.status-dot.status-dot-in-transit { background-color: #fd7e14; }

.status-dot.status-dot-shipped { background-color: #007bff; }



.order-date-block i {

    font-size: 1.1rem;

}



.order-total-block {

    font-size: 1.1rem;

    font-weight: 500;

}



/* প্রোফাইল পেজের ফর্মের জন্য স্টাইল */

.profile-form-section {

    padding-bottom: 25px;

    margin-bottom: 25px;

    border-bottom: 1px solid var(--border-color);

}

.profile-form-section:last-of-type {

    border-bottom: none;

    margin-bottom: 0;

}

.profile-form-section h3 {

    font-size: 1.25rem;

    font-weight: 600;

    margin: 0 0 20px 0;

}



.form-row-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}

.password-grid {

    grid-template-columns: repeat(3, 1fr);

}



.profile-form-group label {

    display: block;

    font-weight: 500;

    margin-bottom: 8px;

    font-size: 0.9rem;

}



.profile-form-group input[type="text"],

.profile-form-group input[type="email"],

.profile-form-group input[type="tel"],

.profile-form-group input[type="password"],

.profile-form-group select {

    width: 100%;

    padding: 10px 12px;

    border: 1px solid #ced4da;

    border-radius: 4px;

    box-sizing: border-box;

    font-size: 0.95rem;

}

.profile-form-group input.readonly-field {

    background-color: #e9ecef;

    cursor: not-allowed;

}



.phone-input-group {

    display: flex;

}

.phone-input-group .country-code {

    flex-basis: 60px;

    flex-shrink: 0;

    border-right: none;

    border-radius: 4px 0 0 4px;

    background-color: #e9ecef;

    text-align: center;

}

.phone-input-group input[type="tel"] {

    border-radius: 0 4px 4px 0;

}



.btn-update-profile {

    background-color: #212529;

    color: #ffffff;

    border: none;

    padding: 10px 25px;

    border-radius: 4px;

    font-weight: bold;

    cursor: pointer;

    margin-top: 20px;

}



/* রেসপন্সিভ ডিজাইন */

@media (max-width: 991px) {

    .password-grid {

        grid-template-columns: 1fr;

    }

}

@media (max-width: 767px) {

    .account-layout-grid {

        grid-template-columns: 1fr;

    }

    .order-list-item {

        flex-direction: column;

        align-items: flex-start;

    }

}

@media (max-width: 576px) {

    .form-row-grid {

        grid-template-columns: 1fr;

    }

}

/* === নতুন: প্রোফাইল ইমেজ আপলোড ফিল্ডের জন্য চূড়ান্ত স্টাইল === */



.profile-form-group input[type="file"] {

    width: 100%;

    box-sizing: border-box;

    border: 1px solid #ced4da;

    border-radius: 4px;

    padding: 0; /* ভেতরের কন্টেন্ট ঠিকমতো দেখানোর জন্য প্যাডিং রিসেট */

    font-size: 0.9rem; /* টেক্সটকে সামঞ্জস্যপূর্ণ করতে */

    color: #495057;

    background-color: #fff;

    line-height: 2.5; /* টেক্সটকে ভার্টিকালি সেন্টারে আনার জন্য */

}



/* Webkit (Chrome, Safari) এবং অন্যান্য আধুনিক ব্রাউজারের জন্য বাটন স্টাইল */

.profile-form-group input[type="file"]::file-selector-button {

    background-color: #e9ecef;

    padding: 10px 12px;

    border: none;

    border-right: 1px solid #ced4da;

    margin-right: 12px;

    font-weight: 500;

    font-family: inherit;

    color: #495057;

    cursor: pointer;

    transition: background-color 0.2s;

}



.profile-form-group input[type="file"]::file-selector-button:hover {

    background-color: #dee2e6;

}

/* === অর্ডার ডিটেইলস পেজের জন্য সম্পূর্ণ এবং চূড়ান্ত CSS === */



.order-details-page-container.container {

    padding-left: 0;

    padding-right: 0;

    max-width: 100%;

}



.order-details-layout-grid {

    display: grid;

    grid-template-columns: 1fr; /* মোবাইল ডিফল্ট */

    gap: 25px;

    /* পরিবর্তন: উপরের প্যাডিং 0 করা হয়েছে */

    padding: 0 1px 20px; 

}



@media (min-width: 992px) {

    .order-details-layout-grid {

        /* ডেস্কটপে 70% / 30% অনুপাত */

        grid-template-columns: 7fr 3fr;

    }

}



.items-ordered-card {

    background-color: #ffffff;

    border: 1px solid #e0e0e0;

    border-radius: 0; /* শার্প কর্নার */

}



.items-ordered-card .card-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 20px;

    background-color: #f5f5f5;

    border-bottom: 1px solid #e0e0e0;

}



.items-ordered-card .card-header h3 {

    margin: 0;

    font-size: 1.1rem;

    font-weight: 600;

}



.btn-print-order {

    background-color: #6c757d;

    color: white;

    border: none;

    padding: 8px 15px;

    font-size: 0.85rem;

    border-radius: 4px;

    cursor: pointer;

    transition: background-color 0.2s;

}

.btn-print-order:hover {

    background-color: #5a6268;

}

.btn-print-order i {

    margin-right: 8px;

}



.items-ordered-card .card-body {

    padding: 20px;

}



.ordered-product-item {

    display: grid;

    grid-template-columns: auto 1fr auto auto;

    align-items: center;

    gap: 40px;

    padding: 8px 0; /* উচ্চতা কমানোর জন্য প্যাডিং */

    border-bottom: 1px solid #f0f0f0;

}

.ordered-product-item:last-child {

    border-bottom: none;

    padding-bottom: 0;

}

.ordered-product-item:first-child {

    padding-top: 0;

}



.product-image-container img {

    width: 50px; /* উচ্চতা কমানোর জন্য ছবির আকার */

    height: 50px; /* উচ্চতা কমানোর জন্য ছবির আকার */

    object-fit: cover;

    border: 1px solid #eee;

}



.product-details-container {

    display: flex;

    flex-direction: column;

    gap: 5px;

}



.product-details-container .product-name {

    font-weight: 600;

    color: #333;

}



.product-details-container .product-sku {

    font-size: 0.9rem;

    color: #777;

}



.product-quantity-container,

.product-price-container {

    font-size: 0.95rem;

    font-weight: 500;

    white-space: nowrap;

}



/* মোবাইল ডিভাইসের জন্য রেসপন্সিভ স্টাইল */

@media (max-width: 576px) {

    .order-details-layout-grid {

        padding: 0 15px 20px; /* মোবাইলের জন্য উপরের প্যাডিংও 0 করা হলো */

    }



    .ordered-product-item {

        grid-template-columns: auto 1fr; /* ছবি এবং বাকি তথ্য দুই কলামে */

        grid-template-rows: auto auto;

        row-gap: 10px;

        gap: 15px; /* মোবাইলের জন্য গ্যাপ কমানো হলো */

    }

    .product-image-container {

        grid-row: 1 / 3; /* ছবিকে দুই রো জুড়ে জায়গা দেওয়া */

    }

    .product-details-container {

        grid-column: 2 / 3;

    }

    .product-quantity-container {

        grid-row: 2 / 3;

        grid-column: 2 / 3;

        justify-self: start; /* কোয়ান্টিটি বাম দিকে অ্যালাইন করা */

    }

    .product-price-container {

        grid-row: 2 / 3;

        grid-column: 2 / 3;

        justify-self: end; /* মূল্য ডান দিকে অ্যালাইন করা */

    }

    

    .items-ordered-card .card-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

    }

}

/* my-php-website/assets/style.css (ফাইলের শেষে যোগ করুন) */



/* === নতুন: অর্ডার ট্র্যাকিং ইনফরমেশন কার্ড === */

.tracking-info-card {

    background-color: #ffffff;

    border: 1px solid #e0e0e0;

    border-radius: 0;

    margin-top: 25px; /* উপরের কার্ড থেকে দূরত্ব */

}



.tracking-info-card .card-header {

    padding: 10px 20px;

    background-color: #f5f5f5;

    border-bottom: 1px solid #e0e0e0;

}



.tracking-info-card .card-header h3 {

    margin: 0;

    font-size: 1.1rem;

    font-weight: 600;

}



.tracking-info-card .card-body {

    padding: 30px 20px;

}



.tracking-timeline-horizontal {

    display: flex;

    justify-content: space-around;

    align-items: flex-start;

}



.tracking-step {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    width: 120px;

    color: #b0b0b0; /* ডিফল্ট রঙ (inactive) */

}



.step-icon-wrapper {

    position: relative;

    width: 70px;

    height: 70px;

    border: 2px solid #e0e0e0;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

    background-color: #f9f9f9;

    margin-bottom: 10px;

}



.status-badge {

    position: absolute;

    top: -5px;

    right: -5px;

    width: 24px;

    height: 24px;

    background-color: #28a745;

    color: white;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.8rem;

    border: 2px solid white;

}



.step-text {

    font-size: 0.9rem;

    font-weight: 500;

}



/* যখন কোনো ধাপ Active হবে */

.tracking-step.active {

    color: #333; /* Active টেক্সটের রঙ */

}



.tracking-step.active .step-icon-wrapper {

    border-color: #333;

    background-color: #fff;

}

/* my-php-website/assets/style.css (ফাইলের শেষে যোগ করুন) */



/* === নতুন: FAQ কার্ডের জন্য স্টাইল === */

.faq-card {

    background-color: #ffffff;

    border: 1px solid #e0e0e0;

    border-radius: 0;

    margin-top: 25px; /* উপরের কার্ড থেকে দূরত্ব */

}



.faq-card .card-header {

    padding: 10px 20px;

    background-color: #f5f5f5;

    border-bottom: 1px solid #e0e0e0;

}



.faq-card .card-header h3 {

    margin: 0;

    font-size: 1.1rem;

    font-weight: 600;

}



.faq-card .card-body {

    padding: 20px;

}



.faq-item {

    margin-bottom: 20px;

}



.faq-item:last-child {

    margin-bottom: 0;

}



.faq-question, .faq-answer {

    margin: 0 0 8px 0;

    line-height: 1.6;

}



.faq-question strong, .faq-answer strong {

    margin-right: 8px;

}

/* my-php-website/assets/style.css ফাইলে এই কোডটুকু আপডেট করুন */



/* === অর্ডার ডিটেইলস সাইডবার কার্ড (সংশোধিত) === */

.order-summary-sidebar-card {

    background-color: #ffffff; /* পরিবর্তন: ব্যাকগ্রাউন্ডের রঙ সাদা করা হয়েছে */

    border: 1px solid #e0e0e0;

    padding: 20px;

    border-radius: 0;

}



.order-summary-sidebar-card p {

    margin: 0 0 12px 0;

    line-height: 1.5;

}



.order-summary-sidebar-card p:last-child {

    margin-bottom: 0;

}



.order-summary-sidebar-card .order-date {

    font-size: 0.95rem;

    color: #333;

}



.order-summary-sidebar-card .payment-amount,

.order-summary-sidebar-card .order-id-status {

    font-size: 1.1rem;

    font-weight: bold;

    color: #212529;

}

/* my-php-website/assets/style.css (ফাইলের শেষে যোগ করুন) */



/* === নতুন: অর্ডার সামারি ডিটেইলস কার্ড === */

.order-summary-details-card {

    background-color: #ffffff;

    border: 1px solid #e0e0e0;

    border-radius: 0;

    margin-top: 25px; /* উপরের কার্ড থেকে দূরত্ব */

}



.order-summary-details-card .card-header {

    padding: 10px 20px;

    background-color: #f5f5f5;

    border-bottom: 1px solid #e0e0e0;

}



.order-summary-details-card .card-header h3 {

    margin: 0;

    font-size: 1.1rem;

    font-weight: 600;

}



.order-summary-details-card .card-body {

    padding: 20px;

}



.summary-line {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 15px;

    font-size: 0.95rem;

}



.summary-line:last-child {

    margin-bottom: 0;

}



.summary-line.grand-total {

    font-weight: bold;

    font-size: 1.1rem;

    padding-top: 15px;

    border-top: 1px solid #e0e0e0;

}

/* my-php-website/assets/style.css (ফাইলের শেষে যোগ করুন) */



/* === নতুন: ডেলিভারি ইনফরমেশন সাইডবার কার্ড === */

.delivery-info-sidebar-card {

    background-color: #ffffff;

    border: 1px solid #e0e0e0;

    border-radius: 0;

    margin-top: 25px; /* উপরের কার্ড থেকে দূরত্ব */

}



.delivery-info-sidebar-card .card-header {

    padding: 10px 20px;

    background-color: #f5f5f5;

    border-bottom: 1px solid #e0e0e0;

}



.delivery-info-sidebar-card .card-header h3 {

    margin: 0;

    font-size: 1.1rem;

    font-weight: bold;

    color: #212529;

}



.delivery-info-sidebar-card .card-body {

    padding: 20px;

}



.delivery-info-sidebar-card .card-body p {

    margin: 0 0 12px 0;

    font-size: 0.95rem;

    line-height: 1.6;

    color: #333;

}



.delivery-info-sidebar-card .card-body p:last-child {

    margin-bottom: 0;

}



.delivery-info-sidebar-card .card-body p strong {

    font-weight: bold;

    margin-right: 5px;

}

/* my-php-website/assets/style.css (ফাইলের শেষে যোগ করুন) */



/* === নতুন: পেমেন্ট এবং সাপোর্ট সাইডবার কার্ড === */

.payment-support-sidebar-card {

    background-color: #ffffff;

    border: 1px solid #e0e0e0;

    border-radius: 0;

    margin-top: 25px;

    padding: 20px;

}



.payment-support-sidebar-card h4 {

    margin: 0 0 8px 0;

    font-size: 1.1rem;

    font-weight: bold;

    color: #212529;

}



.payment-support-sidebar-card p {

    margin: 0;

    font-size: 0.95rem;

    color: #333;

}



.payment-support-sidebar-card .section-divider {

    border: none;

    border-top: 1px solid #e0e0e0;

    margin: 20px 0;

}

/* my-php-website/assets/style.css (ফাইলের শেষে যোগ করুন) */



/* === নতুন: Pay Now বাটন এবং স্ট্যাটাস লেআউটের জন্য === */

.order-status-wrapper {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

}



.order-id-status-wrapper {

    flex-grow: 1;

}



.btn-pay-now {

    background-color: #28a745;

    color: white;

    padding: 8px 18px;

    border-radius: 4px;

    text-decoration: none;

    font-weight: bold;

    font-size: 0.9rem;

    transition: background-color 0.2s;

}



.btn-pay-now:hover {

    background-color: #218838;

    color: white;

}



.order-id-status {

    font-size: 1.1rem;

    font-weight: bold;

    color: #212529;

    margin: 0 !important;

}

/* === নতুন: পেমেন্ট স্ট্যাটাস ও ট্রানজ্যাকশন আইডি বক্সের জন্য স্টাইল === */

.transaction-info-box {

    border: 1px solid #333; /* কালো বর্ডার */

    border-radius: 4px;

    padding: 12px;

    margin-top: 15px;

    background-color: #f8f9fa; /* হালকা ধূসর ব্যাকগ্রাউন্ড */

}

.transaction-info-box p {

    margin: 0 0 8px 0;

    font-size: 0.9rem;

}

.transaction-info-box p:last-child {

    margin-bottom: 0;

}

.transaction-info-box strong {

    font-weight: 600;

    color: #212529;

}

/* === নতুন: ডেলিভারি ইনফরমেশন কার্ডের ভেতরের ট্র্যাকিং বক্সের জন্য স্টাইল === */

.tracking-details-box {

    border: 1px solid #ffffff; /* আপনার অনুরোধ অনুযায়ী সাদা বর্ডার */

    box-shadow: 0 0 0 1px #e0e0e0; /* সাদা বর্ডারকে দৃশ্যমান করার জন্য হালকা শ্যাডো */

    border-radius: 4px;

    padding: 12px;

    margin-top: 15px;

    background-color: #f8f9fa; /* হালকা ধূসর ব্যাকগ্রাউন্ড */

}

.tracking-details-box p {

    margin: 0 0 8px 0;

    font-size: 0.9rem;

}

.tracking-details-box p:last-child {

    margin-bottom: 0;

}

.tracking-details-box strong {

    font-weight: 600;

    color: #212529;

}

/* my-php-website/assets/style.css (ফাইলের শেষে যোগ করুন) */



/* === শুধুমাত্র অর্ডার ডিটেইলস পেজের জন্য সম্পূর্ণ মোবাইল CSS === */

@media (max-width: 767px) {

    /* মূল লেআউটকে এক কলামে আনা */

    .order-details-layout-grid {

        grid-template-columns: 1fr;

        padding: 0 15px 20px;

    }



    /* "Items Ordered" হেডার এবং প্রিন্ট বাটনকে পাশাপাশি রাখা */

    .items-ordered-card .card-header {

        flex-direction: row;

        justify-content: space-between;

        align-items: center;

        gap: 15px;

    }



    /* অন্য কার্ডের হেডারগুলোকে একটির নিচে একটি রাখা */

    .tracking-info-card .card-header,

    .faq-card .card-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

    }



    /* অর্ডার করা আইটেমগুলোর লেআউট পরিবর্তন করা */

    .ordered-product-item {

        grid-template-columns: auto 1fr;

        grid-template-rows: auto auto;

        row-gap: 10px;

        column-gap: 15px;

        padding: 15px 0;

    }



    .product-image-container {

        grid-row: 1 / 3; /* ছবিকে দুটি রো জুড়ে জায়গা দেওয়া */

    }



    .product-details-container {

        grid-column: 2 / 3;

    }



    .product-quantity-container {

        grid-row: 2 / 3;

        grid-column: 2 / 3;

        justify-self: start; /* কোয়ান্টিটি বাম দিকে অ্যালাইন করা */

    }



    .product-price-container {

        grid-row: 2 / 3;

        grid-column: 2 / 3;

        justify-self: end; /* মূল্য ডান দিকে অ্যালাইন করা */

    }



    /* ট্র্যাকিং টাইমলাইনকে আনুভূমিক থেকে উলম্ব করা */

    .tracking-timeline-horizontal {

        flex-direction: column;

        align-items: flex-start;

        gap: 25px;

    }

    

    .tracking-step {

        flex-direction: row;

        align-items: center;

        text-align: left;

        width: 100%;

        gap: 15px;

    }

    

    .step-icon-wrapper {

        margin-bottom: 0;

        width: 60px;

        height: 60px;

        font-size: 1.8rem;

    }

}

/* my-php-website/assets/style.css (ফাইলের শেষে যোগ করুন) */



/* === নতুন: ডেলিভারি ইনফরমেশন কার্ডের ভেতরের ট্র্যাকিং বক্সের জন্য স্টাইল === */

.tracking-details-box {

    border: 1px solid #ffffff; /* আপনার অনুরোধ অনুযায়ী সাদা বর্ডার */

    box-shadow: 0 0 0 1px #e0e0e0; /* সাদা বর্ডারকে দৃশ্যমান করার জন্য হালকা শ্যাডো */

    border-radius: 4px;

    padding: 12px;

    margin-top: 15px;

    background-color: #f8f9fa; /* হালকা ধূসর ব্যাকগ্রাউন্ড */

}

.tracking-details-box p {

    margin: 0 0 8px 0;

    font-size: 0.9rem;

}

.tracking-details-box p:last-child {

    margin-bottom: 0;

}

.tracking-details-box strong {

    font-weight: 600;

    color: #212529;

}

/* === নতুন: Image Effect ব্লকের জন্য হোভার জুম ইফেক্ট === */

.zoom-on-hover-element {

    /* অ্যানিমেশনকে স্মুথ করার জন্য */

    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.swiper-slide:hover .zoom-on-hover-element {

    /* মাউস নিলে ইমেজটি ১০% বড় হবে */

    transform: scale(1.1);

}



/* === Custom Product Card === */

.custom-product-card {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    border: none;

    background-color: #fff;

    border-radius: 8px;

    overflow: hidden;

    transition: box-shadow 0.3s ease;

}

.custom-product-card:hover {

    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);

}

.custom-product-card .custom-image {

    aspect-ratio: 1 / 0.95;

    position: relative;

    overflow: hidden;

}

.custom-product-card .custom-image img.main-img,

.custom-product-card .custom-image img.gallery-img {

    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease;

}

.custom-product-card .custom-image img.main-img {

    opacity: 1;

    position: relative;

    z-index: 1;

}

.custom-product-card .custom-image img.gallery-img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0;

    z-index: 2;

}

.custom-product-card:hover .custom-image img.main-img,

.custom-product-card:hover .custom-image img.gallery-img {

    transform: scale(1.15);

}

.custom-product-card:hover .custom-image.has-gallery img.main-img {

    opacity: 0;

}

.custom-product-card:hover .custom-image.has-gallery img.gallery-img {

    opacity: 1;

}

.custom-product-card .custom-product-info {

    text-align: left;

    padding: 12px 15px;

}

.custom-product-card .product-name {

    height: auto;

    margin-bottom: 5px;

    font-size: 1rem;

    font-weight: 500;

}

.custom-product-card .product-price-container {

    justify-content: flex-start;

}



/* ========================================================================= */

/* REDESIGN: PRODUCT DETAILS RIGHT COLUMN (MATCHING IMAGE)                  */

/* ========================================================================= */



.product-info-v2.redesign-img {

    display: flex;

    flex-direction: column;

    padding: 30px 10px;

    background: #fff;

    font-family: 'Inter', sans-serif;

    border: none; /* Removing old border to match image if any */

}



.p-title-img {

    font-size: 2rem !important; /* Smaller size */

    font-weight: 800 !important;

    color: #111 !important;

    margin: 0 0 10px 0 !important; /* Reduced margin */

    line-height: 1.1 !important;

}



.p-price-row-img {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 20px;

}

.p-price-current-img {

    font-size: 1.4rem;

    color: #111;

    font-weight: 500;

}

.p-price-old-img {

    font-size: 1.2rem;

    color: #888;

    text-decoration: line-through;

    font-weight: 500;

}

.p-badge-sale-img {

    border: 1px solid #ddd;

    color: #888;

    font-size: 0.75rem;

    font-weight: 600;

    padding: 3px 6px;

    border-radius: 4px;

    letter-spacing: 0.5px;

    text-transform: uppercase;

}

.p-badge-discount-img {

    background: #111;

    color: #fff;

    font-size: 0.75rem;

    font-weight: 600;

    padding: 3px 6px;

    border-radius: 4px;

}



.p-rating-row-img {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 15px; /* Reduced margin */

}

.p-stars-img .fa-star {

    font-size: 0.9rem;

    color: #111 !important; /* Force black stars */

}

.p-review-count-img {

    color: #555;

    font-size: 0.9rem;

    text-decoration: none;

}



.p-vendor-row-img {

    margin-bottom: 25px;

    font-size: 1rem;

}

.p-label-img {

    font-weight: 700;

    color: #333;

}

.p-value-img {

    color: #666;

}



.p-variant-row-img {

    margin-bottom: 15px; /* Reduced margin */

}

.p-variant-header-img {

    margin-bottom: 10px;

    font-size: 1rem;

}

.p-swatches-img {

    display: flex;

    gap: 10px;

}

.p-swatch-img {

    width: 35px;

    height: 35px;

    border-radius: 50%;

    border: 1px solid #ddd;

    padding: 2px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    transition: all 0.2s;

}

.p-swatch-img.active {

    border: 2px solid #111;

}

.p-swatch-img img {

    width: 100%;

    height: 100%;

    border-radius: 50%;

    object-fit: cover;

}



.p-storage-options-img {

    display: flex;

    gap: 10px;

}

.p-storage-btn-img {

    padding: 10px 15px;

    border: 1px solid #ccc;

    background: #fff;

    color: #555;

    font-size: 0.9rem;

    font-family: 'Inter', sans-serif;

    cursor: pointer;

    transition: all 0.2s;

}

.p-storage-btn-img.active {

    background: #111;

    color: #fff;

    border-color: #111;

}



.p-quantity-label-img {

    font-weight: 700;

    color: #333;

    margin-bottom: 15px;

}



.p-actions-row-img {

    display: flex;

    gap: 15px;

    margin-bottom: 15px;

}

.p-qty-control-img {

    display: flex;

    align-items: center;

    border: 1px solid #ccc !important;

    border-radius: 30px !important;

    padding: 0 10px;

    height: 50px;

    width: 130px;

    background: #fff;

}

.p-qty-control-img button {

    background: transparent;

    border: none;

    color: #555;

    font-size: 1.2rem;

    cursor: pointer;

    width: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.p-qty-control-img input {

    width: 40px;

    text-align: center;

    border: none;

    font-size: 1rem;

    font-weight: 500;

    background: transparent;

}

.p-btn-add-cart-img {

    flex-grow: 1;

    height: 50px;

    border-radius: 30px !important;

    border: 1px solid #111 !important;

    background: #fff !important;

    color: #111 !important;

    font-size: 1rem !important;

    font-weight: 500 !important;

    cursor: pointer;

    transition: all 0.3s;

}

.p-btn-add-cart-img:hover {

    background: #f5f5f5 !important;

}



.p-btn-buy-now-img {

    width: 100%;

    height: 50px;

    border-radius: 30px;

    border: none;

    background: #111;

    color: #fff;

    font-size: 1rem;

    font-weight: 500;

    cursor: pointer;

    margin-bottom: 30px;

    transition: all 0.3s;

}

.p-btn-buy-now-img:hover {

    background: #333;

}



.p-safe-checkout-img p {

    color: #555;

    margin-bottom: 15px;

    font-size: 0.95rem;

}

.p-payment-icons-img {

    display: flex;

    gap: 10px;

    align-items: center;

}

.p-payment-icons-img img {

    height: 24px;

    border: 1px solid #eee;

    padding: 2px 4px;

    border-radius: 4px;

    background: #fff;

}



/* === FIX: Override old base styles inside redesigned product page === */

.redesign-img .p-actions-row-img.actions-v2 {

    border-top: none;

    border-bottom: none;

    flex-wrap: nowrap;

    padding: 0;

    display: flex;

    gap: 15px;

    align-items: center;

    margin-bottom: 15px;

}

.redesign-img .p-qty-control-img.quantity-control-v2 {

    border: 1px solid #ccc;

    border-radius: 30px;

    padding: 0 10px;

    height: 50px;

    width: 140px;

    flex-shrink: 0;

    background: #fff;

}

.redesign-img .p-qty-control-img .quantity-btn {

    background: transparent;

    border: none;

    color: #555;

    font-size: 1.2rem;

    cursor: pointer;

    width: 35px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.redesign-img .p-qty-control-img .quantity-input-v2 {

    width: 40px;

    height: 36px;

    text-align: center;

    border: none;

    border-left: none;

    border-right: none;

    font-size: 1rem;

    font-weight: 500;

    background: transparent;

}

.redesign-img .p-btn-add-cart-img.btn-add-to-cart-v2 {

    flex-grow: 0;

    height: 55px;

    border-radius: 30px;

    border: 1px solid #111;

    background: #fff;

    color: #111;

    font-size: 1rem;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.3s;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 50px;

    width: auto;

}

.redesign-img .p-btn-add-cart-img.btn-add-to-cart-v2:hover {

    background: #f5f5f5;

}



/* === Sticky Product Bar === */

.sticky-product-bar {

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    background-color: #ffffff;

    box-shadow: 0 -4px 15px rgba(0,0,0,0.08);

    z-index: 1000;

    transform: translateY(100%);

    transition: transform 0.3s ease-in-out;

    border-top: 1px solid #eaeaea;

}



.sticky-product-bar.visible {

    transform: translateY(0);

}



.sticky-bar-container {

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 25px;

    height: 70px;

}



.sticky-product-info {

    display: flex;

    align-items: center;

    gap: 15px;

}



.sticky-product-img {

    width: 45px;

    height: 45px;

    object-fit: contain;

    border: 1px solid #eee;

    background: #f9f9f9;

    border-radius: 4px;

}



.sticky-product-title {

    font-size: 1rem;

    font-weight: 500;

    color: #333;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    max-width: 300px;

}



.sticky-product-actions {

    display: flex;

    align-items: center;

    gap: 15px;

}



.sticky-variant-select {

    padding: 8px 30px 8px 12px;

    border: 1px solid #ccc;

    border-radius: 0;

    background-color: white;

    font-size: 0.9rem;

    color: #333;

    appearance: none;

    background-image: url('data:image/svg+xml;utf8,<svg fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><polyline points="6 9 12 15 18 9"/></svg>');

    background-repeat: no-repeat;

    background-position: right 8px center;

    background-size: 14px;

    min-width: 200px;

    cursor: pointer;

}



.sticky-qty-control {

    display: flex;

    align-items: center;

    border-radius: 30px;

    border: 1px solid #e0e0e0;

    overflow: hidden;

    height: 40px;

    background: white;

}



.sticky-qty-control .qty-btn {

    width: 35px;

    height: 40px;

    background: transparent;

    border: none;

    cursor: pointer;

    font-size: 1.1rem;

    color: #333;

}



.sticky-qty-control .qty-input {

    width: 40px;

    height: 40px;

    border: none;

    text-align: center;

    font-size: 1rem;

    font-weight: 500;

    pointer-events: none;

}



.sticky-btn-cart, .sticky-btn-buy {

    height: 40px;

    padding: 0 25px;

    border-radius: 30px;

    font-size: 0.95rem;

    font-weight: 500;

    cursor: pointer;

    border: none;

    display: flex;

    align-items: center;

    justify-content: center;

}



.sticky-btn-cart {

    background-color: #111;

    color: #fff;

    transition: background-color 0.2s;

}



.sticky-btn-cart:hover {

    background-color: #333;

}



.sticky-btn-buy {

    background-color: #111;

    color: #fff;

    transition: background-color 0.2s;

}



.sticky-btn-buy:hover {

    background-color: #333;

}



@media (max-width: 992px) {

    .sticky-product-title, .sticky-variant-select {

        display: none;

    }

}

@media (max-width: 576px) {

    .sticky-qty-control {

        display: none;

    }

    .sticky-product-actions {

        width: 100%;

        justify-content: flex-end;

    }

    .sticky-bar-container {

        padding: 10px 15px;

    }

}



/* === New Layout Right Column Sections === */



/* Pickup Info */

.p-pickup-info {

    margin-top: 15px; /* Reduced margin */

    padding: 10px 0; /* Reduced padding */

    border-top: 1px solid #eaeaea;

    border-bottom: 1px solid #eaeaea;

}

.p-pickup-info p {

    margin-bottom: 5px;

    font-size: 0.95rem;

    color: #333;

}

.pickup-status {

    font-weight: 500;

}

.pickup-time {

    color: #666;

    font-size: 0.9rem;

    margin-left: 20px;

}

.view-store-info {

    font-size: 0.9rem;

    color: #333;

    text-decoration: underline;

    margin-left: 20px;

    display: inline-block;

    margin-top: 5px;

}

.view-store-info:hover {

    color: #000;

}



/* Accordions */

.p-accordions-wrapper {

    margin-top: 10px; /* Reduced margin */

}

.p-accordion {

    border: 1px solid #111;

    margin-bottom: -1px; /* collapse borders */

    background: #fff;

}

.p-accordion summary {

    list-style: none;

    padding: 15px 20px;

    font-weight: 600;

    font-size: 1.1rem;

    cursor: pointer;

    display: flex;

    align-items: center;

    position: relative;

    color: #111;

}

.p-accordion summary::-webkit-details-marker {

    display: none;

}

.p-accordion summary i:first-child {

    margin-right: 15px;

    font-size: 1.2rem;

}

.p-accordion summary .toggle-icon {

    position: absolute;

    right: 20px;

    transition: transform 0.3s ease;

    font-size: 0.9rem;

    color: #666;

}

.p-accordion[open] summary .toggle-icon {

    transform: rotate(180deg);

}

.p-accordion .accordion-content {

    padding: 0 20px 20px 50px;

    font-size: 0.95rem;

    color: #555;

    line-height: 1.6;

}



/* Social Share */

.p-social-share {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 15px; /* Reduced margin */

}

.p-social-share .share-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 15px;

    border: 1px solid #dcdcdc;

    border-radius: 4px;

    color: #333;

    font-size: 0.9rem;

    font-weight: 500;

    transition: all 0.2s;

    background: #fff;

}

.p-social-share .share-btn:hover {

    border-color: #999;

    color: #000;

}



/* Extra Links */

.p-extra-links {

    margin-top: 15px; /* Reduced margin */

    display: flex;

    flex-direction: column;

    gap: 8px; /* Reduced gap */

}

.p-extra-links .extra-link {

    color: #333;

    text-decoration: underline;

    font-size: 1rem;

    font-weight: 500;

}

.p-extra-links .extra-link:hover {

    color: #000;

}



/* Customer Reviews Summary */

.p-customer-reviews-summary {

    margin-top: 25px; /* Reduced margin */

    text-align: center;

    padding: 20px 20px; /* Reduced padding */

    background: #fdfdfd;

    border: 1px dashed #e0e0e0;

    border-radius: 8px;

}

.p-customer-reviews-summary h4 {

    font-size: 1.4rem;

    font-weight: 600;

    margin-bottom: 15px;

    color: #111;

}

.p-customer-reviews-summary .stars {

    font-size: 1.2rem;

    color: #ddd; /* Empty star color */

    margin-bottom: 10px;

}

.p-customer-reviews-summary .stars .filled {

    color: #e2c044; /* Yellow star color */

}

.p-customer-reviews-summary p {

    color: #666;

    margin-bottom: 20px;

    font-size: 0.95rem;

}

.btn-write-review {

    background-color: #e2c044;

    color: #fff;

    border: none;

    padding: 12px 30px;

    font-size: 1rem;

    font-weight: 600;

    cursor: pointer;

    transition: background-color 0.2s;

}

.btn-write-review:hover {

    background-color: #d1b038;

}



/* Full Width Similar Products */

.similar-products-full-width {

    margin-top: 50px;

}

/* ========================================================================= */

/* WISHLIST PAGE REDESIGN & PRODUCT CARD ACTIONS                             */

/* ========================================================================= */



/* ১৪১৫ পিক্সেল গ্যাপের জন্য নির্দিষ্ট কন্টেইনার */

.wishlist-container {

    max-width: 1415px;

    margin: 0 auto;

    padding: 0 15px;

    width: 100%;

    box-sizing: border-box;

}



/* ব্রেডক্রাম্ব এরিয়া (হেডারের সাথে লাগানো এবং সঠিক উচ্চতা) */

.wishlist-header-banner {

    background-color: #f4f5f7; 

    padding: 35px 0; 

    width: 100%;

    margin-top: -20px; /* হেডারের সাথে একদম লাগিয়ে দেওয়ার জন্য */

    margin-bottom: 40px; 

}



.wishlist-breadcrumb {

    font-family: 'Inter', sans-serif;

    color: #555;

    font-size: 0.95rem;

}



.wishlist-breadcrumb a {

    color: #555;

    text-decoration: none;

    transition: color 0.2s;

}



.wishlist-breadcrumb a:hover {

    color: #111;

    text-decoration: underline;

}



/* এম্পটি স্টেট ডিজাইন (ছবির মতো হুবহু) */

.wishlist-empty-state {

    text-align: left;

    padding: 20px 0 100px 0;

    font-family: 'Inter', sans-serif;

}



.wishlist-empty-state h1 {

    font-size: 3.8rem;

    font-weight: 700;

    color: #111;

    margin: 0 0 20px 0;

    letter-spacing: -1px;

}



.wishlist-empty-state a {

    font-size: 1rem;

    color: #555;

    text-decoration: none;

    transition: color 0.3s;

}



.wishlist-empty-state a:hover {

    color: #111;

    text-decoration: underline;

}



/* ৪ কলামের প্রোডাক্ট গ্রিড */

.wishlist-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

    margin-bottom: 50px;

}



/* ==========================================

   উইশলিস্ট প্রোডাক্ট কার্ড হোভার অ্যাকশন

   ========================================== */



.best-selling-image-wrapper {

    position: relative;

    overflow: hidden;

}



.wishlist-hover-actions {

    position: absolute;

    bottom: -60px; /* ডিফল্টভাবে ছবির নিচে লুকানো থাকবে */

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 12px;

    transition: bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    z-index: 10;

    width: max-content;

    justify-content: center;

}



.best-selling-card:hover .wishlist-hover-actions {

    bottom: 20px; /* হোভার করলে নিচ থেকে উপরে উঠে আসবে */

}



.wishlist-action-btn {

    width: 45px;

    height: 45px;

    border-radius: 50% !important;

    background-color: #fff !important;

    color: #111 !important;

    border: none !important;

    padding: 0 !important;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.2rem;

    cursor: pointer;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);

    transition: all 0.3s ease;

    text-decoration: none;

}



.wishlist-action-btn:hover {

    background-color: #111;

    color: #fff;

}



/* ছবির ডিজাইনের সাথে মিল রেখে শেষের রিমুভ বাটনটি কালো করা হয়েছে */

.wishlist-action-btn.remove-wishlist-btn {

    background-color: #111;

    color: #fff;

}



.wishlist-action-btn.remove-wishlist-btn:hover {

    background-color: #ff4d4d; /* হোভার করলে লাল হবে */

    color: #fff;

}



/* ==========================================

   রেসপন্সিভ ডিজাইন

   ========================================== */

@media (max-width: 1024px) {

    .wishlist-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}



@media (max-width: 768px) {

    .wishlist-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .wishlist-empty-state h1 {

        font-size: 2.8rem;

    }

    .wishlist-header-banner {

        padding: 25px 0;

    }

}



@media (max-width: 576px) {

    .wishlist-grid {

        grid-template-columns: repeat(2, 1fr) !important;

        gap: 6px !important;

    }

    .wishlist-empty-state h1 {

        font-size: 2.2rem;

    }

}

/* ========================================================================= */

/* WISHLIST PRODUCT CARD HOVER ACTIONS (Slide from Bottom)                   */

/* ========================================================================= */



.custom-product-card .custom-image {

    position: relative;

    overflow: hidden; /* এটি নিশ্চিত করবে বাটনগুলো বাইরে গেলে দেখা যাবে না */

}



.wishlist-hover-actions {

    position: absolute;

    bottom: -60px; /* ডিফল্টভাবে ছবির নিচে লুকানো থাকবে */

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 12px;

    transition: bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease;

    z-index: 10;

    width: max-content;

    justify-content: center;

    opacity: 0;

    pointer-events: none;

}



/* যখন পুরো কার্ডে হোভার করা হবে, তখন বাটনগুলো উপরে উঠবে */

.custom-product-card:hover .wishlist-hover-actions {

    bottom: 20px; 

    opacity: 1;

    pointer-events: auto;

}



.wishlist-action-btn {

    width: 45px;

    height: 45px;

    border-radius: 50%;

    background-color: #fff;

    color: #111;

    border: none;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.1rem;

    cursor: pointer;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);

    transition: all 0.3s ease;

    text-decoration: none;

}



.wishlist-action-btn:hover {

    background-color: #111;

    color: #fff;

}



/* কালো রিমুভ বাটন */

.wishlist-action-btn.remove-wishlist-btn {

    background-color: #111;

    color: #fff;

}



.wishlist-action-btn.remove-wishlist-btn:hover {

    background-color: #ff4d4d; /* হোভার করলে লাল হবে */

    color: #fff;

}

/* ========================================================================= */

/* COMPARE PAGE REDESIGN (UPDATED ROWS & HORIZONTAL ACTIONS)                 */

/* ========================================================================= */



.compare-table-wrapper {

    overflow-x: auto;

    margin-bottom: 50px;

    border: 1px solid #e0e0e0;

    border-radius: 0;

    background: #fff;

}



.compare-table {

    width: 100%;

    border-collapse: collapse;

    min-width: 800px;

    font-family: 'Inter', sans-serif;

}



.compare-table th, .compare-table td {

    border: 1px solid #e0e0e0;

    padding: 20px;

    vertical-align: middle;

}



.compare-table th {

    background-color: #f9f9f9;

    font-weight: 600;

    text-align: left;

    width: 180px;

    color: #111;

    font-size: 0.95rem;

}



.compare-table td {

    text-align: center;

    width: 300px; 

}



.compare-product-summary {

    display: flex;

    flex-direction: column;

    align-items: center;

}



.compare-item-image {

    background-color: #f4f5f7;

    width: 100%;

    aspect-ratio: 1/1;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 15px;

    overflow: hidden;

}



.compare-item-image img {

    max-width: 90%;

    max-height: 90%;

    object-fit: contain;

    mix-blend-mode: multiply;

    transition: transform 0.3s ease;

}



.compare-item-image:hover img {

    transform: scale(1.05);

}



.compare-item-title {

    font-size: 1.05rem;

    font-weight: 600;

    color: #111;

    text-decoration: none;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.compare-item-title:hover {

    text-decoration: underline;

}



.compare-item-price {

    font-size: 1.15rem;

    font-weight: 700;

    color: #111;

}



.compare-review {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    color: #333;

    font-weight: 500;

}



.compare-review span {

    color: #888;

    font-size: 0.85rem;

}



.compare-review-empty {

    color: #999;

    font-size: 0.9rem;

    font-style: italic;

}



.stock-status {

    font-weight: 600;

    font-size: 0.95rem;

}



.stock-in {

    color: #28a745;

}



.stock-out {

    color: #dc3545;

}



.compare-item-desc {

    font-size: 0.9rem;

    color: #555;

    line-height: 1.6;

    text-align: left !important;

}



/* === নতুন: হরিজন্টাল অ্যাকশন বাটন === */

.compare-actions-horizontal {

    display: flex;

    flex-direction: row;

    gap: 10px;

    justify-content: center;

    align-items: center;

}



.compare-btn-add, .compare-btn-remove {

    flex: 1; /* দুটি বাটন সমান জায়গা নিবে */

    padding: 10px;

    font-weight: 600;

    font-size: 0.85rem;

    cursor: pointer;

    font-family: 'Inter', sans-serif;

    border-radius: 4px;

    transition: all 0.3s;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 6px;

}



.compare-btn-add {

    background-color: #111;

    color: #fff;

    border: 1px solid #111;

}



.compare-btn-add:hover {

    background-color: #333;

}



.compare-btn-remove {

    background-color: transparent;

    color: #111;

    border: 1px solid #ccc;

}



.compare-btn-remove:hover {

    background-color: #ff4d4d;

    color: #fff;

    border-color: #ff4d4d;

}

/* ========================================================================= */

/* QUICK VIEW MODAL STYLES                                                   */

/* ========================================================================= */



.qv-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0,0,0,0.5);

    z-index: 10000;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s ease;

}



.qv-modal {

    position: fixed;

    top: 50%;

    left: 50%;

    /* পপআপটি ছোট থেকে বড় হয়ে বাউন্স করে আসবে */

    transform: translate(-50%, -50%) scale(0.7);

    width: 900px;

    max-width: 95%;

    max-height: 90vh;

    background: #fff;

    border-radius: 8px;

    z-index: 10001;

    opacity: 0;

    visibility: hidden;

    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;

    display: flex;

    flex-direction: column;

}



.qv-modal.active { 

    opacity: 1; 

    visibility: visible; 

    transform: translate(-50%, -50%) scale(1); 

}



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

.qv-modal.active { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }



.qv-close-btn {

    position: absolute;

    top: -15px;

    right: -15px;

    width: 35px;

    height: 35px;

    background: #111;

    color: #fff;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    font-size: 1.2rem;

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: center;

}



.qv-content {

    overflow-y: auto;

    border-radius: 8px;

}



/* 50-50 Grid Layout */

.qv-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: 500px;

}



/* Left Column (Image) */

.qv-col-left {

    background-color: #f4f5f7;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    border-radius: 8px 0 0 8px;

}

.qv-main-image {

    max-width: 100%;

    max-height: 450px;

    object-fit: contain;

}



/* Right Column (Details) */

.qv-col-right {

    padding: 40px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.qv-title {

    font-size: 2rem;

    font-weight: 700;

    color: #111;

    margin: 0 0 15px 0;

}



.qv-price-row {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 25px;

}

.qv-price-current { font-size: 1.2rem; font-weight: 500; color: #111; }

.qv-price-old { font-size: 1.1rem; color: #999; text-decoration: line-through; }

.qv-badge-sale { border: 1px solid #ddd; padding: 2px 8px; font-size: 0.8rem; border-radius: 4px; }

.qv-badge-discount { background: #111; color: #fff; padding: 2px 8px; font-size: 0.8rem; border-radius: 15px; }



.qv-variant-section { margin-bottom: 20px; }

.qv-variant-label { margin: 0 0 8px 0; font-size: 0.95rem; color: #333; }

.qv-swatches { display: flex; flex-wrap: wrap; gap: 8px; }

.qv-swatch-btn {

    background: #fff; border: 1px solid #ccc; padding: 8px 15px; border-radius: 4px;

    cursor: pointer; font-size: 0.9rem; color: #555; transition: 0.2s;

}

.qv-swatch-btn:hover { border-color: #111; }

.qv-swatch-btn.active { background: #111; color: #fff; border-color: #111; }



.qv-actions-row {

    display: flex; gap: 15px; margin-bottom: 15px; margin-top: 10px;

}

.qv-qty-control {

    display: flex; align-items: center; border: 1px solid #ccc; border-radius: 30px; height: 50px; width: 130px;

}

.qv-qty-btn {

    background: transparent; border: none; cursor: pointer; font-size: 1rem; width: 40px; height: 100%;

}

.qv-qty-input {

    width: 50px; text-align: center; border: none; background: transparent; font-size: 1rem; font-weight: 600;

}

.qv-btn-add-cart {

    flex-grow: 1; height: 50px; border-radius: 30px; background: #111; color: #fff; border: none; font-size: 1rem; font-weight: 600; cursor: pointer;

}

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



.qv-btn-buy-now {

    width: 100%; height: 50px; border-radius: 30px; background: #111; color: #fff; border: none; font-size: 1rem; font-weight: 600; cursor: pointer; margin-bottom: 20px;

}

.qv-btn-buy-now:hover { background: #333; }



.qv-view-details {

    color: #111; text-decoration: underline; font-size: 0.95rem; font-weight: 500;

}



/* Responsive */

@media (max-width: 768px) {

    .qv-grid { grid-template-columns: 1fr; }

    .qv-col-left { border-radius: 8px 8px 0 0; padding: 20px; }

    .qv-main-image { max-height: 250px; }

    .qv-col-right { padding: 20px; }

    .qv-title { font-size: 1.5rem; }

    .qv-modal { max-height: 85vh; }

    .qv-close-btn { top: 10px; right: 10px; }

}

/* ========================================================================= */

/* PRODUCT CARD HOVER ACTIONS (Slide from Right, Vertical)                   */

/* ========================================================================= */



.custom-product-card .custom-image,

.product-card .product-image-wrapper {

    position: relative;

    overflow: hidden;

}



/* ডানপাশে লুকানো থাকবে */

.product-hover-actions-right {

    position: absolute;

    top: 15px;

    right: -60px; 

    display: flex;

    flex-direction: column;

    gap: 10px;

    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    z-index: 10;

}



/* হোভার করলে ডানদিক থেকে ভেতরে প্রবেশ করবে */

.custom-product-card:hover .product-hover-actions-right,

.product-card:hover .product-hover-actions-right {

    right: 15px; 

}



/* আইকন বাটনের স্টাইল */

.product-action-btn-right {

    width: 40px;

    height: 40px;

    border-radius: 50% !important;

    background-color: #fff !important;

    color: #111 !important;

    border: none !important;

    padding: 0 !important;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.1rem;

    cursor: pointer;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);

    transition: all 0.3s ease;

    text-decoration: none;

}



.product-action-btn-right:hover {

    background-color: #111 !important;

    color: #fff !important;

}



/* Active state for action buttons (Wishlist & Compare) */

.product-action-btn-right.wishlist-btn.active,

.wishlist-hover-actions .wishlist-action-btn.active {

    background-color: #ff4d4d !important;

    color: #fff !important;

    border-color: #ff4d4d !important;

}



.product-action-btn-right.compare-btn.active,

.wishlist-hover-actions .wishlist-action-btn.compare-btn.active {

    background-color: #28a745 !important; /* Green/primary color for compare */

    color: #fff !important;

    border-color: #28a745 !important;

}



/* Ensure solid heart icon looks solid */

.product-action-btn-right.wishlist-btn.active i,

.wishlist-hover-actions .wishlist-action-btn.active i {

    font-weight: 900 !important;

}



/* Make product action buttons accessible on touch devices (mobile & tablet) */

@media (max-width: 991px) {

    /* Right action buttons (Quick View, Compare, Wishlist) */

    .product-hover-actions-right {

        right: 8px !important;

        top: 8px !important;

        gap: 5px !important;

    }

    .product-action-btn-right {

        width: 30px !important;

        height: 30px !important;

        font-size: 0.85rem !important;

        background-color: rgba(255, 255, 255, 0.95) !important;

        color: #111 !important;

        box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;

        border: none !important;

    }



    /* Bottom action buttons (Wishlist remove, Cart, etc.) */

    .wishlist-hover-actions {

        bottom: 8px !important;

        gap: 6px !important;

    }

    .wishlist-action-btn {

        width: 32px !important;

        height: 32px !important;

        font-size: 0.85rem !important;

        background-color: rgba(255, 255, 255, 0.95) !important;

        color: #111 !important;

        box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;

        border: none !important;

    }

}



/* Specific styling for Mobile screens (max-width: 767px) to make cards smaller, wider in grid, and shorter */

@media (max-width: 767px) {

    /* Maximize width by reducing container padding slightly but keeping it clean */

    .container,

    .shop-container-outer,

    .wishlist-container {

        padding-left: 6px !important;

        padding-right: 6px !important;

    }



    /* Reduce grid gaps to make cards occupy more width and look zoomed-in */

    .product-grid,

    .wishlist-grid {

        gap: 6px !important;

        grid-template-columns: repeat(2, 1fr) !important;

    }



    /* Make cards compact and border-radius cleaner */

    .product-card,

    .custom-product-card {

        border-radius: 6px !important;

        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;

        border: 1px solid #f0f0f0 !important;

        background-color: #fff !important;

        overflow: hidden !important;

    }



    /* Set image container aspect ratio to perfect square to increase card height */

    .product-image-wrapper,

    .custom-product-card .custom-image {

        aspect-ratio: 1 / 1 !important;

        width: 100% !important;

        overflow: hidden !important;

        position: relative !important;

    }



    .product-image,

    .product-image-wrapper a img,

    .custom-product-card .custom-image img.main-img,

    .custom-product-card .custom-image img.gallery-img {

        width: 100% !important;

        height: 100% !important;

        object-fit: cover !important;

        transform: scale(1.12) !important;

        transition: transform 0.3s ease !important;

    }



    /* Reduce text content padding and margin slightly but keep it readable and zoomed-in */

    .product-info,

    .custom-product-card .custom-product-info {

        padding: 8px 10px !important;

    }



    /* Hide category entirely to save vertical space */

    .product-category {

        display: none !important;

    }



    /* Show ratings/stars on mobile - displayed horizontally with the price */

    .product-card .rating,

    .custom-product-card .rating,

    .custom-product-card .custom-product-info .rating {

        display: flex !important;

        align-items: center !important;

        gap: 3px !important;

        font-size: 0.85rem !important;

        color: #555 !important;

        margin: 0 !important;

    }



    /* Make product name larger (zoomed-in) and single line with ellipsis */

    .product-name,

    .custom-product-card .product-name,

    .product-name a,

    .custom-product-card .product-name a {

        font-size: 0.98rem !important;

        line-height: 1.35 !important;

        margin: 0 0 6px 0 !important;

        height: 1.35em !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;

        display: block !important;

        font-weight: 600 !important;

        color: #111 !important;

        text-decoration: none !important;

    }



    /* Compact price container styling - price on left, rating on right horizontally */

    .product-price-container,

    .custom-product-card .product-price-container {

        display: flex !important;

        flex-direction: row !important;

        justify-content: space-between !important;

        align-items: center !important;

        width: 100% !important;

        margin-top: 4px !important;

        flex-wrap: nowrap !important;

    }



    .product-price,

    .custom-product-card .price {

        font-size: 1.12rem !important;

        font-weight: 800 !important;

        color: #111 !important;

    }



    .product-price-container span[style*="line-through"],

    .custom-product-card .price span[style*="line-through"] {

        font-size: 0.88rem !important;

        color: #999 !important;

        margin-left: 6px !important;

        font-weight: 400 !important;

    }



    /* Action buttons: slide from right on hover inside image */
    .product-hover-actions-right {
        position: absolute !important;
        right: -45px !important;
        top: 6px !important;
        gap: 4px !important;
        z-index: 10 !important;
        opacity: 0 !important;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .product-card:hover .product-hover-actions-right,
    .custom-product-card:hover .product-hover-actions-right {
        right: 6px !important;
        opacity: 1 !important;
    }

    .product-action-btn-right {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.78rem !important;
        background-color: rgba(255, 255, 255, 0.95) !important;
        color: #111 !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
        border: none !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s ease !important;
        text-decoration: none !important;
    }
    
    .product-action-btn-right:hover {
        background-color: #111 !important;
        color: #fff !important;
    }

    /* Bottom wishlist hover action buttons: slide up from bottom on hover inside image */
    .wishlist-hover-actions {
        position: absolute !important;
        bottom: -45px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        gap: 4px !important;
        z-index: 10 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        width: max-content !important;
    }
    
    .custom-product-card:hover .wishlist-hover-actions {
        bottom: 6px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .wishlist-action-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.78rem !important;
        background-color: rgba(255, 255, 255, 0.95) !important;
        color: #111 !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
        border: none !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s ease !important;
        text-decoration: none !important;
    }
    
    .wishlist-action-btn:hover {
        background-color: #111 !important;
        color: #fff !important;
    }



    /* Special Zoom for 1-column Product Card Layout on Mobile (Full Width Cards) */

    .grid-cols-1 .product-hover-actions-right,

    .shop-product-grid.grid-cols-1 .product-hover-actions-right {

        right: -70px !important;

        top: 12px !important;

        gap: 8px !important;

    }

    .grid-cols-1 .product-card:hover .product-hover-actions-right,

    .grid-cols-1 .custom-product-card:hover .product-hover-actions-right,

    .shop-product-grid.grid-cols-1 .product-card:hover .product-hover-actions-right,

    .shop-product-grid.grid-cols-1 .custom-product-card:hover .product-hover-actions-right {

        right: 12px !important;

    }

    .grid-cols-1 .product-action-btn-right,

    .shop-product-grid.grid-cols-1 .product-action-btn-right {

        width: 44px !important;

        height: 44px !important;

        font-size: 1.25rem !important;

        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;

    }

    .grid-cols-1 .wishlist-hover-actions,

    .shop-product-grid.grid-cols-1 .wishlist-hover-actions {

        bottom: -70px !important;

        gap: 8px !important;

    }

    .grid-cols-1 .custom-product-card:hover .wishlist-hover-actions,

    .shop-product-grid.grid-cols-1 .custom-product-card:hover .wishlist-hover-actions {

        bottom: 12px !important;

    }

    .grid-cols-1 .wishlist-action-btn,

    .shop-product-grid.grid-cols-1 .wishlist-action-btn {

        width: 44px !important;

        height: 44px !important;

        font-size: 1.25rem !important;

        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;

    }



    /* Zoom in Custom Product Card and Best Selling Cards specifically */

    .custom-product-card .custom-image img.main-img,

    .custom-product-card .custom-image img.gallery-img {

        transform: scale(1.25) !important; /* Extra zoom for custom cards */

    }



    .custom-product-card .product-name,

    .custom-product-card .product-name a {

        font-size: 1.02rem !important;

    }



    .custom-product-card .price {

        font-size: 1.18rem !important;

    }



    .custom-product-card .rating {

        font-size: 0.9rem !important;

    }



    /* Limited Offer Section Mobile Adjustments to prevent overflow */

    .limited-offer-section {

        margin-top: 20px !important;

        margin-bottom: 20px !important;

        padding: 0 10px !important;

    }

    

    .limited-offer-header {

        justify-content: center !important;

        margin-bottom: 20px !important;

        gap: 10px !important;

    }

    

    .limited-offer-timer {

        gap: 10px !important;

        justify-content: center !important;

        width: 100% !important;

    }

    

    .limited-offer-timer .timer-box span[class] {

        font-size: 2.2rem !important; /* Scale down from 3.5rem */

        margin-bottom: 4px !important;

    }

    

    .limited-offer-timer .timer-box span:not([class]) {

        font-size: 0.7rem !important;

    }

    

    .limited-offer-timer > span {

        font-size: 1.5rem !important; /* Scale down colons */

        margin-top: 2px !important;

    }

    

    .limited-offer-header .btn-shop-now {

        padding: 8px 20px !important;

        font-size: 0.85rem !important;

        margin-top: 10px !important;

    }

}

.desktop-only-page { display: block; } @media (max-width: 991px) { .desktop-only-page { display: none !important; } } .mobile-only-page { display: none; } @media (max-width: 991px) { .mobile-only-page { display: block !important; } }



/* Variant selection Native Styles added for Quick View compatibility */

.p-variant-radio-group, .p-variant-checkbox-group {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



/* Radio Button Pill Styles */

.p-variant-radio-label {

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 18px;

    border: 1px solid #d1d5db;

    border-radius: 6px;

    background-color: #fff;

    color: #374151;

    transition: all 0.2s ease;

    user-select: none;

    margin: 0;

}

.p-variant-radio-label input[type="radio"] {

    display: none;

}

.p-variant-radio-label span {

    font-size: 0.95rem;

    font-weight: 600;

}

.p-variant-radio-label:has(input[type="radio"]:checked) {

    border-color: #3b82f6;

    background-color: #eff6ff;

}

.p-variant-radio-label:has(input[type="radio"]:checked) span {

    color: #1d4ed8;

}



/* Native Checkbox Styles */

.p-variant-checkbox-label {

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    margin: 0;

    gap: 8px;

}

.p-variant-checkbox-label input[type="checkbox"] {

    cursor: pointer;

    width: 18px;

    height: 18px;

    accent-color: #111;

    margin: 0;

}

.p-variant-checkbox-label span {

    font-size: 0.95rem;

    font-weight: 500;

    color: #333;

    user-select: none;

}



/* === Custom Page Block Layout Wrapper === */

.custom-page-block-wrapper {

    display: block !important;

    width: 100% !important;

    box-sizing: border-box !important;

}



/* Default desktop container constraints for all blocks except slider (swiper) */

.custom-page-block-wrapper:not(.slider-block-wrapper) {

    max-width: 1415px;

    margin-left: auto;

    margin-right: auto;

    padding-left: 15px;

    padding-right: 15px;

}



/* Ensure mobile layout has a 10px padding/gap on both sides */

@media (max-width: 768px) {

    .custom-page-block-wrapper:not(.slider-block-wrapper) {

        padding-left: 10px !important;

        padding-right: 10px !important;

    }

    

    /* Scale down oversized header fonts on mobile devices to prevent premature wrapping */

    .page-block-header {

        font-size: clamp(22px, 7.5vw, 36px) !important;

        line-height: 1.25 !important;

    }

    

    /* Scale down any pasted custom font sizes inside the header on mobile */

    .page-block-header * {

        font-size: inherit !important;

        line-height: inherit !important;

    }

}



/* Heading block custom link styles */

.page-block-header a {

    color: inherit;

    text-decoration: underline;

    transition: opacity 0.2s;

}

.page-block-header a:hover {

    opacity: 0.8;

}



/* Heading block block layout overrides */

.page-block-header {

    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

    word-wrap: break-word !important;

    overflow-wrap: break-word !important;

    word-break: normal !important;

    white-space: normal !important;

}



/* If heading block has background color, apply visual padding and rounded corners */

.page-block-header[style*="background-color"] {

    padding: 15px !important;

    border-radius: 6px !important;

}


/* ========================================================
   MOBILE: Reduce title + breadcrumb distance from header
   on ALL pages using .page-header-block class
   ======================================================== */
@media (max-width: 767px) {
    /* Reduce wrapper top padding for all pages */
    .custom-page-main-wrapper {
        padding-top: 0 !important;
    }

    /* All page header blocks (title + breadcrumb wrapper) */
    .page-header-block {
        padding-top: 0 !important;
        padding-bottom: 2px !important;
    }

    /* Reduce title margin to bring breadcrumb closer */
    .page-header-block > h1 {
        margin-bottom: 2px !important;
        font-size: 1.5rem !important;
    }

    /* Reduce breadcrumb spacing */
    .page-header-block .co-breadcrumb {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
    }
}