/* ================================================
   Multimaart - Site-wide Custom Overrides
   Brand Color: #3BAFE2 (Sky Blue)
   ================================================ */

/* Force brand blue as primary color everywhere */
:root {
    --primary-color: #3BAFE2 !important;
    --semi-primary-color: #3BAFE211 !important;
}

/* v9.26 (2026-05-26): Brand logo — keep colors consistent everywhere.
   Some pages had a dark/colored container behind the <img>, which made
   the logo look "darker" or "tinted". This rule strips any filter or
   background that templates may have applied to the logo image. */
img[src*="multimaart-logo"],
.mm-brand-logo {
    background: transparent !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    object-fit: contain !important;
}

/* primary-bg-color helper override */
.primary-bg-color {
    background-color: #3BAFE2 !important;
}

/* Search bar border blue */
.search-border {
    border-color: #3BAFE2 !important;
}

/* Override any inline pink/yellow backgrounds from database on top header */
section[style*="background: #e91e63"],
section[style*="background: #E91E63"],
section[style*="background:#e91e63"],
section[style*="background:#E91E63"],
section[style*="background: #FCCA19"],
section[style*="background: #fcca19"],
section[style*="background:#FCCA19"],
section[style*="background:#fcca19"] {
    background: #3BAFE2 !important;
}

/* Override any inline pink/yellow background-color from database */
[style*="background-color: #e91e63"],
[style*="background-color: #E91E63"],
[style*="background-color: #FCCA19"],
[style*="background-color: #fcca19"],
[style*="background-color:#e91e63"],
[style*="background-color:#E91E63"],
[style*="background-color:#FCCA19"],
[style*="background-color:#fcca19"] {
    background-color: #3BAFE2 !important;
}

/* Override any pink color text from database */
[style*="color: #e91e63"],
[style*="color: #E91E63"],
[style*="color:#e91e63"],
[style*="color:#E91E63"],
[style*="color: #FCCA19"],
[style*="color: #fcca19"],
[style*="color:#FCCA19"],
[style*="color:#fcca19"] {
    color: #3BAFE2 !important;
}

/* Mobile header: white background */
@media (max-width: 767px) {
    section.md\:hidden,
    body > section:first-of-type {
        background: #ffffff !important;
    }

    .mobile-sidebar svg path {
        fill: #333 !important;
    }
}

/* Hide chat widget / message notification */
.chat-widget,
.tawk-min-container,
.custom-modal-overlay,
.custom-modal-over,
#chat-widget,
.livewire-chat,
[class*="chat-bubble"],
[class*="chat-icon"],
.ticket-message-widget {
    display: none !important;
}

/* Hide popup notifications from site */
.close-popup-window,
.z-index-999:not(.mm-hero-slider *):not(header *):not(nav *) {
    display: none !important;
    visibility: hidden !important;
}

/* ================================================
   WEBSITE NAV FIXES (Issues 4, 5, 14, 16)
   ================================================ */

/* Issue 5: Center main mega menus */
.header .flex.justify-between .dm-sans ul,
.header nav ul.flex {
    justify-content: center !important;
}

/* Issue 4: Consistent hover effect for ALL mega menu items */
.first-dropdown-li > a.first-list {
    position: relative;
    transition: color 0.2s, opacity 0.2s;
}
.first-dropdown-li > a.first-list:hover {
    color: #3BAFE2 !important;
    opacity: 0.9;
}
.first-dropdown-li > a.first-list::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #3BAFE2;
    transition: width 0.3s ease;
}
.first-dropdown-li > a.first-list:hover::after,
.first-dropdown-li > a.first-list.active-border-bottom::after {
    width: 100%;
}

/* Issue 14: Top nav left section - icon color accent */
.layout-wrapper .flex.items-center a svg path {
    transition: fill 0.2s;
}

/* Issue 16: Consistent heading underline effect */
.mm-section-title::after {
    background: #3BAFE2 !important;
}

/* ================================================
   HOMEPAGE SECTION FIXES (Issues 6-10)
   ================================================ */

/* Issue 6: Hero slider arrow hover effect */
.mm-hero-slider .swiper-button-next,
.mm-hero-slider .swiper-button-prev {
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s !important;
}
.mm-hero-slider .swiper-button-next:hover,
.mm-hero-slider .swiper-button-prev:hover {
    background: #3BAFE2 !important;
    color: #fff !important;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(59,175,226,0.3);
}

/* Issue 7 & 8: Fix category/product section navigation arrow overlapping */
.mm-category-scroll .swiper-button-next,
.mm-category-scroll .swiper-button-prev,
.mm-best-selling .swiper-button-next,
.mm-best-selling .swiper-button-prev {
    top: -40px !important;
    bottom: auto !important;
    width: 32px !important;
    height: 32px !important;
    background: #f0f7fc !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: all 0.2s;
}
.mm-category-scroll .swiper-button-next:hover,
.mm-category-scroll .swiper-button-prev:hover,
.mm-best-selling .swiper-button-next:hover,
.mm-best-selling .swiper-button-prev:hover {
    background: #3BAFE2 !important;
    color: #fff !important;
}
.mm-category-scroll .swiper-button-next,
.mm-best-selling .swiper-button-next {
    right: 0 !important;
}
.mm-category-scroll .swiper-button-prev,
.mm-best-selling .swiper-button-prev {
    right: 40px !important;
    left: auto !important;
}

/* Issue 9: Fix new arrivals section arrows */
.mm-new-arrivals .swiper-button-next,
.mm-new-arrivals .swiper-button-prev {
    display: none !important;
}

/* ================================================
   LAYOUT FIXES (Issues 11-15)
   ================================================ */

/* Issue 11: Move filter option above products on search/inner pages */
@media (min-width: 768px) {
    .search-result .filter-mobile {
        position: sticky;
        top: 70px;
    }
}

/* Issue 12: Reduce "Why Shop with Us" top padding */
.mm-why-shop {
    padding-top: 30px !important;
}

/* Issue 15: Rating section cleanup */
.mm-deal-section {
    margin-bottom: 16px;
}

/* ================================================
   FOOTER FIXES (Issue 13)
   ================================================ */

/* Issue 13: Adjust footer spacing for large category list */
footer .flex.flex-wrap > div {
    min-width: 0;
}

