/* ============================================================
   checkout.css — Professional Responsive Checkout Page Styles
   Design: Classic Black & White Editorial
   Responsive: Mobile-first, all screen sizes
   ============================================================ */

/* --- 1. CSS Custom Properties --- */
:root {
    --primary-color:    #000000;
    --accent-color:     #333333;
    --bg-light:         #f2dce8;
    --bg-secondary:     #F5F5F5;
    --bg-hover:         #EBEBEB;
    --text-main:        #000000;
    --text-muted:       #666666;
    --text-light:       #999999;
    --border-color:     #000000;
    --border-light:     #DDDDDD;
    --white:            #FFFFFF;
    --danger:           #CC0000;
    --success:          #006600;

    --radius:           0px;
    --radius-sm:        0px;

    --shadow-sm:        2px 2px 0px rgba(0,0,0,0.08);
    --shadow-md:        4px 4px 0px rgba(0,0,0,0.12);
    --shadow-lg:        6px 6px 0px rgba(0,0,0,0.15);

    --transition-fast:  0.18s ease;
    --transition-base:  0.28s ease;
    --transition-slow:  0.4s cubic-bezier(0.16, 1, 0.3, 1);

    --font-classic:     "Playfair Display", "Georgia", serif;
    --font-body:        "Helvetica Neue", Helvetica, Arial, sans-serif;

    --spacing-xs:  8px;
    --spacing-sm:  12px;
    --spacing-md:  20px;
    --spacing-lg:  32px;
    --spacing-xl:  48px;

    --header-height-desktop: 160px;
    --header-height-tablet:  120px;
    --header-height-mobile:  90px;
}

/* --- 2. Global Reset & Base --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

html {
    overflow-x: hidden;
    width:      100%;
    max-width:  100vw;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--bg-light);
    color:            var(--text-main);
    font-family:      var(--font-body);
    font-size:        16px;
    line-height:      1.65;
    padding-top:      var(--header-height-desktop);
    overflow-x:       hidden;
    width:            100%;
    max-width:        100vw;
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    display:   block;
    max-width: 100%;
    height:    auto;
}

a {
    color:           inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size:   inherit;
}

/* Hide all radio inputs visually while keeping them functional */
input[type="radio"] {
    position:          absolute !important;
    opacity:           0       !important;
    width:             0       !important;
    height:            0       !important;
    margin:            0       !important;
    padding:           0       !important;
    -webkit-appearance:none    !important;
    appearance:        none    !important;
    pointer-events:    none;
}

/* --- 3. Layout: Checkout Container --- */
.checkout-container {
    max-width:     1240px;
    margin:        0 auto var(--spacing-xl) auto;
    padding:       var(--spacing-md) var(--spacing-md);
    display:       grid;
    grid-template-columns: 1fr 1.35fr;
    gap:           var(--spacing-lg);
    align-items:   start;
    position:      relative;
    z-index:       1;
}

/* --- 4. Gallery Section --- */
.gallery-section {
    display:    flex;
    flex-direction: column;
    gap:        var(--spacing-sm);
    position:   sticky;
    top:        calc(var(--header-height-desktop) + 20px);
}

/* --- 4a. Main Image --- */
.main-img-wrap {
    position:       relative;
    background:     var(--white);
    border:         2px solid var(--border-color);
    overflow:       hidden;
    height:         520px;
    display:        flex;
    align-items:    center;
    justify-content:center;
}

.main-img-wrap::after {
    content:  '';
    position: absolute;
    inset:    0;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
    pointer-events: none;
}

.main-img-wrap img {
    width:            100%;
    height:           100%;
    object-fit:       cover;
    object-position:  center top;
    display:          block;
    transition:       transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change:      transform;
}

.main-img-wrap:hover img {
    transform: scale(1.04);
}

/* --- 4b. Thumbnails --- */
.thumbnails {
    display:       flex;
    gap:           10px;
    overflow-x:    auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--bg-secondary);
}

.thumbnails::-webkit-scrollbar {
    height: 3px;
}

.thumbnails::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.thumbnails::-webkit-scrollbar-thumb {
    background:    var(--primary-color);
    border-radius: 0;
}

