.product-card-modern .product-image-container { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; } .product-card-modern .product-overlay { position: absolute !important; top: 0; right: 0; bottom: 0; left: 0; display: flex !important; align-items: center !important; justify-content: center !important; opacity: 0 !important; background: transparent !important; pointer-events: none; transition: opacity 0.2s ease !important; } .product-card-modern .product-overlay .quick-view-btn { pointer-events: auto; } .product-card-modern:hover .product-overlay, .product-card-modern.touch-active .product-overlay { opacity: 1 !important; } .product-card-modern:hover .quick-view-btn, .product-card-modern.touch-active .quick-view-btn { opacity: 1 !important; } .product-card-modern .quick-view-btn, .product-card .quick-view-btn { background: rgba(255, 255, 255, 0.95) !important; color: #111 !important; border: none !important; width: auto !important; height: auto !important; border-radius: 999px !important; font-size: 0.85rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; padding: 12px 32px !important; opacity: 0 !important; transition: opacity 0.2s ease, transform 0.2s !important; font-weight: 700 !important; text-transform: uppercase !important; gap: 10px !important; min-width: 155px !important; min-height: 42px !important; white-space: nowrap !important; } .product-card-modern .quick-view-btn::after, .product-card .quick-view-btn::after { content: none !important; } .product-card-modern .quick-view-btn i, .product-card .quick-view-btn i { font-size: 1rem !important; color: inherit !important; pointer-events: none !important; margin: 0 !important; } @media (max-width: 768px) { .product-card-modern .product-overlay, .product-card .product-overlay { display: flex !important; opacity: 1 !important; background: transparent !important; } /* Force circular button on mobile */ .product-card-modern .quick-view-btn, .product-card .quick-view-btn { width: 45px !important; height: 45px !important; min-width: 0 !important; border-radius: 50% !important; padding: 0 !important; font-size: 0 !important; opacity: 1 !important; pointer-events: auto !important; } .product-card-modern .quick-view-btn::after, .product-card .quick-view-btn::after { content: none !important; } .product-card-modern .product-overlay .quick-view-btn { pointer-events: auto; } .product-card-modern .mobile-quick-view-btn { display: flex !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; background: rgba(255, 255, 255, 0.9) !important; color: #660000 !important; border: none !important; width: 50px !important; height: 50px !important; border-radius: 50% !important; font-size: 1.2rem !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; padding: 0 !important; pointer-events: auto !important; } } /*! * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) * Copyright 2023 Fonticons, Inc. */ .fa{font-family:var(--fa-style-family,"Font Awesome 6 Free");font-weight:var(--fa-style,900)}.fa,.fa-brands,.fa-classic,.fa-regular,.fa-sharp,.fa-solid,.fab,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.fa-classic,.fa-regular,.fa-solid,.far,.fas{font-family:"Font Awesome 6 Free"}.fa-brands,.fab{font-family:"Font Awesome 6 Brands"}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-2xs{font-size:.625em;line-height:.1em;vertical-align:.225em}.fa-xs{font-size:.75em;line-height:.08333em;vertical-align:.125em}.fa-sm{font-size:.875em;line-height:.07143em;vertical-align:.05357em}.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}.fa-xl{font-size:1.5em;line-height:.04167em;vertical-align:-.125em}.fa-2xl{font-size:2em;line-height:.03125em;vertical-align:-.1875em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:var(--fa-li-margin,2.5em);padding-left:0}.fa-ul>li{position:relative}.fa-li{left:calc(var(--fa-li-width, 2em)*-1);position:absolute;text-align:center;width:var(--fa-li-width,2em);line-height:inherit}.fa-border{border-radius:var(--fa-border-radius,.1em);border:var(--fa-border-width,.08em) var(--fa-border-style,solid) var(--fa-border-color,#eee);padding:var(--fa-border-padding,.2em .25em .15em)}.fa-pull-left{float:left;margin-right:var(--fa-pull-margin,.3em)}.fa-pull-right{float:right;margin-left:var(--fa-pull-margin,.3em)}.fa-beat{-webkit-animation-name:fa-beat;animation-name:fa-beat;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,ease-in-out);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-bounce{-webkit-animation-name:fa-bounce;animation-name:fa-bounce;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1))}.fa-fade{-webkit-animation-name:fa-fade;animation-name:fa-fade;-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-beat-fade,.fa-fade{-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s)}.fa-beat-fade{-webkit-animation-name:fa-beat-fade;animation-name:fa-beat-fade;-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-flip{-webkit-animation-name:fa-flip;animation-name:fa-flip;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,ease-in-out);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-shake{-webkit-animation-name:fa-shake;animation-name:fa-shake;-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,linear);animation-timing-function:var(--fa-animation-timing,linear)}.fa-shake,.fa-spin{-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal)}.fa-spin{-webkit-animation-name:fa-spin;animation-name:fa-spin;-webkit-animation-duration:var(--fa-animation-duration,2s);animation-duration:var(--fa-animation-duration,2s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,linear);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-reverse{--fa-animation-direction:reverse}.fa-pulse,.fa-spin-pulse{-webkit-animation-name:fa-spin;animation-name:fa-spin;-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,steps(8));animation-timing-function:var(--fa-animation-timing,steps(8))}@media (prefers-reduced-motion:reduce){.fa-beat,.fa-beat-fade,.fa-bounce,.fa-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse{-webkit-animation-delay:-1ms;animation-delay:-1ms;-webkit-animation-duration:1ms;animation-duration:1ms;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s}}@-webkit-keyframes fa-beat{0%,90%{-webkit-transform:scale(1);transform:scale(1)}45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}}@keyframes fa-beat{0%,90%{-webkit-transform:scale(1);transform:scale(1)}45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}}@-webkit-keyframes fa-bounce{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{-webkit-transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}to{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}@keyframes fa-bounce{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{-webkit-transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}to{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}@-webkit-keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@-webkit-keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}}@keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}}@-webkit-keyframes fa-flip{50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@keyframes fa-flip{50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@-webkit-keyframes fa-shake{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}8%,24%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}40%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes fa-shake{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}8%,24%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}40%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.fa-rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa-flip-vertical{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1);transform:scale(-1)}.fa-rotate-by{-webkit-transform:rotate(var(--fa-rotate-angle,none));transform:rotate(var(--fa-rotate-angle,none))}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%;z-index:var(--fa-stack-z-index,auto)}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:var(--fa-inverse,#fff)} .fa-0:before{content:"\30"}.fa-1:before{content:"\31"}.fa-2:before{content:"\32"}.fa-3:before{content:"\33"}.fa-4:before{content:"\34"}.fa-5:before{content:"\35"}.fa-6:before{content:"\36"}.fa-7:before{content:"\37"}.fa-8:before{content:"\38"}.fa-9:before{content:"\39"}.fa-fill-drip:before{content:"\f576"}.fa-arrows-to-circle:before{content:"\e4bd"}.fa-chevron-circle-right:before,.fa-circle-chevron-right:before{content:"\f138"}.fa-at:before{content:"\40"}.fa-trash-alt:before,.fa-trash-can:before{content:"\f2ed"}.fa-text-height:before{content:"\f034"}.fa-user-times:before,.fa-user-xmark:before{content:"\f235"}.fa-stethoscope:before{content:"\f0f1"}.fa-comment-alt:before,.fa-message:before{content:"\f27a"}.fa-info:before{content:"\f129"}.fa-compress-alt:before,.fa-down-left-and-up-right-to-center:before{content:"\f422"}.fa-explosion:before{content:"\e4e9"}.fa-file-alt:before,.fa-file-lines:before,.fa-file-text:before{content:"\f15c"}.fa-wave-square:before{content:"\f83e"}.fa-ring:before{content:"\f70b"}.fa-building-un:before{content:"\e4d9"}.fa-dice-three:before{content:"\f527"}.fa-calendar-alt:before,.fa-calendar-days:before{content:"\f073"}.fa-anchor-circle-check:before{content:"\e4aa"}.fa-building-circle-arrow-right:before{content:"\e4d1"}.fa-volleyball-ball:before,.fa-volleyball:before{content:"\f45f"}.fa-arrows-up-to-line:before{content:"\e4c2"}.fa-sort-desc:before,.fa-sort-down:before{content:"\f0dd"}.fa-circle-minus:before,.fa-minus-circle:before{content:"\f056"}.fa-door-open:before{content:"\f52b"}.fa-right-from-bracket:before,.fa-sign-out-alt:before{content:"\f2f5"}.fa-atom:before{content:"\f5d2"}.fa-soap:before{content:"\e06e"}.fa-heart-music-camera-bolt:before,.fa-icons:before{content:"\f86d"}.fa-microphone-alt-slash:before,.fa-microphone-lines-slash:before{content:"\f539"}.fa-bridge-circle-check:before{content:"\e4c9"}.fa-pump-medical:before{content:"\e06a"}.fa-fingerprint:before{content:"\f577"}.fa-hand-point-right:before{content:"\f0a4"}.fa-magnifying-glass-location:before,.fa-search-location:before{content:"\f689"}.fa-forward-step:before,.fa-step-forward:before{content:"\f051"}.fa-face-smile-beam:before,.fa-smile-beam:before{content:"\f5b8"}.fa-flag-checkered:before{content:"\f11e"}.fa-football-ball:before,.fa-football:before{content:"\f44e"}.fa-school-circle-exclamation:before{content:"\e56c"}.fa-crop:before{content:"\f125"}.fa-angle-double-down:before,.fa-angles-down:before{content:"\f103"}.fa-users-rectangle:before{content:"\e594"}.fa-people-roof:before{content:"\e537"}.fa-people-line:before{content:"\e534"}.fa-beer-mug-empty:before,.fa-beer:before{content:"\f0fc"}.fa-diagram-predecessor:before{content:"\e477"}.fa-arrow-up-long:before,.fa-long-arrow-up:before{content:"\f176"}.fa-burn:before,.fa-fire-flame-simple:before{content:"\f46a"}.fa-male:before,.fa-person:before{content:"\f183"}.fa-laptop:before{content:"\f109"}.fa-file-csv:before{content:"\f6dd"}.fa-menorah:before{content:"\f676"}.fa-truck-plane:before{content:"\e58f"}.fa-record-vinyl:before{content:"\f8d9"}.fa-face-grin-stars:before,.fa-grin-stars:before{content:"\f587"}.fa-bong:before{content:"\f55c"}.fa-pastafarianism:before,.fa-spaghetti-monster-flying:before{content:"\f67b"}.fa-arrow-down-up-across-line:before{content:"\e4af"}.fa-spoon:before,.fa-utensil-spoon:before{content:"\f2e5"}.fa-jar-wheat:before{content:"\e517"}.fa-envelopes-bulk:before,.fa-mail-bulk:before{content:"\f674"}.fa-file-circle-exclamation:before{content:"\e4eb"}.fa-circle-h:before,.fa-hospital-symbol:before{content:"\f47e"}.fa-pager:before{content:"\f815"}.fa-address-book:before,.fa-contact-book:before{content:"\f2b9"}.fa-strikethrough:before{content:"\f0cc"}.fa-k:before{content:"\4b"}.fa-landmark-flag:before{content:"\e51c"}.fa-pencil-alt:before,.fa-pencil:before{content:"\f303"}.fa-backward:before{content:"\f04a"}.fa-caret-right:before{content:"\f0da"}.fa-comments:before{content:"\f086"}.fa-file-clipboard:before,.fa-paste:before{content:"\f0ea"}.fa-code-pull-request:before{content:"\e13c"}.fa-clipboard-list:before{content:"\f46d"}.fa-truck-loading:before,.fa-truck-ramp-box:before{content:"\f4de"}.fa-user-check:before{content:"\f4fc"}.fa-vial-virus:before{content:"\e597"}.fa-sheet-plastic:before{content:"\e571"}.fa-blog:before{content:"\f781"}.fa-user-ninja:before{content:"\f504"}.fa-person-arrow-up-from-line:before{content:"\e539"}.fa-scroll-torah:before,.fa-torah:before{content:"\f6a0"}.fa-broom-ball:before,.fa-quidditch-broom-ball:before,.fa-quidditch:before{content:"\f458"}.fa-toggle-off:before{content:"\f204"}.fa-archive:before,.fa-box-archive:before{content:"\f187"}.fa-person-drowning:before{content:"\e545"}.fa-arrow-down-9-1:before,.fa-sort-numeric-desc:before,.fa-sort-numeric-down-alt:before{content:"\f886"}.fa-face-grin-tongue-squint:before,.fa-grin-tongue-squint:before{content:"\f58a"}.fa-spray-can:before{content:"\f5bd"}.fa-truck-monster:before{content:"\f63b"}.fa-w:before{content:"\57"}.fa-earth-africa:before,.fa-globe-africa:before{content:"\f57c"}.fa-rainbow:before{content:"\f75b"}.fa-circle-notch:before{content:"\f1ce"}.fa-tablet-alt:before,.fa-tablet-screen-button:before{content:"\f3fa"}.fa-paw:before{content:"\f1b0"}.fa-cloud:before{content:"\f0c2"}.fa-trowel-bricks:before{content:"\e58a"}.fa-face-flushed:before,.fa-flushed:before{content:"\f579"}.fa-hospital-user:before{content:"\f80d"}.fa-tent-arrow-left-right:before{content:"\e57f"}.fa-gavel:before,.fa-legal:before{content:"\f0e3"}.fa-binoculars:before{content:"\f1e5"}.fa-microphone-slash:before{content:"\f131"}.fa-box-tissue:before{content:"\e05b"}.fa-motorcycle:before{content:"\f21c"}.fa-bell-concierge:before,.fa-concierge-bell:before{content:"\f562"}.fa-pen-ruler:before,.fa-pencil-ruler:before{content:"\f5ae"}.fa-people-arrows-left-right:before,.fa-people-arrows:before{content:"\e068"}.fa-mars-and-venus-burst:before{content:"\e523"}.fa-caret-square-right:before,.fa-square-caret-right:before{content:"\f152"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-sun-plant-wilt:before{content:"\e57a"}.fa-toilets-portable:before{content:"\e584"}.fa-hockey-puck:before{content:"\f453"}.fa-table:before{content:"\f0ce"}.fa-magnifying-glass-arrow-right:before{content:"\e521"}.fa-digital-tachograph:before,.fa-tachograph-digital:before{content:"\f566"}.fa-users-slash:before{content:"\e073"}.fa-clover:before{content:"\e139"}.fa-mail-reply:before,.fa-reply:before{content:"\f3e5"}.fa-star-and-crescent:before{content:"\f699"}.fa-house-fire:before{content:"\e50c"}.fa-minus-square:before,.fa-square-minus:before{content:"\f146"}.fa-helicopter:before{content:"\f533"}.fa-compass:before{content:"\f14e"}.fa-caret-square-down:before,.fa-square-caret-down:before{content:"\f150"}.fa-file-circle-question:before{content:"\e4ef"}.fa-laptop-code:before{content:"\f5fc"}.fa-swatchbook:before{content:"\f5c3"}.fa-prescription-bottle:before{content:"\f485"}.fa-bars:before,.fa-navicon:before{content:"\f0c9"}.fa-people-group:before{content:"\e533"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-heart-broken:before,.fa-heart-crack:before{content:"\f7a9"}.fa-external-link-square-alt:before,.fa-square-up-right:before{content:"\f360"}.fa-face-kiss-beam:before,.fa-kiss-beam:before{content:"\f597"}.fa-film:before{content:"\f008"}.fa-ruler-horizontal:before{content:"\f547"}.fa-people-robbery:before{content:"\e536"}.fa-lightbulb:before{content:"\f0eb"}.fa-caret-left:before{content:"\f0d9"}.fa-circle-exclamation:before,.fa-exclamation-circle:before{content:"\f06a"}.fa-school-circle-xmark:before{content:"\e56d"}.fa-arrow-right-from-bracket:before,.fa-sign-out:before{content:"\f08b"}.fa-chevron-circle-down:before,.fa-circle-chevron-down:before{content:"\f13a"}.fa-unlock-alt:before,.fa-unlock-keyhole:before{content:"\f13e"}.fa-cloud-showers-heavy:before{content:"\f740"}.fa-headphones-alt:before,.fa-headphones-simple:before{content:"\f58f"}.fa-sitemap:before{content:"\f0e8"}.fa-circle-dollar-to-slot:before,.fa-donate:before{content:"\f4b9"}.fa-memory:before{content:"\f538"}.fa-road-spikes:before{content:"\e568"}.fa-fire-burner:before{content:"\e4f1"}.fa-flag:before{content:"\f024"}.fa-hanukiah:before{content:"\f6e6"}.fa-feather:before{content:"\f52d"}.fa-volume-down:before,.fa-volume-low:before{content:"\f027"}.fa-comment-slash:before{content:"\f4b3"}.fa-cloud-sun-rain:before{content:"\f743"}.fa-compress:before{content:"\f066"}.fa-wheat-alt:before,.fa-wheat-awn:before{content:"\e2cd"}.fa-ankh:before{content:"\f644"}.fa-hands-holding-child:before{content:"\e4fa"}.fa-asterisk:before{content:"\2a"}.fa-check-square:before,.fa-square-check:before{content:"\f14a"}.fa-peseta-sign:before{content:"\e221"}.fa-header:before,.fa-heading:before{content:"\f1dc"}.fa-ghost:before{content:"\f6e2"}.fa-list-squares:before,.fa-list:before{content:"\f03a"}.fa-phone-square-alt:before,.fa-square-phone-flip:before{content:"\f87b"}.fa-cart-plus:before{content:"\f217"}.fa-gamepad:before{content:"\f11b"}.fa-circle-dot:before,.fa-dot-circle:before{content:"\f192"}.fa-dizzy:before,.fa-face-dizzy:before{content:"\f567"}.fa-egg:before{content:"\f7fb"}.fa-house-medical-circle-xmark:before{content:"\e513"}.fa-campground:before{content:"\f6bb"}.fa-folder-plus:before{content:"\f65e"}.fa-futbol-ball:before,.fa-futbol:before,.fa-soccer-ball:before{content:"\f1e3"}.fa-paint-brush:before,.fa-paintbrush:before{content:"\f1fc"}.fa-lock:before{content:"\f023"}.fa-gas-pump:before{content:"\f52f"}.fa-hot-tub-person:before,.fa-hot-tub:before{content:"\f593"}.fa-map-location:before,.fa-map-marked:before{content:"\f59f"}.fa-house-flood-water:before{content:"\e50e"}.fa-tree:before{content:"\f1bb"}.fa-bridge-lock:before{content:"\e4cc"}.fa-sack-dollar:before{content:"\f81d"}.fa-edit:before,.fa-pen-to-square:before{content:"\f044"}.fa-car-side:before{content:"\f5e4"}.fa-share-alt:before,.fa-share-nodes:before{content:"\f1e0"}.fa-heart-circle-minus:before{content:"\e4ff"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-microscope:before{content:"\f610"}.fa-sink:before{content:"\e06d"}.fa-bag-shopping:before,.fa-shopping-bag:before{content:"\f290"}.fa-arrow-down-z-a:before,.fa-sort-alpha-desc:before,.fa-sort-alpha-down-alt:before{content:"\f881"}.fa-mitten:before{content:"\f7b5"}.fa-person-rays:before{content:"\e54d"}.fa-users:before{content:"\f0c0"}.fa-eye-slash:before{content:"\f070"}.fa-flask-vial:before{content:"\e4f3"}.fa-hand-paper:before,.fa-hand:before{content:"\f256"}.fa-om:before{content:"\f679"}.fa-worm:before{content:"\e599"}.fa-house-circle-xmark:before{content:"\e50b"}.fa-plug:before{content:"\f1e6"}.fa-chevron-up:before{content:"\f077"}.fa-hand-spock:before{content:"\f259"}.fa-stopwatch:before{content:"\f2f2"}.fa-face-kiss:before,.fa-kiss:before{content:"\f596"}.fa-bridge-circle-xmark:before{content:"\e4cb"}.fa-face-grin-tongue:before,.fa-grin-tongue:before{content:"\f589"}.fa-chess-bishop:before{content:"\f43a"}.fa-face-grin-wink:before,.fa-grin-wink:before{content:"\f58c"}.fa-deaf:before,.fa-deafness:before,.fa-ear-deaf:before,.fa-hard-of-hearing:before{content:"\f2a4"}.fa-road-circle-check:before{content:"\e564"}.fa-dice-five:before{content:"\f523"}.fa-rss-square:before,.fa-square-rss:before{content:"\f143"}.fa-land-mine-on:before{content:"\e51b"}.fa-i-cursor:before{content:"\f246"}.fa-stamp:before{content:"\f5bf"}.fa-stairs:before{content:"\e289"}.fa-i:before{content:"\49"}.fa-hryvnia-sign:before,.fa-hryvnia:before{content:"\f6f2"}.fa-pills:before{content:"\f484"}.fa-face-grin-wide:before,.fa-grin-alt:before{content:"\f581"}.fa-tooth:before{content:"\f5c9"}.fa-v:before{content:"\56"}.fa-bangladeshi-taka-sign:before{content:"\e2e6"}.fa-bicycle:before{content:"\f206"}.fa-rod-asclepius:before,.fa-rod-snake:before,.fa-staff-aesculapius:before,.fa-staff-snake:before{content:"\e579"}.fa-head-side-cough-slash:before{content:"\e062"}.fa-ambulance:before,.fa-truck-medical:before{content:"\f0f9"}.fa-wheat-awn-circle-exclamation:before{content:"\e598"}.fa-snowman:before{content:"\f7d0"}.fa-mortar-pestle:before{content:"\f5a7"}.fa-road-barrier:before{content:"\e562"}.fa-school:before{content:"\f549"}.fa-igloo:before{content:"\f7ae"}.fa-joint:before{content:"\f595"}.fa-angle-right:before{content:"\f105"}.fa-horse:before{content:"\f6f0"}.fa-q:before{content:"\51"}.fa-g:before{content:"\47"}.fa-notes-medical:before{content:"\f481"}.fa-temperature-2:before,.fa-temperature-half:before,.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-dong-sign:before{content:"\e169"}.fa-capsules:before{content:"\f46b"}.fa-poo-bolt:before,.fa-poo-storm:before{content:"\f75a"}.fa-face-frown-open:before,.fa-frown-open:before{content:"\f57a"}.fa-hand-point-up:before{content:"\f0a6"}.fa-money-bill:before{content:"\f0d6"}.fa-bookmark:before{content:"\f02e"}.fa-align-justify:before{content:"\f039"}.fa-umbrella-beach:before{content:"\f5ca"}.fa-helmet-un:before{content:"\e503"}.fa-bullseye:before{content:"\f140"}.fa-bacon:before{content:"\f7e5"}.fa-hand-point-down:before{content:"\f0a7"}.fa-arrow-up-from-bracket:before{content:"\e09a"}.fa-folder-blank:before,.fa-folder:before{content:"\f07b"}.fa-file-medical-alt:before,.fa-file-waveform:before{content:"\f478"}.fa-radiation:before{content:"\f7b9"}.fa-chart-simple:before{content:"\e473"}.fa-mars-stroke:before{content:"\f229"}.fa-vial:before{content:"\f492"}.fa-dashboard:before,.fa-gauge-med:before,.fa-gauge:before,.fa-tachometer-alt-average:before{content:"\f624"}.fa-magic-wand-sparkles:before,.fa-wand-magic-sparkles:before{content:"\e2ca"}.fa-e:before{content:"\45"}.fa-pen-alt:before,.fa-pen-clip:before{content:"\f305"}.fa-bridge-circle-exclamation:before{content:"\e4ca"}.fa-user:before{content:"\f007"}.fa-school-circle-check:before{content:"\e56b"}.fa-dumpster:before{content:"\f793"}.fa-shuttle-van:before,.fa-van-shuttle:before{content:"\f5b6"}.fa-building-user:before{content:"\e4da"}.fa-caret-square-left:before,.fa-square-caret-left:before{content:"\f191"}.fa-highlighter:before{content:"\f591"}.fa-key:before{content:"\f084"}.fa-bullhorn:before{content:"\f0a1"}.fa-globe:before{content:"\f0ac"}.fa-synagogue:before{content:"\f69b"}.fa-person-half-dress:before{content:"\e548"}.fa-road-bridge:before{content:"\e563"}.fa-location-arrow:before{content:"\f124"}.fa-c:before{content:"\43"}.fa-tablet-button:before{content:"\f10a"}.fa-building-lock:before{content:"\e4d6"}.fa-pizza-slice:before{content:"\f818"}.fa-money-bill-wave:before{content:"\f53a"}.fa-area-chart:before,.fa-chart-area:before{content:"\f1fe"}.fa-house-flag:before{content:"\e50d"}.fa-person-circle-minus:before{content:"\e540"}.fa-ban:before,.fa-cancel:before{content:"\f05e"}.fa-camera-rotate:before{content:"\e0d8"}.fa-air-freshener:before,.fa-spray-can-sparkles:before{content:"\f5d0"}.fa-star:before{content:"\f005"}.fa-repeat:before{content:"\f363"}.fa-cross:before{content:"\f654"}.fa-box:before{content:"\f466"}.fa-venus-mars:before{content:"\f228"}.fa-arrow-pointer:before,.fa-mouse-pointer:before{content:"\f245"}.fa-expand-arrows-alt:before,.fa-maximize:before{content:"\f31e"}.fa-charging-station:before{content:"\f5e7"}.fa-shapes:before,.fa-triangle-circle-square:before{content:"\f61f"}.fa-random:before,.fa-shuffle:before{content:"\f074"}.fa-person-running:before,.fa-running:before{content:"\f70c"}.fa-mobile-retro:before{content:"\e527"}.fa-grip-lines-vertical:before{content:"\f7a5"}.fa-spider:before{content:"\f717"}.fa-hands-bound:before{content:"\e4f9"}.fa-file-invoice-dollar:before{content:"\f571"}.fa-plane-circle-exclamation:before{content:"\e556"}.fa-x-ray:before{content:"\f497"}.fa-spell-check:before{content:"\f891"}.fa-slash:before{content:"\f715"}.fa-computer-mouse:before,.fa-mouse:before{content:"\f8cc"}.fa-arrow-right-to-bracket:before,.fa-sign-in:before{content:"\f090"}.fa-shop-slash:before,.fa-store-alt-slash:before{content:"\e070"}.fa-server:before{content:"\f233"}.fa-virus-covid-slash:before{content:"\e4a9"}.fa-shop-lock:before{content:"\e4a5"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-blender-phone:before{content:"\f6b6"}.fa-building-wheat:before{content:"\e4db"}.fa-person-breastfeeding:before{content:"\e53a"}.fa-right-to-bracket:before,.fa-sign-in-alt:before{content:"\f2f6"}.fa-venus:before{content:"\f221"}.fa-passport:before{content:"\f5ab"}.fa-heart-pulse:before,.fa-heartbeat:before{content:"\f21e"}.fa-people-carry-box:before,.fa-people-carry:before{content:"\f4ce"}.fa-temperature-high:before{content:"\f769"}.fa-microchip:before{content:"\f2db"}.fa-crown:before{content:"\f521"}.fa-weight-hanging:before{content:"\f5cd"}.fa-xmarks-lines:before{content:"\e59a"}.fa-file-prescription:before{content:"\f572"}.fa-weight-scale:before,.fa-weight:before{content:"\f496"}.fa-user-friends:before,.fa-user-group:before{content:"\f500"}.fa-arrow-up-a-z:before,.fa-sort-alpha-up:before{content:"\f15e"}.fa-chess-knight:before{content:"\f441"}.fa-face-laugh-squint:before,.fa-laugh-squint:before{content:"\f59b"}.fa-wheelchair:before{content:"\f193"}.fa-arrow-circle-up:before,.fa-circle-arrow-up:before{content:"\f0aa"}.fa-toggle-on:before{content:"\f205"}.fa-person-walking:before,.fa-walking:before{content:"\f554"}.fa-l:before{content:"\4c"}.fa-fire:before{content:"\f06d"}.fa-bed-pulse:before,.fa-procedures:before{content:"\f487"}.fa-shuttle-space:before,.fa-space-shuttle:before{content:"\f197"}.fa-face-laugh:before,.fa-laugh:before{content:"\f599"}.fa-folder-open:before{content:"\f07c"}.fa-heart-circle-plus:before{content:"\e500"}.fa-code-fork:before{content:"\e13b"}.fa-city:before{content:"\f64f"}.fa-microphone-alt:before,.fa-microphone-lines:before{content:"\f3c9"}.fa-pepper-hot:before{content:"\f816"}.fa-unlock:before{content:"\f09c"}.fa-colon-sign:before{content:"\e140"}.fa-headset:before{content:"\f590"}.fa-store-slash:before{content:"\e071"}.fa-road-circle-xmark:before{content:"\e566"}.fa-user-minus:before{content:"\f503"}.fa-mars-stroke-up:before,.fa-mars-stroke-v:before{content:"\f22a"}.fa-champagne-glasses:before,.fa-glass-cheers:before{content:"\f79f"}.fa-clipboard:before{content:"\f328"}.fa-house-circle-exclamation:before{content:"\e50a"}.fa-file-arrow-up:before,.fa-file-upload:before{content:"\f574"}.fa-wifi-3:before,.fa-wifi-strong:before,.fa-wifi:before{content:"\f1eb"}.fa-bath:before,.fa-bathtub:before{content:"\f2cd"}.fa-underline:before{content:"\f0cd"}.fa-user-edit:before,.fa-user-pen:before{content:"\f4ff"}.fa-signature:before{content:"\f5b7"}.fa-stroopwafel:before{content:"\f551"}.fa-bold:before{content:"\f032"}.fa-anchor-lock:before{content:"\e4ad"}.fa-building-ngo:before{content:"\e4d7"}.fa-manat-sign:before{content:"\e1d5"}.fa-not-equal:before{content:"\f53e"}.fa-border-style:before,.fa-border-top-left:before{content:"\f853"}.fa-map-location-dot:before,.fa-map-marked-alt:before{content:"\f5a0"}.fa-jedi:before{content:"\f669"}.fa-poll:before,.fa-square-poll-vertical:before{content:"\f681"}.fa-mug-hot:before{content:"\f7b6"}.fa-battery-car:before,.fa-car-battery:before{content:"\f5df"}.fa-gift:before{content:"\f06b"}.fa-dice-two:before{content:"\f528"}.fa-chess-queen:before{content:"\f445"}.fa-glasses:before{content:"\f530"}.fa-chess-board:before{content:"\f43c"}.fa-building-circle-check:before{content:"\e4d2"}.fa-person-chalkboard:before{content:"\e53d"}.fa-mars-stroke-h:before,.fa-mars-stroke-right:before{content:"\f22b"}.fa-hand-back-fist:before,.fa-hand-rock:before{content:"\f255"}.fa-caret-square-up:before,.fa-square-caret-up:before{content:"\f151"}.fa-cloud-showers-water:before{content:"\e4e4"}.fa-bar-chart:before,.fa-chart-bar:before{content:"\f080"}.fa-hands-bubbles:before,.fa-hands-wash:before{content:"\e05e"}.fa-less-than-equal:before{content:"\f537"}.fa-train:before{content:"\f238"}.fa-eye-low-vision:before,.fa-low-vision:before{content:"\f2a8"}.fa-crow:before{content:"\f520"}.fa-sailboat:before{content:"\e445"}.fa-window-restore:before{content:"\f2d2"}.fa-plus-square:before,.fa-square-plus:before{content:"\f0fe"}.fa-torii-gate:before{content:"\f6a1"}.fa-frog:before{content:"\f52e"}.fa-bucket:before{content:"\e4cf"}.fa-image:before{content:"\f03e"}.fa-microphone:before{content:"\f130"}.fa-cow:before{content:"\f6c8"}.fa-caret-up:before{content:"\f0d8"}.fa-screwdriver:before{content:"\f54a"}.fa-folder-closed:before{content:"\e185"}.fa-house-tsunami:before{content:"\e515"}.fa-square-nfi:before{content:"\e576"}.fa-arrow-up-from-ground-water:before{content:"\e4b5"}.fa-glass-martini-alt:before,.fa-martini-glass:before{content:"\f57b"}.fa-rotate-back:before,.fa-rotate-backward:before,.fa-rotate-left:before,.fa-undo-alt:before{content:"\f2ea"}.fa-columns:before,.fa-table-columns:before{content:"\f0db"}.fa-lemon:before{content:"\f094"}.fa-head-side-mask:before{content:"\e063"}.fa-handshake:before{content:"\f2b5"}.fa-gem:before{content:"\f3a5"}.fa-dolly-box:before,.fa-dolly:before{content:"\f472"}.fa-smoking:before{content:"\f48d"}.fa-compress-arrows-alt:before,.fa-minimize:before{content:"\f78c"}.fa-monument:before{content:"\f5a6"}.fa-snowplow:before{content:"\f7d2"}.fa-angle-double-right:before,.fa-angles-right:before{content:"\f101"}.fa-cannabis:before{content:"\f55f"}.fa-circle-play:before,.fa-play-circle:before{content:"\f144"}.fa-tablets:before{content:"\f490"}.fa-ethernet:before{content:"\f796"}.fa-eur:before,.fa-euro-sign:before,.fa-euro:before{content:"\f153"}.fa-chair:before{content:"\f6c0"}.fa-check-circle:before,.fa-circle-check:before{content:"\f058"}.fa-circle-stop:before,.fa-stop-circle:before{content:"\f28d"}.fa-compass-drafting:before,.fa-drafting-compass:before{content:"\f568"}.fa-plate-wheat:before{content:"\e55a"}.fa-icicles:before{content:"\f7ad"}.fa-person-shelter:before{content:"\e54f"}.fa-neuter:before{content:"\f22c"}.fa-id-badge:before{content:"\f2c1"}.fa-marker:before{content:"\f5a1"}.fa-face-laugh-beam:before,.fa-laugh-beam:before{content:"\f59a"}.fa-helicopter-symbol:before{content:"\e502"}.fa-universal-access:before{content:"\f29a"}.fa-chevron-circle-up:before,.fa-circle-chevron-up:before{content:"\f139"}.fa-lari-sign:before{content:"\e1c8"}.fa-volcano:before{content:"\f770"}.fa-person-walking-dashed-line-arrow-right:before{content:"\e553"}.fa-gbp:before,.fa-pound-sign:before,.fa-sterling-sign:before{content:"\f154"}.fa-viruses:before{content:"\e076"}.fa-square-person-confined:before{content:"\e577"}.fa-user-tie:before{content:"\f508"}.fa-arrow-down-long:before,.fa-long-arrow-down:before{content:"\f175"}.fa-tent-arrow-down-to-line:before{content:"\e57e"}.fa-certificate:before{content:"\f0a3"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-suitcase:before{content:"\f0f2"}.fa-person-skating:before,.fa-skating:before{content:"\f7c5"}.fa-filter-circle-dollar:before,.fa-funnel-dollar:before{content:"\f662"}.fa-camera-retro:before{content:"\f083"}.fa-arrow-circle-down:before,.fa-circle-arrow-down:before{content:"\f0ab"}.fa-arrow-right-to-file:before,.fa-file-import:before{content:"\f56f"}.fa-external-link-square:before,.fa-square-arrow-up-right:before{content:"\f14c"}.fa-box-open:before{content:"\f49e"}.fa-scroll:before{content:"\f70e"}.fa-spa:before{content:"\f5bb"}.fa-location-pin-lock:before{content:"\e51f"}.fa-pause:before{content:"\f04c"}.fa-hill-avalanche:before{content:"\e507"}.fa-temperature-0:before,.fa-temperature-empty:before,.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-bomb:before{content:"\f1e2"}.fa-registered:before{content:"\f25d"}.fa-address-card:before,.fa-contact-card:before,.fa-vcard:before{content:"\f2bb"}.fa-balance-scale-right:before,.fa-scale-unbalanced-flip:before{content:"\f516"}.fa-subscript:before{content:"\f12c"}.fa-diamond-turn-right:before,.fa-directions:before{content:"\f5eb"}.fa-burst:before{content:"\e4dc"}.fa-house-laptop:before,.fa-laptop-house:before{content:"\e066"}.fa-face-tired:before,.fa-tired:before{content:"\f5c8"}.fa-money-bills:before{content:"\e1f3"}.fa-smog:before{content:"\f75f"}.fa-crutch:before{content:"\f7f7"}.fa-cloud-arrow-up:before,.fa-cloud-upload-alt:before,.fa-cloud-upload:before{content:"\f0ee"}.fa-palette:before{content:"\f53f"}.fa-arrows-turn-right:before{content:"\e4c0"}.fa-vest:before{content:"\e085"}.fa-ferry:before{content:"\e4ea"}.fa-arrows-down-to-people:before{content:"\e4b9"}.fa-seedling:before,.fa-sprout:before{content:"\f4d8"}.fa-arrows-alt-h:before,.fa-left-right:before{content:"\f337"}.fa-boxes-packing:before{content:"\e4c7"}.fa-arrow-circle-left:before,.fa-circle-arrow-left:before{content:"\f0a8"}.fa-group-arrows-rotate:before{content:"\e4f6"}.fa-bowl-food:before{content:"\e4c6"}.fa-candy-cane:before{content:"\f786"}.fa-arrow-down-wide-short:before,.fa-sort-amount-asc:before,.fa-sort-amount-down:before{content:"\f160"}.fa-cloud-bolt:before,.fa-thunderstorm:before{content:"\f76c"}.fa-remove-format:before,.fa-text-slash:before{content:"\f87d"}.fa-face-smile-wink:before,.fa-smile-wink:before{content:"\f4da"}.fa-file-word:before{content:"\f1c2"}.fa-file-powerpoint:before{content:"\f1c4"}.fa-arrows-h:before,.fa-arrows-left-right:before{content:"\f07e"}.fa-house-lock:before{content:"\e510"}.fa-cloud-arrow-down:before,.fa-cloud-download-alt:before,.fa-cloud-download:before{content:"\f0ed"}.fa-children:before{content:"\e4e1"}.fa-blackboard:before,.fa-chalkboard:before{content:"\f51b"}.fa-user-alt-slash:before,.fa-user-large-slash:before{content:"\f4fa"}.fa-envelope-open:before{content:"\f2b6"}.fa-handshake-alt-slash:before,.fa-handshake-simple-slash:before{content:"\e05f"}.fa-mattress-pillow:before{content:"\e525"}.fa-guarani-sign:before{content:"\e19a"}.fa-arrows-rotate:before,.fa-refresh:before,.fa-sync:before{content:"\f021"}.fa-fire-extinguisher:before{content:"\f134"}.fa-cruzeiro-sign:before{content:"\e152"}.fa-greater-than-equal:before{content:"\f532"}.fa-shield-alt:before,.fa-shield-halved:before{content:"\f3ed"}.fa-atlas:before,.fa-book-atlas:before{content:"\f558"}.fa-virus:before{content:"\e074"}.fa-envelope-circle-check:before{content:"\e4e8"}.fa-layer-group:before{content:"\f5fd"}.fa-arrows-to-dot:before{content:"\e4be"}.fa-archway:before{content:"\f557"}.fa-heart-circle-check:before{content:"\e4fd"}.fa-house-chimney-crack:before,.fa-house-damage:before{content:"\f6f1"}.fa-file-archive:before,.fa-file-zipper:before{content:"\f1c6"}.fa-square:before{content:"\f0c8"}.fa-glass-martini:before,.fa-martini-glass-empty:before{content:"\f000"}.fa-couch:before{content:"\f4b8"}.fa-cedi-sign:before{content:"\e0df"}.fa-italic:before{content:"\f033"}.fa-church:before{content:"\f51d"}.fa-comments-dollar:before{content:"\f653"}.fa-democrat:before{content:"\f747"}.fa-z:before{content:"\5a"}.fa-person-skiing:before,.fa-skiing:before{content:"\f7c9"}.fa-road-lock:before{content:"\e567"}.fa-a:before{content:"\41"}.fa-temperature-arrow-down:before,.fa-temperature-down:before{content:"\e03f"}.fa-feather-alt:before,.fa-feather-pointed:before{content:"\f56b"}.fa-p:before{content:"\50"}.fa-snowflake:before{content:"\f2dc"}.fa-newspaper:before{content:"\f1ea"}.fa-ad:before,.fa-rectangle-ad:before{content:"\f641"}.fa-arrow-circle-right:before,.fa-circle-arrow-right:before{content:"\f0a9"}.fa-filter-circle-xmark:before{content:"\e17b"}.fa-locust:before{content:"\e520"}.fa-sort:before,.fa-unsorted:before{content:"\f0dc"}.fa-list-1-2:before,.fa-list-numeric:before,.fa-list-ol:before{content:"\f0cb"}.fa-person-dress-burst:before{content:"\e544"}.fa-money-check-alt:before,.fa-money-check-dollar:before{content:"\f53d"}.fa-vector-square:before{content:"\f5cb"}.fa-bread-slice:before{content:"\f7ec"}.fa-language:before{content:"\f1ab"}.fa-face-kiss-wink-heart:before,.fa-kiss-wink-heart:before{content:"\f598"}.fa-filter:before{content:"\f0b0"}.fa-question:before{content:"\3f"}.fa-file-signature:before{content:"\f573"}.fa-arrows-alt:before,.fa-up-down-left-right:before{content:"\f0b2"}.fa-house-chimney-user:before{content:"\e065"}.fa-hand-holding-heart:before{content:"\f4be"}.fa-puzzle-piece:before{content:"\f12e"}.fa-money-check:before{content:"\f53c"}.fa-star-half-alt:before,.fa-star-half-stroke:before{content:"\f5c0"}.fa-code:before{content:"\f121"}.fa-glass-whiskey:before,.fa-whiskey-glass:before{content:"\f7a0"}.fa-building-circle-exclamation:before{content:"\e4d3"}.fa-magnifying-glass-chart:before{content:"\e522"}.fa-arrow-up-right-from-square:before,.fa-external-link:before{content:"\f08e"}.fa-cubes-stacked:before{content:"\e4e6"}.fa-krw:before,.fa-won-sign:before,.fa-won:before{content:"\f159"}.fa-virus-covid:before{content:"\e4a8"}.fa-austral-sign:before{content:"\e0a9"}.fa-f:before{content:"\46"}.fa-leaf:before{content:"\f06c"}.fa-road:before{content:"\f018"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-person-circle-plus:before{content:"\e541"}.fa-chart-pie:before,.fa-pie-chart:before{content:"\f200"}.fa-bolt-lightning:before{content:"\e0b7"}.fa-sack-xmark:before{content:"\e56a"}.fa-file-excel:before{content:"\f1c3"}.fa-file-contract:before{content:"\f56c"}.fa-fish-fins:before{content:"\e4f2"}.fa-building-flag:before{content:"\e4d5"}.fa-face-grin-beam:before,.fa-grin-beam:before{content:"\f582"}.fa-object-ungroup:before{content:"\f248"}.fa-poop:before{content:"\f619"}.fa-location-pin:before,.fa-map-marker:before{content:"\f041"}.fa-kaaba:before{content:"\f66b"}.fa-toilet-paper:before{content:"\f71e"}.fa-hard-hat:before,.fa-hat-hard:before,.fa-helmet-safety:before{content:"\f807"}.fa-eject:before{content:"\f052"}.fa-arrow-alt-circle-right:before,.fa-circle-right:before{content:"\f35a"}.fa-plane-circle-check:before{content:"\e555"}.fa-face-rolling-eyes:before,.fa-meh-rolling-eyes:before{content:"\f5a5"}.fa-object-group:before{content:"\f247"}.fa-chart-line:before,.fa-line-chart:before{content:"\f201"}.fa-mask-ventilator:before{content:"\e524"}.fa-arrow-right:before{content:"\f061"}.fa-map-signs:before,.fa-signs-post:before{content:"\f277"}.fa-cash-register:before{content:"\f788"}.fa-person-circle-question:before{content:"\e542"}.fa-h:before{content:"\48"}.fa-tarp:before{content:"\e57b"}.fa-screwdriver-wrench:before,.fa-tools:before{content:"\f7d9"}.fa-arrows-to-eye:before{content:"\e4bf"}.fa-plug-circle-bolt:before{content:"\e55b"}.fa-heart:before{content:"\f004"}.fa-mars-and-venus:before{content:"\f224"}.fa-home-user:before,.fa-house-user:before{content:"\e1b0"}.fa-dumpster-fire:before{content:"\f794"}.fa-house-crack:before{content:"\e3b1"}.fa-cocktail:before,.fa-martini-glass-citrus:before{content:"\f561"}.fa-face-surprise:before,.fa-surprise:before{content:"\f5c2"}.fa-bottle-water:before{content:"\e4c5"}.fa-circle-pause:before,.fa-pause-circle:before{content:"\f28b"}.fa-toilet-paper-slash:before{content:"\e072"}.fa-apple-alt:before,.fa-apple-whole:before{content:"\f5d1"}.fa-kitchen-set:before{content:"\e51a"}.fa-r:before{content:"\52"}.fa-temperature-1:before,.fa-temperature-quarter:before,.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-cube:before{content:"\f1b2"}.fa-bitcoin-sign:before{content:"\e0b4"}.fa-shield-dog:before{content:"\e573"}.fa-solar-panel:before{content:"\f5ba"}.fa-lock-open:before{content:"\f3c1"}.fa-elevator:before{content:"\e16d"}.fa-money-bill-transfer:before{content:"\e528"}.fa-money-bill-trend-up:before{content:"\e529"}.fa-house-flood-water-circle-arrow-right:before{content:"\e50f"}.fa-poll-h:before,.fa-square-poll-horizontal:before{content:"\f682"}.fa-circle:before{content:"\f111"}.fa-backward-fast:before,.fa-fast-backward:before{content:"\f049"}.fa-recycle:before{content:"\f1b8"}.fa-user-astronaut:before{content:"\f4fb"}.fa-plane-slash:before{content:"\e069"}.fa-trademark:before{content:"\f25c"}.fa-basketball-ball:before,.fa-basketball:before{content:"\f434"}.fa-satellite-dish:before{content:"\f7c0"}.fa-arrow-alt-circle-up:before,.fa-circle-up:before{content:"\f35b"}.fa-mobile-alt:before,.fa-mobile-screen-button:before{content:"\f3cd"}.fa-volume-high:before,.fa-volume-up:before{content:"\f028"}.fa-users-rays:before{content:"\e593"}.fa-wallet:before{content:"\f555"}.fa-clipboard-check:before{content:"\f46c"}.fa-file-audio:before{content:"\f1c7"}.fa-burger:before,.fa-hamburger:before{content:"\f805"}.fa-wrench:before{content:"\f0ad"}.fa-bugs:before{content:"\e4d0"}.fa-rupee-sign:before,.fa-rupee:before{content:"\f156"}.fa-file-image:before{content:"\f1c5"}.fa-circle-question:before,.fa-question-circle:before{content:"\f059"}.fa-plane-departure:before{content:"\f5b0"}.fa-handshake-slash:before{content:"\e060"}.fa-book-bookmark:before{content:"\e0bb"}.fa-code-branch:before{content:"\f126"}.fa-hat-cowboy:before{content:"\f8c0"}.fa-bridge:before{content:"\e4c8"}.fa-phone-alt:before,.fa-phone-flip:before{content:"\f879"}.fa-truck-front:before{content:"\e2b7"}.fa-cat:before{content:"\f6be"}.fa-anchor-circle-exclamation:before{content:"\e4ab"}.fa-truck-field:before{content:"\e58d"}.fa-route:before{content:"\f4d7"}.fa-clipboard-question:before{content:"\e4e3"}.fa-panorama:before{content:"\e209"}.fa-comment-medical:before{content:"\f7f5"}.fa-teeth-open:before{content:"\f62f"}.fa-file-circle-minus:before{content:"\e4ed"}.fa-tags:before{content:"\f02c"}.fa-wine-glass:before{content:"\f4e3"}.fa-fast-forward:before,.fa-forward-fast:before{content:"\f050"}.fa-face-meh-blank:before,.fa-meh-blank:before{content:"\f5a4"}.fa-parking:before,.fa-square-parking:before{content:"\f540"}.fa-house-signal:before{content:"\e012"}.fa-bars-progress:before,.fa-tasks-alt:before{content:"\f828"}.fa-faucet-drip:before{content:"\e006"}.fa-cart-flatbed:before,.fa-dolly-flatbed:before{content:"\f474"}.fa-ban-smoking:before,.fa-smoking-ban:before{content:"\f54d"}.fa-terminal:before{content:"\f120"}.fa-mobile-button:before{content:"\f10b"}.fa-house-medical-flag:before{content:"\e514"}.fa-basket-shopping:before,.fa-shopping-basket:before{content:"\f291"}.fa-tape:before{content:"\f4db"}.fa-bus-alt:before,.fa-bus-simple:before{content:"\f55e"}.fa-eye:before{content:"\f06e"}.fa-face-sad-cry:before,.fa-sad-cry:before{content:"\f5b3"}.fa-audio-description:before{content:"\f29e"}.fa-person-military-to-person:before{content:"\e54c"}.fa-file-shield:before{content:"\e4f0"}.fa-user-slash:before{content:"\f506"}.fa-pen:before{content:"\f304"}.fa-tower-observation:before{content:"\e586"}.fa-file-code:before{content:"\f1c9"}.fa-signal-5:before,.fa-signal-perfect:before,.fa-signal:before{content:"\f012"}.fa-bus:before{content:"\f207"}.fa-heart-circle-xmark:before{content:"\e501"}.fa-home-lg:before,.fa-house-chimney:before{content:"\e3af"}.fa-window-maximize:before{content:"\f2d0"}.fa-face-frown:before,.fa-frown:before{content:"\f119"}.fa-prescription:before{content:"\f5b1"}.fa-shop:before,.fa-store-alt:before{content:"\f54f"}.fa-floppy-disk:before,.fa-save:before{content:"\f0c7"}.fa-vihara:before{content:"\f6a7"}.fa-balance-scale-left:before,.fa-scale-unbalanced:before{content:"\f515"}.fa-sort-asc:before,.fa-sort-up:before{content:"\f0de"}.fa-comment-dots:before,.fa-commenting:before{content:"\f4ad"}.fa-plant-wilt:before{content:"\e5aa"}.fa-diamond:before{content:"\f219"}.fa-face-grin-squint:before,.fa-grin-squint:before{content:"\f585"}.fa-hand-holding-dollar:before,.fa-hand-holding-usd:before{content:"\f4c0"}.fa-bacterium:before{content:"\e05a"}.fa-hand-pointer:before{content:"\f25a"}.fa-drum-steelpan:before{content:"\f56a"}.fa-hand-scissors:before{content:"\f257"}.fa-hands-praying:before,.fa-praying-hands:before{content:"\f684"}.fa-arrow-right-rotate:before,.fa-arrow-rotate-forward:before,.fa-arrow-rotate-right:before,.fa-redo:before{content:"\f01e"}.fa-biohazard:before{content:"\f780"}.fa-location-crosshairs:before,.fa-location:before{content:"\f601"}.fa-mars-double:before{content:"\f227"}.fa-child-dress:before{content:"\e59c"}.fa-users-between-lines:before{content:"\e591"}.fa-lungs-virus:before{content:"\e067"}.fa-face-grin-tears:before,.fa-grin-tears:before{content:"\f588"}.fa-phone:before{content:"\f095"}.fa-calendar-times:before,.fa-calendar-xmark:before{content:"\f273"}.fa-child-reaching:before{content:"\e59d"}.fa-head-side-virus:before{content:"\e064"}.fa-user-cog:before,.fa-user-gear:before{content:"\f4fe"}.fa-arrow-up-1-9:before,.fa-sort-numeric-up:before{content:"\f163"}.fa-door-closed:before{content:"\f52a"}.fa-shield-virus:before{content:"\e06c"}.fa-dice-six:before{content:"\f526"}.fa-mosquito-net:before{content:"\e52c"}.fa-bridge-water:before{content:"\e4ce"}.fa-person-booth:before{content:"\f756"}.fa-text-width:before{content:"\f035"}.fa-hat-wizard:before{content:"\f6e8"}.fa-pen-fancy:before{content:"\f5ac"}.fa-digging:before,.fa-person-digging:before{content:"\f85e"}.fa-trash:before{content:"\f1f8"}.fa-gauge-simple-med:before,.fa-gauge-simple:before,.fa-tachometer-average:before{content:"\f629"}.fa-book-medical:before{content:"\f7e6"}.fa-poo:before{content:"\f2fe"}.fa-quote-right-alt:before,.fa-quote-right:before{content:"\f10e"}.fa-shirt:before,.fa-t-shirt:before,.fa-tshirt:before{content:"\f553"}.fa-cubes:before{content:"\f1b3"}.fa-divide:before{content:"\f529"}.fa-tenge-sign:before,.fa-tenge:before{content:"\f7d7"}.fa-headphones:before{content:"\f025"}.fa-hands-holding:before{content:"\f4c2"}.fa-hands-clapping:before{content:"\e1a8"}.fa-republican:before{content:"\f75e"}.fa-arrow-left:before{content:"\f060"}.fa-person-circle-xmark:before{content:"\e543"}.fa-ruler:before{content:"\f545"}.fa-align-left:before{content:"\f036"}.fa-dice-d6:before{content:"\f6d1"}.fa-restroom:before{content:"\f7bd"}.fa-j:before{content:"\4a"}.fa-users-viewfinder:before{content:"\e595"}.fa-file-video:before{content:"\f1c8"}.fa-external-link-alt:before,.fa-up-right-from-square:before{content:"\f35d"}.fa-table-cells:before,.fa-th:before{content:"\f00a"}.fa-file-pdf:before{content:"\f1c1"}.fa-bible:before,.fa-book-bible:before{content:"\f647"}.fa-o:before{content:"\4f"}.fa-medkit:before,.fa-suitcase-medical:before{content:"\f0fa"}.fa-user-secret:before{content:"\f21b"}.fa-otter:before{content:"\f700"}.fa-female:before,.fa-person-dress:before{content:"\f182"}.fa-comment-dollar:before{content:"\f651"}.fa-briefcase-clock:before,.fa-business-time:before{content:"\f64a"}.fa-table-cells-large:before,.fa-th-large:before{content:"\f009"}.fa-book-tanakh:before,.fa-tanakh:before{content:"\f827"}.fa-phone-volume:before,.fa-volume-control-phone:before{content:"\f2a0"}.fa-hat-cowboy-side:before{content:"\f8c1"}.fa-clipboard-user:before{content:"\f7f3"}.fa-child:before{content:"\f1ae"}.fa-lira-sign:before{content:"\f195"}.fa-satellite:before{content:"\f7bf"}.fa-plane-lock:before{content:"\e558"}.fa-tag:before{content:"\f02b"}.fa-comment:before{content:"\f075"}.fa-birthday-cake:before,.fa-cake-candles:before,.fa-cake:before{content:"\f1fd"}.fa-envelope:before{content:"\f0e0"}.fa-angle-double-up:before,.fa-angles-up:before{content:"\f102"}.fa-paperclip:before{content:"\f0c6"}.fa-arrow-right-to-city:before{content:"\e4b3"}.fa-ribbon:before{content:"\f4d6"}.fa-lungs:before{content:"\f604"}.fa-arrow-up-9-1:before,.fa-sort-numeric-up-alt:before{content:"\f887"}.fa-litecoin-sign:before{content:"\e1d3"}.fa-border-none:before{content:"\f850"}.fa-circle-nodes:before{content:"\e4e2"}.fa-parachute-box:before{content:"\f4cd"}.fa-indent:before{content:"\f03c"}.fa-truck-field-un:before{content:"\e58e"}.fa-hourglass-empty:before,.fa-hourglass:before{content:"\f254"}.fa-mountain:before{content:"\f6fc"}.fa-user-doctor:before,.fa-user-md:before{content:"\f0f0"}.fa-circle-info:before,.fa-info-circle:before{content:"\f05a"}.fa-cloud-meatball:before{content:"\f73b"}.fa-camera-alt:before,.fa-camera:before{content:"\f030"}.fa-square-virus:before{content:"\e578"}.fa-meteor:before{content:"\f753"}.fa-car-on:before{content:"\e4dd"}.fa-sleigh:before{content:"\f7cc"}.fa-arrow-down-1-9:before,.fa-sort-numeric-asc:before,.fa-sort-numeric-down:before{content:"\f162"}.fa-hand-holding-droplet:before,.fa-hand-holding-water:before{content:"\f4c1"}.fa-water:before{content:"\f773"}.fa-calendar-check:before{content:"\f274"}.fa-braille:before{content:"\f2a1"}.fa-prescription-bottle-alt:before,.fa-prescription-bottle-medical:before{content:"\f486"}.fa-landmark:before{content:"\f66f"}.fa-truck:before{content:"\f0d1"}.fa-crosshairs:before{content:"\f05b"}.fa-person-cane:before{content:"\e53c"}.fa-tent:before{content:"\e57d"}.fa-vest-patches:before{content:"\e086"}.fa-check-double:before{content:"\f560"}.fa-arrow-down-a-z:before,.fa-sort-alpha-asc:before,.fa-sort-alpha-down:before{content:"\f15d"}.fa-money-bill-wheat:before{content:"\e52a"}.fa-cookie:before{content:"\f563"}.fa-arrow-left-rotate:before,.fa-arrow-rotate-back:before,.fa-arrow-rotate-backward:before,.fa-arrow-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-hard-drive:before,.fa-hdd:before{content:"\f0a0"}.fa-face-grin-squint-tears:before,.fa-grin-squint-tears:before{content:"\f586"}.fa-dumbbell:before{content:"\f44b"}.fa-list-alt:before,.fa-rectangle-list:before{content:"\f022"}.fa-tarp-droplet:before{content:"\e57c"}.fa-house-medical-circle-check:before{content:"\e511"}.fa-person-skiing-nordic:before,.fa-skiing-nordic:before{content:"\f7ca"}.fa-calendar-plus:before{content:"\f271"}.fa-plane-arrival:before{content:"\f5af"}.fa-arrow-alt-circle-left:before,.fa-circle-left:before{content:"\f359"}.fa-subway:before,.fa-train-subway:before{content:"\f239"}.fa-chart-gantt:before{content:"\e0e4"}.fa-indian-rupee-sign:before,.fa-indian-rupee:before,.fa-inr:before{content:"\e1bc"}.fa-crop-alt:before,.fa-crop-simple:before{content:"\f565"}.fa-money-bill-1:before,.fa-money-bill-alt:before{content:"\f3d1"}.fa-left-long:before,.fa-long-arrow-alt-left:before{content:"\f30a"}.fa-dna:before{content:"\f471"}.fa-virus-slash:before{content:"\e075"}.fa-minus:before,.fa-subtract:before{content:"\f068"}.fa-chess:before{content:"\f439"}.fa-arrow-left-long:before,.fa-long-arrow-left:before{content:"\f177"}.fa-plug-circle-check:before{content:"\e55c"}.fa-street-view:before{content:"\f21d"}.fa-franc-sign:before{content:"\e18f"}.fa-volume-off:before{content:"\f026"}.fa-american-sign-language-interpreting:before,.fa-asl-interpreting:before,.fa-hands-american-sign-language-interpreting:before,.fa-hands-asl-interpreting:before{content:"\f2a3"}.fa-cog:before,.fa-gear:before{content:"\f013"}.fa-droplet-slash:before,.fa-tint-slash:before{content:"\f5c7"}.fa-mosque:before{content:"\f678"}.fa-mosquito:before{content:"\e52b"}.fa-star-of-david:before{content:"\f69a"}.fa-person-military-rifle:before{content:"\e54b"}.fa-cart-shopping:before,.fa-shopping-cart:before{content:"\f07a"}.fa-vials:before{content:"\f493"}.fa-plug-circle-plus:before{content:"\e55f"}.fa-place-of-worship:before{content:"\f67f"}.fa-grip-vertical:before{content:"\f58e"}.fa-arrow-turn-up:before,.fa-level-up:before{content:"\f148"}.fa-u:before{content:"\55"}.fa-square-root-alt:before,.fa-square-root-variable:before{content:"\f698"}.fa-clock-four:before,.fa-clock:before{content:"\f017"}.fa-backward-step:before,.fa-step-backward:before{content:"\f048"}.fa-pallet:before{content:"\f482"}.fa-faucet:before{content:"\e005"}.fa-baseball-bat-ball:before{content:"\f432"}.fa-s:before{content:"\53"}.fa-timeline:before{content:"\e29c"}.fa-keyboard:before{content:"\f11c"}.fa-caret-down:before{content:"\f0d7"}.fa-clinic-medical:before,.fa-house-chimney-medical:before{content:"\f7f2"}.fa-temperature-3:before,.fa-temperature-three-quarters:before,.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-mobile-android-alt:before,.fa-mobile-screen:before{content:"\f3cf"}.fa-plane-up:before{content:"\e22d"}.fa-piggy-bank:before{content:"\f4d3"}.fa-battery-3:before,.fa-battery-half:before{content:"\f242"}.fa-mountain-city:before{content:"\e52e"}.fa-coins:before{content:"\f51e"}.fa-khanda:before{content:"\f66d"}.fa-sliders-h:before,.fa-sliders:before{content:"\f1de"}.fa-folder-tree:before{content:"\f802"}.fa-network-wired:before{content:"\f6ff"}.fa-map-pin:before{content:"\f276"}.fa-hamsa:before{content:"\f665"}.fa-cent-sign:before{content:"\e3f5"}.fa-flask:before{content:"\f0c3"}.fa-person-pregnant:before{content:"\e31e"}.fa-wand-sparkles:before{content:"\f72b"}.fa-ellipsis-v:before,.fa-ellipsis-vertical:before{content:"\f142"}.fa-ticket:before{content:"\f145"}.fa-power-off:before{content:"\f011"}.fa-long-arrow-alt-right:before,.fa-right-long:before{content:"\f30b"}.fa-flag-usa:before{content:"\f74d"}.fa-laptop-file:before{content:"\e51d"}.fa-teletype:before,.fa-tty:before{content:"\f1e4"}.fa-diagram-next:before{content:"\e476"}.fa-person-rifle:before{content:"\e54e"}.fa-house-medical-circle-exclamation:before{content:"\e512"}.fa-closed-captioning:before{content:"\f20a"}.fa-hiking:before,.fa-person-hiking:before{content:"\f6ec"}.fa-venus-double:before{content:"\f226"}.fa-images:before{content:"\f302"}.fa-calculator:before{content:"\f1ec"}.fa-people-pulling:before{content:"\e535"}.fa-n:before{content:"\4e"}.fa-cable-car:before,.fa-tram:before{content:"\f7da"}.fa-cloud-rain:before{content:"\f73d"}.fa-building-circle-xmark:before{content:"\e4d4"}.fa-ship:before{content:"\f21a"}.fa-arrows-down-to-line:before{content:"\e4b8"}.fa-download:before{content:"\f019"}.fa-face-grin:before,.fa-grin:before{content:"\f580"}.fa-backspace:before,.fa-delete-left:before{content:"\f55a"}.fa-eye-dropper-empty:before,.fa-eye-dropper:before,.fa-eyedropper:before{content:"\f1fb"}.fa-file-circle-check:before{content:"\e5a0"}.fa-forward:before{content:"\f04e"}.fa-mobile-android:before,.fa-mobile-phone:before,.fa-mobile:before{content:"\f3ce"}.fa-face-meh:before,.fa-meh:before{content:"\f11a"}.fa-align-center:before{content:"\f037"}.fa-book-dead:before,.fa-book-skull:before{content:"\f6b7"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-heart-circle-exclamation:before{content:"\e4fe"}.fa-home-alt:before,.fa-home-lg-alt:before,.fa-home:before,.fa-house:before{content:"\f015"}.fa-calendar-week:before{content:"\f784"}.fa-laptop-medical:before{content:"\f812"}.fa-b:before{content:"\42"}.fa-file-medical:before{content:"\f477"}.fa-dice-one:before{content:"\f525"}.fa-kiwi-bird:before{content:"\f535"}.fa-arrow-right-arrow-left:before,.fa-exchange:before{content:"\f0ec"}.fa-redo-alt:before,.fa-rotate-forward:before,.fa-rotate-right:before{content:"\f2f9"}.fa-cutlery:before,.fa-utensils:before{content:"\f2e7"}.fa-arrow-up-wide-short:before,.fa-sort-amount-up:before{content:"\f161"}.fa-mill-sign:before{content:"\e1ed"}.fa-bowl-rice:before{content:"\e2eb"}.fa-skull:before{content:"\f54c"}.fa-broadcast-tower:before,.fa-tower-broadcast:before{content:"\f519"}.fa-truck-pickup:before{content:"\f63c"}.fa-long-arrow-alt-up:before,.fa-up-long:before{content:"\f30c"}.fa-stop:before{content:"\f04d"}.fa-code-merge:before{content:"\f387"}.fa-upload:before{content:"\f093"}.fa-hurricane:before{content:"\f751"}.fa-mound:before{content:"\e52d"}.fa-toilet-portable:before{content:"\e583"}.fa-compact-disc:before{content:"\f51f"}.fa-file-arrow-down:before,.fa-file-download:before{content:"\f56d"}.fa-caravan:before{content:"\f8ff"}.fa-shield-cat:before{content:"\e572"}.fa-bolt:before,.fa-zap:before{content:"\f0e7"}.fa-glass-water:before{content:"\e4f4"}.fa-oil-well:before{content:"\e532"}.fa-vault:before{content:"\e2c5"}.fa-mars:before{content:"\f222"}.fa-toilet:before{content:"\f7d8"}.fa-plane-circle-xmark:before{content:"\e557"}.fa-cny:before,.fa-jpy:before,.fa-rmb:before,.fa-yen-sign:before,.fa-yen:before{content:"\f157"}.fa-rouble:before,.fa-rub:before,.fa-ruble-sign:before,.fa-ruble:before{content:"\f158"}.fa-sun:before{content:"\f185"}.fa-guitar:before{content:"\f7a6"}.fa-face-laugh-wink:before,.fa-laugh-wink:before{content:"\f59c"}.fa-horse-head:before{content:"\f7ab"}.fa-bore-hole:before{content:"\e4c3"}.fa-industry:before{content:"\f275"}.fa-arrow-alt-circle-down:before,.fa-circle-down:before{content:"\f358"}.fa-arrows-turn-to-dots:before{content:"\e4c1"}.fa-florin-sign:before{content:"\e184"}.fa-arrow-down-short-wide:before,.fa-sort-amount-desc:before,.fa-sort-amount-down-alt:before{content:"\f884"}.fa-less-than:before{content:"\3c"}.fa-angle-down:before{content:"\f107"}.fa-car-tunnel:before{content:"\e4de"}.fa-head-side-cough:before{content:"\e061"}.fa-grip-lines:before{content:"\f7a4"}.fa-thumbs-down:before{content:"\f165"}.fa-user-lock:before{content:"\f502"}.fa-arrow-right-long:before,.fa-long-arrow-right:before{content:"\f178"}.fa-anchor-circle-xmark:before{content:"\e4ac"}.fa-ellipsis-h:before,.fa-ellipsis:before{content:"\f141"}.fa-chess-pawn:before{content:"\f443"}.fa-first-aid:before,.fa-kit-medical:before{content:"\f479"}.fa-person-through-window:before{content:"\e5a9"}.fa-toolbox:before{content:"\f552"}.fa-hands-holding-circle:before{content:"\e4fb"}.fa-bug:before{content:"\f188"}.fa-credit-card-alt:before,.fa-credit-card:before{content:"\f09d"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-hand-holding-hand:before{content:"\e4f7"}.fa-book-open-reader:before,.fa-book-reader:before{content:"\f5da"}.fa-mountain-sun:before{content:"\e52f"}.fa-arrows-left-right-to-line:before{content:"\e4ba"}.fa-dice-d20:before{content:"\f6cf"}.fa-truck-droplet:before{content:"\e58c"}.fa-file-circle-xmark:before{content:"\e5a1"}.fa-temperature-arrow-up:before,.fa-temperature-up:before{content:"\e040"}.fa-medal:before{content:"\f5a2"}.fa-bed:before{content:"\f236"}.fa-h-square:before,.fa-square-h:before{content:"\f0fd"}.fa-podcast:before{content:"\f2ce"}.fa-temperature-4:before,.fa-temperature-full:before,.fa-thermometer-4:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-bell:before{content:"\f0f3"}.fa-superscript:before{content:"\f12b"}.fa-plug-circle-xmark:before{content:"\e560"}.fa-star-of-life:before{content:"\f621"}.fa-phone-slash:before{content:"\f3dd"}.fa-paint-roller:before{content:"\f5aa"}.fa-hands-helping:before,.fa-handshake-angle:before{content:"\f4c4"}.fa-location-dot:before,.fa-map-marker-alt:before{content:"\f3c5"}.fa-file:before{content:"\f15b"}.fa-greater-than:before{content:"\3e"}.fa-person-swimming:before,.fa-swimmer:before{content:"\f5c4"}.fa-arrow-down:before{content:"\f063"}.fa-droplet:before,.fa-tint:before{content:"\f043"}.fa-eraser:before{content:"\f12d"}.fa-earth-america:before,.fa-earth-americas:before,.fa-earth:before,.fa-globe-americas:before{content:"\f57d"}.fa-person-burst:before{content:"\e53b"}.fa-dove:before{content:"\f4ba"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-socks:before{content:"\f696"}.fa-inbox:before{content:"\f01c"}.fa-section:before{content:"\e447"}.fa-gauge-high:before,.fa-tachometer-alt-fast:before,.fa-tachometer-alt:before{content:"\f625"}.fa-envelope-open-text:before{content:"\f658"}.fa-hospital-alt:before,.fa-hospital-wide:before,.fa-hospital:before{content:"\f0f8"}.fa-wine-bottle:before{content:"\f72f"}.fa-chess-rook:before{content:"\f447"}.fa-bars-staggered:before,.fa-reorder:before,.fa-stream:before{content:"\f550"}.fa-dharmachakra:before{content:"\f655"}.fa-hotdog:before{content:"\f80f"}.fa-blind:before,.fa-person-walking-with-cane:before{content:"\f29d"}.fa-drum:before{content:"\f569"}.fa-ice-cream:before{content:"\f810"}.fa-heart-circle-bolt:before{content:"\e4fc"}.fa-fax:before{content:"\f1ac"}.fa-paragraph:before{content:"\f1dd"}.fa-check-to-slot:before,.fa-vote-yea:before{content:"\f772"}.fa-star-half:before{content:"\f089"}.fa-boxes-alt:before,.fa-boxes-stacked:before,.fa-boxes:before{content:"\f468"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-assistive-listening-systems:before,.fa-ear-listen:before{content:"\f2a2"}.fa-tree-city:before{content:"\e587"}.fa-play:before{content:"\f04b"}.fa-font:before{content:"\f031"}.fa-rupiah-sign:before{content:"\e23d"}.fa-magnifying-glass:before,.fa-search:before{content:"\f002"}.fa-ping-pong-paddle-ball:before,.fa-table-tennis-paddle-ball:before,.fa-table-tennis:before{content:"\f45d"}.fa-diagnoses:before,.fa-person-dots-from-line:before{content:"\f470"}.fa-trash-can-arrow-up:before,.fa-trash-restore-alt:before{content:"\f82a"}.fa-naira-sign:before{content:"\e1f6"}.fa-cart-arrow-down:before{content:"\f218"}.fa-walkie-talkie:before{content:"\f8ef"}.fa-file-edit:before,.fa-file-pen:before{content:"\f31c"}.fa-receipt:before{content:"\f543"}.fa-pen-square:before,.fa-pencil-square:before,.fa-square-pen:before{content:"\f14b"}.fa-suitcase-rolling:before{content:"\f5c1"}.fa-person-circle-exclamation:before{content:"\e53f"}.fa-chevron-down:before{content:"\f078"}.fa-battery-5:before,.fa-battery-full:before,.fa-battery:before{content:"\f240"}.fa-skull-crossbones:before{content:"\f714"}.fa-code-compare:before{content:"\e13a"}.fa-list-dots:before,.fa-list-ul:before{content:"\f0ca"}.fa-school-lock:before{content:"\e56f"}.fa-tower-cell:before{content:"\e585"}.fa-down-long:before,.fa-long-arrow-alt-down:before{content:"\f309"}.fa-ranking-star:before{content:"\e561"}.fa-chess-king:before{content:"\f43f"}.fa-person-harassing:before{content:"\e549"}.fa-brazilian-real-sign:before{content:"\e46c"}.fa-landmark-alt:before,.fa-landmark-dome:before{content:"\f752"}.fa-arrow-up:before{content:"\f062"}.fa-television:before,.fa-tv-alt:before,.fa-tv:before{content:"\f26c"}.fa-shrimp:before{content:"\e448"}.fa-list-check:before,.fa-tasks:before{content:"\f0ae"}.fa-jug-detergent:before{content:"\e519"}.fa-circle-user:before,.fa-user-circle:before{content:"\f2bd"}.fa-user-shield:before{content:"\f505"}.fa-wind:before{content:"\f72e"}.fa-car-burst:before,.fa-car-crash:before{content:"\f5e1"}.fa-y:before{content:"\59"}.fa-person-snowboarding:before,.fa-snowboarding:before{content:"\f7ce"}.fa-shipping-fast:before,.fa-truck-fast:before{content:"\f48b"}.fa-fish:before{content:"\f578"}.fa-user-graduate:before{content:"\f501"}.fa-adjust:before,.fa-circle-half-stroke:before{content:"\f042"}.fa-clapperboard:before{content:"\e131"}.fa-circle-radiation:before,.fa-radiation-alt:before{content:"\f7ba"}.fa-baseball-ball:before,.fa-baseball:before{content:"\f433"}.fa-jet-fighter-up:before{content:"\e518"}.fa-diagram-project:before,.fa-project-diagram:before{content:"\f542"}.fa-copy:before{content:"\f0c5"}.fa-volume-mute:before,.fa-volume-times:before,.fa-volume-xmark:before{content:"\f6a9"}.fa-hand-sparkles:before{content:"\e05d"}.fa-grip-horizontal:before,.fa-grip:before{content:"\f58d"}.fa-share-from-square:before,.fa-share-square:before{content:"\f14d"}.fa-child-combatant:before,.fa-child-rifle:before{content:"\e4e0"}.fa-gun:before{content:"\e19b"}.fa-phone-square:before,.fa-square-phone:before{content:"\f098"}.fa-add:before,.fa-plus:before{content:"\2b"}.fa-expand:before{content:"\f065"}.fa-computer:before{content:"\e4e5"}.fa-close:before,.fa-multiply:before,.fa-remove:before,.fa-times:before,.fa-xmark:before{content:"\f00d"}.fa-arrows-up-down-left-right:before,.fa-arrows:before{content:"\f047"}.fa-chalkboard-teacher:before,.fa-chalkboard-user:before{content:"\f51c"}.fa-peso-sign:before{content:"\e222"}.fa-building-shield:before{content:"\e4d8"}.fa-baby:before{content:"\f77c"}.fa-users-line:before{content:"\e592"}.fa-quote-left-alt:before,.fa-quote-left:before{content:"\f10d"}.fa-tractor:before{content:"\f722"}.fa-trash-arrow-up:before,.fa-trash-restore:before{content:"\f829"}.fa-arrow-down-up-lock:before{content:"\e4b0"}.fa-lines-leaning:before{content:"\e51e"}.fa-ruler-combined:before{content:"\f546"}.fa-copyright:before{content:"\f1f9"}.fa-equals:before{content:"\3d"}.fa-blender:before{content:"\f517"}.fa-teeth:before{content:"\f62e"}.fa-ils:before,.fa-shekel-sign:before,.fa-shekel:before,.fa-sheqel-sign:before,.fa-sheqel:before{content:"\f20b"}.fa-map:before{content:"\f279"}.fa-rocket:before{content:"\f135"}.fa-photo-film:before,.fa-photo-video:before{content:"\f87c"}.fa-folder-minus:before{content:"\f65d"}.fa-store:before{content:"\f54e"}.fa-arrow-trend-up:before{content:"\e098"}.fa-plug-circle-minus:before{content:"\e55e"}.fa-sign-hanging:before,.fa-sign:before{content:"\f4d9"}.fa-bezier-curve:before{content:"\f55b"}.fa-bell-slash:before{content:"\f1f6"}.fa-tablet-android:before,.fa-tablet:before{content:"\f3fb"}.fa-school-flag:before{content:"\e56e"}.fa-fill:before{content:"\f575"}.fa-angle-up:before{content:"\f106"}.fa-drumstick-bite:before{content:"\f6d7"}.fa-holly-berry:before{content:"\f7aa"}.fa-chevron-left:before{content:"\f053"}.fa-bacteria:before{content:"\e059"}.fa-hand-lizard:before{content:"\f258"}.fa-notdef:before{content:"\e1fe"}.fa-disease:before{content:"\f7fa"}.fa-briefcase-medical:before{content:"\f469"}.fa-genderless:before{content:"\f22d"}.fa-chevron-right:before{content:"\f054"}.fa-retweet:before{content:"\f079"}.fa-car-alt:before,.fa-car-rear:before{content:"\f5de"}.fa-pump-soap:before{content:"\e06b"}.fa-video-slash:before{content:"\f4e2"}.fa-battery-2:before,.fa-battery-quarter:before{content:"\f243"}.fa-radio:before{content:"\f8d7"}.fa-baby-carriage:before,.fa-carriage-baby:before{content:"\f77d"}.fa-traffic-light:before{content:"\f637"}.fa-thermometer:before{content:"\f491"}.fa-vr-cardboard:before{content:"\f729"}.fa-hand-middle-finger:before{content:"\f806"}.fa-percent:before,.fa-percentage:before{content:"\25"}.fa-truck-moving:before{content:"\f4df"}.fa-glass-water-droplet:before{content:"\e4f5"}.fa-display:before{content:"\e163"}.fa-face-smile:before,.fa-smile:before{content:"\f118"}.fa-thumb-tack:before,.fa-thumbtack:before{content:"\f08d"}.fa-trophy:before{content:"\f091"}.fa-person-praying:before,.fa-pray:before{content:"\f683"}.fa-hammer:before{content:"\f6e3"}.fa-hand-peace:before{content:"\f25b"}.fa-rotate:before,.fa-sync-alt:before{content:"\f2f1"}.fa-spinner:before{content:"\f110"}.fa-robot:before{content:"\f544"}.fa-peace:before{content:"\f67c"}.fa-cogs:before,.fa-gears:before{content:"\f085"}.fa-warehouse:before{content:"\f494"}.fa-arrow-up-right-dots:before{content:"\e4b7"}.fa-splotch:before{content:"\f5bc"}.fa-face-grin-hearts:before,.fa-grin-hearts:before{content:"\f584"}.fa-dice-four:before{content:"\f524"}.fa-sim-card:before{content:"\f7c4"}.fa-transgender-alt:before,.fa-transgender:before{content:"\f225"}.fa-mercury:before{content:"\f223"}.fa-arrow-turn-down:before,.fa-level-down:before{content:"\f149"}.fa-person-falling-burst:before{content:"\e547"}.fa-award:before{content:"\f559"}.fa-ticket-alt:before,.fa-ticket-simple:before{content:"\f3ff"}.fa-building:before{content:"\f1ad"}.fa-angle-double-left:before,.fa-angles-left:before{content:"\f100"}.fa-qrcode:before{content:"\f029"}.fa-clock-rotate-left:before,.fa-history:before{content:"\f1da"}.fa-face-grin-beam-sweat:before,.fa-grin-beam-sweat:before{content:"\f583"}.fa-arrow-right-from-file:before,.fa-file-export:before{content:"\f56e"}.fa-shield-blank:before,.fa-shield:before{content:"\f132"}.fa-arrow-up-short-wide:before,.fa-sort-amount-up-alt:before{content:"\f885"}.fa-house-medical:before{content:"\e3b2"}.fa-golf-ball-tee:before,.fa-golf-ball:before{content:"\f450"}.fa-chevron-circle-left:before,.fa-circle-chevron-left:before{content:"\f137"}.fa-house-chimney-window:before{content:"\e00d"}.fa-pen-nib:before{content:"\f5ad"}.fa-tent-arrow-turn-left:before{content:"\e580"}.fa-tents:before{content:"\e582"}.fa-magic:before,.fa-wand-magic:before{content:"\f0d0"}.fa-dog:before{content:"\f6d3"}.fa-carrot:before{content:"\f787"}.fa-moon:before{content:"\f186"}.fa-wine-glass-alt:before,.fa-wine-glass-empty:before{content:"\f5ce"}.fa-cheese:before{content:"\f7ef"}.fa-yin-yang:before{content:"\f6ad"}.fa-music:before{content:"\f001"}.fa-code-commit:before{content:"\f386"}.fa-temperature-low:before{content:"\f76b"}.fa-biking:before,.fa-person-biking:before{content:"\f84a"}.fa-broom:before{content:"\f51a"}.fa-shield-heart:before{content:"\e574"}.fa-gopuram:before{content:"\f664"}.fa-earth-oceania:before,.fa-globe-oceania:before{content:"\e47b"}.fa-square-xmark:before,.fa-times-square:before,.fa-xmark-square:before{content:"\f2d3"}.fa-hashtag:before{content:"\23"}.fa-expand-alt:before,.fa-up-right-and-down-left-from-center:before{content:"\f424"}.fa-oil-can:before{content:"\f613"}.fa-t:before{content:"\54"}.fa-hippo:before{content:"\f6ed"}.fa-chart-column:before{content:"\e0e3"}.fa-infinity:before{content:"\f534"}.fa-vial-circle-check:before{content:"\e596"}.fa-person-arrow-down-to-line:before{content:"\e538"}.fa-voicemail:before{content:"\f897"}.fa-fan:before{content:"\f863"}.fa-person-walking-luggage:before{content:"\e554"}.fa-arrows-alt-v:before,.fa-up-down:before{content:"\f338"}.fa-cloud-moon-rain:before{content:"\f73c"}.fa-calendar:before{content:"\f133"}.fa-trailer:before{content:"\e041"}.fa-bahai:before,.fa-haykal:before{content:"\f666"}.fa-sd-card:before{content:"\f7c2"}.fa-dragon:before{content:"\f6d5"}.fa-shoe-prints:before{content:"\f54b"}.fa-circle-plus:before,.fa-plus-circle:before{content:"\f055"}.fa-face-grin-tongue-wink:before,.fa-grin-tongue-wink:before{content:"\f58b"}.fa-hand-holding:before{content:"\f4bd"}.fa-plug-circle-exclamation:before{content:"\e55d"}.fa-chain-broken:before,.fa-chain-slash:before,.fa-link-slash:before,.fa-unlink:before{content:"\f127"}.fa-clone:before{content:"\f24d"}.fa-person-walking-arrow-loop-left:before{content:"\e551"}.fa-arrow-up-z-a:before,.fa-sort-alpha-up-alt:before{content:"\f882"}.fa-fire-alt:before,.fa-fire-flame-curved:before{content:"\f7e4"}.fa-tornado:before{content:"\f76f"}.fa-file-circle-plus:before{content:"\e494"}.fa-book-quran:before,.fa-quran:before{content:"\f687"}.fa-anchor:before{content:"\f13d"}.fa-border-all:before{content:"\f84c"}.fa-angry:before,.fa-face-angry:before{content:"\f556"}.fa-cookie-bite:before{content:"\f564"}.fa-arrow-trend-down:before{content:"\e097"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-draw-polygon:before{content:"\f5ee"}.fa-balance-scale:before,.fa-scale-balanced:before{content:"\f24e"}.fa-gauge-simple-high:before,.fa-tachometer-fast:before,.fa-tachometer:before{content:"\f62a"}.fa-shower:before{content:"\f2cc"}.fa-desktop-alt:before,.fa-desktop:before{content:"\f390"}.fa-m:before{content:"\4d"}.fa-table-list:before,.fa-th-list:before{content:"\f00b"}.fa-comment-sms:before,.fa-sms:before{content:"\f7cd"}.fa-book:before{content:"\f02d"}.fa-user-plus:before{content:"\f234"}.fa-check:before{content:"\f00c"}.fa-battery-4:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-house-circle-check:before{content:"\e509"}.fa-angle-left:before{content:"\f104"}.fa-diagram-successor:before{content:"\e47a"}.fa-truck-arrow-right:before{content:"\e58b"}.fa-arrows-split-up-and-left:before{content:"\e4bc"}.fa-fist-raised:before,.fa-hand-fist:before{content:"\f6de"}.fa-cloud-moon:before{content:"\f6c3"}.fa-briefcase:before{content:"\f0b1"}.fa-person-falling:before{content:"\e546"}.fa-image-portrait:before,.fa-portrait:before{content:"\f3e0"}.fa-user-tag:before{content:"\f507"}.fa-rug:before{content:"\e569"}.fa-earth-europe:before,.fa-globe-europe:before{content:"\f7a2"}.fa-cart-flatbed-suitcase:before,.fa-luggage-cart:before{content:"\f59d"}.fa-rectangle-times:before,.fa-rectangle-xmark:before,.fa-times-rectangle:before,.fa-window-close:before{content:"\f410"}.fa-baht-sign:before{content:"\e0ac"}.fa-book-open:before{content:"\f518"}.fa-book-journal-whills:before,.fa-journal-whills:before{content:"\f66a"}.fa-handcuffs:before{content:"\e4f8"}.fa-exclamation-triangle:before,.fa-triangle-exclamation:before,.fa-warning:before{content:"\f071"}.fa-database:before{content:"\f1c0"}.fa-arrow-turn-right:before,.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-bottle-droplet:before{content:"\e4c4"}.fa-mask-face:before{content:"\e1d7"}.fa-hill-rockslide:before{content:"\e508"}.fa-exchange-alt:before,.fa-right-left:before{content:"\f362"}.fa-paper-plane:before{content:"\f1d8"}.fa-road-circle-exclamation:before{content:"\e565"}.fa-dungeon:before{content:"\f6d9"}.fa-align-right:before{content:"\f038"}.fa-money-bill-1-wave:before,.fa-money-bill-wave-alt:before{content:"\f53b"}.fa-life-ring:before{content:"\f1cd"}.fa-hands:before,.fa-sign-language:before,.fa-signing:before{content:"\f2a7"}.fa-calendar-day:before{content:"\f783"}.fa-ladder-water:before,.fa-swimming-pool:before,.fa-water-ladder:before{content:"\f5c5"}.fa-arrows-up-down:before,.fa-arrows-v:before{content:"\f07d"}.fa-face-grimace:before,.fa-grimace:before{content:"\f57f"}.fa-wheelchair-alt:before,.fa-wheelchair-move:before{content:"\e2ce"}.fa-level-down-alt:before,.fa-turn-down:before{content:"\f3be"}.fa-person-walking-arrow-right:before{content:"\e552"}.fa-envelope-square:before,.fa-square-envelope:before{content:"\f199"}.fa-dice:before{content:"\f522"}.fa-bowling-ball:before{content:"\f436"}.fa-brain:before{content:"\f5dc"}.fa-band-aid:before,.fa-bandage:before{content:"\f462"}.fa-calendar-minus:before{content:"\f272"}.fa-circle-xmark:before,.fa-times-circle:before,.fa-xmark-circle:before{content:"\f057"}.fa-gifts:before{content:"\f79c"}.fa-hotel:before{content:"\f594"}.fa-earth-asia:before,.fa-globe-asia:before{content:"\f57e"}.fa-id-card-alt:before,.fa-id-card-clip:before{content:"\f47f"}.fa-magnifying-glass-plus:before,.fa-search-plus:before{content:"\f00e"}.fa-thumbs-up:before{content:"\f164"}.fa-user-clock:before{content:"\f4fd"}.fa-allergies:before,.fa-hand-dots:before{content:"\f461"}.fa-file-invoice:before{content:"\f570"}.fa-window-minimize:before{content:"\f2d1"}.fa-coffee:before,.fa-mug-saucer:before{content:"\f0f4"}.fa-brush:before{content:"\f55d"}.fa-mask:before{content:"\f6fa"}.fa-magnifying-glass-minus:before,.fa-search-minus:before{content:"\f010"}.fa-ruler-vertical:before{content:"\f548"}.fa-user-alt:before,.fa-user-large:before{content:"\f406"}.fa-train-tram:before{content:"\e5b4"}.fa-user-nurse:before{content:"\f82f"}.fa-syringe:before{content:"\f48e"}.fa-cloud-sun:before{content:"\f6c4"}.fa-stopwatch-20:before{content:"\e06f"}.fa-square-full:before{content:"\f45c"}.fa-magnet:before{content:"\f076"}.fa-jar:before{content:"\e516"}.fa-note-sticky:before,.fa-sticky-note:before{content:"\f249"}.fa-bug-slash:before{content:"\e490"}.fa-arrow-up-from-water-pump:before{content:"\e4b6"}.fa-bone:before{content:"\f5d7"}.fa-user-injured:before{content:"\f728"}.fa-face-sad-tear:before,.fa-sad-tear:before{content:"\f5b4"}.fa-plane:before{content:"\f072"}.fa-tent-arrows-down:before{content:"\e581"}.fa-exclamation:before{content:"\21"}.fa-arrows-spin:before{content:"\e4bb"}.fa-print:before{content:"\f02f"}.fa-try:before,.fa-turkish-lira-sign:before,.fa-turkish-lira:before{content:"\e2bb"}.fa-dollar-sign:before,.fa-dollar:before,.fa-usd:before{content:"\24"}.fa-x:before{content:"\58"}.fa-magnifying-glass-dollar:before,.fa-search-dollar:before{content:"\f688"}.fa-users-cog:before,.fa-users-gear:before{content:"\f509"}.fa-person-military-pointing:before{content:"\e54a"}.fa-bank:before,.fa-building-columns:before,.fa-institution:before,.fa-museum:before,.fa-university:before{content:"\f19c"}.fa-umbrella:before{content:"\f0e9"}.fa-trowel:before{content:"\e589"}.fa-d:before{content:"\44"}.fa-stapler:before{content:"\e5af"}.fa-masks-theater:before,.fa-theater-masks:before{content:"\f630"}.fa-kip-sign:before{content:"\e1c4"}.fa-hand-point-left:before{content:"\f0a5"}.fa-handshake-alt:before,.fa-handshake-simple:before{content:"\f4c6"}.fa-fighter-jet:before,.fa-jet-fighter:before{content:"\f0fb"}.fa-share-alt-square:before,.fa-square-share-nodes:before{content:"\f1e1"}.fa-barcode:before{content:"\f02a"}.fa-plus-minus:before{content:"\e43c"}.fa-video-camera:before,.fa-video:before{content:"\f03d"}.fa-graduation-cap:before,.fa-mortar-board:before{content:"\f19d"}.fa-hand-holding-medical:before{content:"\e05c"}.fa-person-circle-check:before{content:"\e53e"}.fa-level-up-alt:before,.fa-turn-up:before{content:"\f3bf"} .fa-sr-only,.fa-sr-only-focusable:not(:focus),.sr-only,.sr-only-focusable:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host,:root{--fa-style-family-brands:"Font Awesome 6 Brands";--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands"}@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}.fa-brands,.fab{font-weight:400}.fa-monero:before{content:"\f3d0"}.fa-hooli:before{content:"\f427"}.fa-yelp:before{content:"\f1e9"}.fa-cc-visa:before{content:"\f1f0"}.fa-lastfm:before{content:"\f202"}.fa-shopware:before{content:"\f5b5"}.fa-creative-commons-nc:before{content:"\f4e8"}.fa-aws:before{content:"\f375"}.fa-redhat:before{content:"\f7bc"}.fa-yoast:before{content:"\f2b1"}.fa-cloudflare:before{content:"\e07d"}.fa-ups:before{content:"\f7e0"}.fa-wpexplorer:before{content:"\f2de"}.fa-dyalog:before{content:"\f399"}.fa-bity:before{content:"\f37a"}.fa-stackpath:before{content:"\f842"}.fa-buysellads:before{content:"\f20d"}.fa-first-order:before{content:"\f2b0"}.fa-modx:before{content:"\f285"}.fa-guilded:before{content:"\e07e"}.fa-vnv:before{content:"\f40b"}.fa-js-square:before,.fa-square-js:before{content:"\f3b9"}.fa-microsoft:before{content:"\f3ca"}.fa-qq:before{content:"\f1d6"}.fa-orcid:before{content:"\f8d2"}.fa-java:before{content:"\f4e4"}.fa-invision:before{content:"\f7b0"}.fa-creative-commons-pd-alt:before{content:"\f4ed"}.fa-centercode:before{content:"\f380"}.fa-glide-g:before{content:"\f2a6"}.fa-drupal:before{content:"\f1a9"}.fa-hire-a-helper:before{content:"\f3b0"}.fa-creative-commons-by:before{content:"\f4e7"}.fa-unity:before{content:"\e049"}.fa-whmcs:before{content:"\f40d"}.fa-rocketchat:before{content:"\f3e8"}.fa-vk:before{content:"\f189"}.fa-untappd:before{content:"\f405"}.fa-mailchimp:before{content:"\f59e"}.fa-css3-alt:before{content:"\f38b"}.fa-reddit-square:before,.fa-square-reddit:before{content:"\f1a2"}.fa-vimeo-v:before{content:"\f27d"}.fa-contao:before{content:"\f26d"}.fa-square-font-awesome:before{content:"\e5ad"}.fa-deskpro:before{content:"\f38f"}.fa-sistrix:before{content:"\f3ee"}.fa-instagram-square:before,.fa-square-instagram:before{content:"\e055"}.fa-battle-net:before{content:"\f835"}.fa-the-red-yeti:before{content:"\f69d"}.fa-hacker-news-square:before,.fa-square-hacker-news:before{content:"\f3af"}.fa-edge:before{content:"\f282"}.fa-napster:before{content:"\f3d2"}.fa-snapchat-square:before,.fa-square-snapchat:before{content:"\f2ad"}.fa-google-plus-g:before{content:"\f0d5"}.fa-artstation:before{content:"\f77a"}.fa-markdown:before{content:"\f60f"}.fa-sourcetree:before{content:"\f7d3"}.fa-google-plus:before{content:"\f2b3"}.fa-diaspora:before{content:"\f791"}.fa-foursquare:before{content:"\f180"}.fa-stack-overflow:before{content:"\f16c"}.fa-github-alt:before{content:"\f113"}.fa-phoenix-squadron:before{content:"\f511"}.fa-pagelines:before{content:"\f18c"}.fa-algolia:before{content:"\f36c"}.fa-red-river:before{content:"\f3e3"}.fa-creative-commons-sa:before{content:"\f4ef"}.fa-safari:before{content:"\f267"}.fa-google:before{content:"\f1a0"}.fa-font-awesome-alt:before,.fa-square-font-awesome-stroke:before{content:"\f35c"}.fa-atlassian:before{content:"\f77b"}.fa-linkedin-in:before{content:"\f0e1"}.fa-digital-ocean:before{content:"\f391"}.fa-nimblr:before{content:"\f5a8"}.fa-chromecast:before{content:"\f838"}.fa-evernote:before{content:"\f839"}.fa-hacker-news:before{content:"\f1d4"}.fa-creative-commons-sampling:before{content:"\f4f0"}.fa-adversal:before{content:"\f36a"}.fa-creative-commons:before{content:"\f25e"}.fa-watchman-monitoring:before{content:"\e087"}.fa-fonticons:before{content:"\f280"}.fa-weixin:before{content:"\f1d7"}.fa-shirtsinbulk:before{content:"\f214"}.fa-codepen:before{content:"\f1cb"}.fa-git-alt:before{content:"\f841"}.fa-lyft:before{content:"\f3c3"}.fa-rev:before{content:"\f5b2"}.fa-windows:before{content:"\f17a"}.fa-wizards-of-the-coast:before{content:"\f730"}.fa-square-viadeo:before,.fa-viadeo-square:before{content:"\f2aa"}.fa-meetup:before{content:"\f2e0"}.fa-centos:before{content:"\f789"}.fa-adn:before{content:"\f170"}.fa-cloudsmith:before{content:"\f384"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-dribbble-square:before,.fa-square-dribbble:before{content:"\f397"}.fa-codiepie:before{content:"\f284"}.fa-node:before{content:"\f419"}.fa-mix:before{content:"\f3cb"}.fa-steam:before{content:"\f1b6"}.fa-cc-apple-pay:before{content:"\f416"}.fa-scribd:before{content:"\f28a"}.fa-openid:before{content:"\f19b"}.fa-instalod:before{content:"\e081"}.fa-expeditedssl:before{content:"\f23e"}.fa-sellcast:before{content:"\f2da"}.fa-square-twitter:before,.fa-twitter-square:before{content:"\f081"}.fa-r-project:before{content:"\f4f7"}.fa-delicious:before{content:"\f1a5"}.fa-freebsd:before{content:"\f3a4"}.fa-vuejs:before{content:"\f41f"}.fa-accusoft:before{content:"\f369"}.fa-ioxhost:before{content:"\f208"}.fa-fonticons-fi:before{content:"\f3a2"}.fa-app-store:before{content:"\f36f"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-itunes-note:before{content:"\f3b5"}.fa-golang:before{content:"\e40f"}.fa-kickstarter:before{content:"\f3bb"}.fa-grav:before{content:"\f2d6"}.fa-weibo:before{content:"\f18a"}.fa-uncharted:before{content:"\e084"}.fa-firstdraft:before{content:"\f3a1"}.fa-square-youtube:before,.fa-youtube-square:before{content:"\f431"}.fa-wikipedia-w:before{content:"\f266"}.fa-rendact:before,.fa-wpressr:before{content:"\f3e4"}.fa-angellist:before{content:"\f209"}.fa-galactic-republic:before{content:"\f50c"}.fa-nfc-directional:before{content:"\e530"}.fa-skype:before{content:"\f17e"}.fa-joget:before{content:"\f3b7"}.fa-fedora:before{content:"\f798"}.fa-stripe-s:before{content:"\f42a"}.fa-meta:before{content:"\e49b"}.fa-laravel:before{content:"\f3bd"}.fa-hotjar:before{content:"\f3b1"}.fa-bluetooth-b:before{content:"\f294"}.fa-sticker-mule:before{content:"\f3f7"}.fa-creative-commons-zero:before{content:"\f4f3"}.fa-hips:before{content:"\f452"}.fa-behance:before{content:"\f1b4"}.fa-reddit:before{content:"\f1a1"}.fa-discord:before{content:"\f392"}.fa-chrome:before{content:"\f268"}.fa-app-store-ios:before{content:"\f370"}.fa-cc-discover:before{content:"\f1f2"}.fa-wpbeginner:before{content:"\f297"}.fa-confluence:before{content:"\f78d"}.fa-mdb:before{content:"\f8ca"}.fa-dochub:before{content:"\f394"}.fa-accessible-icon:before{content:"\f368"}.fa-ebay:before{content:"\f4f4"}.fa-amazon:before{content:"\f270"}.fa-unsplash:before{content:"\e07c"}.fa-yarn:before{content:"\f7e3"}.fa-square-steam:before,.fa-steam-square:before{content:"\f1b7"}.fa-500px:before{content:"\f26e"}.fa-square-vimeo:before,.fa-vimeo-square:before{content:"\f194"}.fa-asymmetrik:before{content:"\f372"}.fa-font-awesome-flag:before,.fa-font-awesome-logo-full:before,.fa-font-awesome:before{content:"\f2b4"}.fa-gratipay:before{content:"\f184"}.fa-apple:before{content:"\f179"}.fa-hive:before{content:"\e07f"}.fa-gitkraken:before{content:"\f3a6"}.fa-keybase:before{content:"\f4f5"}.fa-apple-pay:before{content:"\f415"}.fa-padlet:before{content:"\e4a0"}.fa-amazon-pay:before{content:"\f42c"}.fa-github-square:before,.fa-square-github:before{content:"\f092"}.fa-stumbleupon:before{content:"\f1a4"}.fa-fedex:before{content:"\f797"}.fa-phoenix-framework:before{content:"\f3dc"}.fa-shopify:before{content:"\e057"}.fa-neos:before{content:"\f612"}.fa-hackerrank:before{content:"\f5f7"}.fa-researchgate:before{content:"\f4f8"}.fa-swift:before{content:"\f8e1"}.fa-angular:before{content:"\f420"}.fa-speakap:before{content:"\f3f3"}.fa-angrycreative:before{content:"\f36e"}.fa-y-combinator:before{content:"\f23b"}.fa-empire:before{content:"\f1d1"}.fa-envira:before{content:"\f299"}.fa-gitlab-square:before,.fa-square-gitlab:before{content:"\e5ae"}.fa-studiovinari:before{content:"\f3f8"}.fa-pied-piper:before{content:"\f2ae"}.fa-wordpress:before{content:"\f19a"}.fa-product-hunt:before{content:"\f288"}.fa-firefox:before{content:"\f269"}.fa-linode:before{content:"\f2b8"}.fa-goodreads:before{content:"\f3a8"}.fa-odnoklassniki-square:before,.fa-square-odnoklassniki:before{content:"\f264"}.fa-jsfiddle:before{content:"\f1cc"}.fa-sith:before{content:"\f512"}.fa-themeisle:before{content:"\f2b2"}.fa-page4:before{content:"\f3d7"}.fa-hashnode:before{content:"\e499"}.fa-react:before{content:"\f41b"}.fa-cc-paypal:before{content:"\f1f4"}.fa-squarespace:before{content:"\f5be"}.fa-cc-stripe:before{content:"\f1f5"}.fa-creative-commons-share:before{content:"\f4f2"}.fa-bitcoin:before{content:"\f379"}.fa-keycdn:before{content:"\f3ba"}.fa-opera:before{content:"\f26a"}.fa-itch-io:before{content:"\f83a"}.fa-umbraco:before{content:"\f8e8"}.fa-galactic-senate:before{content:"\f50d"}.fa-ubuntu:before{content:"\f7df"}.fa-draft2digital:before{content:"\f396"}.fa-stripe:before{content:"\f429"}.fa-houzz:before{content:"\f27c"}.fa-gg:before{content:"\f260"}.fa-dhl:before{content:"\f790"}.fa-pinterest-square:before,.fa-square-pinterest:before{content:"\f0d3"}.fa-xing:before{content:"\f168"}.fa-blackberry:before{content:"\f37b"}.fa-creative-commons-pd:before{content:"\f4ec"}.fa-playstation:before{content:"\f3df"}.fa-quinscape:before{content:"\f459"}.fa-less:before{content:"\f41d"}.fa-blogger-b:before{content:"\f37d"}.fa-opencart:before{content:"\f23d"}.fa-vine:before{content:"\f1ca"}.fa-paypal:before{content:"\f1ed"}.fa-gitlab:before{content:"\f296"}.fa-typo3:before{content:"\f42b"}.fa-reddit-alien:before{content:"\f281"}.fa-yahoo:before{content:"\f19e"}.fa-dailymotion:before{content:"\e052"}.fa-affiliatetheme:before{content:"\f36b"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-bootstrap:before{content:"\f836"}.fa-odnoklassniki:before{content:"\f263"}.fa-nfc-symbol:before{content:"\e531"}.fa-ethereum:before{content:"\f42e"}.fa-speaker-deck:before{content:"\f83c"}.fa-creative-commons-nc-eu:before{content:"\f4e9"}.fa-patreon:before{content:"\f3d9"}.fa-avianex:before{content:"\f374"}.fa-ello:before{content:"\f5f1"}.fa-gofore:before{content:"\f3a7"}.fa-bimobject:before{content:"\f378"}.fa-facebook-f:before{content:"\f39e"}.fa-google-plus-square:before,.fa-square-google-plus:before{content:"\f0d4"}.fa-mandalorian:before{content:"\f50f"}.fa-first-order-alt:before{content:"\f50a"}.fa-osi:before{content:"\f41a"}.fa-google-wallet:before{content:"\f1ee"}.fa-d-and-d-beyond:before{content:"\f6ca"}.fa-periscope:before{content:"\f3da"}.fa-fulcrum:before{content:"\f50b"}.fa-cloudscale:before{content:"\f383"}.fa-forumbee:before{content:"\f211"}.fa-mizuni:before{content:"\f3cc"}.fa-schlix:before{content:"\f3ea"}.fa-square-xing:before,.fa-xing-square:before{content:"\f169"}.fa-bandcamp:before{content:"\f2d5"}.fa-wpforms:before{content:"\f298"}.fa-cloudversify:before{content:"\f385"}.fa-usps:before{content:"\f7e1"}.fa-megaport:before{content:"\f5a3"}.fa-magento:before{content:"\f3c4"}.fa-spotify:before{content:"\f1bc"}.fa-optin-monster:before{content:"\f23c"}.fa-fly:before{content:"\f417"}.fa-aviato:before{content:"\f421"}.fa-itunes:before{content:"\f3b4"}.fa-cuttlefish:before{content:"\f38c"}.fa-blogger:before{content:"\f37c"}.fa-flickr:before{content:"\f16e"}.fa-viber:before{content:"\f409"}.fa-soundcloud:before{content:"\f1be"}.fa-digg:before{content:"\f1a6"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-symfony:before{content:"\f83d"}.fa-maxcdn:before{content:"\f136"}.fa-etsy:before{content:"\f2d7"}.fa-facebook-messenger:before{content:"\f39f"}.fa-audible:before{content:"\f373"}.fa-think-peaks:before{content:"\f731"}.fa-bilibili:before{content:"\e3d9"}.fa-erlang:before{content:"\f39d"}.fa-cotton-bureau:before{content:"\f89e"}.fa-dashcube:before{content:"\f210"}.fa-42-group:before,.fa-innosoft:before{content:"\e080"}.fa-stack-exchange:before{content:"\f18d"}.fa-elementor:before{content:"\f430"}.fa-pied-piper-square:before,.fa-square-pied-piper:before{content:"\e01e"}.fa-creative-commons-nd:before{content:"\f4eb"}.fa-palfed:before{content:"\f3d8"}.fa-superpowers:before{content:"\f2dd"}.fa-resolving:before{content:"\f3e7"}.fa-xbox:before{content:"\f412"}.fa-searchengin:before{content:"\f3eb"}.fa-tiktok:before{content:"\e07b"}.fa-facebook-square:before,.fa-square-facebook:before{content:"\f082"}.fa-renren:before{content:"\f18b"}.fa-linux:before{content:"\f17c"}.fa-glide:before{content:"\f2a5"}.fa-linkedin:before{content:"\f08c"}.fa-hubspot:before{content:"\f3b2"}.fa-deploydog:before{content:"\f38e"}.fa-twitch:before{content:"\f1e8"}.fa-ravelry:before{content:"\f2d9"}.fa-mixer:before{content:"\e056"}.fa-lastfm-square:before,.fa-square-lastfm:before{content:"\f203"}.fa-vimeo:before{content:"\f40a"}.fa-mendeley:before{content:"\f7b3"}.fa-uniregistry:before{content:"\f404"}.fa-figma:before{content:"\f799"}.fa-creative-commons-remix:before{content:"\f4ee"}.fa-cc-amazon-pay:before{content:"\f42d"}.fa-dropbox:before{content:"\f16b"}.fa-instagram:before{content:"\f16d"}.fa-cmplid:before{content:"\e360"}.fa-facebook:before{content:"\f09a"}.fa-gripfire:before{content:"\f3ac"}.fa-jedi-order:before{content:"\f50e"}.fa-uikit:before{content:"\f403"}.fa-fort-awesome-alt:before{content:"\f3a3"}.fa-phabricator:before{content:"\f3db"}.fa-ussunnah:before{content:"\f407"}.fa-earlybirds:before{content:"\f39a"}.fa-trade-federation:before{content:"\f513"}.fa-autoprefixer:before{content:"\f41c"}.fa-whatsapp:before{content:"\f232"}.fa-slideshare:before{content:"\f1e7"}.fa-google-play:before{content:"\f3ab"}.fa-viadeo:before{content:"\f2a9"}.fa-line:before{content:"\f3c0"}.fa-google-drive:before{content:"\f3aa"}.fa-servicestack:before{content:"\f3ec"}.fa-simplybuilt:before{content:"\f215"}.fa-bitbucket:before{content:"\f171"}.fa-imdb:before{content:"\f2d8"}.fa-deezer:before{content:"\e077"}.fa-raspberry-pi:before{content:"\f7bb"}.fa-jira:before{content:"\f7b1"}.fa-docker:before{content:"\f395"}.fa-screenpal:before{content:"\e570"}.fa-bluetooth:before{content:"\f293"}.fa-gitter:before{content:"\f426"}.fa-d-and-d:before{content:"\f38d"}.fa-microblog:before{content:"\e01a"}.fa-cc-diners-club:before{content:"\f24c"}.fa-gg-circle:before{content:"\f261"}.fa-pied-piper-hat:before{content:"\f4e5"}.fa-kickstarter-k:before{content:"\f3bc"}.fa-yandex:before{content:"\f413"}.fa-readme:before{content:"\f4d5"}.fa-html5:before{content:"\f13b"}.fa-sellsy:before{content:"\f213"}.fa-sass:before{content:"\f41e"}.fa-wirsindhandwerk:before,.fa-wsh:before{content:"\e2d0"}.fa-buromobelexperte:before{content:"\f37f"}.fa-salesforce:before{content:"\f83b"}.fa-octopus-deploy:before{content:"\e082"}.fa-medapps:before{content:"\f3c6"}.fa-ns8:before{content:"\f3d5"}.fa-pinterest-p:before{content:"\f231"}.fa-apper:before{content:"\f371"}.fa-fort-awesome:before{content:"\f286"}.fa-waze:before{content:"\f83f"}.fa-cc-jcb:before{content:"\f24b"}.fa-snapchat-ghost:before,.fa-snapchat:before{content:"\f2ab"}.fa-fantasy-flight-games:before{content:"\f6dc"}.fa-rust:before{content:"\e07a"}.fa-wix:before{content:"\f5cf"}.fa-behance-square:before,.fa-square-behance:before{content:"\f1b5"}.fa-supple:before{content:"\f3f9"}.fa-rebel:before{content:"\f1d0"}.fa-css3:before{content:"\f13c"}.fa-staylinked:before{content:"\f3f5"}.fa-kaggle:before{content:"\f5fa"}.fa-space-awesome:before{content:"\e5ac"}.fa-deviantart:before{content:"\f1bd"}.fa-cpanel:before{content:"\f388"}.fa-goodreads-g:before{content:"\f3a9"}.fa-git-square:before,.fa-square-git:before{content:"\f1d2"}.fa-square-tumblr:before,.fa-tumblr-square:before{content:"\f174"}.fa-trello:before{content:"\f181"}.fa-creative-commons-nc-jp:before{content:"\f4ea"}.fa-get-pocket:before{content:"\f265"}.fa-perbyte:before{content:"\e083"}.fa-grunt:before{content:"\f3ad"}.fa-weebly:before{content:"\f5cc"}.fa-connectdevelop:before{content:"\f20e"}.fa-leanpub:before{content:"\f212"}.fa-black-tie:before{content:"\f27e"}.fa-themeco:before{content:"\f5c6"}.fa-python:before{content:"\f3e2"}.fa-android:before{content:"\f17b"}.fa-bots:before{content:"\e340"}.fa-free-code-camp:before{content:"\f2c5"}.fa-hornbill:before{content:"\f592"}.fa-js:before{content:"\f3b8"}.fa-ideal:before{content:"\e013"}.fa-git:before{content:"\f1d3"}.fa-dev:before{content:"\f6cc"}.fa-sketch:before{content:"\f7c6"}.fa-yandex-international:before{content:"\f414"}.fa-cc-amex:before{content:"\f1f3"}.fa-uber:before{content:"\f402"}.fa-github:before{content:"\f09b"}.fa-php:before{content:"\f457"}.fa-alipay:before{content:"\f642"}.fa-youtube:before{content:"\f167"}.fa-skyatlas:before{content:"\f216"}.fa-firefox-browser:before{content:"\e007"}.fa-replyd:before{content:"\f3e6"}.fa-suse:before{content:"\f7d6"}.fa-jenkins:before{content:"\f3b6"}.fa-twitter:before{content:"\f099"}.fa-rockrms:before{content:"\f3e9"}.fa-pinterest:before{content:"\f0d2"}.fa-buffer:before{content:"\f837"}.fa-npm:before{content:"\f3d4"}.fa-yammer:before{content:"\f840"}.fa-btc:before{content:"\f15a"}.fa-dribbble:before{content:"\f17d"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-internet-explorer:before{content:"\f26b"}.fa-stubber:before{content:"\e5c7"}.fa-telegram-plane:before,.fa-telegram:before{content:"\f2c6"}.fa-old-republic:before{content:"\f510"}.fa-odysee:before{content:"\e5c6"}.fa-square-whatsapp:before,.fa-whatsapp-square:before{content:"\f40c"}.fa-node-js:before{content:"\f3d3"}.fa-edge-legacy:before{content:"\e078"}.fa-slack-hash:before,.fa-slack:before{content:"\f198"}.fa-medrt:before{content:"\f3c8"}.fa-usb:before{content:"\f287"}.fa-tumblr:before{content:"\f173"}.fa-vaadin:before{content:"\f408"}.fa-quora:before{content:"\f2c4"}.fa-reacteurope:before{content:"\f75d"}.fa-medium-m:before,.fa-medium:before{content:"\f23a"}.fa-amilia:before{content:"\f36d"}.fa-mixcloud:before{content:"\f289"}.fa-flipboard:before{content:"\f44d"}.fa-viacoin:before{content:"\f237"}.fa-critical-role:before{content:"\f6c9"}.fa-sitrox:before{content:"\e44a"}.fa-discourse:before{content:"\f393"}.fa-joomla:before{content:"\f1aa"}.fa-mastodon:before{content:"\f4f6"}.fa-airbnb:before{content:"\f834"}.fa-wolf-pack-battalion:before{content:"\f514"}.fa-buy-n-large:before{content:"\f8a6"}.fa-gulp:before{content:"\f3ae"}.fa-creative-commons-sampling-plus:before{content:"\f4f1"}.fa-strava:before{content:"\f428"}.fa-ember:before{content:"\f423"}.fa-canadian-maple-leaf:before{content:"\f785"}.fa-teamspeak:before{content:"\f4f9"}.fa-pushed:before{content:"\f3e1"}.fa-wordpress-simple:before{content:"\f411"}.fa-nutritionix:before{content:"\f3d6"}.fa-wodu:before{content:"\e088"}.fa-google-pay:before{content:"\e079"}.fa-intercom:before{content:"\f7af"}.fa-zhihu:before{content:"\f63f"}.fa-korvue:before{content:"\f42f"}.fa-pix:before{content:"\e43a"}.fa-steam-symbol:before{content:"\f3f6"}:host,:root{--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}.fa-regular,.far{font-weight:400}:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}@font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:900;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:400;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-v4compatibility.woff2) format("woff2"),url(../webfonts/fa-v4compatibility.ttf) format("truetype");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a} /* Import Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap'); /* Note: To save fonts locally as requested, download the font files from Google Fonts and place them in the assets/fonts/ directory, then update the src paths below. For now, we use the CDN to ensure immediate availability of modern fonts. */ /* Fallback / Local Definitions if files exist */ @font-face { font-family: 'Poppins'; src: url('../fonts/') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* Mokoto Font for Headings/Logos if needed, keeping existing reference */ @font-face { font-family: 'Mokoto'; src: url('../fonts/') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } /* =================================================================== MOBILE-FIRST DESIGN SYSTEM FOR GEARUP PERCUSSION Standard CSS (no @apply - works with Tailwind CDN) =================================================================== */ /* ===== CSS VARIABLES ===== */ :root { --primary: #800000; --primary-dark: #5d1212; --primary-light: #a03030; --secondary: #1a0000; --accent: #ffd700; --muted: #64748b; --bg: #fefefe; --card: #ffffff; --border: #e2e8f0; --text: #222222; --text-muted: #64748b; --nav-height: 60px; --mobile-padding: 12px; --tablet-padding: 20px; --desktop-padding: 32px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; } /* ===== BASE MOBILE STYLES ===== */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 14px; } @media (min-width: 768px) { html { font-size: 15px; } } @media (min-width: 1024px) { html { font-size: 16px; } } body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background-color: var(--bg); color: var(--text); overflow-x: hidden; line-height: 1.5; margin: 0; padding: 0; } /* ===== MOBILE NAVIGATION TOGGLE ===== */ /* COMPLETELY HIDE these - use mobile-menu-btn from mobile-navigation.js instead */ .mobile-nav-toggle, button.mobile-nav-toggle, #mobile-nav-toggle, .mobile-cart-toggle { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; position: absolute !important; left: -9999px !important; } .mobile-nav-toggle:hover, .mobile-cart-toggle:hover { background: transparent !important; } .mobile-cart-toggle { position: absolute !important; left: -9999px !important; } .mobile-cart-toggle .cart-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; background: var(--accent); color: var(--primary); font-size: 10px; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; } @media (max-width: 768px) { .mobile-nav-toggle, .mobile-cart-toggle { display: flex !important; } } /* ===== MOBILE DRAWER ===== */ .mobile-nav-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 9998; opacity: 0; transition: opacity 0.3s ease; } .mobile-nav-overlay.active { display: block; opacity: 1; } .mobile-nav-drawer { display: none; position: fixed; top: 0; left: 0; bottom: 0; width: 280px; max-width: 85vw; background: #fff; z-index: 9999; transform: translateX(-100%); transition: transform 0.3s ease; overflow-y: auto; box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15); } .mobile-nav-drawer.active { transform: translateX(0); } @media (max-width: 768px) { .mobile-nav-drawer { display: block; } } .mobile-nav-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); } .mobile-nav-logo { height: 32px; width: auto; } .mobile-nav-close { background: transparent; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; padding: 8px; line-height: 1; } .mobile-nav-content { padding: 16px; } .mobile-nav-section { margin-bottom: 20px; } .mobile-nav-section h4 { font-size: 0.7rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid #f0e0e0; } .mobile-nav-section a { display: flex; align-items: center; gap: 12px; padding: 12px; color: #333; text-decoration: none; border-radius: var(--radius-md); font-size: 0.95rem; transition: all 0.2s ease; } .mobile-nav-section a:hover, .mobile-nav-section a:active { background: #f7eaea; color: var(--primary); } .mobile-nav-section a i { width: 20px; text-align: center; color: var(--primary); font-size: 1rem; } .mobile-nav-login { background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important; color: #fff !important; justify-content: center; margin-top: 8px; } .mobile-nav-login i { color: #fff !important; } .mobile-nav-admin { background: var(--accent) !important; color: var(--primary) !important; justify-content: center; font-weight: 600; } .mobile-nav-admin i { color: var(--primary) !important; } /* ===== HEADER MOBILE ===== */ @media (max-width: 768px) { .main-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 12px !important; gap: 10px !important; height: auto !important; min-height: 56px !important; position: sticky; top: 0; z-index: 1000; } .main-header .navbar-left, .main-header .navbar-right { display: none !important; } .main-header .logo { flex: 1; display: flex; justify-content: center; } .main-header .logo img, .main-header .logo-icon { height: 32px !important; width: auto !important; } } /* ===== PRODUCT GRID MOBILE ===== */ @media (max-width: 768px) { .products-grid, .products-grid-modern, .product-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; padding: 0 4px; } } @media (max-width: 360px) { .products-grid, .products-grid-modern, .product-grid { grid-template-columns: 1fr !important; gap: 12px !important; } } /* ===== PRODUCT CARD MOBILE ===== */ @media (max-width: 768px) { .product-card, .product-card-modern { border-radius: var(--radius-md) !important; overflow: hidden; } .product-image, .card-image-modern { height: 140px !important; min-height: 140px !important; } .product-content, .card-body-modern { padding: 10px !important; } .product-title, .card-title-modern { font-size: 0.85rem !important; line-height: 1.25 !important; margin-bottom: 4px !important; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-description, .card-desc-modern { display: none !important; } .product-category, .card-category-modern { font-size: 9px !important; margin-bottom: 4px !important; } .product-rating, .card-rating-modern { font-size: 9px !important; margin-bottom: 6px !important; } .product-rating i, .card-rating-modern i { font-size: 9px !important; } .product-footer, .card-footer-modern { flex-direction: column !important; gap: 8px !important; } .price, .card-price-modern { font-size: 1rem !important; text-align: center !important; } .btn-add-cart, .card-btn-modern { width: 100% !important; padding: 10px 12px !important; font-size: 11px !important; justify-content: center !important; border-radius: var(--radius-md) !important; min-height: 40px; } .product-badge, .card-badge-modern { font-size: 9px !important; padding: 3px 6px !important; top: 6px !important; right: 6px !important; } .product-overlay, .card-overlay-modern { display: none !important; } } /* ===== CART SIDEBAR MOBILE ===== */ @media (max-width: 768px) { .cart-sidebar { width: 100% !important; max-width: 100% !important; right: 0 !important; z-index: 999 !important; /* Below header (1000) to prevent overlap */ top: 60px !important; /* Start below header */ height: calc(100% - 60px) !important; height: calc(100dvh - 60px) !important; } .cart-sidebar-header { padding: 14px 16px !important; } .cart-sidebar-header h3 { font-size: 1rem !important; } .cart-sidebar-content { padding: 12px !important; } .cart-sidebar-item { gap: 10px !important; padding: 10px !important; } .cart-sidebar-item-image { width: 60px !important; height: 60px !important; flex-shrink: 0; } .cart-sidebar-item-info h4 { font-size: 0.85rem !important; line-height: 1.3 !important; } .cart-sidebar-item-info p { font-size: 0.8rem !important; } .cart-sidebar-footer { padding: 14px 16px !important; padding-bottom: max(14px, env(safe-area-inset-bottom)) !important; } .checkout-btn-sidebar { padding: 14px 20px !important; font-size: 0.95rem !important; min-height: 48px !important; } } /* ===== HERO MOBILE ===== */ @media (max-width: 768px) { .modern-hero, .shop-hero { min-height: 60vh !important; padding: 60px 16px 40px !important; } .hero-container, .shop-hero-content { padding: 0 !important; } .hero-title { font-size: 2rem !important; line-height: 1.1 !important; margin-bottom: 16px !important; } .hero-subtitle { font-size: 0.95rem !important; margin-bottom: 24px !important; padding: 0 8px !important; } .hero-badge { font-size: 0.7rem !important; padding: 5px 12px !important; margin-bottom: 16px !important; } .hero-buttons { flex-direction: column !important; gap: 10px !important; padding: 0 20px !important; } .hero-btn { width: 100% !important; padding: 14px 24px !important; font-size: 13px !important; text-align: center !important; } .hero-logo-img { max-width: 250px !important; } .stats-container { gap: 24px !important; margin-top: 20px !important; } .stat-number { font-size: 1.4rem !important; } .stat-label { font-size: 0.7rem !important; } } /* ===== FORM INPUTS MOBILE ===== */ @media (max-width: 768px) { input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], textarea, select { font-size: 16px !important; padding: 12px 14px !important; border-radius: var(--radius-md) !important; min-height: 44px; } button, .btn, input[type="submit"], input[type="button"] { min-height: 44px !important; padding: 12px 16px !important; font-size: 0.95rem !important; } } /* ===== MODAL MOBILE ===== */ @media (max-width: 768px) { .modal { padding: 0 !important; align-items: flex-end !important; } .modal-content { width: 100% !important; max-width: 100% !important; max-height: 90vh !important; border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important; margin: 0 !important; } .quick-view-modal .quick-view-content { flex-direction: column !important; max-width: 100% !important; max-height: 95vh !important; border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important; } .quick-view-gallery { width: 100% !important; height: 250px !important; } .quick-view-details { width: 100% !important; padding: 20px !important; } .qv-title { font-size: 1.2rem !important; } .qv-price { font-size: 1.3rem !important; } .qv-actions { flex-wrap: wrap !important; gap: 10px !important; } .qv-actions .add-to-cart-btn { flex: 1 !important; min-width: 150px !important; } } /* ===== FOOTER MOBILE ===== */ @media (max-width: 768px) { .main-footer { padding: 30px 16px 20px !important; } .footer-content { flex-direction: column !important; gap: 24px !important; text-align: center !important; } .footer-column { width: 100% !important; text-align: center !important; } .footer-column h3 { font-size: 1rem !important; margin-bottom: 12px !important; } .footer-column h3::after { margin: 6px auto 0 !important; } .footer-logo { justify-content: center !important; } .footer-logo img { height: 36px !important; } .social-links { justify-content: center !important; gap: 12px !important; } .copyright { padding-top: 16px !important; margin-top: 16px !important; font-size: 0.8rem !important; } } /* ===== SECTIONS MOBILE ===== */ @media (max-width: 768px) { .section-header { margin-bottom: 24px !important; padding: 0 8px !important; } .section-title { font-size: 1.5rem !important; } .section-subtitle { font-size: 0.9rem !important; } .category-icons-section { padding: 30px 0 !important; overflow: hidden !important; } .category-icons-grid { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 16px !important; padding: 8px 16px !important; justify-content: flex-start !important; } .category-icons-grid::-webkit-scrollbar { display: none; } .category-icon-item { flex: 0 0 auto !important; scroll-snap-align: start; min-width: 70px !important; } .category-icon-circle { width: 60px !important; height: 60px !important; margin-bottom: 6px !important; } .category-icon-label { font-size: 10px !important; white-space: nowrap !important; } .features-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .feature-card { padding: 20px !important; } .feature-icon { width: 50px !important; height: 50px !important; font-size: 1.2rem !important; margin-bottom: 12px !important; } .feature-card h3 { font-size: 1rem !important; } .feature-card p { font-size: 0.85rem !important; } .categories-grid { grid-template-columns: 1fr !important; gap: 12px !important; } .category-card { height: 160px !important; } .category-card.large { height: 200px !important; } .testimonials-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .testimonial-card { padding: 20px !important; } .newsletter-content { flex-direction: column !important; text-align: center !important; gap: 20px !important; } .newsletter-form .input-group { flex-direction: column !important; gap: 10px !important; } .newsletter-form input[type="email"] { width: 100% !important; } .newsletter-form button { width: 100% !important; } .store-carousel-wrapper { padding: 0 12px !important; } .store-carousel { gap: 12px !important; scroll-snap-type: x mandatory; } .store-card { min-width: 220px !important; max-width: 220px !important; scroll-snap-align: start; } .carousel-nav { display: none !important; } } /* ===== TOUCH DEVICE ENHANCEMENTS ===== */ @media (hover: none) and (pointer: coarse) { a, button, .btn, input[type="submit"] { min-height: 44px; } .product-card:hover, .feature-card:hover, .store-card:hover { transform: none !important; } .btn:active, button:active, .product-card:active, .store-card:active { transform: scale(0.98) !important; opacity: 0.9 !important; } .category-icons-grid, .store-carousel { -webkit-overflow-scrolling: touch; scrollbar-width: none; } } /* ===== SAFE AREA SUPPORT ===== */ @supports (padding: env(safe-area-inset-bottom)) { .main-footer { padding-bottom: max(20px, env(safe-area-inset-bottom)) !important; } .cart-sidebar-footer { padding-bottom: max(16px, env(safe-area-inset-bottom)) !important; } .mobile-nav-drawer { padding-bottom: env(safe-area-inset-bottom); } } /* ===== LANDSCAPE MOBILE ===== */ @media (max-width: 812px) and (orientation: landscape) { .modern-hero, .shop-hero { min-height: auto !important; padding: 40px 20px !important; } .hero-title { font-size: 1.8rem !important; } .hero-buttons { flex-direction: row !important; flex-wrap: wrap !important; } .hero-btn { width: auto !important; } .quick-view-modal .quick-view-content { flex-direction: row !important; } .quick-view-gallery { width: 40% !important; height: auto !important; } .quick-view-details { width: 60% !important; } } /* ===== VERY SMALL SCREENS ===== */ @media (max-width: 360px) { .hero-title { font-size: 1.6rem !important; } .hero-subtitle { font-size: 0.85rem !important; } .hero-btn { padding: 12px 20px !important; font-size: 12px !important; } .category-icon-circle { width: 50px !important; height: 50px !important; } .category-icon-label { font-size: 9px !important; } .store-card { min-width: 180px !important; max-width: 180px !important; } .section-title { font-size: 1.3rem !important; } .product-image, .card-image-modern { height: 160px !important; } .product-title, .card-title-modern { font-size: 0.9rem !important; } } /* ===== UTILITY CLASSES ===== */ .text-primary { color: var(--primary); } .bg-primary { background-color: var(--primary); } .border-primary { border-color: var(--primary); } .hide-mobile { display: block; } .show-mobile { display: none; } @media (max-width: 768px) { .hide-mobile { display: none !important; } .show-mobile { display: block !important; } } .touch-target { min-height: 44px; min-width: 44px; } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ===== GLOBAL STYLES - Used across all pages ===== */ /* Font Faces */ /* Modern UI fonts (fallback to local fonts when available) */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&family=Mokoto:wght@400;700&display=swap'); :root { --ui-font: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; --brand-font: 'Mokoto', serif; --primary: #800000; --primary-dark: #5d1212; --nav-height: 68px; --nav-gap: 18px; --nav-radius: 10px; } /* Global layout helpers to keep page content consistent across all pages. These rules provide a single source of truth for max-width, side padding and top offset under the header so elements don't shift between pages. */ :root { --site-max-width: 1200px; --site-side-pad: 20px; } /* Make header height a hard value so pages render consistently */ .main-header { height: var(--nav-height); min-height: var(--nav-height); } /* Global site container: used by `.container`, `.shop-main`, `.main` etc. */ .site-container, .container, .shop-main, .checkout-main, .main, .hero-container, .shop-hero-content { max-width: var(--site-max-width) !important; padding-left: var(--site-side-pad) !important; padding-right: var(--site-side-pad) !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* Ensure every main section starts below the header consistently. Some pages had varying paddings which caused vertical reflow. This applies a consistent top offset for page content (adjustable via --nav-height). */ main, section, .shop-main, .checkout-main, .container, .modern-hero, .featured-section { padding-top: calc(var(--nav-height) + 12px) !important; } /* Prevent large hero text from pushing layout unexpectedly on pages that include the hero. The hero still centers its content but won't change header flow. */ /* Reduce top padding for shop-hero to minimize space */ .modern-hero, .shop-hero { padding-top: var(--nav-height); } /* Anchor scrolling safety so named anchors don't jump under the header */ html { scroll-padding-top: calc(var(--nav-height) + 8px); } /* Consistent logo sizing so header height remains predictable */ .logo-icon { height: 48px; width: auto; } /* Make sure navbar items don't mentally push layout by using consistent padding */ .main-header .navbar a { padding: 8px 12px !important; } /* Base Reset & Global Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 15px; } body { font-family: var(--ui-font); background: #fefefe; color: #222; overflow-x: hidden; position: relative; font-size: 1rem; /* 1rem == 15px for slightly smaller, natural scale */ } /* ===== WORDPRESS FIXES ===== */ .notice, .update-nag, .admin-notice, .notice-success, .notice-info, .notice-warning, .wp-header-end, .updated, .error, .is-dismissible, .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notices-wrapper { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; } /* Ensure header stays at top */ header, .main-header, .site-header, #masthead { position: relative !important; top: 0 !important; margin-top: 0 !important; padding-top: 0 !important; } /* Remove any forced margins/padding */ body { padding-top: 0 !important; margin-top: 0 !important; } .admin-bar .main-header { top: 0 !important; } /* Center logo */ .main-header .logo { position: absolute; left: 50%; transform: translateX(-50%); z-index: 10; transition: opacity 0.2s ease; text-decoration: none; color: inherit; } .main-header .logo:hover { opacity: 0.8; } /* Right side elements */ .main-header .nav-right-section { display: flex; align-items: center; gap: 20px; margin-left: auto; } /* Remove old navbar styles */ .navbar, .navbar-left, .navbar-right { list-style: none; margin: 0; padding: 0; } .main-header .navbar { min-width: 0; } /* ===== SOFT ANIMATED BACKGROUND ===== */ .soft-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at top left, #ffffff, #f3f3f3 60%, #f9f9f9); background-size: 200% 200%; animation: subtleMove 18s ease-in-out infinite; z-index: -1; } @keyframes subtleMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ===== HEADER & NAVIGATION ===== */ .main-header { background: linear-gradient(135deg, #3d0000 0%, #1a0000 100%); color: white; display: flex; align-items: center; justify-content: center; padding: 20px 30px; height: 80px; position: sticky; top: 0; z-index: 11010; box-shadow: none; border-bottom: none; transition: background-color 0.22s ease, box-shadow 0.22s ease; overflow: visible !important; gap: 30px; width: 100%; box-sizing: border-box; } /* Left navigation */ .navbar-left { display: flex; gap: var(--nav-gap, 18px); align-items: center; justify-content: flex-start; margin: 0; padding: 0; flex: 1 1 0; min-width: 0; flex-wrap: nowrap; } /* Center logo */ .main-header .logo { flex: 0 0 auto; margin: 0 20px; z-index: 10; transition: opacity 0.2s ease; text-decoration: none; color: inherit; flex-shrink: 0; } .main-header .logo .logo-icon { height: 50px; width: auto; display: block; } .main-header .logo:hover { opacity: 0.8; } /* Right navigation */ .navbar-right { display: flex; gap: var(--nav-gap, 18px); align-items: center; justify-content: flex-end; margin: 0; padding: 0; flex: 1 1 0; min-width: 0; flex-wrap: nowrap; } /* Responsive header adjustments */ @media (min-width: 1400px) { .main-header { gap: 40px; } } @media (max-width: 1200px) { .main-header { gap: 20px; padding: 20px 30px; } .navbar-left { gap: 15px; } .navbar-right { gap: 20px; } } @media (max-width: 1024px) { .main-header { gap: 15px; padding: 15px 20px; } .navbar-left { gap: 12px; } .navbar-right { gap: 15px; } .navbar a { font-size: 0.95rem; } } /* Menu Toggle Button in Header */ .menu-toggle-btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); color: white; font-size: 1.4rem; cursor: pointer; padding: 10px; border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.18s ease; margin: 0; align-self: center; line-height: 1; position: relative; width: 46px; height: 46px; z-index: 11025; } .menu-toggle-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,0.12); } /* Hamburger to X Animation - Proper Transform */ .menu-toggle-btn i { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease; display: inline-block; } /* When sidebar is active, transform hamburger into X */ body.sidebar-active .menu-toggle-btn i { transform: rotate(180deg) scale(0.9); } .menu-toggle-btn.active i { transform: rotate(180deg) scale(0.9); } /* Alternative: Replace icon content with X */ .menu-toggle-btn.active i.fa-bars::before { content: "\f00d"; /* Font Awesome times/X icon */ } .logo { display: flex; align-items: center; gap: 12px; margin: 0; margin-left: 0 !important; align-self: center; } .logo-icon { height: 55px; width: auto; display: block; } .logo-text-img { height: 42px; width: auto; display: block; } .logo-text { font-family: var(--brand-font); font-weight: 700; letter-spacing: 1px; color: #fff; -webkit-font-smoothing:antialiased; } .navbar a { color: rgba(255, 255, 255, 0.95); text-decoration: none; font-weight: 400; transition: opacity 0.2s ease; padding: 8px 0; border-radius: 0; font-size: 1.05rem; display: inline-flex; align-items: center; line-height: 1; position: relative; } .navbar a:hover { opacity: 0.7; } .navbar a.active { opacity: 1; font-weight: 500; } /* Sign In/Register CTA Button */ .navbar a.nav-cta { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff !important; padding: 12px 24px; border-radius: 8px; font-weight: 600; } .navbar a.nav-cta:hover { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.5); } /* Sale link highlight */ .navbar a[style*="ffd700"] { color: #ffd700 !important; font-weight: 600; } .main-header.scrolled { padding: 15px 50px; background: rgba(0, 0, 0, 0.85); box-shadow: 0 2px 10px rgba(0,0,0,0.3); } /* ===== GLOBAL BUTTON STYLES ===== */ .btn-shop { background: linear-gradient(to right, #c74a4a, #5d1212); color: #fff; padding: 12px 25px; border-radius: 30px; font-weight: bold; text-decoration: none; transition: 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.2); display: inline-block; border: none; cursor: pointer; } .btn-shop:hover { background: #fff; color: #5d1212; transform: scale(1.05); box-shadow: 0 8px 20px rgba(93, 18, 18, 0.4); } /* Checkout Button */ .checkout-btn { background: #fff; color: #5d1212; padding: 12px 24px; border-radius: 25px; font-weight: bold; text-decoration: none; transition: 0.3s; box-shadow: 0 2px 8px rgba(0,0,0,0.2); display: inline-flex; align-items: center; border: none; cursor: pointer; font-size: 1.1rem; margin: 0; align-self: center; } .checkout-btn.header-cart { background: #fff; color: #5d1212; padding: 12px 24px; margin-left: 15px; } .checkout-btn:hover { background: #eee; color: #a62b2b; transform: scale(1.05); box-shadow: 0 4px 10px rgba(0,0,0,0.3); } /* ===== ADD TO CART BUTTON (Global) ===== */ .btn-add-cart { background: linear-gradient(135deg, #5d1212 0%, #a62b2b 100%); color: white; border: none; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 140px; height: 42px; position: relative; overflow: hidden; box-shadow: 0 2px 8px rgba(166, 43, 43, 0.3); } .btn-add-cart:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(166, 43, 43, 0.4); background: linear-gradient(135deg, #a62b2b 0%, #5d1212 100%); } .btn-add-cart:active { transform: translateY(0); } .btn-add-cart i { font-size: 12px; transition: transform 0.3s ease; } .btn-add-cart:hover i { transform: scale(1.1); } /* Loading state for cart buttons */ .btn-add-cart.loading { pointer-events: none; opacity: 0.7; } .btn-add-cart.loading i { animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ===== CART SIDEBAR STYLES (Updated from Shop) ===== */ .cart-toggle-btn { position: fixed; top: 96px; right: 22px; background: linear-gradient(135deg, #800000, #a00000); color: white; border: 2px solid #ffd700; /* Yellow border added */ border-radius: 50%; width: 57px; /* Matched with shop page */ height: 57px; /* Matched with shop page */ cursor: pointer; z-index: 13050; /* Increased to ensure it's clickable above all other elements */ box-shadow: 0 8px 30px rgba(128, 0, 0, 0.4); transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; /* Matched with shop page */ } .cart-toggle-btn:hover { transform: scale(1.08); box-shadow: 0 12px 40px rgba(128, 0, 0, 0.5); } .cart-badge { position: absolute; top: -4px; right: -4px; background: #ffd700; color: #800000; border-radius: 50%; width: 20px; height: 20px; font-size: 0.75rem; font-weight: bold; display: flex; align-items: center; justify-content: center; border: 3px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } /* ===== TOAST NOTIFICATION STYLES ===== */ .toast-notification { position: fixed; bottom: 20px; left: 20px; background: #4CAF50; color: white; padding: 16px 24px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); z-index: 10001; display: flex; align-items: center; gap: 12px; font-family: var(--ui-font); font-size: 0.95rem; font-weight: 500; transform: translateX(-400px); opacity: 0; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); max-width: 400px; min-width: 280px; } .toast-notification.show { transform: translateX(0); opacity: 1; } .toast-notification.error { background: #f44336; } .toast-notification.success { background: linear-gradient(135deg, #4CAF50, #45a049); } .toast-notification .toast-icon { font-size: 1.3rem; flex-shrink: 0; } .toast-notification i.toast-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } /* Custom toast for shop.js fallback */ .custom-toast { position: fixed; bottom: 20px; left: 20px; background: #4CAF50; color: white; padding: 16px 24px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); z-index: 10001; transform: translateX(-400px); opacity: 0; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); max-width: 400px; font-family: var(--ui-font); } .custom-toast.error { background: linear-gradient(135deg, #f44336, #da190b); } .custom-toast.success { background: linear-gradient(135deg, #4CAF50, #45a049); } .custom-toast .toast-content { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; font-weight: 500; } .custom-toast .toast-content i { font-size: 1.3rem; } @keyframes slideInFromLeft { from { transform: translateX(-400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOutToLeft { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-400px); opacity: 0; } } /* Cart badge pulse animation for visual feedback */ @keyframes badgePulse { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } .cart-badge.pulse { animation: badgePulse 0.4s ease; } .cart-sidebar { position: fixed !important; top: 0 !important; bottom: 0 !important; right: 0 !important; left: auto !important; height: 100% !important; /* Fallback */ height: 100dvh !important; min-height: 100% !important; max-height: 100% !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; --cart-header-h: 72px; --cart-footer-h: 120px; width: 520px !important; /* Fixed width to match recommendations offset */ max-width: 100vw !important; background: #fff5f5 !important; /* Light Maroon Theme */ box-shadow: none !important; /* Remove shadow for seamless join */ border-left: 1px solid rgba(128,0,0,0.05) !important; /* Subtle divider line */ z-index: 12000 !important; transform: translate3d(100%, 0, 0) !important; opacity: 0 !important; visibility: hidden !important; will-change: transform, opacity !important; transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.32, 1), opacity 0.25s ease, visibility 0s 0.3s !important; display: grid !important; grid-template-rows: auto 1fr auto !important; overflow: hidden !important; -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; -webkit-perspective: 1000 !important; perspective: 1000 !important; } /* Mobile Responsive for Cart Sidebar */ @media (max-width: 580px) { .cart-sidebar { width: 100% !important; max-width: 100% !important; } } /* Fallback for browsers without dvh support */ @supports not (height: 100dvh) { .cart-sidebar { height: 100vh !important; min-height: 100vh !important; max-height: 100vh !important; } } .cart-sidebar.active { transform: translate3d(0, 0, 0) !important; opacity: 1 !important; visibility: visible !important; transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.32, 1), opacity 0.25s ease !important; } .cart-sidebar-header { padding: 22px 24px; background: #fff5f5; /* Light Maroon Theme */ color: #800000; /* Maroon Text */ display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 12px rgba(0,0,0,0.05); grid-row: 1; min-height: 72px; z-index: 1; border-bottom: 1px solid rgba(128,0,0,0.1); } .cart-sidebar-header h3 { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; } .close-sidebar { background: rgba(128,0,0,0.1); border: none; color: #800000; font-size: 1.2rem; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .close-sidebar:hover { background: #800000; color: #fff; transform: rotate(90deg); } .cart-sidebar-content { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 20px 22px !important; background: #fff5f5; /* Light Maroon Theme */ -webkit-overflow-scrolling: touch; } .empty-cart-message { text-align: center; padding: 40px 20px; color: #888; } .empty-cart-message i { font-size: 4rem; color: #ddd; margin-bottom: 20px; } .empty-cart-message h3 { color: #333; margin-bottom: 10px; } .cart-sidebar-item { display: grid; grid-template-columns: 100px 1fr auto; gap: 18px; align-items: center; padding: 20px; background: #fff; border-radius: 16px; margin-bottom: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; } .cart-sidebar-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); } .cart-sidebar-item-image { width: 100px; height: 100px; border-radius: 12px; overflow: hidden; background: #f9f9f9; border: 1px solid #eee; } .cart-sidebar-item-image img { width: 100%; height: 100%; object-fit: cover; } .cart-sidebar-item-info { display: flex; flex-direction: column; justify-content: center; } .cart-sidebar-item-info h4 { margin: 0 0 8px 0; font-size: 1.1rem; font-weight: 700; color: #222; line-height: 1.3; } .cart-sidebar-item-info p { margin: 2px 0; font-size: 0.95rem; color: #666; } .cart-sidebar-item-info .item-subtotal { font-weight: 700; color: #800000; margin-top: 6px; font-size: 1rem; } .cart-sidebar-item-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .quantity-selector-cart { display: flex; align-items: center; border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; background: #fff; margin-left: 0; } .quantity-btn-cart { width: 28px; height: 28px; border: none; background: #f8f8f8; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: #555; transition: background 0.2s; padding: 0; } .quantity-btn-cart:hover { background: #eee; } .cart-sidebar-item-quantity { width: 32px; text-align: center; border: none; border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; font-size: 0.9rem; font-weight: 600; color: #333; padding: 0; height: 28px; -moz-appearance: textfield; background: transparent; } .remove-sidebar-item { background: none; border: none; color: #aaa; cursor: pointer; font-size: 1rem; padding: 5px; transition: color 0.2s; } .remove-sidebar-item:hover { color: #dc3545; transform: scale(1.1); } .cart-sidebar-total { display: flex; justify-content: space-between; align-items: center; padding: 18px 0 6px; margin-top: 6px; border-top: 1px dashed #f0f0f0; font-size: 1.15rem; font-weight: 700; color: #333; } .cart-sidebar-total span:last-child { color: #800000; font-size: 1.4rem; } .cart-sidebar-footer { grid-row: 3; padding: 20px 22px 22px; background: #fff5f5; /* Light Maroon Theme */ border-top: 1px solid rgba(128,0,0,0.1); box-shadow: 0 -8px 30px rgba(0,0,0,0.06); min-height: 100px; z-index: 1; } .checkout-btn-sidebar { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 18px; background: #800000; color: #fff; text-decoration: none; border-radius: 14px; font-weight: 800; font-size: 1.15rem; transition: all 0.2s ease; box-shadow: 0 10px 25px rgba(128, 0, 0, 0.2); text-transform: uppercase; letter-spacing: 0.5px; } .checkout-btn-sidebar:hover { background: #600000; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(128, 0, 0, 0.3); } .shop-now-btn-sidebar { width: 100%; padding: 15px; background: #333; color: #fff; border: none; border-radius: 8px; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.3s; } .shop-now-btn-sidebar:hover { background: #000; } .sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 11990; /* Just below cart sidebar (12000) */ display: none; } .sidebar-overlay.active { display: block; } /* Messages Container */ #message-container { position: fixed; top: 12px; right: 12px; z-index: 10000; } /* Responsive adjustments for cart */ @media (max-width: 700px) { :root { --mobile-header-h: 56px; } .cart-sidebar { width: 100% !important; max-width: 100% !important; border-radius: 0 !important; top: var(--mobile-header-h) !important; bottom: 0 !important; height: calc(100vh - var(--mobile-header-h)) !important; height: calc(100dvh - var(--mobile-header-h)) !important; min-height: calc(100vh - var(--mobile-header-h)) !important; max-height: calc(100vh - var(--mobile-header-h)) !important; } .cart-sidebar.active { transform: translate3d(0, 0, 0) !important; } .sidebar-overlay { top: var(--mobile-header-h) !important; height: calc(100vh - var(--mobile-header-h)) !important; height: calc(100dvh - var(--mobile-header-h)) !important; } } .message { padding: 10px 16px; margin-bottom: 8px; border-radius: 8px; font-weight: 600; font-size: 0.82rem; box-shadow: 0 5px 18px rgba(0,0,0,0.15); animation: slideInRight 0.4s ease; } .message.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .message.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* --- FIXED NOTIFICATION STYLES (Bottom Left) --- */ .modal-confirmation-window { position: fixed; bottom: 80px; left: 22px; z-index: 20001; /* Higher than global modal (20000) and sidebar (12000) */ max-width: 320px; background: white; padding: 14px 18px; border-radius: 11px; box-shadow: 0 8px 35px rgba(0, 0, 0, 0.25); border-left: 5px solid #800000; transition: all 0.4s ease-out; opacity: 0; transform: translateX(-100%); } .modal-confirmation-window.show { left: 22px; opacity: 1; transform: translateX(0); } .confirmation-content { display: flex; align-items: center; gap: 12px; } #modal-icon { font-size: 1.6rem; color: #800000; } #modal-message { margin: 0; font-size: 0.9rem; color: #333; font-weight: 600; } .modal-confirmation-window.success { border-left-color: #28a745; } .modal-confirmation-window.success #modal-icon { color: #28a745; } .modal-confirmation-window.error { border-left-color: #dc3545; } .modal-confirmation-window.error #modal-icon { color: #dc3545; } /* --- CUSTOM REMOVAL MODAL DIALOG STYLES --- */ .custom-modal-dialog { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; z-index: 20002; /* Higher than toast (20001) */ } .custom-modal-dialog.active { opacity: 1; visibility: visible; } .custom-modal-dialog .modal-content { background: white; padding: 24px; border-radius: 14px; width: 90%; max-width: 420px; box-shadow: 0 18px 54px rgba(0, 0, 0, 0.5); text-align: center; position: relative; transform: translateY(-30px); transition: transform 0.4s ease-out, opacity 0.4s ease-out; border: 1px solid #ddd; opacity: 0; } .custom-modal-dialog.active .modal-content { transform: translateY(0); opacity: 1; } .custom-modal-dialog .modal-body { padding: 12px 0 20px 0; } .custom-modal-dialog .modal-icon-warning { font-family: "Font Awesome 6 Free", sans-serif !important; font-weight: 900 !important; font-size: 3rem; color: #ffc107; margin-bottom: 14px; } .custom-modal-dialog #removal-modal-title { font-size: 1.25rem; font-weight: bold; color: #333; margin: 6px 0 10px 0; } .custom-modal-dialog #removal-modal-message { color: #666; font-size: 0.9rem; line-height: 1.5; } .custom-modal-dialog .modal-actions { display: flex; justify-content: space-around; gap: 12px; margin-top: 18px; } .custom-modal-dialog .modal-actions button { padding: 10px 18px; border: none; border-radius: 9px; cursor: pointer; font-weight: 700; font-size: 0.9rem; flex-grow: 1; transition: all 0.3s ease; } .custom-modal-dialog .btn-secondary { background: #f8f9fa; color: #555; border: 2px solid #e9ecef; } .custom-modal-dialog .btn-secondary:hover { background: #e9ecef; transform: translateY(-2px); } .custom-modal-dialog .btn-danger { background: linear-gradient(135deg, #a00000, #800000); color: white; box-shadow: 0 6px 20px rgba(128, 0, 0, 0.3); } .custom-modal-dialog .btn-danger:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(128, 0, 0, 0.4); } .custom-modal-dialog .close-modal-btn { position: absolute; top: 8px; right: 14px; font-size: 1.5rem; cursor: pointer; color: #aaa; line-height: 1; transition: color 0.2s; } .custom-modal-dialog .close-modal-btn:hover { color: #800000; } /* ===== BASE PRODUCT CARD STYLES (Shared) ===== */ .product-card { background: rgba(255,255,255,0.9); border-radius: 8px; padding: 20px; text-align: center; border: 1px solid rgba(166, 43, 43, 0.4); box-shadow: 0 4px 10px rgba(0,0,0,0.05); transition: 0.3s; overflow: hidden; display: flex; flex-direction: column; } .product-card:hover { transform: translateY(-8px); box-shadow: 0 8px 25px rgba(166,43,43,0.2); } .product-card img { width: 100%; height: 180px; object-fit: cover; border-radius: 10px; margin-bottom: 15px; transition: transform 0.5s ease; } .product-card:hover img { transform: scale(1.05); } .product-card h3 { font-family: 'Mokoto', sans-serif; font-size: 1.3rem; color: #5d1212; } .product-card p { font-size: 0.95rem; color: #666; margin-bottom: 15px; flex-grow: 1; } .product-card .price { font-size: 1.2rem; font-weight: bold; color: #a62b2b; margin-bottom: 15px; } /* Product Badges */ .product-badge { position: absolute; top: 15px; left: 15px; background: #a62b2b; color: white; padding: 5px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; z-index: 2; } .product-content { padding: 15px 0 0; } .product-category { color: #666; font-size: 0.9rem; margin-bottom: 5px; display: block; } /* Quantity Input Container */ .quantity-input-container { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; } .quantity-input-container label { font-weight: 500; color: #444; margin-right: 5px; } .quantity-input-container input[type="number"] { width: 60px; padding: 5px; text-align: center; border: 1px solid #ccc; border-radius: 4px; margin-right: 10px; -moz-appearance: textfield; } .quantity-input-container input[type="number"]::-webkit-outer-spin-button, .quantity-input-container input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ===== SHOP PAGE SPECIFIC STYLES ===== */ .shop-main { margin-top: 20px; padding: 40px 50px; max-width: 1400px; margin-left: auto; margin-right: auto; } .shop-title { font-family: 'Mokoto', sans-serif; font-size: 2.5rem; color: #a62b2b; text-align: center; margin-bottom: 30px; padding-bottom: 10px; border-bottom: 2px solid rgba(166, 43, 43, 0.1); } .shop-content { display: flex; gap: 30px; } /* Sidebar Filters */ .sidebar-filters { width: 250px; flex-shrink: 0; background: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border: 1px solid rgba(166, 43, 43, 0.1); position: sticky; top: 90px; height: fit-content; } .filter-group { margin-bottom: 25px; } .filter-group h3 { font-family: 'Poppins', sans-serif; font-size: 1.1rem; color: #5d1212; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #eee; padding-bottom: 5px; } .filter-group ul { list-style: none; } .filter-group ul li a { text-decoration: none; color: #444; display: block; padding: 5px 0; transition: color 0.2s; } .filter-group ul li a:hover { color: #a62b2b; font-weight: 500; } .reset-filters-btn { width: 100%; padding: 10px; background: #444; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background 0.2s; } .reset-filters-btn:hover { background: #222; } /* Product Grid */ .product-grid { flex-grow: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; } /* ===== FOOTER STYLES ===== */ .main-footer { background: linear-gradient(135deg, #3d0000 0%, #1a0000 100%); color: white; text-align: center; padding: 50px 0; position: relative; overflow: hidden; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; max-width: 1200px; margin: 0 auto 40px; text-align: left; } .footer-column h3 { margin-bottom: 20px; font-size: 1.2rem; position: relative; padding-bottom: 10px; } .footer-column h3::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background: white; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 10px; } .footer-links a { color: rgba(255,255,255,0.8); text-decoration: none; transition: color 0.3s; } .footer-links a:hover { color: white; padding-left: 5px; } .social-links { display: flex; gap: 15px; margin-top: 20px; } .social-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255,255,255,0.1); border-radius: 50%; color: white; transition: all 0.3s; } .social-links a:hover { background: white; color: #a62b2b; transform: translateY(-3px); } .copyright { text-align: center; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); font-size: 0.9rem; } /* Footer Logo */ .footer-logo { display: flex; align-items: center; gap: 10px; font-size: 1.5rem; margin-bottom: 20px; font-family: 'Mokoto', sans-serif; } .social-link { display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; background: rgba(255,255,255,0.1); border-radius: 50%; color: white; text-decoration: none; transition: all 0.3s ease; margin-right: 10px; } .social-link:hover { background: white; color: #a62b2b; transform: translateY(-3px); } /* ===== MODAL STYLES (Shared) ===== */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; opacity: 0; visibility: hidden; background: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center; /* Removed backdrop-filter for 240Hz performance */ z-index: 20000; /* Higher than cart sidebar (12000) */ transition: opacity 0.3s ease, visibility 0s 0.3s; } .modal.show { opacity: 1; visibility: visible; transition: opacity 0.3s ease; } .modal-content { background: #ffffff; border: 1px solid rgba(166, 43, 43, 0.1); border-radius: 12px; padding: 40px; width: 90%; max-width: 550px; text-align: center; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 0 5px rgba(166, 43, 43, 0.05); transform: translate3d(0, 20px, 0) scale(0.95); opacity: 0; transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.32, 1), opacity 0.25s ease; position: relative; will-change: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; } .modal.show .modal-content { transform: translate3d(0, 0, 0) scale(1); opacity: 1; } .modal-content h2 { font-family: 'Mokoto', sans-serif; color: #a62b2b; font-size: 1.8rem; margin-bottom: 20px; border-bottom: 2px solid #f0f0f0; padding-bottom: 10px; } .modal-content p { font-size: 1rem; line-height: margin-bottom: 15px; color: #444; } .close-btn { position: absolute; top: 10px; right: 15px; font-size: 2rem; cursor: pointer; color: #5d1212; background: none; border: none; transition: color 0.3s, transform 0.3s; padding: 5px; line-height: 1; font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands', sans-serif !important; } .close-btn:hover { color: #c74a4a; transform: rotate(90deg); } /* --- MODERN ABOUT MODAL STYLES --- */ .about-modal-content { padding: 0 !important; /* Override default padding */ overflow: hidden; max-width: 600px; border: none; background: #fff; text-align: left; } .about-header { background: linear-gradient(135deg, #800000 0%, #5d1212 100%); padding: 35px 30px; text-align: center; color: white; position: relative; } .about-logo { height: 55px; width: auto; margin-bottom: 15px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); } .about-header h2 { font-family: 'Mokoto', sans-serif; font-size: 1.6rem; margin: 0; letter-spacing: 1px; color: white !important; /* Override default modal h2 color */ border-bottom: none !important; /* Override default modal h2 border */ padding-bottom: 0 !important; } .about-divider { width: 50px; height: 3px; background: rgba(255,255,255,0.3); margin: 15px auto 0; border-radius: 2px; } .about-body { padding: 30px; color: #444; line-height: 1.6; font-size: 0.95rem; } .about-intro { font-weight: 600; color: #800000; font-size: 1.05rem; margin-bottom: 15px; } .about-footer { background: #f9f9f9; padding: 25px; text-align: center; border-top: 1px solid #eee; } .about-footer h3 { font-size: 0.9rem; color: #666; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; } .social-links-gradient { display: flex; justify-content: center; gap: 15px; } .social-icon-gradient { width: 45px; height: 45px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; box-shadow: 0 4px 10px rgba(0,0,0,0.08); transition: all 0.3s ease; text-decoration: none; } .social-icon-gradient i { background: linear-gradient(45deg, #800000, #d63031); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all 0.3s ease; } .social-icon-gradient:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(128, 0, 0, 0.15); } /* Ensure close button is visible on dark header */ .about-modal-content .close-btn { color: rgba(255,255,255,0.7); top: 15px; right: 15px; } .about-modal-content .close-btn:hover { color: white; transform: rotate(90deg); } /* ===== MODAL TEXT VISIBILITY FIXES ===== */ /* About Modal - Ensure all text is white on maroon background */ #about-modal .modal-content, #about-modal .modal-content * { color: #ffffff !important; } #about-modal .modal-content p, #about-modal .modal-content h2, #about-modal .modal-content h3, #about-modal .modal-content span { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } #about-modal .close-btn { color: #ffffff !important; } #about-modal .close-btn:hover { color: #ffd700 !important; } /* Contact Modal - Left column text visibility */ #contact-modal .bg-gradient-to-br p, #contact-modal .bg-gradient-to-br h2, #contact-modal .bg-gradient-to-br h4, #contact-modal .bg-gradient-to-br span { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } /* Contact Modal - Right column (form) text visibility */ #contact-modal .bg-white h3 { color: #1f2937 !important; } #contact-modal .bg-white p { color: #6b7280 !important; } #contact-modal .bg-white label { color: #6b7280 !important; } #contact-modal .bg-white input, #contact-modal .bg-white textarea { color: #1f2937 !important; } #contact-modal .bg-white input::placeholder, #contact-modal .bg-white textarea::placeholder { color: #9ca3af !important; } /* --- MODERN CONTACT MODAL STYLES --- */ @keyframes modalPopIn { 0% { opacity: 0; transform: scale(0.95) translateY(10px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } .contact-modal-content { padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; max-width: 900px !important; width: 95% !important; overflow: hidden; } .modal.show .contact-modal-content { animation: modalPopIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } /* Ensure Tailwind classes work within the modal */ .contact-modal-content .text-white { color: #ffffff !important; } .contact-modal-content .text-gray-800 { color: #1f2937 !important; } .contact-modal-content .text-gray-700 { color: #374151 !important; } .contact-modal-content .text-gray-600 { color: #4b5563 !important; } .contact-modal-content .bg-white { background-color: #ffffff !important; } .contact-modal-content input, .contact-modal-content textarea { color: #111827 !important; } .contact-modal-content input::placeholder, .contact-modal-content textarea::placeholder { color: #9ca3af !important; } /* Contact Modal Specific Styles */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; text-align: left; margin-top: 20px; } .contact-info-col h3, .contact-form-col h3 { font-family: 'Mokoto', sans-serif; color: #5d1212; font-size: 1.2rem; margin-bottom: 15px; border-bottom: 2px solid rgba(166, 43, 43, 0.1); padding-bottom: 8px; } .contact-details-list { list-style: none; margin-bottom: 20px; } .contact-details-list li { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; font-size: 0.95rem; color: #555; } .contact-details-list li i { width: 35px; height: 35px; background: #f8f9fa; color: #a62b2b; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .social-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .social-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 8px; color: white; text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: transform 0.2s; } .social-btn:hover { transform: translateY(-2px); } .social-btn.fb { background: #1877F2; } .social-btn.tk { background: #000000; } .social-btn.ig { background: #E1306C; } .social-btn.ph { background: #25D366; } .contact-form-dummy input, .contact-form-dummy textarea { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 6px; font-family: inherit; font-size: 0.9rem; } .contact-form-dummy button { width: 100%; padding: 12px; background: linear-gradient(to right, #a62b2b, #5d1212); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; transition: 0.3s; } .contact-form-dummy button:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(166, 43, 43, 0.3); } @media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } .modal-content { width: 95%; padding: 25px; } } /* ===== CHECKOUT PAGE STYLES ===== */ .checkout-main { padding: 40px 50px; max-width: 1200px; margin: 20px auto 50px auto; } /* Auth Login/Register Section */ .checkout-container.auth-container { flex-direction: column; align-items: center; gap: 30px; } .auth-title { text-align: center; color: #5d1212; font-size: 2.2rem; margin: 10px 0 20px 0; } .auth-sections-wrapper { display: flex; gap: 40px; width: 100%; justify-content: center; max-width: 1000px; } .login-section, .create-account-section { flex: 1; max-width: 450px; padding: 30px; background: #ffffff; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); border: 1px solid #f0f0f0; } .section-divider { width: 1px; background: #ddd; min-height: 400px; } .login-btn { background: linear-gradient(to right, #7a1b1b, #5d1212); margin-top: 15px; } .create-account-btn { background: linear-gradient(to right, #a62b2b, #7a1b1b); margin-top: 15px; } /* Standard Checkout (Logged In) */ .checkout-container { display: flex; gap: 40px; align-items: flex-start; } .checkout-form-section, .order-summary-section { background: #ffffff; padding: 30px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); border: 1px solid #f0f0f0; } .checkout-form-section { flex: 2; min-width: 450px; } .order-summary-section { flex: 1; position: sticky; top: 90px; } .checkout-form-section h2, .order-summary-section h2 { font-family: 'Mokoto', sans-serif; color: #5d1212; font-size: 1.5rem; margin-bottom: 25px; display: flex; align-items: center; gap: 10px; } /* Form Styles */ .customer-form .form-group { margin-bottom: 20px; } .customer-form label { display: block; font-weight: 500; color: #444; margin-bottom: 5px; } .customer-form input[type="text"], .customer-form input[type="email"], .customer-form input[type="tel"], .customer-form input[type="password"], .customer-form textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 1rem; transition: border-color 0.3s, box-shadow 0.3s; } .customer-form input:focus, .customer-form textarea:focus { border-color: #a62b2b; box-shadow: 0 0 0 3px rgba(166, 43, 43, 0.1); outline: none; } /* Payment Options */ .payment-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 30px; } .payment-option { display: flex; align-items: center; padding: 10px; border: 1px solid #f0f0f0; border-radius: 6px; cursor: pointer; transition: background 0.2s; } .payment-option input[type="radio"] { margin-right: 10px; accent-color: #5d1212; } .payment-option:hover:not(.unavailable) { background: #fdf5f5; } .payment-option.unavailable { opacity: 0.6; cursor: not-allowed; background: #f9f9f9; } /* Order Summary */ .cart-items-list { border-bottom: 1px dashed #ddd; padding-bottom: 15px; margin-bottom: 15px; } .cart-item { display: flex; justify-content: space-between; font-size: 0.95rem; padding: 5px 0; } .item-name { color: #444; } .item-price { font-weight: 500; color: #5d1212; } .summary-details { padding-top: 10px; } .summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 1.1rem; } .summary-row.grand-total { font-weight: bold; color: white; background: linear-gradient(to right, #a62b2b, #5d1212); padding: 12px; margin: 10px -30px -30px -30px; border-radius: 0 0 10px 10px; } .summary-row.grand-total span { font-size: 1.2rem; } .place-order-btn.final-order-btn { width: 100%; padding: 15px; margin-top: 20px; font-size: 1.1rem; background: linear-gradient(to right, #7a1b1b, #5d1212); } .place-order-btn.final-order-btn:hover { background: linear-gradient(to right, #5d1212, #4a0d0d); } /* ===== GLOBAL RESPONSIVE STYLES ===== */ @media (max-width: 992px) { .shop-content { flex-direction: column; } .sidebar-filters { width: 100%; position: static; margin-bottom: 30px; } .product-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .checkout-container, .checkout-container.auth-container { flex-direction: column; gap: 20px; } .auth-sections-wrapper { flex-direction: column; gap: 20px; max-width: none; } .section-divider { width: 100%; height: 1px; min-height: 1px; margin: 10px 0; background: #eee; } .checkout-form-section { min-width: unset; width: 100%; } .order-summary-section { width: 100%; position: static; } .summary-row.grand-total { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; } } @media (max-width: 768px) { .product-list { flex-direction: column; } .main-header { padding: 15px 20px; flex-direction: row; /* Keep row for mobile header */ align-items: center; justify-content: space-between; gap: 10px; } /* Hide navbar visually but keep navbar-left in DOM for JavaScript */ .navbar { position: absolute !important; left: -9999px !important; visibility: hidden !important; opacity: 0 !important; } .navbar-left { position: absolute !important; left: -9999px !important; visibility: hidden !important; opacity: 0 !important; } .navbar-right { display: none !important; } .navbar.active { display: flex; } .mobile-menu-btn { display: block; /* Show hamburger on mobile */ } .navbar a { margin-left: 0; width: 100%; text-align: center; } .navbar .checkout-btn.header-cart { display: block; } .shop-main, .checkout-main { padding: 20px; margin-top: 20px; } .cart-sidebar { width: 100%; height: 100vh !important; min-height: 100vh !important; max-height: 100vh !important; top: 0 !important; bottom: 0 !important; } .cart-toggle-btn { top: 90px; right: 15px; width: 55px; height: 55px; } .footer-content { grid-template-columns: 1fr; gap: 30px; } } @media (max-width: 480px) { .modal-content { padding: 30px 20px; } .modal-content h2 { font-size: 1.5rem; } .contact-link { width: 100%; max-width: none; } .checkout-main { padding: 20px; } .auth-title { font-size: 1.8rem; } .cart-toggle-btn { top: 85px; right: 10px; width: 50px; height: 50px; padding: 12px; } .cart-sidebar-header { padding: 15px; } .cart-sidebar-content { padding: 15px; } } /* Container for centered content */ .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ===== MODERN CHECKOUT STYLES ===== */ .checkout-main { padding: 40px 20px; max-width: 1200px; margin: 20px auto 50px; animation: fadeIn 0.6s ease-out; } .shop-title { font-family: 'Mokoto', sans-serif; font-size: 2.8rem; color: #a62b2b; text-align: center; margin-bottom: 40px; padding-bottom: 15px; border-bottom: 3px solid rgba(166, 43, 43, 0.1); position: relative; } .shop-title::after { content: ''; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); width: 100px; height: 3px; background: linear-gradient(to right, #5d1212, #a62b2b); border-radius: 2px; } /* Modern Checkout Container */ .checkout-container { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: start; } .checkout-container.auth-container { grid-template-columns: 1fr; max-width: 1000px; margin: 0 auto; } /* Auth Sections - Modern Layout */ .auth-sections-wrapper { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 40px; background: #ffffff; border-radius: 16px; padding: 40px; box-shadow: 0 10px 40px rgba(93, 18, 18, 0.1), 0 0 0 1px rgba(166, 43, 43, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.8); } .section-divider { background: linear-gradient(to bottom, transparent 0%, rgba(166, 43, 43, 0.3) 50%, transparent 100%); height: 100%; min-height: 400px; } .login-section, .create-account-section { padding: 0; background: none; border: none; box-shadow: none; } .login-section h2, .create-account-section h2 { font-family: 'Mokoto', sans-serif; color: #5d1212; font-size: 1.6rem; margin-bottom: 25px; display: flex; align-items: center; gap: 12px; padding-bottom: 15px; border-bottom: 2px solid rgba(166, 43, 43, 0.1); } /* Modern Form Styles */ .customer-form { display: flex; flex-direction: column; gap: 20px; } .form-group { margin-bottom: 24px; position: relative; } .form-group label { display: block; font-weight: 600; color: #444; margin-bottom: 8px; font-size: 0.95rem; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 14px 16px; border: 2px solid #e1e5e9; border-radius: 10px; font-size: 1rem; transition: all 0.3s ease; background: #fafbfc; font-family: 'Poppins', sans-serif; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: #a62b2b; background: #ffffff; box-shadow: 0 0 0 4px rgba(166, 43, 43, 0.1), 0 4px 15px rgba(0, 0, 0, 0.05); outline: none; transform: translateY(-2px); } .form-group input::placeholder, .form-group textarea::placeholder { color: #a0a4a8; } /* Enhanced Payment Options */ .payment-options { display: grid; gap: 12px; margin: 25px 0; } .payment-option { display: flex; align-items: center; padding: 16px 20px; border: 2px solid #e1e5e9; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; background: #fafbfc; } .payment-option:hover:not(.unavailable) { border-color: #a62b2b; background: #fff5f5; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(166, 43, 43, 0.1); } .payment-option input[type="radio"] { margin-right: 15px; transform: scale(1.2); accent-color: #a62b2b; } .payment-option.unavailable { opacity: 0.5; cursor: not-allowed; background: #f8f9fa; } /* Modern Order Summary */ .order-summary-section { background: linear-gradient(135deg, #ffffff 0%, #fdfcfc 100%); border-radius: 16px; padding: 30px; box-shadow: 0 10px 40px rgba(93, 18, 18, 0.1), 0 0 0 1px rgba(166, 43, 43, 0.05); border: 1px solid rgba(255, 255, 255, 0.8); position: sticky; top: 100px; } .order-summary-section h2 { font-family: 'Mokoto', sans-serif; color: #5d1212; font-size: 1.4rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; padding-bottom: 15px; border-bottom: 2px solid rgba(166, 43, 43, 0.1); } .cart-items-list { max-height: 300px; overflow-y: auto; margin-bottom: 20px; padding-right: 10px; } .cart-items-list::-webkit-scrollbar { width: 6px; } .cart-items-list::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } .cart-items-list::-webkit-scrollbar-thumb { background: #a62b2b; border-radius: 10px; } .cart-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .cart-item:last-child { border-bottom: none; } .item-details { flex: 1; } .item-name { font-weight: 600; color: #333; display: block; margin-bottom: 4px; } .item-quantity-price { font-size: 0.85rem; color: #666; } .item-price { font-weight: 700; color: #a62b2b; font-size: 1rem; } /* Enhanced Summary Details */ .summary-details { background: #f8f9fa; border-radius: 12px; padding: 20px; margin: 25px -10px -10px; } .summary-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 1rem; } .summary-row.grand-total { font-weight: 800; color: white; background: linear-gradient(135deg, #a62b2b 0%, #5d1212 100%); padding: 18px 20px; margin: 20px -20px -20px; border-radius: 0 0 12px 12px; font-size: 1.3rem; box-shadow: 0 4px 15px rgba(166, 43, 43, 0.3); } /* Modern Buttons */ .btn-shop { position: relative; overflow: hidden; transition: all 0.4s ease; border: none; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .btn-shop::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: left 0.6s ease; } .btn-shop:hover::before { left: 100%; } .btn-shop:active { transform: translateY(2px); } .login-btn { background: linear-gradient(135deg, #7a1b1b 0%, #5d1212 100%); width: 100%; padding: 16px; font-size: 1.1rem; } .create-account-btn { background: linear-gradient(135deg, #a62b2b 0%, #7a1b1b 100%); width: 100%; padding: 16px; font-size: 1.1rem; } .place-order-btn.final-order-btn { background: linear-gradient(135deg, #7a1b1b 0%, #5d1212 100%); width: 100%; padding: 18px; font-size: 1.2rem; margin-top: 25px; box-shadow: 0 6px 20px rgba(166, 43, 43, 0.4); } .place-order-btn.final-order-btn:hover { background: linear-gradient(135deg, #5d1212 0%, #4a0d0d 100%); transform: translateY(-3px); box-shadow: 0 10px 25px rgba(166, 43, 43, 0.5); } /* Enhanced Alerts & Messages */ .alert-message { padding: 16px 20px; border-radius: 10px; margin-bottom: 25px; display: flex; align-items: center; gap: 12px; font-weight: 500; animation: slideInDown 0.5s ease-out; } .error-alert { background: linear-gradient(135deg, #ffe6e6 0%, #ffcccc 100%); border: 2px solid #ff4444; color: #a62b2b; } .thank-you-message { text-align: center; padding: 60px 40px; background: linear-gradient(135deg, #ffffff 0%, #fdfcfc 100%); border-radius: 20px; box-shadow: 0 20px 60px rgba(93, 18, 18, 0.15), 0 0 0 1px rgba(76, 175, 80, 0.1); border: 2px solid rgba(76, 175, 80, 0.2); animation: fadeInScale 0.6s ease-out; } .thank-you-message h2 { color: #7a1b1b; font-family: 'Mokoto', sans-serif; font-size: 2.2rem; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 15px; } .thank-you-message p { font-size: 1.1rem; color: #555; margin-bottom: 15px; line-height: 1.6; } .logged-in-message { background: linear-gradient(135deg, #f7eaea 0%, #f0dcdc 100%); border: 2px solid #a62b2b; color: #5d1212; padding: 12px 20px; border-radius: 10px; margin-bottom: 25px; font-weight: 500; } .logged-in-message a { color: #a62b2b; text-decoration: none; font-weight: 600; } .logged-in-message a:hover { text-decoration: underline; } /* Loading States */ .btn-shop.loading { pointer-events: none; opacity: 0.8; } .btn-shop.loading::after { content: ''; position: absolute; width: 20px; height: 20px; border: 2px solid transparent; border-top: 2px solid white; border-radius: 50%; animation: spin 1s linear infinite; } /* Animations */ @keyframes slideInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInScale { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } /* Responsive Design */ @media (max-width: 968px) { .checkout-container { grid-template-columns: 1fr; gap: 30px; } .order-summary-section { position: static; order: -1; } .auth-sections-wrapper { grid-template-columns: 1fr; gap: 30px; padding: 30px; } .section-divider { width: 100%; height: 1px; min-height: 1px; background: linear-gradient(to right, transparent 0%, rgba(166, 43, 43, 0.3) 50%, transparent 100%); } } @media (max-width: 768px) { .checkout-main { padding: 20px 15px; } .shop-title { font-size: 2.2rem; } .auth-sections-wrapper { padding: 25px 20px; } .thank-you-message { padding: 40px 25px; } .thank-you-message h2 { font-size: 1.8rem; flex-direction: column; gap: 10px; } } @media (max-width: 480px) { .shop-title { font-size: 1.8rem; } .order-summary-section, .checkout-form-section { padding: 20px 15px; } .summary-row.grand-total { font-size: 1.1rem; padding: 15px; } } /* ===== MODERN CHECKOUT STYLES ===== */ .modern-checkout { min-height: 100vh; } /* Checkout Hero Section */ .checkout-hero { background: linear-gradient(135deg, #5d1212 0%, #a62b2b 50%, #5d1212 100%); color: white; padding: 80px 0 60px; position: relative; overflow: hidden; } .checkout-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,'); background-size: cover; } .checkout-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 60px; position: relative; z-index: 2; } .checkout-header-content { max-width: 600px; } .checkout-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.2); padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; margin-bottom: 20px; backdrop-filter: blur(10px); } .checkout-title { font-family: 'Mokoto', sans-serif; font-size: 3.5rem; line-height: 1.1; margin-bottom: 15px; } .checkout-title .highlight { background: linear-gradient(45deg, #ffd700, #ffed4e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .checkout-subtitle { font-size: 1.2rem; opacity: 0.9; margin-bottom: 40px; line-height: 1.6; } /* Progress Steps */ .checkout-progress { display: flex; gap: 30px; align-items: center; } .progress-step { display: flex; align-items: center; gap: 10px; opacity: 0.6; transition: all 0.3s ease; } .progress-step.active { opacity: 1; } .step-number { width: 40px; height: 40px; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1rem; transition: all 0.3s ease; } .progress-step.active .step-number { background: white; color: #a62b2b; border-color: white; } .step-text { font-weight: 600; font-size: 0.95rem; } /* Floating Gear */ .checkout-header-visual { position: relative; } .floating-gear { width: 120px; height: 120px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 3rem; animation: float 3s ease-in-out infinite; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); } .gear-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 140px; height: 140px; background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%); border-radius: 50%; animation: pulse 2s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } /* Auth Section */ .auth-section { padding: 80px 0; background: #f8f9fa; } .auth-container { max-width: 500px; margin: 0 auto; background: white; border-radius: 20px; box-shadow: 0 20px 60px rgba(93, 18, 18, 0.1); overflow: hidden; } .auth-tabs { display: flex; background: #f8f9fa; border-bottom: 1px solid #e9ecef; } .auth-tab { flex: 1; padding: 20px; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; color: #6c757d; transition: all 0.3s ease; } .auth-tab.active { background: white; color: #a62b2b; box-shadow: 0 -2px 0 #a62b2b inset; } .auth-content { padding: 40px; } .auth-panel { display: none; } .auth-panel.active { display: block; animation: fadeInUp 0.5s ease; } .auth-header { text-align: center; margin-bottom: 30px; } .auth-header h3 { font-family: 'Mokoto', sans-serif; color: #a62b2b; font-size: 1.8rem; margin-bottom: 8px; } .auth-header p { color: #6c757d; } .auth-form { display: flex; flex-direction: column; gap: 20px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .input-with-icon { position: relative; } .input-with-icon i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #6c757d; } .input-with-icon input { padding-left: 45px !important; } /* Checkout Form Section */ .checkout-form-section { padding: 60px 0; background: #f8f9fa; } .checkout-layout { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: start; } .checkout-main-form { background: white; border-radius: 20px; padding: 40px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); } .form-section { margin-bottom: 40px; } .section-header { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid #f8f9fa; } .section-header h3 { font-family: 'Mokoto', sans-serif; color: #a62b2b; font-size: 1.4rem; margin: 0; } .section-header i { color: #a62b2b; font-size: 1.2rem; } .customer-info-card { display: flex; align-items: center; gap: 15px; padding: 20px; background: #f8f9fa; border-radius: 12px; border: 1px solid #e9ecef; } .customer-avatar { width: 50px; height: 50px; background: linear-gradient(135deg, #a62b2b, #5d1212); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem; } .customer-details h4 { margin: 0 0 5px 0; color: #333; } .customer-details p { margin: 0; color: #6c757d; font-size: 0.9rem; } .logout-link { margin-left: auto; color: #a62b2b; text-decoration: none; font-weight: 600; display: flex; align-items: center; gap: 5px; transition: color 0.3s ease; } .logout-link:hover { color: #5d1212; } /* Payment Methods */ .payment-methods { display: flex; flex-direction: column; gap: 12px; } .payment-method { border: 2px solid #e9ecef; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.3s ease; position: relative; } .payment-method input { display: none; } .payment-method.selected { border-color: #a62b2b; background: #fff5f5; } .payment-method.coming-soon { opacity: 0.6; cursor: not-allowed; } .method-content { display: flex; align-items: center; gap: 15px; } .method-icon { width: 50px; height: 50px; background: linear-gradient(135deg, #f8f9fa, #e9ecef); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #a62b2b; } .method-info { flex: 1; } .method-info h4 { margin: 0 0 5px 0; color: #333; } .method-info p { margin: 0; color: #6c757d; font-size: 0.9rem; } .coming-soon-badge { background: #6c757d; color: white; padding: 4px 8px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; } .method-check { color: #a62b2b; font-size: 1.2rem; opacity: 0; transition: opacity 0.3s ease; } .payment-method.selected .method-check { opacity: 1; } /* Order Summary */ .checkout-sidebar { position: sticky; top: 100px; } .order-summary-card { background: white; border-radius: 20px; padding: 30px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); margin-bottom: 20px; } .summary-title { font-family: 'Mokoto', sans-serif; color: #a62b2b; font-size: 1.3rem; margin-bottom: 25px; display: flex; align-items: center; gap: 10px; } .cart-items { max-height: 300px; overflow-y: auto; margin-bottom: 25px; padding-right: 10px; } .cart-item { display: flex; align-items: center; gap: 15px; padding: 15px 0; border-bottom: 1px solid #f8f9fa; } .cart-item:last-child { border-bottom: none; } .item-image { width: 50px; height: 50px; background: linear-gradient(135deg, #f8f9fa, #e9ecef); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #a62b2b; font-size: 1.2rem; } .item-details { flex: 1; } .item-name { margin: 0 0 5px 0; font-weight: 600; color: #333; font-size: 0.95rem; } .item-meta { margin: 0; color: #6c757d; font-size: 0.85rem; } .item-price { font-weight: 700; color: #a62b2b; font-size: 1rem; } .summary-totals { border-top: 2px solid #f8f9fa; padding-top: 20px; } .total-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 1rem; } .total-row.grand-total { font-weight: 800; color: white; background: linear-gradient(135deg, #a62b2b, #5d1212); padding: 18px 20px; margin: 20px -20px -20px; border-radius: 0 0 20px 20px; font-size: 1.2rem; } .shipping-info { display: flex; align-items: center; gap: 10px; padding: 15px; background: #f9ecec; border-radius: 10px; margin-top: 20px; border: 1px solid #a62b2b; } .shipping-info i { color: #a62b2b; font-size: 1.2rem; } .shipping-text { font-size: 0.9rem; color: #5d1212; } .security-badge { display: flex; align-items: center; gap: 15px; padding: 20px; background: white; border-radius: 15px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); border: 1px solid #e9ecef; } .security-badge i { color: #a62b2b; font-size: 1.5rem; } .security-text { display: flex; flex-direction: column; } .security-text strong { color: #333; font-size: 0.95rem; } .security-text span { color: #6c757d; font-size: 0.85rem; } /* Confirmation Section */ .confirmation-section { padding: 80px 0; background: #f8f9fa; } .confirmation-container { max-width: 600px; margin: 0 auto; padding: 0 20px; } .confirmation-card { background: white; border-radius: 20px; padding: 50px 40px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); border: 2px solid #e8f5e8; } .confirmation-icon { width: 80px; height: 80px; background: linear-gradient(135deg, #a62b2b, #7a1b1b); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 2.5rem; margin: 0 auto 25px; } .confirmation-card h2 { font-family: 'Mokoto', sans-serif; color: #333; font-size: 2.2rem; margin-bottom: 15px; } .confirmation-text { font-size: 1.1rem; color: #666; margin-bottom: 30px; line-height: 1.6; } .order-details { background: #f8f9fa; border-radius: 15px; padding: 25px; margin: 30px 0; text-align: left; } .detail-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #e9ecef; } .detail-item:last-child { border-bottom: none; } .detail-label { color: #666; font-weight: 500; } .detail-value { color: #333; font-weight: 600; } .confirmation-actions { display: flex; gap: 15px; justify-content: center; margin: 30px 0; } .confirmation-note { background: #fbecec; border: 1px solid #a62b2b; border-radius: 10px; padding: 15px; color: #5d1212; font-size: 0.9rem; display: flex; align-items: center; gap: 10px; } .confirmation-note i { font-size: 1.1rem; } /* Enhanced Buttons */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 25px; border: none; border-radius: 12px; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.3s ease; font-size: 1rem; position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: left 0.6s ease; } .btn:hover::before { left: 100%; } .btn-primary { background: linear-gradient(135deg, #a62b2b, #5d1212); color: white; } .btn-primary:hover { background: linear-gradient(135deg, #5d1212, #4a0d0d); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(166, 43, 43, 0.3); } .btn-secondary { background: #6c757d; color: white; } .btn-secondary:hover { background: #5a6268; transform: translateY(-2px); } .btn.full-width { width: 100%; justify-content: center; } .order-btn { padding: 18px 25px; font-size: 1.1rem; margin-top: 20px; } /* Helper Text */ .helper-text { color: #6c757d; font-size: 0.85rem; margin-top: 8px; display: flex; align-items: center; gap: 5px; } /* Loading States */ .btn.loading { pointer-events: none; opacity: 0.8; } .btn.loading::after { content: ''; width: 20px; height: 20px; border: 2px solid transparent; border-top: 2px solid currentColor; border-radius: 50%; animation: spin 1s linear infinite; } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Responsive Design */ @media (max-width: 968px) { .checkout-layout { grid-template-columns: 1fr; gap: 30px; } .checkout-sidebar { position: static; order: -1; } .checkout-container { grid-template-columns: 1fr; text-align: center; gap: 40px; } .checkout-title { font-size: 2.8rem; } .checkout-progress { justify-content: center; } .form-row { grid-template-columns: 1fr; } } @media (max-width: 768px) { .checkout-hero { padding: 60px 0 40px; } .checkout-title { font-size: 2.2rem; } .checkout-main-form, .auth-content { padding: 30px 20px; } .confirmation-card { padding: 40px 25px; } .confirmation-actions { flex-direction: column; } .auth-tabs { flex-direction: column; } } @media (max-width: 480px) { .checkout-title { font-size: 1.8rem; } .progress-step .step-text { display: none; } .customer-info-card { flex-direction: column; text-align: center; gap: 15px; } .logout-link { margin-left: 0; } .method-content { flex-direction: column; text-align: center; gap: 10px; } } /* Desktop-scale: make the site render like ~80% zoom on wide screens Uses transform (works in Firefox) and leaves a zoom fallback for Blink/Edge. Applied only on large viewports to avoid mobile issues. */ @media (min-width: 1000px) { :root{ --ui-scale: 0.8; } /* Use zoom where supported (Chrome/Edge/Safari). Avoid transform on body because it breaks fixed-positioned elements (modals, sidebars) in some browsers. */ html { zoom: var(--ui-scale); } } /* --- FIXED NOTIFICATION STYLES (Bottom Left) --- */ .modal-confirmation-window { position: fixed; bottom: 80px; left: 22px; z-index: 20001; /* Higher than global modal (20000) and sidebar (12000) */ max-width: 320px; background: white; padding: 14px 18px; border-radius: 11px; box-shadow: 0 8px 35px rgba(0, 0, 0, 0.25); border-left: 5px solid #800000; transition: all 0.4s ease-out; opacity: 0; transform: translateX(-100%); } .modal-confirmation-window.show { left: 22px; opacity: 1; transform: translateX(0); } .confirmation-content { display: flex; align-items: center; gap: 12px; } #modal-icon { font-size: 1.6rem; color: #800000; } #modal-message { margin: 0; font-size: 0.9rem; color: #333; font-weight: 600; } .modal-confirmation-window.success { border-left-color: #28a745; } .modal-confirmation-window.success #modal-icon { color: #28a745; } .modal-confirmation-window.error { border-left-color: #dc3545; } .modal-confirmation-window.error #modal-icon { color: #dc3545; } /* ===== INFO SIDEBAR STYLES (Alta-inspired Clean UI) ===== */ .sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 11010; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .sidebar-overlay.active { opacity: 1; visibility: visible; } /* Hide old toggle button - now in header */ .info-toggle-btn { display: none; } .info-sidebar { position: fixed; top: 0; bottom: 0; left: -470px; width: 450px; height: 100vh; /* Full height */ background: #fff; box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1); z-index: 11020; left: 0; transform: translateX(0); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; display: flex; flex-direction: column; } .info-sidebar.active { left: 0 !important; } .info-sidebar-header { display: none; /* Remove the red header completely */ } .close-sidebar { display: none; /* Close button removed, use hamburger toggle instead */ } .sidebar-logo { display: flex; align-items: center; gap: 8px; } .sidebar-logo-img { height: 32px; width: auto; filter: invert(1); /* Make white logo visible on white background */ } .info-sidebar-content { flex: 1; overflow-y: auto; padding: 90px 0 0 0; /* Remove bottom padding, let footer handle it */ display: flex; flex-direction: column; } /* Navigation List - Maroon Theme */ .sidebar-nav-list { list-style: none; padding: 0; margin: 0; } .sidebar-nav-list > li { margin: 0; } .sidebar-nav-list > li > a { display: flex; align-items: center; gap: 16px; padding: 14px 24px; color: #374151; text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: all 0.15s ease; border-radius: 0; } .sidebar-nav-list > li > a:hover { background: #fef2f2; color: #800000; } .sidebar-nav-list > li > a i:first-child { width: 20px; text-align: center; font-size: 1rem; color: #800000; } .sidebar-nav-list > li > a:hover i:first-child { color: #5a0000; } /* Active/Selected State - Maroon */ .sidebar-nav-list > li.active > a, .sidebar-nav-list > li > a.active { background: #fef2f2; color: #800000; } .sidebar-nav-list > li.active > a i:first-child, .sidebar-nav-list > li > a.active i:first-child { color: #800000; } /* Submenu Styles */ .has-submenu > a { position: relative; } .submenu-arrow { margin-left: auto; font-size: 0.75rem !important; color: #9ca3af !important; transition: transform 0.2s ease; } .has-submenu.active .submenu-arrow { transform: rotate(180deg); } .sidebar-submenu { list-style: none; padding: 0; margin: 0; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-4px); transition: max-height 0.3s ease, opacity 0.2s ease, transform 0.2s ease; background: #fafafa; } .has-submenu.active .sidebar-submenu { max-height: 400px; opacity: 1; transform: translateY(0); } /* Hover/focus drop-down for Categories */ .has-submenu:hover .sidebar-submenu, .has-submenu:focus-within .sidebar-submenu { max-height: 400px; opacity: 1; transform: translateY(0); } .has-submenu:hover .submenu-arrow, .has-submenu:focus-within .submenu-arrow { transform: rotate(180deg); } .sidebar-submenu li a { display: block; padding: 10px 24px 10px 60px; color: #6b7280; text-decoration: none; font-size: 0.9rem; transition: all 0.15s ease; } .sidebar-submenu li a:hover { background: #fef2f2; color: #800000; } /* Sidebar Footer */ .sidebar-footer { margin-top: auto; /* Push to bottom */ padding: 16px 24px 20px 24px; /* Extra bottom padding */ border-top: 1px solid #f0f0f0; flex-shrink: 0; /* Don't shrink */ } .sidebar-footer .logout-btn, .sidebar-footer .login-btn { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: #dc2626; text-decoration: none; font-size: 0.95rem; font-weight: 500; border-radius: 8px; transition: all 0.15s ease; } .sidebar-footer .login-btn { color: #800000; } .sidebar-footer .logout-btn:hover { background: #fef2f2; } .sidebar-footer .login-btn:hover { background: #fef2f2; } .sidebar-footer .logout-btn i, .sidebar-footer .login-btn i { font-size: 1rem; } /* Mobile Responsive */ @media (max-width: 768px) { .info-sidebar { width: 100%; left: -100%; } } /* End of Info Sidebar Styles */ /* Transparent Overlay for Info Sidebar */ .sidebar-overlay.transparent-overlay { background: transparent !important; pointer-events: auto; /* Ensure clicks are still captured */ backdrop-filter: none !important; /* Prevent global blur when info sidebar is open */ filter: none !important; z-index: 11015; /* Keep overlay beneath the info sidebar UI */ } /* ===== MODERN INVOICE STYLES ===== */ .invoice-container { max-width: 800px; margin: 40px auto; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); overflow: hidden; font-family: 'Inter', sans-serif; } .invoice-header { background: linear-gradient(135deg, #800000, #a00000); color: white; padding: 30px; display: flex; justify-content: space-between; align-items: center; } .invoice-logo { display: flex; align-items: center; gap: 15px; } .invoice-logo i { font-size: 2rem; } .invoice-logo .logo-text { font-family: 'Mokoto', serif; font-size: 1.5rem; font-weight: 700; } .invoice-details { text-align: right; } .invoice-details h1 { margin: 0; font-size: 2rem; font-weight: 800; } .invoice-header h1 { margin: 0; font-size: 2rem; font-weight: 800; flex-shrink: 0; } .invoice-status { text-align: center; margin: 15px 0; } .invoice-details p { margin: 5px 0 0 0; opacity: 0.9; } .invoice-body { padding: 30px; } .invoice-section { margin-bottom: 30px; } .invoice-section h2 { font-size: 1.2rem; color: #333; margin-bottom: 15px; border-bottom: 2px solid #800000; padding-bottom: 5px; } .invoice-address { background: #f8f9fa; padding: 15px; border-radius: 8px; border-left: 4px solid #800000; } .invoice-address p { margin: 0; color: #555; line-height: 1.5; } .invoice-table { width: 100%; border-collapse: collapse; margin-top: 20px; } .invoice-table th, .invoice-table td { padding: 15px; text-align: left; border-bottom: 1px solid #eee; } .invoice-table th { background: #f8f9fa; font-weight: 600; color: #333; border-bottom: 2px solid #800000; } .invoice-table .item-image { width: 60px; height: 60px; border-radius: 6px; overflow: hidden; background: #f0f0f0; display: flex; align-items: center; justify-content: center; } .invoice-table .item-image img { width: 100%; height: 100%; object-fit: cover; } .invoice-table .item-details { display: flex; align-items: center; gap: 15px; } .invoice-table .item-info h4 { margin: 0; font-size: 1rem; color: #333; } .invoice-table .item-info p { margin: 5px 0 0 0; color: #666; font-size: 0.9rem; } .invoice-summary { background: #f8f9fa; padding: 20px; border-radius: 8px; margin-top: 30px; } .invoice-summary-row { display: flex; justify-content: space-between; margin-bottom: 10px; color: #555; } .invoice-summary-row.total { border-top: 2px solid #800000; padding-top: 15px; margin-top: 15px; font-weight: 700; font-size: 1.1rem; color: #333; } .invoice-footer { background: #333; color: white; padding: 20px 30px; text-align: center; } .invoice-footer p { margin: 0; font-size: 0.9rem; opacity: 0.8; } @media (max-width: 768px) { .invoice-container { margin: 20px; border-radius: 8px; } .invoice-header { flex-direction: column; text-align: center; gap: 20px; } .invoice-table { font-size: 0.9rem; } .invoice-table th, .invoice-table td { padding: 10px; } .invoice-table .item-details { flex-direction: column; align-items: flex-start; } } /* Invoice Actions */ .invoice-actions { display: flex; gap: 15px; justify-content: center; margin: 20px 0; flex-wrap: wrap; } .invoice-actions .btn-back, .invoice-actions .btn-invoice, .invoice-actions .btn-print, .invoice-actions .btn-track { padding: 14px 24px; border-radius: 12px; font-weight: 600; font-size: 0.95rem; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 2px solid transparent; box-shadow: 0 2px 8px rgba(0,0,0,0.1); position: relative; overflow: hidden; } .invoice-actions .btn-back { background: #6c757d; color: white; } .invoice-actions .btn-back:hover { background: #5a6268; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(108,117,125,0.3); } .invoice-actions .btn-invoice { background: #007bff; color: white; } .invoice-actions .btn-invoice:hover { background: #0056b3; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,123,255,0.3); } .invoice-actions .btn-print { background: #28a745; color: white; } .invoice-actions .btn-print:hover { background: #1e7e34; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(40,167,69,0.3); } .invoice-actions .btn-track { background: #ffc107; color: #212529; } .invoice-actions .btn-track:hover { background: #e0a800; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,193,7,0.3); } .invoice-logo-img { height: 50px; width: auto; max-width: 200px; } .status-badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 20px; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; } .status-badge.status-pending { background: #fff3cd; color: #856404; border: 1px solid #ffeaa7; } .status-badge.status-processing { background: #cce7ff; color: #004085; border: 1px solid #b3d7ff; } .status-badge.status-shipped { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; } .status-badge.status-delivered { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .status-badge.status-cancelled { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } /* ===== INFO SIDEBAR STYLES (Redesigned) ===== */ .info-sidebar { position: fixed; inset: 0 auto 0 0; /* top:0; right:auto; bottom:0; left:0 off-screen */ left: -400px; width: 380px; height: auto; min-height: 100vh; /* Reach full viewport height */ background: #fff; box-shadow: 4px 0 25px rgba(0,0,0,0.15); z-index: 11000; transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; border-top: 1px solid rgba(0,0,0,0.05); } .info-sidebar.active { left: 0; } .info-sidebar-header { padding: 20px 25px; background: linear-gradient(135deg, #4a0d0d 0%, #8a1c1c 100%); color: white; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .close-sidebar { background: none; border: none; color: white; font-size: 1.2rem; cursor: pointer; transition: transform 0.2s; } .close-sidebar:hover { transform: rotate(90deg); color: #ffd700; } .info-sidebar-content { flex: 1; overflow-y: auto; padding: 25px; } /* ===== ACCOUNT SIDEBAR STYLES (Redesigned) ===== */ .account-sidebar { position: fixed; top: 0; bottom: 0; right: 0; width: 380px; height: 100% !important; /* Force full height */ min-height: 100vh; background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%); box-shadow: -6px 0 28px rgba(0,0,0,0.16); border-left: 1px solid rgba(0,0,0,0.04); z-index: 11000; transform: translateX(100%); transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; } .account-sidebar.active { transform: translateX(0); } .account-sidebar-header { padding: 25px 30px; /* More padding */ background: linear-gradient(135deg, #4a0d0d 0%, #8a1c1c 100%); color: white; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 15px rgba(0,0,0,0.1); flex-shrink: 0; } .close-account-sidebar { background: none; border: none; color: white; font-size: 1.2rem; cursor: pointer; transition: transform 0.2s; } .close-account-sidebar:hover { transform: rotate(90deg); color: #ffd700; } .account-sidebar-content { flex: 1; overflow-y: auto; padding: 22px 26px; display: flex; flex-direction: column; gap: 12px; } .account-profile { display: flex; align-items: center; gap: 12px; /* Reduced gap */ margin-bottom: 15px; /* Much less spacing */ padding-bottom: 15px; /* Less padding */ border-bottom: 1px solid #eee; } .account-avatar { width: 50px; /* Smaller avatar */ height: 50px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; /* Thinner border */ box-shadow: 0 2px 8px rgba(0,0,0,0.1); flex-shrink: 0; } .account-avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar-initial { width: 100%; height: 100%; background: #800000; color: white; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; /* Smaller font */ font-weight: bold; } .account-meta { flex: 1; min-width: 0; text-align: left; line-height: 1.3; /* Tighter line height */ } .account-name { font-size: 1.05rem; /* Smaller */ font-weight: 700; color: #333; margin-bottom: 3px; /* Less margin */ word-break: break-word; white-space: nowrap; /* Keep on one line */ overflow: hidden; text-overflow: ellipsis; } .account-email { font-size: 0.85rem; /* Smaller */ color: #666; display: flex; align-items: center; gap: 6px; word-break: break-word; white-space: nowrap; /* Keep on one line */ overflow: hidden; text-overflow: ellipsis; } .account-email .verified { color: #18a84b; font-size: 0.9rem; /* Smaller */ } .account-menu-list { list-style: none; padding: 0; margin: 0; } .account-menu-item { margin-bottom: 6px; /* Much less spacing */ } .account-menu-link { display: flex; align-items: center; gap: 14px; /* Slightly reduced */ padding: 11px 16px; /* Reduced padding */ color: #444; text-decoration: none; font-weight: 500; font-size: 0.95rem; /* Slightly smaller */ border-radius: 8px; transition: all 0.2s; } .account-menu-link:hover, .account-menu-item.active .account-menu-link { background: #fff5f5; color: #800000; transform: translateX(5px); } .account-menu-link i { width: 28px; /* Larger icons */ font-size: 1.1rem; text-align: center; color: #800000; } .menu-badge { margin-left: auto; background: #800000; color: white; padding: 4px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; } /* ===== SIDEBAR NAVIGATION STYLES ===== */ .sidebar-nav-list { list-style: none; padding: 0; margin: 0; } .sidebar-nav-list li { margin-bottom: 5px; } .sidebar-nav-list a { display: flex; align-items: center; gap: 15px; padding: 15px 20px; color: #333; text-decoration: none; font-weight: 500; border-radius: 8px; transition: all 0.2s; } .sidebar-nav-list a:hover { background: #fff5f5; color: #800000; transform: translateX(5px); } .sidebar-nav-list a i { width: 25px; text-align: center; font-size: 1.1rem; color: #800000; } .nav-divider { height: 1px; background: #eee; margin: 10px 20px; } /* Submenu */ .sidebar-submenu { list-style: none; padding: 0; margin: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: #fcfcfc; } .sidebar-nav-list li.active .sidebar-submenu { max-height: 500px; } .sidebar-submenu li a { padding: 10px 20px 10px 60px; font-size: 0.95rem; color: #555; } .sidebar-submenu li a:hover { color: #800000; background: #f0f0f0; } .submenu-arrow { margin-left: auto; font-size: 0.8rem !important; transition: transform 0.3s; } .sidebar-nav-list li.active .submenu-arrow { transform: rotate(180deg); } /* Sidebar Vouchers Panel */ .sidebar-vouchers-panel { margin-top: 10px; padding: 10px; background: #f9f9f9; border-radius: 8px; border: 1px solid #eee; display: none; } .account-menu-item.active .sidebar-vouchers-panel { display: block; } .vouchers-section h5 { font-size: 0.85rem; color: #888; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; } .vouchers-section ul { list-style: none; padding: 0; } .sv-item { background: white; border: 1px dashed #ccc; padding: 8px; margin-bottom: 8px; border-radius: 4px; font-size: 0.85rem; } .sv-code { font-weight: bold; color: #800000; display: block; } .sv-desc { color: #555; font-size: 0.8rem; } /* ===================================================== GLOBAL MOBILE-FIRST RESPONSIVE STYLES ===================================================== */ @media (max-width: 768px) { /* Root Variables for Mobile */ :root { --nav-height: auto; --site-side-pad: 12px; } /* Base Typography */ html { font-size: 14px; } /* Header Mobile Reset */ .main-header { position: sticky; top: 0; z-index: 1000; flex-wrap: wrap !important; padding: 12px !important; gap: 10px !important; height: auto !important; min-height: auto !important; } .main-header .navbar-left, .main-header .navbar-right { display: none !important; } .main-header .logo { order: 1; margin: 0 auto; } .logo-icon { height: 36px !important; } /* Page Content Mobile Reset */ main, section, .shop-main, .checkout-main, .container, .modern-hero, .featured-section { padding-top: 20px !important; } .modern-hero, .shop-hero { padding-top: 0; } /* Container Mobile */ .site-container, .container, .shop-main, .checkout-main, .main, .hero-container, .shop-hero-content { padding-left: 12px !important; padding-right: 12px !important; } /* Account Sidebar Mobile */ .account-sidebar { width: 100% !important; max-width: 100% !important; left: 0 !important; right: 0 !important; border-radius: 0 !important; } .account-sidebar.active { transform: translateX(0); } .sidebar-header { padding: 20px 16px; } .user-avatar { width: 60px; height: 60px; } .sidebar-nav-list li a { padding: 14px 16px; font-size: 0.95rem; } .sidebar-nav-list li a i { width: 28px; } /* Cart Sidebar Mobile */ .cart-sidebar { width: 100% !important; max-width: 100% !important; } .cart-sidebar-header { padding: 16px; } .cart-sidebar-content { padding: 12px; } .cart-sidebar-footer { padding: 16px; } /* Global Form Elements Mobile */ input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], textarea, select { font-size: 16px !important; /* Prevents iOS zoom */ padding: 12px 14px; border-radius: 8px; } button, .btn, input[type="submit"], input[type="button"] { min-height: 44px; padding: 12px 16px; font-size: 0.95rem; border-radius: 8px; } /* Modal Mobile */ .modal { padding: 16px; } .modal-content { max-width: 100% !important; max-height: 90vh; margin: auto; border-radius: 16px !important; overflow-y: auto; } .close-btn { position: absolute; top: 12px; right: 12px; font-size: 1.5rem; z-index: 10; } /* Footer Mobile */ .main-footer { padding: 30px 16px 20px; } .footer-content { flex-direction: column; gap: 25px; text-align: center; } .footer-column { width: 100%; text-align: center; } .footer-logo { justify-content: center; } .social-links { justify-content: center; } .copyright { font-size: 0.8rem; padding-top: 20px; } /* Confirmation Modal Mobile */ .modal-confirmation-window { padding: 16px; } .confirmation-content { padding: 20px; border-radius: 12px; } .confirmation-content i { font-size: 2rem; } .confirmation-content p { font-size: 0.95rem; } } /* Very Small Mobile (360px and below) */ @media (max-width: 360px) { html { font-size: 13px; } .logo-icon { height: 32px !important; } .main-header { padding: 10px !important; } button, .btn { padding: 10px 14px; } } /* Touch Device Enhancements */ @media (hover: none) and (pointer: coarse) { /* Increase tap targets */ a, button, input[type="submit"], input[type="button"], .btn { min-height: 44px; min-width: 44px; } /* Disable hover effects */ a:hover, button:hover, .btn:hover { transform: none; } /* Active state for touch feedback */ a:active, button:active, .btn:active { opacity: 0.8; transform: scale(0.98); } /* Better scrolling */ .overflow-x-auto, .scroll-container { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .overflow-x-auto::-webkit-scrollbar, .scroll-container::-webkit-scrollbar { display: none; } } /* Safe Area Support for Notched Devices */ @supports (padding: env(safe-area-inset-bottom)) { body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } .main-footer { padding-bottom: calc(20px + env(safe-area-inset-bottom)); } .cart-sidebar-footer { padding-bottom: calc(16px + env(safe-area-inset-bottom)); } .modal-content { margin-bottom: env(safe-area-inset-bottom); } } /* Landscape Mobile Adjustments */ @media (max-width: 812px) and (orientation: landscape) { .main-header { padding: 8px 16px !important; } .modal-content { max-height: 95vh; } } /* Shop Page Specific Styles - Maroon Theme */ /* Force dark background on body to prevent white flash */ body { background: linear-gradient(to bottom, #660000 0%, #500000 100%) !important; background-color: #660000 !important; } /* Shop-specific override: simplify the floating cart toggle to a plain cart icon Remove the yellow border and red background, make the cart glyph larger. */ .cart-toggle-btn { background: transparent !important; border: none !important; box-shadow: none !important; width: auto !important; height: auto !important; padding: 10px 12px !important; /* larger hit area */ border-radius: 6px !important; /* slight rounding for a softer touch */ right: 35px !important; top: 96px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #ffffff !important; cursor: pointer !important; pointer-events: auto !important; /* Ensure clicks are captured */ z-index: 10500 !important; /* Above all other elements */ } .cart-toggle-btn i { font-size: 44px !important; /* much larger cart icon for visibility */ line-height: 1 !important; text-shadow: 0 3px 10px rgba(0,0,0,0.6) !important; /* subtle lift for contrast */ pointer-events: none !important; /* Let clicks pass through to button */ } @media (max-width: 1024px) { .cart-toggle-btn i { font-size: 36px !important; } } @media (max-width: 480px) { .cart-toggle-btn i { font-size: 30px !important; } .cart-toggle-btn { padding: 8px 10px !important; } } /* --- Animated Background Shapes --- */ .soft-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: linear-gradient(to bottom, #660000 0%, #500000 100%); /* Matches header color */ overflow: hidden; pointer-events: none; } .shape-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.3; animation: blobFloat 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1); } .shape-blob-1 { top: -10%; left: -10%; width: 600px; height: 600px; background: radial-gradient(circle, #ff4d4d 0%, transparent 70%); } .shape-blob-2 { bottom: -10%; right: -10%; width: 700px; height: 700px; background: radial-gradient(circle, #ff3333 0%, transparent 70%); animation-delay: -7s; } .shape-blob-3 { top: 40%; left: 40%; width: 500px; height: 500px; background: radial-gradient(circle, #ff6666 0%, transparent 70%); animation-delay: -14s; } @keyframes blobFloat { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(50px, 30px) scale(1.1); } } /* Modern Shop Styles */ .shop-hero { position: relative; background-color: #000; /* Fallback color */ color: white; padding: 80px 20px !important; /* Reduced padding */ text-align: center; overflow: hidden; min-height: 45vh !important; /* Reduced height */ display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; } .shop-hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), var(--hero-bg, url('https://gearuppercussion.com/assets/images/hero_bg_index.png')) center/cover no-repeat; z-index: 0; } .shop-hero-content { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; } /* Commented out hero text styles to prevent unintended rendering */ /* .shop-hero h1 { font-family: 'Mokoto', sans-serif; font-size: 2.5rem !important; margin-bottom: 30px; text-shadow: 3px 3px 12px rgba(0,0,0,0.4); letter-spacing: 2px; line-height: 1.2; width: 100%; } .shop-hero p { font-size: 1.1rem; opacity: 0.9; margin-bottom: 40px; max-width: 800px; margin-left: auto; margin-right: auto; line-height: 1.6; } */ .stats-container { display: flex !important; flex-direction: row !important; justify-content: center; gap: 60px; margin-top: 40px; flex-wrap: wrap; } .stat-item { text-align: center; } .stat-number { font-family: 'Mokoto', sans-serif; font-size: 2.2rem; font-weight: normal; display: block; margin-bottom: 8px; letter-spacing: 2px; } .stat-label { font-size: 0.9rem; opacity: 0.8; text-transform: uppercase; letter-spacing: 2px; font-weight: 500; } /* EXPANDED LAYOUT - Full width container */ .shop-main { max-width: 95% !important; width: 95% !important; padding: 8px 0 120px 0 !important; margin: -60px auto 52px; font-size: 0.95rem; position: relative; min-height: 80vh; box-sizing: border-box; } /* Allow the shop's inner .container to expand for wider cards */ main.shop-main .container, main.shop-main > .container, .shop-main .container, .shop-main > .container { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; box-sizing: border-box !important; } /* ===== TOP SEARCH BAR ===== */ .search-bar-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; background: #fff5f5; /* Light Maroon Theme */ border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); margin: 0 4px 12px 4px; border: 1px solid rgba(128,0,0,0.1); } .shop-logos { display: flex; align-items: center; gap: 15px; margin-right: 20px; } .shop-brand-logo { height: 50px; /* Increased size */ width: auto; object-fit: contain; /* Make logo black and add shadow */ filter: brightness(0) drop-shadow(0 2px 4px rgba(0,0,0,0.1)); } .shop-brand-logo.main-logo { height: 60px; /* Even bigger for the main logo */ } .search-bar-top .search-wrapper { flex: 1; max-width: 300px; /* Reduced width */ } .sort-group-top { display: flex; align-items: center; gap: 10px; } .sort-group-top .filter-label { font-size: 0.8rem; color: #666; font-weight: 600; white-space: nowrap; } /* ===== SHOP LAYOUT WITH LEFT SIDEBAR ===== */ .shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; width: 100%; padding: 0 4px; } /* Left Sidebar Filters */ .filters-sidebar { position: sticky; top: 20px; background: #fff5f5; /* Light Maroon Theme */ border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); border: 1px solid rgba(128,0,0,0.1); overflow: hidden; } .filters-sidebar-inner { padding: 20px; } .sidebar-title { font-size: 1rem; font-weight: 700; color: #660000; margin: 0 0 20px 0; padding-bottom: 12px; border-bottom: 2px solid #f0f0f0; display: flex; align-items: center; gap: 8px; } .sidebar-title i { font-size: 0.9rem; } .filter-section { margin-bottom: 24px; } .filter-section:last-child { margin-bottom: 0; } .filter-heading { font-size: 0.85rem; font-weight: 600; color: #333; margin: 0 0 12px 0; text-transform: uppercase; letter-spacing: 0.5px; } /* Category Radio Options */ .category-list { display: flex; flex-direction: column; gap: 4px; } .category-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; font-size: 0.9rem; color: #444; } .category-option:hover { background: #fef7f7; } .category-option input[type="radio"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 2px solid #ddd; border-radius: 50%; cursor: pointer; transition: all 0.2s ease; position: relative; flex-shrink: 0; } .category-option input[type="radio"]:checked { border-color: #660000; background: #660000; } .category-option input[type="radio"]:checked::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; background: white; border-radius: 50%; } .category-option:has(input:checked) { background: #fef7f7; color: #660000; font-weight: 600; } /* Price Filter */ .price-filter { padding: 0 4px; } .price-slider { width: 100%; height: 6px; border-radius: 3px; background: #e0e0e0; outline: none; -webkit-appearance: none; appearance: none; margin-bottom: 12px; } .price-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #660000; cursor: pointer; box-shadow: 0 2px 6px rgba(128,0,0,0.3); transition: transform 0.2s ease; } .price-slider::-webkit-slider-thumb:hover { transform: scale(1.1); } .price-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #660000; cursor: pointer; border: none; } .price-display { display: flex; justify-content: space-between; font-size: 0.85rem; color: #666; font-weight: 500; } .price-display #price-value { color: #660000; font-weight: 700; } /* Shop Products Area */ .shop-products { width: 100%; } /* ===== RESPONSIVE: Hide sidebar on mobile ===== */ @media (max-width: 992px) { .shop-layout { grid-template-columns: 1fr; } .filters-sidebar { display: none; } /* Show a mobile filter bar instead */ .search-bar-top { flex-wrap: wrap; } .search-bar-top .search-wrapper { flex: 1 1 100%; max-width: none; margin-bottom: 12px; } .sort-group-top { width: 100%; justify-content: flex-end; } } @media (max-width: 600px) { .search-bar-top { padding: 12px 16px; border-radius: 12px; } .sort-group-top .filter-label { display: none; } } /* ======================================== VERTICAL PRODUCT GRID - 4 Column Layout ======================================== - Desktop: 4 columns (responsive down to 1 column on mobile) - Cards stack vertically: image on top, content below - Maintains all features: variants, quick view, badges, etc. - Responsive breakpoints ensure optimal viewing on all devices ======================================== */ .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); /* 4 columns for vertical cards */ gap: 20px; align-items: stretch; justify-content: stretch; margin: 0; margin-right: 0; width: 100%; /* Use full available width */ max-width: calc(100vw - 110px); /* Prevent overflow beyond icons */ padding-right: 0; /* Spacing handled by parent container */ } /* Responsive breakpoints */ @media (max-width: 1400px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; max-width: calc(100vw - 100px); } .shop-content { padding-right: 70px; } } @media (max-width: 992px) { /* Tablet: 2 columns */ .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; width: 100%; max-width: calc(100vw - 95px); } .shop-content { padding-right: 65px; } } @media (max-width: 768px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; max-width: calc(100vw - 90px); } .shop-content { padding-right: 60px; } } @media (max-width: 480px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; /* Tighter gap for mobile 2-col */ width: 100%; padding-left: 2px; padding-right: 2px; } .shop-content { padding-right: 0; } /* Adjust card sizing for 2-col mobile */ .product-card-modern { padding: 8px; } .product-title { font-size: 0.85rem; margin-bottom: 4px; line-height: 1.2; } .product-price { font-size: 0.9rem; } .product-overlay { display: none !important; /* Remove hover overlay on mobile to save space/performance */ } } /* ===== GLOBAL IMAGE FIX FOR ALL SHOP PAGES ===== */ /* Make images fill entire container with zoom effect */ .product-card-modern .product-image-container img, .product-card-modern img.product-image { object-fit: cover !important; object-position: center !important; } /* Base product card with PERFECTLY EVEN heights and fixed sections */ /* ===== CONSOLIDATED Product Card Styles ===== */ /* All product cards should be uniform and aligned */ .product-card-modern { background: #fff5f5; /* Light Maroon Theme */ border-radius: 12px; padding: 0; overflow: hidden; border: 1px solid rgba(128, 0, 0, 0.1); box-shadow: 0 2px 12px rgba(0,0,0,0.05); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease; display: flex; flex-direction: column; /* Vertical: image top, content bottom */ height: 100%; /* Stretch to fill grid cell (uniform height per row) */ position: relative; will-change: transform; /* Optimize for animations */ } .product-card-modern:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(128,0,0,0.2); border-color: rgba(128, 0, 0, 0.2); } .product-left-col { width: 100%; min-width: 0; display: flex; flex-direction: column; border-bottom: 1px solid rgba(128,0,0,0.08); background: linear-gradient(180deg, #fff9f9 0%, #fff0f0 100%); /* Light Maroon Gradient */ position: relative; flex-shrink: 0; } .product-image-container { width: 100%; height: 300px; /* Larger height for bigger images */ min-width: auto; max-width: none; border-bottom: none; background: #f8f8f8; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 0; /* No padding for full zoom */ } .size-selection { padding: 10px; border-top: 1px solid rgba(0,0,0,0.05); background: rgba(255,255,255,0.5); margin-bottom: 0; flex-shrink: 0; } .size-dropdown { width: 100%; padding: 6px 8px; font-size: 0.75rem; } .product-image { width: 100%; height: 100%; object-fit: cover; /* Fill entire space, crop if needed */ object-position: center; display: block; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); padding: 0; /* No padding for full zoom */ } /* Ensure images don't overflow or distort on hover */ .product-card-modern:hover .product-image { transform: scale(1.08); } /* Floating price tag on image for immediate visibility */ .price-tag { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,0.97); color: #800000; font-weight: 800; padding: 8px 14px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,0.15); font-size: 0.95rem; backdrop-filter: blur(8px); z-index: 3; } /* Ribbon-style badge */ .product-badge { position: absolute; top: 10px; left: -30px; transform: rotate(-25deg); transform-origin: left center; background: linear-gradient(135deg, #ffd700, #ffdd57); color: #5a2b00; padding: 5px 60px; font-weight: 800; font-size: 0.7rem; box-shadow: 0 4px 14px rgba(0,0,0,0.12); z-index: 4; } /* Move quick view to center of image on hover */ .product-overlay { background: linear-gradient(180deg, rgba(128,0,0,0.0), rgba(128,0,0,0.7)); display: flex; align-items: center; justify-content: center; } .product-overlay .quick-view-btn { padding: 10px 20px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; transition: all 0.3s ease; } .product-info { padding: 18px 20px 20px 20px; display: flex; flex-direction: column; flex: 1; overflow: visible; justify-content: flex-start; gap: 8px; min-width: 0; /* Prevent flex items from overflowing */ } .product-category { color: #999; font-size: 0.7rem; margin-bottom: 4px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.8px; flex-shrink: 0; } .product-title { font-size: 1.1rem; color: #1a1a1a; font-weight: 700; line-height: 1.3; margin-bottom: 6px; flex-shrink: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-description { font-size: 0.85rem; color: #777; display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; margin-bottom: 8px; line-height: 1.5; flex-shrink: 0; font-weight: 400; text-overflow: ellipsis; height: auto; /* Allow height to adjust */ min-height: 2.55rem; /* Ensure at least 2 lines */ } /* Expand description if no variants are present */ .product-card-modern.no-variants .product-description { -webkit-line-clamp: 8 !important; /* Show more lines */ line-clamp: 8 !important; flex-grow: 1; } .product-price { font-size: 1.15rem; color: #660000; font-weight: 800; margin-bottom: 0; flex-shrink: 0; } /* Sale Pricing Styles */ .price-container { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; flex-shrink: 0; order: 10; /* Move price above size selection */ margin-top: auto; } /* Size selection for variant products */ .size-selection { margin-bottom: 8px; flex-shrink: 0; order: 11; /* Move size selection below price */ margin-top: 0; padding: 0; border: none; background: transparent; width: 100%; } .size-label { font-size: 0.7rem; color: #666; margin-bottom: 4px; display: block; } .size-dropdown-container { position: relative; width: 100%; } .size-dropdown { width: 100%; padding: 8px 10px; font-size: 0.85rem; border: 1px solid #ddd; border-radius: 6px; background: #fff; color: #333; appearance: none; -webkit-appearance: none; cursor: pointer; } .dropdown-arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 0.7rem; color: #666; pointer-events: none; } .custom-option-container { order: 12; } .product-actions { display: flex; gap: 10px; align-items: center; flex-wrap: nowrap; margin-top: 0; padding-top: 0; flex-shrink: 0; order: 20; /* Ensure actions are always last */ } .quantity-selector { width: 90px; height: 36px; flex-shrink: 0; display: flex; align-items: center; background: #f8f8f8; border-radius: 6px; border: 1px solid #e0e0e0; } .add-to-cart-btn { flex: 1; height: 36px; font-size: 0.85rem; border-radius: 6px; font-weight: 600; } /* Ensure the product info container places actions at the bottom */ /* Actions are now directly inside product-info with margin-top: auto */ /* Responsive: adjust vertical card layout for smaller screens */ @media (max-width: 1200px) { .product-card-modern { height: 100%; } .product-image-container { height: 280px; padding: 0; } } @media (max-width: 900px) { .product-card-modern { height: 100%; } .product-image-container { height: 260px; padding: 0; } } @media (max-width: 680px) { .product-card-modern { height: 100%; } .product-image-container { height: 240px; padding: 0; } .product-title { font-size: 0.95rem; line-height: 1.25; } .product-price { font-size: 1rem; } .product-description { font-size: 0.8rem; -webkit-line-clamp: 2; line-clamp: 2; min-height: 2.4rem; } .add-to-cart-btn { flex: 1; height: 34px; font-size: 0.8rem; } .quantity-selector { height: 34px; width: 80px; } .product-info { padding: 14px 16px; gap: 6px; } .size-dropdown { padding: 6px 26px 6px 10px; font-size: 0.8rem; } } @media (max-width: 480px) { /* Compact Mobile Grid Optimization */ .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; padding: 5px !important; } .product-image-container { height: 140px !important; /* Compact Image Height */ padding: 0 !important; } .product-info { padding: 10px !important; } .product-title { font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 4px !important; height: 2.4em; /* Limit to 2 lines visual height */ overflow: hidden; } .product-description { display: none !important; /* Hide description to save vertical space */ } .product-price { font-size: 1rem !important; margin-bottom: 6px !important; } /* Compact Actions */ .product-actions { gap: 4px !important; } .add-to-cart-btn { font-size: 0.75rem !important; height: 32px !important; padding: 0 !important; } .quantity-selector { height: 32px !important; width: 60px !important; } .quantity-selector input { width: 20px !important; font-size: 0.8rem !important; padding: 0 !important; } .size-dropdown { padding: 4px 6px !important; font-size: 0.75rem !important; height: 28px !important; } /* Ensure Quick View is accessible if not using mobile-first.css styles */ .mobile-quick-view-btn { bottom: 5px !important; padding: 6px 12px !important; font-size: 0.75rem !important; } } /* has-sizes class no longer needed - all cards use same fixed height */ .product-card-modern:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(128, 0, 0, 0.1); border-color: rgba(128, 0, 0, 0.12); } .product-badge { position: absolute; top: 10px; left: 10px; background: linear-gradient(135deg, #800000, #660000); color: white; padding: 4px 10px; border-radius: 12px; font-size: 0.65rem; font-weight: 700; z-index: 2; box-shadow: 0 3px 9px rgba(0,0,0,0.15); } .product-type-tag { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.7rem; font-weight: 700; margin: 4px 0 8px 0; width: fit-content; text-transform: uppercase; letter-spacing: 0.5px; } .product-type-tag.snare { background-color: #e3f2fd; color: #0d47a1; border: 1px solid #bbdefb; } .product-type-tag.tenor { background-color: #fce4ec; color: #880e4f; border: 1px solid #f8bbd0; } .product-type-tag.glockenspiel-lyre { background-color: #fff9c4; color: #f57f17; border: 1px solid #fff176; } /* FIXED IMAGE HEIGHT - Consistent across all cards */ /* Removed conflicting .product-image-container rule */ /* .product-image rule removed as it is defined earlier */ .product-card-modern:hover .product-image { transform: scale(1.05); } .product-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(128, 0, 0, 0.92), rgba(160, 0, 0, 0.85)); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; z-index: 10; /* Ensure it sits above the image */ border-radius: 0; /* Ensure it doesn't overflow rounded corners */ } .product-card-modern:hover .product-overlay { opacity: 1; } .quick-view-btn { background: rgba(255, 255, 255, 0.9); color: #660000; border: none; width: 50px; height: 50px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; transition: all 0.3s ease; z-index: 11; /* Ensure button is clickable */ box-shadow: 0 4px 12px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; } .quick-view-btn:hover { background: #660000; color: white; transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,0,0,0.3); } /* FIXED CONTENT AREA - Consistent spacing and growth */ .product-info { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; gap: 10px; min-height: 160px; } .product-category { color: #666; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0; font-weight: 700; flex-shrink: 0; } /* Custom Name Tag Styles */ .product-name-tag { display: inline-block; padding: 3px 8px; /* More concise padding */ border-radius: 3px; font-size: 0.65rem; /* Slightly smaller font */ font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; /* Better spacing */ color: white; box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Softer shadow */ align-self: flex-start; /* Ensure alignment if in flex container */ line-height: 1.2; } /* Removed distracting animation for cleaner look */ .product-title { font-family: 'Mokoto', sans-serif; font-size: 1.05rem; color: #2d1b1b; /* Warmer dark tone */ margin-bottom: 0; line-height: 1.3; min-height: 2.2rem; display: flex; align-items: center; flex-shrink: 0; } /* Removed conflicting product-description style */ .product-price { font-size: 1.25rem; font-weight: bold; color: #b30000; /* Slightly more vibrant maroon */ margin-bottom: 0; min-height: 1.6rem; display: flex; align-items: center; flex-shrink: 0; text-shadow: 0 1px 1px rgba(0,0,0,0.05); } /* --- MODERN DROPDOWN STYLES --- */ .size-dropdown-container { position: relative; margin-bottom: 14px; flex-shrink: 0; } .size-dropdown { width: 100%; padding: 9px 34px 9px 14px; border: 2px solid #e9ecef; border-radius: 9px; background: white; font-size: 0.82rem; font-weight: 600; color: #333; cursor: pointer; appearance: none; transition: all 0.3s ease; min-height: 38px; } .size-dropdown:focus { outline: none; border-color: #660000; box-shadow: 0 0 0 2px rgba(128, 0, 0, 0.12); } .size-dropdown:hover { border-color: #660000; } .dropdown-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #666; pointer-events: none; font-size: 0.85rem; transition: transform 0.3s ease; } .size-dropdown:focus + .dropdown-arrow { transform: translateY(-50%) rotate(180deg); } /* Remove old size button styles */ .size-buttons-container, .size-buttons-grid, .size-btn { display: none; } /* Update size selection area for dropdowns */ .size-selection { margin-bottom: 8px; /* Consistent spacing */ margin-top: 8px; padding: 12px; background: #f8f9fa; border-radius: 10px; border: 1px solid #e9ecef; flex-shrink: 0; } .selected-size-display { display: flex; justify-content: space-between; align-items: center; padding: 8px 0 0 0; border-top: 1px solid #e9ecef; margin-top: 8px; flex-shrink: 0; } .selected-size-text { font-size: 0.82rem; color: #333; font-weight: 700; } .selected-price { font-size: 1.1rem; font-weight: bold; color: #800000; } /* Product actions styles - consolidated */ .product-actions { display: flex; gap: 10px; align-items: center; flex-wrap: nowrap; justify-content: space-between; width: 100%; min-height: 40px; margin-top: auto !important; } .quantity-selector { display: flex; align-items: center; background: #f8f9fa; border-radius: 10px; padding: 5px; flex-shrink: 0; width: 100px; height: 38px; border: 1px solid #e9ecef; } .quantity-btn { background: none; border: none; width: 32px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; color: #660000; font-size: 0.85rem; flex-shrink: 0; padding: 0 2px; } .quantity-btn:hover { background: #e9ecef; transform: scale(1.05); } .quantity-input { width: 36px; text-align: center; border: none; background: none; font-weight: 700; padding: 0; -moz-appearance: textfield; appearance: textfield; flex-shrink: 0; font-size: 0.85rem; height: 100%; color: #333; } .quantity-input::-webkit-outer-spin-button, .quantity-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* PERFECTLY ALIGNED ADD TO CART BUTTONS */ .add-to-cart-btn { background: linear-gradient(135deg, #660000, #800000); color: white; border: none; padding: 12px 18px; border-radius: 10px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; flex: 1; min-width: 140px; max-width: 200px; height: 46px; font-size: 0.9rem; box-shadow: 0 4px 15px rgba(128, 0, 0, 0.2); flex-shrink: 0; } .add-to-cart-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(128, 0, 0, 0.36); } .add-to-cart-btn.loading { opacity: 0.7; cursor: not-allowed; } /* Enhanced Filters */ .filters-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding: 10px 12px; background: #fff2f2; /* Light maroon/pinkish background */ border-radius: 14px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); border: 1px solid rgba(128, 0, 0, 0.1); } .search-box { position: relative; flex: 1; max-width: 400px; } .search-input { width: 100%; padding: 10px 34px 10px 18px; border: 2px solid #e9ecef; border-radius: 22px; font-size: 0.85rem; transition: border-color 0.3s ease; } .search-input:focus { outline: none; border-color: #660000; box-shadow: 0 0 0 2px rgba(128, 0, 0, 0.1); } .search-icon { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: #666; font-size: 0.85rem; } .sort-select { padding: 10px 16px; border: 2px solid #e9ecef; border-radius: 9px; background: white; cursor: pointer; min-width: 190px; font-size: 0.82rem; font-weight: 600; transition: border-color 0.3s ease; } .sort-select:focus { outline: none; border-color: #660000; } /* Modern Sidebar - Extended width for better visibility */ .sidebar-filters-modern { background: #fff2f2; /* Light maroon/pinkish background */ padding: 24px; border-radius: 14px; box-shadow: 0 7px 24px rgba(0,0,0,0.1); border: 1px solid rgba(128, 0, 0, 0.1); position: sticky; top: 84px; height: fit-content; max-height: calc(100vh - 130px); overflow-y: auto; grid-row: 1 / span 2; } .filter-section { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #f0f0f0; } .filter-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .filter-title { font-family: 'Mokoto', sans-serif; font-size: 0.98rem; color: #660000; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .category-list { list-style: none; } .category-item { margin-bottom: 6px; } .category-link { display: flex; align-items: center; justify-content: space-between; padding: 7px 14px; color: #444; text-decoration: none; border-radius: 8px; transition: all 0.3s ease; font-weight: 600; font-size: 0.82rem; } .category-link:hover { background: #f8f9fa; color: #660000; transform: translateX(3px); } .category-link.active { background: linear-gradient(135deg, #660000, #800000); color: white; box-shadow: 0 4px 16px rgba(128, 0, 0, 0.3); } .category-count { background: #e9ecef; padding: 2px 7px; border-radius: 14px; font-size: 0.7rem; color: #666; font-weight: 600; } .category-link.active .category-count { background: rgba(255,255,255,0.3); color: white; } /* Price Range */ .price-range-values { display: flex; justify-content: space-between; margin-top: 8px; color: #666; font-size: 0.82rem; font-weight: 600; } /* Loading Animation */ .loading-products { display: flex; justify-content: center; align-items: center; padding: 40px 16px; } .loading-spinner { width: 34px; height: 34px; border: 4px solid #f3f3f3; border-top: 4px solid #660000; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* --- PREMIUM CART SIDEBAR STYLES --- */ /* Toggle Button */ .cart-toggle-btn { position: fixed; top: 100px; right: 30px; background: #fff; color: #660000; width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 10px 30px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10500; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease; border: none !important; } .cart-toggle-btn:hover { transform: scale(1.1); box-shadow: 0 15px 35px rgba(0,0,0,0.2); } .cart-toggle-btn i { font-size: 24px !important; } .cart-badge { position: absolute; top: 0; right: 0; background: #660000; color: #fff; font-size: 11px; font-weight: 700; height: 20px; width: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; } /* Sidebar Container */ .cart-sidebar { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: 450px !important; max-width: 100vw; height: 100% !important; background: #fff !important; box-shadow: -10px 0 40px rgba(0,0,0,0.1) !important; z-index: 12000 !important; transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1) !important; display: flex !important; flex-direction: column !important; border-left: none; } .cart-sidebar.active { transform: translateX(0) !important; } /* Header */ .cart-sidebar-header { padding: 35px 40px; /* Increased padding */ background: #fff; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f5f5f5; flex-shrink: 0; } .cart-sidebar-header h3 { font-family: 'Mokoto', sans-serif; /* Brand font */ font-size: 1.2rem; color: #1a1a1a; margin: 0; letter-spacing: 1px; text-transform: uppercase; } .close-sidebar { background: transparent; border: none; color: #1a1a1a; font-size: 1.5rem; cursor: pointer; transition: transform 0.3s ease; padding: 5px; display: flex; align-items: center; justify-content: center; } .close-sidebar:hover { transform: rotate(90deg); color: #660000; } /* Content Area */ .cart-sidebar-content { flex: 1; overflow-y: auto; padding: 0; background: #fff; } /* Empty State */ .empty-cart-message { padding: 60px 40px; /* Increased padding */ text-align: center; color: #999; } .empty-cart-message i { font-size: 3rem; margin-bottom: 20px; color: #eee; } .empty-cart-message h3 { color: #333; font-size: 1.2rem; margin-bottom: 10px; } /* Cart Item */ .cart-sidebar-item { display: flex; padding: 30px 40px; /* Increased padding */ border-bottom: 1px solid #f5f5f5; gap: 25px; /* Increased gap */ transition: background-color 0.2s ease; align-items: flex-start; } .cart-sidebar-item:hover { background-color: #fafafa; } .cart-sidebar-item-image { width: 90px; height: 90px; flex-shrink: 0; background: #f9f9f9; border-radius: 4px; overflow: hidden; } .cart-sidebar-item-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .cart-sidebar-item:hover .cart-sidebar-item-image img { transform: scale(1.05); } .cart-sidebar-item-info { flex: 1; display: flex; flex-direction: column; gap: 5px; } .cart-sidebar-item-info h4 { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 600; color: #1a1a1a; margin: 0; line-height: 1.4; } .cart-sidebar-item-info p { font-size: 0.9rem; color: #666; margin: 0; } .cart-sidebar-item-info .item-subtotal { font-weight: 600; color: #660000; margin-top: 4px; font-size: 0.95rem; } /* Actions (Quantity & Remove) */ .cart-sidebar-item-actions { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; height: 90px; /* Match image height */ } .remove-sidebar-item { background: transparent; border: none; color: #999; cursor: pointer; font-size: 0.9rem; padding: 5px; transition: color 0.2s ease; } .remove-sidebar-item:hover { color: #d32f2f; } .quantity-selector-cart { display: flex; align-items: center; border: 1px solid #e0e0e0; border-radius: 4px; height: 32px; overflow: hidden; } .quantity-btn-cart { width: 30px; height: 100%; background: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #333; font-size: 0.8rem; transition: background 0.2s; } .quantity-btn-cart:hover { background: #f5f5f5; } .cart-sidebar-item-quantity { width: 34px; text-align: center; border: none; border-left: 1px solid #f0f0f0; border-right: 1px solid #f0f0f0; height: 100%; font-size: 0.9rem; font-weight: 600; color: #333; padding: 0; background: #fff; } /* Footer */ .cart-sidebar-footer { padding: 35px 40px; /* Increased padding */ background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; } .cart-sidebar-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-family: 'Mokoto', sans-serif; } .cart-sidebar-total span:first-child { font-size: 1rem; color: #1a1a1a; } .cart-sidebar-total span:last-child { font-size: 1.4rem; color: #660000; } .checkout-btn-sidebar, .shop-now-btn-sidebar { display: block; width: 100%; padding: 16px; background: #1a1a1a; color: #fff; text-align: center; text-decoration: none; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; border: none; border-radius: 4px; transition: all 0.3s ease; } .checkout-btn-sidebar:hover, .shop-now-btn-sidebar:hover { background: #660000; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(128, 0, 0, 0.2); } /* Overlay */ .sidebar-overlay { background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); } /* Responsive */ @media (max-width: 480px) { .cart-sidebar { width: 100% !important; } .cart-sidebar-item { padding: 20px; } .cart-sidebar-item-image { width: 70px; height: 70px; } .cart-sidebar-item-actions { height: 70px; } } /* Messages Container */ #message-container { position: fixed; top: 12px; right: 12px; z-index: 10000; max-width: 300px; } .message { padding: 10px 16px; margin-bottom: 8px; border-radius: 8px; font-weight: 600; font-size: 0.82rem; box-shadow: 0 5px 18px rgba(0,0,0,0.15); animation: slideInRight 0.4s ease; } .message.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .message.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* EXPANDED Shop Content Layout - Full Width */ .shop-content { display: block; /* Changed from grid to block for full width */ width: 100%; padding-right: 80px; /* Increased space for cart icon and chatbot */ box-sizing: border-box; } .shop-products { display: flex; flex-direction: column; gap: 24px; padding-top: 0 !important; margin-top: 0 !important; width: 100%; padding-right: 0; /* Handled by parent */ } /* --- FIXED NOTIFICATION STYLES (Bottom Left) --- */ .modal-confirmation-window { position: fixed; bottom: 80px; left: 22px; z-index: 20001; /* Higher than global modal (20000) and sidebar (12000) */ max-width: 320px; background: white; padding: 14px 18px; border-radius: 11px; box-shadow: 0 8px 35px rgba(0, 0, 0, 0.25); border-left: 5px solid #660000; transition: all 0.4s ease-out; opacity: 0; transform: translateX(-100%); } .modal-confirmation-window.show { left: 22px; opacity: 1; transform: translateX(0); } .confirmation-content { display: flex; align-items: center; gap: 12px; } #modal-icon { font-size: 1.6rem; color: #660000; } #modal-message { margin: 0; font-size: 0.9rem; color: #333; font-weight: 600; } .modal-confirmation-window.success { border-left-color: #28a745; } .modal-confirmation-window.success #modal-icon { color: #28a745; } .modal-confirmation-window.error { border-left-color: #dc3545; } .modal-confirmation-window.error #modal-icon { color: #dc3545; } /* --- CUSTOM REMOVAL MODAL DIALOG STYLES --- */ .custom-modal-dialog { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; z-index: 20002; /* Higher than toast (20001) */ } .custom-modal-dialog.active { opacity: 1; visibility: visible; } .custom-modal-dialog .modal-content { background: white; padding: 24px; border-radius: 14px; width: 90%; max-width: 420px; box-shadow: 0 18px 54px rgba(0, 0, 0, 0.5); text-align: center; position: relative; transform: translateY(-30px); transition: transform 0.4s ease-out, opacity 0.4s ease-out; border: 1px solid #ddd; opacity: 0; } .custom-modal-dialog.active .modal-content { transform: translateY(0); opacity: 1; } .custom-modal-dialog .modal-body { padding: 12px 0 20px 0; } .custom-modal-dialog .modal-icon-warning { font-family: "Font Awesome 6 Free", sans-serif !important; font-weight: 900 !important; font-size: 3rem; color: #ffc107; margin-bottom: 14px; } .custom-modal-dialog #removal-modal-title { font-size: 1.25rem; font-weight: bold; color: #333; margin: 6px 0 10px 0; } .custom-modal-dialog #removal-modal-message { color: #666; font-size: 0.9rem; line-height: 1.5; } .custom-modal-dialog .modal-actions { display: flex; justify-content: space-around; gap: 12px; margin-top: 18px; } .custom-modal-dialog .modal-actions button { padding: 10px 18px; border: none; border-radius: 9px; cursor: pointer; font-weight: 700; font-size: 0.9rem; flex-grow: 1; transition: all 0.3s ease; } .custom-modal-dialog .btn-secondary { background: #f8f9fa; color: #555; border: 2px solid #e9ecef; } .custom-modal-dialog .btn-secondary:hover { background: #e9ecef; transform: translateY(-2px); } .custom-modal-dialog .btn-danger { background: linear-gradient(135deg, #800000, #660000); color: white; box-shadow: 0 6px 20px rgba(128, 0, 0, 0.3); } .custom-modal-dialog .btn-danger:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(128, 0, 0, 0.4); } .custom-modal-dialog .close-modal-btn { position: absolute; top: 8px; right: 14px; font-size: 1.5rem; cursor: pointer; color: #aaa; line-height: 1; transition: color 0.2s; } .custom-modal-dialog .close-modal-btn:hover { color: #660000; } /* Font Awesome Icon Fix */ .fa, .fas, .fab { font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", sans-serif !important; } .quantity-btn i, .quantity-btn-cart i, .remove-sidebar-item i, .cart-toggle-btn i, .quick-view-btn i, .filter-title i { font-weight: 900 !important; } /* Responsive layout for featured products */ @media (max-width: 1440px) { .shop-main { max-width: 1400px; } .product-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } } @media (max-width: 768px) { .shop-main { margin: 0 auto 60px; padding: 20px 16px 40px; } .cart-sidebar { width: 100%; transform: translate3d(100%, 0, 0); } .cart-sidebar-header { padding: 18px 16px; } .cart-sidebar-header h3 { font-size: 1.3rem; } .cart-sidebar-content { padding: 20px 16px; gap: 12px; } .cart-sidebar-item { grid-template-columns: 70px 1fr auto; gap: 12px; padding: 12px; margin-bottom: 12px; } .cart-sidebar-item-image { width: 70px; height: 70px; } .cart-sidebar-item-info h4 { font-size: 0.9rem; margin-bottom: 4px; } .cart-sidebar-item-info p { font-size: 0.8rem; } .cart-sidebar-item-info .item-subtotal { font-size: 0.85rem; } .quantity-selector-cart { transform: scale(0.9); } .cart-sidebar-footer { padding: 16px; } .cart-sidebar-total { font-size: 1rem; padding: 12px 0 4px; } .cart-sidebar-total span:last-child { font-size: 1.2rem; } .checkout-btn-sidebar { padding: 14px; font-size: 1rem; } .cart-toggle-btn { top: 84px; right: 16px; width: 50px; height: 50px; font-size: 0.95rem; } .product-actions { flex-direction: column; gap: 10px; min-height: auto; } .quantity-selector { width: 100%; justify-content: center; padding: 8px; height: 40px; } .add-to-cart-btn { width: 100%; min-width: 100%; max-width: 100%; height: 40px; font-size: 0.9rem; } .product-title { min-height: auto; font-size: 1.05rem; line-height: 1.3; } .product-price { min-height: auto; font-size: 1.1rem; } .selected-size-display { flex-direction: column; gap: 6px; text-align: center; } .modal-confirmation-window { bottom: 70px; left: 16px; width: calc(100% - 32px); max-width: none; } .modal-confirmation-window.show { left: 16px; } .product-card-modern { min-height: auto; } .product-image-container { height: 280px; background: #f8f8f8; display: flex; align-items: center; justify-content: center; padding: 0; } } @media (max-width: 480px) { .product-card-modern { min-height: auto; } .product-card-modern.has-sizes { min-height: auto; } .product-image-container { height: 300px; background: #f8f8f8; display: flex; align-items: center; justify-content: center; padding: 0; } } .size-dropdown { padding: 8px 30px 8px 10px; font-size: 0.8rem; min-height: 36px; } .dropdown-arrow { right: 10px; } .product-info { padding: 12px; } .shop-hero { padding: 52px 10px 38px; } .shop-hero h1 { font-size: 1.8rem; } .modal-confirmation-window { bottom: 64px; left: 12px; width: calc(100% - 24px); max-width: none; } .modal-confirmation-window.show { left: 12px; } } @media (max-width: 500px) { .custom-modal-dialog .modal-actions { flex-direction: column; } .custom-modal-dialog .modal-content { padding: 20px 14px; margin: 14px; } } /* --- QUICK VIEW MODAL STYLES --- */ .modal-quick-view { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); z-index: 20005; /* Highest priority */ display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s 0.25s; /* Removed backdrop-filter for 240Hz performance */ } .modal-quick-view.active { opacity: 1; visibility: visible; transition: opacity 0.25s ease; } .quick-view-content { background: white; width: 95%; max-width: 1320px; max-height: 95vh; border-radius: 16px; position: relative; overflow: hidden; overflow-x: hidden !important; /* Force no horizontal scroll */ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); transform: translate3d(0, -30px, 0) scale(0.95); opacity: 0; transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.32, 1), opacity 0.25s ease; display: flex; flex-direction: column; will-change: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; } .modal-quick-view.active .quick-view-content { transform: translate3d(0, 0, 0) scale(1); opacity: 1; } .close-quick-view { position: absolute; top: 16px; right: 16px; background: white; border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.2s ease; color: #666; } .close-quick-view:hover { background: #f8f9fa; transform: rotate(90deg); color: #660000; } .quick-view-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; height: 100%; min-height: auto; overflow: hidden; overflow-x: hidden !important; /* Force no horizontal scroll */ } /* Left Column: Gallery */ .quick-view-gallery { background: #f8f9fa; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; overflow-y: auto; overflow-x: hidden !important; /* Force no horizontal scroll */ overscroll-behavior: contain; /* Prevent scroll chaining */ } .main-image-container { width: 100%; height: 500px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } #qv-main-image { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1)); transition: all 0.3s ease; cursor: zoom-in; } #qv-main-image.zoomed { max-width: none; max-height: none; width: 200%; height: 200%; cursor: zoom-out; object-fit: contain; transition: transform 0.1s ease-out; } #qv-main-image.zoomed.pan-mode { cursor: grab; } #qv-main-image.zoomed.pan-mode:active { cursor: grabbing; } .main-image-container.zoom-active { cursor: zoom-out; overflow: hidden; } .main-image-container.zoom-active.pan-mode { cursor: grab; } .main-image-container.zoom-active.dragging { cursor: grabbing; } .zoom-indicator { position: absolute; bottom: 15px; right: 15px; background: rgba(0, 0, 0, 0.7); color: white; padding: 8px 12px; border-radius: 6px; font-size: 12px; pointer-events: none; z-index: 5; display: flex; align-items: center; gap: 6px; } .pan-mode-btn { position: absolute; bottom: 15px; left: 15px; background: rgba(0, 0, 0, 0.7); color: white; padding: 10px 14px; border-radius: 8px; font-size: 13px; cursor: pointer; z-index: 15; display: none; align-items: center; gap: 8px; border: 2px solid transparent; transition: all 0.3s ease; pointer-events: auto; } .pan-mode-btn:hover { background: rgba(128, 0, 0, 0.9); transform: scale(1.05); } .pan-mode-btn.active { background: rgba(128, 0, 0, 0.9); border-color: white; } .pan-mode-btn.visible { display: flex; } .qv-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.6); border: none; color: white; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; z-index: 10; } .qv-nav-btn:hover { background: rgba(128, 0, 0, 0.9); transform: translateY(-50%) scale(1.1); } .qv-prev { left: 10px; } .qv-next { right: 10px; } .thumbnail-container { display: flex; gap: 12px; margin-top: auto; overflow-x: hidden !important; /* Completely disable horizontal scroll */ overflow-y: hidden; padding: 5px 0; scrollbar-width: none !important; /* Firefox */ -ms-overflow-style: none !important; /* IE and Edge */ overscroll-behavior: contain; /* Prevent scroll chaining */ } .thumbnail-container::-webkit-scrollbar { display: none !important; /* Chrome, Safari, Opera */ width: 0 !important; height: 0 !important; } .thumbnail { width: 60px; height: 60px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; overflow: hidden; background: white; transition: all 0.2s ease; } .thumbnail.active { border-color: #660000; transform: translateY(-2px); } .thumbnail img { width: 100%; height: 100%; object-fit: cover; } /* Right Column: Details */ .quick-view-details { padding: 30px; display: flex; flex-direction: column; overflow-y: auto; max-height: 100%; overscroll-behavior: contain; /* Prevent scroll chaining */ } .quick-view-details h3 { margin-top: -15px; } /* Ensure bullet lists display properly in quickview */ .quick-view-details ul { list-style-type: disc; margin-left: 20px; margin-bottom: 10px; } .quick-view-details ol { list-style-type: decimal; margin-left: 20px; margin-bottom: 10px; } .quick-view-details li { margin-bottom: 5px; } /* ===== QUICK VIEW MODAL MOBILE RESPONSIVENESS ===== */ @media (max-width: 768px) { .modal-quick-view { align-items: flex-start !important; padding: 5px !important; display: flex !important; } .modal-quick-view.active { display: flex !important; opacity: 1 !important; visibility: visible !important; } .quick-view-content { width: 100% !important; max-width: 100% !important; max-height: 95vh !important; border-radius: 8px !important; margin: auto 0 !important; transform: none !important; opacity: 1 !important; } .modal-quick-view.active .quick-view-content { transform: none !important; opacity: 1 !important; } .quick-view-grid { grid-template-columns: 1fr !important; gap: 0 !important; max-height: 85vh !important; overflow-y: auto !important; } .quick-view-gallery { padding: 15px !important; min-height: auto !important; max-height: 40vh !important; } .main-image-container { height: 280px !important; } #qv-thumbnail-container { gap: 6px !important; padding: 8px 0 !important; } .thumbnail { width: 50px !important; height: 50px !important; } .quick-view-details { padding: 20px 15px !important; } .qv-title { font-size: 1.4rem !important; margin-bottom: 8px !important; } .qv-price { font-size: 1.5rem !important; margin-bottom: 15px !important; } .qv-description { font-size: 1.3rem !important; max-height: 60px !important; margin-bottom: 15px !important; color: #5d4037 !important; line-height: 1.45 !important; } #qv-specifications { margin-bottom: 15px !important; } .qv-spec-tags { gap: 6px !important; } .qv-spec-tag { padding: 6px 12px !important; font-size: 0.75rem !important; border-radius: 6px !important; } .qv-options { padding: 12px !important; margin-bottom: 15px !important; } .size-dropdown { padding: 8px 12px !important; font-size: 0.9rem !important; } .qv-actions { flex-direction: column !important; gap: 10px !important; padding: 15px !important; background: transparent !important; border-radius: 0 !important; margin-top: 15px !important; } .qv-quantity-selector { width: 100% !important; justify-content: center !important; } #qv-add-to-cart-btn { width: 100% !important; padding: 14px !important; font-size: 1rem !important; min-height: 48px !important; touch-action: manipulation; } .close-quick-view { top: 10px !important; right: 10px !important; width: 36px !important; height: 36px !important; font-size: 1.2rem !important; z-index: 100 !important; touch-action: manipulation; } /* Mobile: Hide zoom controls - not great for touch */ .zoom-indicator, .pan-mode-btn { display: none !important; } /* Mobile: Make nav buttons larger for touch */ .qv-nav-btn { width: 44px !important; height: 44px !important; touch-action: manipulation; } /* Mobile: Ensure thumbnails are touch-friendly */ .thumbnail { min-width: 50px !important; min-height: 50px !important; touch-action: manipulation; } } /* ===== Header/Nav consistency (enforced) ===== */ .main-header { display: flex !important; align-items: center !important; justify-content: center !important; gap: 30px !important; height: var(--nav-height, 68px) !important; min-height: var(--nav-height, 68px) !important; padding: 12px 30px !important; background: linear-gradient(135deg, #3d0000 0%, #1a0000 100%) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.18) !important; border-radius: 0 !important; margin-top: 0 !important; padding-top: 0 !important; width: 100% !important; box-sizing: border-box !important; } .main-header .menu-toggle-btn, .main-header .logo, .main-header .navbar { margin-top: 0 !important; } .main-header .navbar-left { display: flex !important; gap: var(--nav-gap, 18px) !important; align-items: center !important; justify-content: flex-start !important; min-width: 0 !important; flex: 1 1 0 !important; flex-wrap: nowrap !important; } .main-header .navbar-right { display: flex !important; gap: var(--nav-gap, 18px) !important; align-items: center !important; justify-content: flex-end !important; flex: 1 1 0 !important; min-width: 0 !important; flex-wrap: nowrap !important; } @media (min-width: 1400px) { .main-header { gap: 40px !important; } } @media (max-width: 1200px) { .main-header { gap: 20px !important; padding: 12px 30px !important; } .navbar-left { gap: 14px !important; } } @media (max-width: 1024px) { .main-header { grid-template-columns: minmax(0, 1fr) 250px minmax(0, 1fr) !important; gap: 15px !important; padding: 12px 20px !important; } .navbar-left { gap: 12px !important; } .navbar a { font-size: 0.95rem !important; } } @media (max-width:980px){ .main-header { padding: 10px 14px !important; } } .qv-category { color: #660000; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .qv-title { font-family: 'Poppins', sans-serif; font-size: 2rem; color: #1a1a1a; margin: 0 0 12px 0; line-height: 1.2; } .qv-price { font-size: 1.8rem; font-weight: 700; color: #660000; margin-bottom: 24px; } .qv-description { color: #5d4037 !important; line-height: 1.45 !important; margin-bottom: 24px !important; font-size: 1.3rem !important; max-height: none !important; overflow-y: visible !important; } /* Product Details Tags Styles */ .qv-specifications { margin-bottom: 10px !important; } .qv-specifications h3 { font-size: 1.4rem !important; font-weight: 700 !important; color: #660000 !important; margin-bottom: 14px !important; } #qv-specifications-content { border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; font-size: 1.1rem !important; color: #5d4037 !important; line-height: 1.45 !important; } .qv-spec-tags { display: flex; flex-direction: column; gap: 5px; } .qv-spec-tag, .qv-specifications .qv-spec-tag, span.qv-spec-tag { background: transparent !important; color: inherit !important; padding: 0 !important; border-radius: 0 !important; font-size: inherit !important; font-weight: inherit !important; display: inline !important; white-space: normal !important; line-height: inherit !important; box-shadow: none !important; border: none !important; margin: 0 !important; } .qv-options { margin-bottom: 20px; padding: 0; background: transparent; border-radius: 0; border: none; } .qv-options:not(:empty) { padding: 15px; background: transparent; border: none; } .qv-actions { margin-top: auto; display: flex; gap: 12px; align-items: center; justify-content: flex-end; padding-top: 20px; flex-shrink: 0; } .qv-actions .add-to-cart-btn { height: 50px; font-size: 1rem; min-width: 160px; } .favorites-btn { height: 50px; width: 50px; background: #ffd700; border: 2px solid #ffed4e; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #856404; transition: all 0.2s ease; } .favorites-btn:hover { background: #ffed4e; border-color: #ffe066; color: #6c5b00; } .favorites-btn.favorited { background: #ff6b6b; border-color: #ff5252; color: #fff; } .favorites-btn.favorited:hover { background: #ff5252; } /* Cart Animation */ @keyframes cartBounce { 0% { transform: scale(1); } 25% { transform: scale(1.2); } 50% { transform: scale(0.95); } 75% { transform: scale(1.1); } 100% { transform: scale(1); } } .cart-bounce { animation: cartBounce 0.5s ease; } /* ===== MINIMALIST FILTER BAR (Siskin Style) ===== */ .filter-bar-container { display: flex; flex-direction: row; justify-content: space-between; /* Separate Search from Filters */ align-items: center; padding: 10px 20px; /* Compact padding */ margin-bottom: 30px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: #333; flex-wrap: nowrap; /* Force single line */ gap: 15px; /* Gap between Search and Filter Group */ overflow-x: auto; /* Allow horizontal scroll if screen is too narrow */ /* Floating Bar Style */ background: #ffffff; border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,0.08); width: 100%; box-sizing: border-box; border: 1px solid rgba(0,0,0,0.04); /* Make it sticky */ position: sticky; top: 0; z-index: 1000; transition: all 0.3s ease; } .filter-bar-container::-webkit-scrollbar { display: none; } /* New Group for Right Side Actions */ .filter-actions-group { display: flex; align-items: center; gap: 15px; /* Space between filter items */ flex-shrink: 0; /* Prevent shrinking */ } .filter-group { display: flex; align-items: center; gap: 8px; flex-shrink: 0; /* Prevent shrinking */ height: 40px; /* Enforce height consistency */ } /* Legacy classes removed */ .filter-left, .filter-right { display: none; } .filter-label { font-size: 0.8rem; color: #888; font-weight: 600; /* Unified weight */ text-transform: uppercase; letter-spacing: 0.5px; margin-right: 0; /* Removed extra margin */ display: flex; align-items: center; gap: 6px; /* Space between icon and text */ height: 100%; white-space: nowrap; /* Prevent text wrapping */ } /* Minimal Select Group */ /* Modern Select Group */ .minimal-select-group { position: relative; display: flex; align-items: center; background: #f8f9fa; border-radius: 8px; padding: 0 10px; border: 1px solid #eee; transition: all 0.3s ease; height: 40px; } .minimal-select-group:hover, .minimal-select-group:focus-within { border-color: #660000; box-shadow: 0 2px 8px rgba(128, 0, 0, 0.1); background: white; } .minimal-select { appearance: none; -webkit-appearance: none; background: transparent; border: none; font-size: 0.9rem; /* Slightly smaller font */ color: #333; padding: 0 30px 0 5px; cursor: pointer; font-weight: 500; min-width: 120px; /* Reduced min-width */ height: 100%; line-height: 1.2; } .minimal-select:focus { outline: none; } .select-icon { position: absolute; right: 10px; font-size: 0.75rem; color: #660000; pointer-events: none; transition: transform 0.3s ease; top: 50%; transform: translateY(-50%); } .minimal-select-group:focus-within .select-icon { transform: translateY(-50%) rotate(180deg); } /* Modern Search */ .modern-search-container { position: relative; flex: 1; /* Allow flexible width */ min-width: 180px; /* Reduced min-width */ max-width: 300px; /* Reduced max-width */ /* Removed margin-right: auto */ } .search-wrapper { display: flex; align-items: center; background: #ffffff; /* White background for better visibility */ border: 1px solid #ccc; /* Darker border */ border-radius: 30px; padding: 0 15px; /* Remove vertical padding, use height */ height: 40px; /* Fixed height to match others */ transition: all 0.3s ease; width: 100%; /* Fill container */ box-sizing: border-box; box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Default shadow */ } .search-wrapper:hover, .search-wrapper:focus-within { background: white; border-color: #660000; box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Removed width expansion to prevent layout shift */ } .search-icon { color: #666; /* Darker icon */ margin-right: 10px; font-size: 0.9rem; transition: color 0.3s; } .search-wrapper:focus-within .search-icon { color: #660000; } .modern-search-input { border: none; background: transparent; font-size: 0.95rem; color: #333; width: 100%; } .modern-search-input:focus { outline: none; } .modern-search-input::placeholder { color: #aaa; } /* Minimal Price Group */ .minimal-price-group { display: flex; align-items: center; gap: 8px; flex-shrink: 0; /* Prevent shrinking */ height: 40px; /* Enforce height consistency */ } .price-label-static { font-size: 0.8rem; /* Unified size */ color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; display: flex; /* Added flex */ align-items: center; /* Added align-items */ height: 100%; /* Added height */ gap: 6px; /* Added gap */ } .price-slider-compact { display: flex; align-items: center; gap: 8px; background: #fff; padding: 0 12px; /* Reduced padding */ border-radius: 20px; border: 1px solid #eee; box-shadow: 0 2px 5px rgba(0,0,0,0.02); height: 40px; /* Fixed height to match others */ box-sizing: border-box; } .price-slider-compact input[type=range] { width: 80px; /* Reduced width */ height: 4px; accent-color: #660000; } .price-slider-compact span { font-size: 0.9rem; font-weight: 700; color: #660000; min-width: 50px; /* Reduced min-width */ text-align: right; } /* Responsive adjustments for filter bar */ @media (max-width: 1100px) { .filter-bar-container { flex-direction: column; align-items: stretch; gap: 20px; padding: 20px; flex-wrap: nowrap; overflow-x: hidden; height: auto; position: sticky; top: 0; border-radius: 0 !important; /* Remove border radius on mobile for full width */ } /* Stack the actions group vertically on mobile */ .filter-actions-group { display: flex; flex-direction: column; width: 100%; gap: 15px; } .filter-group { flex-direction: column; align-items: stretch; width: 100%; gap: 8px; } .modern-search-container { width: 100%; max-width: none; margin: 0; } .minimal-select-group, .search-wrapper { width: 100%; } .minimal-select { width: 100%; } .price-slider-compact { width: 100%; justify-content: space-between; } .price-slider-compact input[type=range] { flex: 1; } } /* ===== MODERN VARIANT DROPDOWN STYLES ===== */ .size-selection { margin: 15px 0; } .size-label { display: block; font-size: 0.85rem; font-weight: 600; color: #555; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; } .size-dropdown-container { position: relative; width: 100%; } .size-dropdown { width: 100%; padding: 10px 15px; padding-right: 35px; /* Space for arrow */ font-size: 0.95rem; font-family: inherit; color: #333; background-color: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 8px; appearance: none; /* Remove default arrow */ -webkit-appearance: none; -moz-appearance: none; cursor: pointer; transition: all 0.2s ease; } .size-dropdown:hover { background-color: #fff; border-color: #b0b0b0; } .size-dropdown:focus { outline: none; border-color: #660000; background-color: #fff; box-shadow: 0 0 0 3px rgba(128, 0, 0, 0.1); } .dropdown-arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #660000; pointer-events: none; /* Click passes through to select */ font-size: 0.8rem; transition: transform 0.2s ease; } .size-dropdown:focus + .dropdown-arrow { transform: translateY(-50%) rotate(180deg); } /* Custom Option Checkbox Style */ .custom-option-container { margin-top: 12px; padding: 10px; background: #fff5f5; border: 1px solid #ffe0e0; border-radius: 8px; transition: background 0.2s; } .custom-option-container:hover { background: #ffe0e0; } .custom-option-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.9rem; color: #660000; font-weight: 500; margin: 0; } .custom-option-label input[type='checkbox'] { accent-color: #660000; width: 16px; height: 16px; cursor: pointer; } /* ===== STORE CAROUSEL SECTION ===== */ .store-carousel-section { background: #fff; padding: 60px 0; border-bottom: 1px solid #eee; } .carousel-header { text-align: center; margin-bottom: 40px; } .carousel-header h2 { font-family: 'Mokoto', sans-serif; font-size: 2rem; color: #333; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 12px; } .carousel-header h2 i { color: #660000; font-size: 1.8rem; } .carousel-header p { color: #666; font-size: 1.05rem; margin: 0; } .store-carousel-wrapper { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 60px; } .store-carousel { display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ padding: 10px 0; } .store-carousel::-webkit-scrollbar { display: none; /* Chrome/Safari/Opera */ } /* Store Card */ .store-card { min-width: 320px; max-width: 320px; background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: all 0.3s ease; text-decoration: none; color: inherit; display: flex; flex-direction: column; } .store-card:hover { transform: translateY(-8px); box-shadow: 0 12px 40px rgba(0,0,0,0.15); } .store-card.active-store { border: 2px solid #660000; box-shadow: 0 4px 20px rgba(128, 0, 0, 0.2); } .store-card-header { height: 180px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .store-icon { font-size: 5rem; color: rgba(255,255,255,0.9); filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2)); } .store-logo { max-width: 80%; max-height: 140px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2)); } .store-logo-placeholder { background: rgba(255,255,255,0.15); padding: 20px 30px; border-radius: 12px; border: 2px dashed rgba(255,255,255,0.4); } .store-logo-placeholder span { font-size: 1.5rem; font-weight: 700; color: white; text-transform: uppercase; letter-spacing: 1px; } .store-card-body { padding: 25px; flex: 1; display: flex; flex-direction: column; } .store-card-body h3 { font-family: 'Mokoto', sans-serif; font-size: 1.4rem; color: #333; margin: 0 0 12px 0; } .store-card-body p { color: #666; font-size: 0.95rem; line-height: 1.6; margin: 0 0 20px 0; flex: 1; } .store-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: #f8f9fa; border-radius: 20px; font-size: 0.9rem; font-weight: 600; color: #660000; border: 1px solid #e0e0e0; transition: all 0.2s; align-self: flex-start; } .store-card:hover .store-badge { background: #660000; color: white; border-color: #660000; } .current-badge { background: #660000; color: white; border-color: #660000; } .store-card.active-store:hover .current-badge { background: #800000; } /* Carousel Navigation */ .carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 45px; height: 45px; background: white; border: 1px solid #ddd; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.3s ease; color: #333; font-size: 1.2rem; } .carousel-nav:hover { background: #660000; color: white; border-color: #660000; transform: translateY(-50%) scale(1.1); } .carousel-prev { left: 0; } .carousel-next { right: 0; } /* Responsive adjustments */ @media (max-width: 1024px) { .store-carousel-wrapper { padding: 0 50px; } .store-card { min-width: 280px; max-width: 280px; } .carousel-nav { width: 40px; height: 40px; font-size: 1rem; } } @media (max-width: 768px) { .store-carousel-section { padding: 40px 0; } .carousel-header h2 { font-size: 1.6rem; } .carousel-header p { font-size: 0.95rem; } .store-carousel-wrapper { padding: 0 15px; } .carousel-nav { display: none; } .store-card { min-width: 260px; max-width: 260px; } .store-card-header { height: 150px; } .store-icon { font-size: 4rem; } .store-card-body h3 { font-size: 1.2rem; } } @media (max-width: 480px) { .store-carousel-section { padding: 30px 0; } .carousel-header h2 { font-size: 1.4rem; flex-direction: column; gap: 8px; } .store-card { min-width: 240px; max-width: 240px; } .store-card-header { height: 130px; } .store-icon { font-size: 3.5rem; } .store-logo { max-height: 100px; } .store-card-body { padding: 20px; } .store-card-body h3 { font-size: 1.1rem; } .store-card-body p { font-size: 0.85rem; } } /* Recommendations Sidebar - Modernized */ .cart-recommendations { position: fixed; top: 0; right: -420px; /* Hidden initially */ width: 400px; /* Wider */ bottom: 0; height: 100% !important; min-height: 100% !important; /* Modern Light Maroon Theme */ background: #fff5f5; z-index: 11999; /* Below cart sidebar (12000) */ transition: right 0.42s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.42s ease, transform 0.42s ease; /* Shadow and Border */ box-shadow: none; /* Remove shadow to join with cart */ border-radius: 0; border-left: 1px solid rgba(128,0,0,0.1); /* Subtle divider */ display: grid; grid-template-rows: auto 1fr; overflow: hidden; } .cart-recommendations::before { display: none; /* Remove old gradient overlay */ } .cart-recommendations.active { right: 450px; /* Positioned exactly next to the 450px sidebar */ box-shadow: -24px 0 44px rgba(53, 10, 10, 0.15); /* Add shadow to the far left */ } @media (max-width: 1200px) { .cart-recommendations { display: none; /* Hide on smaller screens to prevent overlap */ } } /* Header */ .recommendations-header { padding: 28px 24px; background: #fff5f5; /* Light Maroon Theme */ color: #660000; box-shadow: 0 4px 20px rgba(0,0,0,0.04); z-index: 2; flex-shrink: 0; position: relative; border-bottom: 1px solid rgba(128,0,0,0.1); } .recommendations-header::after { content: "Curated picks"; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); background: #660000; color: #fff; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; box-shadow: 0 4px 12px rgba(128, 0, 0, 0.2); font-weight: 700; } .recommendations-header h3 { font-size: 1.1rem; text-transform: uppercase; margin: 0; font-weight: 800; letter-spacing: 1px; text-align: center; color: #660000; text-shadow: none; } /* List Container */ .recommendations-list { flex: 1; overflow-y: auto; padding: 32px 24px 24px; display: flex; flex-direction: column; gap: 20px; background: transparent; } .recommendations-list::-webkit-scrollbar { width: 6px; } .recommendations-list::-webkit-scrollbar-thumb { background: rgba(128,0,0,0.2); border-radius: 10px; } /* Item Card */ .recommendation-item { background: #fff; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.04); transition: transform 0.3s ease, box-shadow 0.3s ease; } .recommendation-item:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(128,0,0,0.1); background: #fff; } .recommendation-image { width: 100%; height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; background: transparent; border-radius: 0; padding: 0; border: none; } .recommendation-image a { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; } .recommendation-image img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,0.1)); } .recommendation-info { width: 100%; } .recommendation-info h4 { font-size: 1rem; color: #222; margin: 0 0 8px; font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .recommendation-price { font-size: 1.1rem; color: #660000; font-weight: 800; margin-bottom: 16px; } /* Button */ .btn-add-recommendation { background: #660000; color: white; border: none; padding: 12px 0; width: 100%; border-radius: 10px; text-transform: uppercase; font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(128, 0, 0, 0.2); letter-spacing: 0.5px; } .btn-add-recommendation:hover { background: #600000; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(128, 0, 0, 0.3); } .btn-add-recommendation:active { transform: translateY(0); } /* Fade-in animation for product cards */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* ===== SCATTERED TO ALIGNED SCROLL ANIMATION ===== */ /* Initial scattered state for product cards */ .product-grid .product-card-modern { opacity: 0; transform: translate(var(--product-scatter-x, 0), var(--product-scatter-y, 0)) rotate(var(--product-scatter-rotate, 0deg)) scale(0.85); animation: none; /* Disable the old fadeInUp animation */ } /* Define scattered positions for product cards */ .product-grid .product-card-modern:nth-child(4n+1) { --product-scatter-x: -80px; --product-scatter-y: -50px; --product-scatter-rotate: -8deg; } .product-grid .product-card-modern:nth-child(4n+2) { --product-scatter-x: 60px; --product-scatter-y: 70px; --product-scatter-rotate: 6deg; } .product-grid .product-card-modern:nth-child(4n+3) { --product-scatter-x: -50px; --product-scatter-y: 60px; --product-scatter-rotate: 7deg; } .product-grid .product-card-modern:nth-child(4n+4) { --product-scatter-x: 70px; --product-scatter-y: -40px; --product-scatter-rotate: -6deg; } /* Animated state when grid is visible */ .product-grid.animate-in .product-card-modern { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Staggered animation delays for scattered cards */ .product-grid.animate-in .product-card-modern:nth-child(1) { transition-delay: 0.05s; } .product-grid.animate-in .product-card-modern:nth-child(2) { transition-delay: 0.1s; } .product-grid.animate-in .product-card-modern:nth-child(3) { transition-delay: 0.15s; } .product-grid.animate-in .product-card-modern:nth-child(4) { transition-delay: 0.2s; } .product-grid.animate-in .product-card-modern:nth-child(5) { transition-delay: 0.25s; } .product-grid.animate-in .product-card-modern:nth-child(6) { transition-delay: 0.3s; } .product-grid.animate-in .product-card-modern:nth-child(7) { transition-delay: 0.35s; } .product-grid.animate-in .product-card-modern:nth-child(8) { transition-delay: 0.4s; } .product-grid.animate-in .product-card-modern:nth-child(n+9) { transition-delay: 0.45s; } /* Preserve hover state after animation */ .product-grid.animate-in .product-card-modern:hover { transform: translateY(-8px) scale(1); transition: transform 0.3s ease, box-shadow 0.3s ease; transition-delay: 0s; } /* Mobile adjustments */ @media (max-width: 900px) { .cart-recommendations { display: none; /* Hide on smaller screens */ } } /* Ensure italic formatting displays correctly */ .quick-view-details em, .quick-view-modal em { font-style: italic !important; } /* ===================================================== ENHANCED MOBILE-FIRST RESPONSIVE STYLES FOR SHOP ===================================================== */ @media (max-width: 768px) { /* Header Mobile */ .main-header { flex-wrap: wrap !important; padding: 10px 12px !important; gap: 10px !important; height: auto !important; min-height: auto !important; } .main-header .navbar-left, .main-header .navbar-right { display: none !important; } .main-header .logo { order: 1; margin: 0 auto; } .main-header .logo img { height: 36px !important; width: auto !important; } /* Shop Hero Mobile */ .shop-hero { min-height: auto; padding: 60px 16px 40px; } .shop-hero-content { padding: 0; } .hero-logo-img { max-width: 280px !important; } .stats-container { gap: 30px !important; } .stat-item { min-width: 80px; } .stat-number { font-size: 1.5rem !important; } .stat-label { font-size: 0.75rem !important; } /* Search Bar Mobile */ .search-bar-top { flex-direction: column; gap: 12px; padding: 12px; } .shop-logos { display: none; } .search-wrapper { width: 100%; } .modern-search-input { font-size: 16px !important; /* Prevents iOS zoom */ padding: 14px 16px 14px 40px; } .sort-group-top { width: 100%; justify-content: center; } .minimal-select { font-size: 14px; padding: 10px 12px; } /* Category Filters Mobile */ .category-sidebar { position: fixed; top: 0; left: -100%; width: 80%; max-width: 280px; height: 100%; z-index: 1000; background: #fff; box-shadow: 2px 0 20px rgba(0,0,0,0.15); transition: left 0.3s ease; overflow-y: auto; padding: 20px; } .category-sidebar.active { left: 0; } .category-filter-btn { display: flex !important; align-items: center; justify-content: center; gap: 8px; background: #800000; color: #fff; padding: 12px 20px; border-radius: 25px; border: none; font-weight: 600; cursor: pointer; margin: 12px auto; } /* Product Grid Mobile */ .shop-main .container { padding: 0 8px; } .product-grid-container { width: 100%; } .products-grid-modern { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; padding: 0 4px; } .product-card-modern { border-radius: 12px; } .card-badge-modern { font-size: 9px; padding: 4px 8px; top: 8px; right: 8px; } .card-image-modern { height: 130px; } .card-image-modern img { object-fit: cover; } .card-body-modern { padding: 10px; } .card-category-modern { font-size: 9px; margin-bottom: 4px; } .card-title-modern { font-size: 0.8rem; margin-bottom: 6px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-desc-modern { display: none; } .card-rating-modern { font-size: 9px; margin-bottom: 8px; } .card-rating-modern i { font-size: 9px; } .card-footer-modern { flex-direction: column; gap: 8px; } .card-price-modern { font-size: 0.95rem; text-align: center; width: 100%; } .card-original-price { font-size: 0.75rem; } .card-btn-modern { width: 100%; padding: 10px 12px; font-size: 10px; justify-content: center; border-radius: 8px; } .card-btn-modern i { font-size: 12px; } /* Quick View Button Hidden on Mobile Touch */ .card-overlay-modern { opacity: 0 !important; pointer-events: none !important; } /* Quick View Modal Mobile */ .quick-view-modal { padding: 10px; } .quick-view-modal .quick-view-content { flex-direction: column; max-width: 95%; max-height: 90vh; overflow-y: auto; border-radius: 16px; } .quick-view-gallery { width: 100%; height: 250px; } .quick-view-gallery .gallery-main img { max-height: 200px; } .quick-view-gallery .gallery-nav { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 8px; } .quick-view-gallery .gallery-nav button { min-width: 50px; height: 50px; } .quick-view-details { width: 100%; padding: 20px; } .qv-title { font-size: 1.3rem; } .qv-description { font-size: 0.9rem; } .qv-price { font-size: 1.4rem; } .qv-actions { flex-wrap: wrap; gap: 10px; } .qv-actions .quantity-selector { width: 100%; justify-content: center; } .qv-actions .favorites-btn { width: 50px; } .qv-actions .add-to-cart-btn { flex: 1; min-width: 150px; } /* Cart Sidebar Mobile */ .cart-sidebar { width: 100% !important; max-width: 100% !important; } .cart-sidebar-header { padding: 16px; } .cart-sidebar-header h3 { font-size: 1.1rem; } .cart-sidebar-content { padding: 12px; } .cart-sidebar-item { flex-wrap: wrap; gap: 10px; } .cart-sidebar-item-image { width: 70px; height: 70px; } .cart-sidebar-item-info { flex: 1; min-width: 120px; } .cart-sidebar-item-info h4 { font-size: 0.85rem; line-height: 1.3; } .cart-sidebar-item-actions { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px solid #f0f0f0; } .quantity-selector-cart { gap: 4px; } .quantity-btn-cart { width: 32px; height: 32px; } .cart-sidebar-item-quantity { width: 40px; } .cart-sidebar-footer { padding: 16px; } .checkout-btn-sidebar { padding: 16px; font-size: 0.95rem; } /* Footer Mobile */ .main-footer .footer-content { flex-direction: column; gap: 30px; } .main-footer .footer-column { text-align: center; width: 100%; } .main-footer .social-links { justify-content: center; } } /* Very Small Mobile (360px and below) */ @media (max-width: 360px) { .hero-logo-img { max-width: 220px !important; } .stat-item { min-width: 60px; } .stat-number { font-size: 1.2rem !important; } .products-grid-modern { grid-template-columns: 1fr !important; } .card-image-modern { height: 180px; } .card-title-modern { font-size: 1rem; } .card-btn-modern { font-size: 12px; padding: 12px; } } /* Touch Device Enhancements */ @media (hover: none) and (pointer: coarse) { .card-btn-modern { min-height: 44px; } .quantity-btn-cart { min-width: 36px; min-height: 36px; } .checkout-btn-sidebar { min-height: 50px; } /* Disable hover effects on touch */ .product-card-modern:hover, .card-btn-modern:hover { transform: none; } /* Active state for touch feedback */ .card-btn-modern:active, .product-card-modern:active { transform: scale(0.98); opacity: 0.9; } } /* Safe Area Support */ @supports (padding: env(safe-area-inset-bottom)) { .cart-sidebar-footer { padding-bottom: calc(16px + env(safe-area-inset-bottom)); } .main-footer { padding-bottom: calc(20px + env(safe-area-inset-bottom)); } } /* Landscape Mobile */ @media (max-width: 812px) and (orientation: landscape) { .shop-hero { min-height: auto; padding: 40px 20px 30px; } .quick-view-modal .quick-view-content { flex-direction: row; max-height: 95vh; } .quick-view-gallery { width: 45%; height: auto; } .quick-view-details { width: 55%; } } /* User area styles: modern cards, icons, responsive layout */ :root{ --accent:#8b0000; --muted:#6b6b6b; --card-bg:#ffffff; --glass:rgba(255,255,255,0.85); } body{font-family: var(--ui-font, Poppins), system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;} .user-wrap{max-width:1100px;margin:36px auto;padding:18px} .orders-filter-bar { display:flex; gap:8px; align-items:center; margin:12px 0 18px } .orders-filter-bar .filter-btn { padding:8px 12px; background:#fff; border:1px solid rgba(0,0,0,0.06); border-radius:8px; cursor:pointer; font-weight:700 } .orders-filter-bar .filter-btn.active { background:linear-gradient(90deg,var(--accent),#cc4b4b); color:#fff; border-color:transparent } .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px} .card{background:var(--card-bg);border:1px solid #eee;border-radius:10px;padding:16px;box-shadow:0 6px 20px rgba(0,0,0,0.04)} .card h3{margin:0 0 8px 0;font-size:1.05rem} .meta{color:var(--muted);font-size:0.95rem} .btn{display:inline-block;padding:8px 12px;background:var(--accent);color:#fff;border-radius:8px;text-decoration:none;font-weight:600} .btn-muted{background:#f5f5f5;color:#333;border:1px solid #e6e6e6} .orders-list{display:flex;flex-direction:column;gap:12px} .orders-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px} .order-card{display:flex;align-items:center;gap:12px;justify-content:space-between} .order-left{display:flex;align-items:center;gap:12px} .order-icon{flex-shrink:0;width:56px;height:56px;border-radius:10px;background:linear-gradient(135deg,#fff,#fafafa);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--accent);border:1px solid #f0e6e6} .order-details{flex-grow:1;min-width:0} .order-title{font-weight:700;margin:0} .order-sub{color:var(--muted);font-size:0.92rem} .order-actions{display:flex;gap:8px;align-items:center} .order-badge{padding:6px 10px;border-radius:999px;background:#f7f1f1;color:var(--accent);font-weight:700} @media (max-width:680px){.order-card{flex-direction:column;align-items:flex-start}.order-actions{width:100%;display:flex;justify-content:space-between}} /* Card hover and status pills */ .order-card{transition:transform .12s ease,box-shadow .12s ease} .order-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,0.06)} .order-ribbon{position:absolute;left:12px;top:12px;z-index:1;padding:6px 10px;border-top-right-radius:8px;border-bottom-right-radius:8px;font-weight:700;font-size:0.85rem;background:var(--accent);color:#fff} .ribbon-wrap{position:relative} .status-pill{padding:6px 10px;border-radius:999px;font-weight:700;font-size:0.9rem} .status-pending{background:#fff4e5;color:#a85a00;border:1px solid #ffe6c7} .status-completed{background:#e9ffef;color:#00813a;border:1px solid #c8f5d0} .status-cancelled{background:#ffeaea;color:#9b1a1a;border:1px solid #ffd0d0} .status-processing{background:#eef6ff;color:#1a5aa8;border:1px solid #d6eaff} /* Make the order-left clickable without breaking buttons */ .order-left a.card-link{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit} .order-left a.card-link:focus{outline:2px solid rgba(0,0,0,0.06)} /* CTA button style */ .btn-cta{background:linear-gradient(90deg,var(--accent),#cc4b4b);box-shadow:0 8px 24px rgba(139,0,0,0.12);border-radius:10px;padding:10px 14px;color:#fff;font-weight:700;border:0} .btn-cta:hover{transform:translateY(-2px)} /* Action overlay on hover */ .order-actions{display:flex;gap:8px;align-items:center} .order-card .action-overlay{display:flex;flex-direction:column;gap:8px;opacity:1;transform:translateY(0);transition:none} .order-card:hover .action-overlay{opacity:1;transform:translateY(0)} /* Animations */ @keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} .card{animation:fadeInUp .22s ease both} /* Status pill color mapping */ .status-pending{background:#fff4e5;color:#a85a00;border:1px solid #ffe6c7} .status-processing{background:#eef6ff;color:#1a5aa8;border:1px solid #d6eaff} .status-completed{background:#e9ffef;color:#00813a;border:1px solid #c8f5d0} .status-cancelled{background:#ffeaea;color:#9b1a1a;border:1px solid #ffd0d0} /* View order adjustments */ .breadcrumb{color:var(--muted);font-size:0.95rem;margin-bottom:12px} .view-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px} .item-row{animation:fadeInUp .18s ease both} /* Items table */ .items-table{width:100%;border-collapse:collapse;margin-top:12px} .items-table th,.items-table td{padding:8px;border-bottom:1px solid #f0f0f0;text-align:left} .items-table th{color:var(--muted);font-weight:600} /* Account dropdown */ .account-dropdown{position:relative;display:inline-block} .account-btn{background:transparent;border:0;color:inherit;font-weight:700;cursor:pointer;padding:8px 10px;border-radius:8px} .account-btn .fa-caret-down{margin-left:8px} .account-menu{position:absolute;left:50%;top:calc(100% + 12px);min-width:220px;background:#fff;border:1px solid rgba(0,0,0,0.08);border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,0.12);padding:8px;display:none;z-index:99999 !important;transform-origin:top center;opacity:0;transform:translateX(-50%) translateY(-10px) scale(.95);transition:all .2s cubic-bezier(0.165, 0.84, 0.44, 1)} .account-menu.show{display:block;opacity:1;transform:translateX(-50%) translateY(0) scale(1)} .account-menu::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: #fff; border-left: 1px solid rgba(0,0,0,0.08); border-top: 1px solid rgba(0,0,0,0.08); } .account-menu a{display:flex;gap:12px;align-items:center;padding:12px 16px;color:#444;text-decoration:none;font-weight:500;border-radius:8px;transition:all 0.2s} .account-menu a:hover{background:#f8f9fa;color:var(--accent);transform:translateX(4px)} .account-menu i{color:var(--accent);width:18px;text-align:center} .account-menu .sep{height:1px;background:#f1f1f1;margin:6px 0} .account-btn { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 20px; padding: 12px 24px; color: #fff; font-weight: 600; transition: all 0.3s ease; cursor: pointer; line-height: 1; margin: 0; font-size: 1.05rem; } .account-btn:hover { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.4); } .account-btn i { color: #ffd700; } .account-btn .fa-caret-down { font-size: 0.8em; opacity: 0.8; color: #fff; } /* Ensure header doesn't allow horizontal overflow and sits above most UI layers */ .main-header{overflow: hidden !important; z-index:11010 !important} /* Modernized header sizing (uses global variables when available) */ .main-header { height: var(--nav-height, 68px); padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: var(--nav-gap, 18px); } /* Portal wrapper: menus moved to the document body to avoid stacking context issues */ .account-menu-portal{position:absolute;top:0;left:0;z-index:13000;pointer-events:auto} /* Ensure dropdown is positioned relative to its container for fallback cases */ .account-dropdown {position:relative} .order-icon img{width:56px;height:56px;object-fit:cover;border-radius:8px} /* Order islands / summary + items layout */ .order-grid{display:grid;grid-template-columns:320px 1fr;gap:18px;align-items:start} .order-summary{display:flex;flex-direction:column;gap:12px} .order-summary .summary-row{display:flex;justify-content:space-between;align-items:center} .order-summary .summary-row .label{color:var(--muted)} .order-summary .total-big{font-size:1.6rem;font-weight:800;color:var(--accent)} .order-progress{height:10px;background:#f0f0f0;border-radius:999px;overflow:hidden} .order-progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#cc4b4b);width:0} .order-items .item-row{display:flex;gap:12px;align-items:center;padding:12px;border-bottom:1px solid #f6f6f6} .item-thumb{width:64px;height:64px;border-radius:8px;object-fit:cover;border:1px solid #eee} .item-meta{flex:1} .item-price{min-width:120px;text-align:right;font-weight:700} /* Enhancements for My Orders Page */ /* Empty state illustration */ .card p::before { content: '\f07a'; /* Font Awesome shopping cart icon */ font-family: 'Font Awesome 5 Free'; font-weight: 900; display: block; font-size: 48px; color: var(--muted); margin-bottom: 12px; text-align: center; } /* Status pill gradient */ .status-pill { background: linear-gradient(90deg, var(--accent), #cc4b4b); color: #fff; border: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } /* Card hover effect */ .order-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08); } /* Fade-in animation for cards */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .order-card { animation: fadeIn 0.3s ease both; } /* Fix misaligned icons and overlapping order numbers */ .order-ribbon { position: absolute; left: 12px; top: 12px; z-index: 1; /* Ensure it stays above other elements */ padding: 6px 10px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; font-weight: 700; font-size: 0.85rem; background: var(--accent); margin-right: 0; /* Disable overlap effect */ } /* Ensure order-icon and details are aligned */ .order-icon { flex-shrink: 0; width: 56px; height: 56px; border-radius: 10px; background: linear-gradient(135deg, #fff, #fafafa); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--accent); border: 1px solid #f0e6e6; } .order-details { flex-grow: 1; min-width: 0; } /* Make action buttons static */ .order-card .action-overlay { display: flex; flex-direction: column; gap: 8px; opacity: 1; /* Always visible */ transform: translateY(0); /* Remove hover effect */ transition: none; /* Disable animation */ } /* Adjust card layout to prevent overlapping */ .order-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; position: relative; } /* New: Modern Wide Order Card */ .order-card-wide { background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(252,247,247,0.98)); border-radius: 14px; border: 1px solid rgba(0,0,0,0.04); box-shadow: 0 8px 30px rgba(0,0,0,0.06); overflow: hidden; padding: 0; /* style sections separately */ transition: transform 0.22s ease, box-shadow 0.22s ease; } .order-card-wide:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); } .order-card-wide .oc-header { padding: 18px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom: 1px solid rgba(0,0,0,0.03); background: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0.95)); } .order-card-wide .oc-id { font-weight:700; color:var(--muted); font-size:0.95rem; background:transparent; } .oc-id { font-weight:700; color:var(--muted); } .oc-id { cursor:pointer; color: #666; font-size: 0.95rem } /* Order ribbon for quick info (e.g., Payment method) */ .order-count-ribbon { position:absolute; right:16px; top:12px; z-index:2; padding:6px 10px; border-radius:999px; background: rgba(0,0,0,0.06); color: #333; font-weight:700; font-size:0.85rem } /* Improve action buttons */ .btn-buy-again, .btn-track { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; border:1px solid rgba(0,0,0,0.06); background:#fff } .btn-buy-again i, .btn-track i { color:var(--accent) } .order-card-wide .oc-body { padding: 16px 18px 20px 18px; display:flex; gap:18px; align-items:center } .order-card-wide .oc-meta-item .oc-value { font-weight:700; color:#222; } .order-card-wide .order-status-accent { width: 8px; height: 100%; position: absolute; left: 0; top: 0; border-right: 1px solid rgba(0,0,0,0.02); } /* Status accent colors */ .order-card-wide.status-pending .order-status-accent { background: linear-gradient(180deg,#ffd79f,#ffb74d); } .order-card-wide.status-processing .order-status-accent { background: linear-gradient(180deg,#dbefff,#90caf9); } .order-card-wide.status-shipped .order-status-accent { background: linear-gradient(180deg,#bbdefb,#64b5f6); } .order-card-wide.status-delivered .order-status-accent { background: linear-gradient(180deg,#c8e6c9,#81c784); } .order-card-wide.status-cancelled .order-status-accent { background: linear-gradient(180deg,#ffcdd2,#ef9a9a); } .order-card-wide .product-thumb { border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.04); } .order-card-wide:not(.order-card-compact) .product-thumb { margin-right: -12px; } .order-card-wide .more-items-badge { background: linear-gradient(90deg,#f0f0f0,#e9e9e9); border: 0; font-weight:700 } /* Make stepper more visible */ .order-card-wide .stepper-wrapper { max-width: 340px; } .order-card-wide .stepper-fill { background: linear-gradient(90deg, var(--accent), #cc4b4b); } /* Slight reflow for actions */ .order-card-wide .oc-actions { align-items:center; gap:10px; justify-content:flex-end } .order-card-wide .btn-primary-outline { border-color: rgba(0,0,0,0.07); border-radius: 10px; padding: 10px 16px; } /* Mobile adjustments */ /* Compact layout variant for denser order list */ .order-card-compact { padding: 12px 14px; display: grid; /* wider left column to avoid header & thumbnail overlap */ grid-template-columns: 200px 1fr auto; align-items: center; gap: 12px; } .order-card-compact .oc-header { padding: 0; border-bottom: none } .order-card-compact .oc-header { display:grid; grid-template-columns: 200px 1fr auto; gap:12px; align-items:center; padding:8px 12px } .order-card-compact .oc-meta { display:none; } .oc-meta-left { display:none } .order-card-compact .oc-meta-left { display:flex; gap:10px; flex-direction:column; align-items:flex-start; width: 200px; padding-left: 14px } .order-card-compact .oc-meta-left .oc-meta-item { display:grid; grid-template-columns: auto 1fr; gap:8px; align-items: center; width: 100% } .order-card-compact .oc-meta-left .oc-label { font-size:0.78rem; color:var(--muted); white-space:nowrap; font-weight: 600; text-align: right } .order-card-compact .oc-meta-left .oc-value { font-size:0.95rem; font-weight:700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .order-card-compact .oc-meta-item { display:flex; flex-direction:column } .order-card-compact .oc-meta-item .oc-label { font-size:0.8rem; color:var(--muted) } .order-card-compact .oc-meta-item .oc-value { font-size:0.95rem } .order-card-compact .order-ribbon { display: none } .order-card-compact .oc-body { padding: 8px 0; display:grid; grid-template-columns: auto 1fr auto; gap:12px; align-items:center } .order-card-compact .oc-products-info { max-width: 320px; display:flex; flex-direction:column } .order-card-compact .oc-status-stepper { align-items:center; min-width: 240px } .order-card-compact .status-pill { padding: 6px 12px; font-size: 0.8rem; border-radius: 999px } .order-card-compact .more-items-badge { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; padding:0; border-radius:50%; font-size:0.8rem } .order-card-compact .product-thumb-stack { display:flex; gap:8px; align-items:center } .order-card-compact .product-thumb { border-radius:10px; } .order-card-compact .oc-products-info { margin-left:8px } .order-card-compact .oc-actions { justify-content:flex-end; min-width: 100px; } .order-card-compact .order-status-accent { left:0; } /* Reduce shadow and simplify for list */ .order-card-compact { box-shadow: 0 6px 18px rgba(0,0,0,0.04); border-radius:12px } .order-card-compact .product-thumb { width:64px; height:64px; } .order-card-compact .oc-products { display:flex; align-items:center; gap:12px } .order-card-compact .oc-left { display:flex; flex-direction:column; gap:8px; } .order-card-compact .oc-left { width: 200px; } .order-card-compact .oc-meta-left .oc-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px } .order-card-compact .stepper-wrapper { max-width:230px } @media (max-width: 768px) { .order-card-wide .oc-body { flex-direction: column; align-items:flex-start } .order-card-wide .oc-meta { flex-wrap:wrap; } .order-card-wide .stepper-wrapper { width: 100%; } } @media (max-width: 680px) { .order-card-compact { grid-template-columns: 60px 1fr; grid-auto-rows: auto } .order-card-compact .oc-status-stepper { order: 3; width: 100%; margin-top: 8px } .order-card-compact .oc-actions { order: 4; width: 100%; display:flex; justify-content:flex-start; gap:8px } .order-card-compact .oc-products-info .product-name { max-width: 220px } .action-dropdown-menu { min-width: 140px; } } /* Hide duplicate header meta on compact, show oc-meta-left only on wide */ .order-card-compact .oc-meta-left { display:block } .order-card-compact .oc-header .oc-meta { display:none } /* Collapsible details */ .order-card-wide .order-details-panel { display: block; max-height: 0; opacity: 0; overflow: hidden; padding-top: 0; border-top: 1px dashed rgba(0,0,0,0.04); transition: max-height 0.35s ease, opacity 0.28s ease; } .order-card-wide.expanded .order-details-panel { display: block; max-height: 600px; opacity: 1; padding-top: 14px; } /* Add button group and UX touchups */ .order-action-group { display:flex; gap:10px; align-items:center } .order-action-group .btn { padding:8px 10px; border-radius:10px; font-weight:700 } .order-action-group .btn-outline { background:transparent; border:1px solid rgba(0,0,0,0.06); color:#333 } .btn-icon { display:inline-flex; align-items:center; gap:8px } /* Collapsible toggle */ .expand-toggle { background: transparent; border: 0; cursor: pointer; color: var(--muted); font-weight:700; display:flex; gap:8px; align-items:center } .expand-toggle:focus { outline: 3px solid rgba(128,0,0,0.12); border-radius:6px } .order-card-wide.expanded .expand-toggle i{ transform: rotate(180deg); } /* Action Dropdown */ .action-dropdown { position: relative; } .action-dropdown-btn { background: transparent; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; padding: 8px; cursor: pointer; color: #666; transition: all 0.2s; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; } .action-dropdown-btn:hover { background: #f5f5f5; color: #333; border-color: rgba(0,0,0,0.2); } .action-dropdown-menu { position: absolute; right: 0; top: 100%; background: #fff; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); min-width: 160px; z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s ease; padding: 4px 0; } .action-dropdown.open .action-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; color: #333; text-decoration: none; font-weight: 500; transition: background 0.2s; border: none; background: transparent; width: 100%; text-align: left; cursor: pointer; } .dropdown-item:hover { background: #f8f9fa; color: var(--accent); } .dropdown-item i { width: 16px; text-align: center; } /* Improved progress bar with labels */ .stepper-wrapper { width: 320px; max-width: 100%; } .stepper-legend { font-size: 0.85rem; color:#777; padding-top:8px } /* Line item table */ .order-items-table { width:100%; border-collapse:collapse; margin-top:10px } .order-items-table th, .order-items-table td { padding:10px 8px; font-size:0.95rem; border-bottom:1px solid #f3f3f3; text-align:left } .order-items-table th { color:var(--muted); font-weight:700 } .order-items-thumb { width:64px; height:64px; border-radius:8px; object-fit:cover } /* Accessibility tweak for the stepper to show contrasting fill */ .stepper-fill[style*="width: 100%"] { box-shadow: 0 2px 8px rgba(0,0,0,0.06) } /* Accessibility helpers */ .sr-only { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 } /* Product list summary next to thumbnails */ .oc-products-info { display:flex; flex-direction:column; gap:6px; font-size:0.95rem; color:var(--muted); } .oc-products-info .product-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:360px; color:#333; font-weight:600 } .oc-products-info .product-meta { font-size:0.85rem; color:var(--muted) } /* Meta icons */ .oc-meta-item i { color: var(--accent); margin-right:8px; font-size:0.95rem; opacity:0.95 } /* Action button updates */ .btn-track { background: linear-gradient(90deg,#fff,#fff); border:1px solid rgba(128,0,0,0.08); color:#800000; font-weight:700; padding:10px 12px; border-radius:10px } .btn-buy-again { background: linear-gradient(90deg,var(--accent),#cc4b4b); color:#fff; border:0; padding:10px 12px } /* Improve truck icon placement for accessibility */ .stepper-truck { top:-30px; } /* Small thumbnail sizes for mobile */ @media (max-width:580px) { .product-thumb { width:48px; height:48px } .more-items-badge { width:32px; height:32px; font-size:0.75rem } .oc-products-info .product-name { max-width:160px } } /* Ensure proper spacing between elements */ .order-card .ribbon-wrap { margin-bottom: 12px; } /* Responsive adjustments */ @media (max-width: 680px) { .order-card { flex-direction: column; align-items: flex-start; } .order-actions { width: 100%; justify-content: space-between; } } /* ===== ACCOUNT SIDEBAR DRAWER - MODERN DESIGN ===== */ .account-sidebar { position: fixed; top: 0; bottom: 0; right: 0; left: auto; width: 350px; max-width: 90vw; height: 100% !important; /* Force full height */ min-height: 100vh; background: #ffffff; box-shadow: -4px 0 24px rgba(0,0,0,0.15); border-left: 1px solid rgba(0,0,0,0.05); z-index: 12000; transform: translate3d(100%, 0, 0); opacity: 0; visibility: hidden; pointer-events: none; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform 0.4s cubic-bezier(0.22, 0.9, 0.32, 1), opacity 0.35s ease, visibility 0s 0.4s; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px 0 0 0; /* Only round top-left corner */ } .account-sidebar::before { display: none; } .account-sidebar.open, .account-sidebar.active { transform: translate3d(0, 0, 0); opacity: 1; visibility: visible; pointer-events: auto; transition: transform 0.4s cubic-bezier(0.22, 0.9, 0.32, 1), opacity 0.35s ease; } .account-sidebar-header { display: none; } .account-sidebar-header::after { display: none; } .sidebar-logo-img { filter: brightness(0) invert(1); height: 36px; } .close-account-sidebar { position: absolute; top: 16px; right: 16px; background: rgba(0,0,0,0.05); border: none; color: #333; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; font-size: 1rem; z-index: 1000; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .close-account-sidebar:hover { background: rgba(0,0,0,0.1); transform: rotate(90deg); } .account-sidebar-content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 60px 0 0 0; position: relative; z-index: 1; } .account-profile { display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: #fff; border-bottom: 1px solid #f0f0f0; margin-bottom: 8px; transition: background-color 0.2s; } .account-profile:hover { background: #fcfcfc; transform: none; box-shadow: none; } .account-avatar { width: 68px; height: 68px; border-radius: 50%; background: linear-gradient(135deg, rgba(139, 0, 0, 0.9), rgba(204, 75, 75, 0.9)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; box-shadow: 0 6px 20px rgba(139,0,0,0.3), inset 0 -2px 8px rgba(0,0,0,0.2), 0 0 0 3px rgba(255,255,255,0.3); border: 2px solid rgba(255,255,255,0.5); } .account-avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar-initial { font-size: 1.6rem; font-weight: 700; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.2); } .account-meta { flex: 1; min-width: 0; } .account-name { font-size: 1.4rem; /* Increased from 1.15rem */ font-weight: 700; color: #1a1a1a; margin-bottom: 6px; text-shadow: 0 1px 2px rgba(255,255,255,0.5); } .account-email { font-size: 1rem; /* Increased from 0.9rem */ color: #555; display: flex; align-items: center; gap: 6px; } .account-email .verified { color: #28a745; filter: drop-shadow(0 1px 2px rgba(40,167,69,0.3)); } .account-menu-list { list-style: none; padding: 0; margin: 0; } .account-menu-item { margin-bottom: 6px; } .account-menu-link { display: flex; align-items: center; gap: 14px; padding: 14px 18px; /* Increased padding */ color: #555; text-decoration: none; font-weight: 500; font-size: 1.1rem; /* Added font size */ border-radius: 8px; transition: all 0.2s ease; background: transparent; border: none; box-shadow: none; margin: 2px 12px; } .account-menu-link::before { display: none; } .account-menu-link:hover { background: #f8f9fa; color: #800000; transform: translateX(4px); box-shadow: none; } .account-menu-item.active .account-menu-link { background: #fff5f5; color: #800000; font-weight: 600; box-shadow: none; border-left: none; border-radius: 8px; backdrop-filter: none; border-color: transparent; } .account-menu-item.active .account-menu-link i { color: #800000; filter: none; } .account-menu-link i { width: 24px; /* Increased width */ text-align: center; color: var(--accent, #8b0000); transition: all 0.3s ease; font-size: 1.3rem; /* Increased from 1.1rem */ } .account-menu-item.active .account-menu-link i { color: #fff; } .menu-badge { background: linear-gradient(135deg, #ffd700, #ffed4e); color: #8b0000; font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 12px; margin-left: auto; box-shadow: 0 2px 8px rgba(255,215,0,0.3), inset 0 1px 0 rgba(255,255,255,0.4); border: 1px solid rgba(255,215,0,0.3); } .logout-item .account-menu-link { color: #dc3545; margin-top: 16px; } .logout-item .account-menu-link:hover { background: rgba(255, 240, 245, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #c82333; box-shadow: 0 6px 20px rgba(220,53,69,0.15); } .logout-item .account-menu-link i { color: #dc3545; } /* Scrollbar styling for glassmorphic sidebar */ .account-sidebar-content::-webkit-scrollbar { width: 10px; } .account-sidebar-content::-webkit-scrollbar-track { background: rgba(255,255,255,0.3); border-radius: 10px; backdrop-filter: blur(8px); } .account-sidebar-content::-webkit-scrollbar-thumb { background: linear-gradient(135deg, rgba(139, 0, 0, 0.7), rgba(160, 0, 0, 0.8)); border-radius: 10px; border: 2px solid rgba(255,255,255,0.2); box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .account-sidebar-content::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, rgba(139, 0, 0, 0.85), rgba(160, 0, 0, 0.95)); } /* Vouchers Panel - Glassmorphic */ .sidebar-vouchers-panel { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); padding-left: 36px; } .sidebar-vouchers-panel.open { max-height: 600px; } .vouchers-section { margin-top: 14px; } .vouchers-section h5 { font-size: 0.8rem; color: #666; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; } .vouchers-section ul { list-style: none; padding: 0; margin: 0; } .sv-item { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 14px; padding: 14px; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.5), 0 0 0 1px rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); transition: all 0.3s ease; } .sv-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); } .sv-item.used { opacity: 0.5; background: rgba(248, 249, 250, 0.6); } .sv-main { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .sv-amount { color: var(--accent, #8b0000); font-size: 1rem; font-weight: 700; } .copy-voucher { background: linear-gradient(135deg, rgba(139, 0, 0, 0.9), rgba(160, 0, 0, 0.95)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; border: none; padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: 0.8rem; font-weight: 600; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 2px 8px rgba(139,0,0,0.3); } .copy-voucher:hover { background: linear-gradient(135deg, rgba(139, 0, 0, 1), rgba(160, 0, 0, 1)); transform: scale(1.05); box-shadow: 0 4px 12px rgba(139,0,0,0.4); } .sv-code { font-family: 'Courier New', monospace; font-size: 0.85rem; color: #555; background: rgba(248, 249, 250, 0.8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 8px 12px; border-radius: 8px; text-align: center; border: 1px solid rgba(0,0,0,0.06); } /* Modern Account Button in Navbar */ .account-btn { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 24px; padding: 10px 20px; color: #fff; font-weight: 600; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; line-height: 1; margin: 0; font-size: 0.95rem; box-shadow: 0 4px 12px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.15); } .account-btn:hover { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.4); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2); } .account-btn:active { transform: translateY(0); } .account-btn img { width: 32px !important; height: 32px !important; border-radius: 50% !important; object-fit: cover !important; margin-right: 0 !important; border: 2px solid rgba(255,255,255,0.6) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important; } .account-btn .fa-user { font-size: 1.1rem; color: #ffd700; filter: drop-shadow(0 2px 4px rgba(255,215,0,0.3)); } .account-btn .fa-caret-down { font-size: 0.85em; opacity: 0.85; color: #fff; transition: transform 0.3s ease; } .account-btn:hover .fa-caret-down { transform: translateY(2px); } /* ===== Wishlist Page Styles ===== */ .wishlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 18px; } .product-card-wishlist { background: #fff; border: 1px solid #eee; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 6px 20px rgba(0,0,0,0.04); transition: transform 0.18s ease, box-shadow 0.18s ease; } .product-card-wishlist:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,0.06); } .product-card-wishlist .wc-image { height: 160px; overflow: hidden; display:flex;align-items:center;justify-content:center;background:#fafafa } .product-card-wishlist .wc-image img { width:100%; height:100%; object-fit:cover } .product-card-wishlist .wc-body { padding: 14px; display:flex;flex-direction:column; gap:10px } .wc-title { font-size: 1rem; margin:0; color:#222 } .wc-desc { font-size: 0.9rem; color:#666; margin:0 } .wc-meta { display:flex; align-items:center; justify-content:space-between; gap:12px } .wc-price { font-weight:700; color:#800000 } .wc-actions { display:flex; gap:8px; align-items:center } .btn-sm { padding:8px 10px; font-size:0.9rem; border-radius:8px } .btn-outline { background: transparent; border: 1px solid #ddd; color:#333 } .empty-state-card { text-align:center; padding:40px; background:#fff; border-radius:10px; border:1px solid #eee } .account-sidebar.open, .account-sidebar.active { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); opacity: 1; visibility: visible; pointer-events: auto; transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.32, 1), opacity 0.25s ease; } /* Remove staggered child animations for instant responsiveness */ .account-sidebar .account-sidebar-content, .account-sidebar .account-profile, .account-sidebar .account-menu-item, .account-sidebar .sidebar-vouchers-panel { /* No initial transform/opacity - instant display */ transition: none; } .account-sidebar.open .account-sidebar-content, .account-sidebar.active .account-sidebar-content, .account-sidebar.open .account-profile, .account-sidebar.active .account-profile, .account-sidebar.open .account-menu-item, .account-sidebar.active .account-menu-item, .account-sidebar.open .sidebar-vouchers-panel, .account-sidebar.active .sidebar-vouchers-panel { opacity: 1; transform: translateX(0); } .account-sidebar.open .account-menu-item:nth-of-type(1), .account-sidebar.active .account-menu-item:nth-of-type(1) { transition-delay: 0.05s; } .account-sidebar.open .account-menu-item:nth-of-type(2), .account-sidebar.active .account-menu-item:nth-of-type(2) { transition-delay: 0.1s; } .account-sidebar.open .account-menu-item:nth-of-type(3), .account-sidebar.active .account-menu-item:nth-of-type(3) { transition-delay: 0.15s; } .account-sidebar.open .account-menu-item:nth-of-type(4), .account-sidebar.active .account-menu-item:nth-of-type(4) { transition-delay: 0.2s; } .account-sidebar.open .account-menu-item:nth-of-type(5), .account-sidebar.active .account-menu-item:nth-of-type(5) { transition-delay: 0.25s; } .account-sidebar.open .account-menu-item:nth-of-type(6), .account-sidebar.active .account-menu-item:nth-of-type(6) { transition-delay: 0.3s; } .account-sidebar.open .account-menu-item:nth-of-type(7), .account-sidebar.active .account-menu-item:nth-of-type(7) { transition-delay: 0.35s; } .account-sidebar.open .account-menu-item:nth-of-type(8), .account-sidebar.active .account-menu-item:nth-of-type(8) { transition-delay: 0.4s; } .close-account-sidebar { background: rgba(255,255,255,0.2); border: none; color: white; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .close-account-sidebar:hover { background: rgba(255,255,255,0.4); transform: rotate(90deg); } .account-sidebar-content { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; } /* Respect reduced motion preference */ @media (prefers-reduced-motion: reduce) { .account-sidebar, .account-sidebar.open, .account-sidebar.active { transition: none !important; } .account-sidebar .account-sidebar-content, .account-sidebar .account-profile, .account-sidebar .account-menu-item, .account-sidebar .sidebar-vouchers-panel { transition: none !important; } .account-sidebar-overlay { transition: none !important; } } .account-sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 11500; opacity: 0; visibility: hidden; will-change: opacity; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: opacity 0.25s ease, visibility 0s 0.25s; } .account-sidebar-overlay.active { opacity: 1; visibility: visible; transition: opacity 0.25s ease; } /* Hide original menu if it exists */ .account-menu { display: none !important; } /* Maroon Background Theme - Lighter & Modern */ .soft-bg-maroon { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; /* Lighter gradient: Deep Red to Maroon */ background: linear-gradient(135deg, #a62b2b 0%, #700808 100%); overflow: hidden; pointer-events: none; } /* Shape Blobs (copied from shop.css) */ .shape-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; /* Slightly increased opacity for vibrancy */ animation: blobFloat 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1); } .shape-blob-1 { top: -10%; left: -10%; width: 600px; height: 600px; background: radial-gradient(circle, #ff6b6b 0%, transparent 70%); /* Lighter red */ } .shape-blob-2 { bottom: -10%; right: -10%; width: 700px; height: 700px; background: radial-gradient(circle, #ff4d4d 0%, transparent 70%); animation-delay: -7s; } .shape-blob-3 { top: 40%; left: 40%; width: 500px; height: 500px; background: radial-gradient(circle, #ff8585 0%, transparent 70%); /* Even lighter */ animation-delay: -14s; } @keyframes blobFloat { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(50px, 30px) scale(1.1); } } /* Update User Wrap for Maroon Theme */ .user-wrap h1 { color: white; text-shadow: 0 2px 10px rgba(0,0,0,0.1); font-weight: 700; letter-spacing: -0.5px; } .breadcrumb { color: rgba(255,255,255,0.85) !important; font-weight: 500; } /* Update Order Card for Maroon Theme - Modern Glassmorphism */ .order-card-wide { background: rgba(255, 255, 255, 0.92); /* More opaque for readability */ backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); border-radius: 16px; /* More rounded */ overflow: hidden; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; } .order-card-wide:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2); background: rgba(255, 255, 255, 0.98); } .oc-header { background: rgba(255, 255, 255, 0.5); border-bottom: 1px solid rgba(0,0,0,0.06); padding: 18px 28px; } .oc-label { color: #777; font-weight: 700; letter-spacing: 0.5px; font-size: 0.7rem; } .oc-value { color: #222; font-size: 1rem; } .oc-id { color: #555; background: rgba(0,0,0,0.04); padding: 6px 12px; border-radius: 8px; font-weight: 600; font-family: 'Courier New', monospace; letter-spacing: -0.5px; } /* Buttons on Maroon Theme */ .print-history-btn { background: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.4); padding: 10px 20px; border-radius: 10px; cursor: pointer; transition: all 0.2s; font-weight: 600; backdrop-filter: blur(4px); } .print-history-btn:hover { background: rgba(255,255,255,0.35); transform: translateY(-2px); } .btn-cta { background: white; color: #a62b2b; /* Match new lighter maroon */ box-shadow: 0 4px 15px rgba(0,0,0,0.1); border-radius: 10px; padding: 10px 20px; font-weight: 700; border: none; transition: all 0.2s; } .btn-cta:hover { background: #fff; color: #800000; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); } /* New Buttons for My Orders */ .btn-buy-again { padding: 8px 16px; background: #800000; color: white; border-radius: 6px; text-decoration: none; font-weight: 600; text-align: center; font-size: 0.9rem; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px; } .btn-buy-again:hover { background: #5a0000; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(128, 0, 0, 0.2); } .btn-track { padding: 8px 16px; background: #fff; color: #333; border: 1px solid #ddd; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 0.9rem; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px; } .btn-track:hover { background: #f8f9fa; border-color: #bbb; } /* View Order Page Specifics */ .order-header-card, .content-card { background: rgba(255, 255, 255, 0.95); /* High opacity for readability */ backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); border-radius: 16px; } .order-title h1 { color: #222 !important; /* Force dark text */ } .card-title { color: #222 !important; border-bottom-color: #eee !important; } .summary-row span { color: #444 !important; } .summary-row.total span { color: #222 !important; } .item-name { color: #222 !important; } .item-total { color: #222 !important; } /* ===== Header/Nav consistency (enforced) ===== Keep header appearance identical to global styles and force navbar alignment so auth/index/shop pages don't drift visually. */ .main-header { display: flex !important; align-items: center !important; justify-content: center !important; height: var(--nav-height, 68px) !important; min-height: var(--nav-height, 68px) !important; padding: 12px 30px !important; background: linear-gradient(135deg, var(--primary, #800000) 0%, var(--primary-dark, #5d1212) 100%) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.18) !important; border-radius: 0 !important; gap: 30px !important; width: 100% !important; box-sizing: border-box !important; } .main-header .navbar-right { justify-content: flex-end !important; display: flex !important; gap: var(--nav-gap, 18px) !important; flex: 1 1 0 !important; min-width: 0 !important; flex-wrap: nowrap !important; } .main-header .navbar-left { justify-content: flex-start !important; display: flex !important; gap: var(--nav-gap, 18px) !important; margin-left: 0 !important; min-width: 0 !important; flex: 1 1 0 !important; flex-wrap: nowrap !important; } @media (max-width:980px){ .main-header { padding: 10px 14px !important; } } /* ===================================================== ENHANCED MOBILE-FIRST RESPONSIVE STYLES FOR USER DASHBOARD ===================================================== */ @media (max-width: 768px) { /* Header Mobile */ .main-header { flex-wrap: wrap !important; padding: 10px 12px !important; gap: 10px !important; height: auto !important; min-height: auto !important; } .main-header .navbar-left, .main-header .navbar-right { display: none !important; } .main-header .logo { order: 1; margin: 0 auto; } .main-header .logo img { height: 36px !important; width: auto !important; } /* User Wrap */ .user-wrap { margin: 16px auto; padding: 12px; } /* Grid System */ .grid { grid-template-columns: 1fr !important; gap: 12px; } .orders-grid { grid-template-columns: 1fr !important; } /* Card Styles */ .card { padding: 14px; border-radius: 12px; } .card h3 { font-size: 1rem; } /* Orders List */ .orders-list { gap: 10px; } /* Order Card */ .order-card { flex-direction: column; align-items: stretch !important; gap: 12px; padding: 14px; } .order-left { width: 100%; } .order-left a.card-link { gap: 10px; } .order-icon { width: 48px; height: 48px; font-size: 18px; } .order-icon img { width: 48px !important; height: 48px !important; } .order-details { min-width: 0; } .order-title { font-size: 0.95rem; line-height: 1.3; word-break: break-word; } .order-sub { font-size: 0.85rem; } .order-actions { width: 100%; justify-content: space-between; gap: 10px; } .order-badge { padding: 5px 10px; font-size: 0.8rem; } .status-pill { padding: 5px 10px; font-size: 0.8rem; } /* Order Filter Bar */ .orders-filter-bar { flex-wrap: wrap; gap: 6px; } .orders-filter-bar .filter-btn { padding: 8px 12px; font-size: 0.85rem; flex: 1 1 auto; text-align: center; min-width: 70px; } /* Button Styles */ .btn { padding: 10px 14px; font-size: 0.9rem; border-radius: 10px; } .btn-cta { width: 100%; text-align: center; padding: 12px 16px; } /* Items Table */ .items-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .items-table th, .items-table td { padding: 10px 8px; font-size: 0.85rem; white-space: nowrap; } /* View Header */ .view-header { flex-direction: column; gap: 12px; align-items: flex-start; } .breadcrumb { font-size: 0.85rem; } /* Order Card Wide */ .order-card-wide { padding: 14px; } .order-card-wide .oc-header { flex-direction: column; gap: 10px; } .order-card-wide .oc-body { flex-direction: column; gap: 12px; } .order-card-wide .oc-meta { flex-wrap: wrap; gap: 8px; } .order-card-wide .oc-meta-item { font-size: 0.85rem; } .order-card-wide .stepper-wrapper { width: 100%; max-width: 100%; overflow-x: auto; } /* Order Card Compact */ .order-card-compact { grid-template-columns: 1fr; gap: 10px; padding: 14px; } .order-card-compact .oc-products-info { margin-left: 0; } .order-card-compact .oc-left { width: 100%; } .order-card-compact .oc-actions { width: 100%; justify-content: flex-start; } .order-card-compact .product-thumb { width: 50px; height: 50px; } /* Action Dropdown */ .action-dropdown-menu { position: fixed; left: 50% !important; right: auto !important; top: auto !important; bottom: 20px; transform: translateX(-50%); min-width: calc(100% - 32px); max-width: 320px; border-radius: 16px; z-index: 10001; } .dropdown-item { padding: 14px 16px; font-size: 0.95rem; } /* Account Dropdown */ .account-dropdown { position: static; } .account-menu { position: fixed; left: 16px !important; right: 16px !important; top: auto !important; bottom: 20px; transform: none !important; min-width: auto; width: calc(100% - 32px); max-width: 320px; margin: 0 auto; border-radius: 16px; } .account-menu::before { display: none; } .account-menu a { padding: 14px 16px; } /* Product Thumbs */ .product-thumbs { flex-wrap: wrap; gap: 6px; } .product-thumb { width: 40px; height: 40px; } /* Stepper */ .stepper-wrapper { padding: 10px 0; } .stepper-step { font-size: 0.7rem; } .stepper-step .step-circle { width: 24px; height: 24px; font-size: 0.7rem; } } /* Very Small Mobile (360px and below) */ @media (max-width: 360px) { .user-wrap { padding: 8px; margin: 10px auto; } .card { padding: 12px; } .order-icon { width: 40px; height: 40px; font-size: 16px; } .order-icon img { width: 40px !important; height: 40px !important; } .order-title { font-size: 0.9rem; } .order-sub { font-size: 0.8rem; } .orders-filter-bar .filter-btn { padding: 6px 10px; font-size: 0.8rem; } .btn { padding: 10px 12px; font-size: 0.85rem; } .status-pill { padding: 4px 8px; font-size: 0.75rem; } } /* Touch Device Enhancements */ @media (hover: none) and (pointer: coarse) { .btn, .btn-cta, .filter-btn { min-height: 44px; } .action-dropdown-btn { min-width: 44px; min-height: 44px; } .dropdown-item { min-height: 48px; } /* Disable hover effects on touch */ .order-card:hover { transform: none; box-shadow: 0 6px 20px rgba(0,0,0,0.04); } /* Active state for touch feedback */ .btn:active, .order-card:active { transform: scale(0.98); opacity: 0.9; } } /* Safe Area Support */ @supports (padding: env(safe-area-inset-bottom)) { .action-dropdown-menu, .account-menu { bottom: calc(20px + env(safe-area-inset-bottom)); } } /* Landscape Mobile */ @media (max-width: 812px) and (orientation: landscape) { .user-wrap { margin: 12px auto; } .orders-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* =================================================================== MOBILE-FIRST RESPONSIVE DESIGN Core mobile optimizations for Percussion Gears ===================================================================*/ /* === ROOT MOBILE VARIABLES === */ :root { --mobile-padding: 16px; --mobile-nav-height: 60px; --tablet-padding: 24px; --desktop-padding: 32px; } /* === MOBILE-FIRST BASE === */ @media (max-width: 768px) { html { font-size: 14px; /* Slightly smaller base for mobile */ } body { font-size: 14px; line-height: 1.5; -webkit-text-size-adjust: 100%; /* Prevent iOS text size adjustment */ } /* Container adjustments */ .container, .site-container, .shop-main, .checkout-main { padding-left: var(--mobile-padding) !important; padding-right: var(--mobile-padding) !important; max-width: 100% !important; } } /* === MOBILE HEADER & NAVIGATION === */ @media (max-width: 992px) { .main-header { height: var(--mobile-nav-height); min-height: var(--mobile-nav-height); padding: 12px 16px; gap: 12px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } .main-header .logo .logo-icon { height: 36px; /* Smaller logo on mobile */ } } /* === MOBILE HEADER LAYOUT (Hamburger Menu) === */ @media (max-width: 768px) { .main-header { display: flex; justify-content: space-between; align-items: center; position: relative; padding: 12px 20px; } .main-header .logo { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 11012; margin: 0 !important; pointer-events: none; /* Prevent logo from blocking clicks */ } .main-header .logo .logo-icon { pointer-events: auto; /* Re-enable clicks on the actual logo */ height: 36px !important; /* Consistent size on mobile */ } .mobile-menu-btn { z-index: 11015; position: relative; order: 1; margin-right: auto; } /* Hide navbar-left visually but keep it in DOM for JavaScript */ .navbar-left { position: absolute !important; left: -9999px !important; visibility: hidden !important; opacity: 0 !important; } /* Hide navbar-right on mobile (it's empty/non-functional) */ .navbar-right { display: none !important; } } /* === MOBILE HAMBURGER MENU === */ @media (max-width: 768px) { .mobile-menu-btn { display: flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; position: relative; z-index: 11015; flex-shrink: 0; } .mobile-menu-btn:hover { background: rgba(255, 255, 255, 0.2); } .mobile-menu-btn i { color: #fff; font-size: 20px; } /* COMPLETELY HIDE the non-working mobile-nav-toggle button */ .mobile-nav-toggle, button.mobile-nav-toggle, #mobile-nav-toggle { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; position: absolute !important; left: -9999px !important; } /* Hide desktop nav on mobile */ .navbar-left.desktop-nav { display: none; } /* Mobile nav drawer styles moved to tailwind-config.css */ /* Using HTML-based drawer instead of JavaScript-generated one */ } /* === MOBILE TYPOGRAPHY === */ @media (max-width: 768px) { h1 { font-size: 1.75rem; /* 28px */ line-height: 1.2; } h2 { font-size: 1.5rem; /* 24px */ line-height: 1.3; } h3 { font-size: 1.25rem; /* 20px */ line-height: 1.4; } h4 { font-size: 1.1rem; /* 17.6px */ } p { font-size: 14px; line-height: 1.6; } } /* === MOBILE HERO SECTIONS === */ @media (max-width: 768px) { .modern-hero, .shop-hero { padding: 40px 16px !important; min-height: auto !important; } .hero-logo-img, .store-logo { max-width: 200px !important; margin-bottom: 20px; } .hero-title { font-size: 1.5rem; margin-bottom: 12px; } .hero-subtitle { font-size: 14px; margin-bottom: 20px; } .cta-button { padding: 12px 24px; font-size: 14px; width: 100%; max-width: 280px; text-align: center; } } /* === MOBILE QUICK VIEW BUTTON - Hidden on desktop by default === */ .mobile-quick-view-btn { display: none; } /* === MOBILE PRODUCT GRID === */ @media (max-width: 768px) { .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; padding: 8px !important; } .product-card-modern { min-height: auto !important; /* Allow dynamic height for compact view */ height: auto !important; padding: 0; border-radius: 12px; margin-bottom: 0 !important; } /* Hide description in mobile first to ensure compactness */ .product-description { display: none !important; } /* Mobile: Show overlay on touch for quick-view */ .product-card-modern.touch-active .product-overlay { opacity: 1 !important; } /* Mobile quick-view button - centered icon */ .mobile-quick-view-btn { display: flex !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.9); color: #660000; border: none; width: 50px; height: 50px; border-radius: 50%; font-size: 1.2rem; font-weight: 600; cursor: pointer; z-index: 100; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.2); touch-action: manipulation; pointer-events: auto !important; -webkit-tap-highlight-color: transparent; opacity: 1; } .mobile-quick-view-btn:active { transform: translate(-50%, -50%) scale(0.95); } .mobile-quick-view-btn i { pointer-events: none; } /* Keep overlay visible and transparent on mobile to center the icon */ .product-overlay { display: flex !important; opacity: 1 !important; background: transparent !important; pointer-events: none; } .product-overlay .quick-view-btn { pointer-events: auto; } .product-image-container { height: 140px !important; min-height: 140px !important; max-height: 140px !important; position: relative; overflow: visible !important; /* Ensure button isn't clipped */ } .product-card .product-image { height: 140px; border-radius: 8px; } .product-info { padding: 10px !important; } .product-card .product-name { font-size: 12px !important; margin-top: 6px; line-height: 1.3; max-height: 2.6em; overflow: hidden; } .product-card .product-price { font-size: 14px !important; font-weight: 600; margin-top: 4px; } .product-card .product-actions { flex-direction: column; gap: 6px; padding: 0; } .product-card button { width: 100%; padding: 8px 10px !important; font-size: 12px !important; } .size-dropdown { padding: 6px 24px 6px 8px !important; font-size: 11px !important; min-height: 32px !important; } } /* Single column on very small screens */ @media (max-width: 480px) { .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } .product-card-modern { min-height: 320px !important; } .product-image-container { height: 130px !important; min-height: 130px !important; max-height: 130px !important; } .product-card .product-image { height: 130px; } .product-info { padding: 8px !important; } .product-name { font-size: 11px !important; } .product-price { font-size: 13px !important; } .product-card button { padding: 6px 8px !important; font-size: 11px !important; } } /* === MOBILE FILTERS & SORTING === */ @media (max-width: 768px) { .filter-section, .sort-controls { flex-direction: column; gap: 12px; } .filter-section select, .sort-controls select, .filter-section button { width: 100%; padding: 10px 12px; } .search-bar { width: 100% !important; max-width: 100% !important; } .search-bar input { font-size: 14px; } } /* === MOBILE CART SIDEBAR === */ @media (max-width: 768px) { .cart-sidebar { width: 100% !important; max-width: 100% !important; right: -100% !important; } .cart-sidebar.active { right: 0 !important; } .cart-item { flex-direction: column; align-items: flex-start; gap: 12px; } .cart-item-image { width: 100%; height: 120px; } .cart-item-details { width: 100%; } .cart-actions { flex-direction: column; width: 100%; gap: 8px; } .cart-actions button { width: 100%; } } /* === MOBILE CHECKOUT === */ @media (max-width: 768px) { .checkout-container { flex-direction: column !important; gap: 24px; } .checkout-form, .order-summary { width: 100% !important; max-width: 100% !important; } .form-row { flex-direction: column; gap: 16px; } .form-group { width: 100% !important; } .payment-methods { flex-direction: column; } .payment-option { width: 100%; } } /* === MOBILE FORMS === */ @media (max-width: 768px) { input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], textarea, select { font-size: 16px !important; /* Prevents zoom on iOS */ padding: 12px; } button, .btn, .button { padding: 12px 16px; font-size: 14px; min-height: 44px; /* Touch-friendly */ } label { font-size: 13px; margin-bottom: 6px; } } /* === MOBILE MODALS === */ @media (max-width: 768px) { .modal-content { width: 95% !important; max-width: 95% !important; margin: 20px auto; padding: 20px; border-radius: 12px; } .quick-view-modal .modal-content { flex-direction: column; } .quick-view-image, .quick-view-details { width: 100% !important; } .quick-view-image { height: 250px; margin-bottom: 20px; } } /* === MOBILE TABLES === */ @media (max-width: 768px) { table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Card-style tables for mobile */ .mobile-table-card { display: block; margin-bottom: 16px; background: #fff; border-radius: 8px; padding: 16px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .mobile-table-card tr { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee; } .mobile-table-card tr:last-child { border-bottom: none; } .mobile-table-card th { font-weight: 600; text-align: left; } .mobile-table-card td { text-align: right; } } /* === MOBILE FOOTER === */ @media (max-width: 768px) { .footer-content { flex-direction: column !important; text-align: center; } .footer-column { width: 100% !important; margin-bottom: 24px; } .footer-links { list-style: none; padding: 0; } .footer-links li { margin-bottom: 12px; } .social-links { justify-content: center; gap: 16px; } } /* === MOBILE USER DASHBOARD === */ @media (max-width: 768px) { .dashboard-container { flex-direction: column; } .dashboard-sidebar { width: 100% !important; position: relative; margin-bottom: 20px; } .dashboard-main { width: 100% !important; } .stat-card { flex: 0 0 calc(50% - 8px); } .order-card { flex-direction: column; align-items: flex-start; } .order-actions { width: 100%; justify-content: space-between; margin-top: 12px; } } /* === MOBILE ADMIN === */ @media (max-width: 768px) { .admin-container { flex-direction: column; } .admin-sidebar { width: 100%; position: relative; } .admin-content { width: 100% !important; padding: 16px; } .admin-card { padding: 16px; } .admin-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* === TOUCH-FRIENDLY INTERACTIONS === */ @media (max-width: 768px) { /* Larger tap targets */ a, button, .btn, input[type="submit"], input[type="button"] { min-height: 44px; min-width: 44px; } /* Better spacing for touch */ .icon-button { padding: 12px; } /* Prevent double-tap zoom on buttons */ button { touch-action: manipulation; } } /* === MOBILE PERFORMANCE === */ @media (max-width: 768px) { /* Mobile performance optimizations - keep essential animations */ /* Re-enable essential animations for modals and navigation */ .cart-sidebar, .mobile-nav-drawer, .modal, .modal-quick-view, .quick-view-content, .mobile-nav-overlay, .cart-success-toast { animation-duration: 0.3s !important; transition-duration: 0.3s !important; } /* Optimize non-critical animations */ .product-card-modern:hover { transform: none !important; } } /* === MOBILE IMAGES === */ @media (max-width: 768px) { img { max-width: 100%; height: auto; display: block; } /* Lazy loading optimization */ img[loading="lazy"] { opacity: 0; transition: opacity 0.3s ease; } img[loading="lazy"].loaded { opacity: 1; } } /* === MOBILE UTILITIES === */ @media (max-width: 768px) { .hide-mobile { display: none !important; } .show-mobile { display: block !important; } .mobile-full-width { width: 100% !important; } .mobile-text-center { text-align: center !important; } .mobile-stack { flex-direction: column !important; } } /* === TABLET BREAKPOINT === */ @media (min-width: 769px) and (max-width: 1024px) { .container { padding-left: var(--tablet-padding) !important; padding-right: var(--tablet-padding) !important; } .product-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* === PREVENT HORIZONTAL SCROLL === */ @media (max-width: 768px) { html, body { overflow-x: hidden; max-width: 100vw; } * { max-width: 100%; } /* Fix common overflow culprits */ .container, .row, .col { overflow-x: visible; } } /* === SMOOTH SCROLLING === */ @media (max-width: 768px) { html { -webkit-overflow-scrolling: touch; } /* Momentum scrolling for iOS */ body, .cart-sidebar, .mobile-nav-drawer { -webkit-overflow-scrolling: touch; } } /* === MOBILE LOGO OPTIMIZATION === */ @media (max-width: 768px) { .logo-icon { height: 32px !important; width: auto !important; object-fit: contain; } .hero-logo-img { max-width: 200px !important; width: 80% !important; } .sidebar-logo-img { height: 40px !important; width: auto !important; } } /* === MOBILE ACCOUNT DROPDOWN === */ @media (max-width: 768px) { .account-dropdown { position: relative; } .account-menu { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; width: 100% !important; border-radius: 16px 16px 0 0 !important; padding: 20px !important; max-height: 50vh !important; transform: translateY(100%); transition: transform 0.3s ease; z-index: 11050 !important; } .account-dropdown:hover .account-menu, .account-dropdown.active .account-menu { transform: translateY(0); } .account-menu a { padding: 16px 20px !important; font-size: 16px !important; } } /* === MOBILE BUTTONS POLISH === */ @media (max-width: 768px) { .btn, .button, button:not(.mobile-menu-btn):not(.account-btn):not(.close-quick-view) { border-radius: 10px; font-weight: 600; letter-spacing: 0.3px; } .hero-btn { width: 100% !important; max-width: 280px !important; padding: 14px 24px !important; font-size: 14px !important; border-radius: 50px !important; } .hero-buttons { flex-direction: column !important; align-items: center !important; gap: 12px !important; } } /* === MOBILE STATS CONTAINER === */ @media (max-width: 768px) { .stats-container { gap: 24px !important; padding: 0 16px !important; } .stat-item { flex: 0 0 auto; } .stat-number { font-size: 1.5rem !important; } .stat-label { font-size: 0.7rem !important; } } /* === MOBILE STORE CARDS (Homepage) === */ @media (max-width: 768px) { .stores-grid { grid-template-columns: 1fr !important; gap: 16px !important; padding: 0 16px !important; } .store-card { padding: 24px 20px !important; border-radius: 16px !important; } .store-logo { max-width: 150px !important; height: auto !important; } } /* === MOBILE SEARCH BAR === */ @media (max-width: 768px) { .search-section { padding: 12px 16px !important; } .search-bar { border-radius: 50px !important; } .search-bar input { padding: 12px 16px !important; font-size: 15px !important; } } /* === MOBILE FILTER BAR === */ @media (max-width: 768px) { .filter-bar, .filter-section { flex-wrap: wrap !important; gap: 8px !important; padding: 12px !important; } .filter-bar select, .filter-section select { flex: 1 1 calc(50% - 4px) !important; min-width: calc(50% - 4px) !important; padding: 10px 12px !important; font-size: 13px !important; border-radius: 8px !important; } } /* === MOBILE TOAST NOTIFICATIONS === */ @media (max-width: 768px) { .cart-success-toast, .toast, .notification-toast { left: 16px !important; right: 16px !important; bottom: 80px !important; max-width: calc(100% - 32px) !important; font-size: 14px !important; padding: 14px 18px !important; border-radius: 12px !important; } } /* === MOBILE JOYBOT CHAT === */ @media (max-width: 768px) { .joybot-container, .chat-widget { bottom: 70px !important; right: 12px !important; } .joybot-window, .chat-window { width: calc(100vw - 24px) !important; max-width: 100% !important; height: 60vh !important; max-height: 60vh !important; right: 0 !important; bottom: 60px !important; border-radius: 16px 16px 0 0 !important; } } /* === MOBILE CART TOGGLE BUTTON === */ @media (max-width: 768px) { .cart-toggle-btn { top: auto !important; bottom: 16px !important; right: 16px !important; position: fixed !important; background: linear-gradient(135deg, #800000 0%, #a00000 100%) !important; border-radius: 50% !important; width: 56px !important; height: 56px !important; box-shadow: 0 4px 20px rgba(128, 0, 0, 0.4) !important; z-index: 10500 !important; } .cart-toggle-btn i { font-size: 22px !important; } .cart-count { top: -4px !important; right: -4px !important; font-size: 11px !important; min-width: 20px !important; height: 20px !important; } } /* === MOBILE ACCESSIBILITY === */ @media (max-width: 768px) { /* Ensure focus states are visible */ a:focus, button:focus, input:focus, select:focus { outline: 2px solid #800000 !important; outline-offset: 2px !important; } /* Better contrast for placeholder text */ ::placeholder { color: #888 !important; opacity: 1 !important; } } /* === MOBILE LOADING STATES === */ @media (max-width: 768px) { .loading-spinner, .loader { width: 32px !important; height: 32px !important; } .skeleton-loader { border-radius: 8px !important; } } /* ===================================================== ENHANCED MOBILE-FIRST SHOP LAYOUT Optimized for touch interactions and mobile UX ===================================================== */ /* === MOBILE HEADER IMPROVEMENTS === */ @media (max-width: 768px) { .main-header { height: 56px !important; padding: 0 12px !important; gap: 8px !important; } .main-header .logo { position: static !important; transform: none !important; } .main-header .logo .logo-icon { height: 28px !important; } /* Hide desktop nav links */ .navbar-left a:not(:first-child), .navbar-right a[id*="btn"] { display: none !important; } /* Mobile nav icons only */ .navbar-right { gap: 4px !important; } .navbar-right a { padding: 8px !important; } /* Account dropdown mobile fix */ .account-dropdown .account-menu { right: 0 !important; left: auto !important; min-width: 180px !important; } } /* === MOBILE SHOP HERO === */ @media (max-width: 768px) { .shop-hero { padding: 56px 16px 24px !important; min-height: auto !important; } .shop-hero-content { padding: 0 !important; } .hero-logo-img { max-width: 200px !important; margin: 0 auto 16px !important; } .stats-container { gap: 24px !important; margin-top: 16px !important; } .stat-item { text-align: center; } .stat-number { font-size: 1.25rem !important; } .stat-label { font-size: 0.7rem !important; } } /* === MOBILE SEARCH & FILTERS === */ @media (max-width: 768px) { .search-bar-top { flex-direction: column !important; gap: 12px !important; padding: 12px 0 !important; } .shop-logos { display: none !important; } .search-wrapper { width: 100% !important; } .modern-search-input { width: 100% !important; font-size: 16px !important; padding: 12px 12px 12px 40px !important; } .sort-group-top { width: 100% !important; justify-content: space-between !important; } .filter-label { display: none !important; } .minimal-select { flex: 1 !important; font-size: 14px !important; padding: 10px 12px !important; } /* Hide sidebar filters on mobile */ .filters-sidebar { display: none !important; } .shop-layout { display: block !important; } .shop-products { width: 100% !important; } } /* === MOBILE FILTER DRAWER === */ .mobile-filter-btn { display: none; position: fixed; bottom: 80px; left: 16px; z-index: 1000; background: #800000; color: white; border: none; padding: 12px 20px; border-radius: 25px; font-size: 14px; font-weight: 600; box-shadow: 0 4px 12px rgba(128, 0, 0, 0.3); cursor: pointer; } @media (max-width: 768px) { .mobile-filter-btn { display: flex; align-items: center; gap: 8px; } } /* === MOBILE PRODUCT GRID ENHANCEMENTS === */ @media (max-width: 768px) { .container, .shop-main .container { padding-left: 8px !important; padding-right: 8px !important; } .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; padding: 0 !important; padding-bottom: 100px !important; } .product-card-modern { border-radius: 10px !important; overflow: hidden !important; background: #fff !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; display: flex !important; flex-direction: column !important; min-height: auto !important; } /* Mobile product image */ .product-image-container { height: 140px !important; min-height: 140px !important; max-height: 140px !important; border-radius: 0 !important; position: relative !important; } .product-image { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* Hide desktop overlay */ .product-overlay { display: none !important; } /* Mobile quick view button */ .mobile-quick-view-btn { display: flex !important; position: absolute !important; bottom: 6px !important; left: 50% !important; transform: translateX(-50%) !important; background: rgba(128, 0, 0, 0.9) !important; color: white !important; border: none !important; padding: 6px 12px !important; border-radius: 15px !important; font-size: 11px !important; font-weight: 600 !important; gap: 4px !important; align-items: center !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important; white-space: nowrap !important; } .mobile-quick-view-btn i { font-size: 10px !important; } /* Mobile product badge */ .product-badge { top: 6px !important; left: 6px !important; padding: 3px 8px !important; font-size: 9px !important; } /* Mobile product info */ .product-info { padding: 10px !important; flex: 1 !important; display: flex !important; flex-direction: column !important; } .product-category { font-size: 9px !important; margin-bottom: 2px !important; } .product-title { font-size: 12px !important; line-height: 1.3 !important; margin-bottom: 4px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; min-height: 32px !important; } .product-description { display: none !important; } .product-type-tag { display: none !important; } /* Mobile price display */ .price-container { margin: 4px 0 8px !important; } .product-price, .sale-price { font-size: 14px !important; font-weight: 700 !important; color: #800000 !important; } .original-price { font-size: 11px !important; } /* Hide variant selection on card (show in quick view) */ .size-selection, .custom-option-container { display: none !important; } /* Mobile product actions */ .product-actions { margin-top: auto !important; padding-top: 8px !important; border-top: 1px solid #f0f0f0 !important; } .quantity-selector { display: none !important; } .add-to-cart-btn { width: 100% !important; padding: 10px !important; font-size: 12px !important; font-weight: 600 !important; border-radius: 6px !important; gap: 6px !important; } .add-to-cart-btn i { font-size: 14px !important; } .add-to-cart-btn span { display: none !important; } .add-to-cart-btn::after { content: 'Add'; font-size: 12px; } } /* Very small screens - 1 column option */ @media (max-width: 360px) { .product-grid { gap: 6px !important; } .product-image-container { height: 120px !important; min-height: 120px !important; max-height: 120px !important; } .product-title { font-size: 11px !important; min-height: 28px !important; } } /* === MOBILE QUICK VIEW MODAL === */ @media (max-width: 768px) { .modal-quick-view, .quick-view-modal { align-items: flex-end !important; padding: 0 !important; } .quick-view-content { width: 100% !important; max-width: 100% !important; max-height: 90vh !important; border-radius: 20px 20px 0 0 !important; flex-direction: column !important; margin: 0 !important; } .quick-view-image { width: 100% !important; height: 250px !important; flex-shrink: 0 !important; } .quick-view-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .quick-view-details { width: 100% !important; padding: 20px !important; overflow-y: auto !important; max-height: calc(90vh - 250px) !important; } .quick-view-title { font-size: 18px !important; } .quick-view-price { font-size: 20px !important; } /* Show variants in quick view */ .quick-view-details .size-selection, .quick-view-details .custom-option-container { display: block !important; } .quick-view-actions { display: flex !important; gap: 12px !important; margin-top: 16px !important; } .quick-view-actions .quantity-selector { display: flex !important; } .quick-view-actions .add-to-cart-btn { flex: 1 !important; } .quick-view-actions .add-to-cart-btn span { display: inline !important; } .quick-view-actions .add-to-cart-btn::after { content: '' !important; } .quick-view-close { position: absolute !important; top: 12px !important; right: 12px !important; width: 36px !important; height: 36px !important; background: rgba(0, 0, 0, 0.5) !important; color: white !important; border: none !important; border-radius: 50% !important; font-size: 18px !important; z-index: 10 !important; } } /* === MOBILE CART SIDEBAR IMPROVEMENTS === */ @media (max-width: 768px) { .cart-sidebar { width: 100% !important; right: -100% !important; border-radius: 0 !important; } .cart-sidebar.active { right: 0 !important; } .cart-sidebar-header { padding: 16px !important; border-bottom: 1px solid #eee !important; } .cart-sidebar-header h3 { font-size: 18px !important; } .cart-sidebar-content { padding: 12px !important; } .cart-sidebar-item { padding: 12px !important; border-radius: 10px !important; background: #f8f8f8 !important; margin-bottom: 10px !important; } .cart-sidebar-item-image { width: 70px !important; height: 70px !important; border-radius: 8px !important; } .cart-sidebar-item-info h4 { font-size: 13px !important; line-height: 1.3 !important; } .cart-sidebar-item-info p { font-size: 12px !important; } .quantity-selector-cart { height: 32px !important; } .quantity-btn-cart { width: 28px !important; height: 28px !important; } .cart-sidebar-item-quantity { width: 36px !important; font-size: 13px !important; } .cart-sidebar-footer { padding: 16px !important; padding-bottom: max(16px, env(safe-area-inset-bottom)) !important; } .checkout-btn-sidebar, .shop-now-btn-sidebar { padding: 14px !important; font-size: 15px !important; border-radius: 10px !important; } } /* === MOBILE CHECKOUT IMPROVEMENTS === */ @media (max-width: 768px) { .checkout-main { padding-top: 70px !important; padding-bottom: 100px !important; } .checkout-container { flex-direction: column !important; gap: 16px !important; } .checkout-form { order: 1 !important; } .order-summary { order: 2 !important; position: relative !important; top: auto !important; } .checkout-form, .order-summary { width: 100% !important; border-radius: 12px !important; } .form-section-title { font-size: 16px !important; margin-bottom: 12px !important; } .form-row { flex-direction: column !important; gap: 12px !important; } .form-group { width: 100% !important; } .form-group input, .form-group select, .form-group textarea { font-size: 16px !important; padding: 14px !important; } .payment-methods { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .payment-option { padding: 12px !important; } .payment-option-name { font-size: 11px !important; } .place-order-btn { padding: 16px !important; font-size: 16px !important; border-radius: 10px !important; } } /* === SAFE AREA SUPPORT === */ @supports (padding: max(0px)) { @media (max-width: 768px) { .main-header { padding-top: max(12px, env(safe-area-inset-top)) !important; } .cart-toggle-btn { bottom: max(16px, calc(env(safe-area-inset-bottom) + 16px)) !important; } .mobile-filter-btn { bottom: max(80px, calc(env(safe-area-inset-bottom) + 80px)) !important; } .cart-sidebar-footer { padding-bottom: max(16px, env(safe-area-inset-bottom)) !important; } .checkout-main { padding-bottom: max(100px, calc(env(safe-area-inset-bottom) + 100px)) !important; } } } /* =================================================================== MOBILE FIXES - COMPREHENSIVE ONE-TIME FIX Ensures alignment, spacing, and usability across all mobile devices. =================================================================== */ /* === GLOBAL MOBILE RESETS === */ @media (max-width: 768px) { html, body { overflow-x: hidden !important; width: 100% !important; position: relative; } /* Fix container widths and padding globally */ .container, .site-container, .shop-main, .checkout-main, .main-content, .page-wrap { width: 100% !important; max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* Ensure no element exceeds viewport width */ img, video, iframe, table { max-width: 100% !important; height: auto !important; } } /* === HEADER & NAVIGATION FIXES === */ @media (max-width: 992px) { .main-header { height: 60px !important; min-height: 60px !important; padding: 0 16px !important; justify-content: space-between !important; position: relative !important; } /* CENTER THE LOGO ON MOBILE */ .main-header .logo { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; height: 100% !important; width: auto !important; /* Ensure width shrinks to content */ max-width: 200px !important; /* Prevent overlap with nav buttons */ z-index: 5; } /* Fix Logo Size */ .main-header .logo .logo-icon { height: 32px !important; width: auto !important; } /* Fix Navigation Items Spacing */ .navbar-left, .navbar-right { gap: 10px !important; } /* Hide text labels on mobile nav, show icons only */ .navbar a span:not(.cart-badge) { display: none !important; } .navbar a i { font-size: 1.2rem !important; margin: 0 !important; } /* Ensure account dropdown works on mobile */ .account-dropdown .account-menu { right: -10px !important; width: 200px !important; } } /* === SHOP PAGE FIXES === */ @media (max-width: 768px) { /* Fix Hero Section */ .shop-hero { padding: 80px 16px 30px !important; /* Top padding accounts for fixed header */ min-height: auto !important; } .shop-hero-content { padding: 0 !important; } .hero-logo-img { max-width: 280px !important; } /* Fix Stats Container */ .stats-container { gap: 20px !important; margin-top: 20px !important; } .stat-item { flex: 1 1 30% !important; /* Allow wrapping */ min-width: 80px !important; } .stat-number { font-size: 1.5rem !important; } .stat-label { font-size: 0.75rem !important; } /* Fix Product Grid */ .product-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; /* Force 2 columns on mobile */ gap: 12px !important; padding-bottom: 60px !important; /* Space for bottom nav/footer */ } /* On very small screens, maybe 1 column is better, but 2 is standard for e-commerce */ @media (max-width: 360px) { .product-grid { grid-template-columns: 1fr !important; } } /* Fix Product Card */ .product-card-modern { height: 100% !important; /* Ensure uniform height in grid row */ display: flex !important; flex-direction: column !important; } .product-image-container { height: 160px !important; min-height: 160px !important; } .product-info { padding: 10px !important; gap: 4px !important; } .product-title { font-size: 0.95rem !important; min-height: auto !important; line-height: 1.3 !important; margin-bottom: 4px !important; } .product-description { display: -webkit-box !important; /* Show description on mobile */ -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; font-size: 1rem !important; } .product-price { font-size: 1rem !important; } .product-actions-container { padding: 10px !important; margin-top: 0 !important; } .add-to-cart-btn { height: 36px !important; font-size: 0.85rem !important; padding: 0 8px !important; } .quantity-selector { height: 30px !important; width: 80px !important; } /* Fix Cart Toggle Button */ .cart-toggle-btn { top: auto !important; bottom: 20px !important; right: 20px !important; background: #800000 !important; /* Restore background for visibility */ border-radius: 50% !important; width: 56px !important; height: 56px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; padding: 0 !important; } .cart-toggle-btn i { font-size: 24px !important; color: white !important; text-shadow: none !important; } .cart-badge { top: 0 !important; right: 0 !important; border: 2px solid #fff !important; } } /* === AUTH PAGE FIXES === */ @media (max-width: 768px) { .auth-container { width: 100% !important; padding: 20px !important; margin: 80px auto 40px !important; } .auth-card { padding: 24px 16px !important; } .form-row { grid-template-columns: 1fr !important; gap: 16px !important; } } /* === DASHBOARD FIXES === */ @media (max-width: 992px) { .dashboard-wrapper { flex-direction: column !important; padding: 0 16px !important; margin-top: 20px !important; } .dashboard-sidebar { width: 100% !important; margin-bottom: 20px !important; position: static !important; } .dashboard-content { padding: 20px !important; } .stats-grid { grid-template-columns: 1fr !important; } } /* === MODAL FIXES === */ @media (max-width: 768px) { .modal-content { width: 90% !important; margin: 20px auto !important; max-height: 85vh !important; overflow-y: auto !important; } .product-modal-content { flex-direction: column !important; } .modal-image-col, .modal-info-col { width: 100% !important; } .modal-image-col { height: 250px !important; } } /* === SHOP MOBILE REPAIRS (VISIBILITY & LAYOUT FORCE) === */ @media (max-width: 992px) { /* 0. PARENT CONTAINER EXPANSION - CRITICAL LAYOUT FIXES */ /* Ensure containers do not collapse or cut off content */ html, body { overflow-x: hidden !important; position: relative !important; } .shop-main, .shop-layout, .shop-products { height: auto !important; min-height: 0 !important; overflow: visible !important; display: block !important; /* Ensure block formatting context for wrappers */ } .shop-main .container, .product-section .container { padding-left: 0 !important; padding-right: 0 !important; max-width: 100vw !important; width: 100% !important; margin: 0 !important; height: auto !important; /* Allow expansion */ } /* Wrapper fix if exists */ .row { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; padding: 0 !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; } /* 1. FORCE GRID VISIBILITY - DISABLE ANIMATIONS ON MOBILE */ .product-grid .product-card-modern, .product-grid .product-card-modern:nth-child(n) { opacity: 1 !important; transform: none !important; visibility: visible !important; animation: none !important; transition: none !important; will-change: auto !important; } /* 2. OPTIMIZED MODERN MOBILE GRID (Maximize Width & Center) */ .product-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; /* Return to 1fr for cleaner gap handling */ justify-content: start !important; /* Default flow */ gap: 8px !important; /* TIGHT GAP (4px each side) */ padding: 4px !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; height: auto !important; /* Enforce auto height to push footer */ overflow: visible !important; } /* 3. MODERN CARD STRUCTURE - COMPACT & WIDER LOOK */ .product-card-modern { background: #ffffff !important; border: 1px solid rgba(0,0,0,0.06) !important; box-shadow: 0 4px 8px rgba(0,0,0,0.04) !important; border-radius: 6px !important; height: 100% !important; /* Fill grid cell */ min-height: 290px !important; /* Slightly reduced height to fit more info if needed */ display: flex !important; flex-direction: column !important; overflow: hidden !important; position: relative !important; width: 100% !important; margin-bottom: 0 !important; /* Let grid gap handle spacing */ } /* QUICK VIEW RESTORED - RED CIRCLE, NO TEXT, TOP-RIGHT */ .mobile-quick-view-btn { display: flex !important; position: absolute !important; top: 6px !important; right: 6px !important; width: 32px !important; height: 32px !important; background: #800000 !important; border-radius: 50% !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important; z-index: 20 !important; border: 1px solid rgba(255,255,255,0.2) !important; color: white !important; left: unset !important; bottom: unset !important; font-size: 0 !important; } .mobile-quick-view-btn i { font-size: 14px !important; color: white !important; margin: 0 !important; } /* 4. IMAGE - SQUARE ASPECT RATIO */ .product-image-container { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; background: #f8f8f8 !important; padding: 0 !important; position: relative !important; display: block !important; flex-shrink: 0 !important; } .product-image { height: 100% !important; width: 100% !important; object-fit: contain !important; padding: 6px !important; background: white !important; } /* FIX: HIDE DESCRIPTION FORCEFULLY */ .product-description, .product-card-modern .product-description, .product-info p:not(.product-category):not(.price-container) { display: none !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; } /* 5. COMPACT INFO AREA - Absolute Footer Layout */ .product-info { padding: 10px 6px 50px 6px !important; display: flex !important; flex-direction: column !important; align-items: center !important; background: #fff !important; flex-grow: 1 !important; min-height: 100px !important; position: relative !important; justify-content: flex-start !important; } /* Title Centered & Compact */ .product-title { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: 0.8rem !important; font-weight: 600 !important; line-height: 1.2 !important; text-align: center !important; margin: 0 !important; padding: 0 !important; color: #111 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; width: 100% !important; height: 2.4em !important; } /* Position Price Bottom Left */ .price-container { position: absolute !important; bottom: 8px !important; left: 8px !important; margin: 0 !important; width: auto !important; padding: 0 !important; z-index: 5 !important; } .product-price { font-size: 0.9rem !important; color: #111 !important; font-weight: 700 !important; } /* Position Add Button Bottom Right */ .product-actions { display: flex !important; position: absolute !important; bottom: 6px !important; right: 6px !important; margin: 0 !important; padding: 0 !important; width: auto !important; visibility: visible !important; z-index: 10 !important; } /* Hide Quantity Input */ .quantity-selector { display: none !important; } /* YELLOW SQUARE Add Button - FIXED & TEXT REMOVED */ .add-to-cart-btn { width: 36px !important; /* Square Size */ height: 36px !important; min-width: 36px !important; min-height: 36px !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #f59e0b !important; color: transparent !important; /* HIDE TEXT COLOR */ border-radius: 6px !important; box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2) !important; border: none !important; font-size: 0 !important; overflow: hidden !important; position: relative !important; } /* Icon Centering */ .add-to-cart-btn i { font-size: 16px !important; color: #fff !important; /* Restore Icon Color */ position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; display: block !important; visibility: visible !important; } /* Strict Text Hiding - Super Aggressive */ .add-to-cart-btn span { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; position: absolute !important; z-index: -1 !important; } /* Hide badges */ .product-badge { display: none !important; } .product-overlay { display: none !important; } /* FIX FOOTER OVERLAP */ .main-footer { position: relative !important; z-index: 50 !important; margin-top: 0 !important; width: 100% !important; clear: both !important; } } /* === FOOTER FIXES === */ @media (max-width: 768px) { .main-footer { padding: 40px 16px 20px !important; text-align: center !important; } .footer-content { flex-direction: column !important; gap: 30px !important; } .footer-section { width: 100% !important; align-items: center !important; } .footer-section h4::after { left: 50% !important; transform: translateX(-50%) !important; } .social-links { justify-content: center !important; } } /* === CART SIDEBAR FIXES === */ @media (max-width: 768px) { .cart-sidebar { width: 100% !important; max-width: 100% !important; } }