/* Social media icons color matching */
footer a[href*="facebook"] svg, footer a[href*="facebook"] i { color: #1877F2 !important; }
footer a[href*="twitter"] svg, footer a[href*="twitter"] i { color: #1DA1F2 !important; }
footer a[href*="instagram"] svg, footer a[href*="instagram"] i { color: #E4405F !important; }
footer a[href*="youtube"] svg, footer a[href*="youtube"] i { color: #FF0000 !important; }
footer a[href*="linkedin"] svg, footer a[href*="linkedin"] i { color: #0A66C2 !important; }

/* ====================================================================
   PREMIUM POLISH v2 (May 2026) — Footer + Font weight + Icons + General
   ==================================================================== */

/* === FONT WEIGHT BOOST === */
/* Default body weight bumped from 400 to 500 for a stronger, more readable look */
body, p, span, div, li, a, td, label {
    font-weight: 500;
}
/* Stronger weight for navigational + heading text */
h1, h2, h3, h4, h5, h6 { font-weight: 700 !important; letter-spacing: -0.2px; }
.font-medium { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }

/* Headings on category/menu rows */
.text-sm, .text-base, .text-lg { font-weight: 500; }
strong, b { font-weight: 700; }

/* === ICON WEIGHT === */
/* Make font-awesome / svg icons feel bolder */
.fa, .fas, .far, .fab, [class^="fa-"], [class*=" fa-"] { font-weight: 900 !important; }
svg { stroke-width: 2; }
.mm-menu-icon svg { stroke-width: 2.4; }

/* === FOOTER v2 POLISH === */
.mm-footer-pro { background: linear-gradient(180deg, #1f2937 0%, #111827 100%) !important; }

.mm-footer-pro .mm-footer-brand-strip {
    padding: 32px 16px !important;
    background: linear-gradient(135deg, rgba(59, 175, 226, 0.10) 0%, rgba(6, 182, 212, 0.04) 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.mm-footer-pro .mm-fs-item {
    padding: 14px 10px !important;
    border-radius: 12px;
    transition: background 0.2s ease;
}
.mm-footer-pro .mm-fs-item:hover {
    background: rgba(255, 255, 255, 0.05);
}
.mm-footer-pro .mm-fs-item .mm-fs-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.20), rgba(245, 158, 11, 0.10)) !important;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.15);
}
.mm-footer-pro .mm-fs-item .mm-fs-icon svg {
    color: #fbbf24 !important;
    width: 24px;
    height: 24px;
}
.mm-footer-pro .mm-fs-item .mm-fs-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}
.mm-footer-pro .mm-fs-item .mm-fs-sub {
    font-size: 12.5px !important;
    color: #cbd5e1 !important;
    margin-top: 4px !important;
}

/* Newsletter v2 */
.mm-footer-pro .mm-newsletter-bar {
    background: linear-gradient(135deg, rgba(59, 175, 226, 0.08), rgba(6, 182, 212, 0.02));
    padding: 32px 16px !important;
}
.mm-footer-pro .mm-newsletter-left h4 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.3px;
}
.mm-footer-pro .mm-newsletter-left p {
    font-size: 14px !important;
    color: #cbd5e1 !important;
    margin-top: 6px !important;
}
.mm-footer-pro .mm-newsletter-form {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.20) !important;
    border-radius: 14px !important;
    padding: 6px !important;
    backdrop-filter: blur(10px);
}
.mm-footer-pro .mm-newsletter-form input {
    color: #ffffff !important;
    font-weight: 500 !important;
}
.mm-footer-pro .mm-newsletter-form button {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: #1f2937 !important;
    padding: 12px 26px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    letter-spacing: 0.3px;
}

/* Footer columns - more polished */
.mm-footer-pro footer ul p {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 1.2px !important;
    padding-bottom: 12px !important;
    margin-bottom: 18px !important;
    position: relative;
}
.mm-footer-pro footer ul p::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    border-radius: 3px;
}
.mm-footer-pro footer li,
.mm-footer-pro footer a li {
    padding: 6px 0 !important;
    font-size: 14px;
    color: #cbd5e1 !important;
    font-weight: 500;
    transition: all 0.18s ease;
}
.mm-footer-pro footer a:hover li,
.mm-footer-pro footer li:hover {
    color: #fbbf24 !important;
    padding-left: 8px !important;
}

/* Bottom bar refresh */
.mm-footer-pro .mm-footer-bottom-bar {
    background: #0f172a !important;
    padding: 22px 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mm-footer-pro .mm-footer-bottom-inner {
    font-size: 13.5px !important;
    color: #94a3b8 !important;
    font-weight: 500;
}
.mm-footer-pro .mm-footer-bottom-inner a { color: #cbd5e1 !important; transition: color .15s ease; }
.mm-footer-pro .mm-footer-bottom-inner a:hover { color: #fbbf24 !important; }

/* Social icons in footer (if present) - more polish */
.mm-footer-pro footer .social-icon,
.mm-footer-pro footer .social-icons a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    transition: all 0.2s ease;
    margin-right: 8px;
}
.mm-footer-pro footer .social-icon:hover,
.mm-footer-pro footer .social-icons a:hover {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(251, 191, 36, 0.3);
}

/* === ROBOTO weight overrides — strengthen base text === */
.roboto-regular, p.roboto-regular { font-weight: 500 !important; }
.roboto-medium { font-weight: 600 !important; }
.dm-sans { font-weight: 600 !important; }
.dm-regular { font-weight: 500 !important; }
.dm-bold { font-weight: 800 !important; }

/* === Stronger body text on website (general non-admin) === */
body.site-body, body:not(.admin-body) {
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ====================================================================
   PREMIUM PRODUCT DETAIL PAGE STYLING (May 2026)
   ==================================================================== */

/* Product gallery: stronger shadow + rounded corners */
.product-detail-img,
.product-details-image,
.product-detail-gallery img,
.product_image img,
#zoomImg,
.product-detail-image img {
    border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.10);
    transition: transform .25s ease;
}
.product-detail-img:hover,
.product-detail-image img:hover { transform: scale(1.01); }

/* Thumbnail strip */
.product-thumb img,
.swiper-pagination img,
.gallery-thumb img {
    border-radius: 10px !important;
    border: 2px solid #e5e7eb;
    transition: all .15s ease;
}
.product-thumb img:hover,
.swiper-slide-thumb-active img,
.gallery-thumb img:hover {
    border-color: #3BAFE2;
    box-shadow: 0 4px 12px rgba(59,175,226,.22);
}

/* Product title + price block */
.product-details-name,
.product-name h1,
.product-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.4px;
    line-height: 1.25;
    margin-bottom: 12px;
}

.product-detail-price,
.product-price,
.price-content {
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #16a34a !important;
    letter-spacing: -0.5px;
}
.product-regular-price,
.old-price,
.regular-price {
    color: #94a3b8 !important;
    text-decoration: line-through;
    font-size: 18px !important;
    font-weight: 600 !important;
}
.discount-percent,
.discount-badge,
.discount-percent-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #fff !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px;
    margin-left: 8px;
    box-shadow: 0 4px 10px rgba(239, 68, 68, .25);
}

/* Stock badge */
.stock-status, .in-stock { font-weight: 700 !important; }
.in-stock, .stock-in { color: #16a34a !important; }
.out-of-stock { color: #dc2626 !important; }

/* Add-to-cart + Buy-Now buttons */
.btn-add-cart,
.add-to-cart-btn,
.cart-button,
.btn-buy-now,
.cart-button-pdp,
button.add-cart {
    border-radius: 12px !important;
    padding: 14px 28px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase;
    background: linear-gradient(135deg, #3BAFE2, #2196C8) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 6px 18px rgba(59,175,226,.30);
    transition: all .18s ease;
}
.btn-add-cart:hover,
.add-to-cart-btn:hover,
.btn-buy-now:hover,
.cart-button-pdp:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(59,175,226,.40);
}
.btn-buy-now {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    box-shadow: 0 6px 18px rgba(245,158,11,.30) !important;
}
.btn-buy-now:hover { box-shadow: 0 10px 24px rgba(245,158,11,.42) !important; }

/* Variation/size/color selectors */
.variation-option,
.size-option,
.color-option,
.attribute-option,
.product-variation li {
    border-radius: 10px !important;
    border: 2px solid #e5e7eb !important;
    background: #fff !important;
    transition: all .15s ease;
    font-weight: 600 !important;
    padding: 8px 14px !important;
}
.variation-option:hover,
.size-option:hover,
.color-option:hover,
.attribute-option:hover {
    border-color: #3BAFE2 !important;
    background: #eff6ff !important;
}
.variation-option.active,
.size-option.active,
.color-option.active,
.attribute-option.active,
.product-variation li.active {
    border-color: #2196C8 !important;
    background: linear-gradient(135deg, #3BAFE2, #2196C8) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(59,175,226,.25);
}

/* Quantity selector */
.quantity-selector,
.quantity-input,
.cart-quantity {
    border-radius: 10px !important;
    border: 1.5px solid #e5e7eb !important;
    overflow: hidden;
}
.quantity-selector button,
.quantity-input button {
    background: #f8fafc !important;
    border: 0 !important;
    padding: 10px 14px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    transition: background .14s ease;
}
.quantity-selector button:hover,
.quantity-input button:hover { background: #e0f2fe !important; color: #2196C8 !important; }

/* Product tabs (description, reviews) */
.product-details-tabs .nav-tabs,
.product-tabs .nav,
.tab-list-pdp {
    border-bottom: 2px solid #e5e7eb !important;
}
.product-details-tabs .nav-tabs .nav-link,
.product-tabs .nav .nav-link {
    border: 0 !important;
    color: #64748b !important;
    font-weight: 700 !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    transition: all .15s ease;
}
.product-details-tabs .nav-tabs .nav-link.active,
.product-tabs .nav .nav-link.active {
    color: #2196C8 !important;
    background: transparent !important;
    border-bottom: 3px solid #2196C8 !important;
}

/* Pincode availability box */
.pincode-section,
.pincode-check,
.delivery-pincode-section {
    background: #f8fafc !important;
    border-radius: 12px !important;
    padding: 18px !important;
    border: 1.5px solid #e5e7eb !important;
}
.pincode-section input {
    border-radius: 8px !important;
    border: 1.5px solid #d4d4d4 !important;
    padding: 10px 14px !important;
    font-weight: 600 !important;
}

/* Review section */
.product-review,
.review-section {
    border-radius: 14px !important;
    background: #fff;
}
.review-card,
.single-review {
    border-radius: 12px !important;
    border: 1px solid #f1f5f9 !important;
    padding: 16px !important;
    margin-bottom: 12px;
    background: #fafbfc !important;
    transition: all .15s ease;
}
.review-card:hover { border-color: #cbd5e1 !important; box-shadow: 0 4px 14px rgba(15,23,42,.05); }

/* Similar products / Related */
.similar-products-section,
.related-products,
.recommended-products {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid #e5e7eb;
}
.section-title-pd {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 18px;
    letter-spacing: -0.3px;
}

/* ====================================================================
   PREMIUM CHECKOUT PAGE STYLING (May 2026)
   ==================================================================== */

/* Wrap checkout page content with premium feel */
.checkout-page,
.checkout-wrapper,
body.checkout-body,
.checkout-section,
#checkout-container,
.checkOut-page {
    background: #f8fafc !important;
}

/* Step indicator */
.checkout-steps,
.checkout-progress,
.checkout-stepper {
    background: #fff !important;
    border-radius: 14px !important;
    padding: 18px 24px !important;
    margin-bottom: 22px !important;
    box-shadow: 0 1px 3px rgba(15,23,42,.04);
}

/* Section cards */
.checkout-section-card,
.checkout-card,
.shipping-address-section,
.payment-method-section,
.order-summary-card,
.billing-address-section {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 24px !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.06);
    margin-bottom: 18px;
}
.checkout-section-card h3,
.checkout-section-card h4,
.shipping-address-section h3,
.payment-method-section h3,
.order-summary-card h3 {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 14px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
    display: flex !important;
    align-items: center;
    gap: 10px;
}
.checkout-section-card h3::before {
    content: "";
    width: 4px;
    height: 18px;
    background: linear-gradient(180deg, #3BAFE2, #2196C8);
    border-radius: 3px;
    display: inline-block;
}

/* Form inputs in checkout */
.checkout-page input[type="text"],
.checkout-page input[type="email"],
.checkout-page input[type="tel"],
.checkout-page input[type="number"],
.checkout-page select,
.checkout-page textarea,
#checkout-form input,
#checkout-form select,
.checkout-form input,
.checkout-form select {
    border-radius: 10px !important;
    border: 1.5px solid #e5e7eb !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all .15s ease;
}
.checkout-page input:focus,
.checkout-page select:focus,
.checkout-form input:focus {
    border-color: #3BAFE2 !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(59,175,226,.15);
}

/* Address card / address selector */
.address-card,
.saved-address,
.address-block {
    border-radius: 12px !important;
    border: 2px solid #e5e7eb !important;
    padding: 16px !important;
    cursor: pointer;
    transition: all .15s ease;
    background: #fff !important;
}
.address-card:hover,
.saved-address:hover { border-color: #3BAFE2 !important; }
.address-card.active,
.address-card.selected,
.saved-address.active {
    border-color: #2196C8 !important;
    background: #eff6ff !important;
    box-shadow: 0 4px 12px rgba(59,175,226,.15);
}

/* Payment method tile */
.payment-method-tile,
.payment-option,
.payment-method-card {
    border-radius: 12px !important;
    border: 2px solid #e5e7eb !important;
    padding: 16px 18px !important;
    cursor: pointer;
    transition: all .15s ease;
    background: #fff !important;
    display: flex !important;
    align-items: center;
    gap: 14px;
}
.payment-method-tile:hover,
.payment-option:hover { border-color: #3BAFE2 !important; }
.payment-method-tile.active,
.payment-option.selected {
    border-color: #16a34a !important;
    background: #f0fdf4 !important;
}
.payment-method-tile img,
.payment-option img { max-height: 28px; width: auto; }

/* Order summary */
.order-summary-card .summary-row,
.order-summary .summary-row,
.cart-summary li {
    display: flex !important;
    justify-content: space-between !important;
    padding: 10px 0 !important;
    border-bottom: 1px dashed #e5e7eb;
    font-weight: 600;
    color: #475569;
}
.order-summary-card .summary-row.total,
.order-summary .grand-total,
.cart-summary .total {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    border-top: 2px solid #0f172a !important;
    padding-top: 14px !important;
    margin-top: 8px !important;
}

/* Place Order button */
.place-order-btn,
.btn-place-order,
.btn-checkout,
button[type="submit"].checkout-submit {
    width: 100%;
    background: linear-gradient(135deg, #16a34a, #22c55e) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 16px 28px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 18px rgba(22,163,74,.30);
    transition: all .18s ease;
    cursor: pointer;
}
.place-order-btn:hover,
.btn-place-order:hover,
.btn-checkout:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(22,163,74,.40);
}

/* Promo code / coupon input */
.coupon-section,
.promo-code,
.apply-coupon {
    background: linear-gradient(135deg, #fff7ed, #fef3c7) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    border: 1.5px dashed #fbbf24 !important;
}

/* Sticky checkout sidebar (order summary) */
@media (min-width: 1024px) {
    .checkout-sidebar,
    .order-summary-sidebar { position: sticky; top: 96px; }
}

/* ====================================================================
   PREMIUM POLISH v4 — May 2026
   ==================================================================== */

/* --- Footer Policies: enforce SINGLE column always --- */
.mm-footer-policies-col {
    min-width: 200px;
}
.mm-footer-policies-list {
    display: block !important;
    columns: 1 !important;
    column-count: 1 !important;
    -webkit-columns: 1 !important;
    -moz-columns: 1 !important;
    list-style: none;
    padding: 0;
    margin: 0;
}
.mm-footer-policies-list .mm-policy-item {
    display: block !important;
    width: 100% !important;
    padding: 4px 0 4px 12px !important;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    line-height: 1.5 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500 !important;
}
.mm-footer-policies-list .mm-policy-item::before {
    content: "›";
    position: absolute;
    left: 0;
    top: 4px;
    color: rgba(251,191,36,0.7);
    font-weight: 700;
    transition: transform 0.2s ease;
}
.mm-footer-policies-list a:hover .mm-policy-item {
    color: #fbbf24 !important;
    padding-left: 18px !important;
}
.mm-footer-policies-list a:hover .mm-policy-item::before {
    transform: translateX(3px);
    color: #fbbf24;
}

/* =====================================================================
   PRODUCT DETAIL PAGE — COMPLETE PREMIUM REDESIGN v5 (May 2026)
   Targets actual class names used in the product detail partials.
   ===================================================================== */

/* Page background — subtle warm gradient backdrop */
#item-details-container {
    background: linear-gradient(180deg, #fafbfc 0%, #ffffff 320px) !important;
    padding-top: 18px !important;
    padding-bottom: 36px !important;
}

/* ===== Breadcrumb — plain (no floating-card line) =====
   v21.36: removed the card background/border/box-shadow that showed as a
   faint horizontal line above the breadcrumb on the product page. */
#item-details-container nav[aria-label="Breadcrumb"] {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: 0;
    margin-bottom: 16px;
}
#item-details-container nav[aria-label="Breadcrumb"] ol li,
#item-details-container nav[aria-label="Breadcrumb"] ol li a {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    transition: color 0.18s ease;
}
#item-details-container nav[aria-label="Breadcrumb"] ol li a:hover { color: #2196C8 !important; }
#item-details-container nav[aria-label="Breadcrumb"] ol li:last-child a { color: #0f172a !important; }
#item-details-container nav[aria-label="Breadcrumb"] ol li p.px-2 { color: #cbd5e1 !important; }

/* ===== Main product card (gallery + info + delivery rail) =====
   Use CSS Grid for predictable 3-column structure (was flex-wrap with 36%+40%+28%=104% = caused wrap).
*/
#item-details-container > div.flex.flex-wrap.mt-4 {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.05);
    margin-top: 18px !important;

    /* Override the Tailwind flex with a clean CSS Grid */
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 1024px) {
    #item-details-container > div.flex.flex-wrap.mt-4 {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr) minmax(0, 0.85fr);
        gap: 22px;
        align-items: start;
    }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
    #item-details-container > div.flex.flex-wrap.mt-4 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    }
    /* Delivery (third column) wraps below spanning full row on tablet */
    #item-details-container > div.flex.flex-wrap.mt-4 > .lg\:w-28\%,
    #item-details-container > div.flex.flex-wrap.mt-4 > div:last-child {
        grid-column: 1 / -1;
    }
}

/* Reset Tailwind width classes inside the grid (they no longer apply) */
#item-details-container > div.flex.flex-wrap.mt-4 > .product-left,
#item-details-container > div.flex.flex-wrap.mt-4 > #item-details-wishlist,
#item-details-container > div.flex.flex-wrap.mt-4 > div {
    width: 100% !important;
    max-width: 100% !important;
    flex: unset !important;
    margin: 0 !important;
    min-width: 0;
}

/* ===== GALLERY (left side) ===== */
.product-left {
    margin-bottom: 0 !important;
    padding: 0 !important;
}
.product-left .swiper-container-main {
    border-radius: 18px !important;
    overflow: hidden;
    background: linear-gradient(135deg, #f9fafb, #ffffff);
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.05);
    position: relative;
}
.product-left .swiper-container-main .swiper-slide,
.product-left .minimum-height {
    min-height: 0 !important;
    aspect-ratio: 3 / 4;
    height: auto !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
}
.product-left .swiper-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center top !important;
    padding: 0;
    display: block;
}

/* Floating badges on image (Featured, Top Rated, % OFF) */
.product-left .swiper-slide .absolute.z-10 { gap: 6px; }
.product-left .swiper-slide .absolute.z-10 p,
.product-left .swiper-slide .absolute.z-10 > div {
    border-radius: 8px !important;
    padding: 6px 10px !important;
    height: auto !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18) !important;
    backdrop-filter: blur(4px);
}
.product-left .swiper-slide .bg-pinks-2 { background: linear-gradient(135deg, #dc2626, #ef4444) !important; color: #fff !important; }
.product-left .swiper-slide .bg-green-5 { background: linear-gradient(135deg, #059669, #10b981) !important; color: #fff !important; }

/* Thumbnails */
.product-left .gallery-thumbs {
    margin-top: 16px !important;
}
.product-left .gallery-thumbs .swiper-slide-thumbs {
    border-radius: 10px !important;
    border: 1.5px solid transparent !important;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    transition: all 0.18s ease;
    cursor: pointer;
}
.product-left .gallery-thumbs .swiper-slide-thumbs img {
    padding: 4px !important;
    height: 64px !important;
    object-fit: contain;
    width: 100% !important;
}
.product-left .gallery-thumbs .swiper-slide-thumbs:hover {
    border-color: rgba(59, 175, 226, 0.4) !important;
    transform: translateY(-1px);
}
.product-left .gallery-thumbs .swiper-slide-thumb-active,
.product-left .gallery-thumbs .swiper-slide-thumbs.swiper-slide-active {
    border-color: #2196C8 !important;
    box-shadow: 0 4px 14px rgba(33, 150, 200, 0.25) !important;
}

/* Thumbnail navigation arrows */
.product-left .swiper-button-prev.swiper-thumbsnail,
.product-left .swiper-button-next.swiper-thumbsnail {
    background: #ffffff !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12) !important;
    border: 1px solid #f1f5f9 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
}
.product-left .swiper-button-prev.swiper-thumbsnail:hover,
.product-left .swiper-button-next.swiper-thumbsnail:hover {
    background: linear-gradient(135deg, #3BAFE2, #2196C8) !important;
    border-color: transparent !important;
    transform: scale(1.06);
}
.product-left .swiper-button-prev.swiper-thumbsnail:hover svg path,
.product-left .swiper-button-next.swiper-thumbsnail:hover svg path { fill: #ffffff !important; }
.product-left .swiper-button-prev.swiper-thumbsnail::after,
.product-left .swiper-button-next.swiper-thumbsnail::after { display: none !important; }

/* ===== INFO SIDE (right of gallery) ===== */
#item-details-wishlist {
    padding: 0 !important;
}

/* Product title */
#item-details-wishlist h3 {
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1.32 !important;
    color: #0f172a !important;
    letter-spacing: -0.5px;
    margin: 0 0 12px !important;
}

/* Category / Brand / SKU pill chips */
#item-details-wishlist .bg-gray-11 {
    background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
    border-radius: 999px !important;
    padding: 5px 14px !important;
    border: 1px solid rgba(33, 150, 200, 0.15) !important;
    box-shadow: none !important;
}
#item-details-wishlist .bg-gray-11 p {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #1e40af !important;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 0 !important;
}

/* Rating section */
#item-details-wishlist #rating {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-radius: 999px;
    padding: 6px 14px;
    border: 1px solid rgba(245, 158, 11, 0.18);
}
#item-details-wishlist #rating ul li svg { display: block; }
#item-details-wishlist #rating ul span {
    font-weight: 700 !important;
    color: #92400e !important;
    font-size: 13px !important;
}

/* === Price area (offer.blade.php) === */
#item-details-wishlist #countDown {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 12px 0;
    border: 1px dashed #f59e0b;
}
#item-details-wishlist #countDown p {
    font-weight: 700 !important;
    color: #92400e !important;
    font-size: 12px !important;
}
#item-details-wishlist #countDown #count_days,
#item-details-wishlist #countDown #count_others {
    background: #fff !important;
    color: #92400e !important;
    border: 0 !important;
    border-radius: 7px !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    box-shadow: 0 2px 6px rgba(146, 64, 14, 0.15);
}

