/* ===== Gold & Sparrow - mobile decongestion. Applies only <=767px; desktop untouched. ===== */
@media (max-width: 767.98px) {
html, body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }
/* breathing room from screen edges */
.container, .container-fluid, .container-xxl, .container-xl { padding-left: 16px; padding-right: 16px; }
/* fixed 300px swiper product cards overflowed phones -> make them fluid */
.product-cards { width: 80vw !important; max-width: 300px !important; margin-right: 14px !important; }
/* consistent, comfortable spacing between homepage sections */
.content-inner-1, .content-inner-2, .content-inner-3 { padding-top: 30px; padding-bottom: 30px; }
/* a touch of separation so product cards don't feel packed */
.shop-card { margin-bottom: 6px; }
/* easier-to-read body text */
p, .dz-para { line-height: 1.55; }
}
@media (max-width: 420px) {
.product-cards { width: 85vw !important; margin-right: 12px !important; }
}
/* ===== Remove the floating "View Cart Item" button on mobile (it covered the screen) ===== */
@media (max-width: 991.98px) {
.floating-btn.center-btn { display: none !important; }
}
/* ===== Homepage category tiles: small thumbnails (2 side-by-side) on mobile; were 1 big 450px tile ===== */
@media (max-width: 767.98px) {
.content-inner-2 .row { --bs-gutter-x: 12px; --bs-gutter-y: 12px; }
.content-inner-2 .product-box.style-2 { height: 200px !important; }
.content-inner-2 .product-box.style-2 .product-content { padding: 12px !important; }
.content-inner-2 .product-box.style-2 .product-content .product-name { font-size: 15px !important; width: 100% !important; margin-bottom: 8px !important; line-height: 1.2 !important; }
.content-inner-2 .product-box.style-2 .product-content .btn { padding: 8px 14px !important; font-size: 13px !important; min-height: 36px !important; }
}
/* ===== Homepage feature cards (24-Hour Dispatch / Easy Return / In-Store / Custom Fitting): compact 2-up on mobile ===== */
@media (max-width: 767.98px) {
.about-product-wrapper { padding: 14px 10px !important; }
.about-product-wrapper .feature-icon { margin-bottom: 8px !important; }
.about-product-wrapper .feature-icon img { width: 40px !important; height: auto !important; }
.about-product-wrapper .product-title { font-size: 14px !important; margin-bottom: 4px !important; line-height: 1.25 !important; }
.about-product-wrapper .product-text { font-size: 11px !important; line-height: 1.35 !important; }
}
/* ===== GLOBAL (all screens): product-card titles use .wh (#FFFAF3 near-white) on a transparent card over the light page = unreadable. Make them dark. ===== */
.dz-content .title a.wh,
.dz-content .title a.text-white { color: #fef8dc !important; }
/* ===== Tighten the large gap between the USP cards (24hr Dispatch etc.) and the category section (all screens) ===== */
.usp-section { padding-bottom: 0 !important; }
.content-inner-2 { padding-top: 1rem !important; }
.content-inner-2 .section-head { margin-bottom: 0 !important; min-height: 0 !important; }
/* ===== Mobile logo: image (90px) overflowed its 65px box + uneven pb-2 -> fit it with balanced top/bottom spacing ===== */
@media (max-width: 991.98px) {
.logo-header.pb-2 { height: auto !important; padding-top: 6px !important; padding-bottom: 6px !important; display: flex !important; align-items: center !important; }
}
/* ===== Hamburger toggler ("black button" beside the logo): smaller + softer on mobile ===== */
@media (max-width: 991.98px) {
.navbar-toggler.navicon { transform: scale(0.82) !important; opacity: 0.7 !important; }
}
/* ===== Floating "View Cart" button was overlapping content on desktop -> park it bottom-right ===== */
@media (min-width: 992px) {
.floating-btn.center-btn { position: fixed !important; left: auto !important; right: 22px !important; bottom: 22px !important; top: auto !important; transform: none !important; margin: 0 !important; z-index: 55 !important; }
}
/* ===== Category-page intro paragraph: was dark/low-contrast on the maroon banner -> cream ===== */
.cat-intro { color: #f1e2c4 !important; }
/* ================= MOBILE AUDIT FIXES (2026-07-03) ================= */
/* C1 (CRITICAL): the theme hides ALL .input-group at <=768px (display:none), which killed the Contact
form fields, the header mobile-search, and the blog-sidebar search. Restore them. */
@media (max-width:768px){ .input-group{ display:flex !important; } }
/* M1: prevent iOS focus-zoom — any input < 16px auto-zooms on focus. */
@media (max-width:767.98px){
.form-control, input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=search], input[type=number], textarea, select, .mobile-search-bar .form-control{ font-size:16px !important; }
}
/* H1: the floating "In-Store Experience" button (.floating-btn, position:fixed z-9999) overlays
content on phones — its old hide rule only matched .floating-btn.center-btn (never present). */
@media (max-width:991.98px){ .floating-btn{ display:none !important; } }
/* H3: Contact hero heading (.contact-us2 .dz-text) is 140px absolutely positioned off-screen on mobile. */
@media (max-width:767.98px){
.contact-us2 .dz-text{ position:static !important; right:auto !important; left:auto !important;
font-size:30px !important; line-height:1.15 !important; margin:0 0 8px !important; white-space:normal !important; }
}
/* L5: Login pt-120 pushes the form ~120px down (leftover header offset) on mobile. */
@media (max-width:767.98px){ .pt-120{ padding-top:44px !important; } }
/* L7: "incl. of all taxes" price note was 10px / 0.55 opacity — bump for legibility. */
.dz-content .price::after{ font-size:11px !important; opacity:.72 !important; }
/* ================= TRUE-RENDER SWEEP FIXES (2026-07-16) =================
Source: 25-page Playwright sweep at 360+390px, every fix below adversarially
verified on the live site before inclusion. */
/* S1: the absolute transparent header + restored mobile search bar stack ~218px tall on phones,
but .simple-page-header only offset 100px -> the white search pill covered the top half of the
page H1 on EVERY category/search/cart-landing page. 190px clears the measured 218px header. */
@media (max-width: 991.98px) {
.simple-page-header { margin-top: 190px !important; }
}
/* S2: fixed bottom quick-bar (extra-nav) commerce links were only ~20px tall inside the 50px bar
(search / wishlist / cart 40x20, Login-Register 104x19). Grow the real tap boxes to 44px. */
@media (max-width: 991.98px) {
.site-header .extra-nav .extra-cell ul li a,
.site-header .extra-nav .extra-cell ul li button { min-height: 44px; display: flex; align-items: center; }
.site-header .extra-nav .extra-cell ul li.login-link a { min-height: 44px; }
}
/* S3 (v2): header account + cart quick buttons need a 44px tap area WITHOUT moving the icons.
The v1 fix (44px flex boxes at top:15px) lifted the icons ~10px above the hamburger and made the
cart overlap it. Correct approach: leave the icons at the header's own layout, vertically-center
the whole cluster against the header bar, and add the 44px hit area via an invisible ::after that
does not affect layout. Values tuned by live re-render so account/cart/hamburger share one center. */
@media (max-width: 991.98px) {
/* top:37px puts the 23px icons' centre at ~49px below the positioning anchor = the hamburger's
own centre (measured live), so account, cart and hamburger sit on one line. right:66px + gap:22px
spaces the two icons evenly and keeps the cart clear of the hamburger. */
.gs-mobile-quick { gap: 22px !important; right: 66px !important; top: 37px !important; transform: none !important; }
a.gs-quick-btn { width: auto !important; height: auto !important; display: inline-flex !important; align-items: center !important; }
a.gs-quick-btn::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 44px; }
.gs-quick-badge { top: -8px !important; right: -10px !important; } /* restore the header's original badge position */
/* hamburger: keep the owner-approved small look, give it a 44px hit area (invisible ::after) */
button.navbar-toggler.navicon { position: relative; }
button.navbar-toggler.navicon::after { content: ""; position: absolute; inset: -9px -4px; }
}
/* S4: category-page controls - Filter link was 89x23, sort dropdown 111x31, breadcrumb links 16px.
Hit-area expansion without layout shift. */
@media (max-width: 991.98px) {
a#filterTopBtn { position: relative; }
a#filterTopBtn::after { content: ""; position: absolute; top: -11px; bottom: -11px; left: 0; right: 0; }
.bootstrap-select.default-select > .btn.dropdown-toggle { min-height: 44px; display: flex; align-items: center; }
.breadcrumb-row a, ol.breadcrumb li a { display: inline-block; padding: 10px 4px; margin: -8px -4px; }
}
/* S5: hero eyebrow line was 11px white over the blown-out hero highlight - near invisible.
13px + tight per-glyph shadow (the existing 20px-blur shadow is too diffuse at this size). */
@media (max-width: 991.98px) {
span.hero-eyebrow { font-size: 13px !important;
text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 2px 8px rgba(0,0,0,.65) !important; }
}
/* S6: feature-card captions were at the 11px floor (earlier compacting rule above wins on
specificity ties by order, so this later same-specificity rule takes effect). */
@media (max-width: 767.98px) {
.about-product-wrapper .product-text { font-size: 12px !important; }
}
/* S7: product-card title links were 18px tall and wishlist hearts 30x30. Hit-area expansion,
card layout visually unchanged (negative margins offset the padding). */
@media (max-width: 991.98px) {
.dz-content .title a.wh { display: inline-block; padding: 8px 6px; margin: -4px -6px; }
a.btn.btn-primary.meta-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
}
/* S8: at <=385px the content-sized masonry grid ran 27px past the viewport and product cards were
CLIPPED on the right (overflow-x:hidden hides the scroll but not the cropping). Viewport units
are required: percentage widths are circular against this grid's content-sized columns (tested). */
@media (max-width: 385px) {
.product-grid { width: calc(100vw - 20px) !important; grid-template-columns: repeat(2, 1fr) !important; justify-items: center; }
.product-grid .procard21 { margin: 10px 0 !important; }
}
/* S9 (interim): the Color filter currently renders the entire 158-entry CSS named-color master ->
an ~8,400px scroll inside the drawer. Cap it until the data/controller fix lands. */
@media (max-width: 991.98px) {
.color-filter-list { max-height: 40vh; overflow-y: auto; }
}
/* S4b: breadcrumb links ("Home") were 16px tall; real markup is ul.simple-breadcrumb (not
ol.breadcrumb). Hit-area expansion, layout visually unchanged. */
@media (max-width: 991.98px) {
.simple-breadcrumb li a { display: inline-block; padding: 12px 4px; margin: -10px -4px; }
}
/* ================= ROUND-2 CONTRAST FIXES (2026-07-16) =================
Every rule verified via getComputedStyle + WCAG contrast math on the live site.
No @media guard: these contrast bugs exist at ALL widths (desktop too). */
/* R1: About "Our Promise To You" cards - cream text on white cards (1.04-1.07:1, invisible) */
.about-product-wrapper .product-title { color: #6B1616 !important; }
.about-product-wrapper .product-text { color: #444444 !important; font-size: 13px; }
/* R2: About atelier blockquote - inline #6b1616 equals the maroon body bg (1.0:1) */
blockquote[style*="#6b1616"] { color: #f8efe2 !important; }
blockquote[style*="#6b1616"] span { color: #e6c987 !important; }
/* R3: Refund "Perfect Fit Promise" cream card - .privacy p paints text var(--wh) #FFFAF3,
invisible (1.02:1) on the card's inline #fff8ee bg. No !important so the inline maroon h3/link stay maroon. */
.privacy div[style*="fff8ee"],
.privacy div[style*="fff8ee"] p,
.privacy div[style*="fff8ee"] li,
.privacy div[style*="fff8ee"] strong,
.privacy div[style*="fff8ee"] em { color: #3d2c1e; }
/* R4: Size-guide - .bg-light computed transparent (missing --bs-light-rgb), so the theme's dark text
palette sat on the maroon body: 28 elements < WCAG AA, XS/M/XL size labels invisible at 1.0:1.
Restore the intended light background. :has(.table-responsive):not(:has(.check-tbl)) = size-guide only (cart/checkout have .check-tbl).
(This one rule also fixes the size chart + the "get in touch" link, which become readable on cream.) */
.page-content.bg-light:has(.table-responsive):not(:has(.check-tbl)) { background-color: #fef8dc !important; }
.page-content.bg-light:has(.table-responsive):not(:has(.check-tbl)) .breadcrumb li { color: #6b1616; }
.page-content.bg-light:has(.table-responsive):not(:has(.check-tbl)) .dz-bnr-inr p { color: #5e626f; }
/* R5: Blogs page H1 - maroon-on-maroon (1.0:1). h1.mt-3.mb-1 exists only on /Blogs. */
.page-content > .container > h1.mt-3.mb-1 { color: #F5E9DA !important; }
/* R6: Blog-post body section headings - pure black on the maroon page bg (1.75:1) */
.blog-single .dz-post-text h2,
.blog-single .dz-post-text h3,
.blog-single .dz-post-text h4,
.blog-single .dz-post-text h5,
.blog-single .dz-post-text h6 { color: #fef8dc !important; }
/* R7: Blog-post hero title over the dark hero photo - theme build lacks .text-white -> #131212 (~1.7:1) */
.post-header .dz-info h1,
.post-header .dz-info .text-white { color: #fff !important; }
/* R8: Occasion/banner hero (.dz-bnr-inr) - H1 + breadcrumb links defaulted to black on maroon (1.75:1) */
.dz-bnr-inr h1 { color: #FEF8DC; }
.dz-bnr-inr .breadcrumb li a,
.dz-bnr-inr .breadcrumb-item a,
.dz-bnr-inr .breadcrumb-row a { color: #FFFAF3; }
.dz-bnr-inr .breadcrumb-row a:hover,
.dz-bnr-inr .breadcrumb-row a:focus { color: #FFFFFF; }
/* R9: Contact map - office pin was on North America (theme demo default); move onto India,
hide the 2 decorative dots (their tab panes duplicate the same India address). */
.contact-us2 .map-fixed .map-point .point.point-1 { left: 69.5% !important; top: 41.5% !important; }
.contact-us2 .map-fixed .map-point .point.point-2,
.contact-us2 .map-fixed .map-point .point.point-3 { display: none !important; }
/* R10: Blog cards (home "Trending Posts" swiper + /Blogs listing) had NO fixed media ratio, so each
card's height followed its image orientation - placeholder-logo cards 358x233 (landscape) next to
real-photo cards 358x500 (portrait) = visibly uneven, unprofessional. Force ONE portrait ratio with
object-fit:cover so every blog card is identical. .dz-card exists ONLY in blog contexts (verified:
home 4, blogs 5, product/category pages 0), so this never touches product cards. */
.dz-card .dz-media { aspect-ratio: 4 / 5 !important; height: auto !important; overflow: hidden; }
.dz-card .dz-media img,
.dz-card .dz-media a > img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
/* ================= MOBILE HAMBURGER MENU REBUILD (2026-07-16) =================
The hamburger opened the untouched theme-demo mega-menu (Trending/Offer/Bestsellers/
Collection with expand arrows) — no real navigation. Hide that on mobile and show the
clean category/page nav injected into header.php (.gs-mnav). Desktop keeps its menu. */
@media (max-width: 991.98px) {
.header-nav .navbar-nav > .has-mega-menu { display: none !important; }
.header-nav .navbar-nav > .nav-item.login-link,
.header-nav .navbar-nav > .nav-item.search-link { display: none !important; }
.gs-mnav { display: block !important; padding: 4px 22px 30px; }
.gs-mnav-head { display: block; color: #e6c987; font-size: 12px; letter-spacing: 2.5px;
text-transform: uppercase; font-weight: 700; margin: 20px 0 6px; }
.gs-mnav-link { display: block; color: #FCF7EE !important; font-size: 17px; font-weight: 400;
padding: 13px 2px; border-bottom: 1px solid rgba(255,250,243,.10); text-decoration: none;
letter-spacing: .3px; transition: color .15s, padding-left .15s; }
.gs-mnav-link:active, .gs-mnav-link:hover { color: #e6c987 !important; padding-left: 6px; }
.gs-mnav-all { color: #e6c987 !important; font-weight: 600; border-bottom: 0; margin-top: 2px; }
/* Menu header: gold emblem + cream wordmark (was a dark gss2.png logo, unreadable on maroon) */
#navbarNavDropdown .gs-menu-logo { display: flex !important; align-items: center; gap: 10px; text-decoration: none; padding: 6px 22px 4px; }
#navbarNavDropdown .gs-menu-logo .gs-emblem { height: 46px !important; width: auto !important; }
#navbarNavDropdown .gs-menu-wordmark { font-family: 'Cormorant Garamond', serif; font-weight: 600;
font-size: 21px; letter-spacing: 2px; text-transform: uppercase; color: #FCF7EE; line-height: 1; white-space: nowrap; }
/* Menu social icons were black on maroon — make them cream, comfortably tappable */
#navbarNavDropdown .dz-social-icon { padding: 6px 22px 0; }
#navbarNavDropdown .dz-social-icon li a { color: #FCF7EE !important; border-color: rgba(255,250,243,.35) !important;
width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
#navbarNavDropdown .dz-social-icon li a:active { color: #e6c987 !important; }
}
/* ================= INTERACTIVE-QA CONTRAST FIXES (2026-07-16 night) ================= */
/* R11: Blog post in-content links were pure black on the maroon body (1.75:1). Gold + underline,
distinct from the cream body copy. */
.dz-blog .dz-post-text a,
.blog-single .dz-post-text a,
.dz-post-text a { color: #e6c987 !important; text-decoration: underline; text-underline-offset: 2px; }
.dz-post-text a:hover, .dz-post-text a:focus { color: #f2d99a !important; }
/* R12: sidebar widget titles that carry .text-white render near-black (#131212, 1.56:1) on maroon
(the theme's .text-white is broken) - restore cream. */
.widget-title.text-white,
.side-bar .widget-title,
.recent-posts-entry .widget-title,
.blog-sidebar .widget-title { color: #fef8dc !important; }
/* R13: PDP size selector — theme renders size labels as tiny ~34x34 solid-black squares, so a long
label like "Free Size" is unreadable. Make them auto-width, readable pills (maroon on white;
selected = maroon fill). */
.product-size .btn,
.product-size label.btn {
width: auto !important; min-width: 46px; height: auto !important; min-height: 42px;
padding: 9px 18px !important; display: inline-flex !important; align-items: center; justify-content: center;
border: 1px solid #6b1616 !important; border-radius: 6px !important; margin: 0 8px 8px 0 !important;
color: #6b1616 !important; background: #fff !important; font-size: 14px !important;
line-height: 1.15 !important; white-space: nowrap; font-weight: 500;
}
.product-size .btn-check:checked + .btn,
.product-size .btn-check:checked + label.btn {
background: #6b1616 !important; color: #fff !important; border-color: #6b1616 !important;
}
/* R14: branded search / no-results empty state (replaces the childish no_product.png cartoon dead-end) */
.gs-empty-state { padding: 44px 16px; text-align: center; }
.gs-empty-state h4 { color: #fef8dc !important; font-size: 20px; margin-bottom: 8px; }
.gs-empty-state p { color: #f1e2c4 !important; font-size: 15px; }
.gs-empty-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.gs-empty-chips a { display: inline-block; padding: 8px 16px; border: 1px solid #e6c987; border-radius: 20px;
color: #fef8dc !important; text-decoration: none; font-size: 14px; }
.gs-empty-chips a:active, .gs-empty-chips a:hover { background: #e6c987; color: #6b1616 !important; }
/* ================= CHECKOUT + PAYMENT CHIPS (2026-07-17) ================= */
/* New payment-methods strip (footer + checkout). Footer keeps it compact; checkout shows it larger. */
.gs-pay-strip { max-width: 100%; height: auto; }
.footer .gs-pay-strip, .site-footer .gs-pay-strip, footer .gs-pay-strip { height: 30px; width: auto; max-width: 100%; }
.accordion-body .gs-pay-strip { max-width: 300px; }
/* "Pay Online" sub-label (UPI · Cards · ...) */
.gs-pay-sub { display: block; font-size: 12px; opacity: .82; font-weight: 400; margin-top: 2px; }
/* Checkout trust row */
.gs-checkout-trust { display: flex; flex-wrap: wrap; gap: 14px 18px; font-size: 13px; opacity: .92; }
.gs-checkout-trust i { color: #e6c987; margin-right: 5px; }
/* ================= CHECKOUT CONTRAST + IMAGE GAP + PRICE POLISH (2026-07-17) ================= */
/* Checkout (.shop-account) is on maroon, but the theme's .text-white renders near-black (#131212)
and the Total row + coupon text were invisible. Force summary/labels/notes cream — WITHOUT
darkening the white form inputs. */
.shop-account .coupon-section h5,
.shop-account .available-coupons, .shop-account .available-coupons *,
.shop-account table td, .shop-account table th,
.shop-account #grand_total_text, .shop-account #grand_total_text strong,
.shop-account .accordion-body, .shop-account .accordion-body p,
.shop-account .gs-checkout-trust, .shop-account .gs-checkout-trust span { color: #fef8dc !important; }
.shop-account .gs-checkout-trust i { color: #e6c987 !important; }
.shop-account .form-control { color: #2e2013 !important; }
.shop-account .form-control::placeholder { color: #8a7d6a !important; }
/* Order total row — make it read as the key number */
.shop-account tr.total td, .shop-account #grand_total_text { font-size: 17px !important; font-weight: 700 !important; }
/* Product-card image: .dz-media was 300px tall but the image only 200px -> 100px maroon gap below
every card. Give the media a portrait ratio and let the image fill it (no gap). */
.shop-card .dz-media, .procard21 .dz-media, .product-grid .dz-media {
height: auto !important; aspect-ratio: 3 / 4; overflow: hidden; background: #f3ecdf;
}
.shop-card .dz-media > a, .procard21 .dz-media > a, .product-grid .dz-media > a { display: block; height: 100%; }
.shop-card .dz-media img, .procard21 .dz-media img, .product-grid .dz-media img {
width: 100% !important; height: 100% !important; object-fit: cover !important; display: block;
}
/* Price typography — was a weak gray #444; premium = bolder + darker on the light listing cards. */
.dz-content .price, .shop-card .price, .item-price { font-weight: 700 !important; letter-spacing: .2px; }
.product-grid .dz-content .price, .procard21 .dz-content .price, .product-box .price { color: #2a1a10 !important; }
.item-del-price, del.item-del-price { color: #b09a86 !important; font-weight: 500 !important; }
/* ===== CORRECTED (2026-07-17b): checkout wrapper is .order-detail/.coupon-section/.shop-checkout (not .shop-account) ===== */
.order-detail table td, .order-detail table th,
.order-detail #grand_total_text, .order-detail #grand_total_text strong,
.coupon-section h5, .coupon-section .available-coupons, .coupon-section .available-coupons *,
.gs-checkout-trust, .gs-checkout-trust span,
#collapseOnline .accordion-body, #collapseOnline .accordion-body p { color: #fef8dc !important; }
.gs-checkout-trust i { color: #e6c987 !important; }
.shop-checkout .form-control, .coupon-section .form-control { color: #2e2013 !important; }
.order-detail tr.total td, .order-detail #grand_total_text { font-size: 17px !important; font-weight: 700 !important; }
/* CORRECTED product-image gap: the card ![]()
is a fixed height:200px inside a taller .dz-media box,
leaving maroon below. Let the media WRAP the image tightly (no fixed/aspect height) -> zero gap. */
.shop-card .dz-media, .procard21 .dz-media, .product-grid .dz-media,
.shop-card.prooductslide .dz-media {
height: auto !important; aspect-ratio: auto !important; overflow: hidden; line-height: 0;
}
.shop-card .dz-media img, .procard21 .dz-media img, .product-grid .dz-media img {
display: block; width: 100% !important; object-fit: cover !important;
}
/* Card price colour: weak gray #444 -> rich warm near-black on the light product cards (premium).
Checkout prices stay cream via the more-specific .order-detail rules above. */
.dz-content .price, .shop-card .price, h6.price, .price.text-dark, .item-price { color: #241812 !important; }
/* ================= (2026-07-17c) COD text + popular-products alignment ================= */
/* COD (and any payment) accordion body text was gray/near-black on maroon -> cream. */
#accordionPayment .accordion-body, #accordionPayment .accordion-body p,
#collapseCOD, #collapseCOD * { color: #fef8dc !important; }
/* Most Popular Products grid: card titles were 1 vs 2 lines (30 vs 42px), so cards had different
heights and rows staggered (right column sat lower). Clamp every card title to a fixed 2-line
height so all cards are identical height and rows line up. */
.custom-gap-grid .shop-card .title,
.custom-gap-grid .shop-card .title.text-center,
.shop-card .dz-content .title.text-center,
.procard21 .dz-content .title,
.product-grid .shop-card .title {
min-height: 42px !important;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; line-height: 1.35;
}
ul.custom-gap-grid { align-items: stretch; }
ul.custom-gap-grid > li { display: flex; }
ul.custom-gap-grid > li .shop-card { width: 100%; }
/* Prominent "Amount to Pay" box above Place Order */
.gs-pay-total { padding: 13px 15px; border: 1px solid rgba(230,201,135,.55); border-radius: 9px; background: rgba(230,201,135,.09); }
.gs-pay-total .gs-pay-total-label { color: #fef8dc !important; font-size: 15px; font-weight: 600; }
.gs-pay-total .gs-pay-total-amt { color: #e6c987 !important; font-size: 21px; font-weight: 800; letter-spacing: .3px; }
/* (2026-07-17d checkout sweep) COPY button was cream text on a cream chip (invisible) -> dark maroon text. */
.coupon-section .copy-btn, .copy-btn { color: #6b1616 !important; font-weight: 700; }
/* Ensure the order Total label (in ) is cream on the maroon summary */
.order-detail tr.total td, .order-detail tr.total td strong, .order-detail tr.total strong { color: #fef8dc !important; }
/* ============================================================
2026-07-17e FULL MOBILE SWEEP fixes (autonomous)
============================================================ */
/* (grid-span) .masonry-grid is display:grid; its .tab-pane children get trapped in ONE
column when the pane is empty (181px 181px), breaking the no-results / empty state at
>=380px (CTA wraps 3 lines, chips left-hug). Force every pane to span the full grid width.
On populated pages the pane already spans full width, so this is a no-op there. */
.masonry-grid > .tab-pane { grid-column: 1 / -1 !important; }
.gs-empty-wrap { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }
/* (price-wrap) 6-digit dual prices (sale + struck MRP) overflowed the product card on a single
nowrap line (e.g. Rs.1,96,500 Rs.2,31,176 -> 7px past viewport). Let the struck MRP wrap
under the sale price so nothing spills past the card edge. Normal 5-digit prices still fit
on one line, so this only affects the few very-long bridal prices. */
.dz-shop-card .item-price, .shop-card .item-price, .item-price { flex-wrap: wrap !important; row-gap: 0 !important; }
/* (auth-focus) Login/Register .form-control lost its white background on :focus (theme bug) ->
faint grey text on the maroon card the entire time the shopper is typing (1.97:1). Force a
readable white field with dark text + a soft maroon focus ring. */
.login-area .form-control { color: #241812 !important; }
.login-area .form-control:focus {
background-color: #ffffff !important;
color: #241812 !important;
-webkit-text-fill-color: #241812 !important;
box-shadow: 0 0 0 2px rgba(107, 22, 22, .18) !important;
}
/* (price-contrast 2026-07-17f) The product price rendered as dark text (#241812) on a
gold@10%-over-maroon box (~rgb(121,39,30)) = 1.75:1 — unreadable, and it's the single most
important element. .price.text-dark is used on PDP main+related, homepage popular/trending,
and the category "you may also like" swiper. Make the price a bright warm cream-gold on that
dark box (~10:1). Color-only (no layout shift). Category GRID cards use .item-price (on cream)
and are intentionally left dark. */
.price.text-dark, .dz-content .price.text-dark, .shop-card .price.text-dark {
color: #fef8dc !important;
-webkit-text-fill-color: #fef8dc !important;
}
.price.text-dark .item-del-price, .price.text-dark del,
.price.text-dark .text-decoration-line-through {
color: #fef8dc !important;
-webkit-text-fill-color: #fef8dc !important;
opacity: .9;
}
/* (blog-hero-subtitle 2026-07-17f) /Blogs hero tagline inherited dark body colour rgb(94,98,111)
on the maroon hero = unreadable. Make it warm cream. (H1 already overridden to cream.) */
p[style*="max-width:700px"] { color: #f0e2c0 !important; }
/* (cart-qty 2026-07-17f) /Cart quantity value was near-black on the maroon page (1.3:1).
The +/- are black circles, so a cream number between them reads cleanly (~9:1). */
.check-tbl input.qty-change, input.qty-change {
color: #fef8dc !important; -webkit-text-fill-color: #fef8dc !important;
background: transparent !important; font-weight: 700 !important;
}
/* (cart-columns 2026-07-17f) The 6-column cart table (img/name/price/qty/subtotal/remove) is far
too wide for a phone -> name crushed to one word per line AND the +/- stepper pushed off-screen.
Drop the redundant per-row Subtotal on mobile (grand total shown below), and hard-compact the
thumbnail, remove-X and qty stepper (high-specificity to beat the theme) so the row fits ~358px. */
@media (max-width: 600px) {
.check-tbl { width: 100% !important; }
.check-tbl th:nth-child(5), .check-tbl td.product-item-totle { display: none !important; }
.check-tbl td, .check-tbl th { padding: 8px 3px !important; vertical-align: middle !important; }
.check-tbl td.product-item-img { width: 58px !important; max-width: 58px !important; }
.check-tbl td.product-item-img img { width: 52px !important; height: 52px !important; object-fit: cover !important; border-radius: 6px !important; }
.check-tbl td.product-item-name { min-width: 92px !important; white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere; font-size: 12.5px !important; line-height: 1.35 !important; }
.check-tbl td.product-item-price { font-size: 13px !important; white-space: nowrap !important; }
.check-tbl td.product-item-close { width: 26px !important; padding-right: 2px !important; }
.check-tbl td.product-item-quantity .quantity.btn-quantity { margin-right: 0 !important; }
.check-tbl td.product-item-quantity .input-group-btn-vertical .btn,
.check-tbl td.product-item-quantity button.bootstrap-touchspin-up,
.check-tbl td.product-item-quantity button.bootstrap-touchspin-down {
width: 24px !important; height: 24px !important; min-width: 24px !important; padding: 0 !important;
}
.check-tbl td.product-item-quantity input.qty-change { width: 26px !important; padding: 0 !important; text-align: center; }
}
/* (empty-drawers 2026-07-17f) Cart/Wishlist offcanvas empty states were PNGs with white caption
baked in -> invisible on the cream drawer (1.04:1). Replaced with readable HTML empty-states. */
.gs-empty-drawer { text-align: center; padding: 40px 22px; }
.gs-empty-drawer .gs-empty-ico { font-size: 46px; line-height: 1; color: #b98a3c; margin-bottom: 14px; }
.gs-empty-drawer .gs-empty-title { font-size: 18px; font-weight: 700; color: #4a0e0e; margin: 0 0 6px; }
.gs-empty-drawer .gs-empty-sub { font-size: 13.5px; color: #6a5638; margin: 0 0 20px; line-height: 1.5; }
.gs-empty-drawer .gs-empty-cta { display: inline-block; background: #6b1616; color: #fbf4e6 !important;
font-size: 13.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
padding: 11px 26px; border-radius: 999px; text-decoration: none; }
.gs-empty-drawer .gs-empty-cta:hover { background: #54100f; color: #fff !important; }
/* (popular-grid-overlap 2026-07-17i) The homepage "Most Popular" grid used isotope/masonry with
absolutely-positioned cards, laid out BEFORE product images loaded -> cards piled on top of each
other until they "settled" (very visible on a real phone). Now a plain Bootstrap col-6 flow;
this hard-forces static positioning so no JS can ever absolute-position (overlap) the cards. */
#gs-popgrid { position: static !important; height: auto !important; display: flex; flex-wrap: wrap; }
#gs-popgrid > .card-container { position: static !important; transform: none !important; top: auto !important; left: auto !important; float: none !important; }
/* (coupon-input 2026-07-17j) #coupon_code has .text-white (theme renders it near-black #131212)
on a transparent/maroon background -> a copied/typed coupon code was black-on-maroon (invisible).
Force readable cream text + a visible placeholder. */
#coupon_code, #coupon_code.form-control, #coupon_code.text-white {
color: #fef8dc !important; -webkit-text-fill-color: #fef8dc !important; font-weight: 600;
}
#coupon_code::placeholder { color: rgba(254, 248, 220, .6) !important; -webkit-text-fill-color: rgba(254, 248, 220, .6) !important; }
/* (all-prices-cream 2026-07-17k) Unify EVERY product / cart / checkout / quick-view price to the
checkout cream (#fef8dc). All of these sit on the maroon page or the gold-tint-over-maroon price
box, so cream is high-contrast. Selectors match (and beat, by source order) the older dark price
rules incl. the more-specific .procard21/.product-grid ones and the modal inline color.
NOT TOUCHED: the cart/wishlist OFFCANVAS drawer, whose background is CREAM and whose prices use
.dz-price / #cart-total (kept dark so they stay readable there). */
.item-price, .price, .price.text-dark, .dz-content .price, .shop-card .price, h6.price,
.product-box .price, .product-grid .dz-content .price, .procard21 .dz-content .price,
.product-item-price, .product-item-totle,
.modal .price, .price.bh, .modal .price.bh, .modal .text-swecondary, .modal .text-secondary,
.modal .text-secondary.text-dark, .modal del, .item-price del, .price del {
color: #fef8dc !important;
-webkit-text-fill-color: #fef8dc !important;
}
/* struck-through original price: same cream, dimmed so it reads as the "was" price */
.item-del-price, .item-price del, .price del, .dz-content .price del, .modal del.text-swecondary {
color: #fef8dc !important;
-webkit-text-fill-color: #fef8dc !important;
opacity: .68;
}
/* (explore-all 2026-07-17l) "Explore All Products" CTA beside the "What's trending now" heading. */
.gs-explore-all {
display: inline-flex; align-items: center; gap: 9px;
background: #6b1616; color: #fef8dc !important; -webkit-text-fill-color: #fef8dc !important;
border: 1.5px solid #e6c987; font-size: 13.5px; font-weight: 600; letter-spacing: .5px;
text-transform: uppercase; padding: 12px 26px; border-radius: 999px; text-decoration: none;
transition: background .2s, color .2s, transform .15s; white-space: nowrap;
}
.gs-explore-all:hover { background: #e6c987; color: #4a0e0e !important; -webkit-text-fill-color: #4a0e0e !important; transform: translateY(-1px); }
.gs-explore-all span { font-size: 18px; line-height: 1; }
@media (max-width: 767px) { .gs-explore-col { text-align: left !important; } }
/* (drawer-prices-black 2026-07-17m) The cart/wishlist offcanvas drawer has a CREAM background,
so its prices must be BLACK (not the site-wide cream). Scoped to the drawer (#offcanvasRight /
.sidebar-cart) with an id-level specificity so it beats the global cream price rule, and it also
forces any struck drawer price to black instead of the (invisible) cream. Does NOT touch the
/Cart page or checkout, whose #cart-total sits on maroon and stays cream. */
#offcanvasRight .dz-price, #offcanvasRight #cart-total, #offcanvasRight .item-del-price,
#offcanvasRight del, #offcanvasRight [class*="price"],
.sidebar-cart .dz-price, .sidebar-cart #cart-total, .sidebar-cart [class*="price"], .sidebar-cart del {
color: #000 !important;
-webkit-text-fill-color: #000 !important;
opacity: 1 !important;
}
/* same drawer: the qty stepper value was cream (my /Cart-page rule) -> faint on the cream drawer. Dark it. */
#offcanvasRight input.qty-change, #offcanvasRight .qty-change, .sidebar-cart input.qty-change {
color: #241812 !important; -webkit-text-fill-color: #241812 !important;
}