.thumbnails img {
    width:       80px;
    height:      80px;
    object-fit:  cover;
    flex-shrink: 0;
    cursor:      pointer;
    border:      2px solid transparent;
    opacity:     0.5;
    transition:  opacity var(--transition-base),
                 border-color var(--transition-base),
                 transform var(--transition-fast);
    background:  var(--bg-secondary);
    padding:     0;
}

.thumbnails img.active,
.thumbnails img:hover {
    border-color: var(--primary-color);
    opacity:      1;
    transform:    translateY(-2px);
}

/* --- 5. Details Section --- */
.details-section {
    background:    var(--white);
    padding:       var(--spacing-lg) var(--spacing-lg);
    border:        1px solid var(--border-color);
    position:      relative;
}

/* --- 6. Breadcrumbs --- */
.breadcrumbs {
    font-size:      0.78rem;
    color:          var(--text-muted);
    margin-bottom:  var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height:    1.4;
}

.breadcrumbs a:hover {
    color:           var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- 7. Product Titles --- */
.product-main-title {
    font-size:     1.75rem;
    font-family:   var(--font-body);
    color:         var(--primary-color);
    margin-bottom: var(--spacing-xs);
    font-weight:   700;
    line-height:   1.25;
}

.product-title {
    font-family:   var(--font-classic);
    font-size:     2.1rem;
    color:         var(--primary-color);
    margin-bottom: var(--spacing-xs);
    font-weight:   400;
    letter-spacing: 0.3px;
    line-height:   1.2;
}

/* --- 8. Badges --- */
.product-badges {
    display:       flex;
    gap:           8px;
    margin-bottom: var(--spacing-sm);
    flex-wrap:     wrap;
}

.badge {
    font-family:    var(--font-body);
    padding:        4px 10px;
    font-size:      0.70rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border:         1px solid var(--primary-color);
    white-space:    nowrap;
}

.badge-discount {
    background: var(--primary-color);
    color:      var(--white);
}

.badge-new {
    background: var(--white);
    color:      var(--primary-color);
}

.badge-trend {
    background:   var(--bg-secondary);
    color:        var(--primary-color);
    border-style: dashed;
}

/* --- 9. Rating --- */
.product-rating {
    display:       flex;
    align-items:   center;
    gap:           8px;
    margin-bottom: var(--spacing-sm);
    flex-wrap:     wrap;
}

.stars {
    color:          var(--primary-color);
    font-size:      1.05rem;
    letter-spacing: 2px;
}

.reviews-count {
    color:          var(--text-muted);
    font-size:      0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- 10. Prices --- */
.prices {
    display:        flex;
    align-items:    baseline;
    gap:            var(--spacing-sm);
    margin-bottom:  var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom:  2px solid var(--border-color);
    flex-wrap:      wrap;
}

.price-after {
    font-family: var(--font-classic);
    font-size:   2rem;
    font-weight: 700;
    color:       var(--primary-color);
    line-height: 1;
}

.price-before {
    font-size:       1.1rem;
    color:           var(--text-muted);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

/* --- 11. Product Description --- */
.product-description {
    padding:       var(--spacing-md) 0;
    border-top:    1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--spacing-md);
    font-size:     0.92rem;
    color:         var(--text-muted);
    line-height:   1.85;
}

/* --- 12. Form Groups --- */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display:        block;
    margin-bottom:  7px;
    font-weight:    700;
    color:          var(--primary-color);
    font-size:      0.80rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* --- 13. Form Controls --- */
.form-control {
    width:            100%;
    padding:          13px 16px;
    border:           1.5px solid var(--border-color);
    background:       var(--white);
    color:            var(--text-main);
    font-size:        1rem;
    font-family:      inherit;
    line-height:      1.4;
    transition:       background-color var(--transition-fast),
                      border-color var(--transition-fast),
                      box-shadow var(--transition-fast);
    -webkit-appearance: none;
    appearance: none;
}

.form-control::placeholder {
    color:   var(--text-light);
    opacity: 1;
}

.form-control:focus {
    outline:          none;
    border-color:     var(--primary-color);
    background-color: var(--bg-secondary);
    box-shadow:       inset 0 0 0 1px var(--primary-color);
}

.form-control:disabled {
    background-color: var(--bg-secondary);
    border-color:     var(--border-light);
    color:            var(--text-muted);
    cursor:           not-allowed;
}

.form-control[readonly] {
    cursor:     pointer;
    background: var(--white);
}

.form-control[readonly]:hover {
    background: var(--bg-secondary);
}

textarea.form-control {
    resize:     vertical;
    min-height: 80px;
}

/* --- 14. Row / Column Grid (Form) --- */
.row {
    display:    flex;
    flex-wrap:  wrap;
    margin:     0 -8px;
}

.col-md-6 {
    width:   50%;
    padding: 0 8px;
}

/* --- 15. Attribute Options (Chips) --- */
.attribute-group {
    margin-bottom: var(--spacing-md);
}

.attribute-options {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
    margin-top: 6px;
}

.attr-radio-label {
    margin: 0;
    cursor: pointer;
}

.attr-chip {
    display:        inline-block;
    padding:        8px 16px;
    border:         1.5px solid var(--border-color);
    background:     var(--white);
    color:          var(--text-main);
    font-size:      0.80rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition:     background-color var(--transition-fast),
                    color var(--transition-fast),
                    border-color var(--transition-fast),
                    transform var(--transition-fast);
    cursor:         pointer;
    user-select:    none;
}

.attr-chip:hover {
    background:   var(--bg-secondary);
    transform:    translateY(-1px);
    box-shadow:   var(--shadow-sm);
}

.attr-radio-label input[type="radio"]:checked + .attr-chip {
    background:    var(--primary-color);
    color:         var(--white);
    border-color:  var(--primary-color);
    font-weight:   700;
    box-shadow:    var(--shadow-sm);
}

.attr-radio-label input[type="radio"]:disabled + .attr-chip {
    opacity:          0.28;
    cursor:           not-allowed;
    text-decoration:  line-through;
    background-color: var(--bg-secondary);
    transform:        none;
    box-shadow:       none;
}

/* --- 16. Shipping Companies --- */
.shipping-logos-container {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    gap:                   12px;
    margin-top:            10px;
}

.shipping-logo-label {
    cursor:  pointer;
    display: block;
    margin:  0;
}

.logo-box {
    border:          1.5px solid var(--border-light);
    padding:         12px;
    height:          68px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--white);
    transition:      background-color var(--transition-fast),
                     border-color var(--transition-fast),
                     transform var(--transition-fast),
                     box-shadow var(--transition-fast);
}

.logo-box img {
    max-width:  100%;
    max-height: 44px;
    object-fit: contain;
    transition: opacity var(--transition-fast);
    opacity:    0.7;
}

.shipping-logo-label:hover .logo-box {
    background:   var(--bg-secondary);
    border-color: var(--primary-color);
    transform:    translateY(-2px);
    box-shadow:   var(--shadow-sm);
}

.shipping-logo-label:hover .logo-box img {
    opacity: 1;
}

.shipping-logo-label input[type="radio"]:checked + .logo-box {
    border:     2px solid var(--primary-color);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

.shipping-logo-label input[type="radio"]:checked + .logo-box img {
    opacity: 1;
}

/* --- 17. Delivery Type Cards --- */
.delivery-type-options-fancy {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   10px;
    margin-top:            8px;
}

.delivery-option-card {
    cursor:   pointer;
    position: relative;
    display:  block;
}

.delivery-option-card .card-content {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    background:      var(--white);
    border:          1.5px solid var(--border-light);
    padding:         11px 14px;
    min-height:      52px;
    transition:      background-color var(--transition-fast),
                     border-color var(--transition-fast),
                     transform var(--transition-fast),
                     box-shadow var(--transition-fast);
    user-select:     none;
}

.delivery-option-card .card-content i {
    font-size:   1.05rem;
    color:       var(--text-muted);
    flex-shrink: 0;
    transition:  color var(--transition-fast);
}

.delivery-option-card .card-content span {
    font-weight:    700;
    color:          var(--text-muted);
    font-size:      0.80rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition:     color var(--transition-fast);
}

.delivery-option-card:hover .card-content {
    background:   var(--bg-secondary);
    border-color: var(--primary-color);
    transform:    translateY(-2px);
    box-shadow:   var(--shadow-sm);
}

.delivery-option-card input[type="radio"]:checked + .card-content {
    background:    var(--primary-color);
    border-color:  var(--primary-color);
    box-shadow:    var(--shadow-sm);
    transform:     translateY(-1px);
}

.delivery-option-card input[type="radio"]:checked + .card-content i,
.delivery-option-card input[type="radio"]:checked + .card-content span {
    color: var(--white);
}

/* --- 18. Order Summary --- */
.order-summary {
    background:  var(--white);
    padding:     var(--spacing-md);
    margin-top:  var(--spacing-lg);
    border:      2px solid var(--border-color);
    position:    relative;
}

.order-summary::before {
    content:    '';
    position:   absolute;
    top:        4px;
    left:       4px;
    right:      -4px;
    bottom:     -4px;
    background: var(--bg-secondary);
    z-index:    -1;
}

.order-summary h3 {
    font-family:    var(--font-classic);
    color:          var(--primary-color);
    margin-bottom:  var(--spacing-md);
    font-size:      1.35rem;
    font-weight:    400;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom:  1px solid var(--border-color);
    padding-bottom: var(--spacing-xs);
}

.summary-row {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    gap:             var(--spacing-sm);
    margin-bottom:   10px;
    color:           var(--text-main);
    font-size:       0.95rem;
}

.summary-row span:last-child {
    font-weight:  600;
    white-space:  nowrap;
    text-align:   right;
}

.summary-row.total {
    font-weight:  700;
    font-size:    1.25rem;
    border-top:   2px solid var(--border-color);
    padding-top:  var(--spacing-sm);
    margin-top:   var(--spacing-xs);
    margin-bottom: 0;
}

/* --- 19. Multi-Variant Summary --- */
#multiVariantSummary {
    margin-bottom: var(--spacing-sm);
    font-size:     0.88em;
    background:    var(--bg-secondary);
    padding:       var(--spacing-sm);
    border:        1px dashed var(--border-color);
}

#multiVariantSummary strong {
    color: var(--primary-color);
}