/* Big price */
#item-details-wishlist #item_price,
#item-details-wishlist #varMinMaxPrice {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.6px !important;
    line-height: 1.1 !important;
    background: linear-gradient(135deg, #0f172a, #2196C8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
#item-details-wishlist #item_offer_price {
    color: #94a3b8 !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    margin-left: 10px;
    text-decoration: line-through;
}

/* Summary text */
#item-details-wishlist .product-view-summary {
    font-size: 14px !important;
    color: #475569 !important;
    line-height: 1.65 !important;
    font-weight: 500 !important;
    margin-top: 8px;
}

/* ===== Variation block ===== */
#item-details-wishlist .option-select {
    margin: 18px 0 !important;
    padding: 14px 0 0;
    border-top: 1px solid #f1f5f9;
}
#item-details-wishlist .option-select h4 {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 12px !important;
}
#item-details-wishlist .option-select h4 span {
    color: #2196C8 !important;
    font-weight: 800;
    margin-left: 4px;
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
}

/* Pill buttons (size, other attrs) */
#item-details-wishlist .attribute-pill { margin: 0 !important; }
#item-details-wishlist .attribute-pill span {
    background: #ffffff;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 9px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    transition: all 0.18s ease !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    min-width: 48px;
    text-align: center;
}
#item-details-wishlist .attribute-pill:hover span {
    border-color: #3BAFE2 !important;
    color: #2196C8 !important;
    background: #f0f9ff !important;
    transform: translateY(-1px);
}
#item-details-wishlist .attribute-pill input.attr-radio:checked + span,
#item-details-wishlist .attribute-pill.selected span {
    background: linear-gradient(135deg, #3BAFE2, #2196C8) !important;
    border-color: #2196C8 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 16px rgba(33, 150, 200, 0.32) !important;
    transform: translateY(-1px);
}

