@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* ---- merchant's original CSS (wudore-urbansep07.css) ---- */
.sh-banner-collection-card > a > div > div > p {
  display: none;
}
.sh-banner-collection-card > a > div > div > p > svg {
  display: none;
}

.sh-product-card-discount-tag {
  top: 22px !important;
  clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 12% 50%, 0% 0%);
  width: 60px;
  text-align: center;
  border-radius: 0px;
}
.sh-product-discount-tag {
  font-weight: 400;
  clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 12% 50%, 0% 0%);
  width: 64px;
  text-align: center;
  border-radius: 0px;
}
.sh-mini-banner-collection-card > a > div > div > div > svg {
  display: none;
}
.sh-mini-banner-collection-card > a > div > div > div > p {
  display: none;
}

.footer-type-3 .copyright {
  background-color: white;
}

.sh-header-main {
  background-color: #f3f3f3;
}

.menu-bar
{
background: #121212;
color: white;
}

.app-bar .punchline {
  background: linear-gradient(270deg, #8338ec, #ff006e, #ffbe0b, #3a86ff);
  background-size: 800% 800%;
  color: #ffffff;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  padding: 14px;
  border-radius: 12px; /* Rounded corners */
  letter-spacing: 0.5px;
  text-shadow: 0 0 8px rgba(255,255,255,0.6);
  animation: gradientShift 12s ease infinite, glow 2s ease-in-out infinite alternate;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes glow {
  from { text-shadow: 0 0 5px #ff006e, 0 0 10px #8338ec; }
  to   { text-shadow: 0 0 15px #ff4fa3, 0 0 20px #a96dff; }
}


.DesktopSearchBar_root__0nC51 {
  border-radius: 50px !important;
  background: #d3d3d3 !important;
  color: black !important;
  height: 50px !important;
}
.DesktopSearchBar_searchIconButton__d3722 {
  display: none;
}

.shop-now-button
{
visibility: hidden;
}
/* ---- refine-454955.css ---- */
/* WUDORE 454955 — refine CSS for the `basic` (easy-checkout) theme. Source of truth for our rules.
   Built file: custom-combined.css = @import + live_backup/wudore-urbansep07-original.css + this file.
   Mock: theme/wudore/index.html (values taken from its CSS). */

/* 1. Tokens — brand = logo brick red; CTAs charcoal (red already means "deal") */
html:root {
  --secondary-main: #B5321A;
  --typography-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --header-main: #FFFFFF;
  --header-accent: #1D1D1F;
  --header-contrast-text: #1D1D1F;
  --header-badge-main: #1D1D1F;
  --button-main: #1D1D1F;
  --button-borderColor: #1D1D1F;
  --button-contrast-text: #FFFFFF;
  --wd-ink: #1D1D1F; --wd-text: #2A2C30; --wd-muted: #5B6068; --wd-line: #E2E5E9;
  --wd-steel: #EEF1F4; --wd-steel-2: #F6F7F9; --wd-wa: #1A7F43;
}
body, .sh-body { font-family: var(--typography-font-family) !important; color: var(--wd-text); background: #fff; -webkit-font-smoothing: antialiased; }
body button, body input, body h1, body h2, body h3, body h4, body h5, body p, body a, body span { font-family: var(--typography-font-family); }

/* 2. Header — white bar, hairline, steel search pill (merchant CSS painted it #f3f3f3 / grey pill) */
.sh-header-main, .app-bar, header.MuiAppBar-root { background-color: #fff !important; box-shadow: none !important; }
header.MuiAppBar-root { border-bottom: 1px solid var(--wd-line); }
.app-bar:not(.mobile-app-bar) .app-bar-main > .MuiToolbar-root { max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; min-height: 70px; height: auto; }
.app-bar:not(.mobile-app-bar) .logo-ctn img { height: 36px !important; width: auto !important; max-height: 36px; }
.mobile-app-bar .logo-ctn img { height: 30px !important; width: auto !important; }
.MuiPaper-root:has(> .search-field) { background: var(--wd-steel) !important; border-radius: 999px !important; box-shadow: none !important; border: 0 !important; height: 44px !important; color: var(--wd-muted) !important; }
.MuiPaper-root:has(> .search-field) input { font-size: 14px; color: var(--wd-ink); }
.MuiPaper-root:has(> .search-field) input::placeholder { color: var(--wd-muted); opacity: 1; }
.app-bar:not(.mobile-app-bar) .sh-header-searchbar-slot { flex: 1; max-width: 560px; margin: 0 auto; }
.app-bar svg { color: var(--wd-ink); }

/* 3. Menu bar — colours come from the menu css setting (white / ink); weight + hover here */
.menu-bar.sh-header-menu { border-top: 1px solid var(--wd-line); }
.menu-bar.sh-header-menu .menu-bottom a.links { font-size: 14px; font-weight: 600; padding: 11px 14px; }
.menu-bar.sh-header-menu .menu-bottom a.links:hover,
.menu-bar.sh-header-menu .menu-bottom a.links[href*="304-steel"] { color: var(--secondary-main) !important; }

/* 4. Notice */
.notice { font-size: 13px; }
.notice .notice-message { padding: 8px 12px; font-weight: 500; }

/* 5. One column (1280 incl. 24px gutters desktop, 16px phone) and one rhythm */
main .grid.section { max-width: 1280px !important; margin-left: auto; margin-right: auto; background: transparent !important; }
main .grid.section:has(.sx-usp), main .grid.section:has(.sx-finder) { max-width: none !important; }
main .section-item.HtmlRenderer-component { padding: 0 !important; }
main .section-item.ProductGridCollection-component { padding: 52px 24px 0 !important; }
main .section-item.BannerCollection-component { padding: 52px 24px 0 !important; }
body:has(.mobile-app-bar) main .section-item.ProductGridCollection-component,
body:has(.mobile-app-bar) main .section-item.BannerCollection-component { padding: 36px 16px 0 !important; }

/* 6. Section heads — left title 30/24 800, muted subtitle, "View all" link right */
.sh-section-heading { position: relative; text-align: left !important; margin: 0 0 18px !important; padding: 0 !important; }
.sh-section-heading h2.section-heading, .sh-section-heading .section-heading { text-align: left !important; font-size: 30px !important; line-height: 1.15 !important; font-weight: 800 !important; letter-spacing: -.02em; color: var(--wd-ink) !important; margin: 0 !important; text-transform: none !important; }
.sh-section-heading p.section-description, .sh-section-heading .section-description { text-align: left !important; margin: 6px 0 0 !important; font-size: 15px !important; color: var(--wd-muted) !important; font-weight: 400 !important; }
.sh-section-heading a.section-heading-viewall { font-size: 14px !important; font-weight: 700 !important; color: var(--wd-ink) !important; text-decoration: underline; text-underline-offset: 3px; }
body:has(.mobile-app-bar) .sh-section-heading h2.section-heading { font-size: 24px !important; }
.prod-collection-container .view-all { display: none !important; }

/* 7. Product card — hairline card, 14px radius, red % tag top-left, charcoal full-width CTA */
.pr-long-card.sh-product-card { border: 1px solid var(--wd-line) !important; border-radius: 14px !important; box-shadow: none !important; overflow: hidden; background: #fff; }
.sh-product-card .pr-image-ctn { background: #fff; border-bottom: 1px solid var(--wd-line); }
.sh-product-card .pr-discount.sh-product-card-discount-tag { top: 10px !important; left: 10px !important; right: auto !important; width: auto !important; clip-path: none !important; padding: 3px 8px !important; border-radius: 6px !important; background: var(--secondary-main) !important; color: #fff !important; font-size: 12px !important; font-weight: 800 !important; text-transform: lowercase; }
.sh-product-card .pr-card-content { padding: 10px 12px 12px !important; }
.sh-product-card h3.pr-title { font-size: 14px !important; line-height: 1.35 !important; font-weight: 600 !important; color: var(--wd-ink) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; text-transform: none !important; }
.sh-product-card .pr-price { align-items: baseline; gap: 6px; }
.sh-product-card h3.pr-sale-price { font-size: 16px !important; font-weight: 800 !important; color: var(--wd-ink) !important; }
.sh-product-card s.pr-mrp-price { font-size: 13px !important; color: var(--wd-muted) !important; }
.sh-product-card p.pr-two-col-vatext { font-size: 12px !important; color: var(--wd-muted) !important; }
.sh-product-card button.pr-outlined-button { min-height: 42px; border-radius: 10px !important; background: var(--wd-ink) !important; color: #fff !important; border-color: var(--wd-ink) !important; font-weight: 700 !important; font-size: 14px !important; text-transform: none !important; }
.sh-product-card button.pr-outlined-button:hover { background: #000 !important; }
.sh-product-card button.pr-outlined-button svg { color: #fff !important; }
.sh-product-card a.pr-card-action-enquiry { border-radius: 10px !important; border-color: var(--wd-wa) !important; color: var(--wd-wa) !important; }

/* 8. DIY banner — rounded card, ink title top-left / centred-left on desktop, pill CTA */
.BannerCollection-component .sh-banner-collection-card, .BannerCollection-component a { border-radius: 18px; overflow: hidden; display: block; }
.BannerCollection-component .sh-banner-collection-card > a > div > div > p { display: block !important; }

/* 9. Tier-B sections (.sx) — from theme.css (tables-1 dropped: merchant hid the tables) */
.sx { --sx-brand: var(--secondary-main, #B5321A); --sx-ink: #1D1D1F; --sx-text: #2A2C30; --sx-muted: #5B6068; --sx-line: #E2E5E9; --sx-steel: #EEF1F4; --sx-steel-2: #F6F7F9; --sx-wa: #1A7F43; --sx-radius: 14px; --sx-gap: 16px;
  width: 100%; box-sizing: border-box; color: var(--sx-text); font-family: var(--typography-font-family, "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif); }
.sx *, .sx *::before, .sx *::after { box-sizing: border-box; }
.sx img { display: block; max-width: 100%; height: auto; }
.sx .sx-wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.sx .sx-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sx-brand); }
.sx .sx-h2 { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--sx-ink); }
.sx .sx-lede { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--sx-muted); max-width: 62ch; }
.sx .sx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid transparent; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; }
.sx .sx-btn svg { width: 20px; height: 20px; flex: none; }
.sx .sx-btn--ink { background: var(--sx-ink); color: #fff; }
.sx .sx-btn--ink:hover { background: #000; }
.sx .sx-btn--wa { background: var(--sx-wa); color: #fff; }
.sx .sx-btn--wa:hover { background: #146a37; }
@media (min-width: 768px) { .sx .sx-wrap { padding: 0 24px; } .sx .sx-h2 { font-size: 30px; } }

.sx-usp { padding: 0; background: var(--sx-steel); border-bottom: 1px solid var(--sx-line); }
.sx-usp .sx-usp__row { display: flex; gap: 10px; margin: 0; padding: 14px 16px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
.sx-usp .sx-usp__row::-webkit-scrollbar { display: none; }
.sx-usp .sx-usp__item { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; scroll-snap-align: start; padding-right: 14px; }
.sx-usp .sx-usp__ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--sx-brand); flex: none; }
.sx-usp .sx-usp__ico svg { width: 20px; height: 20px; }
.sx-usp .sx-usp__t { display: block; font-size: 14px; font-weight: 700; color: var(--sx-ink); line-height: 1.2; }
.sx-usp .sx-usp__s { display: block; font-size: 12.5px; color: var(--sx-muted); line-height: 1.3; }
@media (min-width: 1024px) { .sx-usp .sx-usp__row { max-width: 1280px; margin: 0 auto; padding: 18px 24px; justify-content: space-between; overflow: visible; } .sx-usp .sx-usp__item { padding-right: 0; } }

/* category row (HTML: native row can't sit under the USP strip and would show the empty "DIY Full Kit") */
.sx-cats { padding: 36px 0 0; }
.sx-cats .sx-cats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.sx-cats .sx-cats__card { display: block; text-decoration: none; color: var(--sx-ink); }
.sx-cats .sx-cats__img { display: block; border-radius: 16px; overflow: hidden; background: var(--sx-steel); border: 1px solid var(--sx-line); }
.sx-cats .sx-cats__img img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .3s; }
.sx-cats .sx-cats__card:hover img { transform: scale(1.04); }
.sx-cats .sx-cats__t { display: block; margin-top: 10px; font-weight: 800; font-size: 15px; }
.sx-cats .sx-cats__s { display: block; font-size: 13px; color: var(--sx-muted); }
@media (min-width: 768px) { .sx-cats .sx-cats__grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
@media (min-width: 1024px) { .sx-cats { padding-top: 52px; } }

.sx-finder { padding: 44px 0; margin-top: 36px; background: var(--sx-steel-2); }
.sx-finder .sx-finder__steps { display: grid; gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.sx-finder .sx-finder__step { background: #fff; border: 1px solid var(--sx-line); border-radius: var(--sx-radius); padding: 18px; }
.sx-finder .sx-finder__n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sx-ink); color: #fff; font-size: 13px; font-weight: 800; }
.sx-finder .sx-finder__st { margin: 10px 0 12px; font-size: 18px; font-weight: 800; color: var(--sx-ink); letter-spacing: -.01em; }
.sx-finder .sx-finder__opts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sx-finder .sx-finder__opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--sx-steel-2); border: 1px solid var(--sx-line); text-decoration: none; color: inherit; }
.sx-finder a.sx-finder__opt:hover { border-color: var(--sx-ink); }
.sx-finder .sx-finder__ot { display: block; font-size: 14.5px; font-weight: 700; color: var(--sx-ink); }
.sx-finder .sx-finder__os { display: block; font-size: 12.5px; color: var(--sx-muted); }
.sx-finder .sx-finder__op { font-size: 13px; font-weight: 700; color: var(--sx-ink); white-space: nowrap; }
.sx-finder .sx-finder__op b { font-weight: 800; }
.sx-finder .sx-finder__tag { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: #FBEAE6; color: #8E2612; font-size: 11px; font-weight: 800; vertical-align: 1px; }
.sx-finder .sx-finder__note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--sx-muted); }
.sx-finder .sx-finder__box { margin-top: 28px; display: grid; gap: 18px; align-items: center; }
.sx-finder .sx-finder__shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.sx-finder .sx-finder__shots figure { margin: 0; }
.sx-finder .sx-finder__shots img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--sx-line); background: #fff; }
.sx-finder .sx-finder__shots figcaption { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--sx-text); text-align: center; }
.sx-finder .sx-finder__help h3 { margin: 0; font-size: 20px; font-weight: 800; color: var(--sx-ink); letter-spacing: -.01em; }
.sx-finder .sx-finder__help p { margin: 6px 0 16px; color: var(--sx-muted); font-size: 14.5px; line-height: 1.5; }
.sx-finder .sx-finder__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 768px) { .sx-finder { padding: 56px 0; margin-top: 52px; } .sx-finder .sx-finder__steps { grid-template-columns: repeat(2, 1fr); } .sx-finder .sx-finder__step:last-child { grid-column: 1 / -1; } .sx-finder .sx-finder__box { grid-template-columns: 1.3fr 1fr; gap: 32px; } }
@media (min-width: 1024px) { .sx-finder .sx-finder__steps { grid-template-columns: repeat(3, 1fr); } .sx-finder .sx-finder__step:last-child { grid-column: auto; } }

.sx-help { padding: 36px 0 48px; }
.sx-help .sx-help__card { display: grid; gap: 22px; padding: 26px 20px; border-radius: 18px; background: var(--sx-ink); color: #E8EAED; }
.sx-help .sx-help__card .sx-h2 { color: #fff; }
.sx-help .sx-help__card .sx-kicker { color: #F08A73; }
.sx-help .sx-help__card .sx-lede { color: #C3C7CD; }
.sx-help .sx-help__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sx-help .sx-help__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; }
.sx-help .sx-help__list svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: #F08A73; }
.sx-help .sx-help__list a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sx-help .sx-help__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sx-help .sx-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .55); }
@media (min-width: 768px) { .sx-help { padding: 52px 0 64px; } .sx-help .sx-help__card { grid-template-columns: 1.2fr 1fr; align-items: center; padding: 40px; gap: 40px; } }

/* 10. PDP — charcoal primary, outline secondary, red % tag without the fashion clip-path */
.sh-product-discount-tag { clip-path: none !important; width: auto !important; border-radius: 6px !important; background: var(--secondary-main) !important; color: #fff !important; font-weight: 800 !important; padding: 3px 8px !important; }
.sh-product-buy-now-button { background: var(--wd-ink) !important; color: #fff !important; border-color: var(--wd-ink) !important; }
.product-component-container .pr-outlined-button, .product-component-container .pr-plus-minus-button { border-color: var(--wd-ink) !important; color: var(--wd-ink) !important; }

/* 11. Footer (custom HTML footer: 4_column_premium renders a light 3-col footer with broken tel/mailto on basic) */
.sx-ftr { background: #141416; color: #C9CCD1; font-size: 14px; font-family: var(--typography-font-family); }
.sx-ftr *, .sx-ftr *::before, .sx-ftr *::after { box-sizing: border-box; }
.sx-ftr a { color: #E6E8EB; text-decoration: none; }
.sx-ftr a:hover { text-decoration: underline; }
.sx-ftr .sx-ftr__grid { display: grid; gap: 26px; max-width: 1280px; margin: 0 auto; padding: 40px 16px 26px; }
.sx-ftr .sx-ftr__logo { display: inline-block; background: #fff; border-radius: 10px; padding: 8px 12px; }
.sx-ftr .sx-ftr__logo img { display: block; height: 26px; width: auto; }
.sx-ftr h3 { margin: 0 0 10px; color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.sx-ftr ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sx-ftr p { margin: 12px 0 0; line-height: 1.55; }
.sx-ftr .sx-ftr__social { display: flex; gap: 8px; margin-top: 14px; }
.sx-ftr .sx-ftr__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #3A3D42; }
.sx-ftr .sx-ftr__social svg { width: 18px; height: 18px; }
.sx-ftr .sx-ftr__pay { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sx-ftr .sx-ftr__pay span { padding: 4px 9px; border: 1px solid #3A3D42; border-radius: 6px; font-size: 12px; color: #E6E8EB; }
.sx-ftr .sx-ftr__copy { border-top: 1px solid #2A2C30; padding: 14px 16px; font-size: 12.5px; color: #9EA3AA; text-align: center; }
@media (min-width: 768px) { .sx-ftr .sx-ftr__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; padding: 52px 24px 32px; } }
body:has(.sh-bottom-nav-main) .sx-ftr .sx-ftr__copy { padding-bottom: 84px; }

/* 12. Page colour — theme body is #FDFCFB; mock is white (no seams around white sections) */
html body, div:has(> main), main { background-color: #fff !important; }

/* 13. Notice — short copy on phones (setting text carries both spans) */
.notice .notice-message b { color: #F5A08C; font-weight: 700; }
.notice .notice-message .n-m { display: none; }
@media (max-width: 767px) { .notice .notice-message .n-d { display: none; } .notice .notice-message .n-m { display: inline; } }
/* 14. Round 2 (after switch) — hero full-bleed, notice size, banner copy as in the mock */
main .grid.section:has(.StoreBanner-component) { max-width: none !important; }
.notice, .notice .notice-message { font-size: 13px !important; line-height: 1.5 !important; }
.StoreBanner-component .swiper-slide img { width: 100%; aspect-ratio: 1920 / 760; object-fit: cover; background: var(--wd-steel); display: block; }
body:has(.mobile-app-bar) .StoreBanner-component .swiper-slide img { aspect-ratio: 3 / 4; }
.StoreBanner-component .swiper-button-prev, .StoreBanner-component .swiper-button-next { display: none !important; }
.StoreBanner-component .swiper-pagination-bullet { width: 8px !important; height: 8px !important; border-radius: 4px !important; background: rgba(29, 29, 31, .3) !important; opacity: 1 !important; transition: width .2s; }
.StoreBanner-component .swiper-pagination-bullet-active { width: 22px !important; background: #1D1D1F !important; }
.BannerCollection-component .banner-collection > .overflow-hidden { border-radius: 18px; background: var(--wd-steel); }
.BannerCollection-component .sh-banner-img-ctn img { width: 100%; aspect-ratio: 1560 / 620; object-fit: cover; display: block; }
.BannerCollection-component .ban-cont-content { top: 50% !important; left: 6% !important; right: auto !important; bottom: auto !important; transform: translateY(-50%) !important; text-align: left !important; width: auto !important; max-width: 60%; padding: 0 !important; background: none !important; }
.BannerCollection-component h2.ban-cont-text { display: block !important; font-size: 36px !important; line-height: 1.12 !important; font-weight: 800 !important; letter-spacing: -.02em; max-width: 12ch; margin: 0 0 14px !important; color: #1D1D1F !important; text-align: left !important; }
.BannerCollection-component a.ban-cont-button { display: inline-flex !important; align-items: center; min-height: 46px; width: auto !important; padding: 0 22px !important; border-radius: 999px !important; background: #1D1D1F !important; color: #fff !important; font-weight: 700 !important; font-size: 15px !important; border: 0 !important; visibility: visible !important; }
body:has(.mobile-app-bar) .BannerCollection-component .sh-banner-img-ctn img { aspect-ratio: 1 / 1; }
body:has(.mobile-app-bar) .BannerCollection-component .ban-cont-content { top: 24px !important; left: 22px !important; right: 22px !important; transform: none !important; max-width: none; }
body:has(.mobile-app-bar) .BannerCollection-component h2.ban-cont-text { font-size: 26px !important; max-width: 13ch; }
/* 15. Round 3 (phone) — one-line notice; bottom nav white with ink icons (theme paints it in theme_color = solid red) */
@media (max-width: 767px) { .notice, .notice .notice-message { font-size: 12px !important; } .notice .notice-message { padding: 7px 6px !important; white-space: nowrap; letter-spacing: -.01em; } }
.sh-bottom-nav-main { background: #fff !important; border-top: 1px solid var(--wd-line); box-shadow: none !important; }
.sh-bottom-nav-main .sh-bottom-nav-unselected, .sh-bottom-nav-main .sh-bottom-nav-unselected * { color: var(--wd-muted) !important; }
.sh-bottom-nav-main .sh-bottom-nav-selected, .sh-bottom-nav-main .sh-bottom-nav-selected * { color: var(--wd-ink) !important; font-weight: 700; }
.sh-bottom-nav-main svg { stroke: currentColor; }/* phone cards: the WhatsApp button wrapped under "Add to cart" as an orphan (a 2-up card can't fit both at 320-375px);
   on phones the card keeps the full-width Add to cart, WhatsApp stays in the header and on the PDP. Desktop unchanged. */
.sh-product-card button.pr-outlined-button { white-space: nowrap; }
body:has(.mobile-app-bar) .sh-product-card a.pr-card-action-enquiry { display: none !important; }
.BannerCollection-component a.ban-cont-button { white-space: nowrap; }
body:has(.mobile-app-bar) .BannerCollection-component h2.ban-cont-text { max-width: 15ch; }
/* 16. Round 4 — notice bar height: theme padding made it 56px (mock ~36px) */
.notice { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; }
/* 17. Round 5 (sweeps) — cart badge was red text on ink (hard to read); product row swiper added 10px top/bottom to the rhythm; one bottom-nav icon stayed theme grey */
header .sh-header-cart-badge, .sh-header-cart-badge.MuiBadge-badge { background-color: #1D1D1F !important; color: #fff !important; font-weight: 700; }
main .prod-collection-container > .swiper { padding-top: 0 !important; padding-bottom: 0 !important; }
.sh-bottom-nav-main .sh-bottom-nav-unselected svg, .sh-bottom-nav-main .sh-bottom-nav-unselected svg * { stroke: var(--wd-muted) !important; color: var(--wd-muted) !important; }
/* 18. Round 6 (phone check of cart / search / about / contact) */
/* about: theme body copy was 20px/30px; values and cart amounts were theme black */
.about-description { font-size: 16px !important; line-height: 1.6 !important; color: var(--wd-text) !important; }
.sh-aboutus-location-storeinfo .store-info-value, .sh-aboutus-location-storeinfo .store-info-value span, .cart-summary-value, .cart-summary-value span { color: var(--wd-ink) !important; }
/* form fields (contact, checkout) fell back to Roboto */
body input, body textarea, body select, body .MuiInputBase-input, body .MuiInputBase-root, body .MuiFormLabel-root { font-family: var(--typography-font-family) !important; }
/* phone cards: MRP dropped to a second line on 4-digit prices, pushing the size picker out of line with its neighbour */
body:has(.mobile-app-bar) .sh-product-card .pr-price { flex-wrap: nowrap !important; white-space: nowrap; gap: 5px; }
body:has(.mobile-app-bar) .sh-product-card s.pr-mrp-price { font-size: 12px !important; }
/* 19. Round 7 (spacing audit, all templates, desktop + phone) */
/* inner pages (listing, category, collection, search, about, contact, cart) sat on a 1600px/32px column: content started at 32px
   while header, home and footer start at 105px (1280 column, 24px gutter) */
body:not(:has(.mobile-app-bar)) .page-container { max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; }
/* PDP wrapper had 40px side padding (content 1200 wide, 16px inside the site column) */
body:not(:has(.mobile-app-bar)) div:has(> .product-component-container) { max-width: 1280px !important; padding-left: 24px !important; padding-right: 24px !important; }
body:not(:has(.mobile-app-bar)) .product-component-container { width: 100% !important; max-width: none !important; }
/* product card: theme pads the whole card 8px (photo inset, 21px under the button vs 12px at the sides); price row margin doubled the gap to the size picker */
.sh-product-card.MuiPaper-root, .pr-long-card.sh-product-card { padding: 0 !important; }
.sh-product-card .pr-price { margin-bottom: 0 !important; }
/* PDP related products: title in the section-title style, cards on the column edge, same distance to the footer as the home */
.related-products-heading { font-size: 30px !important; line-height: 1.15 !important; font-weight: 800 !important; letter-spacing: -.02em; color: var(--wd-ink) !important; }
body:has(.mobile-app-bar) .related-products-heading { font-size: 24px !important; }
body:not(:has(.mobile-app-bar)) .product-component-container .swiper { margin-left: -8px !important; margin-right: -8px !important; }
body:not(:has(.mobile-app-bar)) .related-product-header { margin-bottom: 10px !important; }
div:has(> .product-component-container) { padding-bottom: 56px !important; }
body:has(.mobile-app-bar) div:has(> .product-component-container) { padding-bottom: 36px !important; }
/* phone PDP: the fixed buy bar (82px) covered the footer's last line */
@media (max-width: 959px) { body:has(.product-footer-root) .sx-ftr .sx-ftr__copy { padding-bottom: 100px !important; } }/* phone PDP: 40px between the size chips and the trust badges (the buy buttons sit in the fixed bar there) */
body:has(.mobile-app-bar) .sx-tb { margin-top: 0 !important; }
body:has(.mobile-app-bar) div:has(> .sx-tb) { margin-top: 6px !important; }
/* 20. Round 8 — /categories (all-categories page): theme page sat on its own 40px column with rem sizes on a 20px root
   (45px title, 22px lede, 20px breadcrumb), grey page, 180px "contain" photos next to 258px letter placeholders.
   Now: site column, section-title type, square tiles like the home category row. */
div.min-h-screen:has(> .max-w-7xl > .grid > div > a[href^="/categories/"]) { background: #fff !important; min-height: 0 !important; }
div.min-h-screen > .max-w-7xl:has(> .grid > div > a[href^="/categories/"]) { max-width: 1280px !important; padding: 20px 16px 36px !important; }
.max-w-7xl:has(> .grid > div > a[href^="/categories/"]) > nav { margin: 0 0 18px !important; }
.max-w-7xl:has(> .grid > div > a[href^="/categories/"]) > nav ol, .max-w-7xl:has(> .grid > div > a[href^="/categories/"]) > nav ol li, .max-w-7xl:has(> .grid > div > a[href^="/categories/"]) > nav ol a { font-size: 13px !important; line-height: 1.5 !important; color: var(--wd-muted) !important; }
.max-w-7xl:has(> .grid > div > a[href^="/categories/"]) > nav ol li:last-child { color: var(--wd-ink) !important; font-weight: 600; }
.max-w-7xl:has(> .grid > div > a[href^="/categories/"]) > .text-center:not(.mt-10) { text-align: left !important; margin-bottom: 16px !important; }
.max-w-7xl:has(> .grid > div > a[href^="/categories/"]) > .text-center > h2 { font-size: 24px !important; line-height: 1.15 !important; font-weight: 800 !important; letter-spacing: -.02em; color: var(--wd-ink) !important; margin: 0 0 6px !important; }
.max-w-7xl:has(> .grid > div > a[href^="/categories/"]) > .text-center > p { font-size: 14.5px !important; line-height: 1.5 !important; color: var(--wd-muted) !important; max-width: none !important; margin: 0 !important; }
.max-w-7xl > .grid:has(> div > a[href^="/categories/"]) { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
.max-w-7xl > .grid > div:has(> a[href^="/categories/"]) { background: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
.max-w-7xl > .grid > div > a[href^="/categories/"] { display: block; text-decoration: none; color: var(--wd-ink); }
.max-w-7xl > .grid > div > a[href^="/categories/"] > div:first-child { height: auto !important; aspect-ratio: 1; margin: 0 !important; border-radius: 16px !important; overflow: hidden; background: var(--wd-steel); border: 1px solid var(--wd-line); }
.max-w-7xl > .grid > div > a[href^="/categories/"] > div:first-child img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform .3s; }
.max-w-7xl > .grid > div > a[href^="/categories/"]:hover > div:first-child img { transform: scale(1.04); }
.max-w-7xl > .grid > div > a[href^="/categories/"] > h3 { margin: 10px 0 0 !important; text-align: left !important; font-size: 15px !important; line-height: 1.3 !important; font-weight: 800 !important; color: var(--wd-ink) !important; }
/* Kitchen & Dining has no category image (theme drew a pink "K"): same chopping-board photo as the home row */
.max-w-7xl > .grid > div > a[href$="/categories/kitchen-dining"] > div:first-child { background: var(--wd-steel) url("https://cdn2.clevup.in/449590/wudore-304-steel-chopping-board-cover-1794400408287.jpeg?width=640&format=webp") center / cover no-repeat !important; }
.max-w-7xl > .grid > div > a[href$="/categories/kitchen-dining"] > div:first-child * { background: none !important; color: transparent !important; font-size: 0 !important; }
/* "DIY Full Kit" has no products (green "D" tile leading to an empty page); the home row leaves it out too */
.max-w-7xl > .grid > div:has(> a[href$="/categories/diy-full-kit-cloth-dryer"]) { display: none !important; }
/* closing card: flat steel card instead of a shadowed white one on grey */
.max-w-7xl:has(> .grid > div > a[href^="/categories/"]) > .mt-10 { margin-top: 36px !important; }
.max-w-7xl:has(> .grid > div > a[href^="/categories/"]) > .mt-10 > div { background: var(--wd-steel-2) !important; box-shadow: none !important; border: 1px solid var(--wd-line); border-radius: 18px !important; padding: 26px 20px !important; }
.max-w-7xl:has(> .grid > div > a[href^="/categories/"]) > .mt-10 h3 { font-size: 20px !important; line-height: 1.2 !important; font-weight: 800 !important; letter-spacing: -.01em; color: var(--wd-ink) !important; margin: 0 0 6px !important; }
.max-w-7xl:has(> .grid > div > a[href^="/categories/"]) > .mt-10 p { font-size: 14.5px !important; line-height: 1.5 !important; color: var(--wd-muted) !important; margin: 0 auto 16px !important; }
@media (min-width: 768px) {
  .max-w-7xl > .grid:has(> div > a[href^="/categories/"]) { grid-template-columns: repeat(4, 1fr) !important; gap: 18px !important; }
}
@media (min-width: 1024px) {
  div.min-h-screen > .max-w-7xl:has(> .grid > div > a[href^="/categories/"]) { padding: 24px 24px 64px !important; }
  .max-w-7xl:has(> .grid > div > a[href^="/categories/"]) > .text-center:not(.mt-10) { margin-bottom: 20px !important; }
  .max-w-7xl:has(> .grid > div > a[href^="/categories/"]) > .text-center > h2 { font-size: 30px !important; }
  .max-w-7xl:has(> .grid > div > a[href^="/categories/"]) > .mt-10 { margin-top: 52px !important; }
  .max-w-7xl:has(> .grid > div > a[href^="/categories/"]) > .mt-10 > div { padding: 40px !important; }
  .max-w-7xl:has(> .grid > div > a[href^="/categories/"]) > .mt-10 h3 { font-size: 24px !important; }
}
/* 21. Round 9 — "Select Variant" popup (.pr-var-card, opens from a card's size picker), desktop + phone.
   Out-of-stock variant: the theme stacks WhatsApp above "Out of Stock" in an absolute bottom-right block (98px tall),
   which covered the discount / MRP. Now one row: "Out of Stock" + WhatsApp, with room reserved under the price.
   Phone bottom sheet: the action block goes back into normal flow under the text (at 320px it also covered the size label). */
.pr-var-card .MuiCardActions-root.action > div:has(> .pr-card-action-txt) { flex-direction: row-reverse !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; width: auto !important; }
.pr-var-card .MuiCardActions-root.action > div:has(> .pr-card-action-txt) > div { width: auto !important; flex: 0 0 auto !important; }
.pr-var-card .MuiCardActions-root.action .pr-card-action-txt { white-space: nowrap !important; margin: 0 !important; }
body:not(:has(.mobile-app-bar)) .pr-var-card:has(.MuiCardActions-root.action .pr-card-action-txt) .MuiCardContent-root.product { padding-bottom: 56px !important; }
body:has(.mobile-app-bar) .pr-var-card .MuiCardContent-root.product { height: auto !important; padding-bottom: 4px !important; }
body:has(.mobile-app-bar) .pr-var-card .MuiCardContent-root.product > div:last-child { margin-bottom: 0 !important; }
body:has(.mobile-app-bar) .pr-var-card .MuiCardActions-root.action { position: static !important; inset: auto !important; justify-content: flex-end !important; padding: 4px 8px 8px !important; }
body:has(.mobile-app-bar) .pr-var-card .MuiCardActions-root.action > div { width: auto !important; }
/* 22. Round 10 — "Select Variant" popup on iPhone Safari: the theme's button row is a wrapping flex row (Add to cart = flex-1, min 96px)
   inside a shrink-to-fit block; WebKit sized that block to the button alone, so WhatsApp wrapped onto a second line under "Add to cart"
   (Chrome kept one row). Now the row never wraps and both buttons keep their own width. All widths. */
.pr-var-card .MuiCardActions-root.action > div { flex: 0 0 auto !important; width: max-content !important; max-width: 100%; }
.pr-var-card .MuiCardActions-root.action > div > div { flex-wrap: nowrap !important; width: max-content !important; }
.pr-var-card .MuiCardActions-root.action > div > div > * { flex: 0 0 auto !important; }
.pr-var-card .MuiCardActions-root.action button.pr-outlined-button { width: auto !important; min-width: 0 !important; padding-left: 12px !important; padding-right: 12px !important; }
.pr-var-card .MuiCardActions-root.action a.pr-card-action-enquiry { flex: 0 0 40px !important; width: 40px !important; min-width: 40px !important; }