#multiVariantList {
    margin:        8px 0 0;
    padding-inline-start: 20px;
    color:         var(--text-muted);
    font-size:     0.9em;
}

[dir="rtl"] #multiVariantList {
    padding-right: 20px;
    padding-left:  0;
}

[dir="ltr"] #multiVariantList {
    padding-left:  20px;
    padding-right: 0;
}

/* Multi-variant toggle */
#multiVariantToggleContainer {
    margin-bottom: var(--spacing-sm);
    background:    var(--bg-secondary);
    padding:       var(--spacing-sm);
    border:        1px solid var(--border-light);
}

/* --- 20. Buttons --- */
.btn {
    display:        inline-block;
    font-weight:    700;
    text-align:     center;
    border:         2px solid var(--border-color);
    padding:        15px 28px;
    cursor:         pointer;
    transition:     background-color var(--transition-fast),
                    color var(--transition-fast),
                    transform var(--transition-fast),
                    box-shadow var(--transition-fast);
    font-size:      0.90rem;
    font-family:    inherit;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height:    1;
    width:          100%;
    -webkit-appearance: none;
    appearance: none;
}

.btn:active {
    transform:    translateY(1px) !important;
    box-shadow:   none          !important;
}

.btn-primary {
    background: var(--primary-color);
    color:      var(--white);
    border-color: var(--primary-color);
    position:   relative;
    overflow:   hidden;
}