/* Color swatches */
#item-details-wishlist .color-options input.item-variations {
    width: 34px !important;
    height: 34px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 50% !important;
    cursor: pointer;
    margin: 2px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}
#item-details-wishlist .color-options input.item-variations.square { border-radius: 8px !important; }
#item-details-wishlist .color-options input.item-variations:hover { transform: scale(1.08); }
#item-details-wishlist .color-options input.item-variations:checked {
    border-color: #2196C8 !important;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #2196C8 !important;
    transform: scale(1.1);
}

/* Stock pills */
#item-details-wishlist .bg-green-2 {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
    color: #065f46 !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: 1px solid rgba(16, 185, 129, 0.25);
}
#item-details-wishlist .bg-pinks-2 {
    background: linear-gradient(135deg, #fee2e2, #fecaca) !important;
    color: #991b1b !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ===== Quantity selector (#cart-item-details-...) ===== */
#item-details-wishlist [id^="cart-item-details-"] {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    overflow: hidden;
    height: 48px !important;
    width: auto !important;
    min-width: 140px;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
#item-details-wishlist .cart-item-qty-dec,
#item-details-wishlist .cart-item-qty-inc {
    background: #f8fafc !important;
    width: 44px;
    height: 100%;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.18s ease;
    padding: 0 !important;
}
#item-details-wishlist .cart-item-qty-dec:hover,
#item-details-wishlist .cart-item-qty-inc:hover {
    background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
}
#item-details-wishlist .cart-item-qty-dec svg path,
#item-details-wishlist .cart-item-qty-inc svg path { fill: #475569 !important; }
#item-details-wishlist .cart-item-qty-dec:hover svg path,
#item-details-wishlist .cart-item-qty-inc:hover svg path { fill: #2196C8 !important; }
#item-details-wishlist .cart-item-quantity {
    flex: 1 1 auto;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

