/* === YARDCRAFT HOME STYLES === */ #gth-hero-widget, #gth-hero-widget * { box-sizing: border-box !important; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } #gth-hero-widget .ghw-section { padding: 24px !important; background: transparent !important; } /* ---------- CARD ---------- */ #gth-hero-widget .ghw-slider { position: relative !important; max-width: 1240px; margin: 0 auto !important; border-radius: 26px !important; overflow: hidden !important; isolation: isolate !important; background: radial-gradient(circle at 82% 15%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 40%), linear-gradient(135deg, #2a3ed6 0%, #24308f 55%, #141b52 100%) !important; box-shadow: 0 28px 70px -24px rgba(20,27,82,0.6) !important; } #gth-hero-widget .ghw-slider::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 4px !important; z-index: 5 !important; background: linear-gradient(90deg, #141b52, #6f8ff0, #ffffff, #6f8ff0, #141b52) !important; background-size: 200% 100% !important; animation: ghw-bar 6s linear infinite !important; } #gth-hero-widget .ghw-slider::after { content: "" !important; position: absolute !important; top: 0 !important; left: -60% !important; width: 40% !important; height: 100% !important; z-index: 3 !important; pointer-events: none !important; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.07), transparent) !important; transform: skewX(-18deg) !important; animation: ghw-sweep 8s ease-in-out infinite !important; } #gth-hero-widget .ghw-grid { position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px) !important; background-size: 44px 44px !important; -webkit-mask-image: radial-gradient(ellipse at 30% 50%, #000 0%, transparent 70%) !important; mask-image: radial-gradient(ellipse at 30% 50%, #000 0%, transparent 70%) !important; animation: ghw-grid 20s linear infinite !important; } #gth-hero-widget .ghw-orb { position: absolute !important; border-radius: 50% !important; filter: blur(60px) !important; z-index: 0 !important; pointer-events: none !important; } #gth-hero-widget .ghw-orb-1 { width: 380px !important; height: 380px !important; top: -140px !important; right: -60px !important; background: rgba(108,143,255,0.45) !important; animation: ghw-orb 12s ease-in-out infinite !important; } #gth-hero-widget .ghw-orb-2 { width: 260px !important; height: 260px !important; bottom: -120px !important; left: 25% !important; background: rgba(76,110,245,0.35) !important; animation: ghw-orb 15s ease-in-out infinite reverse !important; } #gth-hero-widget .ghw-wm { position: absolute !important; left: 28px !important; bottom: -44px !important; z-index: 0 !important; font-size: 170px !important; font-weight: 900 !important; letter-spacing: -5px !important; line-height: 1 !important; color: rgba(255,255,255,0.035) !important; pointer-events: none !important; user-select: none !important; } #gth-hero-widget .ghw-leaf { position: absolute !important; z-index: 0 !important; fill: rgba(255,255,255,0.07) !important; pointer-events: none !important; } #gth-hero-widget .ghw-leaf.lf1 { width: 90px !important; height: 90px !important; top: 30px !important; left: 46% !important; animation: ghw-sway 8s ease-in-out infinite !important; } #gth-hero-widget .ghw-leaf.lf2 { width: 60px !important; height: 60px !important; bottom: 40px !important; right: 3% !important; animation: ghw-sway 7s ease-in-out -3s infinite !important; } #gth-hero-widget .ghw-slide { position: relative !important; z-index: 2 !important; display: grid !important; grid-template-columns: 1.05fr 0.95fr !important; gap: 40px !important; align-items: center !important; padding: 58px 52px !important; } /* ---------- REVEAL ---------- */ #gth-hero-widget .ghw-rv { opacity: 0; transform: translateY(22px); animation: ghw-up .8s cubic-bezier(.2,.8,.2,1) forwards !important; } #gth-hero-widget .d1 { animation-delay: .05s !important; } #gth-hero-widget .d2 { animation-delay: .17s !important; } #gth-hero-widget .d3 { animation-delay: .29s !important; } #gth-hero-widget .d4 { animation-delay: .41s !important; } #gth-hero-widget .d5 { animation-delay: .53s !important; } #gth-hero-widget .d6 { animation-delay: .65s !important; } /* ---------- TEXT ---------- */ #gth-hero-widget .ghw-content { position: relative !important; z-index: 1; min-width: 0 !important; } #gth-hero-widget .ghw-top { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px 16px !important; margin-bottom: 24px !important; } #gth-hero-widget .ghw-brand { display: flex !important; align-items: center !important; gap: 10px !important; } #gth-hero-widget .ghw-brand-mark { position: relative !important; width: 36px !important; height: 36px !important; border-radius: 10px !important; background: linear-gradient(135deg, #ffffff, #dbe3ff) !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 8px 20px -6px rgba(0,0,0,0.4) !important; } #gth-hero-widget .ghw-brand-mark::after { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 13px !important; border: 2px solid rgba(255,255,255,0.35) !important; animation: ghw-ring 2.4s ease-out infinite !important; } #gth-hero-widget .ghw-brand-mark svg { width: 19px !important; height: 19px !important; display: block !important; } #gth-hero-widget .ghw-brand-name { color: #ffffff !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: 3px !important; text-transform: uppercase !important; } #gth-hero-widget .ghw-brand-name span { color: #9fb4ff !important; font-weight: 600 !important; letter-spacing: 2px !important; } #gth-hero-widget .ghw-badge { display: inline-flex !important; align-items: center !important; gap: 9px !important; background: rgba(255,255,255,0.1) !important; border: 1px solid rgba(255,255,255,0.28) !important; color: #ffffff !important; font-size: 12.5px !important; font-weight: 600 !important; padding: 7px 14px 7px 11px !important; border-radius: 999px !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } #gth-hero-widget .ghw-live { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #4ade80 !important; animation: ghw-ping 1.8s ease-out infinite !important; } #gth-hero-widget .ghw-eyebrow-row { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 14px !important; } #gth-hero-widget .ghw-rule { display: block !important; width: 28px !important; height: 2px !important; background: #6f8ff0 !important; } #gth-hero-widget .ghw-eyebrow { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.78) !important; } #gth-hero-widget .ghw-title { font-size: 48px !important; font-weight: 800 !important; color: #ffffff !important; line-height: 1.08 !important; letter-spacing: -0.02em; margin-bottom: 18px !important; } #gth-hero-widget .ghw-title-accent { background: linear-gradient(90deg, #9fb4ff, #ffffff, #9fb4ff) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; animation: ghw-shine 4s linear infinite !important; } #gth-hero-widget .ghw-desc { font-size: 15.5px !important; line-height: 1.65 !important; color: rgba(255,255,255,0.84) !important; max-width: 490px; margin-bottom: 20px !important; } #gth-hero-widget .ghw-cats { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 26px !important; } #gth-hero-widget .ghw-cats a { display: inline-flex !important; align-items: center !important; padding: 6px 12px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 700 !important; color: #dbe3ff !important; text-decoration: none !important; background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.2) !important; transition: all .25s ease !important; } #gth-hero-widget .ghw-cats a:hover { background: #ffffff !important; color: #223099 !important; border-color: #ffffff !important; transform: translateY(-2px) !important; } #gth-hero-widget .ghw-actions { display: flex !important; gap: 12px !important; flex-wrap: wrap; margin-bottom: 16px !important; } #gth-hero-widget .ghw-btn { position: relative !important; overflow: hidden !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 14px !important; font-weight: 800 !important; text-decoration: none !important; padding: 14px 24px !important; border-radius: 11px !important; border: none; line-height: normal !important; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease !important; } #gth-hero-widget .ghw-btn svg { display: block !important; transition: transform .25s ease !important; } #gth-hero-widget .ghw-btn:hover svg { transform: translateX(4px) !important; } #gth-hero-widget .ghw-btn-primary { background: #ffffff !important; color: #223099 !important; box-shadow: 0 10px 24px -8px rgba(0,0,0,0.35) !important; } #gth-hero-widget .ghw-btn-primary::before { content: "" !important; position: absolute !important; top: 0 !important; left: -120% !important; width: 60% !important; height: 100% !important; background: linear-gradient(100deg, transparent, rgba(76,110,245,0.22), transparent) !important; transform: skewX(-20deg) !important; animation: ghw-btnshine 3.4s ease-in-out infinite !important; } #gth-hero-widget .ghw-btn-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 16px 30px -8px rgba(0,0,0,0.45) !important; color: #223099 !important; } #gth-hero-widget .ghw-btn-secondary { background: rgba(255,255,255,0.06) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.32) !important; } #gth-hero-widget .ghw-btn-secondary:hover { background: rgba(255,255,255,0.14) !important; border-color: #ffffff !important; transform: translateY(-2px) !important; color: #ffffff !important; } #gth-hero-widget .ghw-cut { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 12.5px !important; color: rgba(255,255,255,0.8) !important; margin-bottom: 26px !important; } #gth-hero-widget .ghw-cut svg { width: 16px !important; height: 16px !important; display: block !important; color: #4ade80 !important; flex: 0 0 16px !important; } #gth-hero-widget .ghw-cut b { color: #ffffff !important; } #gth-hero-widget .ghw-trust-row { display: flex !important; align-items: center !important; gap: 14px 26px !important; flex-wrap: wrap; padding-top: 22px !important; border-top: 1px solid rgba(255,255,255,0.14) !important; } #gth-hero-widget .ghw-trust-item { display: flex !important; align-items: center !important; gap: 10px !important; } #gth-hero-widget .ghw-trust-item .ti { flex: 0 0 34px !important; width: 34px !important; height: 34px !important; border-radius: 10px !important; background: rgba(255,255,255,0.12) !important; border: 1px solid rgba(255,255,255,0.2) !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: transform .3s ease, background .3s ease !important; } #gth-hero-widget .ghw-trust-item:hover .ti { transform: rotate(-8deg) scale(1.08) !important; background: rgba(255,255,255,0.22) !important; } #gth-hero-widget .ghw-trust-item .ti svg { width: 16px !important; height: 16px !important; display: block !important; } #gth-hero-widget .ghw-trust-item strong { display: block !important; font-size: 16px !important; color: #ffffff !important; font-weight: 800 !important; line-height: 1.1 !important; } #gth-hero-widget .ghw-trust-item div span { display: block !important; font-size: 11px !important; color: rgba(255,255,255,0.65) !important; text-transform: uppercase !important; letter-spacing: .06em !important; font-weight: 600 !important; margin-top: 2px !important; } /* ---------- IMAGE ---------- */ #gth-hero-widget .ghw-media { position: relative !important; z-index: 1; display: flex !important; align-items: center !important; justify-content: center !important; perspective: 1100px !important; opacity: 0; animation: ghw-zoom 1s cubic-bezier(.2,.8,.2,1) .25s forwards !important; } #gth-hero-widget .ghw-tilt { position: relative !important; width: 100% !important; max-width: 500px !important; transition: transform .5s cubic-bezier(.2,.8,.2,1) !important; transform-style: preserve-3d !important; } #gth-hero-widget .ghw-media-frame { position: relative !important; width: 100%; border-radius: 22px !important; overflow: hidden !important; box-shadow: 0 30px 70px -20px rgba(0,0,0,0.55) !important; border: 1px solid rgba(255,255,255,0.22) !important; animation: ghw-float 6s ease-in-out infinite !important; } #gth-hero-widget .ghw-media-frame::after { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(to right, rgba(20,27,82,0.7) 0%, rgba(20,27,82,0.3) 14%, rgba(20,27,82,0.06) 32%, rgba(20,27,82,0) 48%), linear-gradient(to top, rgba(20,27,82,0.55) 0%, rgba(20,27,82,0) 30%) !important; pointer-events: none !important; z-index: 2 !important; } #gth-hero-widget .ghw-img { width: 100% !important; height: auto !important; max-width: none !important; display: block !important; aspect-ratio: 1400/933 !important; object-fit: cover !important; filter: saturate(1.06) contrast(1.03) !important; transition: transform 1.2s ease !important; } #gth-hero-widget .ghw-media:hover .ghw-img { transform: scale(1.05) !important; } #gth-hero-widget .ghw-chip { position: absolute !important; z-index: 4 !important; display: flex !important; align-items: center !important; gap: 9px !important; padding: 9px 13px 9px 9px !important; border-radius: 13px !important; background: rgba(255,255,255,0.97) !important; color: #141b52 !important; box-shadow: 0 14px 30px -10px rgba(10,15,50,0.6) !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1.2 !important; white-space: nowrap !important; transform: translateZ(40px); } #gth-hero-widget .ghw-chip small { display: block !important; color: #5b6478 !important; font-weight: 600 !important; font-size: 10.5px !important; } #gth-hero-widget .ghw-chip-ico { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; border-radius: 9px !important; background: #e8ecff !important; display: flex !important; align-items: center !important; justify-content: center !important; } #gth-hero-widget .ghw-chip-ico.g { background: #dcfce7 !important; } #gth-hero-widget .ghw-chip-ico svg { width: 16px !important; height: 16px !important; display: block !important; } #gth-hero-widget .ghw-chip-a { top: 8% !important; left: -5% !important; animation: ghw-chip 6s ease-in-out infinite !important; } #gth-hero-widget .ghw-chip-b { top: 44% !important; right: -5% !important; animation: ghw-chip 6s ease-in-out 1.6s infinite !important; } #gth-hero-widget .ghw-pay { position: absolute !important; z-index: 4 !important; left: 50% !important; bottom: 14px !important; transform: translateX(-50%) !important; display: flex !important; align-items: center !important; gap: 5px !important; padding: 6px 8px !important; border-radius: 12px !important; background: rgba(255,255,255,0.14) !important; border: 1px solid rgba(255,255,255,0.28) !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; white-space: nowrap !important; } #gth-hero-widget .ghw-pay > span { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 22px !important; padding: 0 7px !important; border-radius: 5px !important; background: #ffffff !important; font-size: 9.5px !important; font-weight: 900 !important; letter-spacing: .2px !important; } #gth-hero-widget .ghw-pay .pv { color: #1a1f71 !important; font-style: italic !important; font-size: 10.5px !important; } #gth-hero-widget .ghw-pay .pm i { width: 12px !important; height: 12px !important; border-radius: 50% !important; display: block !important; background: #eb001b !important; } #gth-hero-widget .ghw-pay .pm i + i { background: #f79e1b !important; margin-left: -5px !important; opacity: .92 !important; } #gth-hero-widget .ghw-pay .pa { background: #2e77bc !important; color: #ffffff !important; } #gth-hero-widget .ghw-pay .pp { color: #003087 !important; font-style: italic !important; } #gth-hero-widget .ghw-pay .pg { color: #3c4043 !important; } #gth-hero-widget .ghw-pay .pap { background: #000000 !important; color: #ffffff !important; } /* ---------- KEYFRAMES ---------- */ @keyframes ghw-up { to { opacity: 1; transform: translateY(0); } } @keyframes ghw-zoom { from { opacity: 0; transform: scale(.94) translateX(24px); } to { opacity: 1; transform: none; } } @keyframes ghw-grid { from { background-position: 0 0, 0 0; } to { background-position: 44px 44px, 44px 44px; } } @keyframes ghw-orb { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-40px,30px); } } @keyframes ghw-sweep { 0% { left: -60%; } 55%,100% { left: 130%; } } @keyframes ghw-bar { to { background-position: 200% 0; } } @keyframes ghw-ping { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.7); } 80%,100% { box-shadow: 0 0 0 9px rgba(74,222,128,0); } } @keyframes ghw-ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } } @keyframes ghw-shine { to { background-position: 200% center; } } @keyframes ghw-btnshine { 0% { left: -120%; } 60%,100% { left: 160%; } } @keyframes ghw-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes ghw-chip { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes ghw-sway { 0%,100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg) translateY(-8px); } } /* ---------- RESPONSIVE ---------- */ @media (max-width: 1000px) { #gth-hero-widget .ghw-chip-a { left: 8px !important; } #gth-hero-widget .ghw-chip-b { right: 8px !important; } } @media (max-width: 850px) { #gth-hero-widget .ghw-section { padding: 12px !important; } #gth-hero-widget .ghw-slide { grid-template-columns: 1fr !important; padding: 30px 20px 32px !important; gap: 26px !important; } #gth-hero-widget .ghw-title { font-size: 31px !important; } #gth-hero-widget .ghw-media { order: -1; } #gth-hero-widget .ghw-wm, #gth-hero-widget .ghw-leaf { display: none !important; } #gth-hero-widget .ghw-media-frame::after { background: linear-gradient(to bottom, rgba(20,27,82,0.5) 0%, rgba(20,27,82,0) 30%), linear-gradient(to top, rgba(20,27,82,0.55) 0%, rgba(20,27,82,0) 34%) !important; } #gth-hero-widget .ghw-chip { padding: 6px 10px 6px 6px !important; font-size: 11px !important; } #gth-hero-widget .ghw-chip small { font-size: 9.5px !important; } #gth-hero-widget .ghw-chip-ico { width: 24px !important; height: 24px !important; flex-basis: 24px !important; } #gth-hero-widget .ghw-chip-a { left: 8px !important; top: 8px !important; } #gth-hero-widget .ghw-chip-b { right: 8px !important; top: auto !important; bottom: 48px !important; } #gth-hero-widget .ghw-pay { bottom: 8px !important; gap: 4px !important; padding: 5px 6px !important; } #gth-hero-widget .ghw-pay > span { height: 19px !important; padding: 0 5px !important; font-size: 8.5px !important; } #gth-hero-widget .ghw-btn { flex: 1 1 100% !important; justify-content: center !important; } #gth-hero-widget .ghw-trust-row { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 8px !important; } #gth-hero-widget .ghw-trust-item { flex-direction: column !important; text-align: center !important; gap: 6px !important; } #gth-hero-widget .ghw-trust-item div span { font-size: 9.5px !important; } } @media (prefers-reduced-motion: reduce) { #gth-hero-widget *, #gth-hero-widget *::before, #gth-hero-widget *::after { animation: none !important; } #gth-hero-widget .ghw-rv, #gth-hero-widget .ghw-media { opacity: 1 !important; transform: none !important; } } #gh-cat-widget, #gh-cat-widget * { box-sizing: border-box !important; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } #gh-cat-widget p, #gh-cat-widget h2, #gh-cat-widget h3, #gh-cat-widget ul, #gh-cat-widget li { margin: 0 !important; padding: 0 !important; list-style: none !important; } #gh-cat-widget a { text-decoration: none !important; } /* ---------- SECTION ---------- */ #gh-cat-widget .gc-section { position: relative !important; overflow: hidden !important; background: radial-gradient(55% 60% at 100% 0%, rgba(76,110,245,0.13) 0%, rgba(76,110,245,0) 60%), radial-gradient(45% 50% at 0% 100%, rgba(76,110,245,0.10) 0%, rgba(76,110,245,0) 60%), linear-gradient(180deg, #f5f7fe 0%, #eaeffc 100%) !important; border: 1px solid #dfe6f7 !important; border-radius: 26px !important; padding: 56px 36px 40px !important; } #gh-cat-widget .gc-section::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 4px !important; background: linear-gradient(90deg, #141b52, #2a3ed6, #9fb4ff, #2a3ed6, #141b52) !important; background-size: 200% 100% !important; animation: gc-bar 6s linear infinite !important; } #gh-cat-widget .gc-dots { position: absolute !important; top: 24px !important; right: 24px !important; width: 160px !important; height: 110px !important; pointer-events: none !important; background-image: radial-gradient(rgba(76,110,245,0.25) 1.5px, transparent 1.5px) !important; background-size: 16px 16px !important; animation: gc-drift 10s ease-in-out infinite !important; } #gh-cat-widget .gc-wm { position: absolute !important; right: -14px !important; top: 230px !important; font-size: 170px !important; font-weight: 900 !important; letter-spacing: -5px !important; line-height: 1 !important; color: rgba(76,110,245,0.045) !important; pointer-events: none !important; user-select: none !important; } #gh-cat-widget .gc-wrap { position: relative !important; z-index: 1 !important; max-width: 1180px !important; margin: 0 auto !important; } /* ---------- REVEAL ---------- */ #gh-cat-widget.gc-js .gc-rv { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); } #gh-cat-widget.gc-js .gc-rv.in { opacity: 1; transform: none; } #gh-cat-widget .d1 { transition-delay: .05s !important; } #gh-cat-widget .d2 { transition-delay: .12s !important; } #gh-cat-widget .d3 { transition-delay: .19s !important; } #gh-cat-widget .d4 { transition-delay: .26s !important; } #gh-cat-widget .d5 { transition-delay: .33s !important; } #gh-cat-widget .d6 { transition-delay: .43s !important; } #gh-cat-widget .d7 { transition-delay: .53s !important; } #gh-cat-widget .d8 { transition-delay: .2s !important; } #gh-cat-widget .d9 { transition-delay: .3s !important; } /* ---------- HEADER ---------- */ #gh-cat-widget .gc-head { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 22px 30px !important; margin-bottom: 22px !important; } #gh-cat-widget .gc-head-l { flex: 1 1 460px !important; min-width: 0 !important; } #gh-cat-widget .gc-brand { display: inline-flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 18px !important; padding: 6px 14px 6px 6px !important; background: #fff !important; border: 1px solid #dfe6f7 !important; border-radius: 999px !important; box-shadow: 0 8px 20px -14px rgba(42,62,214,0.6) !important; } #gh-cat-widget .gc-mark { position: relative !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; background: linear-gradient(135deg, #2D5A27, #2a3ed6) !important; display: flex !important; align-items: center !important; justify-content: center !important; } #gh-cat-widget .gc-mark::after { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 2px solid rgba(76,110,245,0.35) !important; animation: gc-ring 2.4s ease-out infinite !important; } #gh-cat-widget .gc-mark svg { width: 16px !important; height: 16px !important; display: block !important; } #gh-cat-widget .gc-bname { font-size: 13.5px !important; font-weight: 800 !important; letter-spacing: 3px !important; color: #141b52 !important; } #gh-cat-widget .gc-bname span { color: #2D5A27 !important; font-weight: 600 !important; letter-spacing: 2px !important; } #gh-cat-widget .gc-eyebrow { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: 1.6px !important; text-transform: uppercase !important; color: #2a3ed6 !important; margin-bottom: 10px !important; } #gh-cat-widget .gc-eyebrow::before { content: "" !important; display: block !important; width: 26px !important; height: 2px !important; background: #2D5A27 !important; } #gh-cat-widget .gc-title { font-size: 42px !important; font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -0.8px !important; color: #141b52 !important; margin-bottom: 10px !important; } #gh-cat-widget .gc-title em { font-style: normal !important; background: linear-gradient(90deg, #2a3ed6, #6f8ff0, #2a3ed6) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; animation: gc-shine 4s linear infinite !important; } #gh-cat-widget .gc-sub { font-size: 15px !important; line-height: 1.6 !important; color: #5b6478 !important; max-width: 560px !important; } #gh-cat-widget .gc-sort { display: inline-flex !important; flex-wrap: wrap !important; gap: 4px !important; padding: 5px !important; background: #fff !important; border: 1px solid #dfe6f7 !important; border-radius: 14px !important; box-shadow: 0 10px 24px -18px rgba(42,62,214,0.6) !important; } #gh-cat-widget .gc-sort button { appearance: none !important; border: 0 !important; background: transparent !important; cursor: pointer !important; padding: 9px 14px !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 700 !important; color: #5b6478 !important; transition: background .25s ease, color .25s ease !important; } #gh-cat-widget .gc-sort button:hover { color: #2a3ed6 !important; background: #eef2fd !important; } #gh-cat-widget .gc-sort button.on { background: linear-gradient(135deg, #2D5A27, #2a3ed6) !important; color: #fff !important; box-shadow: 0 8px 16px -10px rgba(42,62,214,0.9) !important; } #gh-cat-widget .gc-perks { display: flex !important; flex-wrap: wrap !important; gap: 10px 22px !important; padding: 14px 18px !important; margin-bottom: 26px !important; background: rgba(255,255,255,0.7) !important; border: 1px solid #dfe6f7 !important; border-radius: 14px !important; } #gh-cat-widget .gc-perks span { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 13px !important; font-weight: 600 !important; color: #3a4459 !important; } #gh-cat-widget .gc-perks svg { width: 17px !important; height: 17px !important; display: block !important; color: #2a3ed6 !important; flex: 0 0 17px !important; } /* ---------- GRID / CARDS ---------- */ #gh-cat-widget .gc-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; align-items: stretch !important; } #gh-cat-widget .gc-card { position: relative !important; display: flex !important; flex-direction: column !important; background: #fff !important; border: 1px solid #dfe6f7 !important; border-radius: 20px !important; overflow: hidden !important; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease, opacity .8s cubic-bezier(.2,.8,.2,1) !important; } #gh-cat-widget .gc-card:hover { transform: translateY(-6px) !important; border-color: #c5d0f5 !important; box-shadow: 0 26px 46px -24px rgba(42,62,214,0.55) !important; } #gh-cat-widget .gc-card.swap { animation: gc-swap .5s cubic-bezier(.2,.8,.2,1) !important; } #gh-cat-widget .gc-media { position: relative !important; display: block !important; aspect-ratio: 1 / 0.82 !important; background: radial-gradient(70% 70% at 50% 45%, #ffffff 0%, #eef2fd 100%) !important; overflow: hidden !important; border-bottom: 1px solid #edf1fb !important; } #gh-cat-widget .gc-media img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; padding: 18px !important; transition: transform .7s cubic-bezier(.2,.8,.2,1) !important; z-index: 1 !important; } #gh-cat-widget .gc-card:hover .gc-media img { transform: scale(1.07) !important; } #gh-cat-widget .gc-media::after { content: "" !important; position: absolute !important; top: 0 !important; left: -70% !important; width: 45% !important; height: 100% !important; z-index: 2 !important; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent) !important; transform: skewX(-18deg) !important; transition: left .9s ease !important; pointer-events: none !important; } #gh-cat-widget .gc-card:hover .gc-media::after { left: 140% !important; } #gh-cat-widget .gc-ph { position: absolute !important; inset: 0 !important; display: none !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px !important; color: #9fb0e8 !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: 3px !important; } #gh-cat-widget .gc-ph svg { width: 54px !important; height: 54px !important; display: block !important; } #gh-cat-widget .gc-media.noimg img { display: none !important; } #gh-cat-widget .gc-media.noimg .gc-ph { display: flex !important; } #gh-cat-widget .gc-pcs { position: absolute !important; top: 14px !important; left: 14px !important; z-index: 3 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 54px !important; height: 54px !important; border-radius: 16px !important; background: linear-gradient(150deg, #2D5A27, #2a3ed6) !important; color: #fff !important; font-size: 9.5px !important; font-weight: 800 !important; letter-spacing: 1.4px !important; box-shadow: 0 10px 20px -10px rgba(42,62,214,0.9) !important; line-height: 1 !important; } #gh-cat-widget .gc-pcs b { font-size: 21px !important; letter-spacing: 0 !important; margin-bottom: 2px !important; } #gh-cat-widget .gc-tag { position: absolute !important; top: 14px !important; right: 14px !important; z-index: 3 !important; padding: 6px 11px !important; border-radius: 999px !important; background: rgba(255,255,255,0.92) !important; border: 1px solid #dfe6f7 !important; color: #141b52 !important; font-size: 11.5px !important; font-weight: 800 !important; box-shadow: 0 8px 18px -12px rgba(20,27,82,0.5) !important; } #gh-cat-widget .gc-body { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; padding: 20px 20px 20px !important; } #gh-cat-widget .gc-kicker { font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; color: #2D5A27 !important; margin-bottom: 6px !important; } #gh-cat-widget .gc-name { font-size: 17px !important; font-weight: 800 !important; line-height: 1.32 !important; margin-bottom: 12px !important; } #gh-cat-widget .gc-name a { color: #141b52 !important; background: linear-gradient(#2a3ed6, #2a3ed6) left bottom / 0 2px no-repeat !important; transition: background-size .35s ease, color .25s ease !important; } #gh-cat-widget .gc-name a:hover { color: #2a3ed6 !important; background-size: 100% 2px !important; } #gh-cat-widget .gc-feats li { position: relative !important; padding-left: 24px !important; font-size: 13.5px !important; line-height: 1.5 !important; color: #3a4459 !important; } #gh-cat-widget .gc-feats li + li { margin-top: 6px !important; } #gh-cat-widget .gc-feats li::before { content: "" !important; position: absolute !important; left: 0 !important; top: 2px !important; width: 16px !important; height: 16px !important; border-radius: 50% !important; background: #e8edfd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a3ed6' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat !important; } #gh-cat-widget .gc-use { font-size: 12.5px !important; line-height: 1.55 !important; color: #5b6478 !important; margin-top: 14px !important; padding: 10px 12px !important; border-radius: 12px !important; background: #f5f7fe !important; border: 1px dashed #d5ddf5 !important; } #gh-cat-widget .gc-box { margin-top: 14px !important; border-radius: 12px !important; background: #f5f7fe !important; border: 1px solid #e3e8f8 !important; } #gh-cat-widget .gc-box summary { list-style: none !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 12px !important; font-size: 12.5px !important; font-weight: 800 !important; color: #141b52 !important; } #gh-cat-widget .gc-box summary::-webkit-details-marker { display: none !important; } #gh-cat-widget .gc-box .pm { position: relative !important; width: 20px !important; height: 20px !important; border-radius: 6px !important; background: #fff !important; border: 1px solid #dfe6f7 !important; } #gh-cat-widget .gc-box .pm::before, #gh-cat-widget .gc-box .pm::after { content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important; width: 8px !important; height: 2px !important; margin: -1px 0 0 -4px !important; background: #2a3ed6 !important; border-radius: 2px !important; transition: transform .3s ease !important; } #gh-cat-widget .gc-box .pm::after { transform: rotate(90deg) !important; } #gh-cat-widget .gc-box[open] .pm::after { transform: rotate(0deg) !important; } #gh-cat-widget .gc-chips { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; padding: 0 12px 12px !important; animation: gc-in .4s ease !important; } #gh-cat-widget .gc-chips span { padding: 4px 9px !important; border-radius: 999px !important; background: #fff !important; border: 1px solid #dfe6f7 !important; font-size: 11.5px !important; font-weight: 600 !important; color: #3a4459 !important; } #gh-cat-widget .gc-foot { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-top: auto !important; padding-top: 18px !important; } #gh-cat-widget .gc-foot { border-top: 1px solid #edf1fb !important; } #gh-cat-widget .gc-price b { display: block !important; font-size: 24px !important; font-weight: 800 !important; color: #141b52 !important; letter-spacing: -0.4px !important; line-height: 1.1 !important; } #gh-cat-widget .gc-price small { display: block !important; font-size: 11px !important; font-weight: 600 !important; color: #16a34a !important; margin-top: 3px !important; } #gh-cat-widget .gc-btn { position: relative !important; overflow: hidden !important; flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; padding: 11px 16px !important; border-radius: 11px !important; background: linear-gradient(135deg, #2D5A27, #2a3ed6) !important; color: #fff !important; font-size: 13.5px !important; font-weight: 800 !important; box-shadow: 0 10px 20px -10px rgba(42,62,214,0.9) !important; transition: transform .25s ease, box-shadow .25s ease !important; } #gh-cat-widget .gc-btn::before { content: "" !important; position: absolute !important; top: 0 !important; left: -70% !important; width: 40% !important; height: 100% !important; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.4), transparent) !important; transform: skewX(-20deg) !important; animation: gc-sweep 3.8s ease-in-out infinite !important; } #gh-cat-widget .gc-btn svg { width: 15px !important; height: 15px !important; display: block !important; transition: transform .25s ease !important; } #gh-cat-widget .gc-btn:hover { transform: translateY(-2px) !important; color: #fff !important; box-shadow: 0 14px 26px -10px rgba(42,62,214,1) !important; } #gh-cat-widget .gc-btn:hover svg { transform: translateX(4px) !important; } /* ---------- COMPARE ---------- */ #gh-cat-widget .gc-cmp { margin-top: 28px !important; background: #fff !important; border: 1px solid #dfe6f7 !important; border-radius: 20px !important; padding: 24px !important; } #gh-cat-widget .gc-cmp-h { margin-bottom: 16px !important; } #gh-cat-widget .gc-cmp-k { font-size: 12px !important; font-weight: 800 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; color: #2D5A27 !important; } #gh-cat-widget .gc-cmp-t { font-size: 22px !important; font-weight: 800 !important; color: #141b52 !important; margin-top: 4px !important; } #gh-cat-widget .gc-table { border: 1px solid #e3e8f8 !important; border-radius: 14px !important; overflow: hidden !important; } #gh-cat-widget .gc-tr { display: grid !important; grid-template-columns: 1.1fr 1fr 1fr 1fr !important; transition: background .2s ease !important; } #gh-cat-widget .gc-tr + .gc-tr { border-top: 1px solid #edf1fb !important; } #gh-cat-widget .gc-tr:not(.th):hover { background: #f7f9ff !important; } #gh-cat-widget .gc-tr > span { display: flex !important; align-items: center !important; gap: 7px !important; padding: 12px 14px !important; font-size: 13.5px !important; color: #3a4459 !important; min-width: 0 !important; } #gh-cat-widget .gc-tr > span[role="rowheader"] { font-weight: 800 !important; color: #141b52 !important; background: #f9faff !important; } #gh-cat-widget .gc-tr.th > span { background: linear-gradient(135deg, #2a3ed6, #141b52) !important; color: #fff !important; font-weight: 800 !important; font-size: 13.5px !important; } #gh-cat-widget .gc-tr.pr > span[role="cell"] { font-weight: 800 !important; color: #141b52 !important; font-size: 15px !important; } #gh-cat-widget .gc-tr .muted { color: #9aa3b8 !important; } #gh-cat-widget .gc-tr i.ok { flex: 0 0 16px !important; width: 16px !important; height: 16px !important; border-radius: 50% !important; background: #dcfce7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat !important; } /* ---------- CTA ---------- */ #gh-cat-widget .gc-cta { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 12px 20px !important; margin-top: 28px !important; } #gh-cat-widget .gc-btn.big { padding: 14px 24px !important; font-size: 14.5px !important; border-radius: 12px !important; } #gh-cat-widget .gc-ghost { font-size: 13.5px !important; font-weight: 700 !important; color: #2a3ed6 !important; border-bottom: 2px solid #c9d6f5 !important; padding-bottom: 2px !important; transition: border-color .25s ease !important; } #gh-cat-widget .gc-ghost:hover { border-color: #2a3ed6 !important; color: #2a3ed6 !important; } #gh-cat-widget .gc-fine { text-align: center !important; font-size: 11.5px !important; color: #7a8399 !important; margin-top: 16px !important; } /* ---------- KEYFRAMES ---------- */ @keyframes gc-bar { to { background-position: 200% 0; } } @keyframes gc-drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-10px,8px); } } @keyframes gc-ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } } @keyframes gc-shine { to { background-position: 200% center; } } @keyframes gc-sweep { 0%,60% { left: -70%; } 100% { left: 140%; } } @keyframes gc-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @keyframes gc-swap { 0% { opacity: 0; transform: translateY(16px) scale(.97); } 100% { opacity: 1; transform: none; } } /* ---------- RESPONSIVE ---------- */ @media (max-width: 980px) { #gh-cat-widget .gc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 640px) { #gh-cat-widget .gc-section { padding: 40px 16px 30px !important; border-radius: 18px !important; } #gh-cat-widget .gc-title { font-size: 30px !important; } #gh-cat-widget .gc-dots, #gh-cat-widget .gc-wm { display: none !important; } #gh-cat-widget .gc-sort { width: 100% !important; display: grid !important; grid-template-columns: 1fr 1fr !important; } #gh-cat-widget .gc-perks { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; } #gh-cat-widget .gc-grid { grid-template-columns: 1fr !important; gap: 16px !important; } #gh-cat-widget .gc-cmp { padding: 18px 12px !important; } #gh-cat-widget .gc-table { overflow-x: auto !important; } #gh-cat-widget .gc-tr { grid-template-columns: 78px repeat(3, minmax(0, 1fr)) !important; } #gh-cat-widget .gc-tr > span { padding: 10px 7px !important; font-size: 11.5px !important; } #gh-cat-widget .gc-tr.pr > span[role="cell"] { font-size: 12.5px !important; } #gh-cat-widget .gc-tr i.ok { display: none !important; } #gh-cat-widget .gc-btn.big { width: 100% !important; justify-content: center !important; } } @media (prefers-reduced-motion: reduce) { #gh-cat-widget *, #gh-cat-widget *::before, #gh-cat-widget *::after { animation: none !important; } #gh-cat-widget.gc-js .gc-rv { opacity: 1 !important; transform: none !important; transition: none !important; } } #gh-ship-widget, #gh-ship-widget * { box-sizing: border-box !important; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } #gh-ship-widget p, #gh-ship-widget h2, #gh-ship-widget h3, #gh-ship-widget ol, #gh-ship-widget ul, #gh-ship-widget li { margin: 0 !important; padding: 0 !important; list-style: none !important; } /* ---------- SECTION ---------- */ #gh-ship-widget .si-section { position: relative !important; overflow: hidden !important; background: radial-gradient(55% 70% at 100% 0%, rgba(76,110,245,0.13) 0%, rgba(76,110,245,0) 60%), radial-gradient(45% 60% at 0% 100%, rgba(76,110,245,0.10) 0%, rgba(76,110,245,0) 60%), linear-gradient(180deg, #f5f7fe 0%, #eaeffc 100%) !important; border: 1px solid #dfe6f7 !important; border-radius: 24px !important; padding: 56px 32px 40px !important; text-align: center !important; } #gh-ship-widget .si-section::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 4px !important; background: linear-gradient(90deg, #141b52, #2a3ed6, #9fb4ff, #2a3ed6, #141b52) !important; background-size: 200% 100% !important; animation: si-bar 6s linear infinite !important; } #gh-ship-widget .si-dots { position: absolute !important; top: 24px !important; right: 24px !important; width: 160px !important; height: 120px !important; pointer-events: none !important; background-image: radial-gradient(rgba(76,110,245,0.25) 1.5px, transparent 1.5px) !important; background-size: 16px 16px !important; animation: si-drift 10s ease-in-out infinite !important; } #gh-ship-widget .si-glow { position: absolute !important; left: -80px !important; top: 38% !important; width: 260px !important; height: 260px !important; border-radius: 50% !important; background: radial-gradient(circle, rgba(76,110,245,0.16), rgba(76,110,245,0) 70%) !important; pointer-events: none !important; animation: si-float 9s ease-in-out infinite !important; } #gh-ship-widget .si-leaf { position: absolute !important; fill: rgba(76,110,245,0.10) !important; pointer-events: none !important; } #gh-ship-widget .si-leaf.l1 { width: 74px !important; height: 74px !important; left: 4% !important; top: 70px !important; animation: si-sway 7s ease-in-out infinite !important; } #gh-ship-widget .si-leaf.l2 { width: 52px !important; height: 52px !important; right: 6% !important; bottom: 120px !important; transform: scaleX(-1); animation: si-sway 8s ease-in-out -2s infinite !important; } #gh-ship-widget .si-container { position: relative !important; z-index: 1 !important; max-width: 1080px; margin: 0 auto !important; } /* ---------- REVEAL ---------- */ #gh-ship-widget.si-js .si-rv { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); } #gh-ship-widget.si-js.si-in .si-rv { opacity: 1; transform: none; } #gh-ship-widget .d1 { transition-delay: .05s !important; } #gh-ship-widget .d2 { transition-delay: .12s !important; } #gh-ship-widget .d3 { transition-delay: .19s !important; } #gh-ship-widget .d4 { transition-delay: .26s !important; } #gh-ship-widget .d5 { transition-delay: .33s !important; } #gh-ship-widget .d6 { transition-delay: .40s !important; } #gh-ship-widget .d7 { transition-delay: .47s !important; } #gh-ship-widget .d8 { transition-delay: .54s !important; } #gh-ship-widget .d9 { transition-delay: .61s !important; } /* ---------- HEADER ---------- */ #gh-ship-widget .si-head { display: flex !important; flex-direction: column !important; align-items: center !important; } #gh-ship-widget .si-brand { display: inline-flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 18px !important; padding: 6px 14px 6px 6px !important; background: #ffffff !important; border: 1px solid #dfe6f7 !important; border-radius: 999px !important; box-shadow: 0 8px 20px -14px rgba(42,62,214,0.6) !important; } #gh-ship-widget .si-brand-mark { position: relative !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; background: linear-gradient(135deg, #2D5A27, #2a3ed6) !important; display: flex !important; align-items: center !important; justify-content: center !important; } #gh-ship-widget .si-brand-mark::after { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 2px solid rgba(76,110,245,0.35) !important; animation: si-ring 2.4s ease-out infinite !important; } #gh-ship-widget .si-brand-mark svg { width: 16px !important; height: 16px !important; display: block !important; } #gh-ship-widget .si-brand-name { font-size: 13.5px !important; font-weight: 800 !important; letter-spacing: 3px !important; color: #141b52 !important; } #gh-ship-widget .si-brand-name span { color: #2D5A27 !important; font-weight: 600 !important; letter-spacing: 2px !important; } #gh-ship-widget .si-eyebrow { display: inline-flex !important; align-items: center !important; gap: 10px !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: 1.6px !important; text-transform: uppercase !important; color: #2a3ed6 !important; margin-bottom: 12px !important; } #gh-ship-widget .si-eyebrow::before, #gh-ship-widget .si-eyebrow::after { content: "" !important; display: block !important; width: 24px !important; height: 2px !important; background: #2D5A27 !important; } #gh-ship-widget .si-title { font-size: 40px !important; font-weight: 800 !important; line-height: 1.12 !important; letter-spacing: -0.6px !important; color: #141b52 !important; margin-bottom: 12px !important; } #gh-ship-widget .si-title em { font-style: normal !important; background: linear-gradient(90deg, #2a3ed6, #6f8ff0, #2a3ed6) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; animation: si-shine 4s linear infinite !important; } #gh-ship-widget .si-sub { font-size: 15px !important; line-height: 1.65 !important; color: #5b6478 !important; max-width: 600px !important; margin-bottom: 26px !important; } /* live cut-off */ #gh-ship-widget .si-cut { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 14px 22px !important; width: 100% !important; max-width: 640px !important; padding: 14px 16px 14px 20px !important; border-radius: 18px !important; background: #ffffff !important; border: 1px solid #d5ddf5 !important; box-shadow: 0 18px 36px -22px rgba(42,62,214,0.55) !important; text-align: left !important; } #gh-ship-widget .si-cut-l { display: flex !important; align-items: center !important; gap: 12px !important; min-width: 0 !important; flex: 1 1 260px !important; } #gh-ship-widget .si-live { flex: 0 0 10px !important; width: 10px !important; height: 10px !important; border-radius: 50% !important; background: #22c55e !important; animation: si-ping 1.8s ease-out infinite !important; } #gh-ship-widget .si-cut.closed .si-live { background: #f59e0b !important; animation: none !important; } #gh-ship-widget .si-cut-k { font-size: 12px !important; font-weight: 600 !important; color: #5b6478 !important; letter-spacing: .2px !important; } #gh-ship-widget .si-cut-k b { color: #141b52 !important; } #gh-ship-widget .si-cut-t { font-size: 14px !important; font-weight: 700 !important; color: #141b52 !important; margin-top: 2px !important; line-height: 1.4 !important; } #gh-ship-widget .si-clock { display: flex !important; align-items: center !important; gap: 4px !important; } #gh-ship-widget .si-cut.closed .si-clock { display: none !important; } #gh-ship-widget .si-dg { display: flex !important; flex-direction: column !important; align-items: center !important; min-width: 50px !important; padding: 7px 6px 5px !important; border-radius: 11px !important; background: linear-gradient(160deg, #2D5A27, #2a3ed6) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 8px 16px -10px rgba(42,62,214,0.8) !important; } #gh-ship-widget .si-dg b { font-size: 20px !important; font-weight: 800 !important; color: #ffffff !important; line-height: 1 !important; font-variant-numeric: tabular-nums !important; } #gh-ship-widget .si-dg b.flip { animation: si-flip .4s ease !important; } #gh-ship-widget .si-dg i { font-style: normal !important; font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: rgba(255,255,255,0.75) !important; margin-top: 3px !important; } #gh-ship-widget .si-col { font-size: 18px !important; font-weight: 800 !important; color: #2D5A27 !important; animation: si-blink 1s steps(1) infinite !important; } /* ---------- TIMELINE ---------- */ #gh-ship-widget .si-timeline { position: relative !important; margin: 44px 0 36px !important; padding: 26px 3% 22px !important; background: rgba(255,255,255,0.85) !important; border: 1px solid #d4e7d1 !important; border-radius: 20px !important; box-shadow: 0 10px 30px -15px rgba(45,90,39,0.1) !important; } #gh-ship-widget .si-track { position: absolute !important; top: 44px !important; left: 12.5% !important; right: 12.5% !important; height: 6px !important; border-radius: 6px !important; background: #e2e8f0 !important; box-shadow: inset 0 1px 2px rgba(0,0,0,0.08) !important; } #gh-ship-widget .si-fill { position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 0 !important; border-radius: 6px !important; background: linear-gradient(90deg, #1e3d1a, #2D5A27 60%, #22c55e 100%) !important; box-shadow: 0 0 10px rgba(34,197,94,0.6) !important; animation: si-fill-dynamic 8.5s cubic-bezier(0.4, 0, 0.2, 1) infinite !important; } #gh-ship-widget .si-truck { position: absolute !important; top: 50% !important; left: 0 !important; width: 36px !important; height: 36px !important; margin: -18px 0 0 -18px !important; border-radius: 50% !important; background: #2D5A27 !important; border: 3px solid #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 6px 16px rgba(45,90,39,0.5), 0 0 0 3px rgba(34,197,94,0.3) !important; z-index: 5 !important; cursor: pointer !important; animation: si-truck-drive 8.5s cubic-bezier(0.4, 0, 0.2, 1) infinite !important; } #gh-ship-widget .si-truck svg { width: 18px !important; height: 18px !important; display: block !important; stroke: #ffffff !important; animation: si-truck-vibe 0.5s ease-in-out infinite alternate !important; } #gh-ship-widget .si-steps { position: relative !important; display: flex !important; justify-content: space-between !important; gap: 8px !important; } #gh-ship-widget .si-step { flex: 1 1 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; min-width: 0 !important; cursor: pointer !important; user-select: none !important; } #gh-ship-widget .si-num { position: relative !important; z-index: 2 !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; background: #ffffff !important; border: 2px solid #2D5A27 !important; color: #2D5A27 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; font-weight: 800 !important; margin-bottom: 10px !important; transition: all 0.3s ease !important; } #gh-ship-widget .si-step:nth-child(1) .si-num { background: #2D5A27 !important; color: #ffffff !important; border-color: #2D5A27 !important; box-shadow: 0 4px 12px rgba(45,90,39,0.35) !important; } #gh-ship-widget .si-step:nth-child(2) .si-num { animation: si-step2-glow 8.5s cubic-bezier(0.4, 0, 0.2, 1) infinite !important; } #gh-ship-widget .si-step:nth-child(3) .si-num { animation: si-step3-glow 8.5s cubic-bezier(0.4, 0, 0.2, 1) infinite !important; } #gh-ship-widget .si-step:nth-child(4) .si-num { animation: si-step4-glow 8.5s cubic-bezier(0.4, 0, 0.2, 1) infinite !important; } #gh-ship-widget .si-step-t { font-size: 14px !important; font-weight: 800 !important; color: #141b52 !important; text-align: center !important; } #gh-ship-widget .si-step-s { font-size: 12px !important; color: #5b6478 !important; margin-top: 2px !important; text-align: center !important; } #gh-ship-widget .si-step-d { display: inline-block !important; margin-top: 8px !important; padding: 4px 12px !important; border-radius: 999px !important; background: #f0f7ef !important; color: #2D5A27 !important; font-size: 12px !important; font-weight: 800 !important; white-space: nowrap !important; border: 1px solid #d4e7d1 !important; } #gh-ship-widget .si-step-d.hl { background: #2D5A27 !important; color: #ffffff !important; border-color: #2D5A27 !important; box-shadow: 0 4px 10px rgba(45,90,39,0.3) !important; } /* ---------- CARDS ---------- */ #gh-ship-widget .si-grid { display: flex !important; flex-wrap: wrap !important; gap: 16px !important; } #gh-ship-widget .si-card { flex: 1 1 210px !important; position: relative !important; overflow: hidden !important; background: #ffffff !important; border: 1px solid #dfe6f7 !important; border-radius: 18px !important; padding: 26px 20px 22px !important; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important; } #gh-ship-widget .si-card::after { content: "" !important; position: absolute !important; left: 0 !important; bottom: 0 !important; height: 3px !important; width: 0 !important; background: linear-gradient(90deg, #2D5A27, #22c55e) !important; transition: width .4s ease !important; } #gh-ship-widget .si-card:hover { transform: translateY(-5px) !important; border-color: #bbf7d0 !important; box-shadow: 0 18px 34px -16px rgba(45,90,39,0.3) !important; } #gh-ship-widget .si-card:hover::after { width: 100% !important; } #gh-ship-widget .si-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 54px !important; height: 54px !important; margin: 0 auto 16px !important; border-radius: 16px !important; background: #f0f7ef !important; color: #2D5A27 !important; transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .25s ease, color .25s ease !important; } #gh-ship-widget .si-icon svg { display: block !important; } #gh-ship-widget .si-card:hover .si-icon { background: #2D5A27 !important; color: #ffffff !important; transform: scale(1.08) rotate(-6deg) !important; } #gh-ship-widget .si-card-title { font-size: 12.5px !important; font-weight: 800 !important; letter-spacing: .8px !important; text-transform: uppercase !important; color: #2D5A27 !important; margin-bottom: 6px !important; } #gh-ship-widget .si-card-big { font-size: 26px !important; font-weight: 800 !important; color: #141b52 !important; line-height: 1.15 !important; } #gh-ship-widget .si-card-big small { display: block !important; font-size: 12.5px !important; font-weight: 600 !important; color: #5b6478 !important; margin-top: 2px !important; } #gh-ship-widget .si-card-desc { font-size: 12.5px !important; line-height: 1.5 !important; color: #3a4459 !important; margin-top: 10px !important; padding-top: 10px !important; border-top: 1px dashed #dfe6f7 !important; } /* ---------- COVERAGE / CARRIERS ---------- */ #gh-ship-widget .si-info { display: flex !important; flex-wrap: wrap !important; gap: 16px !important; margin-top: 16px !important; text-align: left !important; } #gh-ship-widget .si-panel { flex: 1 1 320px !important; background: #ffffff !important; border: 1px solid #dfe6f7 !important; border-radius: 18px !important; padding: 20px 22px !important; } #gh-ship-widget .si-panel-k { font-size: 12px !important; font-weight: 800 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; color: #141b52 !important; margin-bottom: 12px !important; display: flex !important; align-items: center !important; gap: 8px !important; } #gh-ship-widget .si-panel-k::before { content: "" !important; width: 18px !important; height: 3px !important; border-radius: 3px !important; background: #2D5A27 !important; } #gh-ship-widget .si-cov li { display: flex !important; align-items: flex-start !important; gap: 10px !important; font-size: 13.5px !important; line-height: 1.5 !important; color: #3a4459 !important; } #gh-ship-widget .si-cov li + li { margin-top: 10px !important; } #gh-ship-widget .si-cov b { color: #141b52 !important; } #gh-ship-widget .si-ck { flex: 0 0 22px !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-top: 0 !important; } #gh-ship-widget .si-ck svg { width: 12px !important; height: 12px !important; display: block !important; } #gh-ship-widget .ok .si-ck { background: #dcfce7 !important; color: #16a34a !important; } #gh-ship-widget .no .si-ck { background: #f1f3f9 !important; color: #8a93a8 !important; } #gh-ship-widget .si-carriers { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; } #gh-ship-widget .si-car { display: inline-flex !important; align-items: center !important; height: 34px !important; padding: 0 14px !important; border-radius: 9px !important; font-size: 13px !important; font-weight: 900 !important; letter-spacing: .3px !important; transition: transform .25s ease !important; } #gh-ship-widget .si-car:hover { transform: translateY(-3px) !important; } #gh-ship-widget .si-car.ups { background: #3b2416 !important; color: #ffb500 !important; } #gh-ship-widget .si-car.fdx { background: #ffffff !important; color: #4d148c !important; border: 1px solid #e3e6ef !important; } #gh-ship-widget .si-car.fdx i { font-style: normal !important; color: #ff6600 !important; } #gh-ship-widget .si-car.usps { background: #333366 !important; color: #ffffff !important; } #gh-ship-widget .si-car.frt { background: #e8edfd !important; color: #2a3ed6 !important; font-weight: 800 !important; } #gh-ship-widget .si-panel-n { font-size: 12.5px !important; color: #5b6478 !important; margin-top: 12px !important; line-height: 1.5 !important; } /* ---------- FOOT ---------- */ #gh-ship-widget .si-foot { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 12px 22px !important; margin-top: 30px !important; } #gh-ship-widget .si-foot-item { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 13.5px !important; color: #3a4459 !important; font-weight: 600 !important; } #gh-ship-widget .si-foot-item svg { width: 14px !important; height: 14px !important; display: block !important; } #gh-ship-widget .si-btns { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 10px !important; } #gh-ship-widget .si-link { position: relative !important; overflow: hidden !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; padding: 11px 18px !important; border-radius: 11px !important; text-decoration: none !important; background: #2a3ed6 !important; color: #ffffff !important; font-size: 13.5px !important; font-weight: 700 !important; box-shadow: 0 10px 22px -10px rgba(42,62,214,0.8) !important; transition: transform .25s ease, box-shadow .25s ease !important; } #gh-ship-widget .si-link::before { content: "" !important; position: absolute !important; top: 0 !important; left: -60% !important; width: 40% !important; height: 100% !important; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent) !important; transform: skewX(-20deg) !important; animation: si-sweep 3.6s ease-in-out infinite !important; } #gh-ship-widget .si-link.ghost { background: #ffffff !important; color: #2a3ed6 !important; border: 1px solid #c9d6f5 !important; box-shadow: none !important; } #gh-ship-widget .si-link.ghost::before { display: none !important; } #gh-ship-widget .si-link svg { width: 15px !important; height: 15px !important; display: block !important; transition: transform .25s ease !important; } #gh-ship-widget .si-link:hover { transform: translateY(-2px) !important; color: #ffffff !important; box-shadow: 0 14px 26px -10px rgba(42,62,214,0.9) !important; } #gh-ship-widget .si-link.ghost:hover { color: #2a3ed6 !important; border-color: #2D5A27 !important; box-shadow: 0 10px 22px -14px rgba(42,62,214,0.6) !important; } #gh-ship-widget .si-link:hover svg { transform: translateX(4px) !important; } #gh-ship-widget .si-fine { font-size: 11.5px !important; line-height: 1.55 !important; color: #7a8399 !important; max-width: 640px !important; margin: 18px auto 0 !important; } /* ---------- KEYFRAMES ---------- */ @keyframes si-bar { to { background-position: 200% 0; } } @keyframes si-drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-10px,8px); } } @keyframes si-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-24px); } } @keyframes si-sway { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) translateY(-6px); } } @keyframes si-ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } } @keyframes si-shine { to { background-position: 200% center; } } @keyframes si-ping { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 80%,100% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } } @keyframes si-truck-drive { 0%, 7% { left: 0%; } 24%, 38% { left: 33.333%; } 54%, 68% { left: 66.666%; } 84%, 96% { left: 100%; } 100% { left: 0%; } } @keyframes si-fill-dynamic { 0%, 7% { width: 0%; } 24%, 38% { width: 33.333%; } 54%, 68% { width: 66.666%; } 84%, 96% { width: 100%; } 100% { width: 0%; } } @keyframes si-truck-vibe { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-2px) rotate(-1.5deg); } } @keyframes si-step2-glow { 0%, 22% { background: #ffffff; color: #2D5A27; border-color: #cbd5e1; transform: scale(1); } 24%, 96% { background: #2D5A27; color: #ffffff; border-color: #2D5A27; transform: scale(1.08); box-shadow: 0 4px 14px rgba(45,90,39,0.4); } 100% { background: #ffffff; color: #2D5A27; border-color: #cbd5e1; transform: scale(1); } } @keyframes si-step3-glow { 0%, 52% { background: #ffffff; color: #2D5A27; border-color: #cbd5e1; transform: scale(1); } 54%, 96% { background: #2D5A27; color: #ffffff; border-color: #2D5A27; transform: scale(1.08); box-shadow: 0 4px 14px rgba(45,90,39,0.4); } 100% { background: #ffffff; color: #2D5A27; border-color: #cbd5e1; transform: scale(1); } } @keyframes si-step4-glow { 0%, 82% { background: #f1f5f9; color: #64748b; border-color: #cbd5e1; transform: scale(1); } 84%, 96% { background: #1e3d1a; color: #4ade80; border-color: #4ade80; transform: scale(1.15); box-shadow: 0 6px 18px rgba(34,197,94,0.5); } 100% { background: #f1f5f9; color: #64748b; border-color: #cbd5e1; transform: scale(1); } } @keyframes si-fill { 0% { width: 0; } 75%,100% { width: 100%; } } @keyframes si-move { 0% { left: 0; } 75%,100% { left: 100%; } } @keyframes si-flip { 0% { transform: translateY(-40%); opacity: 0; } 100% { transform: none; opacity: 1; } } @keyframes si-blink { 50% { opacity: .25; } } @keyframes si-sweep { 0%,60% { left: -60%; } 100% { left: 130%; } } /* ---------- RESPONSIVE ---------- */ @media (max-width: 640px) { #gh-ship-widget .si-section { padding: 40px 16px 30px !important; border-radius: 18px !important; } #gh-ship-widget .si-title { font-size: 29px !important; } #gh-ship-widget .si-dots, #gh-ship-widget .si-leaf { display: none !important; } #gh-ship-widget .si-cut { padding: 14px !important; justify-content: center !important; } #gh-ship-widget .si-clock { width: 100% !important; justify-content: center !important; } #gh-ship-widget .si-dg { min-width: 58px !important; } #gh-ship-widget .si-timeline { padding: 22px 8px 18px !important; } #gh-ship-widget .si-track { top: 37px !important; left: 14% !important; right: 14% !important; } #gh-ship-widget .si-steps { gap: 2px !important; } #gh-ship-widget .si-step-t { font-size: 11.5px !important; } #gh-ship-widget .si-step-s { font-size: 10px !important; line-height: 1.3 !important; } #gh-ship-widget .si-step-d { font-size: 10px !important; padding: 3px 6px !important; white-space: normal !important; line-height: 1.3 !important; } #gh-ship-widget .si-num { width: 32px !important; height: 32px !important; font-size: 12px !important; } #gh-ship-widget .si-card { flex-basis: 140px !important; padding: 20px 12px !important; } #gh-ship-widget .si-card-big { font-size: 22px !important; } #gh-ship-widget .si-panel { flex-basis: 100% !important; padding: 18px !important; } } @media (prefers-reduced-motion: reduce) { #gh-ship-widget *, #gh-ship-widget *::before, #gh-ship-widget *::after { animation: none !important; } #gh-ship-widget.si-js .si-rv { opacity: 1 !important; transform: none !important; transition: none !important; } #gh-ship-widget .si-fill { width: 100% !important; } #gh-ship-widget .si-truck { left: 100% !important; } } #gh-welcome-widget, #gh-welcome-widget * { box-sizing: border-box !important; } #gh-welcome-widget { width: 100% !important; max-width: 100% !important; margin: 0 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; } #gh-welcome-widget p, #gh-welcome-widget h2 { margin: 0 !important; } /* ---------- CARD ---------- */ #gh-welcome-widget .gw-card { position: relative !important; overflow: hidden !important; max-width: 1240px !important; margin: 0 auto !important; background: radial-gradient(60% 80% at 100% 0%, rgba(76,110,245,0.12) 0%, rgba(76,110,245,0) 60%), linear-gradient(180deg, #f8f9ff 0%, #eef1fc 100%) !important; border: 1px solid #e0e6f8 !important; border-radius: 20px !important; padding: 48px 44px !important; display: grid !important; grid-template-columns: 1.15fr 0.85fr !important; align-items: center !important; gap: 40px !important; box-shadow: 0 20px 50px -24px rgba(20,27,82,0.25) !important; } #gh-welcome-widget .gw-card::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 4px !important; background: linear-gradient(90deg, #141b52, #2a3ed6, #9fb4ff, #2a3ed6, #141b52) !important; background-size: 200% 100% !important; animation: gw-bar 6s linear infinite !important; } #gh-welcome-widget .gw-dots { position: absolute !important; top: 24px !important; right: 24px !important; width: 160px !important; height: 120px !important; pointer-events: none !important; background-image: radial-gradient(rgba(76,110,245,0.25) 1.5px, transparent 1.5px) !important; background-size: 16px 16px !important; animation: gw-drift 10s ease-in-out infinite !important; } #gh-welcome-widget .gw-text { position: relative !important; z-index: 1 !important; width: 100% !important; } /* ---------- REVEAL ---------- */ #gh-welcome-widget.gw-js .gw-rv { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); } #gh-welcome-widget.gw-js .gw-image.gw-rv { transform: translateX(30px) scale(.96); } #gh-welcome-widget.gw-js.gw-in .gw-rv { opacity: 1; transform: none; } #gh-welcome-widget .d1 { transition-delay: .05s !important; } #gh-welcome-widget .d2 { transition-delay: .15s !important; } #gh-welcome-widget .d3 { transition-delay: .25s !important; } #gh-welcome-widget .d4 { transition-delay: .35s !important; } #gh-welcome-widget .d5 { transition-delay: .45s !important; } #gh-welcome-widget .d6 { transition-delay: .55s !important; } #gh-welcome-widget .d7 { transition-delay: .65s !important; } #gh-welcome-widget .d8 { transition-delay: .75s !important; } /* ---------- BRAND ---------- */ #gh-welcome-widget .gw-logo-row { display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 0 22px 0 !important; } #gh-welcome-widget .gw-logo-mark { position: relative !important; flex-shrink: 0 !important; width: 36px !important; height: 36px !important; border-radius: 10px !important; background: linear-gradient(135deg, #2D5A27, #2a3ed6) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 8px 18px -6px rgba(42,62,214,0.6) !important; } #gh-welcome-widget .gw-logo-mark::after { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 13px !important; border: 2px solid rgba(76,110,245,0.35) !important; animation: gw-ping 2.4s ease-out infinite !important; } #gh-welcome-widget .gw-logo-mark svg { width: 18px !important; height: 18px !important; display: block !important; } #gh-welcome-widget .gw-logo-word { font-size: 14px !important; font-weight: 800 !important; letter-spacing: 3px !important; color: #141b52 !important; } #gh-welcome-widget .gw-logo-word span { color: #2D5A27 !important; font-weight: 600 !important; letter-spacing: 2px !important; } #gh-welcome-widget .gw-eyebrow { display: flex !important; align-items: center !important; gap: 10px !important; color: #2a3ed6 !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; margin: 0 0 14px 0 !important; } #gh-welcome-widget .gw-eyebrow::before { content: "" !important; display: block !important; width: 26px !important; height: 2px !important; background: #2a3ed6 !important; } #gh-welcome-widget .gw-heading { margin: 0 0 16px 0 !important; color: #141b52 !important; font-size: 38px !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: -0.5px !important; } #gh-welcome-widget .gw-heading em { font-style: normal !important; background: linear-gradient(90deg, #2a3ed6, #6f8ff0, #2a3ed6) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; animation: gw-shine 4s linear infinite !important; } #gh-welcome-widget .gw-sub { margin: 0 0 30px 0 !important; color: #5b6478 !important; font-size: 15.5px !important; line-height: 1.65 !important; max-width: 490px !important; } #gh-welcome-widget .gw-sub b { color: #141b52 !important; } /* ---------- FEATURES ---------- */ #gh-welcome-widget .gw-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; gap: 14px !important; max-width: 520px !important; } #gh-welcome-widget .gw-feature { position: relative !important; overflow: hidden !important; background: #ffffff !important; border: 1px solid #e3e8f8 !important; border-radius: 14px !important; padding: 18px 18px 16px !important; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important; } #gh-welcome-widget .gw-feature::after { content: "" !important; position: absolute !important; left: 0 !important; bottom: 0 !important; height: 3px !important; width: 0 !important; background: linear-gradient(90deg, #2D5A27, #2a3ed6) !important; transition: width .35s ease !important; } #gh-welcome-widget .gw-feature:hover { transform: translateY(-4px) !important; border-color: #c5d0f5 !important; box-shadow: 0 16px 30px -14px rgba(42,62,214,0.4) !important; } #gh-welcome-widget .gw-feature:hover::after { width: 100% !important; } #gh-welcome-widget .gw-ico { width: 42px !important; height: 42px !important; border-radius: 11px !important; background: #e9edfd !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 0 12px 0 !important; transition: background .3s ease, transform .3s ease !important; } #gh-welcome-widget .gw-ico svg { width: 21px !important; height: 21px !important; display: block !important; transition: stroke .3s ease !important; } #gh-welcome-widget .gw-feature:hover .gw-ico { background: #2a3ed6 !important; transform: rotate(-6deg) scale(1.05) !important; } #gh-welcome-widget .gw-feature:hover .gw-ico svg { stroke: #ffffff !important; } #gh-welcome-widget .gw-f-title { margin: 0 0 4px 0 !important; font-size: 14.5px !important; font-weight: 700 !important; color: #141b52 !important; } #gh-welcome-widget .gw-f-sub { margin: 0 !important; font-size: 13px !important; line-height: 1.45 !important; color: #5b6478 !important; } /* ---------- VISUAL ---------- */ #gh-welcome-widget .gw-image { position: relative !important; z-index: 1 !important; width: 100% !important; max-width: 480px !important; margin: 0 auto !important; } #gh-welcome-widget .gw-visual { width: 100% !important; line-height: 0 !important; border-radius: 18px !important; overflow: hidden !important; box-shadow: 0 28px 50px -22px rgba(20,27,82,0.5) !important; } #gh-welcome-widget .gw-visual svg { width: 100% !important; height: auto !important; display: block !important; } #gh-welcome-widget .gw-float { animation: gw-float 5s ease-in-out infinite !important; } #gh-welcome-widget .gw-tool { transform-box: fill-box !important; transform-origin: bottom center !important; animation: gw-sway 4s ease-in-out infinite !important; } #gh-welcome-widget .gw-tool.t2 { animation-delay: .5s !important; } #gh-welcome-widget .gw-tool.t3 { animation-delay: 1s !important; } #gh-welcome-widget .gw-tool.t4 { animation-delay: 1.5s !important; } #gh-welcome-widget .gw-glint { animation: gw-glint 3s ease-in-out infinite !important; } #gh-welcome-widget .gw-glint.g2 { animation-delay: 1s !important; } #gh-welcome-widget .gw-glint.g3 { animation-delay: 2s !important; } #gh-welcome-widget .gw-leaf { transform-box: fill-box !important; transform-origin: bottom center !important; animation: gw-leaf 3.6s ease-in-out infinite !important; } #gh-welcome-widget .gw-leaf.l2 { animation-delay: .8s !important; } #gh-welcome-widget .gw-leaf.l3 { animation-delay: 1.6s !important; } #gh-welcome-widget .gw-spark { transform-box: fill-box !important; transform-origin: center !important; animation: gw-spark 2.6s ease-in-out infinite !important; } #gh-welcome-widget .gw-spark.s2 { animation-delay: .9s !important; } #gh-welcome-widget .gw-spark.s3 { animation-delay: 1.7s !important; } #gh-welcome-widget .gw-badge-name { position: absolute !important; left: 18px !important; bottom: 18px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; background: #ffffff !important; color: #141b52 !important; font-size: 12.5px !important; font-weight: 800 !important; letter-spacing: 1px !important; padding: 9px 14px !important; border-radius: 10px !important; box-shadow: 0 12px 26px -10px rgba(20,27,82,0.5) !important; animation: gw-float 6s ease-in-out infinite !important; } #gh-welcome-widget .gw-badge-name i { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #22c55e !important; display: block !important; animation: gw-dot 1.8s ease-out infinite !important; } #gh-welcome-widget .gw-badge-stat { position: absolute !important; top: 18px !important; right: 18px !important; background: rgba(255,255,255,0.14) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.3) !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; padding: 10px 14px !important; border-radius: 12px !important; line-height: 1.2 !important; animation: gw-float 6s ease-in-out 1.5s infinite !important; } #gh-welcome-widget .gw-badge-stat b { display: block !important; font-size: 18px !important; font-weight: 800 !important; } #gh-welcome-widget .gw-badge-stat small { font-size: 11px !important; font-weight: 600 !important; opacity: .85 !important; letter-spacing: .5px !important; } /* ---------- KEYFRAMES ---------- */ @keyframes gw-bar { to { background-position: 200% 0; } } @keyframes gw-drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-10px,8px); } } @keyframes gw-ping { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } } @keyframes gw-shine { to { background-position: 200% center; } } @keyframes gw-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes gw-sway { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } } @keyframes gw-glint { 0%,100% { opacity: 0; } 50% { opacity: .9; } } @keyframes gw-leaf { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } } @keyframes gw-spark { 0%,100% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; transform: scale(1); } } @keyframes gw-dot { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 80%,100% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } } /* ---------- RESPONSIVE ---------- */ @media (max-width: 768px) { #gh-welcome-widget .gw-card { grid-template-columns: 1fr !important; padding: 34px 20px !important; gap: 32px !important; border-radius: 16px !important; } #gh-welcome-widget .gw-image { max-width: 440px !important; margin: 0 auto !important; } #gh-welcome-widget .gw-heading { font-size: 28px !important; } #gh-welcome-widget .gw-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } #gh-welcome-widget .gw-feature { padding: 14px 12px !important; } #gh-welcome-widget .gw-ico { width: 36px !important; height: 36px !important; } #gh-welcome-widget .gw-dots { display: none !important; } } @media (prefers-reduced-motion: reduce) { #gh-welcome-widget *, #gh-welcome-widget *::before, #gh-welcome-widget *::after { animation: none !important; } #gh-welcome-widget.gw-js .gw-rv { opacity: 1 !important; transform: none !important; transition: none !important; } } #YardCraft-trust-bar-widget, #YardCraft-trust-bar-widget * { box-sizing: border-box !important; } #YardCraft-trust-bar-widget { width: 100% !important; max-width: 100% !important; margin: 0 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; } #YardCraft-trust-bar-widget p { margin: 0 !important; } /* ---------- BAR ---------- */ #YardCraft-trust-bar-widget .gh-container { position: relative !important; overflow: hidden !important; max-width: 1300px !important; margin: 0 auto !important; display: flex !important; align-items: stretch !important; background: radial-gradient(60% 140% at 85% 0%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 60%), linear-gradient(100deg, #2a3ed6 0%, #3d5ce0 35%, #2D5A27 60%, #1e3d1a 100%) !important; border-radius: 16px !important; box-shadow: 0 18px 40px -18px rgba(42,62,214,0.65) !important; isolation: isolate !important; } /* moving light sweep */ #YardCraft-trust-bar-widget .gh-container::after { content: "" !important; position: absolute !important; top: 0 !important; left: -40% !important; width: 30% !important; height: 100% !important; z-index: 3 !important; pointer-events: none !important; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.12), transparent) !important; transform: skewX(-18deg) !important; animation: gh-sweep 7s ease-in-out infinite !important; } /* fine grid texture */ #YardCraft-trust-bar-widget .gh-container::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px) !important; background-size: 30px 30px !important; } /* ---------- BRAND TAG (fixed, left) ---------- */ #YardCraft-trust-bar-widget .gh-tag { position: relative !important; z-index: 4 !important; flex: 0 0 auto !important; display: flex !important; align-items: center !important; gap: 10px !important; padding: 0 22px 0 20px !important; background: #141b52 !important; color: #ffffff !important; } #YardCraft-trust-bar-widget .gh-tag::after { content: "" !important; position: absolute !important; top: 0 !important; right: -18px !important; bottom: 0 !important; width: 18px !important; background: #141b52 !important; clip-path: polygon(0 0, 100% 50%, 0 100%) !important; } #YardCraft-trust-bar-widget .gh-tag-mark { position: relative !important; width: 34px !important; height: 34px !important; border-radius: 9px !important; flex: 0 0 34px !important; background: linear-gradient(135deg, #ffffff, #dbe3ff) !important; display: flex !important; align-items: center !important; justify-content: center !important; } #YardCraft-trust-bar-widget .gh-tag-mark::after { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 12px !important; border: 2px solid rgba(255,255,255,0.35) !important; animation: gh-ring 2.4s ease-out infinite !important; } #YardCraft-trust-bar-widget .gh-tag-mark svg { width: 18px !important; height: 18px !important; display: block !important; } #YardCraft-trust-bar-widget .gh-tag-t { font-size: 13px !important; font-weight: 800 !important; letter-spacing: 2.5px !important; line-height: 1.2 !important; color: #ffffff !important; } #YardCraft-trust-bar-widget .gh-tag-s { font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 1.6px !important; text-transform: uppercase !important; color: #9fb4ff !important; } /* ---------- MARQUEE ---------- */ #YardCraft-trust-bar-widget .gh-viewport { position: relative !important; z-index: 2 !important; flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; padding: 20px 0 !important; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%) !important; mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%) !important; } #YardCraft-trust-bar-widget .gh-track { display: flex !important; width: max-content !important; animation: gh-scroll 34s linear infinite !important; } #YardCraft-trust-bar-widget .gh-container:hover .gh-track { animation-play-state: paused !important; } #YardCraft-trust-bar-widget .gh-item { display: flex !important; align-items: center !important; gap: 14px !important; padding: 0 30px !important; white-space: nowrap !important; } #YardCraft-trust-bar-widget .gh-sep { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; padding: 0 4px !important; } #YardCraft-trust-bar-widget .gh-sep svg { width: 14px !important; height: 14px !important; display: block !important; opacity: .55 !important; } #YardCraft-trust-bar-widget .gh-icon { position: relative !important; flex: 0 0 auto !important; width: 46px !important; height: 46px !important; border-radius: 13px !important; background: rgba(255,255,255,0.16) !important; border: 1px solid rgba(255,255,255,0.28) !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: background .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1) !important; } #YardCraft-trust-bar-widget .gh-icon svg { width: 22px !important; height: 22px !important; display: block !important; transition: stroke .3s ease !important; } #YardCraft-trust-bar-widget .gh-item:hover .gh-icon { background: #ffffff !important; transform: scale(1.08) rotate(-6deg) !important; } #YardCraft-trust-bar-widget .gh-item:hover .gh-icon svg { stroke: #2a3ed6 !important; } #YardCraft-trust-bar-widget .gh-text { display: flex !important; flex-direction: column !important; line-height: 1.35 !important; } #YardCraft-trust-bar-widget .gh-title { color: #ffffff !important; font-weight: 800 !important; font-size: 14px !important; letter-spacing: .6px !important; text-transform: uppercase !important; } #YardCraft-trust-bar-widget .gh-sub { color: rgba(255,255,255,0.85) !important; font-weight: 400 !important; font-size: 12.5px !important; } /* ---------- KEYFRAMES ---------- */ @keyframes gh-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes gh-sweep { 0% { left: -40%; } 55%,100% { left: 130%; } } @keyframes gh-ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } } /* ---------- RESPONSIVE ---------- */ @media (max-width: 640px) { #YardCraft-trust-bar-widget .gh-container { border-radius: 12px !important; } #YardCraft-trust-bar-widget .gh-tag { padding: 0 12px !important; gap: 0 !important; } #YardCraft-trust-bar-widget .gh-tag-txt { display: none !important; } #YardCraft-trust-bar-widget .gh-tag::after { right: -12px !important; width: 12px !important; } #YardCraft-trust-bar-widget .gh-tag-mark { width: 30px !important; height: 30px !important; flex-basis: 30px !important; } #YardCraft-trust-bar-widget .gh-viewport { padding: 16px 0 !important; } #YardCraft-trust-bar-widget .gh-item { padding: 0 20px !important; gap: 10px !important; } #YardCraft-trust-bar-widget .gh-icon { width: 38px !important; height: 38px !important; border-radius: 11px !important; } #YardCraft-trust-bar-widget .gh-icon svg { width: 19px !important; height: 19px !important; } #YardCraft-trust-bar-widget .gh-title { font-size: 12.5px !important; } #YardCraft-trust-bar-widget .gh-sub { font-size: 11.5px !important; } } @media (prefers-reduced-motion: reduce) { #YardCraft-trust-bar-widget *, #YardCraft-trust-bar-widget *::before, #YardCraft-trust-bar-widget *::after, #YardCraft-trust-bar-widget .gh-container::after { animation: none !important; } #YardCraft-trust-bar-widget .gh-viewport { overflow-x: auto !important; } } /* ========================================================================== YARDCRAFT MASTER RESPONSIVE OVERRIDES Edge-to-Edge Desktop (>= 992px) + Native Mobile (<= 768px) ========================================================================== */ /* 1. Global Resets */ *, *::before, *::after { box-sizing: border-box !important; } html, body { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; position: relative !important; } /* ========================================================================== YARDCRAFT TOOLS LLC — FLAWLESS SYMMETRIC FULL-BLEED STYLESHEET Eliminates all right-side voids, ensures 100% edge-to-edge backgrounds, and perfectly centers all content with equal left & right margins. ========================================================================== */ /* -------------------------------------------------------------------------- 1. GLOBAL CONTAINER RESETS & ELEMENTOR FLEX STRETCH -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box !important; } html, body { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; position: relative !important; -webkit-text-size-adjust: 100% !important; } /* Woodmart & Elementor Full-Bleed Containers */ .home .website-wrapper, .home .main-page-wrapper, .home .main-page-wrapper > .container, .home .content-layout-wrapper, .home .site-content, .home .entry-content, .home article.post-11, .home .elementor-14 { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; border: none !important; box-sizing: border-box !important; } .home .main-page-wrapper { padding-top: 0 !important; padding-bottom: 0 !important; background: transparent !important; } /* Remove Elementor spacer widgets */ .home .elementor-widget-spacer, .home .elementor-spacer, .home .e-con:has(> .elementor-widget-spacer) { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* CRUCIAL FIX: Force Elementor flex containers to stretch children to 100% width */ .home .elementor-14 > .e-con, .home .elementor-14 .e-con { width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* CRUCIAL FIX: Force all Elementor widget containers to be 100% full width (prevent 1260px / 1160px shrink) */ .home .elementor-14 > .e-con > .elementor-widget, .home .elementor-14 > .e-con > .elementor-widget-html, .home .elementor-14 .elementor-widget, .home .elementor-14 .elementor-widget-container { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* -------------------------------------------------------------------------- 2. 100% FULL-BLEED SECTION BANDS (EDGE-TO-EDGE ON ALL SCREENS) -------------------------------------------------------------------------- */ #gth-hero-widget, #gh-cat-widget, #gh-ship-widget, #gh-welcome-widget, #YardCraft-trust-bar-widget { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; display: block !important; position: relative !important; } #gth-hero-widget { background: radial-gradient(circle at 82% 15%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 40%), linear-gradient(135deg, #2a3ed6 0%, #24308f 55%, #141b52 100%) !important; border-bottom: 1px solid rgba(255,255,255,0.15) !important; overflow: hidden !important; } #gh-cat-widget { background: radial-gradient(55% 60% at 100% 0%, rgba(76,110,245,0.13) 0%, rgba(76,110,245,0) 60%), radial-gradient(45% 50% at 0% 100%, rgba(76,110,245,0.10) 0%, rgba(76,110,245,0) 60%), linear-gradient(180deg, #f5f7fe 0%, #eaeffc 100%) !important; border-top: 1px solid #dfe6f7 !important; border-bottom: 1px solid #dfe6f7 !important; overflow: hidden !important; } #gh-ship-widget { background: radial-gradient(55% 70% at 100% 0%, rgba(76,110,245,0.13) 0%, rgba(76,110,245,0) 60%), radial-gradient(45% 60% at 0% 100%, rgba(76,110,245,0.10) 0%, rgba(76,110,245,0) 60%), linear-gradient(180deg, #f5f7fe 0%, #eaeffc 100%) !important; border-top: 1px solid #dfe6f7 !important; border-bottom: 1px solid #dfe6f7 !important; overflow: hidden !important; } #gh-welcome-widget { background: radial-gradient(60% 80% at 100% 0%, rgba(76,110,245,0.12) 0%, rgba(76,110,245,0) 60%), linear-gradient(180deg, #f8f9ff 0%, #eef1fc 100%) !important; border-top: 1px solid #e0e6f8 !important; border-bottom: 1px solid #e0e6f8 !important; overflow: hidden !important; } #YardCraft-trust-bar-widget { background: radial-gradient(60% 140% at 85% 0%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 60%), linear-gradient(100deg, #2a3ed6 0%, #3d5ce0 35%, #2D5A27 60%, #1e3d1a 100%) !important; border-top: 1px solid rgba(255,255,255,0.15) !important; overflow: hidden !important; } /* -------------------------------------------------------------------------- 3. INNER CENTERED CONTAINERS (EQUAL LEFT & RIGHT SPACING) -------------------------------------------------------------------------- */ #gth-hero-widget .ghw-slider, #gh-cat-widget .gc-section, #gh-ship-widget .si-section, #gh-welcome-widget .gw-card, #YardCraft-trust-bar-widget .gh-container { position: relative !important; width: 100% !important; max-width: 1360px !important; margin-left: auto !important; margin-right: auto !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; border: none !important; box-sizing: border-box !important; } #gth-hero-widget .ghw-section { padding: 0 !important; background: transparent !important; } /* Ensure reveal elements are always crisp & visible */ #gh-cat-widget .gc-rv, #gh-ship-widget .si-rv, #gh-welcome-widget .gw-rv, #gth-hero-widget .ghw-rv { opacity: 1 !important; transform: none !important; visibility: visible !important; } /* -------------------------------------------------------------------------- 4. DESKTOP VIEWPORT (>= 992px) -------------------------------------------------------------------------- */ @media (min-width: 992px) { /* HERO */ #gth-hero-widget .ghw-slide { display: grid !important; grid-template-columns: 1.12fr 0.88fr !important; gap: 48px !important; align-items: center !important; padding: 64px 32px !important; max-width: 1360px !important; margin: 0 auto !important; box-sizing: border-box !important; } #gth-hero-widget .ghw-title { font-size: 50px !important; line-height: 1.1 !important; } #gth-hero-widget .ghw-desc { font-size: 16.5px !important; line-height: 1.65 !important; max-width: 530px !important; } #gth-hero-widget .ghw-tilt { max-width: 540px !important; } /* CATEGORIES & PRODUCTS */ #gh-cat-widget .gc-section { padding: 64px 32px !important; max-width: 1360px !important; margin: 0 auto !important; } #gh-cat-widget .gc-wrap { max-width: 100% !important; margin: 0 auto !important; } #gh-cat-widget .gc-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; align-items: stretch !important; } #gh-cat-widget .gc-cmp { max-width: 1240px !important; margin: 48px auto 0 !important; } /* SHIPPING INFORMATION */ #gh-ship-widget .si-section { padding: 64px 32px !important; text-align: center !important; max-width: 1360px !important; margin: 0 auto !important; } #gh-ship-widget .si-wrap { max-width: 100% !important; margin: 0 auto !important; } #gh-ship-widget .si-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; } #gh-ship-widget .si-info { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; } /* WELCOME SECTION */ #gh-welcome-widget .gw-card { display: grid !important; grid-template-columns: 1.15fr 0.85fr !important; gap: 48px !important; padding: 64px 32px !important; align-items: center !important; max-width: 1360px !important; margin: 0 auto !important; } /* TRUST BAR */ #YardCraft-trust-bar-widget .gh-container { padding: 24px 32px !important; max-width: 1360px !important; margin: 0 auto !important; display: flex !important; justify-content: space-around !important; align-items: center !important; } } /* -------------------------------------------------------------------------- 5. TABLET VIEWPORT (769px - 991px) -------------------------------------------------------------------------- */ @media (max-width: 991px) and (min-width: 769px) { #gth-hero-widget .ghw-slide { display: flex !important; flex-direction: column !important; padding: 44px 24px !important; gap: 32px !important; max-width: 100% !important; box-sizing: border-box !important; } #gth-hero-widget .ghw-title { font-size: 38px !important; } #gh-cat-widget .gc-section { padding: 44px 24px !important; } #gh-cat-widget .gc-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; } #gh-ship-widget .si-section { padding: 44px 24px !important; } #gh-ship-widget .si-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } #gh-ship-widget .si-info { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; } #gh-welcome-widget .gw-card { display: flex !important; flex-direction: column !important; padding: 44px 24px !important; gap: 32px !important; } #gh-welcome-widget .gw-heading { font-size: 34px !important; } } /* -------------------------------------------------------------------------- 6. MOBILE VIEWPORT (<= 768px) — FLAWLESS ZERO OVERFLOW RESPONSIVENESS -------------------------------------------------------------------------- */ @media (max-width: 768px) { html, body, .website-wrapper, .main-page-wrapper, .main-page-wrapper > .container, .content-layout-wrapper, .site-content, .entry-content, #gth-hero-widget, #gh-cat-widget, #gh-ship-widget, #gh-welcome-widget, #YardCraft-trust-bar-widget { overflow-x: hidden !important; max-width: 100vw !important; width: 100% !important; box-sizing: border-box !important; } /* HERO */ #gth-hero-widget .ghw-slide { display: flex !important; flex-direction: column !important; padding: 24px 16px 28px !important; gap: 20px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } #gth-hero-widget .ghw-title { font-size: 28px !important; line-height: 1.15 !important; margin-bottom: 12px !important; } #gth-hero-widget .ghw-desc { font-size: 13.5px !important; line-height: 1.5 !important; margin-bottom: 18px !important; } #gth-hero-widget .ghw-tags { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-bottom: 18px !important; } #gth-hero-widget .ghw-tag { font-size: 11px !important; padding: 5px 10px !important; } #gth-hero-widget .ghw-actions { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; } #gth-hero-widget .ghw-btn { width: 100% !important; padding: 13px 18px !important; font-size: 14px !important; justify-content: center !important; } #gth-hero-widget .ghw-perks { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; margin-top: 18px !important; padding-top: 14px !important; } #gth-hero-widget .ghw-perk { font-size: 10.5px !important; gap: 6px !important; } #gth-hero-widget .ghw-perk strong { font-size: 11.5px !important; } #gth-hero-widget .ghw-perk-icon { width: 26px !important; height: 26px !important; } #gth-hero-widget .ghw-visual { width: 100% !important; max-width: 100% !important; } #gth-hero-widget .ghw-tilt { max-width: 100% !important; } #gth-hero-widget .ghw-tilt-inner { height: 230px !important; border-radius: 16px !important; } #gth-hero-widget .ghw-chip { padding: 7px 11px !important; font-size: 11px !important; } #gth-hero-widget .ghw-chip-a { top: 10px !important; left: 8px !important; } #gth-hero-widget .ghw-chip-b { bottom: 10px !important; right: 8px !important; } #gth-hero-widget .ghw-badges-strip { display: none !important; } /* CATEGORIES & PRODUCTS */ #gh-cat-widget .gc-section { padding: 28px 14px 24px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } #gh-cat-widget .gc-head { margin-bottom: 20px !important; } #gh-cat-widget .gc-head h2 { font-size: 24px !important; line-height: 1.2 !important; } #gh-cat-widget .gc-head p { font-size: 13px !important; line-height: 1.5 !important; } #gh-cat-widget .gc-filter-bar { display: none !important; } #gh-cat-widget .gc-banner { display: none !important; } #gh-cat-widget .gc-grid { display: flex !important; flex-direction: column !important; gap: 16px !important; width: 100% !important; } #gh-cat-widget .gc-card { width: 100% !important; border-radius: 16px !important; } #gh-cat-widget .gc-img-box { height: 220px !important; } #gh-cat-widget .gc-body { padding: 16px !important; } #gh-cat-widget .gc-b-title { font-size: 16px !important; line-height: 1.3 !important; } #gh-cat-widget .gc-price-val { font-size: 20px !important; } #gh-cat-widget .gc-foot { flex-direction: column !important; gap: 10px !important; align-items: stretch !important; } #gh-cat-widget .gc-btn { width: 100% !important; justify-content: center !important; padding: 11px 16px !important; } #gh-cat-widget .gc-cmp { margin-top: 28px !important; border-radius: 14px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } #gh-cat-widget .gc-table-wrap { overflow-x: auto !important; width: 100% !important; } #gh-cat-widget .gc-tbl { min-width: 500px !important; font-size: 12px !important; } /* SHIPPING INFORMATION */ #gh-ship-widget .si-section { padding: 28px 14px 24px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } #gh-ship-widget .si-title { font-size: 26px !important; line-height: 1.2 !important; } #gh-ship-widget .si-desc { font-size: 13px !important; line-height: 1.5 !important; } #gh-ship-widget .si-notice { padding: 10px 14px !important; font-size: 11.5px !important; border-radius: 12px !important; } #gh-ship-widget .si-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin: 20px 0 !important; } #gh-ship-widget .si-step { padding: 14px 10px !important; border-radius: 12px !important; } #gh-ship-widget .si-num { width: 32px !important; height: 32px !important; font-size: 13px !important; } #gh-ship-widget .si-step h4 { font-size: 13px !important; } #gh-ship-widget .si-step p { font-size: 11px !important; } #gh-ship-widget .si-badge { font-size: 10px !important; padding: 4px 8px !important; } #gh-ship-widget .si-info { display: flex !important; flex-direction: column !important; gap: 12px !important; } #gh-ship-widget .si-card { padding: 16px 14px !important; border-radius: 14px !important; } #gh-ship-widget .si-actions { flex-direction: column !important; gap: 8px !important; margin-top: 18px !important; } #gh-ship-widget .si-btn { width: 100% !important; justify-content: center !important; padding: 11px 16px !important; } /* WELCOME SECTION */ #gh-welcome-widget .gw-card { padding: 24px 14px !important; display: flex !important; flex-direction: column !important; gap: 20px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } #gh-welcome-widget .gw-heading { font-size: 26px !important; line-height: 1.2 !important; } #gh-welcome-widget .gw-lead { font-size: 13px !important; line-height: 1.5 !important; } #gh-welcome-widget .gw-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } #gh-welcome-widget .gw-item { padding: 12px 10px !important; border-radius: 12px !important; } #gh-welcome-widget .gw-item h4 { font-size: 13px !important; } #gh-welcome-widget .gw-item p { font-size: 11px !important; } #gh-welcome-widget .gw-image { width: 100% !important; max-width: 280px !important; margin: 0 auto !important; } /* TRUST BAR */ #YardCraft-trust-bar-widget .gh-container { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; padding: 18px 12px !important; } #YardCraft-trust-bar-widget .gh-item { padding: 8px !important; } #YardCraft-trust-bar-widget .gh-item strong { font-size: 12px !important; } #YardCraft-trust-bar-widget .gh-item span { font-size: 10px !important; } } /* Extra small mobile (<= 380px) */ @media (max-width: 380px) { #gh-ship-widget .si-grid { grid-template-columns: 1fr !important; } #gh-welcome-widget .gw-grid { grid-template-columns: 1fr !important; } #gth-hero-widget .ghw-title { font-size: 24px !important; } }