.btn-primary::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: rgba(255,255,255,0);
    transition: background var(--transition-fast);
}

.btn-primary:hover {
    background:   var(--white);
    color:        var(--primary-color);
    border-color: var(--primary-color);
    box-shadow:   var(--shadow-md);
    transform:    translateY(-2px);
}

.btn-primary:hover::after {
    background: rgba(255,255,255,0);
}

.btn:disabled,
.btn[disabled] {
    background:   var(--bg-secondary);
    color:        var(--text-muted);
    border-color: var(--border-light);
    cursor:       not-allowed;
    transform:    none;
    box-shadow:   none;
    opacity:      0.6;
}

.btn-outline {
    background:   transparent;
    color:        var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline:hover {
    background:   var(--primary-color);
    color:        var(--white);
    box-shadow:   var(--shadow-sm);
    transform:    translateY(-1px);
}

.action-buttons {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    margin-top:     var(--spacing-sm);
}

/* --- 21. Out-of-Stock --- */
.out-of-stock-wrapper {
    text-align:    center;
    padding:       var(--spacing-xl) var(--spacing-md);
    background:    var(--bg-secondary);
    border:        1px solid var(--border-color);
    margin-bottom: var(--spacing-lg);
}

.out-of-stock-wrapper i {
    font-size:     2.5rem;
    color:         var(--primary-color);
    margin-bottom: var(--spacing-sm);
    display:       block;
}

.out-of-stock-wrapper h2 {
    font-family:    var(--font-classic);
    color:          var(--primary-color);
    margin-bottom:  var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight:    400;
    font-size:      1.4rem;
}

.out-of-stock-wrapper p {
    color:     var(--text-muted);
    font-size: 0.95rem;
}

.img-disabled {
    opacity: 0.45;
    filter:  grayscale(100%);
}

/* --- 22. Review Section --- */
.review-actions-wrap {
    display:    flex;
    gap:        var(--spacing-sm);
    margin-top: var(--spacing-sm);
    flex-wrap:  wrap;
}

.review-textarea-group {
    margin-top: var(--spacing-sm);
}

.login-btn-link {
    text-decoration: none;
    display:         inline-block;
    margin-top:      var(--spacing-xs);
}

/* --- 23. Modal Overlay --- */
.dz-modal-overlay {
    display:        none;
    position:       fixed;
    inset:          0;
    background:     rgba(0, 0, 0, 0.78);
    z-index:        9999;
    justify-content:center;
    align-items:    center;
    padding:        var(--spacing-md);
    -webkit-overflow-scrolling: touch;
}

.dz-modal-overlay.active {
    display: flex;
}

/* --- 24. Modal Content --- */
.dz-modal-content {
    background:     var(--bg-light);
    width:          100%;
    max-width:      860px;
    height:         82vh;
    max-height:     700px;
    border:         2px solid var(--border-color);
    display:        flex;
    flex-direction: column;
    padding:        var(--spacing-lg);
    box-sizing:     border-box;
    animation:      modalFadeInUp var(--transition-slow);
    box-shadow:     8px 8px 0 rgba(0,0,0,0.12);
    position:       relative;
}

@keyframes modalFadeInUp {
    from {
        opacity:   0;
        transform: translateY(40px) scale(0.98);
    }
    to {
        opacity:   1;
        transform: translateY(0) scale(1);
    }
}

/* --- 25. Modal Header --- */
.dz-modal-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   var(--spacing-md);
    border-bottom:   2px solid var(--border-color);
    padding-bottom:  var(--spacing-sm);
    flex-shrink:     0;
}