/* ===== Add to Cart + Buy Now buttons ===== */
#item-details-wishlist .add-to-cart button,
#item-details-wishlist .add-to-cart.cart-details-page button,
.product-left + #item-details-wishlist a.add-to-cart button {
    background: linear-gradient(135deg, #f59e0b, #f97316) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 13px 28px !important;
    height: 48px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    box-shadow: 0 10px 26px rgba(249, 115, 22, 0.35) !important;
    transition: all 0.22s ease !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
#item-details-wishlist .add-to-cart button svg path { fill: #ffffff !important; }
#item-details-wishlist .add-to-cart button span,
#item-details-wishlist .add-to-cart button .text-gray-12,
#item-details-wishlist .add-to-cart button .dm-bold {
    color: #ffffff !important;
    font-size: 14px !important;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
#item-details-wishlist .add-to-cart button:hover,
#item-details-wishlist .add-to-cart.cart-details-page button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(249, 115, 22, 0.48) !important;
    filter: brightness(1.04);
}

#item-details-wishlist .buy-now-btn button,
#item-details-wishlist .buy-now-btn.cart-details-page button {
    background: linear-gradient(135deg, #1e3a8a, #2196C8) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 13px 28px !important;
    height: 48px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    box-shadow: 0 10px 26px rgba(33, 150, 200, 0.36) !important;
    transition: all 0.22s ease !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
#item-details-wishlist .buy-now-btn button svg path,
#item-details-wishlist .buy-now-btn button svg circle { fill: #ffffff !important; }
#item-details-wishlist .buy-now-btn button span,
#item-details-wishlist .buy-now-btn button .text-white { color: #ffffff !important; }
#item-details-wishlist .buy-now-btn button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(33, 150, 200, 0.48) !important;
    filter: brightness(1.06);
}

/* ===== Wishlist + Compare icon buttons (top-right of info side) ===== */
#item-details-wishlist .wishlist,
#item-details-wishlist .compareText {
    width: 40px !important;
    height: 40px !important;
    padding: 9px !important;
    border-radius: 50% !important;
    border: 1.5px solid #e5e7eb !important;
    background: #ffffff;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
#item-details-wishlist .wishlist:hover {
    border-color: #ef4444 !important;
    background: linear-gradient(135deg, #fef2f2, #fee2e2) !important;
    transform: scale(1.06);
}
#item-details-wishlist .compareText:hover {
    border-color: #2196C8 !important;
    background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
    transform: scale(1.06);
}
#item-details-wishlist .wishlist svg { width: 18px; height: 18px; }
#item-details-wishlist .wishlist .color_fill { color: #ef4444 !important; }

/* Share button */
#item-details-wishlist .share-product-icon,
#item-details-wishlist [class*="share"] svg {
    color: #475569 !important;
}

/* ===== Delivery / Pincode rail (right side) ===== */
#item-details-container .lg\:w-28\% {
    background: linear-gradient(135deg, #f0f9ff, #ffffff);
    border-radius: 14px !important;
    padding: 18px !important;
    border: 1px solid rgba(33, 150, 200, 0.12) !important;
    box-shadow: 0 4px 14px rgba(33, 150, 200, 0.06);
}
#item-details-container .lg\:w-28\% h5,
#item-details-container .lg\:w-28\% h6 {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px !important;
}
.pincode-check-form input,
#item-details-container .lg\:w-28\% input[type="text"] {
    border-radius: 10px !important;
    border: 1.5px solid #e5e7eb !important;
    padding: 10px 14px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    width: 100%;
}
.pincode-check-form input:focus,
#item-details-container .lg\:w-28\% input[type="text"]:focus {
    border-color: #3BAFE2 !important;
    box-shadow: 0 0 0 3px rgba(59, 175, 226, 0.15) !important;
    outline: 0;
}
.pincode-check-form button,
#item-details-container .lg\:w-28\% button[type="submit"] {
    background: linear-gradient(135deg, #3BAFE2, #2196C8) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    font-weight: 700 !important;
    border: 0 !important;
    box-shadow: 0 4px 12px rgba(33, 150, 200, 0.25) !important;
}

