/* * ShoeTrend definitive header and homepage hero. * Loaded after every old theme stylesheet. */ /* ========================================================== REAL HEADER — COMPLETELY NON-STICKY ========================================================== */ /* * The original CSS contains several fixed-position selectors with * higher specificity. These selectors deliberately exceed them. */ html body.home.shoetrend-custom-theme .st-site-header, html body.home.shoetrend-standalone-home .st-site-header, html body.shoetrend-custom-theme .st-site-header, html body .st-site-header { position: static !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; z-index: 1000 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; translate: none !important; overflow: visible !important; background: radial-gradient( ellipse at 50% 22%, rgba(220, 24, 32, 0.13), transparent 48% ), linear-gradient( 180deg, #08080a 0%, #101013 53%, #1b0e12 100% ) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important; box-shadow: 0 16px 42px rgba(0, 0, 0, 0.46), 0 8px 26px rgba(145, 0, 12, 0.09) !important; } /* * Neutralize the classes added by the old scrolling script. */ html body .st-site-header.is-scrolled, html body .st-site-header.st-header-hidden, html body.home.shoetrend-custom-theme .st-site-header.is-scrolled, html body.home.shoetrend-standalone-home .st-site-header.is-scrolled { position: static !important; inset: auto !important; top: auto !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; translate: none !important; } /* * Neutralize any fixed or sticky desktop/mobile wrapper. */ html body .st-site-header .st-desktop-header, html body .st-site-header .st-mobile-header, html body .st-site-header.is-scrolled .st-desktop-header, html body .st-site-header.is-scrolled .st-mobile-header { position: static !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; translate: none !important; } /* * WordPress admin toolbar must not create a header offset. */ html body.admin-bar .st-site-header, html body.admin-bar.home.shoetrend-custom-theme .st-site-header, html body.admin-bar.home.shoetrend-standalone-home .st-site-header { position: static !important; top: auto !important; } /* ========================================================== REAL VISIT OUR STORE BAR ========================================================== */ html body .st-site-header > .st-store-bar { position: static !important; inset: auto !important; z-index: 5 !important; width: 100% !important; min-height: 36px !important; height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 20px !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; color: #ffffff !important; background: linear-gradient( 90deg, #aa0b13 0%, #dc1721 47%, #f1252f 53%, #aa0b13 100% ) !important; border: 0 !important; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.15), 0 5px 18px rgba(0, 0, 0, 0.23); font-size: 11px !important; font-weight: 850 !important; letter-spacing: 0.2em !important; line-height: 36px !important; text-align: center !important; text-transform: uppercase !important; } html body .st-site-header > .st-store-bar a { width: 100% !important; height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #ffffff !important; font: inherit !important; letter-spacing: inherit !important; line-height: 36px !important; text-align: center !important; text-transform: uppercase !important; } /* * Remove abandoned generated bars. */ html body > .st-global-store-strip, html body > .st-final-store-strip, html body > .st-header-store-strip { display: none !important; } /* ========================================================== DESKTOP LOGO ROW ========================================================== */ html body .st-brand-row { position: static !important; inset: auto !important; top: auto !important; width: 100% !important; min-height: 112px !important; height: 112px !important; display: grid !important; grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr) !important; align-items: center !important; margin: 0 !important; padding: 0 76px !important; overflow: visible !important; background: linear-gradient( 90deg, rgba(7, 7, 9, 0.99), rgba(20, 12, 15, 0.99), rgba(7, 7, 9, 0.99) ) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; transform: none !important; } html body .st-brand-row > * { position: relative !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } html body .st-brand-row > :first-child { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; } html body .st-brand-row .st-logo-link { grid-column: 2 !important; grid-row: 1 !important; justify-self: center !important; align-self: center !important; width: auto !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: visible !important; } html body .st-brand-row > :last-child { grid-column: 3 !important; grid-row: 1 !important; justify-self: end !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 22px !important; } html body .st-logo { width: 255px !important; height: auto !important; max-width: 255px !important; max-height: 94px !important; display: block !important; object-fit: contain !important; object-position: center center !important; margin: 0 auto !important; transform: none !important; filter: drop-shadow(0 9px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px rgba(220, 24, 32, 0.1)); } /* ========================================================== DESKTOP NAVIGATION ========================================================== */ html body .st-main-nav { position: static !important; inset: auto !important; top: auto !important; width: 100% !important; min-height: 48px !important; margin: 0 !important; background: linear-gradient( 90deg, #0a0a0d 0%, #1c1014 50%, #0a0a0d 100% ) !important; border-top: 1px solid rgba(255, 255, 255, 0.025) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 9px 24px rgba(0, 0, 0, 0.23) !important; transform: none !important; } html body .st-main-nav::after { position: absolute; right: 10%; bottom: -1px; left: 10%; height: 1px; background: linear-gradient( 90deg, transparent, rgba(220, 24, 32, 0.47), transparent ); content: ""; } /* ========================================================== HOMEPAGE — PUSH HERO DOWN ========================================================== */ html body.home .st-homepage, html body.shoetrend-standalone-home .st-homepage { width: 100% !important; margin: 0 !important; padding: 52px 0 0 !important; background: linear-gradient( 180deg, #1b0e12 0, #110a0d 24px, #080709 52px, #050506 52px, #050506 100% ) !important; } /* ========================================================== DESKTOP HERO ========================================================== */ /* * 1792 × 1024 = exact 7:4 ratio. * The image section retains all of its natural height. */ html body.home .st-hero-slider, html body.shoetrend-standalone-home .st-hero-slider { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 7 / 4 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #050506 !important; } html body .st-hero-slider .st-hero-slide { position: absolute !important; inset: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; } /* ========================================================== DESIGNER SLIDE ========================================================== */ /* * Display the complete designer image as the background. * The desktop hero has the exact same ratio as the image. */ html body .st-hero-slide-designers { background-color: #050506 !important; background-image: url("https://shoetrend.net/wp-content/uploads/2026/06/ChatGPT-Image-Jun-30-2026-09_50_09-PM.png") !important; background-position: center top !important; background-repeat: no-repeat !important; background-size: 100% auto !important; } /* * The duplicate image element is hidden. */ html body .st-hero-slider .st-hero-slide-designers img.st-designer-hero-image { display: none !important; } html body .st-hero-slide-designers .st-hero-slide-overlay { position: absolute !important; inset: 0 !important; z-index: 2 !important; background: linear-gradient( 90deg, rgba(0, 0, 0, 0.97) 0%, rgba(0, 0, 0, 0.86) 21%, rgba(0, 0, 0, 0.43) 42%, rgba(0, 0, 0, 0.02) 72% ), linear-gradient( 180deg, rgba(0, 0, 0, 0.02), transparent 73%, rgba(0, 0, 0, 0.27) ) !important; } html body .st-hero-slider .st-hero-slide-designers .st-hero-content { position: absolute !important; top: 57% !important; right: auto !important; bottom: auto !important; left: max(74px, calc((100vw - 1760px) / 2)) !important; z-index: 4 !important; width: min(730px, calc(100% - 148px)) !important; height: auto !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; } html body .st-hero-slide-designers h1 { max-width: 700px !important; margin: 0 !important; color: #ffffff !important; font-size: clamp(63px, 5.8vw, 108px) !important; font-weight: 760 !important; letter-spacing: -0.07em !important; line-height: 0.8 !important; } /* ========================================================== ORIGINAL SHOE SLIDE ========================================================== */ html body .st-hero-slider .st-hero-slide-original .st-hero-slide-image { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 63% center !important; transform: none !important; } html body .st-hero-slider .st-hero-slide-original .st-hero-content { position: absolute !important; top: 57% !important; right: auto !important; bottom: auto !important; left: max(74px, calc((100vw - 1760px) / 2)) !important; z-index: 4 !important; width: min(730px, calc(100% - 148px)) !important; height: auto !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; } /* ========================================================== TABLET ========================================================== */ @media (max-width: 1024px) { html body .st-brand-row, html body .st-main-nav { display: none !important; } html body .st-mobile-header, html body .st-mobile-main-row, html body .st-mobile-category-ticker, html body .st-mobile-nav, html body .st-mobile-menu-row { position: static !important; inset: auto !important; top: auto !important; transform: none !important; translate: none !important; } html body .st-mobile-main-row { width: 100% !important; min-height: 72px !important; height: 72px !important; display: grid !important; grid-template-columns: minmax(44px, 1fr) auto minmax(80px, 1fr) !important; align-items: center !important; padding: 0 16px !important; overflow: visible !important; background: linear-gradient( 90deg, rgba(7, 7, 9, 0.99), rgba(19, 11, 14, 0.99), rgba(7, 7, 9, 0.99) ) !important; } html body .st-mobile-main-row > :first-child { grid-column: 1 !important; justify-self: start !important; } html body .st-mobile-logo-link { grid-column: 2 !important; justify-self: center !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: visible !important; } html body .st-mobile-main-row > :last-child { grid-column: 3 !important; justify-self: end !important; } html body .st-mobile-logo { width: 198px !important; height: auto !important; max-width: 198px !important; max-height: 59px !important; object-fit: contain !important; margin: 0 auto !important; transform: none !important; } html body.home .st-homepage, html body.shoetrend-standalone-home .st-homepage { padding-top: 24px !important; } html body.home .st-hero-slider, html body.shoetrend-standalone-home .st-hero-slider { height: 820px !important; min-height: 820px !important; aspect-ratio: auto !important; } /* * Fill the full tablet height without cropping vertically. * Only the left and right edges may be trimmed. */ html body .st-hero-slide-designers { background-position: 62% top !important; background-size: auto 100% !important; } html body .st-hero-slider .st-hero-slide-designers .st-hero-content, html body .st-hero-slider .st-hero-slide-original .st-hero-content { top: 59% !important; left: 38px !important; width: min(620px, calc(100% - 76px)) !important; } html body .st-hero-slide-designers h1 { font-size: clamp(55px, 8vw, 88px) !important; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767px) { html body .st-site-header > .st-store-bar { min-height: 30px !important; height: 30px !important; font-size: 9px !important; line-height: 30px !important; } html body .st-site-header > .st-store-bar a { height: 30px !important; line-height: 30px !important; } html body .st-mobile-main-row { min-height: 68px !important; height: 68px !important; } html body .st-mobile-logo { width: 182px !important; max-width: 182px !important; max-height: 55px !important; } html body.home .st-homepage, html body.shoetrend-standalone-home .st-homepage { padding-top: 16px !important; } html body.home .st-hero-slider, html body.shoetrend-standalone-home .st-hero-slider { height: 790px !important; min-height: 790px !important; aspect-ratio: auto !important; } /* * Keep the full vertical composition on mobile. * Horizontal cropping is centered on the designers. */ html body .st-hero-slide-designers { background-position: 65% top !important; background-size: auto 100% !important; } html body .st-hero-slide-designers .st-hero-slide-overlay { background: linear-gradient( 180deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.04) 33%, rgba(0, 0, 0, 0.79) 72%, rgba(0, 0, 0, 0.97) 100% ), linear-gradient( 90deg, rgba(0, 0, 0, 0.25), transparent 70% ) !important; } html body .st-hero-slider .st-hero-slide-designers .st-hero-content, html body .st-hero-slider .st-hero-slide-original .st-hero-content { top: auto !important; right: 20px !important; bottom: 44px !important; left: 20px !important; width: auto !important; transform: none !important; } html body .st-hero-slide-designers h1, html body .st-hero-slide-original h1 { max-width: 100% !important; font-size: clamp(44px, 12vw, 59px) !important; line-height: 0.82 !important; } html body .st-hero-slider .st-hero-kicker { margin-bottom: 13px !important; font-size: 9px !important; } html body .st-hero-slider .st-hero-copy > p { margin: 18px 0 24px !important; font-size: 14px !important; line-height: 1.55 !important; } html body .st-hero-slider .st-primary-button { min-height: 49px !important; padding: 0 22px !important; } } /* SHOETREND EXACT DESKTOP NAV START */ /* * Desktop only. * Mobile header, mobile logo and mobile ticker are untouched. */ @media (min-width: 1025px) { /* * The header stays non-sticky but creates a stacking layer * above the homepage hero. */ html body .st-site-header { position: relative !important; z-index: 100000 !important; overflow: visible !important; isolation: auto !important; } html body .st-desktop-header { position: relative !important; z-index: 100010 !important; overflow: visible !important; contain: none !important; clip-path: none !important; } html body .st-main-nav { position: relative !important; z-index: 100020 !important; display: block !important; overflow: visible !important; contain: none !important; clip-path: none !important; } html body .st-main-nav .st-nav-list { position: relative !important; z-index: 100030 !important; width: 100% !important; min-height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: clamp(24px, 3vw, 56px) !important; margin: 0 !important; padding: 0 28px !important; overflow: visible !important; contain: none !important; clip-path: none !important; } html body .st-main-nav .st-nav-item { position: relative !important; z-index: 100040 !important; min-height: 48px !important; display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; contain: none !important; clip-path: none !important; } html body .st-main-nav .st-nav-link { min-height: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 0 !important; color: rgba(255, 255, 255, 0.92) !important; background: transparent !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.11em !important; line-height: 1 !important; text-transform: uppercase !important; white-space: nowrap !important; } html body .st-main-nav .st-nav-chevron { width: 12px !important; height: 8px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: transform 0.22s ease !important; } html body .st-main-nav .st-nav-chevron svg { width: 10px !important; height: 7px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.4 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } html body .st-main-nav .st-nav-item-has-children:hover .st-nav-chevron, html body .st-main-nav .st-nav-item-has-children:focus-within .st-nav-chevron { transform: rotate(180deg) !important; } /* * Exact dropdown generated by functions.php. */ html body .st-main-nav .st-nav-dropdown { position: absolute !important; top: calc(100% - 1px) !important; right: auto !important; bottom: auto !important; left: 50% !important; z-index: 2147483000 !important; width: max-content !important; min-width: 245px !important; max-width: 330px !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 12px 0 !important; overflow: visible !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translate(-50%, 12px) !important; background: linear-gradient( 145deg, rgba(31, 20, 24, 0.995), rgba(8, 8, 10, 0.995) ) !important; border: 1px solid rgba(255, 255, 255, 0.13) !important; border-top: 2px solid #dc1820 !important; border-radius: 0 0 8px 8px !important; box-shadow: 0 28px 65px rgba(0, 0, 0, 0.68), 0 10px 30px rgba(220, 24, 32, 0.17) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; contain: none !important; clip: auto !important; clip-path: none !important; transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease !important; } /* * Invisible bridge prevents the menu closing while the pointer * moves from the category link into the dropdown. */ html body .st-main-nav .st-nav-dropdown::before { position: absolute; right: 0; bottom: 100%; left: 0; height: 12px; content: ""; } html body .st-main-nav .st-nav-item-has-children:hover > .st-nav-dropdown, html body .st-main-nav .st-nav-item-has-children:focus-within > .st-nav-dropdown { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translate(-50%, 0) !important; } html body .st-main-nav .st-nav-dropdown-link { width: 100% !important; min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; margin: 0 !important; padding: 11px 20px !important; color: rgba(255, 255, 255, 0.84) !important; background: transparent !important; border: 0 !important; font-size: 11px !important; font-weight: 750 !important; letter-spacing: 0.09em !important; line-height: 1.4 !important; text-align: left !important; text-transform: uppercase !important; white-space: nowrap !important; opacity: 1 !important; visibility: visible !important; transition: color 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease !important; } html body .st-main-nav .st-nav-dropdown-link:hover, html body .st-main-nav .st-nav-dropdown-link:focus { color: #ffffff !important; background: linear-gradient( 90deg, rgba(220, 24, 32, 0.24), rgba(220, 24, 32, 0.035) ) !important; padding-left: 26px !important; } html body .st-main-nav .st-dropdown-arrow { color: #ed3037 !important; font-size: 15px !important; transition: transform 0.2s ease !important; } html body .st-main-nav .st-nav-dropdown-link:hover .st-dropdown-arrow { transform: translateX(4px) !important; } /* * Keep Accessories dropdown inside the viewport. */ html body .st-main-nav .st-nav-item:nth-last-child(2) > .st-nav-dropdown { right: 0 !important; left: auto !important; transform: translateY(12px) !important; } html body .st-main-nav .st-nav-item:nth-last-child(2):hover > .st-nav-dropdown, html body .st-main-nav .st-nav-item:nth-last-child(2):focus-within > .st-nav-dropdown { transform: translateY(0) !important; } /* * Mega Sale keeps its existing red CTA styling. */ html body .st-main-nav .st-sale-item { overflow: visible !important; } /* * The hero stays under the menu. */ html body.home .st-homepage, html body.shoetrend-standalone-home .st-homepage, html body.home .st-hero-slider, html body.shoetrend-standalone-home .st-hero-slider { position: relative !important; z-index: 1 !important; } } /* SHOETREND EXACT DESKTOP NAV END */ /* SHOETREND BODY DROPDOWN PORTAL START */ /* * Desktop only. * The original submenu remains available in the HTML for JavaScript, * but is hidden visually because its parent container is being clipped. */ @media (min-width: 1025px) { html body .st-main-nav .st-nav-item-has-children > .st-nav-dropdown { display: none !important; } /* * This dropdown is inserted directly under BODY. * No header, navigation, slider or hero container can clip it. */ html body > .st-desktop-dropdown-portal { position: fixed !important; top: 0; right: auto; bottom: auto; left: 0; z-index: 2147483647 !important; width: 280px !important; min-width: 245px !important; max-width: calc(100vw - 24px) !important; height: auto !important; min-height: 0 !important; max-height: calc(100vh - 20px) !important; display: none !important; margin: 0 !important; padding: 12px 0 !important; overflow-x: hidden !important; overflow-y: auto !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(8px) !important; background: linear-gradient( 145deg, rgba(31, 20, 24, 0.995), rgba(8, 8, 10, 0.995) ) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-top: 3px solid #dc1820 !important; border-radius: 0 0 9px 9px !important; box-shadow: 0 30px 75px rgba(0, 0, 0, 0.72), 0 12px 35px rgba(220, 24, 32, 0.18) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; clip: auto !important; clip-path: none !important; contain: none !important; transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease !important; } html body > .st-desktop-dropdown-portal.is-open { display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; } /* * Remove any inherited hidden/collapsed styling from cloned content. */ html body > .st-desktop-dropdown-portal * { opacity: 1 !important; visibility: visible !important; max-height: none !important; clip: auto !important; clip-path: none !important; contain: none !important; } html body > .st-desktop-dropdown-portal ul { width: 100% !important; height: auto !important; display: block !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; list-style: none !important; } html body > .st-desktop-dropdown-portal li { width: 100% !important; height: auto !important; min-height: 0 !important; display: block !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; list-style: none !important; } html body > .st-desktop-dropdown-portal a { width: 100% !important; min-height: 46px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; margin: 0 !important; padding: 12px 21px !important; color: rgba(255, 255, 255, 0.86) !important; background: transparent !important; border: 0 !important; font-size: 11px !important; font-weight: 750 !important; letter-spacing: 0.09em !important; line-height: 1.4 !important; text-align: left !important; text-decoration: none !important; text-transform: uppercase !important; white-space: nowrap !important; transition: color 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease !important; } html body > .st-desktop-dropdown-portal a:hover, html body > .st-desktop-dropdown-portal a:focus { color: #ffffff !important; background: linear-gradient( 90deg, rgba(220, 24, 32, 0.26), rgba(220, 24, 32, 0.035) ) !important; padding-left: 27px !important; outline: none !important; } html body > .st-desktop-dropdown-portal .st-dropdown-arrow { color: #ed3037 !important; font-size: 15px !important; transition: transform 0.2s ease !important; } html body > .st-desktop-dropdown-portal a:hover .st-dropdown-arrow { transform: translateX(4px) !important; } } /* SHOETREND BODY DROPDOWN PORTAL END */ /* SHOETREND MEGA SALE CTA START */ /* * Desktop only. * Mobile navigation remains completely unchanged. */ @media (min-width: 1025px) { html body .st-main-nav .st-sale-item { position: relative !important; min-height: 52px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-left: 5px !important; overflow: visible !important; isolation: isolate; } /* * Premium Mega Sale CTA. */ html body .st-main-nav .st-sale-item > .st-mega-sale-link, html body .st-main-nav .st-sale-item > .st-nav-link { position: relative !important; z-index: 2 !important; min-width: 174px !important; min-height: 46px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 30px !important; overflow: hidden !important; color: #ffffff !important; background: linear-gradient( 135deg, #ff3039 0%, #dd151e 45%, #a90810 100% ) !important; border: 1px solid rgba(255, 255, 255, 0.24) !important; border-radius: 999px !important; box-shadow: 0 0 0 1px rgba(220, 24, 32, 0.2), 0 0 20px rgba(220, 24, 32, 0.44), 0 10px 30px rgba(220, 24, 32, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(90, 0, 5, 0.35) !important; font-size: 12px !important; font-weight: 900 !important; letter-spacing: 0.17em !important; line-height: 1 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.28) !important; text-transform: uppercase !important; white-space: nowrap !important; transform: translateY(0) scale(1) !important; animation: st-mega-sale-glow 2.8s ease-in-out infinite !important; transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important; } /* * Animated shine crossing the button. */ html body .st-main-nav .st-sale-item > .st-mega-sale-link::before, html body .st-main-nav .st-sale-item > .st-nav-link::before { position: absolute; top: -40%; bottom: -40%; left: -60%; z-index: -1; width: 38%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.38), transparent ); content: ""; transform: skewX(-22deg); animation: st-mega-sale-shine 3.6s ease-in-out infinite; } /* * Remove old navigation underline styling. */ html body .st-main-nav .st-sale-item > .st-mega-sale-link::after, html body .st-main-nav .st-sale-item > .st-nav-link::after { display: none !important; } /* * Stronger hover state. */ html body .st-main-nav .st-sale-item > .st-mega-sale-link:hover, html body .st-main-nav .st-sale-item > .st-mega-sale-link:focus, html body .st-main-nav .st-sale-item > .st-nav-link:hover, html body .st-main-nav .st-sale-item > .st-nav-link:focus { color: #ffffff !important; background: linear-gradient( 135deg, #ff4b53 0%, #f01d27 48%, #c10d15 100% ) !important; border-color: rgba(255, 255, 255, 0.4) !important; box-shadow: 0 0 0 1px rgba(255, 50, 60, 0.28), 0 0 32px rgba(240, 25, 36, 0.68), 0 16px 38px rgba(220, 24, 32, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.32) !important; transform: translateY(-3px) scale(1.045) !important; animation-play-state: paused !important; } @keyframes st-mega-sale-glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(220, 24, 32, 0.18), 0 0 17px rgba(220, 24, 32, 0.36), 0 10px 28px rgba(220, 24, 32, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(90, 0, 5, 0.35); } 50% { box-shadow: 0 0 0 2px rgba(236, 38, 47, 0.25), 0 0 29px rgba(236, 38, 47, 0.62), 0 13px 34px rgba(220, 24, 32, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(90, 0, 5, 0.35); } } @keyframes st-mega-sale-shine { 0%, 62% { left: -60%; opacity: 0; } 70% { opacity: 1; } 88%, 100% { left: 125%; opacity: 0; } } } /* * Accessibility: disable movement when reduced motion is requested. */ @media (prefers-reduced-motion: reduce) and (min-width: 1025px) { html body .st-main-nav .st-sale-item > .st-mega-sale-link, html body .st-main-nav .st-sale-item > .st-nav-link, html body .st-main-nav .st-sale-item > .st-mega-sale-link::before, html body .st-main-nav .st-sale-item > .st-nav-link::before { animation: none !important; } } /* SHOETREND MEGA SALE CTA END */ /* SHOETREND BORDEAUX PALETTE START */ :root { --st-brand-bordeaux: #781a27; --st-brand-bordeaux-light: #9a2636; --st-brand-bordeaux-dark: #4c1019; --st-brand-charcoal: #232326; --st-brand-charcoal-deep: #171719; } /* * Header shifts from pure black to deep charcoal. */ html body .st-site-header { background: radial-gradient( ellipse at 50% 24%, rgba(120, 26, 39, 0.17), transparent 48% ), linear-gradient( 180deg, #171719 0%, #222225 53%, #201419 100% ) !important; } html body .st-brand-row { background: linear-gradient( 90deg, #18181b, #252024, #18181b ) !important; } html body .st-main-nav { background: linear-gradient( 90deg, #18181b 0%, #26191e 50%, #18181b 100% ) !important; } /* * Real top announcement bar. */ html body .st-site-header > .st-store-bar { background: linear-gradient( 90deg, #54111a 0%, #781a27 48%, #942536 52%, #54111a 100% ) !important; } /* * Main buttons and CTAs. */ html body .st-primary-button, html body .st-red-button, html body .st-contact-primary-button, html body .st-contact-submit, html body .st-main-nav .st-sale-item > .st-nav-link, html body .st-main-nav .st-sale-item > .st-mega-sale-link { background: linear-gradient( 135deg, var(--st-brand-bordeaux-light), var(--st-brand-bordeaux-dark) ) !important; box-shadow: 0 12px 31px rgba(76, 16, 25, 0.35) !important; } html body .st-primary-button:hover, html body .st-red-button:hover, html body .st-contact-primary-button:hover, html body .st-contact-submit:hover, html body .st-main-nav .st-sale-item > .st-nav-link:hover, html body .st-main-nav .st-sale-item > .st-mega-sale-link:hover { background: linear-gradient( 135deg, #aa3042, #681521 ) !important; box-shadow: 0 17px 40px rgba(76, 16, 25, 0.5) !important; } /* * Accent wording and dropdown details. */ html body .st-hero-kicker, html body .st-editorial-kicker, html body .st-contact-kicker, html body .st-dropdown-arrow { color: var(--st-brand-bordeaux-light) !important; } html body > .st-desktop-dropdown-portal { border-top-color: var(--st-brand-bordeaux-light) !important; background: linear-gradient( 145deg, rgba(43, 31, 36, 0.995), rgba(24, 24, 27, 0.995) ) !important; box-shadow: 0 30px 75px rgba(0, 0, 0, 0.68), 0 12px 35px rgba(76, 16, 25, 0.27) !important; } html body > .st-desktop-dropdown-portal a:hover { background: linear-gradient( 90deg, rgba(120, 26, 39, 0.34), rgba(120, 26, 39, 0.045) ) !important; } /* SHOETREND BORDEAUX PALETTE END */ /* SHOETREND HOMEPAGE BORDEAUX FINAL START */ :root { --st-home-bordeaux: #7b1f2d; --st-home-bordeaux-light: #a02e40; --st-home-bordeaux-dark: #4d111b; --st-home-charcoal: #222226; --st-home-charcoal-soft: #29292e; --st-home-charcoal-deep: #18181b; --st-home-white: #f7f7f8; --st-home-muted: #aaaab0; --st-home-border: rgba(255, 255, 255, 0.10); } /* ========================================================== HOMEPAGE BASE PALETTE ========================================================== */ html body.home, html body.shoetrend-standalone-home, html body.home .st-homepage, html body.shoetrend-standalone-home .st-homepage { color: var(--st-home-white) !important; background: var(--st-home-charcoal-deep) !important; } /* * Replace pure black section backgrounds while keeping image * sections and hero photography untouched. */ html body.home .st-homepage section[class*="authentic"], html body.home .st-homepage section[class*="standard"], html body.home .st-homepage section[class*="editorial"], html body.home .st-homepage section[class*="story"], html body.home .st-homepage section[class*="category"], html body.home .st-homepage section[class*="collection"], html body.home .st-homepage section[class*="lifestyle"], html body.shoetrend-standalone-home .st-homepage section[class*="authentic"], html body.shoetrend-standalone-home .st-homepage section[class*="standard"], html body.shoetrend-standalone-home .st-homepage section[class*="editorial"], html body.shoetrend-standalone-home .st-homepage section[class*="story"], html body.shoetrend-standalone-home .st-homepage section[class*="category"], html body.shoetrend-standalone-home .st-homepage section[class*="collection"], html body.shoetrend-standalone-home .st-homepage section[class*="lifestyle"] { color: var(--st-home-white) !important; background-color: var(--st-home-charcoal) !important; } /* ========================================================== HEADER COLORS ========================================================== */ html body .st-site-header { background: radial-gradient( ellipse at 50% 24%, rgba(123, 31, 45, 0.18), transparent 48% ), linear-gradient( 180deg, #18181b 0%, #222226 54%, #25171c 100% ) !important; } html body .st-site-header > .st-store-bar { background: linear-gradient( 90deg, var(--st-home-bordeaux-dark) 0%, var(--st-home-bordeaux) 48%, var(--st-home-bordeaux-light) 52%, var(--st-home-bordeaux-dark) 100% ) !important; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.14), 0 7px 22px rgba(77, 17, 27, 0.25) !important; } html body .st-brand-row { background: linear-gradient( 90deg, #19191c 0%, #282126 50%, #19191c 100% ) !important; } html body .st-main-nav { background: linear-gradient( 90deg, #19191c 0%, #2a1b21 50%, #19191c 100% ) !important; } html body .st-main-nav::after { background: linear-gradient( 90deg, transparent, rgba(160, 46, 64, 0.58), transparent ) !important; } /* ========================================================== HERO AND BUTTON ACCENTS ========================================================== */ html body.home .st-hero-kicker, html body.shoetrend-standalone-home .st-hero-kicker, html body.home [class*="kicker"], html body.shoetrend-standalone-home [class*="kicker"] { color: var(--st-home-bordeaux-light) !important; } html body.home .st-primary-button, html body.home .st-red-button, html body.home .st-hero-button, html body.shoetrend-standalone-home .st-primary-button, html body.shoetrend-standalone-home .st-red-button, html body.shoetrend-standalone-home .st-hero-button { color: #ffffff !important; background: linear-gradient( 135deg, var(--st-home-bordeaux-light), var(--st-home-bordeaux-dark) ) !important; border-color: rgba(255, 255, 255, 0.17) !important; box-shadow: 0 13px 33px rgba(77, 17, 27, 0.38) !important; } html body.home .st-primary-button:hover, html body.home .st-red-button:hover, html body.home .st-hero-button:hover, html body.shoetrend-standalone-home .st-primary-button:hover, html body.shoetrend-standalone-home .st-red-button:hover, html body.shoetrend-standalone-home .st-hero-button:hover { background: linear-gradient( 135deg, #ac3547, #651621 ) !important; box-shadow: 0 18px 43px rgba(77, 17, 27, 0.55) !important; } /* ========================================================== MEGA SALE CTA ========================================================== */ @media (min-width: 1025px) { html body .st-main-nav .st-sale-item > .st-mega-sale-link, html body .st-main-nav .st-sale-item > .st-nav-link { background: linear-gradient( 135deg, #a83446 0%, var(--st-home-bordeaux) 47%, var(--st-home-bordeaux-dark) 100% ) !important; border-color: rgba(255, 255, 255, 0.22) !important; box-shadow: 0 0 0 1px rgba(123, 31, 45, 0.22), 0 0 21px rgba(123, 31, 45, 0.46), 0 12px 31px rgba(77, 17, 27, 0.43), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important; } html body .st-main-nav .st-sale-item > .st-mega-sale-link:hover, html body .st-main-nav .st-sale-item > .st-nav-link:hover { background: linear-gradient( 135deg, #bd4255, #8f2637, #5a131e ) !important; box-shadow: 0 0 0 1px rgba(160, 46, 64, 0.3), 0 0 33px rgba(160, 46, 64, 0.62), 0 17px 41px rgba(77, 17, 27, 0.5) !important; } } /* ========================================================== DESKTOP DROPDOWN PORTAL ========================================================== */ html body > .st-desktop-dropdown-portal { background: linear-gradient( 145deg, rgba(45, 32, 37, 0.995), rgba(25, 25, 28, 0.995) ) !important; border-top-color: var(--st-home-bordeaux-light) !important; box-shadow: 0 30px 75px rgba(0, 0, 0, 0.68), 0 12px 35px rgba(77, 17, 27, 0.32) !important; } html body > .st-desktop-dropdown-portal a:hover { background: linear-gradient( 90deg, rgba(123, 31, 45, 0.38), rgba(123, 31, 45, 0.045) ) !important; } html body > .st-desktop-dropdown-portal .st-dropdown-arrow { color: var(--st-home-bordeaux-light) !important; } /* ========================================================== COMPACT WHO WE ARE ========================================================== */ .st-compact-who { position: relative; width: 100%; padding: 78px 0; overflow: hidden; color: var(--st-home-white); background: radial-gradient( circle at 15% 50%, rgba(123, 31, 45, 0.18), transparent 31% ), linear-gradient( 135deg, #202024, #29292e 54%, #1c1c1f ); border-top: 1px solid var(--st-home-border); border-bottom: 1px solid var(--st-home-border); } .st-compact-who::before { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: linear-gradient( 180deg, var(--st-home-bordeaux-light), var(--st-home-bordeaux-dark) ); content: ""; } .st-compact-who::after { position: absolute; top: -180px; right: -130px; width: 390px; height: 390px; border: 1px solid rgba(160, 46, 64, 0.2); border-radius: 50%; content: ""; pointer-events: none; } .st-compact-who-shell { position: relative; z-index: 2; width: min(1320px, calc(100% - 56px)); display: grid; grid-template-columns: 0.68fr 1.32fr; gap: clamp(50px, 7vw, 115px); align-items: start; margin: 0 auto; } .st-compact-who-heading { position: relative; padding-right: 35px; border-right: 1px solid rgba(255, 255, 255, 0.11); } .st-compact-who-kicker { display: block; margin-bottom: 17px; color: var(--st-home-bordeaux-light); font-size: 10px; font-weight: 850; letter-spacing: 0.22em; line-height: 1.4; text-transform: uppercase; } .st-compact-who-heading h2 { max-width: 500px; margin: 0 !important; color: var(--st-home-white) !important; font-size: clamp(43px, 4.3vw, 68px); font-weight: 720; letter-spacing: -0.06em; line-height: 0.88; text-transform: uppercase; } .st-compact-who-year { display: inline-flex; margin-top: 28px; padding: 9px 13px; color: rgba(255, 255, 255, 0.68); background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .st-compact-who-story { columns: 2; column-gap: 46px; color: var(--st-home-muted); } .st-compact-who-story p { margin: 0 0 17px; break-inside: avoid; color: var(--st-home-muted) !important; font-size: 14px; line-height: 1.72; } .st-compact-who-story .st-compact-who-intro { color: var(--st-home-white) !important; font-size: 18px; font-weight: 560; line-height: 1.58; } .st-compact-who-story .st-compact-who-closing { color: #d7d7da !important; font-weight: 600; } /* ========================================================== FOOTER ACCENTS ========================================================== */ html body.home footer a:hover, html body.home .st-home-footer a:hover, html body.shoetrend-standalone-home footer a:hover, html body.shoetrend-standalone-home .st-home-footer a:hover { color: var(--st-home-bordeaux-light) !important; } html body.home footer [class*="accent"], html body.home footer [class*="kicker"], html body.home .st-home-footer [class*="accent"], html body.shoetrend-standalone-home footer [class*="accent"], html body.shoetrend-standalone-home footer [class*="kicker"] { color: var(--st-home-bordeaux-light) !important; } /* ========================================================== RESPONSIVE WHO WE ARE ========================================================== */ @media (max-width: 900px) { .st-compact-who-shell { grid-template-columns: 1fr; gap: 38px; } .st-compact-who-heading { padding-right: 0; padding-bottom: 35px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.11); } } @media (max-width: 767px) { .st-compact-who { padding: 62px 0; } .st-compact-who-shell { width: calc(100% - 32px); } .st-compact-who-heading h2 { font-size: 46px; } .st-compact-who-story { columns: 1; } .st-compact-who-story .st-compact-who-intro { font-size: 17px; } } /* SHOETREND HOMEPAGE BORDEAUX FINAL END */ /* SHOETREND STATIC MOBILE AND DESKTOP MENU START */ /* ========================================================== DESKTOP MENU WITH EXTRA ITEMS ========================================================== */ @media (min-width: 1025px) { html body .st-main-nav .st-nav-list { gap: clamp(12px, 1.55vw, 29px) !important; padding-right: 22px !important; padding-left: 22px !important; } html body .st-main-nav .st-nav-link { font-size: 10.5px !important; letter-spacing: 0.095em !important; } html body .st-main-nav .st-sale-item > .st-mega-sale-link { min-width: 158px !important; padding-right: 24px !important; padding-left: 24px !important; } } /* ========================================================== FIXED MOBILE MENU ========================================================== */ @media (max-width: 1024px) { html body .st-mobile-category-ticker { position: relative !important; width: 100% !important; height: auto !important; min-height: 82px !important; display: block !important; margin: 0 !important; padding: 7px 10px 9px !important; overflow: visible !important; animation: none !important; transform: none !important; background: linear-gradient( 90deg, #19191c, #291a20, #19191c ) !important; border-top: 1px solid rgba(255, 255, 255, 0.04) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important; } html body .st-mobile-category-ticker > *:not(.st-mobile-static-nav) { display: none !important; } html body .st-mobile-category-ticker [class*="track"], html body .st-mobile-category-ticker [class*="marquee"], html body .st-mobile-category-ticker [class*="group"] { animation: none !important; transform: none !important; } html body .st-mobile-static-nav { width: 100% !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; animation: none !important; transform: none !important; } html body .st-mobile-static-link { min-width: 0 !important; min-height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 5px 4px !important; color: rgba(255, 255, 255, 0.88) !important; background: rgba(255, 255, 255, 0.035) !important; border: 1px solid rgba(255, 255, 255, 0.075) !important; border-radius: 4px !important; font-size: 8.5px !important; font-weight: 800 !important; letter-spacing: 0.07em !important; line-height: 1.15 !important; text-align: center !important; text-decoration: none !important; text-transform: uppercase !important; white-space: nowrap !important; animation: none !important; transform: none !important; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease !important; } html body .st-mobile-static-link:hover, html body .st-mobile-static-link:focus { color: #ffffff !important; background: rgba(123, 31, 45, 0.28) !important; border-color: rgba(160, 46, 64, 0.45) !important; } html body .st-mobile-static-sale { color: #ffffff !important; background: linear-gradient( 135deg, #a02e40, #4d111b ) !important; border-color: rgba(255, 255, 255, 0.17) !important; box-shadow: 0 5px 15px rgba(77, 17, 27, 0.35) !important; } } @media (max-width: 420px) { html body .st-mobile-category-ticker { min-height: 78px !important; padding-right: 7px !important; padding-left: 7px !important; } html body .st-mobile-static-nav { gap: 5px !important; } html body .st-mobile-static-link { min-height: 30px !important; padding-right: 2px !important; padding-left: 2px !important; font-size: 7.6px !important; letter-spacing: 0.045em !important; } } /* SHOETREND STATIC MOBILE AND DESKTOP MENU END */ /* SHOETREND AUTHENTICITY STRIP BORDEAUX START */ /* * Homepage strip: * 100% Original / Always New / Since 2006 / Visit Our Store */ html body .st-authenticity-strip-bordeaux { position: relative !important; background: linear-gradient( 105deg, #54111a 0%, #6b1723 25%, #7b1f2d 52%, #8e293a 76%, #5a131d 100% ) !important; border-top: 1px solid rgba(255, 255, 255, 0.10) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.24), 0 14px 38px rgba(77, 17, 27, 0.20) !important; } /* * Remove the old bright-red backgrounds from the individual columns. */ html body .st-authenticity-strip-bordeaux > * { background: rgba(255, 255, 255, 0.015) !important; border-color: rgba(255, 255, 255, 0.14) !important; } html body .st-authenticity-strip-bordeaux [class*="item"], html body .st-authenticity-strip-bordeaux [class*="card"], html body .st-authenticity-strip-bordeaux [class*="column"], html body .st-authenticity-strip-bordeaux [class*="cell"] { background: transparent !important; border-color: rgba(255, 255, 255, 0.14) !important; } /* * Preserve strong white headings and softer supporting copy. */ html body .st-authenticity-strip-bordeaux h2, html body .st-authenticity-strip-bordeaux h3, html body .st-authenticity-strip-bordeaux h4, html body .st-authenticity-strip-bordeaux strong, html body .st-authenticity-strip-bordeaux a { color: #ffffff !important; } html body .st-authenticity-strip-bordeaux p, html body .st-authenticity-strip-bordeaux small, html body .st-authenticity-strip-bordeaux span { border-color: rgba(255, 255, 255, 0.14) !important; } html body .st-authenticity-strip-bordeaux p, html body .st-authenticity-strip-bordeaux small { color: rgba(255, 255, 255, 0.80) !important; } /* * Premium hover effect for the Visit Our Store/Shop section. */ html body .st-authenticity-strip-bordeaux a:hover { color: #ffffff !important; background: rgba(255, 255, 255, 0.055) !important; } /* * Mobile keeps the same layout and only receives the color update. */ @media (max-width: 767px) { html body .st-authenticity-strip-bordeaux { background: linear-gradient( 145deg, #54111a, #7b1f2d 55%, #5a131d ) !important; } } /* SHOETREND AUTHENTICITY STRIP BORDEAUX END */ /* SHOETREND APPAREL NESTED FINAL START */ /* ========================================================== THREE HOMEPAGE CATEGORY CARDS ========================================================== */ @media (min-width: 1025px) { html body.home .st-category-rail, html body.shoetrend-standalone-home .st-category-rail { width: 100% !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(22px, 2vw, 34px) !important; align-items: start !important; padding-right: clamp(28px, 2.7vw, 52px) !important; padding-left: clamp(28px, 2.7vw, 52px) !important; } html body.home .st-category-rail > a, html body.shoetrend-standalone-home .st-category-rail > a { width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; } html body.home .st-category-rail > a img, html body.shoetrend-standalone-home .st-category-rail > a img { width: 100% !important; height: auto !important; display: block !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; object-position: center !important; } } /* ========================================================== TOPS / BOTTOMS AND THEIR CHILDREN ========================================================== */ html body > .st-desktop-dropdown-portal { width: 310px !important; } html body > .st-desktop-dropdown-portal .st-nav-dropdown-group { width: 100% !important; display: block !important; margin: 0 !important; padding: 0 0 7px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } html body > .st-desktop-dropdown-portal .st-nav-dropdown-group:last-child { padding-bottom: 0 !important; border-bottom: 0 !important; } html body > .st-desktop-dropdown-portal .st-nav-dropdown-parent { min-height: 45px !important; color: #ffffff !important; font-size: 11px !important; font-weight: 850 !important; letter-spacing: 0.11em !important; } html body > .st-desktop-dropdown-portal .st-nav-dropdown-children { width: 100% !important; display: grid !important; gap: 0 !important; margin: 0 !important; padding: 0 0 4px !important; } html body > .st-desktop-dropdown-portal .st-nav-dropdown-sublink { position: relative; min-height: 34px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; padding: 7px 20px 7px 36px !important; color: rgba(255, 255, 255, 0.65) !important; background: transparent !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 0.09em !important; line-height: 1.35 !important; } html body > .st-desktop-dropdown-portal .st-nav-dropdown-sublink::before { position: absolute; left: 22px; width: 4px; height: 4px; background: var(--st-home-bordeaux-light, #a02e40); border-radius: 50%; content: ""; } html body > .st-desktop-dropdown-portal .st-nav-dropdown-sublink:hover, html body > .st-desktop-dropdown-portal .st-nav-dropdown-sublink:focus { color: #ffffff !important; padding-left: 41px !important; background: linear-gradient( 90deg, rgba(123, 31, 45, 0.28), transparent ) !important; } /* * Keep the source dropdown structure available for the portal clone. */ html body .st-main-nav .st-nav-dropdown-group, html body .st-main-nav .st-nav-dropdown-children { width: 100%; } /* * The fixed mobile menu is intentionally unchanged. */ /* SHOETREND APPAREL NESTED FINAL END */