.dz-modal-header h3 {
    margin:         0;
    font-size:      1.5rem;
    color:          var(--primary-color);
    font-family:    var(--font-classic);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight:    400;
}

.dz-modal-close {
    cursor:      pointer;
    font-size:   2rem;
    line-height: 1;
    color:       var(--primary-color);
    background:  none;
    border:      none;
    padding:     4px 8px;
    flex-shrink: 0;
    transition:  transform var(--transition-base),
                 background var(--transition-fast);
}

.dz-modal-close:hover {
    transform:  rotate(90deg) scale(1.1);
    background: var(--bg-secondary);
}

/* --- 26. Modal Search Input --- */
.dz-modal-search {
    width:          100%;
    padding:        14px 18px;
    border:         1.5px solid var(--border-color);
    margin-bottom:  var(--spacing-md);
    font-size:      1rem;
    outline:        none;
    box-sizing:     border-box;
    background:     var(--bg-secondary);
    color:          var(--primary-color);
    font-family:    inherit;
    flex-shrink:    0;
    transition:     background var(--transition-fast),
                    border-color var(--transition-fast),
                    box-shadow var(--transition-fast);
    -webkit-appearance: none;
    appearance: none;
}

.dz-modal-search::placeholder {
    color:   var(--text-light);
    opacity: 1;
}

.dz-modal-search:focus {
    border-color:     var(--primary-color);
    background:       var(--white);
    box-shadow:       inset 0 0 0 1px var(--primary-color);
}