/* ===== Tabs (Description/Specification/Reviews) ===== */
#item-details-section { margin-top: 18px; }
#item-details-section .c-tabs {
    background: #ffffff;
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.05);
}
#item-details-section .c-tabs-nav {
    display: flex !important;
    gap: 4px !important;
    border-bottom: 2px solid #f1f5f9 !important;
    padding-bottom: 0 !important;
    margin-bottom: 22px !important;
    flex-wrap: wrap;
}
#item-details-section .c-tabs-nav__link {
    padding: 12px 22px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #64748b !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -2px !important;
    transition: all 0.2s !important;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-decoration: none !important;
    background: transparent !important;
}
#item-details-section .c-tabs-nav__link:hover { color: #2196C8 !important; }
#item-details-section .c-tabs-nav__link.is-active {
    color: #2196C8 !important;
    border-bottom-color: #2196C8 !important;
    background: transparent !important;
}

/* Description tab content */
#item-details-section .product-content { font-size: 14.5px !important; line-height: 1.75 !important; color: #334155 !important; }
#item-details-section .product-content p { margin-bottom: 12px !important; }

/* Tab content panels - ensure only active tab content visible */
#item-details-section .c-tab { padding: 8px 0 0; }
#item-details-section .c-tab:not(.is-active) { display: none; }
#item-details-section .c-tab.is-active { display: block; animation: fadeInTab .3s ease; }
@keyframes fadeInTab { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
#item-details-section .item-full-details {
    height: auto !important;
    max-height: 480px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    padding-right: 8px;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    color: #334155 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
#item-details-section .item-full-details::-webkit-scrollbar { width: 8px; }
#item-details-section .item-full-details::-webkit-scrollbar-track { background: transparent; }
#item-details-section .item-full-details::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
}
#item-details-section .item-full-details::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
#item-details-section .item-full-details.expanded { max-height: none !important; overflow: visible; }
/* Description is now scrollable, so the legacy "See More" gradient button is hidden */
#item-details-section #view-more { display: none !important; }
#item-details-section .item-full-details img { max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0; }
#item-details-section .item-full-details p { margin-bottom: 10px; }
#item-details-section .item-full-details ul,
#item-details-section .item-full-details ol { padding-left: 22px; margin: 8px 0; }
#item-details-section .item-full-details li { margin-bottom: 4px; }

/* "See More" button at bottom of description */
#item-details-section #view-more {
    background: linear-gradient(180deg, transparent, #ffffff 60%);
    padding-top: 30px;
}
#item-details-section #view-more > div {
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 999px;
    padding: 7px 18px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    transition: all 0.18s ease;
}
#item-details-section #view-more > div:hover {
    border-color: #3BAFE2;
    background: linear-gradient(135deg, #eff6ff, #ffffff);
    transform: translateY(-1px);
}
#item-details-section #view-more span { color: #2196C8 !important; font-weight: 700 !important; }
#item-details-section #view-more svg path { fill: #2196C8 !important; }

/* Specification table */
#item-details-section table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #f1f5f9;
}
#item-details-section table tr:nth-child(even) { background: #f8fafc; }
#item-details-section table td {
    padding: 14px 18px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #475569 !important;
}
#item-details-section table tr:last-child td { border-bottom: 0 !important; }
#item-details-section table td:first-child {
    font-weight: 700 !important;
    color: #0f172a !important;
    width: 32%;
    background: linear-gradient(135deg, #f8fafc, #ffffff);
}

/* Review section */
#item-details-section .review-tab-content {
    background: linear-gradient(180deg, #ffffff, #fafbfc);
    border-radius: 12px;
    padding: 18px;
}
#item-details-section .review-area-section {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 14px;
}
#item-details-section .review-area-section .reviewer-name { font-weight: 700 !important; color: #0f172a !important; font-size: 14px; }
#item-details-section .review-area-section .review-content { color: #475569 !important; font-size: 13.5px; line-height: 1.6; margin-top: 6px; }

/* ===== Related / Similar / You may also like sections ===== */
#related_products, #upsale_products, #similar-products-section, #similar-products {
    background: #ffffff;
    border-radius: 16px;
    padding: 26px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
    margin-top: 24px;
    border: 1px solid rgba(15, 23, 42, 0.05);
}
#related_products p.dm-bold,
#upsale_products p.dm-bold,
#similar-products-section p.dm-bold,
#similar-products-section .text-lg {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 18px !important;
    letter-spacing: -0.3px;
    position: relative;
    padding-left: 16px;
}
#related_products p.dm-bold::before,
#upsale_products p.dm-bold::before,
#similar-products-section p.dm-bold::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 5px;
    background: linear-gradient(180deg, #3BAFE2, #2196C8);
    border-radius: 3px;
}

/* ===== Responsive ===== */
@media (max-width: 1023.98px) {
    #item-details-container > div.flex.flex-wrap.mt-4 { padding: 20px; }
}
@media (max-width: 767.98px) {
    #item-details-container > div.flex.flex-wrap.mt-4 { padding: 16px; border-radius: 14px; gap: 16px; }
    .product-left .swiper-container-main .swiper-slide,
    .product-left .minimum-height {
        min-height: 0 !important;
        aspect-ratio: 3 / 4;
    }
    .product-left .swiper-slide-img {
        height: 100%;
    }
    #item-details-wishlist h3 { font-size: 20px !important; }
    #item-details-wishlist #item_price, #item-details-wishlist #varMinMaxPrice { font-size: 26px !important; }
    #item-details-wishlist .add-to-cart button,
    #item-details-wishlist .buy-now-btn button {
        padding: 11px 20px !important; font-size: 13px !important; height: 44px !important;
    }
}

/* ============================================================
   LOGO-FRIENDLY COLOR PALETTE (May 2026)
   Replace the "too much red" usage across the website with the
   brand's cyan/teal (matching the Multimaart logo: #3BAFE2).
   We override the legacy Tailwind `*-reds-*` palette + commonly
   used red shades so the whole site picks up the new branding
   without touching every blade template.
   ============================================================ */

