@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@400;500;600;700;800&family=Teko:wght@500;600&display=swap');
.sh-ge-collect.sh-ge-collect-6a01a97e582dac50f75c6cd4 .banner-image-container {
  box-shadow: unset !important;
}

/* refine-542711.css — Deep Electronicals ANJAD (zippy). Source of truth for our CSS.
   Built into custom-combined.css = live_backup/vastram-live.css + this file (@import hoisted). */

/* 1. Section CSS from the mock (theme-preview2/preview/deep-electronicals/theme.css, verbatim) */
/* Deep Electronicals — generated section CSS (Tier B). Upload to site_settings.sx_css_location.
   Every selector hangs off .sx; brand comes from the theme's --secondary-main. */

/* BEGIN shoopy-gen:base */
.sx {
  --sx-cta: #D9001B;
  --sx-cta-dark: #B30016;
  --sx-gold: #FFC81E;
  --sx-ink: #141518;
  --sx-ink-2: #1E2024;
  --sx-line: #E3E5E9;
  --sx-muted: #5B616B;
  --sx-wa: #3BD16F;
  --sx-radius: 14px;
  --sx-head: "Teko", "Mukta", system-ui, sans-serif;
  box-sizing: border-box;
  width: 100%;
  color: var(--sx-ink);
}
.sx *, .sx *::before, .sx *::after { box-sizing: border-box; }
.sx .sx-wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.sx .sx-h2 { margin: 0; font-family: var(--sx-head); font-weight: 600; font-size: 30px; line-height: 1; letter-spacing: .3px; text-transform: uppercase; }
.sx .sx-sub { margin: 4px 0 0; color: var(--sx-muted); font-size: 15px; }
.sx .sx-ico { width: 1.2em; height: 1.2em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sx .sx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 10px; font-weight: 800; font-size: 16px; letter-spacing: .3px; text-decoration: none; border: 2px solid transparent; }
.sx .sx-btn--buy { background: var(--sx-cta); color: #fff; }
.sx .sx-btn--buy:hover { background: var(--sx-cta-dark); }
.sx .sx-btn--wa { background: transparent; color: #fff; border-color: var(--sx-wa); }
.sx .sx-btn--wa .sx-ico { color: var(--sx-wa); }
.sx .sx-btn--wa:hover { background: rgba(59, 209, 111, .12); }
.sx .sx-btn--ghost { background: transparent; color: #fff; border-color: #4A4D54; }
.sx .sx-btn--ghost:hover { border-color: #fff; }
.sx .sx-off { display: inline-block; background: var(--sx-gold); color: var(--sx-ink); font-weight: 800; font-size: 13px; padding: 2px 8px; border-radius: 6px; }
@media (min-width: 768px) { .sx .sx-wrap { padding: 0 24px; } }
@media (min-width: 1024px) { .sx .sx-h2 { font-size: 38px; } .sx .sx-sub { font-size: 16px; } }
/* END shoopy-gen:base */

/* BEGIN shoopy-gen:usp-1 */
.sx-usp { background: #fff; border-bottom: 1px solid var(--sx-line); }
.sx-usp .sx-usp__list { list-style: none; margin: 0 auto; padding: 12px 16px; max-width: 1280px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.sx-usp .sx-usp__item { display: flex; align-items: center; gap: 10px; }
.sx-usp .sx-usp__ico { flex: none; width: 40px; height: 40px; border-radius: 10px; background: #FFF4D1; color: var(--sx-ink); display: grid; place-items: center; font-size: 20px; }
.sx-usp b { display: block; font-size: 14.5px; line-height: 1.2; }
.sx-usp small { display: block; font-size: 13px; color: var(--sx-muted); line-height: 1.25; }
@media (min-width: 1024px) {
  .sx-usp .sx-usp__list { grid-template-columns: repeat(4, 1fr); padding: 16px 24px; }
  .sx-usp b { font-size: 16px; }
  .sx-usp small { font-size: 14px; }
}
/* END shoopy-gen:usp-1 */

/* BEGIN shoopy-gen:spotlight-1 */
.sx-spot { padding: 26px 0 6px; }
.sx-spot .sx-spot__card { background: var(--sx-ink); color: #fff; border-radius: 18px; overflow: hidden; display: grid; }
.sx-spot .sx-spot__media { position: relative; background: #2B2D31; }
.sx-spot .sx-spot__media img { width: 100%; height: 100%; max-height: 360px; object-fit: cover; object-position: 50% 30%; display: block; }
.sx-spot .sx-spot__flag { position: absolute; top: 12px; left: 12px; background: var(--secondary-main, #F30020); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .5px; padding: 4px 10px; border-radius: 6px; text-transform: uppercase; }
.sx-spot .sx-spot__body { padding: 20px 18px 22px; }
.sx-spot .sx-spot__kick { color: var(--sx-gold); font-weight: 700; font-size: 14px; letter-spacing: .4px; text-transform: uppercase; }
.sx-spot .sx-spot__title { margin: 4px 0 6px; font-family: var(--sx-head); font-weight: 600; font-size: 40px; line-height: .95; text-transform: uppercase; }
.sx-spot .sx-spot__hi { margin: 0 0 14px; color: #C9CCD1; font-size: 15px; }
.sx-spot .sx-spot__opts { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.sx-spot .sx-spot__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1.5px solid #3A3D43; border-radius: 12px; padding: 11px 14px; color: #fff; text-decoration: none; }
.sx-spot .sx-spot__opt:hover { border-color: var(--sx-gold); }
.sx-spot .sx-spot__opt b { display: block; font-size: 16px; }
.sx-spot .sx-spot__opt small { display: block; color: #AEB2B8; font-size: 13px; }
.sx-spot .sx-spot__price { text-align: right; flex: none; }
.sx-spot .sx-spot__price strong { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; }
.sx-spot .sx-spot__price s { color: #AEB2B8; font-size: 13px; margin-right: 6px; }
.sx-spot .sx-spot__facts { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 16px; padding: 0; list-style: none; color: #DADCE0; font-size: 14px; }
.sx-spot .sx-spot__facts li { display: inline-flex; align-items: center; gap: 6px; }
.sx-spot .sx-spot__facts .sx-ico { color: var(--sx-gold); }
.sx-spot .sx-spot__cta { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; }
.sx-spot .sx-spot__cta .sx-btn { padding: 0 14px; }
@media (min-width: 768px) {
  .sx-spot .sx-spot__card { grid-template-columns: 1fr 1.1fr; }
  .sx-spot .sx-spot__media { min-height: 460px; }
  .sx-spot .sx-spot__media img { position: absolute; inset: 0; max-height: none; }
  .sx-spot .sx-spot__body { padding: 30px 32px; align-self: center; }
}
@media (min-width: 1024px) {
  .sx-spot { padding: 40px 0 10px; }
  .sx-spot .sx-spot__card { grid-template-columns: 1fr 1fr; }
  .sx-spot .sx-spot__title { font-size: 56px; }
  .sx-spot .sx-spot__body { padding: 40px 48px; }
  .sx-spot .sx-spot__cta { display: flex; }
}
/* END shoopy-gen:spotlight-1 */

/* BEGIN shoopy-gen:brands-1 */
.sx-brands { padding: 22px 0 4px; }
.sx-brands .sx-brands__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.sx-brands .sx-brands__head span { color: var(--sx-muted); font-size: 14px; }
.sx-brands .sx-brands__list { list-style: none; margin: 0; padding: 0 0 4px; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.sx-brands .sx-brands__list::-webkit-scrollbar { display: none; }
.sx-brands .sx-brands__chip { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 116px; padding: 10px 14px 8px; background: #fff; border: 1px solid var(--sx-line); border-radius: 12px; text-align: center; }
.sx-brands .sx-brands__chip strong { font-family: var(--sx-head); font-weight: 600; font-size: 28px; line-height: .9; letter-spacing: .6px; }
.sx-brands .sx-brands__chip small { color: var(--sx-muted); font-size: 12.5px; }
.sx-brands .sx-brands__chip--own { background: var(--sx-ink); border-color: var(--sx-ink); color: #fff; }
.sx-brands .sx-brands__chip--own strong { color: var(--sx-gold); }
.sx-brands .sx-brands__chip--own small { color: #C9CCD1; }
@media (min-width: 1024px) { .sx-brands .sx-brands__list { display: grid; grid-template-columns: repeat(8, 1fr); overflow: visible; } }
/* END shoopy-gen:brands-1 */

/* BEGIN shoopy-gen:fixit-1 */
.sx-fix { padding: 26px 0 6px; }
.sx-fix .sx-fix__box { background: #FFF8E1; border: 1px solid #F3E2A6; border-radius: 18px; padding: 18px 14px 14px; }
.sx-fix .sx-fix__head { margin: 0 4px 14px; }
.sx-fix .sx-fix__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sx-fix .sx-fix__card { height: 100%; display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid #EFE3BC; border-radius: 12px; padding: 12px; text-decoration: none; color: var(--sx-ink); }
.sx-fix .sx-fix__card:hover { border-color: var(--sx-ink); }
.sx-fix .sx-fix__ico { width: 38px; height: 38px; border-radius: 10px; background: var(--sx-ink); color: var(--sx-gold); display: grid; place-items: center; font-size: 19px; margin-bottom: 4px; }
.sx-fix .sx-fix__q { font-weight: 700; font-size: 15px; line-height: 1.25; }
.sx-fix .sx-fix__en { color: var(--sx-muted); font-size: 13px; line-height: 1.25; }
.sx-fix .sx-fix__a { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 700; color: var(--sx-cta); }
.sx-fix .sx-fix__a span { color: var(--sx-ink); font-weight: 600; }
@media (min-width: 768px) { .sx-fix .sx-fix__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) {
  .sx-fix { padding: 40px 0 10px; }
  .sx-fix .sx-fix__box { padding: 28px 28px 24px; }
  .sx-fix .sx-fix__list { grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .sx-fix .sx-fix__q { font-size: 16px; }
}
/* END shoopy-gen:fixit-1 */

/* BEGIN shoopy-gen:help-1 */
.sx-help { padding: 30px 0 0; }
.sx-help .sx-help__grid { display: grid; gap: 12px; }
.sx-help .sx-help__deal { background: var(--sx-ink); color: #fff; border-radius: 18px; padding: 22px 18px; position: relative; overflow: hidden; }
.sx-help .sx-help__deal::before { content: ""; position: absolute; right: -40px; top: 0; bottom: 0; width: 26px; background: var(--secondary-main, #F30020); transform: skewX(-18deg); }
.sx-help .sx-help__deal::after { content: ""; position: absolute; right: -2px; top: 0; bottom: 0; width: 8px; background: var(--sx-gold); transform: skewX(-18deg); }
.sx-help .sx-help__kick { color: var(--sx-gold); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .4px; }
.sx-help .sx-help__title { margin: 4px 0 6px; font-family: var(--sx-head); font-weight: 600; font-size: 36px; line-height: .95; text-transform: uppercase; }
.sx-help .sx-help__deal p { margin: 0 0 16px; color: #C9CCD1; font-size: 15px; max-width: 46ch; }
.sx-help .sx-help__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.sx-help .sx-help__shop { background: #fff; border: 1px solid var(--sx-line); border-radius: 18px; padding: 20px 18px; }
.sx-help .sx-help__shop h3 { margin: 0 0 10px; font-family: var(--sx-head); font-weight: 600; font-size: 28px; line-height: 1; text-transform: uppercase; }
.sx-help .sx-help__shop ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 9px; font-size: 15px; }
.sx-help .sx-help__shop li { display: flex; gap: 10px; align-items: flex-start; }
.sx-help .sx-help__shop li .sx-ico { margin-top: 2px; color: var(--sx-cta); }
.sx-help .sx-help__map { font-weight: 700; color: var(--sx-cta); text-decoration: none; }
@media (min-width: 900px) {
  .sx-help { padding: 44px 0 0; }
  .sx-help .sx-help__grid { grid-template-columns: 1.5fr 1fr; gap: 16px; }
  .sx-help .sx-help__deal { padding: 34px 40px; }
  .sx-help .sx-help__title { font-size: 48px; }
  .sx-help .sx-help__shop { padding: 28px 28px; }
}
/* END shoopy-gen:help-1 */

/* 2. Palette + fonts. Theme derives everything from theme_color #F30020 (red header on phones, red buttons,
      green price pills); the mock is black chrome, #D9001B buttons, gold deals, Mukta body / Teko heads. */
html:root {
  --header-main: #141518;
  --header-badge-main: #FFC81E;
  --button-main: #D9001B;
  --button-borderColor: #D9001B;
  --typography-font-family: "Mukta", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body.sh-body, .sh-body button, .sh-body input { font-family: "Mukta", system-ui, -apple-system, "Segoe UI", sans-serif; }

/* 3. Notice bar: gold, one line; items 2 and 3 drop off on narrow screens (as in the mock). */
.notice .notice-message { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notice .de-n2, .notice .de-n3 { display: none; }
@media (min-width: 640px) { .notice .de-n2 { display: inline; } }
@media (min-width: 1024px) { .notice .de-n3 { display: inline; } }

/* 4. Header: black like the logo badge (theme: white on desktop, red on phones). */
header.luxury-header { background: #141518 !important; }
header.luxury-header .desktop-header-right, header.luxury-header .desktop-header-right span,
header.luxury-header .desktop-header-right svg { color: #fff; }
header.luxury-header .header-top svg { color: #fff; stroke: #fff; }
header.luxury-header .category-label { color: #E7E8EA; }

/* 5. Section heads: Teko caps like the mock's row heads; subtitle in muted Mukta. */
.heading-title, h2.category-header {
  font-family: "Teko", "Mukta", system-ui, sans-serif !important;
  font-weight: 600 !important; font-size: 30px !important; line-height: 1 !important;
  letter-spacing: .3px; text-transform: uppercase; color: #141518 !important;
}
h2.category-header { text-align: left !important; width: 100%; }
.heading-description { color: #5B616B; font-size: 15px; margin-top: 4px; }
@media (min-width: 1024px) {
  .heading-title, h2.category-header { font-size: 38px !important; }
  .heading-description { font-size: 16px; }
}

/* 6. Product cards: price in ink (theme: white on a green pill), "% OFF" as the gold deal pill,
      ADD as a red outline on a pale red tint. */
.product-card .product-card-price { background: transparent !important; color: #141518 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; font-size: 18px; font-weight: 800; }
.product-card .product-card-price span { color: #141518 !important; }
.product-card .product-card-discount-amount {
  display: inline-block; width: auto; background: #FFC81E; color: #141518 !important;
  font-weight: 800; font-size: 12px; padding: 1px 7px; border-radius: 6px; border: 0 !important;
}
.product-card .product-card-add-button { color: #D9001B !important; border-color: #D9001B !important; background: #FFF5F6 !important; font-weight: 800; }
.product-card .product-card-name { color: #141518; font-weight: 600; }

/* 7. One content column: our .sx sections on the theme's .page-container column
      (1440 max, 40px gutter from 768px, 16px on phones). Mock used 1280/24. */
@media (min-width: 768px) {
  .sx .sx-wrap { max-width: 1440px; padding: 0 40px; }
  .sx-usp .sx-usp__list { max-width: 1440px; padding-left: 40px; padding-right: 40px; }
}

/* 8. Custom HTML footer (footer-deep.html, footer_settings type html): the mock's black 4-column footer.
      zippy's default footer-v2 had only an 18-category list, no phone/address/hours/payments. */
.de-ftr { background: #141518; color: #C9CCD1; font-size: 15px; line-height: 1.5; }
.de-ftr .de-ftr__wrap { max-width: 1440px; margin: 0 auto; padding: 0 16px; }
.de-ftr .de-ftr__grid { display: grid; gap: 26px; padding: 34px 0 22px; }
.de-ftr .de-ftr__brand img { width: 96px; height: 96px; border-radius: 50%; display: block; }
.de-ftr .de-ftr__brand p { margin: 12px 0 0; max-width: 34ch; }
.de-ftr h3 { margin: 0 0 10px; font-family: "Teko", "Mukta", system-ui, sans-serif; font-weight: 600; font-size: 22px; line-height: 1.1; letter-spacing: .4px; color: #fff; text-transform: uppercase; }
.de-ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.de-ftr a { color: #C9CCD1; text-decoration: none; }
.de-ftr a:hover { color: #FFC81E; }
.de-ftr .de-ftr__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.de-ftr .de-ftr__contact li { display: flex; gap: 8px; align-items: flex-start; overflow-wrap: anywhere; }
.de-ftr .de-ftr__contact svg { width: 18px; height: 18px; flex: none; margin-top: 3px; fill: none; stroke: #FFC81E; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.de-ftr .de-ftr__pay { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.de-ftr .de-ftr__pay span { border: 1px solid #3A3D43; border-radius: 6px; padding: 3px 9px; font-size: 13px; font-weight: 700; color: #fff; }
.de-ftr .de-ftr__bottom { border-top: 1px solid #2A2C31; padding: 14px 0; font-size: 13px; color: #9A9EA5; }
@media (min-width: 768px) { .de-ftr .de-ftr__wrap { padding: 0 40px; } }
@media (min-width: 900px) { .de-ftr .de-ftr__grid { grid-template-columns: 1.3fr 2fr 1.2fr; gap: 40px; } }

/* 9. Multi-row product grid ("Spare Parts from ₹20", 12 items): theme puts 7 per row on desktop, leaving 7 + 5.
      6 per row = two full rows, as in the mock. */
@media (min-width: 1024px) {
  .multi-row-product-list-grid.recommended-theme-mode-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}

/* 10. Phones: "See All" wrapped onto two lines beside the long Teko heads. */
.collection-header .shop-all-link, .collection-header .shop-all-link span { white-space: nowrap; }
/*     Kept on one line, the link then sat over the subtitle on phones: give the heading the rest of the row. */
.collection-header { align-items: flex-start !important; gap: 12px; }
.collection-header .heading { flex: 1 1 0; min-width: 0; }
.collection-header .shop-all-link { flex: none; padding-top: 4px; }

/* 11. Phones: the merchant's referral tab ("Get 2% off", fixed, rotated) covered prices and USP text at the
       right edge. 25% smaller there, still flush with the edge (box centre moves 5.5px right). */
@media (max-width: 768px) {
  .sh-referral-widget .root-ctn { transform: rotate(-90deg) scale(.75) !important; right: -77.5px !important; }
}

/* 12. Brands grid at 1024–1150px: 8 chips x 116px min-width overflowed the column (page scrolled sideways
       by 28px at 1024). Let the 8 columns shrink. */
@media (min-width: 1024px) {
  .sx-brands .sx-brands__list { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .sx-brands .sx-brands__chip { min-width: 0; padding-left: 6px; padding-right: 6px; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .sx-brands .sx-brands__chip strong { font-size: 22px; } }

/* 13. PDP: same price language as the cards (theme: white price on a green pill, green "% OFF");
       product name in the display face. */
.product-price { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.product-price span { color: #141518 !important; font-size: 28px; font-weight: 800; }
.product-discount span { display: inline-block; background: #FFC81E; color: #141518 !important; padding: 2px 8px; border-radius: 6px; font-weight: 800; }
h1.product-title { font-family: "Teko", "Mukta", system-ui, sans-serif; font-weight: 600; font-size: 26px; line-height: 1.05; letter-spacing: .3px; color: #141518; }
@media (min-width: 1024px) { h1.product-title { font-size: 34px; } }

/* 14. Mock card + page (side-by-side round, 30 Oct). Live had no card box, ADD on the photo, "% OFF" under the price
       and a white page; mock = white bordered cards on #F4F5F7, square photo with the % badge on it,
       name → price/MRP with ADD beside. ADD lives inside the image box in the theme markup, so the card grid
       pins it to the card's bottom-right: card = flex column, image box = position static is NOT possible
       (the photos are absolute inside it), so ADD is placed from the image box with top:100% + the fixed
       info-row offset (name is clamped to a fixed 2-line height). */
body.sh-body { background: #F4F5F7; }
main > div.section { background-color: transparent !important; }
.product-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid #E3E5E9; border-radius: 12px; overflow: hidden;
}
.product-card .product-card-image-container { aspect-ratio: 1 / 1 !important; border-radius: 0; overflow: visible; }
.product-card .product-card-image-container img { object-fit: cover; }
.product-card .product-card-discount-amount { position: absolute; top: 8px; left: 8px; z-index: 2; }
.product-card .product-card-info { display: flex; flex-direction: column; flex: 1; padding: 9px 10px 11px; }
.product-card .product-card-name-link { order: -1; }
.product-card .product-card-name {
  font-size: 14.5px; line-height: 18px; font-weight: 600; margin: 0 0 6px; height: 36px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-card .product-card-pricing { padding-right: 72px; min-height: 38px; }
.product-card .product-card-price-container { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.product-card .product-card-price { font-size: 17px; line-height: 1.1; }
.product-card .product-card-mrp-price { font-size: 13px; color: #5B616B; }
/* measured: price row centre is 81px below the image box; button 33px tall → top = 100% + 64px */
.product-card .product-card-add-button {
  position: absolute; bottom: auto !important; right: 10px !important; top: calc(100% + 64px) !important; box-shadow: none !important;
  z-index: 2; border: 1.5px solid #D9001B !important; border-radius: 8px; padding: 6px 14px; font-size: 14px; letter-spacing: .4px; line-height: 18px;
}
.product-card .product-card-add-button:hover { background: #D9001B !important; color: #fff !important; }
.product-card .product-card-price, .product-card .product-card-price span { white-space: nowrap; }
/* phones and 1024–1279 (cards ~146–150px): narrower ADD so "₹1,580" stays on one line beside it */
@media (max-width: 639px), (min-width: 1024px) and (max-width: 1279px) {
  .product-card .product-card-info { padding: 8px 8px 10px; }
  .product-card .product-card-pricing { padding-right: 58px; }
  .product-card .product-card-price { font-size: 16px; }
  .product-card .product-card-add-button { right: 8px !important; padding: 6px 10px; font-size: 13px; top: calc(100% + 63px) !important; }
}

/* 15. Content column 1280 like the mock (theme .page-container: 1440 max + 40px gutters). */
@media (min-width: 768px) {
  .page-container { max-width: 1360px !important; }
  .sx .sx-wrap, .de-ftr .de-ftr__wrap { max-width: 1360px; }
  .sx-usp .sx-usp__list { max-width: 1360px; }
}

/* 16. Product rows like the mock: 6 across on desktop, 3.3 on tablets, 2.2 on phones (swiper slidesPerView "auto",
       so the slide width is ours; must match the theme's 3-class !important rule). */
.ProductGridCollection-component .recommended-theme-mode-swiper .product-swiper-slide.recommended-theme-card-swiper { width: 44% !important; margin-right: 10px !important; }
@media (min-width: 640px) {
  .ProductGridCollection-component .recommended-theme-mode-swiper .product-swiper-slide.recommended-theme-card-swiper { width: 30% !important; }
}
@media (min-width: 1024px) {
  .ProductGridCollection-component .recommended-theme-mode-swiper .product-swiper-slide.recommended-theme-card-swiper { width: calc((100% - 50px) / 6) !important; }
}

/* 17. Last section ran flush into the footer (user screenshot, 30 Oct). Mock: footer margin-top 36px; our footer
       sits inside zippy's footer wrapper, so the gap goes on the help section instead. */
.sx-help { padding-bottom: 36px !important; }

/* 18. White hairlines around the menu bar (user screenshot, 30 Oct): zippy's .desktop-header-menu has
       border-top #F0F0F0 / border-bottom #EBEBEB, made for a white header. Mock: one dark #2A2C31 divider on top. */
header.luxury-header .desktop-header-menu { border-top: 1px solid #2A2C31 !important; border-bottom: 0 !important; }

/* 19. Grey page round, found by the seam/border/gap sweep (30 Oct):
       - category slides are white boxes of uneven height (1- vs 2-line labels) → transparent slide, white rounded
         image tile with a hairline border, as in the mock;
       - section gaps were -1 / 59 / 91 px against ~40 elsewhere → USP band set off the category row,
         fixit and help top padding trimmed. */
.LargeCategoriesCardV1-component .category-swiper-slide { background: transparent !important; }
.LargeCategoriesCardV1-component .cat-card-img-container { background: #fff; border: 1px solid #E3E5E9; border-radius: 14px; overflow: hidden; }
.sx-usp { margin-top: 16px; }
@media (min-width: 1024px) { .sx-fix { padding-top: 22px; } }
.sx-help { padding-top: 0 !important; }