/* --- 27. Modal List --- */
.dz-modal-list {
    flex-grow:      1;
    overflow-y:     auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--bg-secondary);
    margin:         0 -8px;
    padding:        0 8px;
}

.dz-modal-list::-webkit-scrollbar {
    width: 4px;
}

.dz-modal-list::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.dz-modal-list::-webkit-scrollbar-thumb {
    background: var(--primary-color);
}

.dz-list-item {
    padding:        16px var(--spacing-sm);
    border-bottom:  1px solid var(--bg-hover);
    cursor:         pointer;
    font-size:      1rem;
    font-weight:    600;
    color:          var(--text-main);
    transition:     background var(--transition-fast),
                    color var(--transition-fast),
                    padding-inline-start var(--transition-fast),
                    border-color var(--transition-fast);
    display:        flex;
    align-items:    center;
    line-height:    1.4;
}

.dz-list-item:hover {
    background:          var(--primary-color);
    color:               var(--white);
    padding-inline-start: var(--spacing-lg);
    border-bottom-color: var(--primary-color);
}

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

/* --- 28. Slide-up Modal (Mobile) --- */
@media (max-width: 768px) {
    .dz-modal-overlay {
        align-items: flex-end;
        padding:     0;
    }

    .dz-modal-content {
        max-width:     100%;
        height:        88vh;
        max-height:    none;
        border-left:   none;
        border-right:  none;
        border-bottom: none;
        border-top:    2px solid var(--border-color);
        padding:       var(--spacing-md);
        box-shadow:    0 -4px 30px rgba(0,0,0,0.18);
        animation:     slideUp var(--transition-slow);
    }

    @keyframes slideUp {
        from { transform: translateY(100%); }
        to   { transform: translateY(0);    }
    }

    .dz-modal-header h3 {
        font-size: 1.2rem;
    }

    .dz-list-item {
        padding:   14px 10px;
        font-size: 0.95rem;
    }

    .dz-list-item:hover {
        padding-inline-start: var(--spacing-md);
    }
}

/* ============================================================
   RESPONSIVE BREAKPOINTS — Mobile-First
   ============================================================ */

/* --- Large Desktop (1400px+) --- */
@media (min-width: 1400px) {
    .checkout-container {
        max-width:             1320px;
        grid-template-columns: 1fr 1.4fr;
        gap:                   var(--spacing-xl);
    }

    .main-img-wrap {
        height: 580px;
    }

    .product-title {
        font-size: 2.4rem;
    }
}

/* --- Medium Desktop (992px – 1199px) --- */
@media (max-width: 1199px) {
    .checkout-container {
        grid-template-columns: 1fr 1.25fr;
        gap:                   var(--spacing-md);
    }

    .main-img-wrap {
        height: 460px;
    }

    .product-title {
        font-size: 1.9rem;
    }
}

/* --- Tablet (768px – 991px) --- */
@media (max-width: 991px) {
    body {
        padding-top: var(--header-height-tablet);
    }

    .checkout-container {
        grid-template-columns: 1fr 1.1fr;
        gap:                   var(--spacing-md);
        padding:               var(--spacing-md) var(--spacing-sm);
    }

    .gallery-section {
        top: calc(var(--header-height-tablet) + 16px);
    }

    .main-img-wrap {
        height: 380px;
    }

    .product-title {
        font-size: 1.75rem;
    }

    .details-section {
        padding: var(--spacing-md);
    }

    .shipping-logos-container {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}

/* --- Small Tablet / Large Mobile (768px) --- */
@media (max-width: 768px) {
    body {
        padding-top: var(--header-height-mobile);
    }

    /* Convert grid to single column */
    .checkout-container {
        display:        flex !important;
        flex-direction: column !important;
        padding:        var(--spacing-sm) !important;
        gap:            var(--spacing-md) !important;
        width:          100% !important;
        box-sizing:     border-box !important;
    }

    /* Remove sticky on mobile */
    .gallery-section {
        position: relative !important;
        top:      0        !important;
        width:    100%     !important;
    }

    .main-img-wrap {
        height:       auto       !important;
        min-height:   280px;
        aspect-ratio: 4 / 3;
    }

    .details-section {
        width:      100%   !important;
        padding:    var(--spacing-md) var(--spacing-sm) !important;
        box-sizing: border-box !important;
        margin:     0      !important;
        border-left: none;
        border-right: none;
    }

    .product-title {
        font-size: 1.65rem !important;
    }

    .price-after {
        font-size: 1.65rem !important;
    }

    /* Fix negative margins in form rows */
    .row {
        margin-left:  0       !important;
        margin-right: 0       !important;
        width:        100%    !important;
        flex-direction: column;
    }

    .col-md-6 {
        width:          100%  !important;
        padding-left:   0     !important;
        padding-right:  0     !important;
        margin-bottom:  var(--spacing-sm);
    }

    .col-md-6:last-child {
        margin-bottom: 0;
    }

    /* Ensure form group inside col has no extra margin */
    .col-md-6 .form-group {
        margin-bottom: 0;
    }

    .delivery-type-options-fancy {
        gap: 8px !important;
    }

    .shipping-logos-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap:                   10px           !important;
    }

    .thumbnails img {
        width:  68px;
        height: 68px;
    }

    .order-summary {
        padding: var(--spacing-sm);
    }

    .order-summary::before {
        display: none;
    }
}