/* Backgrounds: the red palette → logo cyan */
.bg-reds-1, .hover\:bg-reds-1:hover { background-color: #3BAFE2 !important; }
.bg-reds-2, .hover\:bg-reds-2:hover { background-color: #2196C8 !important; }
.bg-reds-3, .hover\:bg-reds-3:hover { background-color: #1d8bbb !important; }
.bg-reds-4, .hover\:bg-reds-4:hover { background-color: #176f95 !important; }
.bg-reds-5, .hover\:bg-reds-5:hover { background-color: #145d7e !important; }
.bg-reds-6, .hover\:bg-reds-6:hover { background-color: #e0f4fb !important; }

/* Text colors */
.text-reds-1, .hover\:text-reds-1:hover { color: #3BAFE2 !important; }
.text-reds-2, .hover\:text-reds-2:hover { color: #2196C8 !important; }
.text-reds-3, .hover\:text-reds-3:hover { color: #1d8bbb !important; }
.text-reds-4, .hover\:text-reds-4:hover { color: #176f95 !important; }
.text-reds-5, .hover\:text-reds-5:hover { color: #145d7e !important; }

/* Borders */
.border-reds-1 { border-color: #3BAFE2 !important; }
.border-reds-2 { border-color: #2196C8 !important; }
.border-reds-3 { border-color: #1d8bbb !important; }

/* Tailwind v2/v3 generic red classes used across some templates */
.bg-red-500, .bg-red-600, .bg-red-700, .bg-red-800 { background-color: #2196C8 !important; }
.text-red-500, .text-red-600, .text-red-700, .text-red-800 { color: #2196C8 !important; }
.hover\:bg-red-500:hover, .hover\:bg-red-600:hover, .hover\:bg-red-700:hover, .hover\:bg-red-800:hover { background-color: #1d8bbb !important; }
.hover\:text-red-500:hover, .hover\:text-red-600:hover { color: #1d8bbb !important; }

/* Common "buy-now" / "add-to-cart" red gradients used inline → re-skin to brand */
.process-goto.shop-btn[style*="background"],
.product-listing .grid-button[style*="rgb(228"],
.product-card [style*="rgb(220, 38, 38)"] { background: linear-gradient(135deg, #3BAFE2, #2196C8) !important; }

/* Sale / Offer / Discount badges (commonly painted red) → branded teal */
.discount-badge, .offer-badge, .sale-badge {
    background: linear-gradient(135deg, #3BAFE2, #2196C8) !important;
    color: #fff !important;
}

/* Hover-orange text on footer/nav links → use brand teal so it matches the logo */
.hover\:text-orange-500:hover { color: #3BAFE2 !important; }
.text-orange-500 { color: #3BAFE2 !important; }
.text-orange-600 { color: #2196C8 !important; }
.bg-orange-500 { background-color: #3BAFE2 !important; }
.bg-orange-600 { background-color: #2196C8 !important; }

/* Keep destructive states (error messages, "delete" buttons) red — only redirect
   the *decorative* red usage above. */
.alert-danger,
.text-danger,
.btn-danger,
.invalid-feedback { /* untouched */ }

/* ============================================================
   GLOBAL FIX — intl-tel-input phone field overlap on the SITE
   (May 2026) Same fix used in admin-theme.css so site signup,
   checkout, account profile and contact-us phone fields render
   the flag + dial code on a dedicated left panel without
   overlapping the digits.
   ============================================================ */
.iti { width: 100% !important; display: block !important; }
.iti.iti--allow-dropdown { width: 100% !important; }
.iti.iti--allow-dropdown > input,
.iti.iti--show-selected-dial-code > input {
    padding-left: 96px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
}
.iti .iti__flag-container,
.iti.iti--allow-dropdown .iti__flag-container {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 90px !important;
    padding: 0 !important;
    border-right: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}
.iti .iti__selected-flag {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 10px 0 12px !important;
    height: 100% !important;
    background: transparent !important;
}
.iti .iti__selected-dial-code {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-left: 4px !important;
}
.iti__country-list {
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 12px 30px rgba(15,23,42,0.12) !important;
    max-height: 260px !important;
    margin-top: 2px !important;
    z-index: 100000 !important;
}
.iti__country { padding: 8px 12px !important; font-size: 13px !important; }
.iti__country.iti__highlight { background: #eff6ff !important; }

/* The India-only custom phone field wrapper (newer create/edit forms) */
.india-phone-wrapper {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.india-phone-wrapper:focus-within {
    border-color: #3BAFE2;
    box-shadow: 0 0 0 3px rgba(59,175,226,.12);
}
.india-phone-wrapper .india-phone-prefix {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    flex-shrink: 0;
}
.india-phone-wrapper .india-phone-input {
    flex: 1 1 auto;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 12px !important;
    height: 42px !important;
    font-size: 13.5px !important;
    outline: none !important;
}

/* ============================================================
   Site login / signup modal — input + icon overlap fix
   ------------------------------------------------------------
   Screenshot review 22-May-2026 reported the email / password
   placeholders overlapping with the leading SVG icon and the eye
   toggle on the right. The Tailwind utility classes that controlled
   the input padding-left/right (`pl-14 md:pl-16`, `pr-12`) were
   being purged in production, collapsing the padding so text drew
   on top of the icons.

   This block locks the geometry independently of Tailwind:
     - leading icon area: 0 .. 52px (icon span sits there)
     - text starts at  : 56px on mobile, 64px on md+
     - trailing eye area: last 44px
   ============================================================ */

/* All login / signup input fields get enough room for the icons. */
.signin-form-container input.password-field,
.signin-form-container input[type="email"],
.signin-form-container input[type="text"],
.signin-form-container input[type="tel"],
.signin-form-container input[type="password"],
.signup-form-container input.password-field,
.signup-form-container input[type="email"],
.signup-form-container input[type="text"],
.signup-form-container input[type="tel"],
.signup-form-container input[type="password"],
.login-email-section input,
.login-phone-section input,
.need-login-email-section input,
.need-login-phone-section input,
.password-container input,
.password-container input.form-control {
    padding-left: 56px !important;
    padding-right: 14px !important;
    box-sizing: border-box;
}
/* Phone OTP digit boxes must NOT inherit login-field icon padding. */
#phone-otp-section input.otp-digit {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
@media (min-width: 768px) {
    .signin-form-container input.password-field,
    .signin-form-container input[type="email"],
    .signin-form-container input[type="text"],
    .signin-form-container input[type="tel"],
    .signin-form-container input[type="password"],
    .signup-form-container input.password-field,
    .signup-form-container input[type="email"],
    .signup-form-container input[type="text"],
    .signup-form-container input[type="tel"],
    .signup-form-container input[type="password"],
    .login-email-section input,
    .login-phone-section input,
    .need-login-email-section input,
    .need-login-phone-section input,
    .password-container input,
    .password-container input.form-control {
        padding-left: 64px !important;
        padding-right: 16px !important;
    }
    #phone-otp-section input.otp-digit {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Password inputs additionally need room for the eye toggle on the right. */
.password-container input.password-field,
.password-container input[type="password"],
.password-container input[type="text"][name="password"] {
    padding-right: 44px !important;
}
@media (min-width: 768px) {
    .password-container input.password-field,
    .password-container input[type="password"],
    .password-container input[type="text"][name="password"] {
        padding-right: 48px !important;
    }
}

/* The leading icon span — pin it inside the input row using a FIXED top
   value (not 50% of the container). When the password container also
   renders helper text, the 50%-of-container math previously dropped the
   icon into the helper text area, causing the overlap reported in the
   23-May-2026 screenshot review. */
.login-email-section > div > span:not(.signin-message):not(.enable-login-phone-section):not(.enable-login-email-section),
.login-phone-section > div > span:not(.signin-message):not(.enable-login-phone-section):not(.enable-login-email-section),
.need-login-email-section > div > span:not(.signin-message):not(.enable-login-phone-section):not(.enable-login-email-section),
.need-login-phone-section > div > span:not(.signin-message):not(.enable-login-phone-section):not(.enable-login-email-section),
.password-container > span:not(.password-hide):not(.password-show):not(.signin-message):not(.signup-message):not(.password-strength):not(.password-validation-msg):not(.password-validation-error):not(.confirm-password-validation-error):not(.password-matching) {
    position: absolute !important;
    left: 10px !important;
    /* Center inside a 44px input: (44 - 24)/2 = 10px */
    top: 10px !important;
    transform: none !important;
    height: 24px !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px 0 4px !important;
    border-right: 1px solid #e2e8f0 !important;
    background: transparent !important;
    pointer-events: none;
    z-index: 2;
}
@media (min-width: 768px) {
    .login-email-section > div > span:not(.signin-message):not(.enable-login-phone-section):not(.enable-login-email-section),
    .login-phone-section > div > span:not(.signin-message):not(.enable-login-phone-section):not(.enable-login-email-section),
    .need-login-email-section > div > span:not(.signin-message):not(.enable-login-phone-section):not(.enable-login-email-section),
    .need-login-phone-section > div > span:not(.signin-message):not(.enable-login-phone-section):not(.enable-login-email-section),
    .password-container > span:not(.password-hide):not(.password-show):not(.signin-message):not(.signup-message):not(.password-strength):not(.password-validation-msg):not(.password-validation-error):not(.confirm-password-validation-error):not(.password-matching) {
        /* Center inside a 52px input: (52 - 26)/2 = 13px */
        top: 13px !important;
        height: 26px !important;
        padding: 0 12px 0 6px !important;
    }
}

/* The leading SVG itself: always show, fixed size, visible colour. */
.login-email-section svg,
.login-phone-section svg,
.need-login-email-section svg,
.need-login-phone-section svg,
.password-container svg {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    color: #6b7280 !important;
    margin: 0 !important;
    vertical-align: middle !important;
}
.login-email-section svg path,
.login-email-section svg circle,
.login-phone-section svg path,
.login-phone-section svg circle,
.need-login-email-section svg path,
.need-login-email-section svg circle,
.need-login-phone-section svg path,
.need-login-phone-section svg circle,
.password-container > span:not(.password-hide):not(.password-show) svg path,
.password-container > span:not(.password-hide):not(.password-show) svg circle {
    fill: #6b7280 !important;
}

/* Password eye toggles — pin to the right edge of the INPUT (not the
   whole container) using a fixed top so they don't drop into helper text. */
.password-container .password-hide,
.password-container .password-show {
    position: absolute !important;
    right: 12px !important;
    top: 10px !important;
    transform: none !important;
    height: 24px !important;
    width: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer !important;
    z-index: 3;
    background: transparent !important;
}
@media (min-width: 768px) {
    .password-container .password-hide,
    .password-container .password-show {
        top: 13px !important;
        height: 26px !important;
        width: 26px !important;
    }
}
.password-container .password-show.hidden { display: none !important; }
.password-container .password-hide svg,
.password-container .password-show svg {
    width: 18px !important;
    height: 18px !important;
}
.password-container .password-hide svg path,
.password-container .password-show svg path { fill: #94a3b8 !important; }

/* Make sure the field height matches what placeholder + icons expect. */
.signin-form-container input,
.signup-form-container input,
.password-container input {
    min-height: 44px;
}
@media (min-width: 768px) {
    .signin-form-container input,
    .signup-form-container input,
    .password-container input {
        min-height: 52px;
    }
}

/* ===========================================================================
   v6 Fix (2026-05-25): Home page product slider arrow buttons
   Best Selling / New Arrivals / Featured product sliders need clearly
   visible prev/next arrows that actually trigger Swiper navigation.
   The default Swiper arrows were either invisible or had pointer-events
   stripped by Tailwind utility resets. Force them visible + clickable
   with high specificity, and put them outside the slide track so the
   product card image doesn't cover the click area.
   =========================================================================== */
.swiper-button-next,
.swiper-button-prev {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #2c2c2c !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15) !important;
    border: 1px solid #e2e8f0 !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
    pointer-events: auto !important;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: #3BAFE2 !important;
    color: #ffffff !important;
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(59, 175, 226, 0.4) !important;
}
.swiper-button-next svg,
.swiper-button-prev svg {
    width: 11px !important;
    height: 13px !important;
    fill: currentColor !important;
}
/* Hide native ::after arrow shapes that sometimes overlap */
.swiper-button-next::after,
.swiper-button-prev::after {
    content: '' !important;
    display: none !important;
}
.swiper-button-disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
@media (max-width: 767px) {
    .swiper-button-next,
    .swiper-button-prev {
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
    }
}

/* Slick slider arrows on home page (used for `.slider-big-cards` etc.) */
.slick-prev,
.slick-next {
    width: 38px !important;
    height: 38px !important;
    background: #ffffff !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15) !important;
    z-index: 10 !important;
    border: 1px solid #e2e8f0 !important;
}
.slick-prev:hover,
.slick-next:hover { background: #3BAFE2 !important; }
.slick-prev::before,
.slick-next::before {
    color: #2c2c2c !important;
    opacity: 1 !important;
    font-size: 18px !important;
}
.slick-prev:hover::before,
.slick-next:hover::before { color: #ffffff !important; }

/* ================================================
   v9.34 — Product cards, mega menu, brand logos
   ================================================ */

/* Hide compare / wishlist / quick-view on listing cards */
.product-hover .wishlist,
.product-hover .compare-bg,
.product-hover .add-to-compare,
.product-hover .compare-remove,
.product-hover .open-view-modal {
    display: none !important;
}

/* Mega menu dropdown visibility & stacking */
.header .first-dropdown,
.header .child-dropdown,
.header .category-menu-wrapper {
    z-index: 9990 !important;
}
.header .group-category:hover .category-menu-wrapper,
.header .first-dropdown-li:hover > .first-dropdown,
.header li:hover > .child-dropdown {
    visibility: visible !important;
    opacity: 1 !important;
}
.header .child-dropdown {
    min-width: 12rem;
}

/* Top Brands page — prevent logo overlap inside cards */
.mm-brand-logo {
    isolation: isolate;
}
.mm-brand-logo img {
    position: relative;
    z-index: 1;
}

/* v9.72: product detail — click main image to open full-size lightbox */
.swiper-container-main .swiper-slide.zoom img.swiper-slide-img {
    cursor: zoom-in;
}
.mm-product-image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    cursor: zoom-out;
}
.mm-product-image-lightbox img {
    max-width: 95vw;
    max-height: 90vh;
    object-fit: contain;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
    cursor: zoom-in;
    transform-origin: center center;
    transition: transform 0.15s ease;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}
.mm-product-image-lightbox img.is-zoomed {
    cursor: grab;
    transition: none;
}
.mm-product-image-lightbox img.is-zoomed:active {
    cursor: grabbing;
}
.mm-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
.mm-lightbox-prev,
.mm-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 42px;
    line-height: 1;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.mm-lightbox-prev:hover,
.mm-lightbox-next:hover {
    background: rgba(255, 255, 255, 0.28);
}
.mm-lightbox-prev {
    left: 16px;
}
.mm-lightbox-next {
    right: 16px;
}
@media (max-width: 640px) {
    .mm-lightbox-prev,
    .mm-lightbox-next {
        width: 40px;
        height: 40px;
        font-size: 32px;
    }
    .mm-lightbox-prev {
        left: 8px;
    }
    .mm-lightbox-next {
        right: 8px;
    }
}

/* v9.89: lightbox zoom in / out controls */
.mm-lightbox-zoom-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 6px 8px;
    z-index: 3;
}
.mm-lightbox-zoom-controls button {
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease;
}
.mm-lightbox-zoom-controls .mm-lightbox-zoomreset {
    width: auto;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}
.mm-lightbox-zoom-controls button:hover {
    background: rgba(255, 255, 255, 0.3);
}
.mm-lightbox-zoom-controls button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Signup confirm password — keep match icon + error below the field */
.password-container input.password_confirmation,
.password-container input[name="password_confirmation"] {
    padding-right: 44px !important;
}
.password-container .password-validation-error,
.password-container .confirm-password-validation-error,
.password-container .pw-requirements-hint,
.password-container > small {
    position: static !important;
    display: block !important;
    clear: both;
    margin-top: 4px;
}
.password-container .password-matching {
    top: 10px !important;
    z-index: 3;
}
@media (min-width: 768px) {
    .password-container .password-matching {
        top: 13px !important;
    }
    .password-container input.password_confirmation,
    .password-container input[name="password_confirmation"] {
        padding-right: 48px !important;
    }
}