/* --- Mobile (max 576px) --- */
@media (max-width: 576px) {
    .checkout-container {
        padding: 10px !important;
        gap:     var(--spacing-sm) !important;
    }

    .main-img-wrap {
        min-height:   260px;
        aspect-ratio: 1 / 1;
    }

    .details-section {
        padding: var(--spacing-sm) 10px !important;
    }

    .product-title {
        font-size: 1.45rem !important;
    }

    .product-main-title {
        font-size: 1.35rem;
    }

    .price-after {
        font-size: 1.5rem !important;
    }

    .btn {
        padding:       14px var(--spacing-sm);
        font-size:     0.85rem;
        letter-spacing: 1.5px;
    }

    .delivery-option-card .card-content {
        padding:    8px 10px;
        min-height: 46px;
    }

    .delivery-option-card .card-content span {
        font-size: 0.72rem;
    }

    .thumbnails {
        gap: 8px;
    }

    .thumbnails img {
        width:  60px;
        height: 60px;
    }

    .shipping-logos-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap:                   8px            !important;
    }

    .logo-box {
        height:  60px;
        padding: 10px;
    }

    .order-summary h3 {
        font-size:      1.15rem;
        letter-spacing: 1px;
    }

    .summary-row.total {
        font-size: 1.1rem;
    }

    .breadcrumbs {
        font-size: 0.72rem;
    }

    .attr-chip {
        padding:       6px 12px;
        font-size:     0.75rem;
    }

    .dz-modal-search {
        padding:   12px 14px;
        font-size: 0.95rem;
    }
}

/* --- Very Small Mobile (max 380px) --- */
@media (max-width: 380px) {
    body {
        font-size: 15px;
    }

    .product-title {
        font-size: 1.3rem !important;
    }

    .price-after {
        font-size: 1.35rem !important;
    }

    .delivery-type-options-fancy {
        grid-template-columns: 1fr !important;
    }

    .shipping-logos-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .thumbnails img {
        width:  52px;
        height: 52px;
    }

    .btn {
        font-size:      0.80rem;
        letter-spacing: 1px;
        padding:        12px var(--spacing-xs);
    }
}

/* ============================================================
   ACCESSIBILITY & UTILITIES
   ============================================================ */

/* Focus visible for keyboard navigation */
:focus-visible {
    outline:        2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Skip link */
.skip-link {
    position:   absolute;
    top:        -100%;
    left:       0;
    background: var(--primary-color);
    color:      var(--white);
    padding:    var(--spacing-xs) var(--spacing-sm);
    z-index:    100000;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.skip-link:focus {
    top: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
        scroll-behavior:           auto   !important;
    }
}

/* Print styles */
@media print {
    .action-buttons,
    .thumbnails,
    .dz-modal-overlay {
        display: none !important;
    }

    body {
        padding-top: 0;
    }

    .checkout-container {
        display:               grid;
        grid-template-columns: 1fr 1fr;
    }

    .gallery-section {
        position: relative;
        top:      0;
    }
}