/* please use https://cssminifier.com/ to minify the css file before production */ :root { --font-color: #333333; --font-color-alt: #333333; --bg-color: #ffffff; --wrap-bg-color: #eee; --main-color: #669933; --link-border: #73ac39; --link-hover: #406020; --table-header: #eee; --table-odd: #e6e6e6; --table-even: #f6f6f6; --table-highlight-row: #ffff99; --table-highlight-new: #e2fdef; --table-bottom-border: #ddd; --table-disabled-row: #e2e2e2; --settings-bg-color: #fbfbfb; --settings-border-color: #e4e4e4; --settings-fieldnote: #4e4e4e; --holiday-snow: none; --holiday-halloween: none; } [data-theme="darkgreen"] { --main-color: #028034; --link-border: #048e3a; --link-hover: #006327; } [data-theme="lightblue"] { --main-color: #0ea5e9; --link-border: #0284c7; --link-hover: #0369a1; } [data-theme="blue"] { --main-color: #2196f3; --link-border: #1e90ea; --link-hover: #1b82d4; } [data-theme="darkblue"] { --main-color: #114e8c; --link-border: #538cc6; --link-hover: #0d3b69; } [data-theme="brightpink"] { --main-color: #ec4899; --link-border: #db2777; --link-hover: #be185d; } [data-theme="brown"] { --main-color: #c18c3a; --link-border: #ac6f39; --link-hover: #603d20; } [data-theme="grey"] { --main-color: #6b7280; --link-border: #4b5563; --link-hover: #374151; } [data-theme="lightpurple"] { --main-color: #818cf8; --link-border: #6366f1; --link-hover: #4f46e5; } [data-theme="purple"] { --main-color: #b13ff9; --link-border: #a639ea; --link-hover: #9932da; } [data-theme="orange"] { --main-color: #ff9800; --link-border: #e88b02; --link-hover: #e28804; } [data-theme="pink"] { --main-color: #f472b6; --link-border: #ec4899; --link-hover: #db2777; } [data-theme="red"] { --main-color: #e03030; --link-border: #ca2929; --link-hover: #bd2727; } [data-theme="yellow"] { --main-color: #eab308; --link-border: #ca8a04; --link-hover: #a16207; } [data-theme="black"] { --main-color: #313131; --link-border: #252525; --link-hover: #1b1b1b; } [data-bg="grey"] { --font-color: #000; --font-color-alt: #000; --bg-color: #e5e7eb; --wrap-bg-color: #d1d5db; --table-row-odd: #dadada; --table-row-even: #efefef; --settings-bg-color: var(--bg-color); --settings-border-color: var(--wrap-bg-color); --settings-fieldnote: var(--font-color); } [data-bg="yellow"] { --font-color: #000; --font-color-alt: #000; --bg-color: #fefce8; --wrap-bg-color: #fef9c3; --table-row-odd: #fef9c3; --table-row-even: #fef08a; --settings-bg-color: var(--bg-color); --settings-border-color: var(--wrap-bg-color); --settings-fieldnote: var(--font-color); } [data-bg="darkblue"] { --font-color: #FFF; --font-color-alt: #000; --bg-color: #015773; --wrap-bg-color: #064d6f; --table-header: #174c65; --table-row-odd: #1c5773; --table-row-even: #124d69; --settings-bg-color: var(--bg-color); --settings-border-color: var(--wrap-bg-color); --settings-fieldnote: var(--font-color); } [data-bg="red"] { --font-color: #FFF; --font-color-alt: #000; --bg-color: #fecaca; --wrap-bg-color: #fca5a5; --table-header: #f87171; --table-row-odd: #fecaca; --table-row-even: #fee2e2; --settings-bg-color: var(--bg-color); --settings-border-color: var(--wrap-bg-color); --settings-fieldnote: var(--font-color); } [data-bg="purple"] { --font-color: #000; --font-color-alt: #000; --bg-color: #ebe1ff; --wrap-bg-color: #deceff; --table-header: #d2bcff; --table-row-odd: #ebe1ff; --table-row-even: #e0d1ff; --settings-bg-color: var(--bg-color); --settings-border-color: var(--wrap-bg-color); --settings-fieldnote: var(--font-color); } [data-bg="pink"] { --font-color: #000; --font-color-alt: #000; --bg-color: #ffe7f1; --wrap-bg-color: #ffd6e9; --table-header: #f3b1d0; --table-row-odd: #facce2; --table-row-even: #ffdded; --settings-bg-color: var(--bg-color); --settings-border-color: var(--wrap-bg-color); --settings-fieldnote: var(--font-color); } [data-bg="green"] { --font-color: #000; --font-color-alt: #000; --bg-color: #bbf7d0; --wrap-bg-color: #86efac; --table-header: #4ade80; --table-row-odd: #bbf7d0; --table-row-even: #dcfce7; --settings-bg-color: var(--bg-color); --settings-border-color: var(--wrap-bg-color); --settings-fieldnote: var(--font-color); } [data-bg="teal"] { --font-color: #000; --font-color-alt: #000; --bg-color: #99f6e4; --wrap-bg-color: #5eead4; --table-header: #2dd4bf; --table-row-odd: #99f6e4; --table-row-even: #ccfbf1; --settings-bg-color: var(--bg-color); --settings-border-color: var(--wrap-bg-color); --settings-fieldnote: var(--font-color); } [data-bg="peach"] { --font-color: #000; --font-color-alt: #000; --bg-color: #ffe7d9; --wrap-bg-color: #fddcc5; --table-header: #f5dac8; --table-row-odd: #ffe1cc; --table-row-even: #fce7d9; --settings-bg-color: var(--bg-color); --settings-border-color: var(--wrap-bg-color); --settings-fieldnote: var(--font-color); } [data-bg="orange"] { --font-color: #000; --font-color-alt: #000; --bg-color: #fed7aa; --wrap-bg-color: #fdba74; --table-header: #fb923c; --table-row-odd: #fed7aa; --table-row-even: #ffedd5; --settings-bg-color: var(--bg-color); --settings-border-color: var(--wrap-bg-color); --settings-fieldnote: var(--font-color); } [data-bg="christmas"] { --font-color: #FFF; --font-color-alt: #000; --bg-color: #525252; --wrap-bg-color: #006719; --table-header: #d03d3d; --table-row-odd: #065f46; --table-row-even: #047857; --settings-bg-color: var(--bg-color); --settings-border-color: var(--wrap-bg-color); --settings-fieldnote: var(--font-color); --holiday-snow: block; } [data-bg="halloween"] { --font-color: #FFF; --font-color-alt: #000; --bg-color: #0d0d0d; --wrap-bg-color: #131313; --table-header: #131313; --table-row-odd: #404040; --table-row-even: #363636; --settings-bg-color: var(--bg-color); --settings-border-color: var(--wrap-bg-color); --settings-fieldnote: var(--font-color); --holiday-halloween: block; } .tshirt .tshirtinfo .newDropdown { background-color: #fff; border: 1px solid #ddd; color: #333; font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-weight: 500; margin-right: 10px; max-width: none; min-width: 110px; } .tshirt .tshirtinfo .newDropdown:hover { border-color: #5ab4de; } .tshirt .tshirtinfo .newDropdown > span { font-size: 14px; line-height: 30px; max-width: none; width: 85%; } @media only screen and (max-width: 998px){ .tshirt .tshirtinfo .newDropdown > span { width: 80%; } } @media only screen and (max-width: 767px){ .tshirt .tshirtinfo .newDropdown > span { width: 90%; } } .tshirt .tshirtinfo .newDropdown > span:after { border-width: 6px; top:12px; } .newDropdown { background-clip: padding-box; background-color: #eee; border: 1px solid #ddd; color: #999; display: inline-block; font-weight: 700; width:50%; height: 30px; moz-background-clip: padding; moz-border-radius: 4px; ms-background-clip: padding-box; ms-border-radius: 4px; o-background-clip: padding-box; o-border-radius: 4px; position: relative; text-align: left; vertical-align: middle; webkit-background-clip: padding-box; webkit-border-radius: 4px; } @media only screen and (max-width: 767px){ .newDropdown { width: 100%; } } .newDropdown:active { background-color: #ddd;border-color: #ccc;} .newDropdown.warn { border: solid 2px #c00; } .newDropdown.warn > span { background: #ffcaca; } .newDropdown > span { cursor: pointer; display: block; line-height: 24px; max-width: 94px; overflow: hidden; padding: 0 26px 0 10px; position: relative; text-overflow: ellipsis; white-space: nowrap; } .newDropdown > span:after { border-color: transparent; border-style: solid; border-top-color: #666; border-width: 5px; content: ''; display: inline-block; height: 0; position: absolute; right: 8px; top: 10px; width: 0; } .newDropdown > span > b { color: #666; } .newDropdown > ul { background-clip: padding-box; background-color: white; border-radius: 0 4px 4px 4px; box-shadow: rgba(0, 0, 0, 0.35) 0 5px 8px; display: none; list-style: none; margin: 0; moz-background-clip: padding; moz-border-radius: 0 4px 4px 4px; moz-box-shadow: rgba(0, 0, 0, 0.35) 0 5px 8px; ms-background-clip: padding-box; ms-border-radius: 0 4px 4px 4px; ms-box-shadow: rgba(0, 0, 0, 0.35) 0 5px 8px; o-background-clip: padding-box; o-border-radius: 0 4px 4px 4px; o-box-shadow: rgba(0, 0, 0, 0.35) 0 5px 8px; padding: 0; padding: 4px; position: absolute; webkit-background-clip: padding-box; webkit-border-radius: 0 4px 4px 4px; webkit-box-shadow: rgba(0, 0, 0, 0.35) 0 5px 8px; z-index: 9; } .newDropdown > ul > li { margin: 0; } .newDropdown > ul > li { color: #333; cursor: pointer; display: block; font-size: 12px; font-weight: 400; line-height: 24px; min-width: 120px; padding: 0 8px; white-space: nowrap; } .newDropdown > ul > li:first-child { border-top: 0; } .newDropdown > ul > li:hover { background-clip: padding-box; background-color: var(--main-color); color: #fff; moz-background-clip: padding; moz-border-radius: 4px; ms-background-clip: padding-box; ms-border-radius: 4px; o-background-clip: padding-box; o-border-radius: 4px; webkit-background-clip: padding-box; webkit-border-radius: 4px; } #tshirtBg { height: 363px; width: 400px; position: relative; margin-right: auto; margin-left: auto; background-position: center top; background-size: contain; background-repeat: no-repeat; } .overlaycover { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } @media only screen and (max-width: 998px){ #tshirtBg{ width: 320px; height: 290.5px; } } .overlayBg.black { background-color: #000 !important; } .overlayBg.white { background-color: #FFF !important; } .overlayBg.charcoalgrey { background-color: #787a81 !important; } .overlayBg.daisy { background-color: #efce1f !important; } .overlayBg.darkchocolate { background-color: #54453d !important; } .overlayBg.forestgreen { background-color: #214637 !important; } .overlayBg.gold { background-color: #d5ab47 !important; } .overlayBg.irishgreen { background-color: #50af72 !important; } .overlayBg.lightblue { background-color: #96bddf !important; } .overlayBg.lightpink { background-color: #e8a4a7 !important; } .overlayBg.militarygreen { background-color: #4e5347 !important; } .overlayBg.navy { background-color: #11285a !important; } .overlayBg.orange { background-color: #e76621 !important; } .overlayBg.purple { background-color: #52316d !important; } .overlayBg.red { background-color: #d72739 !important; } .overlayBg.royalblue { background-color: #3572b5 !important; } .overlayBg.sportgrey { background-color: #a9a9aa !important; } .overlayBg.tan { background-color: #ddccae !important; } .overlayBg.navyringer { background-color: #FFF !important; } .overlayBg.blackringer { background-color: #FFF !important; } .overlayBg.redringer { background-color: #FFF !important; } .overlayBg.burgundy { background-color: #b0486b !important; } .overlayBg.hotpink { background-color: #eb659b !important; } .overlayBg.hotpink { background-color: #eb659b; } .overlayBg.natural { background-color: #eadfd6; } .overlayBg.stainlesssteel { background-color: #C0C0C0; } .overlayBg.colorchanging { background-color: #000; } .overlayBg.aloe { background-color: #928e48; } .overlayBg.bluejean { background-color: #777c89; } .overlayBg.brick { background-color: #916d6e; } .overlayBg.salmon { background-color: #f76f63; } .overlayBg.lightgreen { background-color: #5c7664; } .overlayBg.grey { background-color: #95958d; } .overlayBg.pepper { background-color: #5c5e5d; } .overlayBg.periwinkle { background-color: #8c9ad7; } .overlayBg.watermelon { background-color: #f58a7c; } .overlayBg.crimsonred { background-color: #8c4549; } .overlayBg.vineyardred { background-color: #a5424c; } .overlayBg.neongreen { background-color: #a2ea00; } .overlayBg.silver { background-color: #b9bfc4; } .overlayBg.azalea { background-color: #d36ba1; } .overlayBg.sapphire { background-color: #0373b0; } .overlayBg.teal { background-color: #30b6b8; } .overlayBg.darkgrey { background-color: #4c474c; } .overlayBg.lightbrown { background-color: #857570; } .overlayBg.pink { background-color: #d2687d; } .overlayBg.citrus { background-color: #efce1f; } .overlayBg.montereysage { background-color: #4e5347; } .overlayBg.burntorange { background-color: #e76621; } .overlayBg.royalcaribe { background-color: #3572b5; } .tshirtOverlay.classic { width: 31.5%; margin-top:20.5%; } .tshirtOverlay.premium { width:31.5%; margin-top:20.5%; } .tshirtOverlay.ladies { width:31.5%; margin-top:20.5%; } .tshirtOverlay.hoodie { width:21%; margin-top:22%; } .tshirtOverlay.longsleeve { width:31.5%; margin-top:20.5%; } .tshirtOverlay.vneck { width:31.5%; margin-top:20.5%; } .tshirtOverlay.tanktop { width:31.5%; margin-top:25%; } .tshirtOverlay.kids { width:31.5%; margin-top:25%; } .tshirtOverlay.apron { width:20%; margin-top:19%; } .tshirtOverlay.babyonepiece { width:31.5%; margin-top:20.5%; } .tshirtOverlay.phonecase { width:31.5%; margin-top:22%; } .tshirtOverlay.ladiespremium { width: 26.5%; margin-top: 16.5%; margin-left: 9px; } .tshirtOverlay.ladiestanktop { width: 26.5%; margin-top: 24.5%; margin-left: 9px; } .tshirtOverlay.crewnecksweatshirt { width: 35.5%; margin-top: 15.5%; margin-left: 9px; } .tshirtOverlay.baseballraglan { width: 33.5%; margin-top: 14.5%; } .tshirtOverlay.hat { width: 26.5%; position: absolute; bottom: 0; vertical-align: bottom; margin-bottom: 34%; left: 38%; } .tshirtOverlay.mug { width: 42.5%; margin-top: 18.5%; margin-left: -30%; } .tshirtOverlay.totebag { width: 40%; margin-top: 24.5%; } .tshirtOverlay.dog { width: 39%; margin-top: 13%; } .tshirtOverlay.mousepad { margin-top: 3%; height: 300px; max-width: 90%; width: auto; } .tshirtOverlay.framedcanvas { width: 52%; margin-top: 10%; } .tshirtOverlay.travelmug { width: 33%; margin-top: 8%; margin-left: 10px; } .tshirtOverlay.facemask { width: 53%; margin-top: 18%; max-height: 212px; width: auto; height: auto; } .tshirtOverlay.neckgaiter { width: 43%; margin-top: 13%; } .tshirtOverlay.towels { width: 39%; margin-top: 13%; } .tshirtOverlay.truckerhat { width: 26.5%; margin-top: 28.5%; } .tshirtOverlay.vintageunisex { width: 31.5%; margin-top:20.5%; } .tshirtOverlay.tiedye { width: 31.5%; margin-top:20.5%; } .tshirtOverlay.kidstiedye { width: 31.5%; margin-top:20.5%; } .tshirtOverlay.youthhoodie { width: 24.5%; margin-top: 22.5%; } .tshirtOverlay.babybib { width: 29.5%; margin-top: 41.5%; } .tshirtOverlay.ringer { width: 31.5%; margin-top:20.5%; } .hidden{ display: none; } #verotitle { display: none; } /*standard*/ .tshirtBg.color1 { background-image: url("../images/shirts/classic/Black.png");} .tshirtBg.color2 { background-image: url("../images/shirts/classic/White.png");} .tshirtBg.color3 { background-image: url("../images/shirts/classic/CharcoalGrey.png");} .tshirtBg.color4 { background-image: url("../images/shirts/classic/Daisy.png");} .tshirtBg.color5 { background-image: url("../images/shirts/classic/DarkChocolate.png");} .tshirtBg.color6 { background-image: url("../images/shirts/classic/ForestGreen.png");} .tshirtBg.color7 { background-image: url("../images/shirts/classic/Gold.png");} .tshirtBg.color8 { background-image: url("../images/shirts/classic/IrishGreen.png");} .tshirtBg.color9 { background-image: url("../images/shirts/classic/LightBlue.png");} .tshirtBg.color10 { background-image: url("../images/shirts/classic/LightPink.png");} .tshirtBg.color11 { background-image: url("../images/shirts/classic/MilitaryGreen.png");} .tshirtBg.color12 { background-image: url("../images/shirts/classic/Navy.png");} .tshirtBg.color13 { background-image: url("../images/shirts/classic/Orange.png");} .tshirtBg.color14 { background-image: url("../images/shirts/classic/Purple.png");} .tshirtBg.color15 { background-image: url("../images/shirts/classic/Red.png");} .tshirtBg.color16 { background-image: url("../images/shirts/classic/RoyalBlue.png");} .tshirtBg.color17 { background-image: url("../images/shirts/classic/SportGrey.png");} .tshirtBg.color18 { background-image: url("../images/shirts/classic/Tan.png");} .tshirtBg.color23 { background-image: url("../images/shirts/classic/Burgundy.png");} .tshirtBg.color19 { background-image: url("../images/shirts/classic/NavyRinger.png");} .tshirtBg.color20 { background-image: url("../images/shirts/classic/BlackRinger.png");} .tshirtBg.color21 { background-image: url("../images/shirts/classic/RedRinger.png");} .tshirtBg.color37 { background-image: url("../images/shirts/classic/IrishGreenRinger.png");} .tshirtBg.color38 { background-image: url("../images/shirts/classic/RoyalBlueRinger.png");} .tshirtBg.color51 { background-image: url("../images/shirts/classic/NeonGreen.png");} .tshirtBg.color52 { background-image: url("../images/shirts/classic/Silver.png");} .tshirtBg.color53 { background-image: url("../images/shirts/classic/Azalea.png");} .tshirtBg.color54 { background-image: url("../images/shirts/classic/Sapphire.png");} /*mensfitted*/ .tshirtBg.color1.premium { background-image: url("../images/shirts/mensfitted/Black.png");} .tshirtBg.color2.premium { background-image: url("../images/shirts/mensfitted/White.png");} .tshirtBg.color3.premium { background-image: url("../images/shirts/mensfitted/CharcoalGrey.png");} .tshirtBg.color4.premium { background-image: url("../images/shirts/mensfitted/Daisy.png");} .tshirtBg.color5.premium { background-image: url("../images/shirts/mensfitted/DarkChocolate.png");} .tshirtBg.color8.premium { background-image: url("../images/shirts/mensfitted/IrishGreen.png");} .tshirtBg.color9.premium { background-image: url("../images/shirts/mensfitted/LightBlue.png");} .tshirtBg.color10.premium { background-image: url("../images/shirts/mensfitted/LightPink.png");} .tshirtBg.color11.premium { background-image: url("../images/shirts/mensfitted/MilitaryGreen.png");} .tshirtBg.color12.premium { background-image: url("../images/shirts/mensfitted/Navy.png");} .tshirtBg.color13.premium { background-image: url("../images/shirts/mensfitted/Orange.png");} .tshirtBg.color14.premium { background-image: url("../images/shirts/mensfitted/Purple.png");} .tshirtBg.color15.premium { background-image: url("../images/shirts/mensfitted/Red.png");} .tshirtBg.color16.premium { background-image: url("../images/shirts/mensfitted/RoyalBlue.png");} .tshirtBg.color17.premium { background-image: url("../images/shirts/mensfitted/SportGrey.png");} /*ladies*/ .tshirtBg.color1.ladies { background-image: url("../images/shirts/ladies/Black.png");} .tshirtBg.color2.ladies { background-image: url("../images/shirts/ladies/White.png");} .tshirtBg.color3.ladies { background-image: url("../images/shirts/ladies/CharcoalGrey.png");} .tshirtBg.color8.ladies { background-image: url("../images/shirts/ladies/IrishGreen.png");} .tshirtBg.color9.ladies { background-image: url("../images/shirts/ladies/LightBlue.png");} .tshirtBg.color10.ladies { background-image: url("../images/shirts/ladies/LightPink.png");} .tshirtBg.color11.ladies { background-image: url("../images/shirts/ladies/MilitaryGreen.png");} .tshirtBg.color12.ladies { background-image: url("../images/shirts/ladies/Navy.png");} .tshirtBg.color14.ladies { background-image: url("../images/shirts/ladies/Purple.png");} .tshirtBg.color15.ladies { background-image: url("../images/shirts/ladies/Red.png");} .tshirtBg.color16.ladies { background-image: url("../images/shirts/ladies/RoyalBlue.png");} .tshirtBg.color17.ladies { background-image: url("../images/shirts/ladies/SportGrey.png");} .tshirtBg.color53.ladies { background-image: url("../images/shirts/ladies/Azalea.png");} .tshirtBg.color54.ladies { background-image: url("../images/shirts/ladies/Sapphire.png");} /*hoodies*/ .tshirtBg.color1.hoodie { background-image: url("../images/shirts/hoodies/Black.png");} .tshirtBg.color2.hoodie { background-image: url("../images/shirts/hoodies/White.png");} .tshirtBg.color12.hoodie { background-image: url("../images/shirts/hoodies/Navy.png");} .tshirtBg.color15.hoodie { background-image: url("../images/shirts/hoodies/Red.png");} .tshirtBg.color16.hoodie { background-image: url("../images/shirts/hoodies/RoyalBlue.png");} .tshirtBg.color17.hoodie { background-image: url("../images/shirts/hoodies/SportGrey.png");} /*tanktops*/ .tshirtBg.color1.tanktop { background-image: url("../images/shirts/tanktop/Black.png");} .tshirtBg.color2.tanktop { background-image: url("../images/shirts/tanktop/White.png");} .tshirtBg.color3.tanktop { background-image: url("../images/shirts/tanktop/CharcoalGrey.png");} .tshirtBg.color12.tanktop { background-image: url("../images/shirts/tanktop/Navy.png");} .tshirtBg.color15.tanktop { background-image: url("../images/shirts/tanktop/Red.png");} .tshirtBg.color16.tanktop { background-image: url("../images/shirts/tanktop/RoyalBlue.png");} .tshirtBg.color17.tanktop { background-image: url("../images/shirts/tanktop/SportGrey.png");} /*vneck*/ .tshirtBg.color1.vneck { background-image: url("../images/shirts/vneck/Black.png");} .tshirtBg.color2.vneck { background-image: url("../images/shirts/vneck/White.png");} .tshirtBg.color3.vneck { background-image: url("../images/shirts/vneck/CharcoalGrey.png");} .tshirtBg.color12.vneck { background-image: url("../images/shirts/vneck/Navy.png");} .tshirtBg.color15.vneck { background-image: url("../images/shirts/vneck/Red.png");} .tshirtBg.color17.vneck { background-image: url("../images/shirts/vneck/SportGrey.png");} /* Kids */ .tshirtBg.color1.kids { background-image: url("../images/shirts/kids/Black.png");} .tshirtBg.color2.kids { background-image: url("../images/shirts/kids/White.png");} .tshirtBg.color3.kids { background-image: url("../images/shirts/kids/CharcoalGrey.png");} .tshirtBg.color4.kids { background-image: url("../images/shirts/kids/Daisy.png");} .tshirtBg.color5.kids { background-image: url("../images/shirts/kids/DarkChocolate.png");} .tshirtBg.color6.kids { background-image: url("../images/shirts/kids/ForestGreen.png");} .tshirtBg.color7.kids { background-image: url("../images/shirts/kids/Gold.png");} .tshirtBg.color8.kids { background-image: url("../images/shirts/kids/IrishGreen.png");} .tshirtBg.color9.kids { background-image: url("../images/shirts/kids/LightBlue.png");} .tshirtBg.color10.kids { background-image: url("../images/shirts/kids/LightPink.png");} .tshirtBg.color11.kids { background-image: url("../images/shirts/kids/MilitaryGreen.png");} .tshirtBg.color12.kids { background-image: url("../images/shirts/kids/Navy.png");} .tshirtBg.color13.kids { background-image: url("../images/shirts/kids/Orange.png");} .tshirtBg.color14.kids { background-image: url("../images/shirts/kids/Purple.png");} .tshirtBg.color15.kids { background-image: url("../images/shirts/kids/Red.png");} .tshirtBg.color16.kids { background-image: url("../images/shirts/kids/RoyalBlue.png");} .tshirtBg.color17.kids { background-image: url("../images/shirts/kids/SportGrey.png");} .tshirtBg.color18.kids { background-image: url("../images/shirts/kids/Tan.png");} .tshirtBg.color19.kids { background-image: url("../images/shirts/kids/NavyRinger.png");} .tshirtBg.color20.kids { background-image: url("../images/shirts/kids/BlackRinger.png");} .tshirtBg.color21.kids { background-image: url("../images/shirts/kids/RedRinger.png");} .tshirtBg.color23.kids { background-image: url("../images/shirts/kids/Burgundy.png");} .tshirtBg.color37.kids { background-image: url("../images/shirts/kids/IrishGreenRinger.png");} .tshirtBg.color38.kids { background-image: url("../images/shirts/kids/RoyalBlueRinger.png");} /*onepiece*/ .tshirtBg.color1.babyonepiece { background-image: url("../images/shirts/onesies/Black.png");} .tshirtBg.color2.babyonepiece { background-image: url("../images/shirts/onesies/White.png");} .tshirtBg.color8.babyonepiece { background-image: url("../images/shirts/onesies/IrishGreen.png");} .tshirtBg.color9.babyonepiece { background-image: url("../images/shirts/onesies/LightBlue.png");} .tshirtBg.color10.babyonepiece { background-image: url("../images/shirts/onesies/LightPink.png");} .tshirtBg.color12.babyonepiece { background-image: url("../images/shirts/onesies/Navy.png");} .tshirtBg.color15.babyonepiece { background-image: url("../images/shirts/onesies/Red.png");} .tshirtBg.color16.babyonepiece { background-image: url("../images/shirts/onesies/RoyalBlue.png");} .tshirtBg.color17.babyonepiece { background-image: url("../images/shirts/onesies/SportGrey.png");} .tshirtBg.color30.babyonepiece { background-image: url("../images/shirts/onesies/HotPink.png");} /*apron*/ .tshirtBg.color1.apron { background-image: url("../images/shirts/apron/Black.png");} .tshirtBg.color2.apron { background-image: url("../images/shirts/apron/White.png");} /*Phone*/ .tshirtBg.color1.phonecase { background-image: url("../images/shirts/phonecase/Black.png");} .tshirtBg.color2.phonecase { background-image: url("../images/shirts/phonecase/White.png");} .tshirtBg.color1.phonecase.size47, .tshirtBg.color1.phonecase.size49 { background-image: url("../images/shirts/phonecase/Black_iPhone7_8.png");} .tshirtBg.color2.phonecase.size47, .tshirtBg.color2.phonecase.size49 { background-image: url("../images/shirts/phonecase/White_iPhone7_8.png");} .tshirtBg.color1.phonecase.size48, .tshirtBg.color1.phonecase.size50 { background-image: url("../images/shirts/phonecase/Black_iPhone7_8plus.png");} .tshirtBg.color2.phonecase.size48, .tshirtBg.color2.phonecase.size50 { background-image: url("../images/shirts/phonecase/White_iPhone7_8plus.png");} .tshirtBg.color1.phonecase.size51 { background-image: url("../images/shirts/phonecase/Black_iPhoneX.png");} .tshirtBg.color2.phonecase.size51 { background-image: url("../images/shirts/phonecase/White_iPhoneX.png");} /*Long Sleeve*/ .tshirtBg.color1.longsleeve { background-image: url("../images/shirts/longsleeve/Black.png");} .tshirtBg.color2.longsleeve { background-image: url("../images/shirts/longsleeve/White.png");} .tshirtBg.color3.longsleeve { background-image: url("../images/shirts/longsleeve/CharcoalGrey.png");} .tshirtBg.color6.longsleeve { background-image: url("../images/shirts/longsleeve/ForestGreen.png");} .tshirtBg.color12.longsleeve { background-image: url("../images/shirts/longsleeve/Navy.png");} .tshirtBg.color16.longsleeve { background-image: url("../images/shirts/longsleeve/RoyalBlue.png");} .tshirtBg.color17.longsleeve { background-image: url("../images/shirts/longsleeve/SportGrey.png");} .tshirtBg.color15.longsleeve { background-image: url("../images/shirts/longsleeve/Red.png");} /*ladies premium*/ .tshirtBg.color1.ladiespremium { background-image: url("../images/shirts/ladiespremium/Black.png");} .tshirtBg.color2.ladiespremium { background-image: url("../images/shirts/ladiespremium/White.png");} .tshirtBg.color4.ladiespremium { background-image: url("../images/shirts/ladiespremium/Daisy.png");} .tshirtBg.color5.ladiespremium { background-image: url("../images/shirts/ladiespremium/DarkChocolate.png");} .tshirtBg.color7.ladiespremium { background-image: url("../images/shirts/ladiespremium/Gold.png");} .tshirtBg.color9.ladiespremium { background-image: url("../images/shirts/ladiespremium/LightBlue.png");} .tshirtBg.color10.ladiespremium { background-image: url("../images/shirts/ladiespremium/LightPink.png");} .tshirtBg.color11.ladiespremium { background-image: url("../images/shirts/ladiespremium/MilitaryGreen.png");} .tshirtBg.color12.ladiespremium { background-image: url("../images/shirts/ladiespremium/Navy.png");} .tshirtBg.color13.ladiespremium { background-image: url("../images/shirts/ladiespremium/Orange.png");} .tshirtBg.color14.ladiespremium { background-image: url("../images/shirts/ladiespremium/Purple.png");} .tshirtBg.color15.ladiespremium { background-image: url("../images/shirts/ladiespremium/Red.png");} .tshirtBg.color16.ladiespremium { background-image: url("../images/shirts/ladiespremium/RoyalBlue.png");} .tshirtBg.color17.ladiespremium { background-image: url("../images/shirts/ladiespremium/SportGrey.png");} .tshirtBg.color49.ladiespremium { background-image: url("../images/shirts/ladiespremium/CrimsonRed.png");} .tshirtBg.color55.ladiespremium { background-image: url("../images/shirts/ladiespremium/Teal.png");} .tshirtBg.color56.ladiespremium { background-image: url("../images/shirts/ladiespremium/DarkGrey.png");} .tshirtBg.color57.ladiespremium { background-image: url("../images/shirts/ladiespremium/LightBrown.png");} .tshirtBg.color58.ladiespremium { background-image: url("../images/shirts/ladiespremium/Pink.png");} /*ladies tanktop*/ .tshirtBg.color1.ladiestanktop { background-image: url("../images/shirts/ladiestanktop/Black.png");} .tshirtBg.color2.ladiestanktop { background-image: url("../images/shirts/ladiestanktop/White.png");} .tshirtBg.color8.ladiestanktop { background-image: url("../images/shirts/ladiestanktop/IrishGreen.png");} .tshirtBg.color12.ladiestanktop { background-image: url("../images/shirts/ladiestanktop/Navy.png");} .tshirtBg.color15.ladiestanktop { background-image: url("../images/shirts/ladiestanktop/Red.png");} .tshirtBg.color16.ladiestanktop { background-image: url("../images/shirts/ladiestanktop/RoyalBlue.png");} .tshirtBg.color17.ladiestanktop { background-image: url("../images/shirts/ladiestanktop/SportGrey.png");} /* Crewneck Sweatshirt */ .tshirtBg.color1.crewnecksweatshirt { background-image: url("../images/shirts/crewnecksweatshirt/Black.png");} .tshirtBg.color2.crewnecksweatshirt { background-image: url("../images/shirts/crewnecksweatshirt/White.png");} .tshirtBg.color12.crewnecksweatshirt { background-image: url("../images/shirts/crewnecksweatshirt/Navy.png");} .tshirtBg.color15.crewnecksweatshirt { background-image: url("../images/shirts/crewnecksweatshirt/Red.png");} .tshirtBg.color16.crewnecksweatshirt { background-image: url("../images/shirts/crewnecksweatshirt/RoyalBlue.png");} .tshirtBg.color17.crewnecksweatshirt { background-image: url("../images/shirts/crewnecksweatshirt/SportGrey.png");} /* 3/4 Sleeve Raglan */ .tshirtBg.color24.baseballraglan { background-image: url("../images/shirts/baseballraglan/GreyBlack.png");} .tshirtBg.color25.baseballraglan { background-image: url("../images/shirts/baseballraglan/WhiteBlack.png");} .tshirtBg.color26.baseballraglan { background-image: url("../images/shirts/baseballraglan/WhiteNavy.png");} .tshirtBg.color27.baseballraglan { background-image: url("../images/shirts/baseballraglan/WhiteRed.png");} .tshirtBg.color28.baseballraglan { background-image: url("../images/shirts/baseballraglan/BlackWhite.png");} .tshirtBg.color29.baseballraglan { background-image: url("../images/shirts/baseballraglan/GreyRed.png");} .tshirtBg.color34.baseballraglan { background-image: url("../images/shirts/baseballraglan/GreyNavy.png");} .tshirtBg.color35.baseballraglan { background-image: url("../images/shirts/baseballraglan/GreyRoyal.png");} .tshirtBg.color36.baseballraglan { background-image: url("../images/shirts/baseballraglan/WhiteRoyal.png");} /* Vintage unisex */ .tshirtBg.color3.vintageunisex { background-image: url("../images/shirts/vintage/CharcoalGrey.png");} .tshirtBg.color12.vintageunisex { background-image: url("../images/shirts/vintage/Navy.png");} .tshirtBg.color40.vintageunisex { background-image: url("../images/shirts/vintage/Aloe.png");} .tshirtBg.color41.vintageunisex { background-image: url("../images/shirts/vintage/BlueJean.png");} .tshirtBg.color42.vintageunisex { background-image: url("../images/shirts/vintage/Brick.png");} .tshirtBg.color43.vintageunisex { background-image: url("../images/shirts/vintage/Salmon.png");} .tshirtBg.color44.vintageunisex { background-image: url("../images/shirts/vintage/LightGreen.png");} .tshirtBg.color45.vintageunisex { background-image: url("../images/shirts/vintage/Grey.png");} .tshirtBg.color46.vintageunisex { background-image: url("../images/shirts/vintage/Pepper.png");} .tshirtBg.color47.vintageunisex { background-image: url("../images/shirts/vintage/Periwinkle.png");} .tshirtBg.color48.vintageunisex { background-image: url("../images/shirts/vintage/Watermelon.png");} .tshirtBg.color49.vintageunisex { background-image: url("../images/shirts/vintage/CrimsonRed.png");} .tshirtBg.color50.vintageunisex { background-image: url("../images/shirts/vintage/VineyardRed.png");} .tshirtBg.color59.vintageunisex { background-image: url("../images/shirts/vintage/Citrus.png");} .tshirtBg.color60.vintageunisex { background-image: url("../images/shirts/vintage/MontereySage.png");} .tshirtBg.color61.vintageunisex { background-image: url("../images/shirts/vintage/BurntOrange.png");} .tshirtBg.color62.vintageunisex { background-image: url("../images/shirts/vintage/RoyalCaribe.png");} /* Tie Dye */ .tshirtBg.color63.tiedye { background-image: url("../images/shirts/tiedye/RainbowSwirl.png");} .tshirtBg.color64.tiedye { background-image: url("../images/shirts/tiedye/RoyalBlueSwirl.png");} .tshirtBg.color65.tiedye { background-image: url("../images/shirts/tiedye/RedSwirl.png");} .tshirtBg.color66.tiedye { background-image: url("../images/shirts/tiedye/PurpleSwirl.png");} .tshirtBg.color67.tiedye { background-image: url("../images/shirts/tiedye/OrangeSwirl.png");} .tshirtBg.color68.tiedye { background-image: url("../images/shirts/tiedye/NavySwirl.png");} .tshirtBg.color69.tiedye { background-image: url("../images/shirts/tiedye/IrishGreenSwirl.png");} .tshirtBg.color70.tiedye { background-image: url("../images/shirts/tiedye/GoldSwirl.png");} .tshirtBg.color71.tiedye { background-image: url("../images/shirts/tiedye/ForestGreenSwirl.png");} .tshirtBg.color72.tiedye { background-image: url("../images/shirts/tiedye/BlackSwirl.png");} /* Kids Tie Dye */ .tshirtBg.color63.kidstiedye { background-image: url("../images/shirts/tiedye/RainbowSwirl.png");} .tshirtBg.color64.kidstiedye { background-image: url("../images/shirts/tiedye/RoyalBlueSwirl.png");} .tshirtBg.color65.kidstiedye { background-image: url("../images/shirts/tiedye/RedSwirl.png");} .tshirtBg.color72.kidstiedye { background-image: url("../images/shirts/tiedye/BlackSwirl.png");} /*Hat*/ .tshirtBg.color1.hat { background-image: url("../images/shirts/hat/Black.png");} .tshirtBg.color2.hat { background-image: url("../images/shirts/hat/White.png");} .tshirtBg.color3.hat { background-image: url("../images/shirts/hat/CharcoalGrey.png");} .tshirtBg.color6.hat { background-image: url("../images/shirts/hat/ForestGreen.png");} .tshirtBg.color7.hat { background-image: url("../images/shirts/hat/Gold.png");} .tshirtBg.color8.hat { background-image: url("../images/shirts/hat/IrishGreen.png");} .tshirtBg.color9.hat { background-image: url("../images/shirts/hat/LightBlue.png");} .tshirtBg.color12.hat { background-image: url("../images/shirts/hat/Navy.png");} .tshirtBg.color14.hat { background-image: url("../images/shirts/hat/Purple.png");} .tshirtBg.color15.hat { background-image: url("../images/shirts/hat/Red.png");} .tshirtBg.color16.hat { background-image: url("../images/shirts/hat/RoyalBlue.png");} .tshirtBg.color23.hat { background-image: url("../images/shirts/hat/Burgundy.png");} /*Mug*/ .tshirtBg.color1.mug { background-image: url("../images/shirts/mug/Black.png");} .tshirtBg.color2.mug { background-image: url("../images/shirts/mug/White.png");} .tshirtBg.color33.mug { background-image: url("../images/shirts/mug/WhiteBlack.png");} .tshirtBg.color73.mug { background-image: url("../images/shirts/mug/WhiteBlackAccent.png");} .tshirtBg.color74.mug { background-image: url("../images/shirts/mug/WhiteLightBlueAccent.png");} .tshirtBg.color75.mug { background-image: url("../images/shirts/mug/WhiteRedAccent.png");} .tshirtBg.color76.mug { background-image: url("../images/shirts/mug/WhitePinkAccent.png");} .tshirtBg.color77.mug { background-image: url("../images/shirts/mug/WhiteOrangeAccent.png");} .tshirtBg.color78.mug { background-image: url("../images/shirts/mug/WhiteLightGreenAccent.png");} .tshirtBg.color79.mug { background-image: url("../images/shirts/mug/WhiteNavyAccent.png");} /* Travel Mug */ .tshirtBg.color2.travelmug { background-image: url("../images/shirts/travelmug/White.png");} .tshirtBg.color32.travelmug { background-image: url("../images/shirts/travelmug/StainlessSteel.png");} /* Totebags */ .tshirtBg.color1.totebag { background-image: url("../images/shirts/totebag/Black.png");} .tshirtBg.color2.totebag { background-image: url("../images/shirts/totebag/White.png");} .tshirtBg.color8.totebag { background-image: url("../images/shirts/totebag/IrishGreen.png");} .tshirtBg.color12.totebag { background-image: url("../images/shirts/totebag/Navy.png");} .tshirtBg.color14.totebag { background-image: url("../images/shirts/totebag/Purple.png");} .tshirtBg.color15.totebag { background-image: url("../images/shirts/totebag/Red.png");} .tshirtBg.color16.totebag { background-image: url("../images/shirts/totebag/RoyalBlue.png");} .tshirtBg.color31.totebag { background-image: url("../images/shirts/totebag/Natural.png");} /* Dog tshirts */ .tshirtBg.color1.dog { background-image: url("../images/shirts/dog/Black.png");} .tshirtBg.color10.dog { background-image: url("../images/shirts/dog/LightPink.png");} .tshirtBg.color12.dog { background-image: url("../images/shirts/dog/Navy.png");} .tshirtBg.color15.dog { background-image: url("../images/shirts/dog/Red.png");} .tshirtBg.color17.dog { background-image: url("../images/shirts/dog/SportGrey.png");} .tshirtBg.color20.dog { background-image: url("../images/shirts/dog/LightPink.png");} /* Mousepad */ .tshirtBg.color2.mousepad { background-image: url("../images/shirts/mousepad/White.png");} /* Framed Canvas */ .tshirtBg.color1.framedcanvas { background-image: url("../images/shirts/framedcanvas/Black_23.png");} .tshirtBg.color2.framedcanvas { background-image: url("../images/shirts/framedcanvas/White_23.png");} .tshirtBg.color2.framedcanvas.size74, .tshirtBg.color2.framedcanvas.size62, .tshirtBg.color2.framedcanvas.size72, .tshirtBg.color2.framedcanvas.size65, .tshirtBg.color2.framedcanvas.size75, .tshirtBg.color2.framedcanvas.size68 { background-image: url("../images/shirts/framedcanvas/White_11.png");} .tshirtBg.color2.framedcanvas.size61, .tshirtBg.color2.framedcanvas.size64, .tshirtBg.color2.framedcanvas.size67, .tshirtBg.color2.framedcanvas.size70, .tshirtBg.color2.framedcanvas.size71 { background-image: url("../images/shirts/framedcanvas/White_12.png");} .tshirtBg.color2.framedcanvas.size60, .tshirtBg.color2.framedcanvas.size63, .tshirtBg.color2.framedcanvas.size66, .tshirtBg.color2.framedcanvas.size69, .tshirtBg.color2.framedcanvas.size73, .tshirtBg.color2.framedcanvas.size76 { background-image: url("../images/shirts/framedcanvas/White_23.png");} /* Face mask */ .tshirtBg.color2.facemask { background-image: url("../images/shirts/facemaskcover/White.png");} /* Neck Gaiter */ .tshirtBg.color1.neckgaiter { background-image: url("../images/shirts/neckgaiter/Black.png"); } .tshirtBg.color2.neckgaiter { background-image: url("../images/shirts/neckgaiter/White.png"); } .tshirtBg.color3.neckgaiter { background-image: url("../images/shirts/neckgaiter/CharcoalGrey.png");} .tshirtBg.color4.neckgaiter { background-image: url("../images/shirts/neckgaiter/Daisy.png");} .tshirtBg.color5.neckgaiter { background-image: url("../images/shirts/neckgaiter/DarkChocolate.png");} .tshirtBg.color6.neckgaiter { background-image: url("../images/shirts/neckgaiter/ForestGreen.png");} .tshirtBg.color7.neckgaiter { background-image: url("../images/shirts/neckgaiter/Gold.png");} .tshirtBg.color8.neckgaiter { background-image: url("../images/shirts/neckgaiter/IrishGreen.png");} .tshirtBg.color9.neckgaiter { background-image: url("../images/shirts/neckgaiter/LightBlue.png");} .tshirtBg.color10.neckgaiter { background-image: url("../images/shirts/neckgaiter/LightPink.png");} .tshirtBg.color12.neckgaiter { background-image: url("../images/shirts/neckgaiter/Navy.png");} .tshirtBg.color13.neckgaiter { background-image: url("../images/shirts/neckgaiter/Orange.png");} .tshirtBg.color14.neckgaiter { background-image: url("../images/shirts/neckgaiter/Purple.png");} .tshirtBg.color15.neckgaiter { background-image: url("../images/shirts/neckgaiter/Red.png");} .tshirtBg.color16.neckgaiter { background-image: url("../images/shirts/neckgaiter/RoyalBlue.png");} .tshirtBg.color17.neckgaiter { background-image: url("../images/shirts/neckgaiter/SportGrey.png");} .tshirtBg.color18.neckgaiter { background-image: url("../images/shirts/neckgaiter/Tan.png");} .tshirtBg.color23.neckgaiter { background-image: url("../images/shirts/neckgaiter/Burgundy.png");} /* Trucker Hat */ .tshirtBg.color1.truckerhat { background-image: url("../images/shirts/truckerhat/Black.png");} .tshirtBg.color25.truckerhat { background-image: url("../images/shirts/truckerhat/WhiteBlack.png");} /*youth hoodie*/ .tshirtBg.color1.youthhoodie { background-image: url("../images/shirts/youthhoodie/Black.png");} .tshirtBg.color2.youthhoodie { background-image: url("../images/shirts/youthhoodie/White.png");} .tshirtBg.color6.youthhoodie { background-image: url("../images/shirts/youthhoodie/ForestGreen.png");} .tshirtBg.color7.youthhoodie { background-image: url("../images/shirts/youthhoodie/Gold.png");} .tshirtBg.color8.youthhoodie { background-image: url("../images/shirts/youthhoodie/IrishGreen.png");} .tshirtBg.color9.youthhoodie { background-image: url("../images/shirts/youthhoodie/LightBlue.png");} .tshirtBg.color10.youthhoodie { background-image: url("../images/shirts/youthhoodie/LightPink.png");} .tshirtBg.color12.youthhoodie { background-image: url("../images/shirts/youthhoodie/Navy.png");} .tshirtBg.color13.youthhoodie { background-image: url("../images/shirts/youthhoodie/Orange.png");} .tshirtBg.color14.youthhoodie { background-image: url("../images/shirts/youthhoodie/Purple.png");} .tshirtBg.color15.youthhoodie { background-image: url("../images/shirts/youthhoodie/Red.png");} .tshirtBg.color16.youthhoodie { background-image: url("../images/shirts/youthhoodie/RoyalBlue.png");} .tshirtBg.color17.youthhoodie { background-image: url("../images/shirts/youthhoodie/SportGrey.png");} .tshirtBg.color23.youthhoodie { background-image: url("../images/shirts/youthhoodie/Burgundy.png");} /*baby bib*/ .tshirtBg.color1.babybib { background-image: url("../images/shirts/babybib/Black.png");} .tshirtBg.color2.babybib { background-image: url("../images/shirts/babybib/White.png");} .tshirtBg.color4.babybib { background-image: url("../images/shirts/babybib/Daisy.png");} .tshirtBg.color5.babybib { background-image: url("../images/shirts/babybib/DarkChocolate.png");} .tshirtBg.color7.babybib { background-image: url("../images/shirts/babybib/Gold.png");} .tshirtBg.color8.babybib { background-image: url("../images/shirts/babybib/IrishGreen.png");} .tshirtBg.color9.babybib { background-image: url("../images/shirts/babybib/LightBlue.png");} .tshirtBg.color12.babybib { background-image: url("../images/shirts/babybib/Navy.png");} .tshirtBg.color14.babybib { background-image: url("../images/shirts/babybib/Purple.png");} .tshirtBg.color15.babybib { background-image: url("../images/shirts/babybib/Red.png");} .tshirtBg.color16.babybib { background-image: url("../images/shirts/babybib/RoyalBlue.png");} .tshirtBg.color17.babybib { background-image: url("../images/shirts/babybib/SportGrey.png");} .tshirtBg.color18.babybib { background-image: url("../images/shirts/babybib/Tan.png");} .tshirtBg.color23.babybib { background-image: url("../images/shirts/babybib/Burgundy.png");} .tshirtBg.color55.babybib { background-image: url("../images/shirts/babybib/Teal.png");} .tshirtBg.color61.babybib { background-image: url("../images/shirts/babybib/BurntOrange.png");} /** Ringer **/ .tshirtBg.color19.ringer { background-image: url("../images/shirts/ringer/NavyRinger.png");} .tshirtBg.color20.ringer { background-image: url("../images/shirts/ringer/BlackRinger.png");} .tshirtBg.color21.ringer { background-image: url("../images/shirts/ringer/RedRinger.png");} .tshirtBg.color37.ringer { background-image: url("../images/shirts/ringer/IrishGreenRinger.png");} .tshirtBg.color38.ringer { background-image: url("../images/shirts/ringer/RoyalBlueRinger.png");} .inputform { padding-bottom: 15px; } #holiday-snow { display: var(--holiday-snow); position: relative; background: none; background-image: url('../images/snow2.png'), url('../images/snow3.png'); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index:-100; -webkit-animation: snow 15s linear infinite; -moz-animation: snow 15s linear infinite; -ms-animation: snow 15s linear infinite; animation: snow 15s linear infinite; } @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} } @-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 400px 1000px, 200px 400px, 100px 300px;} } @-webkit-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} } @-ms-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} } #holiday-halloween { display: var(--holiday-halloween); background-image: url('../images/stars.png'); position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; z-index:-1; animation:none; } #productBg { position: absolute; z-index: 3; min-height: 500px; height: 500px; } #canvas-wrap { background-color:#fff; box-shadow: rgba(0, 0, 0, 0.15) 0 4px 16px; } #productimage { z-index: 50; position: relative; height: 500px; min-height: 500px; } #productDetails{ display:none; } /** * New settings */ .settings_section { background-color: var(--settings-bg-color); border: solid 1px var(--settings-border-color); padding: 10px 5px; margin-bottom: 15px; border-radius: 4px; margin-top: 5px; } .settings_section.top_nav { display:flex; padding: 5px 5px; } .settings_section.top_nav > .nav_link { display:flex; width: 100%; justify-content: center; align-items: center; height: 40px; background-color: var(--bg-color); border: solid 1px #f5f5f5; cursor: pointer; font-size: 16px; color: var(--font-color); text-align: center; } .settings_section.top_nav > .nav_link:hover { background-color: var(--wrap-bg-color); border: solid 1px #dadada; } .settings_section.top_nav > .nav_link.selected { border: solid 1px #c3d7ff; background-color: #f1f9ff; } .settings_section > .field:hover > .field_note { /*display:block;*/ } .settings_section > .field { margin-bottom: 22px; } .settings_section > .flex-group, .admin-section > .flex-group { display: inline-block; vertical-align: top; min-width: 29%; margin-right: 1%; } .settings_section > .field > label, .settings_section > .flex-group > label, .settings_section > .flex-group > div > label, .admin-section > .flex-group > label, .admin-section > .flex-group > div > label { color: var(--settings-font-color); } .field_note { position: absolute; top:0px; right:0px; width: 48%; color: var(--settings-fieldnote); margin-top: 2px; } .checkbox_category { font-size: 16px; font-weight: bold; } /* Display Settings Themes */ #select-theme > ul { display:inline-block; list-style: none; padding:0; } .ds_theme { border-radius: 100%; min-width: 15px; max-width: 15px; min-height: 15px; max-height: 15px; list-style-type: none; margin: 4px; padding: 7px 7px; display: inline-block; position: relative; cursor: pointer; border: solid 1px #e4e4e4; } .ds_theme.selected { border: solid 1px #59f36a; background-image: url(../images/swatchcheck.png); background-size: 20px; background-repeat: no-repeat; /* background-attachment: fixed; */ background-position: center;} .ds_theme.green { background-color: #693; } .ds_theme.blue { background-color: #223597; } .ds_theme.yellow { background-color: #c8c82d; } .ds_theme.red { background-color: #660000; } .ds_theme.black { background-color: #3a3a3a; } .ds_theme.lightblue { background-color: #71b8cc; } .ds_theme.pink { background-color: #d65aa9; } .ds_theme.purple { background-color: #602056; } .ds_theme.brown { background-color: #603d20; } .ds_theme.orange { background-color: #e59522; } .ds_theme.darkgreen { background-color: #006666; } .ds_theme.lightpurple { background-color: #9966ff; } .ds_theme.brightpink { background-color: #ff99cc; } .ds_theme.darkblue { background-color: #336699; } .ds_theme.grey { background-color: #999999; } .leftCorner > ul { margin: 0px; } .leftCorner > ul:after { margin:0px; } ul.tabs { width: 100%; /*height: 75px; margin: -40px auto 0 0;*/ list-style: none; overflow: hidden; padding: 0; margin: 0 0 -4px 0; } ul.tabs li { float: left; width: auto; cursor: pointer; } ul.tabs li { position: relative; display: block; height: 26px; /*margin-top: 51px;*/ padding: 2px 10px 2px 10px; font-size: 13px; text-align: center; text-decoration: none; color: #ffffff; background: #a0aaac; margin-right: 2px; line-height: 25px; } .tabs li:first-child { z-index: 3; -webkit-border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; border-top-left-radius: 4px; } .tabs li:last-child { z-index: 1; -webkit-border-top-right-radius: 4px; -moz-border-radius-topright: 4px; border-top-right-radius: 4px; } ul.tabs li.active { /*margin: 51px 2px 0 0;*/ padding: 2px 10px 2px 10px; background: #6b797b; color: white; z-index: 4; outline: none; font-weight: bold; } .group:before, .group:after { content: " "; display: table; } .group:after { clear: both; } .categoryMainMenu { display: none; background-clip: padding-box; background-color: #eee; box-shadow: rgba(0, 0, 0, 0.35) 0 5px 8px; display: none; list-style: none; margin: 0; moz-background-clip: padding; moz-border-radius: 0 4px 4px 4px; moz-box-shadow: rgba(0, 0, 0, 0.35) 0 5px 8px; ms-background-clip: padding-box; ms-border-radius: 0 4px 4px 4px; ms-box-shadow: rgba(0, 0, 0, 0.35) 0 5px 8px; o-background-clip: padding-box; o-border-radius: 0 4px 4px 4px; o-box-shadow: rgba(0, 0, 0, 0.35) 0 5px 8px; position: absolute; webkit-background-clip: padding-box; webkit-border-radius: 0 4px 4px 4px; webkit-box-shadow: rgba(0, 0, 0, 0.35) 0 5px 8px; z-index: 9; height: 300px; overflow-x: hidden; padding-top:20px; width: 210px; text-transform: uppercase; font-size: 11px; } .categoryMainMenu ul li{ list-style:none; margin-top: 10px; } .categoryMainMenu h4{ padding-left: 20px; margin-bottom: 20px; } .categoryMainMenu.expand { height:100%; } .welcome-google-shopping{ width: 140px; margin-top:5px; } .guideArea { margin-top: 20px; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } a.skip-main { left:-999px; position:absolute; top:auto; width:1px; height:1px; overflow:hidden; z-index:-999; } a.skip-main:focus, a.skip-main:active { color: #fff; background-color:#000; left: auto; top: auto; width: 30%; height: auto; overflow:auto; margin: 10px 35%; padding:5px; border-radius: 15px; border:4px solid yellow; text-align:center; font-size:1.2em; z-index:999; } .tutorial { font-size: 0.9em; text-align: center; background-color: #47476b; width: 214px; height: 180px; float: left; margin-left: 5px; margin-top: 5px; border-radius: 5px; padding: 20px 10px; color: white; font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; } .tutorialRed{ font-size: 0.9em; background-color: #ff4d4d; text-align: center; width: 214px; height: 180px; float: left; margin-left: 5px; margin-top: 5px; border-radius: 5px; padding: 20px 10px; color: white; font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; } .tutorialRed:hover{ background-color: #ff8080; } .tutorial:hover { background-color: #666699; } .tutorial h1, .tutorialRed h1{ font-size: 1.5em; } .background-clip { background-clip: padding-box; moz-background-clip: padding; ms-background-clip: padding-box; o-background-clip: padding-box; webkit-background-clip: padding-box; } .price-wrap { float: left; font-size: 15px; font-weight: 400; text-align: right; width: 20px; padding-top: 5px; padding-right: 3px; } .lazy { display: none; } .clear { clear: both; content: ''; display: block; } .space { padding-right: 15px; } .space.small { padding-right: 5px; } .hide { display: none; visibility: hidden; } .indent { margin-left: 20px; } .nav { list-style: none; margin: 0; padding: 0; } .nav > li { margin: 0; } .center { display: block; margin-left: auto; margin-right: auto; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } address { font-style: normal; } img { border: 0; ms-interpolation-mode: bicubic; vertical-align: middle; } form { display: inline; margin: 0; } button, input, select, textarea { font-family: "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-size: 14px; margin: 0; vertical-align: middle; } button, input { line-height: normal; overflow: visible; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; webkit-appearance: button; } input[type="search"] { box-sizing: content-box; moz-box-sizing: content-box; webkit-appearance: textfield; webkit-box-sizing: content-box; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { webkit-appearance: none; } textarea { overflow: auto; vertical-align: top; } figure { margin: 0; } strong { font-weight: 700; } h1, h2, h3, h4, h5, h6 { line-height: 100%; margin: 0; text-rendering: optimizeLegibility; } h1 { font-family: "Segoe WP Light", "Segoe UI Light", "Segoe UI Web Light", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-size: 30px; font-weight: 100; margin-bottom: 12px; } h2 { font-family: "Segoe WP Semi Light", "Segoe UI Semi Light", "Segoe UI Web Semi Light", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-size: 25px; font-weight: 300; margin-bottom: 0px; } h3 { font-family: "Segoe WP Semi Light", "Segoe UI Semi Light", "Segoe UI Web Semi Light", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-size: 20px; font-weight: 300; margin-bottom: 3px; } h4 { font-size: 16px; font-weight: 400; margin-bottom: .8px; } h5 { font-size: 14px; font-weight: 400; margin-bottom: .8px; } h6 { font-size: 12px; font-weight: 400; margin-bottom: 4px; } p { margin: 0 0 24px; } ol, ul { margin: 0 0 24px; } ol li, ul li { margin-bottom: 5px; } dl { margin-bottom: 24px; overflow: hidden; zoom: 1; } dt { float: left; width: 172px; margin-right: 8px; clear: left; font-weight: 600; margin-bottom: 4px; min-height: 24px; } dd { margin-left: 180px; margin-bottom: 4px; border-left: 1px dotted #ddd; padding-left: 16px; min-height: 24px; } hr { background: transparent; border: 0; border-top: 1px solid #ddd; clear: both; margin: 24px 0; size: 0; } table { border-collapse: collapse; margin: 16px 0; width: 100%; } table.narrow { margin-top: 0px; } table caption { background: #eee; border-bottom: 1px solid #ccc; font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-size: 16px; font-weight: 600; padding: 12px; text-align: left; } table th { background-color: var(--table-header); /* background-image: linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); background-image: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); background-image: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); */ border-bottom: 1px solid #ccc; font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; font-weight: 600; padding: 4px 12px; text-align: left; white-space: nowrap; } table td { border-bottom: 1px solid #ddd; padding: 8px 12px; text-align: left; } table td.indent { padding-left: 30px; } table td.indent_ssub { padding-left: 60px; } table td.indent_sssub { padding-left: 90px; } table tr:nth-child(even) { background: var(--table-row-even); } table tr:nth-child(odd) { background: var(--table-row-odd); } table .empty-table { color: #666; padding: 32px; text-align: center; } .table-container { width: 100%; overflow-y: auto; overflow: auto; margin: 0 0 1em; height: auto; overflow-x: hidden; overflow-y: hidden; } /** * Flex Table */ .flextable { margin-bottom: 15px; } .flextable>.thead { display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: baseline; padding: 2px 0px; text-align: left; white-space: nowrap; font-size: 13px; font-weight: 600; background-color: var(--table-odd); background-image: url(/images/button.png); background-repeat: repeat-x; border-bottom: 1px solid var(--content-bg-border); font-weight: 500; } .flextable > .trow, .trow-with-inner > .inner-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; border-bottom: 1px solid var(--table-bottom-border); align-items: center; width: 100%; } .trow-with-inner { position: relative; } .flextable > .trow-with-inner { display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; justify-content: space-between; /*align-items: baseline;*/ border-bottom: 1px solid var(--table-bottom-border); align-items: center; } .trow-with-inner.disabled, .trow.disabled { background-color: var(--table-disabled-row); } /* admin-table equivalent: a row pair lives in . Paint the visible 's cells so the disabled cue carries over from the legacy .trow.disabled rule above. */ .admin-table tbody.item-id.disabled > tr > td { background-color: var(--table-disabled-row); } .trow-with-inner.selected { z-index:1000; background-color:#FFF; } .trow:nth-child(even) { background: var(--table-even); } .trow.highlight { background-color: var(--table-highlight-row); } .trow.new { background-color: var(--table-highlight-new); } .trow > .empty-table { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; font-style: italic; } .flextable.rtable {} .flextable>.caption { text-align: left; font-size: 16px; font-weight: 600; border-bottom: 1px solid #ccc; padding: 6px 16px; } .caption>.note { font-size: 12px; color: #999999; } .col { flex: 3; padding: 6px 12px; text-align: left; flex-basis: 2%; } .col.light { color: #c8c8c9; } .col.empty, .col.tiny { flex-grow: 0; white-space: nowrap; overflow-x: hidden; } .col.small-p1 { flex-grow: 0.1; overflow-x: hidden; } .col.small-p2 { flex-grow: 0.2; overflow-x: hidden; } .col.small-p3 { flex-grow: 0.3; overflow-x: hidden; } .col.small-p4 { flex-grow: 0.4; overflow-x: hidden; } .col.small-p5 { flex-grow: 0.5; overflow-x: hidden; } .col.small-p6 { flex-grow: 0.6; overflow-x: hidden; } .col.small { flex-grow: 1; overflow-x: hidden; } .col.medium { flex-grow: 1.4; overflow-x: hidden; } .col.large { flex-grow: 3; overflow-x: hidden; } .col.button-spacing { display: flex; flex-direction: row; justify-content: space-between; } .col-highlight { font-weight: normal; } .mobile-view-only { display:none; } .inlineblock { display: inline-block; } .item-controls { min-height: 50px; position: absolute; background-color: #FFF; border: solid 1px #cdcdcd; right: 160px; top: 26px; padding: 10px 20px; z-index: 1001; border-radius: 5px; align-content: center; animation: slideIn 0.2s forwards; } .item-controls > .item-buttons { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; } .item-controls.hidden { display: none; } .item-controls > .item-option, .item-buttons > .item-option { padding: 7px 7px; border-radius: 4px; margin-left: 10px; cursor: pointer; background-color: #f2f2f2; border: solid 1px #c1c1c1; color: #000; min-width: 25px; text-align: center; } .item-option > a { color:#000; } .item-option:hover > a { color:#FFF; } .item-option.enabled { background-color: #2196f3; border: solid 1px #03A9F4; color: #FFF; } .item-option:not(.enabled):hover { background-color: #64B5F6; color: #FFF; } .delete_item:hover { background-color: #ff5151 !important; color: #FFF; } .delete_item:hover > a { color: #FFF; } .control-icons { display: inline-block; } .desktop-view-only{ display:inline-block; } .controls-menu-icon { display:inline-block; } .controls-menu-icon.up { transform: rotate(180deg); } @keyframes slideIn { from { right: 100px; } to { right: 160px; } } @media screen and (max-width: 768px) { .item-controls { position: unset; width: 100%; border: none; } .mobilehead > .thead { display: none !important; } .mobilehead > .trow, .mobilehead * .inner-row { display: flex; position: relative; min-height: 110px; flex-direction: column; align-content: flex-start; align-items: flex-start; } .trow.narrow { min-height: 10px; } .cartitems > .trow > .col, .cartitems > .trow > div > .col { display: flex; } .mobile-pos { position: absolute; } .pos-top-right-1 { right: 4px; top: 4px; } .pos-top-right-2 { right: 4px; top: 30px; } .pos-top-right-3 { right: 4px; top: 60px; } .pos-bottom-right-1 { right: 4px; bottom: 4px; } .mobile-checkbox { transform: scale(1.25); } .col-highlight { font-weight: bold; } /* Order */ .mobile-order-1 { order: 1 !important; } .mobile-order-2 { order: 2 !important; } .mobile-order-3 { order: 3 !important; } .mobile-order-4 { order: 4; } .desktop-view-only { display:none; } .mobile-view-only { display:inline-block; padding-right: 10px; } } #loading { display: none; } #overlay { display: none; background-color: #00000059; bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 998; } #changeProductStyle{ padding:10px 30px; text-align: center; border-radius: 4px; margin:20px 0; outline: none; background-color: white; border: solid 0.5px #d8d8d8; } #changeProductStyle:hover{ border-color:var(--main-color); } @media only screen and (max-width: 767px) { #changeProductStyle{ width:100%; } } .style_category{ background-image: url("../images/style_category.png"); background-repeat: no-repeat; background-size: 16px 80px; display:block; float: left; width: 16px; height: 16px; margin-right: 2px; } .style_category.category_icon1{ background-position: 0 0; } .style_category.category_icon2{ background-position: 0 -16px; } .style_category.category_icon3{ background-position: 0 -32px; } .style_category.category_icon4{ background-position: 0 -48px; } .style_category.category_icon5{ background-position: 0 -64px; } .modal-item{ list-style-type: none; float:left; margin-left:5%; cursor: pointer; } .modal-item:hover{ color:var(--main-color); border-bottom: solid 1px var(--main-color); } .modal-list-content{ margin-left: 5%; } .item-outline{ border-bottom: solid 1px black; } .modal-window .field textarea { width: 438px; height: 100px; } .modal-window .field textarea.short { height: 50px; } .modal-window, .window { width: 480px; background-color: #e6e6e6; min-height: 100px; z-index: 999; box-shadow: rgba(0,0,0,.5) 0 4px 16px; border-radius: 8px; margin: 0 auto; } @media only screen and (max-width: 767px) { .modal-window{ width: 300px; } .modal-item{ margin-top:10px; } } .modal-window { display: none; } .modal-window.error { background-color: #fcdedd; } .modal-window.error > .modal-content { padding-left: 60px; background: url(/images/modal_icon_error.png) no-repeat 16px 16px; min-height: 34px; } .modal-window.success { background-color: #d0edd0; } .modal-window.success > .modal-content { padding-left: 60px; background: url(/images/modal_icon_success.png) no-repeat 16px 16px; min-height: 34px; } .modal-close { position: absolute; top: 10px; right: 10px; display: block; text-indent: -9000px; background: url(/images/modal_close.png) no-repeat; height: 24px; width: 24px; border-radius: 12px; cursor: pointer; } .modal-close:hover { background-position: 0 -24px; } .modal-close:active { background-position: 0 -48px; } .modal-caption { font-size: 20px; font-weight: 600; line-height: 44px; border-bottom: 1px solid rgba(0,0,0,.15); box-shadow: rgba(255,255,255,.75) 0 1px 0; display: block; margin: 0; padding: 0 16px; } .modal-content { padding: 16px; clear: both; overflow: hidden; } .modal-content > p:last-child { margin-bottom: 12px; } .modalWindow { width: 580px; z-index: 999; margin: 0 auto; display: none; background-color: #ffffff; -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 2px 5px; -moz-box-shadow: rgba(0, 0, 0, 0.15) 0 2px 5px; -ms-box-shadow: rgba(0, 0, 0, 0.15) 0 2px 5px; -o-box-shadow: rgba(0, 0, 0, 0.15) 0 2px 5px; box-shadow: rgba(0, 0, 0, 0.15) 0 2px 5px; min-height: 140px; position: relative; } .modalWindow .modalClose { position: absolute; top: 10px; right: 10px; display: block; text-indent: 100%; font-size: 0; line-height: 0; background: url("../images/modal_close.png") no-repeat; cursor: pointer; width: 24px; height: 24px; } .modalWindow .modalClose:hover { background-position: 0 -24px; } .modalWindow .modalClose:active { background-position: 0 -48px; } .modalWindow .modalCaption { background-color: #3a587b; background-image: -webkit-linear-gradient(90deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 100%); background-image: -moz-linear-gradient(90deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(90deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(90deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 100%); background-image: linear-gradient(90deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 100%); font-size: 16px; font-weight: 600; font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; line-height: 30px; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35); padding: 5px 20px; margin: 0; } .modalWindow .modalContent { padding: 20px; clear: both; overflow: hidden; } html, body { height: 100%; margin: 0; min-width: 320px; padding: 0; } body { background-color: var(--bg-color); background-image: url("../images/body.jpg"); background-size: 250px 250px; color:var(--font-color); font-family: "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-size: 13px; font-weight: 400; line-height: 20px; moz-text-size-adjust: 100%; ms-text-size-adjust: 100%; o-text-size-adjust: 100%; position: relative; text-size-adjust: 100%; webkit-font-smoothing: antialiased; webkit-text-size-adjust: 100%; } body.bg2{ background-image: url("../images/body2.jpg"); } body.bg3{ background-image: url("../images/body3.jpg"); } body.bg4{ background-image: url("../images/body4.jpg"); } body.bg5{ background-image: url("../images/body5.jpg"); } body.bg6{ background-image: url("../images/body6.jpg"); } body.bg7{ background-image: url("../images/body7.jpg"); } body.bg8{ background-image: url("../images/body8.jpg"); } @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { body { background-image: url("../images/body@2x.jpg"); } body.bg2{ background-image: url("../images/body2.jpg"); } body.bg3{ background-image: url("../images/body3.jpg"); } body.bg4{ background-image: url("../images/body4.jpg"); } body.bg5{ background-image: url("../images/body5.jpg"); } body.bg6{ background-image: url("../images/body6.jpg"); } body.bg7{ background-image: url("../images/body7.jpg"); } body.bg8{ background-image: url("../images/body8.jpg"); } } a { color: var(--main-color); cursor: pointer; outline: 0; text-decoration: none; } a:hover { color: var(--link-hover); } #admin_bar { min-height: 25px; font-size: 15px; background-color: #d69a1a !important; text-align: center; color: #fff; font-weight: bold; padding: 6px; } #admin_bar > .links { font-size: 14px; } #admin_bar > .links a, #admin_bar > .links a:hover, #admin_bar > .links a:visited, #admin_bar > .links a:active { color: #fff; } .ajaxSearchBox { display: none; width: 90%; max-width: 200px; z-index: 9000; position: absolute; background-color: #FFF; padding-left: 15px; border: 1px solid #BBBBBB; } .wrap { margin: 0 auto; max-width: 1200px; padding-left: 16px; padding-right: 16px; box-sizing: border-box; } .wrap.large { max-width: 1200px; } .tooltip { display: inline-block; border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; position: relative; } .tooltip span { display: none; background-color: #EEEEEE; border: 2px solid #BFBFBF; position: absolute; border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); font-family: Calibri, Tahoma, Geneva, sans-serif; margin-left: 0; width: 200px; right: 0; top: 40px; z-index: 99; padding-right: 10px; } @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .tooltip span { position: absolute; right: 0; top: -90px; z-index: 99; } } #branding { background-color: #292929; background-image: url("../images/header.jpg"); background-repeat: repeat-x; background-size: 417px 200px; color: #fff; } #branding.bg2 { background-image: url("../images/header2.jpg"); } #branding.bg3 { background-image: url("../images/header3.jpg"); } #branding.bg4 { background-image: url("../images/header4.jpg"); } #branding.bg5 { background-image: url("../images/header5.jpg"); } #branding.bg6 { background-image: url("../images/header6.jpg"); } #branding.bg7 { background-image: url("../images/header7.jpg"); } #branding.bg8 { background-image: url("../images/header8.jpg"); } #branding.bg9 { background-image: url("../images/header9.jpg"); } #branding.bg10 { background-image: url("../images/header10.jpg"); } #branding.bg11 { background-image: url("../images/header11.jpg"); } #branding.bg12 { background-image: url("../images/header12.jpg"); } #branding.bg13 { background-image: url("../images/header13.jpg"); } #branding.bg14 { background-image: url("../images/header14.jpg"); } #branding.bg15 { background-image: url("../images/header15.jpg"); } #branding.bg16 { background-image: url("../images/header16.jpg"); } #branding.bg17 { background-image: url("../images/header17.jpg"); } #branding.bg18 { background-image: url("../images/header18.jpg"); } @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { #branding { background-image: url("../images/header@2x.jpg"); } } #branding:after { clear: both; content: ''; display: block; } #header { height:100px; padding: 5px 0px; display: flex; justify-content: space-around; align-items: center; text-transform: uppercase; } #header:after { clear: both; content: ''; display: block; } #brandingLogo { border-right: 1px solid #414141; border-right: 1px solid rgba(255, 255, 255, 0.1); box-shadow: rgba(0, 0, 0, 0.1) 1px 0 0; float: left; font-size: 32px; font-weight: 400; line-height: 32px; margin: 0 16px 0 0; moz-box-shadow: rgba(0, 0, 0, 0.1) 1px 0 0; ms-box-shadow: rgba(0, 0, 0, 0.1) 1px 0 0; o-box-shadow: rgba(0, 0, 0, 0.1) 1px 0 0; padding: 0 20px 0 0; text-shadow: rgba(0, 0, 0, 0.35) 2px 2px 4px; text-transform: uppercase; webkit-box-shadow: rgba(0, 0, 0, 0.1) 1px 0 0; } #brandingLogo > a { color: #fff; display: block; } #brandingLogo > a > span { color: var(--main-color); } #brandingLogo > a > span + span { color: #fff; font-family: "Segoe WP Light", "Segoe UI Light", "Segoe UI Web Light", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-weight: 100; } .textlogo { font-size: 1.6vw; } #Coupon { width: 120px; } #navigation { float: left; text-shadow: rgba(0, 0, 0, 0.35) 1px 1px 2px; } #navigation #navigationToggle { background-clip: padding-box; background-color: #505050; background-color: rgba(255, 255, 255, 0.1); background-image: url("../images/menu.png"); background-position: center center; background-repeat: no-repeat; background-size: 32px 32px; border-radius: 4px; color: #fff; display: none; font-size: 14px; height: 32px; line-height: 24px; margin: -4px 0; moz-background-clip: padding; moz-border-radius: 4px; ms-background-clip: padding-box; ms-border-radius: 4px; o-background-clip: padding-box; o-border-radius: 4px; padding: 0 8px; padding: 0; text-indent: -9000px; webkit-background-clip: padding-box; webkit-border-radius: 4px; width: 32px; } @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { #navigation #navigationToggle { background-image: url("../images/menu@2x.png"); } } #navigation > ul { list-style: none; margin: 0; padding: 0; } #navigation > ul > li { margin: 0; margin-right:5px; } #navigation > ul > li { display: inline-block; } #navigation > ul > li > a { background-clip: padding-box; border-radius: 4px; color: #b4b4b4; color: rgba(255, 255, 255, 0.65); display: block; font-size: 16px; font-weight: 400; line-height: 32px; moz-background-clip: padding; moz-border-radius: 4px; ms-background-clip: padding-box; ms-border-radius: 4px; o-background-clip: padding-box; o-border-radius: 4px; padding: 0 16px; webkit-background-clip: padding-box; webkit-border-radius: 4px; } #navigation > ul > li > a { text-decoration: none; position: relative; z-index: 0; cursor: pointer; } #navigation > ul > li > a:before { position: absolute; width: 100%; height: 2px; left: 0px; top: 0px; content: ''; background: white; opacity: 0.3; transition: all 0.3s; } #navigation > ul > li > a:hover:before { height: 100%; } #navigation > ul > li.active > a { background-color: #505050; background-color: rgba(255, 255, 255, 0.1); color: #fff; font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-weight: 600; } .group:hover > ul { display: block; } /* Legacy .category-list / #categories_letters rules removed — replaced by the .categories-page / .categories-grid block further down in this file. */ #search { margin: 2px 0; float: right; } #search #search-input, #search input[type=search] { appearance: textfield; background-clip: padding-box; background-color: rgba(0, 0, 0, 0.75); background-image: url("../images/search.png"); background-position: 4px center; background-repeat: no-repeat; background-size: 17px 17px; border: 0; border-radius: 4px; box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0; color: #fff; font-size: 12px; height: 12px; min-height: 12px; moz-appearance: textfield; moz-background-clip: padding; moz-border-radius: 4px; moz-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0; ms-appearance: textfield; ms-background-clip: padding-box; ms-border-radius: 4px; ms-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0; o-appearance: textfield; o-background-clip: padding-box; o-border-radius: 4px; o-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0; outline: none; padding: 8px 8px 8px 24px; text-transform: uppercase; webkit-appearance: textfield; webkit-background-clip: padding-box; webkit-border-radius: 4px; webkit-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0; width: 112px; -moz-appearance: none; -webkit-appearance: none; appearance: none; } @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { #search #search-input, #search input[type=search] { background-image: url("../images/search@2x.png"); } } #search #search-submit, #search input[type=submit] { display: none; } .bigsearch > .searchbox { height: 30px; width: 70%; font-size: 20px; } .bigsearch > .searchbutton { height: 42px; width: 100px; } #subnavigation { background-clip: padding-box; background-color: #d6d6d6; background-image: url("../images/subnavigation.jpg"); background-repeat: repeat-x; background-size: 250px 250px; border-radius: 4px 4px 0 0; box-shadow: rgba(0, 0, 0, 0.35) 0 0 8px; clear: both; font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-size: 11px; font-weight: 600; moz-background-clip: padding; moz-border-radius: 4px 4px 0 0; moz-box-shadow: rgba(0, 0, 0, 0.35) 0 0 8px; ms-background-clip: padding-box; ms-border-radius: 4px 4px 0 0; ms-box-shadow: rgba(0, 0, 0, 0.35) 0 0 8px; o-background-clip: padding-box; o-border-radius: 4px 4px 0 0; o-box-shadow: rgba(0, 0, 0, 0.35) 0 0 8px; padding: 4px; text-transform: uppercase; webkit-background-clip: padding-box; webkit-border-radius: 4px 4px 0 0; webkit-box-shadow: rgba(0, 0, 0, 0.35) 0 0 8px; } @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { #subnavigation { background-image: url("../images/subnavigation@2x.jpg"); } } .mobile-cart-controls { display: none; } .updatecartwheel {display:inline-block;} /* New hover*/ #subnavigation nav > ul > li > a:before, #subnavigation nav > ul > li > a:after { position: absolute; left: 0px; width: 100%; height: 2px; background: #333; content: ""; opacity: 0; transition: all 0.3s; } #subnavigation nav > ul > li > a:before { top: 0px; transform: translateY(10px); } #subnavigation nav > ul > li > a:after { bottom: 0px; transform: translateY(-10px); } #subnavigation nav > ul > li > a:hover:before, #subnavigation nav > ul > li > a:hover:after { opacity: 1; transform: translateY(0px); } #subnavigation:after { clear: both; content: ''; display: block; } #subnavigation > nav { float: left; } #subnavigation > nav > ul { list-style: none; margin: 0; padding: 0; } #subnavigation > nav > ul > li { margin: 0; } #subnavigation > nav > ul > li { display: inline-block; margin-right: 2px; position: relative; } #subnavigation > nav > ul > li > a { background-clip: padding-box; border-radius: 4px; color: #666; display: block; font-size: 11px; line-height: 32px; moz-background-clip: padding; moz-border-radius: 4px; ms-background-clip: padding-box; ms-border-radius: 4px; o-background-clip: padding-box; o-border-radius: 4px; padding: 0 12px; webkit-background-clip: padding-box; webkit-border-radius: 4px; } #subnavigation > nav > ul > li:hover > a, #subnavigation > nav > ul > li > a:hover { color: #333; } #subnavigation > nav > ul > li:hover > a .icon, #subnavigation > nav > ul > li > a:hover .icon { ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; opacity: .75; } #subnavigation > nav > ul > li.active > a { background-color: var(--main-color); color: #fff; text-shadow: rgba(0, 0, 0, 0.35) 1px 1px 2px; } #subnavigation > nav > ul > li.active .icon { ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important; opacity: 1 !important; } #subnavigation > nav > ul > li:last-child { margin-right: 0; } #subnavigation > nav > ul > li.dd:hover > a { background-clip: padding-box; border-radius: 4px 4px 0 0; moz-background-clip: padding; moz-border-radius: 4px 4px 0 0; ms-background-clip: padding-box; ms-border-radius: 4px 4px 0 0; o-background-clip: padding-box; o-border-radius: 4px 4px 0 0; webkit-background-clip: padding-box; webkit-border-radius: 4px 4px 0 0; } #subnavigation > nav > ul > li.dd.active > a:after { border-top-color: #fff; } #subnavigation > nav > ul > li > ul { background-clip: padding-box; background-color: #eee; /*border-radius: 0 4px 4px 4px;*/ box-shadow: rgba(0, 0, 0, 0.35) 0 5px 8px; display: none; list-style: none; margin: 0; moz-background-clip: padding; moz-border-radius: 0 4px 4px 4px; moz-box-shadow: rgba(0, 0, 0, 0.35) 0 5px 8px; ms-background-clip: padding-box; ms-border-radius: 0 4px 4px 4px; ms-box-shadow: rgba(0, 0, 0, 0.35) 0 5px 8px; o-background-clip: padding-box; o-border-radius: 0 4px 4px 4px; o-box-shadow: rgba(0, 0, 0, 0.35) 0 5px 8px; padding: 0; padding: 4px; position: absolute; webkit-background-clip: padding-box; webkit-border-radius: 0 4px 4px 4px; webkit-box-shadow: rgba(0, 0, 0, 0.35) 0 5px 8px; z-index: 9; } #subnavigation > nav > ul > li > ul > li { margin: 0; } #subnavigation > nav > ul > li > ul > li { border-top: 1px solid #ddd; } #subnavigation > nav > ul > li > ul > li:first-child { border-top: 0; } #subnavigation > nav > ul > li > ul > li > a { background-clip: padding-box; /*border-radius: 4px;*/ color: #333; display: block; font-size: 12px; font-weight: 400; line-height: 24px; min-width: 120px; moz-background-clip: padding; moz-border-radius: 4px; ms-background-clip: padding-box; ms-border-radius: 4px; o-background-clip: padding-box; o-border-radius: 4px; padding: 0 8px; webkit-background-clip: padding-box; webkit-border-radius: 4px; } #subnavigation > nav > ul > li > ul > li > a:hover { background-color: var(--main-color); color: #fff; } #subnavigation > nav > ul > li:hover > ul { display: block; } #subnavigation #cart { float: right; } #subnavigation #cart > a { background-clip: padding-box; background-color: #eee; border-radius: 4px; color: #666; display: block; font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-weight: 600; moz-background-clip: padding; moz-border-radius: 4px; ms-background-clip: padding-box; ms-border-radius: 4px; o-background-clip: padding-box; o-border-radius: 4px; padding: 0 12px; webkit-background-clip: padding-box; webkit-border-radius: 4px; } #subnavigation #cart > a:before { background-image: url("../images/new_breadcrumb_cart.png"); background-repeat: no-repeat; background-size: 12px 132px; background-position: 0 0; content: ''; display: inline-block; height: 12px; margin-right: 4px; vertical-align: middle; width: 12px; } @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { #subnavigation #cart > a:before { background-image: url("../images/new_breadcrumb_cart@2x.png"); } } #subnavigation #cart > a > span { display: inline-block; line-height: 32px; vertical-align: middle; } #subnavigation #cart > a > var { color: var(--main-color); display: inline-block; font-size: 24px; font-style: normal; line-height: 32px; margin-left: 8px; vertical-align: middle; } #subnavigation #cart > a:hover { background-color: #fff; color: #333; } #subnavigation #cart > a:hover > var { color: var(--link-hover); } #subnavigation .icon { background-image: url("../images/subnav_icons.png"); background-repeat: no-repeat; background-size: 32px 256px; display: inline-block; height: 16px; margin: -1px 2px 1px -2px; ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; opacity: .5; vertical-align: text-bottom; width: 16px; } @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { #subnavigation .icon { background-image: url("../images/subnav_icons@2x.png"); } } .cart-shipping { background-color: #FFF; border: 1px solid #E5E2E2; color: #666666; display: inline-block; font-size: 16px; margin-bottom: 5px; margin-left: 5px; padding: 10px; width: 94%; cursor: pointer; border-radius: 2px; } .cart-shipping:hover { background-color: #EEEDED; color: #333333; } .cart-shipping > a, .cart-shipping > a:active, .cart-shipping > a:hover { color: #666666; } .shipping_days { color: #9e9e9e; font-size:12px; } .truck { background-image: url("/images/truck.png"); background-repeat: no-repeat; display: inline-block; height: 16px; padding-right: 5px; width: 16px; } .arrow:after { border-color: transparent; border-style: solid; border-top-color: #999; border-width: 5px; content: ''; display: inline-block; height: 0; margin: 12px -2px -4px 4px; width: 0; } /* Alt Sizing */ #alt_sizes { margin-top:0px; margin-bottom: 20px; } .size_button { cursor: pointer; display: inline-block; border: solid 0.5px #d8d8d8; padding: 4px; font-size: 14px; background-color: #fff; min-width: 30px; text-align: center; height: 20px; margin-right: 2px; color: var(--font-color-alt); } .sizeBtnRadius{ border-radius: 4px; } .size_button.selected { color:#FFF; } #alt_styles {} .style_button { cursor: pointer; display: inline-block; border: solid 1px #d8d8d8; padding: 4px; font-size: 14px; background-color: #fff; min-width: 30px; text-align: center; height: 20px; margin-right:2px; box-shadow: 3px 3px 4px 0px #c5c5c5; } .shirt_icons { background-image: url("/images/all_styles.png?v=1.30"); background-repeat: no-repeat; /* sprite native is 1300x600; halve to 650x300 so each 100x120 native cell displays at 50x60, matching the existing icon positions */ background-size: 650px 300px; border-radius: 4px; content: ''; display: block; float: left; height: 60px; width: 50px; padding: 0px; } .shirt_icons.black { background-image: url("/images/all_styles_black.png?v=1.30"); background-repeat: no-repeat; background-size: 650px 300px; border-radius: 4px; content: ''; display: block; float: left; height: 60px; width: 50px; padding: 0px; } .shirt_icons.standard { background-position: 0 0px; } .shirt_icons.mensfitted { background-position: -50px 0px; } .shirt_icons.ladies { background-position: -100px 0px; } .shirt_icons.hoodie { background-position: -150px 0px; } .shirt_icons.apron { background-position: -200px 0px; } .shirt_icons.vneck { background-position: -250px 0px; } .shirt_icons.tanktop { background-position: -300px 0px; } .shirt_icons.babyonepiece { background-position: -350px 0px; } .shirt_icons.phonecase { background-position: -400px 0px; } .shirt_icons.kids { background-position: -450px 0px; } .shirt_icons.hat { background-position: -500px 0px; } .shirt_icons.mug { background-position: -550px 0px; } .shirt_icons.longsleeve { background-position: -600px 0px; } /* Row 2 */ .shirt_icons.ladiespremium { background-position: -0px -60px; } .shirt_icons.ladiestanktop { background-position: -50px -60px; } .shirt_icons.crewnecksweatshirt { background-position: -100px -60px; } .shirt_icons.baseballraglan { background-position: -150px -60px; } .shirt_icons.dog { background-position: -200px -60px; } .shirt_icons.totebag { background-position: -250px -60px; } .shirt_icons.mousepad { background-position: -300px -60px; } .shirt_icons.framedcanvas { background-position: -350px -60px; } .shirt_icons.stretchedcanvas { background-position: -350px -60px; } .shirt_icons.travelmug { background-position: -400px -60px; } .shirt_icons.towel { background-position: -450px -60px; } .shirt_icons.facemask { background-position: -500px -60px; } .shirt_icons.neckgaiter { background-position: -550px -60px; } .shirt_icons.posterpaper { background-position: -600px -60px; } /* Row 3 */ .shirt_icons.truckerhat { background-position: -0px -120px; } .shirt_icons.peelandstick { background-position: -50px -120px; } .shirt_icons.canvasthrowpillow, .shirt_icons.suedethrowpillow { background-position: -100px -120px; } .shirt_icons.puzzle { background-position: -150px -120px; } .shirt_icons.snowflakeornament { background-position: -200px -120px; } .shirt_icons.vintageunisex { background-position: -250px -120px; } .shirt_icons.tiedye { background-position: -300px -120px; } .shirt_icons.kidstiedye { background-position: -350px -120px; } .shirt_icons.youthhoodie { background-position: -400px -120px; } .shirt_icons.babybib { background-position: -450px -120px; } .shirt_icons.ringer { background-position: -500px -120px; } .shirt_icons.gildan_2400 { background-position: -550px -120px; } .shirt_icons.gildan_5000 { background-position: -600px -120px; } /* Row 4 — SKU-specific styles (sprite refresh 2026-06-04) */ .shirt_icons.gildan_5000l { background-position: -0px -180px; } .shirt_icons.gildan_18000 { background-position: -50px -180px; } .shirt_icons.gildan_18500 { background-position: -100px -180px; } .shirt_icons.gildan_18500b { background-position: -150px -180px; } .shirt_icons.gildan_64000 { background-position: -200px -180px; } .shirt_icons.gildan_64000l { background-position: -250px -180px; } .shirt_icons.bella_3001 { background-position: -300px -180px; } .shirt_icons.bella_3001y { background-position: -350px -180px; } .shirt_icons.bella_3480 { background-position: -400px -180px; } .shirt_icons.bella_3501 { background-position: -450px -180px; } .shirt_icons.comfortcolors_1717 { background-position: -500px -180px; } .shirt_icons.independent_ss3000 { background-position: -550px -180px; } .shirt_icons.independent_ss4500 { background-position: -600px -180px; } /* Row 5 — SKU-specific styles cont. */ .shirt_icons.nextlevel_3600 { background-position: -0px -240px; } .shirt_icons.lat_3321 { background-position: -50px -240px; } .shirt_icons.ypclassics_6506 { background-position: -100px -240px; } .shirt_icons.gildan_5000b { background-position: -150px -240px; } .alt_style_name { font-size: 17px; font-weight: 400; } .itemInfoTitle{ font-size: 17px; font-weight: 400; margin-bottom: 10px; margin-top: 20px; } .dropdown-list-wrap { margin: 20px 0px; } /* Font Awesome Colors */ .fa-green { color: #00B928; } .fa-yellow { color: #A4A703; } .fa-red { color: #D82929; } .fa-blue { color: #446BF7; } .onsale { background-position: 0 -16px; } .active .onsale { background-position: -16px -16px; } .topsellers { background-position: 0 -32px; } .active .topsellers { background-position: -16px -32px; } .newitems { background-position: 0 -128px; } .active .newitems { background-position: -16px -128px; } .featureditems { background-position: 0 -48px; } .active .featureditems { background-position: -16px -48px; } .admin { background-position: 0 -64px; } .active .admin { background-position: -16px -64px; } .logout { background-position: 0 -80px; } .active .logout { background-position: -16px -80px; } .sold { background-position: 0 -96px; } .active .sold { background-position: -16px -96px; } .shoppers { background-position: 0 -112px; } .active .shoppers { background-position: -16px -112px; } .promo { background-position: 0 -128px; } .active .promo { background-position: -16px -128px; } .settings { background-position: 0 -144px; } .active .settings { background-position: -16px -144px; } .pages { background-position: 0 -160px; } .active .pages { background-position: -16px -160px; } .categories { background-position: 0 -176px; } .active .categories { background-position: -16px -176px; } .plugins { background-position: 0 -192px; } .active .plugins { background-position: -16px -192px; } .stats { background-position: 0 -208px; } .active .stats { background-position: -16px -208px; } .help { background-position: 0 -224px; } .active .help { background-position: -16px -224px; } .showComment.false { display: none; } .customerInfo > div { margin-left: 10px; padding-bottom: 15px; } .section { vertical-align: top; max-width: 300px; min-width: 300px; display: inline-block; padding: 5px; } .advancedFeatures.hidden {display:none;} #breadcrumb { border-top: 1px solid #ddd; clear: both; color: #666; font-size: 11px; font-weight: 700; line-height: 32px; margin-top: 16px; min-height: 32px; overflow: hidden; padding: 0 !important; text-transform: uppercase; } #breadcrumb > ul { list-style: none; margin: 0; padding: 0 8px; padding: 0; } #breadcrumb > ul > li { margin: 0; } #breadcrumb > ul > li { background-image: url("../images/new_breadcrumb_cart.png"); background-position: right -36px; background-repeat: no-repeat; background-size: 12px 132px; float: left; padding-right: 12px; } @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { #breadcrumb > ul > li { background-image: url("../images/new_breadcrumb_cart@2x.png"); } } #breadcrumb > ul > li > a { color: var(--font-color); display: block; padding: 0 8px; text-decoration: none; } #breadcrumb > ul > li > a:hover { color: var(--main-color); } #breadcrumb > ul > li.top { background: none; float: right; padding: 0; } #breadcrumb > ul > li.top > a { background-image: url("../images/new_breadcrumb_cart.png"); background-position: 12px 132px; background-repeat: no-repeat; background-size: 12px 132px; } @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { #breadcrumb > ul > li.top > a { background-image: url("../images/new_breadcrumb_cart@2x.png"); } } #breadcrumb > ul > li.home > a { background-image: url("../images/new_breadcrumb_cart.png"); background-position: left -68px; background-repeat: no-repeat; background-size: 12px 132px; display: block; padding-left: 20px; } @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { #breadcrumb > ul > li.home > a { background-image: url("../images/new_breadcrumb_cart@2x.png"); } } #siteinfo { /*å background-image: linear-gradient(top, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 50%); background-image: -moz-linear-gradient(top, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 50%); background-image: -ms-linear-gradient(top, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 50%); background-image: -o-linear-gradient(top, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 50%); background-image: -webkit-linear-gradient(top, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 50%);*/ clear: both; overflow: hidden; text-align: center; padding-top:40px; } #footer { color: #666; padding: 0px 100px; text-transform: uppercase; } #footer:after { clear: both; content: ''; display: block; } #siteinfo-payment { float: left; width:33%; } #siteinfo-payment > img { height: 25px; } #siteinfo-contact { float: left; width:33%; } #siteinfo-address { float: right; width:33%; } #siteinfo-company{ float: left; } #siteinfo-community{ float: left; margin-left:30%; } #siteinfo-social{ float:right; } #siteinfo-social img{ width: 14px; margin-bottom: 1px; } #footer > div#siteinfo-content { border-bottom: 0; float: right; margin-right: 0; } #footer a { color: #666; text-decoration: none; } #footer a:hover { color: var(--main-color); } #footer h3 { font-size: 16px; font-weight: 700; margin-bottom: 15px; } #footer ul { list-style: none; margin: 0; padding: 0; } #footer ul > li { margin: 0; } #footer .copyright { font-size: 11px; margin: 40px 0 0; } .performance { background-color: var(--bg-color); border: 1px solid #d3d2d2; padding: 10px; margin-top: 0; } .performance ul { display: -moz-box; display: -webkit-box; display: box; list-style: none; margin-left: 10px; width: 100%; display:table-row; } .performance li { display:table-cell; vertical-align: middle; -moz-box-flex: 1; -webkit-box-flex: 1; list-style: none; margin: 10px; padding-right: 20px; height: 15px; width: 15%; } /* ========================================================= Developer debug panels Rendered from footer.php, gated on $UsernameCookies=="developer". Uses the same .mc-collapsible pattern as the modern cart/buypage shipping collapsibles so they fold away by default and stop taking up vertical space on the product page. ========================================================= */ .debug-panels { max-width: 1100px; margin: 20px auto; padding: 0 16px; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .debug-panels .mc-collapsible.debug-panel { margin: 0 0 10px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; box-shadow: none; } .debug-panels .debug-panel > .mc-collapsible__summary { padding: 10px 14px; font-size: 13px; font-weight: 600; color: #334155; background: #eef2f6; border-radius: 8px 8px 0 0; min-height: 0; } .debug-panels .debug-panel[open] > .mc-collapsible__summary { border-bottom: 1px solid #cbd5e1; } .debug-panels .debug-panel > .mc-collapsible__summary:hover { background: #e2e8f0; } .debug-panels .debug-panel .mc-collapsible__label { color: #334155; font-size: 13px; gap: 8px; } .debug-panels .debug-panel .mc-collapsible__label svg { width: 16px; height: 16px; color: #64748b; } .debug-panels .debug-panel .mc-collapsible__body { padding: 12px 14px; font-size: 12px; color: #475569; } .debug-panel__stat { display: inline-block; margin-left: 10px; padding: 2px 8px; background: #fff; border: 1px solid #cbd5e1; border-radius: 999px; font-size: 11px; font-weight: 500; color: #64748b; letter-spacing: 0.01em; } .debug-panel__note { padding: 8px 10px; margin: 0 0 10px; background: #fff7ed; border: 1px solid #fdba74; border-radius: 6px; font-size: 11px; color: #7c2d12; } /* Neutralize the base .performance border when it's already inside a debug-panel body — no need for a nested box within a box. */ .debug-panels .debug-panel .performance { margin: 0; padding: 0; border: none; background: transparent; } .debug-panels .debug-panel .performance ul { margin: 0 0 8px; } .debug-panels .debug-panel .performance li { font-size: 11px; color: #475569; padding-right: 14px; } /* The SQL query log body can get tall — cap it and let it scroll so the whole page doesn't turn into a 5000-line SQL dump. */ .debug-panels .debug-panel .mc-collapsible__body > :last-child { max-height: 480px; overflow: auto; } @media only screen and (max-width: 767px) { .debug-panels { padding: 0 10px; } .debug-panels .debug-panel > .mc-collapsible__summary { padding: 10px 12px; font-size: 12px; } .debug-panels .debug-panel .performance ul { display: block; } .debug-panels .debug-panel .performance li { display: block; width: auto; margin: 4px 0; padding-right: 0; } .debug-panel__stat { display: block; margin: 4px 0 0; width: fit-content; } } .sidenav { height: 95%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; float:left; text-transform: uppercase; } .sidenav li { list-style-type:none; margin-bottom: -5px; } .sidenav a { padding: 8px 8px 8px 16px; text-decoration: none; font-size: 15px; color: #818181; display: block; transition: 0.3s; } .sidenav a:hover { color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; right: 10px; top: 10px; font-size: 36px; margin-left: 50px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } #body { background-color: var(--bg-color); clear: both; position: relative; z-index: 1; } #body .wrap { padding: 5px 10px; } #body .wrap:after { clear: both; content: ''; display: block; } #main { padding: 0 16px; } #mainBar.full { float:left; text-align: center; margin-top:20px; width: 100%; } #mainBar.withsidecat{ float:left; text-align: center; margin-top:20px; width: 766px; } #main.blog { float:left; margin-top:20px; /*width: 776px;*/ width:100%; margin-left:-16px; } #sidebar { color: #afafaf; float: right; margin-right: 16px; text-transform: uppercase; width: 160px; margin-top:20px; } #sidebar #sidebar-categories { margin: 0 0 24px; } #sidebar h4 { font-size: 12px; font-weight: 700; margin-bottom: 6px; } #sidebar h4 a { color: #afafaf; } #sidebar ul { list-style: none; margin: 0; padding: 0; } #sidebar ul > li { margin: 0; } #sidebar ul li { font-size: 13px; padding-top: 2px; } #sidebar ul li > a { background-clip: padding-box; /*border-radius: 4px;*/ display: block; line-height: 30px; moz-background-clip: padding; moz-border-radius: 4px; ms-background-clip: padding-box; ms-border-radius: 4px; o-background-clip: padding-box; o-border-radius: 4px; padding: 0 4px 0 16px; webkit-background-clip: padding-box; webkit-border-radius: 4px; } #sidebar ul li > a:hover { background-color: #eee; } #sidebar ul li.active > a { background-color: var(--main-color); /* background-image: linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 100%); background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 100%); background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 100%); background-image: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 100%); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 100%); */ color: #fff; font-weight: 700; text-shadow: rgba(0, 0, 0, 0.35) 1px 1px 2px; } #sidebar #sidebar-newsletter input { margin-bottom: 4px; width: 148px; } #promos-large{ float:left; } #promos-small-left{ float:left; } #promos-small-right{ float:right; } .imgbox{ text-align:center; display: inline; width:100%; } .imgbox ul{ padding:0px; margin:0px; } .imgbox ul li{ float:left; list-style:none; width:100%; } .imgbox ul li.select{ display:block; } .imgbox ul li a{ display: block; } .imgnum1 span{ border-radius:50%; width: 10px; height: 10px; margin-left:5px; background-color:grey; cursor:pointer; display:inline-block; } .imgnum1 span.onselect{ background-color:black; } .imgnum1{ text-align:center; position:relative; } .imgnum2 span{ border-radius:50%; width: 10px; height: 10px; margin-left:5px; background-color:grey; cursor:pointer; display:inline-block; } .imgnum2 span.onselect{ background-color:black; } .imgnum2{ text-align:center; position:relative; } .imgnum3 span{ border-radius:50%; width: 10px; height: 10px; margin-left:5px; background-color:grey; cursor:pointer; display:inline-block; } .imgnum3 span.onselect{ background-color:black; } .imgnum3{ text-align:center; position:relative; } .imgnum4 span{ border-radius:50%; width: 10px; height: 10px; margin-left:5px; background-color:grey; cursor:pointer; display:inline-block; } .imgnum4 span.onselect{ background-color:black; } .imgnum4{ text-align:center; position:relative; } #promos-x-large img{ height: auto; width: 100%; } #promos { margin-bottom: 18px; margin-left: auto; margin-right: auto; width: 100%; } #promos-large { margin-right: 12px; } #promos-large img { height: 230px; width: 494.5px; } #promos-small-left { margin-right: 4px; } #promos-small-left img, #promos-small-right img { height: 230px; width: 235.75px; } .upload-gallery { width: 100%; min-height: 250px; display: inline-block; padding: 0 5px; } .upload-gallery > .box { max-width: 200px; height: 200px; position: relative; display: inline-block; vertical-align: top; margin-right: 5px; } .upload-gallery > .box > img { max-width: 200px; max-height: 200px; } .upload-gallery > .box.new { width: 200px; height: 200px; border: dashed 1px #000; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; background-image: url("../images/upload_new_image.png"); background-repeat: no-repeat; background-position: center; } .upload-gallery > .box > .options { background-color: rgba(0, 0, 0, 0.5); bottom: 0; position: absolute; width: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; line-height: 20px; padding: 0 5px; display: block; font-size: 11px; } .upload-gallery > .box > .options.remove { color: #FFF; right: 0; text-align: right; cursor: pointer; } .upload-gallery > .box > .options.update { color: #FFF; left: 0; cursor: pointer; } .price-adjust-window { display: none; background-color: #e9e9e9; border: 1px solid #d3d2d2; position: absolute; width: 200px; height: 100px; font-size: 15px; } .price-adjust-window > .button { width: 15px; height: 15px; font-size: 20px; } /* ─────────────────────────────────────────────────────────────── Storefront product grid (modern card layout) Title + price are ALWAYS rendered (SEO-friendly, touch-friendly). Old hover-reveal behavior has been retired. ─────────────────────────────────────────────────────────────── */ .itemtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; padding: 8px 0; align-items: stretch; text-align: left; text-transform: none; } /* Search-results messages. These deliberately live OUTSIDE .itemtiles: as a child of that grid the text became a single cell, so it wrapped at half the screen width on mobile. As siblings they span the full content width. */ .search-empty { width: 100%; padding: 20px 4px 8px; } .search-empty h2 { margin: 0 0 6px; } .search-empty p { margin: 0; color: #666; } .search-close-note { width: 100%; box-sizing: border-box; margin: 0 0 12px; padding: 10px 12px; background: #f5f5f5; border-left: 3px solid var(--main-color, #999); border-radius: 4px; font-size: 14px; } .item { display: flex; flex-direction: column; background: #fff; border: 1px solid #eaeaea; border-radius: 10px; overflow: hidden; position: relative; height: auto; width: auto; margin: 0; color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .item:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.1); border-color: #d4d4d4; z-index: 1; } .item:active { transform: translateY(-1px); } .item-sale { background-image: url("../images/sale.png"); background-repeat: no-repeat; background-size: 60px 60px; position: absolute; top: 8px; left: 8px; width: 60px; height: 60px; z-index: 2; pointer-events: none; } #canvas-wrap > .item-sale { position: absolute; z-index: 100; left: auto !important; top: auto !important; } .item > figure { display: flex; flex-direction: column; margin: 0; padding: 0; background: transparent; width: auto; height: auto; overflow: visible; position: relative; flex: 1 1 auto; transition: none; } .item > figure > img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: #f7f7f8; transition: transform .3s ease; } .item:hover > figure > img { transform: scale(1.03); } .item > figure > figcaption { display: flex; flex-direction: column; position: static; background: #fff; color: #1a1a1a; text-align: left; text-shadow: none; text-transform: none; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.35; padding: 10px 12px 12px; gap: 4px; flex: 0 0 auto; min-height: 74px; /* clamp the product title to two lines */ overflow: hidden; word-break: break-word; } .item > figure var { order: 2; position: static; color: var(--main-color); font-style: normal; font-weight: 700; font-size: 15px; margin-top: auto; display: block; letter-spacing: .2px; } .item > figure var > span.starts { display: block; font-size: 10px; font-weight: 500; color: #777; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 1px; } /* The redundant "BUY" button inside the card is hidden — the whole tile is already a link to the product page. */ .item > figure button.button { display: none; } /* ─────────────────────────────────────────────────────────────── Storefront category chip bar (under the "Shop Our Products" H1) ─────────────────────────────────────────────────────────────── */ .cat-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 10px 0; border-bottom: 1px solid #ececec; } .cat-bar__chips { display: flex; flex-wrap: nowrap; gap: 8px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding-bottom: 2px; /* breathing room for scrollbar */ } .cat-bar__chips::-webkit-scrollbar { height: 6px; } .cat-bar__chips::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 3px; } .cat-chip { display: inline-flex; align-items: center; padding: 6px 14px; background: #f2f3f5; color: #333; font-size: 13px; font-weight: 500; text-decoration: none; border: 1px solid transparent; border-radius: 999px; white-space: nowrap; transition: background .15s ease, color .15s ease, border-color .15s ease; flex: 0 0 auto; text-transform: none; letter-spacing: normal; } .cat-chip:hover { background: #e4e7eb; color: #111; text-decoration: none; } .cat-chip--active { background: var(--main-color, #3b82f6); color: #fff; border-color: var(--main-color, #3b82f6); } .cat-chip--active:hover { background: var(--main-color, #3b82f6); color: #fff; opacity: .92; } .cat-bar__viewall { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid #d4d4d4; border-radius: 999px; background: #fff; color: #555; font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; } .cat-bar__viewall:hover { background: var(--main-color, #3b82f6); color: #fff; border-color: var(--main-color, #3b82f6); text-decoration: none; } .cat-bar__viewall i { font-size: 11px; } @media only screen and (max-width: 600px) { .cat-bar { gap: 8px; margin-bottom: 14px; } .cat-chip, .cat-bar__viewall { padding: 5px 11px; font-size: 12px; } } /* Product page section header */ #mainBar h1 { font-size: 24px; font-weight: 700; color: var(--font-color); margin: 20px 0; padding-bottom: 12px; border-bottom: 2px solid var(--main-color); display: flex; align-items: center; gap: 10px; } #mainBar h1::before { content: ""; display: inline-block; width: 4px; height: 24px; background: var(--main-color); border-radius: 2px; } .tshirt { background-clip: padding-box; background-color: var(--wrap-bg-color); border-radius: 4px; moz-background-clip: padding; moz-border-radius: 4px; ms-background-clip: padding-box; ms-border-radius: 4px; o-background-clip: padding-box; o-border-radius: 4px; padding: 16px; webkit-background-clip: padding-box; webkit-border-radius: 4px; } .tshirt:after { clear: both; content: ''; display: block; } .tshirt figure { background-color: #fff; border: 3px solid #fff; box-shadow: rgba(0, 0, 0, 0.15) 0 4px 16px; float: left; margin-right: 24px; max-width: 100%; moz-box-shadow: rgba(0, 0, 0, 0.15) 0 4px 16px; ms-box-shadow: rgba(0, 0, 0, 0.15) 0 4px 16px; o-box-shadow: rgba(0, 0, 0, 0.15) 0 4px 16px; text-align: center; webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 4px 16px; width: 100%; position:relative; min-height: 370px; min-height: 500px; } .overlay { position: absolute; right: 0; z-index: 999; } .tshirt figure .Navy { background-image: url("../images/shirts/Navy.png"); } .tshirt figure > .item-sale { background-image: url("../images/sale.png"); background-repeat: no-repeat; background-size: 78px 78px; display: block; height: 78px; position: absolute; width: 78px; } .tshirt figure img { /*box-shadow: #dddddd 0 0 0 1px;*/ height: auto; max-width: 100%; moz-box-shadow: #dddddd 0 0 0 1px; ms-box-shadow: #dddddd 0 0 0 1px; o-box-shadow: #dddddd 0 0 0 1px; webkit-box-shadow: #dddddd 0 0 0 1px; width: 400px; } .tshirt figure .noPreview { background-color: rgba(0, 0, 0, 0.5); bottom: 0; color: #e9e9e9; display: none; font-size: 14px; height: 20px; position: absolute; text-align: center; width: 100%; } .tshirt .tshirtinfo { float: right; width: 496px; } .tshirt .tshirtLeftView { float: left; width: 400px; } .tshirt .tshirtLeftView.large { width: 510px; } .tshirt .tshirtinfo h1 { font-size: 20px; color: var(--font-color); font-weight: 600; margin-bottom: 20px; } .tshirt .tshirtinfo h2 { font-size: 40px; line-height: 48px; } .tshirt .tshirtinfo .dropdown { background-color: #fff; border: 1px solid #ddd; color: #333; font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-weight: 600; margin-right: 10px; max-width: none; min-width: 110px; min-height: 28px; } .tshirt .tshirtinfo .dropdown:hover { border-color: #5ab4de; } .tshirt .tshirtinfo .dropdown > span { font-size: 16px; line-height: 25px; max-width: none; width: 146px; } .tshirt .tshirtinfo .dropdown > span:after { border-width: 8px; top: 10px; } .tshirt .tshirtinfo .tshirtinfostyle { margin-bottom: 15px; float: left; } .tshirt .tshirtinfo .tshirtinfosize { margin-bottom: 8px; float: left; } .tshirt-stock-level { font-size: 15px; padding-bottom: 10px; } .tshirt-stock-level > span { font-weight: bold; font-size: 15px; } .tshirt .tshirtinfo .tshirtinfosize .tshirtinfosizingchart { display: inline-block; font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-weight: 600; line-height: 32px; vertical-align: middle; float: left; } .tshirt .tshirtinfo .tshirtinfoorder { clear: both; display: -webkit-flex; display:flex; } .tshirt .tshirtinfo .tshirtpriceinfo { clear: both; } .warning-msg-size { display: none; } .dropdown-content li:hover { background-color: var(--main-color); } .style_button.selected { background-color: var(--main-color); } .style_button:hover{ border-color: var(--main-color); } .size_button:hover{ border-color: var(--main-color); } .size_button.selected { background-color: var(--main-color); } .tshirt .tshirtinfo .tshirtpriceinfo var { color: var(--main-color); display: inline-block; font-family: "Segoe WP Semi Light", "Segoe UI Semi Light", "Segoe UI Web Semi Light", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-size: 34px; font-style: normal; font-weight: 300; line-height: 20px; margin-right: 16px; vertical-align: middle; float: right; } .tshirt .tshirtinfo .tshirtinfoorder .large { font-size:30px; font-weight: 400; margin-right: -3px; } .tshirt .tshirtinfo .tshirtinfoorder .add-cart { font-size: 13px; min-height: 22px; padding: 3px 15px 3px 15px; } .tshirt .tshirtinfo p { font-size: 12px; } .tshirt .tshirtLeftView .note { width:390px; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; color: #666; font-size: 11px; line-height: 20px; /*margin: 10px 0 0;*/ padding: 10px 10px; background:#fff; } .note > img { height: auto; width: 100%; } .tshirt .tshirtLeftView .large{ /*margin-top:20px;*/ } .leftCornerMobile{ display: none; } .tshirtinfoswatch { padding-left: 0px; margin-bottom: 0px; } .tshirtinfoswatch .selected { border: solid 3px #000; } .tshirtinfoswatch .check { background-image: url("../images/swatchcheck.png"); background-repeat: no-repeat; background-size: 21px; } .tshirtinfoswatch .check:hover { background-image: url("../images/swatchcheck.png"); background-repeat: no-repeat; background-size: 25px; } .swatchCircle li { border: solid 1px #000; border-radius: 100%; min-width: 15px; max-width: 15px; min-height: 15px; max-height: 15px; list-style-type: none; margin: 2px; padding: 3px 3px; display: inline-block; position: relative; cursor: pointer; } .swatchCircle li:hover { padding: 5px 5px; margin: 0; } .swatchCircle li { min-width: 18px; max-width: 18px; min-height: 18px; max-height: 18px; } .swatchSquare li { border: solid 1px #000; width: 15px; height: 15px; list-style-type: none; margin: 2px; padding: 3px 3px; display: inline-block; position: relative; cursor: pointer; } .swatchSquare li:hover { padding: 5px 5px; margin: 0; } .tshirtinfoswatch > .black { background-color: #000; border: solid 3px #000; } .tshirtinfoswatch > .white { background-color: #FFF; border: solid 3px #FFF; } .tshirtinfoswatch > .charcoalgrey { background-color: #474748; border: solid 3px #474748; } .tshirtinfoswatch > .daisy { background-color: #efce1f; border: solid 3px #efce1f; } .tshirtinfoswatch > .darkchocolate { background-color: #54453d; border: solid 3px #54453d; } .tshirtinfoswatch > .forestgreen { background-color: #214637; border: solid 3px #214637; } .tshirtinfoswatch > .gold { background-color: #d5ab47; border: solid 3px #d5ab47; } .tshirtinfoswatch > .irishgreen { background-color: #50af72; border: solid 3px #50af72; } .tshirtinfoswatch > .lightblue { background-color: #96bddf; border: solid 3px #96bddf; } .tshirtinfoswatch > .lightpink { background-color: #e8a4a7; border: solid 3px #e8a4a7; } .tshirtinfoswatch > .militarygreen { background-color: #4e5347; border: solid 3px #4e5347; } .tshirtinfoswatch > .navy { background-color: #11285a; border: solid 3px #11285a; } .tshirtinfoswatch > .orange { background-color: #e76621; border: solid 3px #e76621; } .tshirtinfoswatch > .purple { background-color: #52316d; border: solid 3px #52316d; } .tshirtinfoswatch > .red { background-color: #d72739; border: solid 3px #d72739; } .tshirtinfoswatch > .royalblue { background-color: #3572b5; border: solid 3px #3572b5; } .tshirtinfoswatch > .sportgrey { background-color: #a9a9aa; border: solid 3px #a9a9aa; } .tshirtinfoswatch > .tan { background-color: #ddccae; border: solid 3px #ddccae; } .tshirtinfoswatch > .navyringer { background-color: #FFF; border: solid 3px navy; } .tshirtinfoswatch > .blackringer { background-color: #FFF; border: solid 3px black; } .tshirtinfoswatch > .redringer { background-color: #FFF; border: solid 3px red; } .tshirtinfoswatch > .irishgreenringer { background-color: #FFF; border: solid 3px #599b64; } .tshirtinfoswatch > .royalblueringer { background-color: #FFF; border: solid 3px #2b206b; } .tshirtinfoswatch > .whiteblackaccent { background-color: #FFF; border: solid 3px #000; } .tshirtinfoswatch > .whitelightblueaccent { background-color: #FFF; border: solid 3px #00A3E0; } .tshirtinfoswatch > .whiteredaccent { background-color: #FFF; border: solid 3px red; } .tshirtinfoswatch > .whitepinkaccent { background-color: #FFF; border: solid 3px #E4A9BB; } .tshirtinfoswatch > .whiteorangeaccent { background-color: #FFF; border: solid 3px #DC4405; } .tshirtinfoswatch > .whitelightgreenaccent { background-color: #FFF; border: solid 3px #A4D65E; } .tshirtinfoswatch > .whitenavyaccent { background-color: #FFF; border: solid 3px #250E62; } .tshirtinfoswatch > .burgundy { background-color: #b0486b; border: solid 3px #b0486b; } .tshirtinfoswatch > .greyblack { background-color: #a9a9aa; border: solid 3px #000000; } .tshirtinfoswatch > .whiteblack { background-color: #ffffff; border: solid 3px #000000; } .tshirtinfoswatch > .blackwhite { background-color: #000000; border: solid 3px #ffffff; } .tshirtinfoswatch > .whitenavy { background-color: #ffffff; border: solid 3px #11285a; } .tshirtinfoswatch > .whitered { background-color: #ffffff; border: solid 3px #d72739; } .tshirtinfoswatch > .greyred { background-color: #a9a9aa; border: solid 3px #d72739; } .tshirtinfoswatch > .greynavy { background-color: #a9a9aa; border: solid 3px #11285a; } .tshirtinfoswatch > .greyroyal { background-color: #a9a9aa; border: solid 3px #3572b5; } .tshirtinfoswatch > .whiteroyal { background-color: #ffffff; border: solid 3px #3572b5; } .tshirtinfoswatch > .hotpink { background-color: #eb659b; border: solid 3px #eb659b; } .tshirtinfoswatch > .natural { background-color: #eadfd6; border: solid 3px #eadfd6; } .tshirtinfoswatch > .stainlesssteel { background-color: #C0C0C0; border: solid 3px #b8b8b8; } .tshirtinfoswatch > .colorchanging { background: linear-gradient(1deg, #000, #FFF); border: solid 3px #FFF; background-color: #000; } .tshirtinfoswatch > .aloe { background-color: #928e48; border: solid 3px #928e48; } .tshirtinfoswatch > .bluejean { background-color: #777c89; border: solid 3px #777c89; } .tshirtinfoswatch > .brick { background-color: #916d6e; border: solid 3px #916d6e; } .tshirtinfoswatch > .salmon { background-color: #f76f63; border: solid 3px #f76f63; } .tshirtinfoswatch > .lightgreen { background-color: #5c7664; border: solid 3px #5c7664; } .tshirtinfoswatch > .grey { background-color: #95958d; border: solid 3px #95958d; } .tshirtinfoswatch > .pepper { background-color: #5c5e5d; border: solid 3px #5c5e5d; } .tshirtinfoswatch > .periwinkle { background-color: #8c9ad7; border: solid 3px #8c9ad7; } .tshirtinfoswatch > .watermelon { background-color: #f58a7c; border: solid 3px #f58a7c; } .tshirtinfoswatch > .crimsonred { background-color: #8c4549; border: solid 3px #8c4549; } .tshirtinfoswatch > .vineyardred { background-color: #a5424c; border: solid 3px #a5424c; } .tshirtinfoswatch > .neongreen { background-color: #a2ea00; border: solid 3px #a2ea00; } .tshirtinfoswatch > .silver { background-color: #b9bfc4; border: solid 3px #b9bfc4; } .tshirtinfoswatch > .azalea { background-color: #d36ba1; border: solid 3px #d36ba1; } .tshirtinfoswatch > .sapphire { background-color: #0373b0; border: solid 3px #0373b0; } .tshirtinfoswatch > .teal { background-color: #30b6b8; border: solid 3px #30b6b8; } .tshirtinfoswatch > .darkgrey { background-color: #4c474c; border: solid 3px #4c474c; } .tshirtinfoswatch > .lightbrown { background-color: #857570; border: solid 3px #857570; } .tshirtinfoswatch > .pink { background-color: #d2687d; border: solid 3px #d2687d; } .tshirtinfoswatch > .citrus { background-color: #efce1f; border: solid 3px #efce1f; } .tshirtinfoswatch > .montereysage { background-color: #4e5347; border: solid 3px #4e5347; } .tshirtinfoswatch > .burntorange { background-color: #e76621; border: solid 3px #e76621; } .tshirtinfoswatch > .royalcaribe { background-color: #3572b5; border: solid 3px #3572b5; } .tshirtinfoswatch > .rainbowswirl { background-image: linear-gradient(to right, orange, yellow, green, cyan, blue, violet) !important; border: solid 3px #b9b9b9; } .tshirtinfoswatch > .royalblueswirl { background-color: #3572b5; border: solid 3px #3572b5; background-image: url(/images/swirl.png); background-repeat: no-repeat; background-size: 23px 23px; } .tshirtinfoswatch > .redswirl { background-color: #d72739; border: solid 3px #d72739; background-image: url(/images/swirl.png); background-repeat: no-repeat; background-size: 23px 23px; } .tshirtinfoswatch > .purpleswirl { background-color: #52316d; border: solid 3px #52316d; background-image: url(/images/swirl.png); background-repeat: no-repeat; background-size: 23px 23px; } .tshirtinfoswatch > .orangeswirl { background-color: #e76621; border: solid 3px #e76621; background-image: url(/images/swirl.png); background-repeat: no-repeat; background-size: 23px 23px; } .tshirtinfoswatch > .irishgreenswirl { background-color: #50af72; border: solid 3px #50af72; background-image: url(/images/swirl.png); background-repeat: no-repeat; background-size: 23px 23px; } .tshirtinfoswatch > .goldswirl { background-color: #d5ab47; border: solid 3px #d5ab47; background-image: url(/images/swirl.png); background-repeat: no-repeat; background-size: 23px 23px; } .tshirtinfoswatch > .blackswirl { background-color: #000; border: solid 3px #000; background-image: url(/images/swirl.png); background-repeat: no-repeat; background-size: 23px 23px; } /* Selected swatch checkmark */ .tshirt .selectcolour.check, .tshirt .selectcolour_alt.check { background-image: url("../images/swatchcheck.png"); background-repeat: no-repeat; background-size: 22px; background-position: center; } .tshirt .selectcolour_alt.check:hover { background-image: url("../images/swatchcheck.png"); background-repeat: no-repeat; background-size: 24px; background-position: center; } #currency { display:inline-block; float: right; padding-right: 4px; } #currencydrop { height: 30px; font-size: 11px; min-width: 110px; max-width: 110px; } #currencydrop > span { line-height: 32px; color: #666; padding-left: 10px; } #currencydrop > span:after { top: 13px; } #currencydrop:hover{ background-color: #fff; } .currencyFlag{ width: 20px; height: 12px; float: right; margin-top: 5px; } .currencyMenuFlag{ width: 20px; height: 12px; float: right; margin-top: 9px; } .flagicon { background-image: url(../images/flags.jpg); background-repeat: no-repeat; } .flag-us { background-position: 0px 0px; } .flag-ca { background-position: 0px -12px;} .flag-eu { background-position: 0px -24px;} .flag-au { background-position: 0px -36px;} .flag-gb { background-position: 0px -48px;} /* ============================================ "You might also like" — modern card grid Matches the .buypage-modern design system (bpm-*) ============================================ */ .bpm-also-like { --bpm-text: #0f172a; --bpm-text-muted: #64748b; --bpm-border: #e5e7eb; --bpm-border-dark: #d1d5db; --bpm-bg-subtle: #f8fafc; --bpm-radius: 10px; --bpm-radius-lg: 16px; --bpm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --bpm-shadow-hover: 0 8px 24px rgba(15, 23, 42, 0.08); display: block; width: 100%; margin: 48px 0 24px; padding: 0; color: var(--bpm-text); font-size: 14px; line-height: 1.5; box-sizing: border-box; } .bpm-also-like * { box-sizing: border-box; } .bpm-also-like-heading { margin: 0 0 20px; padding: 0 0 14px; border-bottom: 1px solid var(--bpm-border); color: var(--bpm-text); font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; text-align: left; } .bpm-also-like-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .bpm-also-like-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--bpm-border); border-radius: var(--bpm-radius-lg); overflow: hidden; color: inherit; text-decoration: none; box-shadow: var(--bpm-shadow-sm); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .bpm-also-like-card:hover, .bpm-also-like-card:focus-visible { transform: translateY(-2px); border-color: var(--bpm-border-dark); box-shadow: var(--bpm-shadow-hover); text-decoration: none; } .bpm-also-like-card:focus-visible { outline: 2px solid var(--main-color, #0f172a); outline-offset: 2px; } .bpm-also-like-card__image { position: relative; width: 100%; aspect-ratio: 1 / 1; background: var(--bpm-bg-subtle); overflow: hidden; } .bpm-also-like-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .bpm-also-like-card:hover .bpm-also-like-card__image img { transform: scale(1.03); } .bpm-also-like-card__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; } .bpm-also-like-card__title { margin: 0; color: var(--bpm-text); font-size: 14px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; } .bpm-also-like-card__price { margin: 0; color: var(--bpm-text); font-size: 14px; font-weight: 700; line-height: 1.2; } .bpm-also-like-card__price-label { color: var(--bpm-text-muted); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 3px; } .bpm-also-like-card__cta { display: inline-flex; align-items: center; gap: 6px; color: var(--bpm-text-muted); font-size: 12px; font-weight: 500; letter-spacing: 0.01em; transition: color 0.18s ease, gap 0.18s ease; } .bpm-also-like-card__cta i { font-size: 11px; transition: transform 0.18s ease; } .bpm-also-like-card:hover .bpm-also-like-card__cta { color: var(--bpm-text); gap: 8px; } .bpm-also-like-card:hover .bpm-also-like-card__cta i { transform: translateX(2px); } @media (min-width: 640px) { .bpm-also-like-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .bpm-also-like-heading { font-size: 22px; } } @media (min-width: 900px) { .bpm-also-like-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } .bpm-also-like { margin-top: 56px; } } .gallery > ul { list-style-type: none; } .gallery > ul > li { display: inline; margin: 0 5px; } .gallery > ul > li > a > img { max-height: 75px; max-width: 75px; } .dropdown { background-clip: padding-box; background-color: #eee; border: 1px solid #ddd; border-radius: 4px; color: #999; display: inline-block; font-weight: 700; max-width: 120px; min-width: 120px; moz-background-clip: padding; moz-border-radius: 4px; ms-background-clip: padding-box; ms-border-radius: 4px; o-background-clip: padding-box; o-border-radius: 4px; position: relative; text-align: left; text-transform: uppercase; vertical-align: middle; webkit-background-clip: padding-box; webkit-border-radius: 4px; } .dropdown:active { background-color: #ddd; border-color: #ccc; } .dropdown.warn { border: solid 2px #c00; } .dropdown.warn > span { background: #ffcaca; } .dropdown > span { cursor: pointer; display: block; line-height: 24px; /*max-width: 94px;*/ overflow: hidden; padding: 0 26px 0 10px; position: relative; text-overflow: ellipsis; white-space: nowrap; height: 100%; } .dropdown > span:after { border-color: transparent; border-style: solid; border-top-color: #666; border-width: 5px; content: ''; display: inline-block; height: 0; position: absolute; right: 8px; top: 10px; width: 0; } .dropdown > span > b { color: #666; } .dropdown > ul { background-clip: padding-box; background-color: #eee; border-radius: 0 4px 4px 4px; box-shadow: rgba(0, 0, 0, 0.35) 0 5px 8px; display: none; list-style: none; margin: 0; moz-background-clip: padding; moz-border-radius: 0 4px 4px 4px; moz-box-shadow: rgba(0, 0, 0, 0.35) 0 5px 8px; ms-background-clip: padding-box; ms-border-radius: 0 4px 4px 4px; ms-box-shadow: rgba(0, 0, 0, 0.35) 0 5px 8px; o-background-clip: padding-box; o-border-radius: 0 4px 4px 4px; o-box-shadow: rgba(0, 0, 0, 0.35) 0 5px 8px; padding: 0; padding: 4px; position: absolute; webkit-background-clip: padding-box; webkit-border-radius: 0 4px 4px 4px; webkit-box-shadow: rgba(0, 0, 0, 0.35) 0 5px 8px; z-index: 9; } .dropdown > ul > li { margin: 0; } .dropdown > ul > li { border-top: 1px solid #ddd; color: #333; cursor: pointer; display: block; font-size: 12px; font-weight: 400; line-height: 24px; min-width: 120px; padding: 0 8px; white-space: nowrap; } .dropdown > ul > li:first-child { border-top: 0; } .dropdown > ul > li:hover { background-clip: padding-box; background-color: var(--main-color); color: #fff; moz-background-clip: padding; moz-border-radius: 4px; ms-background-clip: padding-box; ms-border-radius: 4px; o-background-clip: padding-box; o-border-radius: 4px; webkit-background-clip: padding-box; webkit-border-radius: 4px; } #gallery > .image { display:inline-block; } #gallery > .image > .back { position: absolute; background-color: #cccccc4a; width: 100px; text-align: center; font-size: 18px; font-weight: bold; color: #505050; text-transform: uppercase; margin-left: -100px; margin-top: 73px; } #gallery > .image.hidden { display: none; } .tshirtLeftView .social-links { clear: both; content: ''; display: block; padding-bottom: 5px; text-align: center; padding-top: 10px; } /* ========================================================= Social share row — Pinterest / Reddit / Facebook / Native Uses Font Awesome 6 icons (loaded in header.php from cdnjs): .fa-brands .fa-pinterest-p .fa-brands .fa-reddit-alien .fa-brands .fa-facebook-f .fa-solid .fa-share-nodes The native button uses navigator.share() on mobile and falls back to clipboard copy on desktop; .share-copied shows a brief "Copied!" tooltip after a successful copy. ========================================================= */ .social-button { background-clip: padding-box; background-color: #6b7280; border: none; border-radius: 50%; width: 36px; height: 36px; line-height: 36px; padding: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); color: #fff !important; display: inline-flex; align-items: center; justify-content: center; margin: 5px; position: relative; cursor: pointer; font-family: inherit; font-size: 16px; text-decoration: none; transition: background-color 0.15s ease, transform 0.15s ease; } .social-button:hover { transform: translateY(-1px); text-decoration: none; color: #fff !important; } .social-button:active { transform: translateY(0); } .social-button > i { line-height: 1; pointer-events: none; } .social-button.pinterest { background-color: #e60023; } .social-button.pinterest:hover { background-color: #cc001f; } .social-button.pinterest:active { background-color: #a60019; } .social-button.reddit { background-color: #ff4500; } .social-button.reddit:hover { background-color: #e63e00; } .social-button.reddit:active { background-color: #b33100; } .social-button.facebook { background-color: #1877f2; } .social-button.facebook:hover { background-color: #166fe0; } .social-button.facebook:active { background-color: #0f56b3; } .social-button.native-share { background-color: #374151; } .social-button.native-share:hover { background-color: #4b5563; } .social-button.native-share:active { background-color: #1f2937; } /* "Copied!" tooltip for the desktop clipboard-copy fallback. */ .social-button.native-share.share-copied::after { content: "Copied!"; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #111827; color: #fff; font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 4px; white-space: nowrap; pointer-events: none; animation: shareCopiedFade 1.6s ease forwards; } .social-button.native-share.share-copied::before { content: ""; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: #111827; pointer-events: none; } @keyframes shareCopiedFade { 0% { opacity: 0; transform: translateX(-50%) translateY(4px); } 15% { opacity: 1; transform: translateX(-50%) translateY(0); } 80% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(-2px); } } .paymentsheading { background-position: right center; background-repeat: no-repeat; background-size: 228px 32px; min-height: 32px; } .agree-checkout-terms { font-size: 15px; padding: 5px 0 5px 0; } #no-method-checkout { display:none; } /* New Cart Layout */ .checkout-payment-icon { max-height: 32px; padding-right: 8px; } .cartLeftSection{ width:60%; float:left; } .cartRightSection{ float:right; width: 32.2%; border: 1px #d9d9d9 solid; border-radius: 4px; padding:15px; } .newCartItem{ margin-top: 10px; } .newCartItem h3{ width:100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cartSectionNum{ color:white; background-color: #009999; border: none; border-radius: 50%; width: 30px; height: 30px; display: block; text-align: center; font-size: 1.5em; line-height: 30px; margin-right: 10px; } .cartHeadings span, .cartHeadings h1{ float:left; } .cartContent figure img{ width: 159px; height: 159px; float:left; } .cartContent h3{ font-weight: 600; } .cartContent .dropdown .warning-msg-size{ color: grey; margin-top:2px; } .cartContent .dropdown{ float:left; background-color: white; color:black; border: none; margin-left:6px; font-size: 12px; min-width: 80px; } .cartContent .dropdown > span{ max-width: 80px; color:grey; } .cartContent .dropdown > span:after{ top:8px; } .cartContent .plainCartDropdown > span{ font-weight: 700; font-family: "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; cursor: pointer; display: block; line-height: 24px; max-width: 94px; overflow: hidden; padding: 0 26px 0 10px; position: relative; text-overflow: ellipsis; white-space: nowrap; height: 100%; text-align: left; text-transform: uppercase; color:grey; } .cartSettings .cart-phonecase{ margin: 10px 0 0 16px; } .cartSettings .showComment{ margin: 10px 0 0 16px; width:100%; } .cartSettings .showComment input{ width: 90%; float:left; } .cartSettings .cartinfocontrols{ margin: 10px 0 0 16px; } .cartSettings .cartinfocontrols input{ outline:none; } input[type=number]::-webkit-inner-spin-button { opacity: 1; } .cartSettings{ float:right; width:72%; } .cartSettings div{ float:left; } .checkoutIcons{ margin-top:10px; } .checkoutPricing{ margin-top: 10px; margin-left: 15px; font-size: 21px; } .cartContent, .shippingMethod, .termsCondit, .proceedPayment{ width: 100%; border: 1px #d9d9d9 solid; border-radius: 4px; padding:15px; margin-bottom: 10px; } .paymentCheckout_display input[type=image]{ margin-top:5px; } .shippingInfo{ margin-top:10px; } .shippingInfo .newDropdown { background-color: #fff; border: 1px solid #d9d9d9; color: #333; font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-weight: 400; max-width: none; min-width: 110px; outline:none; margin-top:5px; } .shippingCategory{ margin-top:15px; } .proceedPayment .checkout-buttons .raiseRadio{ margin-left:5px; } .proceedPayment .checkout-buttons label{ margin-bottom: 10px; } .checkout-buttons * img, .checkout-buttons > img { max-height: 30px; } .couponSection{ margin-bottom: 10px; } .couponSection input[type=text]{ width: 62%; height: 21.3px; text-indent: 10px; } .couponSection input[type=submit]{ margin-left:7px; border-radius: 2px; } .feesCalculation dl{ margin: 15px 0 7px 6px; } .feesCalculation hr{ margin: 0; } .feesCalculation dd{ margin-left:200px; } .new_total_title, .new_total{ font-size:1.4em; } .cartlist { margin-bottom: 10px; } @media only screen and (max-width: 998px) { .cartSettings .cart-phonecase, .cartSettings .showComment, .cartSettings .cartinfocontrols{ margin: 5px 0 0 18px; } .cartSettings .checkoutIcons{ margin-top:5px; margin-left:2px; } .cartSettings{ width:61%; } .cartRightSection{ width:30%; } .couponSection input[type=text]{ width:56%; text-indent: 5px; } .couponSection input[type=submit]{ width:34%; font-size:1em; padding:0 5px; } .feesCalculation dt{ width:60%; } .feesCalculation dd{ margin-left:130px; } } @media only screen and (max-width: 767px) { .cartLeftSection{ width: 90%; } .cartSettings, .cartContent figure img{ width:70%; } .cartContent figure img{ width:30%; height:auto; } .cartContent .plainCartDropdown > span{ margin-left:8px; } .cartRightSection{ float:left; width: 90%; } .cartSettings .cartinfocontrols .mobile-cart-controls{ font-size: 4em; float: left; margin-top:-12px; } .cartSettings .cartinfocontrols .mobile-cart-controls > a{ margin: 0px 10px 0px 0; } .couponSection input[type=text]{ width:62%; } .couponSection input[type=submit]{ width:30%; } .feesCalculation dd{ margin-left:65%; } ul.tabs li { padding: 2px 8px 2px 8px; font-size: 11px; margin-right: 1px; } } /* New Cart Layout Ends*/ .cartlist .cartheading { background-color: #eee; border-bottom: 1px solid #ccc; font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; font-weight: 600; overflow: hidden; padding: 4px 12px; text-align: left; white-space: nowrap; } .cartlist .cartheading .cartheadinginfo { float: left; } .cartlist .cartheading .cartheadingcontrols { display: inline-block; float: right; min-width: 104px; } .cartlist .cartitem { border-bottom: 1px solid #ddd; padding: 16px 0; } .cartlist .cartitem:after { clear: both; content: ''; display: block; } .cartlist .cartitem .cartiteminfo { float: left; padding-left: 80px; width: 704px; } .cartlist .cartitem .cartiteminfo figure { float: left; height: 64px; margin-left: -80px; width: 64px; } .cartlist .cartitem .cartiteminfo figure a { display: block; } .cartlist .cartitem .cartiteminfo figure img { height: 64px; max-height: 64px; max-width: 64px; width: 64px; } .cartlist .cartitem .cartiteminfo h3 { font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-size: 20px; font-weight: 600; line-height: 32px; margin: 0 0 4px; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .cartlist .cartitem .cartiteminfo .dropdown { background: none; border: 0; color: #666; font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-weight: 600; margin-right: 8px; max-width: none; min-width: 32px; } .cartlist .cartitem .cartiteminfo .dropdown:active { background: none; } .cartlist .cartitem .cartiteminfo .dropdown > span { font-size: 11px; line-height: 20px; max-width: none; padding: 0 16px 0 0; } .cartlist .cartitem .cartiteminfo .dropdown > span.none { cursor: default; } .cartlist .cartitem .cartiteminfo .dropdown > span:after { border-top-color: #666; border-width: 4px; right: 4px; top: 8px; } .cartlist .cartitem .cartiteminfo .dropdown > span.none:after { display: none; } .cartlist .cartitem .cartiteminfo .checkout-removeitem, .cartContent .cartSettings .checkout-removeitem, .cartlist .cartitem .cartiteminfo .checkout-commentitem, .cartContent .cartSettings .checkout-commentitem { display: inline-block; font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-size: 11px; font-weight: 600; line-height: 20px; margin-left: 16px; vertical-align: middle; } .cartlist .cartitem .cartiteminfo .checkout-removeitem:before, .cartContent .cartSettings .checkout-removeitem:before{ background-image: url("../images/new_breadcrumb_cart.png"); background-repeat: no-repeat; background-size: 12px 132px; background-position: 0 -24px; content: ''; display: inline-block; height: 12px; margin-right: 4px; ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; opacity: .5; vertical-align: text-bottom; width: 12px; } .cartlist .cartitem .cartiteminfo .checkout-commentitem:before, .cartContent .cartSettings .checkout-commentitem:before { background-image: url("../images/new_breadcrumb_cart.png"); background-repeat: no-repeat; background-size: 12px 132px; background-position: 0 -12px; content: ''; display: inline-block; height: 12px; margin-right: 4px; ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; opacity: .5; vertical-align: text-bottom; width: 12px; } @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .cartlist .cartitem .cartiteminfo .checkout-removeitem:before { background-image: url("../images/new_breadcrumb_cart@2x.png"); } } .cartlist .cartitem .cartiteminfo .checkout-removeitem:hover:before { ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } .cartlist .cartitem .cartinfocontrols { border-left: 1px solid #eee; float: right; min-height: 32px; min-width: 120px; padding: 16px; text-align: right; } .cartlist .cartitem .cartinfocontrols input { text-align: right; width: 40px; } .cartlist .cartitem .cartinfocontrols var { color: #666; display: inline-block; font-size: 16px; font-style: normal; line-height: 32px; margin-left: 16px; vertical-align: middle; } .ship_label { font-size: 14px; margin-bottom: 10px; } .cartlist .carttotal { border-bottom: 1px dotted #eee; padding: 8px 0; } .cartlist > .hidden { display: none; } .cartlist .carttotal:after { clear: both; content: ''; display: block; } .cartlist .carttotal .carttotalinfo { color: #999; float: left; font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; font-weight: 600; line-height: 32px; padding-right: 16px; text-align: right; text-transform: uppercase; width: 580px; } .cartlist .carttotal .carttotalcontrols { border-left: 1px solid #eee; float: right; min-height: 32px; min-width: 120px; padding: 0 16px; text-align: right; } .cartlist .carttotal .carttotalcontrols select { font-size: 14px; width: 223px; } .cartlist .carttotal .carttotalcontrols input { font-size: 14px; } .cartlist .carttotal .carttotalcontrols var { display: inline-block; font-size: 16px; font-style: normal; line-height: 32px; margin-left: 16px; vertical-align: middle; } .cartlist .carttotal.grandtotal { background-color: #eee; } .cartlist .carttotal.grandtotal .carttotalinfo { color: #333; font-size: 14px; font-weight: 700; } .cartlist .carttotal.grandtotal .carttotalcontrols { border-left-color: #ddd; } .cartlist .carttotal.grandtotal .carttotalcontrols var { color: var(--main-color); font-weight: 700; } .remove-coupon-wrap { margin-top: 10px; display: flex; flex-direction: row; justify-content: flex-end; } .remove-coupon { cursor: pointer; padding: 2px 15px; color: #000; } .remove-coupon > a, .remove-coupon > a:focus, .remove-coupon > a:active, .remove-coupon > a:hover { outline: none; color: inherit; text-decoration: none; } .remove-coupon:hover { background-color: #de4848; color: #FFF; } .checkout-buttons { clear: both; overflow: hidden; } .checkout-buttons .checkout-continueshopping { float: left; } .checkout-buttons br { /*display: none;*/ } /* Legacy cart terms & payment */ .agreeterms { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; margin-bottom: 16px; } .agreeterms h3 { font-size: 18px; font-weight: 700; color: var(--font-color); margin: 0 0 12px 0; } .agreeterms label { font-size: 14px; color: #475569; } .agreeterms input[type="checkbox"] { accent-color: var(--main-color); margin-right: 8px; } .checkout-buttons.right { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; margin-bottom: 16px; } .checkout-buttons.right h3 { font-size: 18px; font-weight: 700; color: var(--font-color); margin: 0 0 16px 0; } .paymentCheckout_display { margin-top: 16px; } .field { clear: left; margin-bottom: 12px; zoom: 1; } .field.smallfield { float: left; } .field.smallfield.right { float: right; } .field.smallfield .input, .field.smallfield input[type=text], .field.smallfield input[type=number], .field.smallfield input[type=password], .field.smallfield input[type=search], .field.smallfield input[type=email], .field.smallfield textarea, .field.smallfield select { /*width: 180px;*/ /*max-width:410px;*/ max-width:441px; width: 98%; } .field.smallfield + .smallfield { clear: none; /*padding-left: 16px;*/ } .col-left .smallfield input, .col-right .smallfield input { width: 142px; } .textarea-full { width: 100% !important; } @media only screen and (min-width: 998px) { .field.smallfield .input, .field.smallfield input[type=text], .field.smallfield input[type=number], .field.smallfield input[type=password], .field.smallfield input[type=search], .field.smallfield input[type=email], .field.smallfield textarea, .field.smallfield select { width: 208px; max-width: 98%; } .col-left .smallfield input, .col-right .smallfield input { width: 202px !important; } .field.smallfield + .smallfield { clear: none; padding-left: 16px; } } .field.tinyfield .input, .field.tinyfield input[type=text], .field.tinyfield input[type=number], .field.tinyfield input[type=password], .field.tinyfield input[type=search], .field.tinyfield input[type=email], .field.tinyfield textarea, .field.tinyfield select { width: 98px; } .field.required label { font-weight: 700; } .field.optional label { font-weight: 400; } .field .fieldnote { color: #999; } .field.checkbox input { background: transparent; border: 0; border-radius: 0; float: left; height: 22px; margin-right: 8px; padding: 0; width: auto; } .field.checkbox label { display: inline-block; font-weight: 400; } .field .input, .field input[type=text], .field input[type=number], .field input[type=password], .field input[type=search], .field input[type=email], .field textarea { max-width: 98%; min-height: 20px; width: 443px; } .field textarea { width: 443px; } .field.hidden { display: none; } label, .label { cursor: pointer; display: inline; display: inline-block; font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-weight: 600; margin-bottom: 4px; zoom: 1; } label.inline, .label.inline { display: inline; display: inline-block; margin-right: 4px; padding-top: 4px; vertical-align: middle; zoom: 1; } label.inline + input, .label.inline + input { margin-right: 15px; } .input, input[type=text], input[type=number], input[type=password], input[type=search], input[type=email], textarea { background-clip: padding-box; background-color: #fff; border-color: #cccccc; border-color: rgba(0, 0, 0, 0.2); border-radius: 2px; border-style: solid; border-width: 1px; color: #333; moz-background-clip: padding; moz-border-radius: 2px; ms-background-clip: padding-box; ms-border-radius: 2px; o-background-clip: padding-box; o-border-radius: 2px; outline: none; padding: 5px 4px; vertical-align: middle; webkit-appearance: textfield; webkit-background-clip: padding-box; webkit-border-radius: 2px; } .input.error, input[type=text].error, input[type=number].error, input[type=password].error, input[type=search].error, input[type=email].error, textarea.error { border-color: #d04949; background-color: #fcbdbd; } .input + .input, input[type=text] + .input, input[type=number] + .input, input[type=password] + .input, input[type=search] + .input, input[type=email] + .input, textarea + .input { margin-top: 10px; } .input.large, input[type=text].large, input[type=number].large, input[type=password].large, input[type=search].large, input[type=email].large, textarea.large { width: 588px; } .input .button, input[type=text] .button, input[type=number] .button, input[type=password] .button, input[type=search] .button, input[type=email] .button, textarea .button { vertical-align: middle; width: auto !important; } input::-webkit-search-decoration, input::-webkit-search-cancel-button, input::-webkit-search-results-button, input::-webkit-search-results-decoration { display: none; } .input:focus, input[type=text]:focus, input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input[type=email]:focus, .input:hover, input[type=text]:hover, input[type=number]:hover, input[type=password]:hover, input[type=search]:hover, input[type=email]:hover, textarea:focus, textarea:hover { border-color: rgba(0, 0, 0, 0.4); } .input + .input { margin-top: 8px; } textarea { overflow: auto; resize: both; width: 100%; } select { max-width: 98%; min-height: 20px; padding: 4px; vertical-align: middle; width: 443px; } /*blog*/ .blog.box { border-radius: 4px; margin-bottom: 10px; border: solid 1px #D6D6D6; background-color: var(--bg-color); padding: 5px 10px; } .blog.title { font-size: 20px; width: 90%; display: block; padding: 4px 0px 10px 0px; text-transform: uppercase; } .blog.date { font-size: 11px; color: #7f7f7f; } .blog.category { display: inline; font-size: 14px; padding-left: 6px; color: #7f7f7f; text-transform: uppercase; } .blog.post { padding: 6px; } .blog.shortpost { padding-left: 6px; text-overflow: ellipsis; } .blog.keywords { font-size: 11px; padding: 15px 0px 5px 5px; text-transform: uppercase; } .marker { background-color: yellow; } .buttons { border-top-color: #cccccc; border-top-style: solid; border-top-width: 1px; clear: both; margin-top: 16px; padding: 8px 0 0; } .cancelLink { color: #7d0404; cursor: pointer; display: inline-block; font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-size: 14px; font-weight: 600; line-height: 32px; margin: 0 4px; padding: 0 4px; text-decoration: none; vertical-align: middle; } .cancelLink:hover { color: #983232; } .cancelLink:active { color: #600; } input.button, button.button { min-height: 32px; } .add-cart { width: 100%; margin-top:10px; height:50px; } .add-cart-alt { width: 100%; margin-top:10px; height:50px; } .deDays{ margin: 20px 0 20px 0; padding: 0 0; } .deHeading{ margin: 20px 0 20px 0; padding: 0 0; height: 12px; } .deTitle{ color: var(--font-color); margin-bottom:0px; float: left; } .deInfo{ margin-top:-10px; text-align: center; } .deDates{ font-weight: bold; } .deType{ font-weight: 100; } .postInfo{ text-align: center; margin-top:10px; min-height:25px; } .postMethod{ width: 100px; height: 25px; display: inline-block; } .paymentsAccepted > img, .paymentsAccepted * img { max-height: 30px; margin-right: 9px; } .shippinglabels { background-image: url(../images/shipping.png); background-repeat: no-repeat; background-size: 100px; height: 25px; } .shipping_usps { background-position: 0px 0px;} .shipping_canadapost { background-position: 0px -25px;} .shipping_spring { background-position: 0px -50px;} .shipping_landmark { background-position: 0px -75px;} .dropbtn { background-color: transparent; text-align: right; color: var(--font-color); padding: 16px 2px; font-size: 13px; font-family: "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-weight: 400; border: none; cursor: pointer; width: 150px; height: 20px; margin-right: -20px; } .triangle-down{ width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid #737373; float: right; margin-top: 21px; margin-left: 22px; } .dropdownCountry { position: relative; display: inline-block; float:right; margin-top:-13.7px; } .dropdown-content { display: none; position: absolute; background-color: #D0D0D0; z-index: 1; height: 120px; } .dropdown-content ul{ margin-left: -40px; text-align: center; width: 153px; height: 120px; } .dropdown-content li { color: black; padding: 5px 16px; text-decoration: none; display: block; margin: 0 0 0 0; } .dropdown-content li:hover { color: white; } .dropdownCountry:hover .dropdown-content { display: block; } .dropdownCountry:hover .dropbtn { background-color: transparent; } .button, a.button { background-clip: padding-box; background-color: #ddd; border-color: #ddd; border:none; color: #333; cursor: pointer; display: inline; display: inline-block; font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-size: 14px; font-weight: 600; moz-background-clip: padding; moz-border-radius: 4px; ms-background-clip: padding-box; ms-border-radius: 4px; o-background-clip: padding-box; o-border-radius: 4px; outline: none; overflow: visible; padding: 5px 15px; vertical-align: middle; text-align: center; webkit-background-clip: padding-box; webkit-border-radius: 4px; zoom: 1; } .button.add-cart-alt, a.button.add-cart-alt { font-size: 20px; } .button:hover, a.button:hover { background-color: #e1e1e1; border-color: #e1e1e1; } .button:active, a.button:active { background-color: #c8c8c8; border-color: #c8c8c8; } .button.submit, a.button.submit { background-color: var(--main-color); background-image: linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 100%); background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 100%); background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 100%); background-image: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 100%); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 100%); border-color: var(--main-color); color: #fff; } .button.submit:hover, a.button.submit:hover { background-color: var(--link-border); border-color: var(--link-border); } .button.submit:active, a.button.submit:active { background-color: var(--main-color); border-color: var(--link-border); color: #fff; } .button.warning, a.button.warning { background-color: #e07777; background-image: linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%); background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%); background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%); background-image: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%); border-color: #e07777; color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35); } .button.warning:hover, a.button.warning:hover { background-color: #cc5f5f; border-color: #cc5f5f; } .button.warning:active, a.button.warning:active { background-color: #602020; border-color: #602020; color: #fff; } .button.disabled, a.button.disabled { background-color: #d8d8d8; border-color: #d8d8d8; } .button + .button, a.button + .button { margin-left: 10px; } .col-left { float: left; margin: 0 2% 0 0; width: 48%; box-sizing: border-box; } .col-right { float: right; margin: 0 0 0 2%; width: 48%; box-sizing: border-box; } .notice { background-color: #ffffcc; border-color: #cfcfb3; background-clip: padding-box; border-radius: 4px; border-style: solid; border-width: 1px; margin-bottom: 12px; margin-top: 8px; moz-background-clip: padding; moz-border-radius: 4px; ms-background-clip: padding-box; ms-border-radius: 4px; o-background-clip: padding-box; o-border-radius: 4px; padding: 12px; webkit-background-clip: padding-box; webkit-border-radius: 4px; color: var(--font-color-alt); } .notice.error { background-color: #fff7f7; border-color: #e0c4c4; } .notice.success { background-color: #f1fff1; border-color: #bbd7bb; } .notice > .staff:before { content: "Staff Message"; } .notice > .staff { float: right; color: #b5b5b5; margin: -8px; font-family: serif; font-size: 18px; font-style: italic; } .tiny-text { font-size:12px; margin-top:20px; text-align: center; font-style: italic; } .purchase-thankyou { text-align: center; font-size: 25px; margin-bottom: 20px; } .marquee span { display: inline-block; padding-left: 100%; text-indent: 0; border: none; animation: marquee 20s linear infinite; } .marquee span:hover { animation-play-state: paused } /* Make it move */ @keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } } .pagination { clear: both; line-height: 24px; margin: 32px 0 26px; overflow: hidden; text-align: center; text-transform: uppercase; /* Force pagination onto its own row when nested inside a CSS grid (e.g. .itemtiles) or flex container, instead of being placed alongside product cards. */ grid-column: 1 / -1; width: 100%; flex-basis: 100%; } /* ───────────────────────────────────────────────────────────────── DMCA / copyright infringement page Layout: numbered procedure with a table of contents at the top, inline definition-list of required items, and a quiet warning box at the end. Tone is neutral — no yellow alerts; the "warning" only uses a soft red accent on the misuse-of-process section. ───────────────────────────────────────────────────────────────── */ .dmca-page { font-size: 15px; line-height: 1.6; } .dmca-page h1 { margin-bottom: 8px; } .dmca-lede { font-size: 15px; line-height: 1.6; color: #374151; margin: 8px 0 22px; } /* Table of contents — boxed, two-column on wider viewports */ .dmca-toc { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px 22px; margin: 0 0 36px; } .dmca-toc__title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #6b7280; margin-bottom: 10px; } .dmca-toc__list { list-style: decimal; padding-left: 24px; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; color: #374151; font-size: 15px; } .dmca-toc__list li { padding-left: 4px; } .dmca-toc__list a { color: #4338ca; text-decoration: none; } .dmca-toc__list a:hover, .dmca-toc__list a:focus { text-decoration: underline; } /* Numbered sections */ .dmca-section { margin: 0 0 32px; scroll-margin-top: 24px; /* anchor jumps don't sit flush against viewport top */ } .dmca-section h2 { display: flex; align-items: baseline; gap: 12px; font-size: 20px; font-weight: 700; color: #111827; margin: 0 0 12px; } .dmca-section__num { font-size: 22px; font-weight: 700; color: #6366f1; flex-shrink: 0; } .dmca-section p { font-size: 15px; line-height: 1.65; color: #374151; margin: 0 0 12px; } .dmca-section__note { font-size: 14px; color: #6b7280; font-style: italic; } /* Definition list of required items. Forced to stack — site has a global rule that floats
/
into side-by-side columns (same pattern that misrendered the FAQ page), so we override with explicit display + width here. */ .dmca-requirements { margin: 8px 0 0; padding: 0; display: block; } .dmca-requirements dt { display: block; width: 100%; float: none; clear: both; font-size: 15px; font-weight: 700; color: #111827; margin-top: 18px; margin-left: 0; padding: 0; line-height: 1.4; } .dmca-requirements dt:first-of-type { margin-top: 6px; } .dmca-requirements dd { display: block; width: 100%; float: none; clear: both; margin: 6px 0 0; padding: 0; font-size: 15px; color: #374151; line-height: 1.65; } /* Email block — plain text, monospace addresses, no hyperlinks */ .dmca-emails { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; padding: 14px 18px; margin: 12px 0 14px; display: grid; gap: 10px; } .dmca-emails__row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .dmca-emails__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; min-width: 130px; } .dmca-emails__addr { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 15px; font-weight: 700; color: #111827; user-select: all; /* tap-to-select on mobile, easy copy on desktop */ } /* Misuse-of-process warning — quiet rose accent, no yellow */ .dmca-warning { background: #fff; border: 1px solid #fecaca; border-left: 4px solid #dc2626; border-radius: 6px; padding: 14px 18px; margin: 8px 0 14px; } .dmca-warning p { font-size: 15px; color: #374151; line-height: 1.65; margin: 0 0 8px; } .dmca-warning p:last-child { margin-bottom: 0; } .dmca-warning strong { color: #991b1b; } @media (max-width: 640px) { .dmca-toc__list { grid-template-columns: 1fr; } .dmca-emails__label { min-width: 0; flex-basis: 100%; margin-bottom: -4px; } } /* Admin shortcut bar shown only to logged-in admins. .product-admin-bar lives on the product (buypage) view; .page-admin-bar lives on editable storefront pages (about, faq, contact, etc). They share the same visual treatment so admins get a consistent affordance. */ .product-admin-bar, .page-admin-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 14px; margin: 0 0 14px; background: #1f2937; color: #f3f4f6; border-radius: 6px; font-size: 0.85rem; line-height: 1.4; } .product-admin-bar__label, .page-admin-bar__label { background: #6366f1; color: #fff; padding: 2px 8px; border-radius: 4px; font-weight: 600; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; flex-shrink: 0; } .product-admin-bar__meta, .page-admin-bar__meta { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d1d5db; } .product-admin-bar__btn, .page-admin-bar__btn { flex-shrink: 0; background: #6366f1; color: #fff; padding: 6px 14px; border-radius: 5px; font-weight: 600; text-decoration: none; font-size: 0.8rem; transition: background 0.15s ease; } .product-admin-bar__btn:hover, .product-admin-bar__btn:focus, .page-admin-bar__btn:hover, .page-admin-bar__btn:focus { background: #4f46e5; color: #fff; text-decoration: none; } @media (max-width: 480px) { .product-admin-bar, .page-admin-bar { font-size: 0.8rem; padding: 7px 10px; gap: 8px; } .product-admin-bar__btn, .page-admin-bar__btn { padding: 5px 10px; } .product-admin-bar__meta, .page-admin-bar__meta { font-size: 0.75rem; } } .pagination span.pages { display: none; } .pagination ul, .pagination li { display: inline-block; margin: 0; text-align: center; } .pagination > ul > li { color: #999; font-weight: bold; margin: 0 4px; } .pagination > ul > li > a { background-clip: padding-box; border-color: #fff; border-radius: 4px; border-style: solid; border-width: 1px; cursor: pointer; display: inline-block; moz-background-clip: padding; moz-border-radius: 4px; ms-background-clip: padding-box; ms-border-radius: 4px; o-background-clip: padding-box; o-border-radius: 4px; padding: 0 8px; text-decoration: none; webkit-background-clip: padding-box; webkit-border-radius: 4px; } .pagination > ul > li > a.next, .pagination > ul > li > a.previous { background-color: #ddd; background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 100%); background-image: -moz-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 100%); background-image: -ms-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 100%); background-image: -o-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 100%); background-image: -webkit-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 100%); border-color: #ddd; color: #333; } .pagination > ul > li > a.next:hover, .pagination > ul > li > a.previous:hover { background-color: #e1e1e1; border-color: #e1e1e1; } .pagination > ul > li > a.next:active, .pagination > ul > li > a.previous:active { background-color: #c8c8c8; border-color: #c8c8c8; } .pagination > ul > li > a.active { background-color: var(--main-color); background-image: linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 100%); background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 100%); background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 100%); background-image: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 100%); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 100%); border-color: var(--main-color); color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35); } .pagination > ul > li > a.active:hover { background-color: var(--link-border); border-color: var(--link-border); } .pagination > ul > li > a.active:active { background-color: var(--link-hover); border-color: var(--link-hover); color: #fff; } .pagination > ul > li > a.disabled { background-color: #fff !important; border-color: #ddd !important; color: #999 !important; cursor: default; } .tshirt > figure .update { background-image: url("../images/update.png"); background-repeat: no-repeat; background-size: 78px 78px; display: block; height: 78px; position: absolute;x-offse width: 78px; } .plugin { position: relative; background-color: #EAE9E9; border: 1px solid #CDCDCD; display: inline-block; height: 100%; margin: 10px 30px; max-height: 340px; overflow: hidden; text-align: center; vertical-align: top; width: 240px; min-height: 350px; } .plugin > .update { background-image: url("../images/update.png"); background-repeat: no-repeat; background-size: 78px 78px; display: block; height: 78px; margin-left: 20px; margin-top: 5px; position: absolute; width: 78px; } .plugin > .title { font-size: 16px; font-weight: 400; } .version { color: #7b7b7b; font-size: 11px; } .plugin > a > img, .plugin > img { height: 200px; padding: 5px 0; width: 200px; } .plugin > .description { color: #7b7a7a; padding: 1px 3px; } .pluginbox { padding: 10px 10px; background: #f2f2f2; border: solid 1px #e0e0e0; margin-bottom: 10px; margin-top: 13px; } .cartwheel { display: none; } .help { height: 100px; margin-left: 30px; width: 100%; } .help > .icon { float: left; height: 100%; margin: 2px; width: 200px; } .help > .title { font-size: 18px; } .help > .description { color: #888888; } .faq { list-style: none; margin: 0; padding: 0; } .faq > li { border-top: 1px dotted #ccc; list-style: none; min-height: 32px; overflow: hidden; padding: 16px 0; } .faq > li:before { background-image: url("../images/faq_icons.png"); background-repeat: no-repeat; background-size: 48px 288px; content: ''; display: block; float: left; height: 48px; margin-right: 24px; width: 48px; } .faq .product-management:before { background-position: 0 -48px; } .faq .adjust-settings:before { background-position: 0 -96px; } .faq .promos-coupons:before { background-position: 0 -144px; } .faq .purchases-payments:before { background-position: 0 -196px; } .faq .install-plugins:before { background-position: 0 -240px; } @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .faq > li:before { background-image: url("../images/faq_icons@2x.png"); } } .faq > li > a { color: #333; display: block; } .faq > li > a:hover { color: #693; } .faq > li:first-child { border-top: 0; } .faq > li h3 { margin-bottom: 4px; } .faq > li p:last-child, .faq > li ul:last-child { margin-bottom: 0; } .bcategories { padding-bottom: 14px; } .bcategories > .title { font-size: 18px; font-weight: 600; } .bcategories > .description { color: #484848; padding-left: 40px; } .right { float: right; } .raiseRadio { margin-left: 30px; } .pay_hide { display: none; } .pay_hide.show { display: block; } @media only screen and (max-width: 998px) { .tutorial { width: 320px; height: 160px; } #header { height:50px; padding: 16px 8px; justify-content: space-around; } .bigsearch > .searchbox { height: 30px; width: 70%; font-size: 20px; } #brandingLogo { font-size: 24px; line-height: 24px; margin: 0 8px 0 0; padding: 0 16px 0 0; } #navigation > ul > li > a { font-size: 14px; line-height: 24px; padding: 0 8px; } #search { margin: 0; } #search #search-input, #search input[type=search] { padding: 6px 8px 6px 24px; } .wrap { max-width: 730px; } .notice { margin-top:-8px; } #footer > div { font-size: 11px; margin-right: 32px; } #siteinfo-community { margin-left:17%; } #body .wrap { padding: 20px 0; } #mainBar.full { width: 100%; } #mainBar.withsidecat { width: 516px; } #promos { width: 100%; } #promos-x-large img { display: block; height: auto; width: 100% } #promos-large { margin-right: 8px; } #promos-large img { height: 170.1px; width: 363.3px; } #promos-small-left { margin-right: 4px; } #promos-small-left img, #promos-small-right img { height: 170.1px; width: 174.3px; } /* Product grid — handled by modern card layout above. */ .itemtiles { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .item > figure > figcaption { font-size: 13px; padding: 8px 10px 10px; min-height: 68px; } .tshirt figure { width: 320px; min-height: 300px; } .tshirt figure img { width: 320px; } .tshirt .tshirtinfo { width: 316px; } .tshirt .tshirtLeftView { float: left; width: 350px; } .tshirt .tshirtLeftView .social-links { clear: both; content: ''; display: block; text-align: center; padding-top: 10px; } .tshirt .tshirtinfo h2 { font-size: 28px; line-height: 32px; margin-bottom: 8px; } .tshirt .tshirtinfo .dropdown{ } .tshirt .tshirtinfo .dropdown > span { font-size: 14px; width: 136px; } .tshirt .tshirtinfo .tshirtinfosize { margin-bottom: 20px; } .tshirt .tshirtinfo .tshirtinfoorder var { margin-right: 12px; } .add-cart-alt { width: 100%; margin:15px 0 0 0; height:50px; } .tshirt .tshirtinfo .tshirtinfoorder .add-cart { font-size: 20px; min-height: 48px; padding: 9px 15px; } .tshirt .tshirtinfo p { margin-bottom: 20px; } .tshirt .tshirtLeftView .note { width:310px; /*margin: 20px 0px 0px; padding-top: 12px;*/ } .tshirt .tshirtLeftView .large { /*margin: 20px 0 20px; padding-top: 12px;*/ } .cartlist { margin-bottom: 24px; } .cartlist .cartitem { padding: 12px 0; } .cartlist .cartitem .cartiteminfo { width: 444px; } .cartlist .carttotal .carttotalinfo { width: 524px; } .performance li { display:inline-table; } .settings_section > .field { margin-bottom:50px; } .settings_section > .field.group { margin-bottom:0px; } .field_note { position: static; top: auto; right: auto; width: 100%; display: block; margin-bottom: 4px; } .deDays { margin: 20px 0 20px 0; padding: 0 0; } .deHeading { margin: 20px 0 20px 0; padding: 0 0; } .deTitle { color: var(--font-color); margin-bottom:0px; float: left; } .deInfo { margin-top:-10px; text-align: center; } .deDates { font-weight: bold; } .deType { font-weight: 100; } } @media only screen and (max-width: 767px) { .tutorial { width: 200px; height: 180px; } #header { padding: 10px 8px; height: auto; display: block; } img { display: inline-block; max-width: 100%; height: auto; } #brandingLogo { border-right: 0; margin: 0; padding: 0; width: 88%; } .adminsearch { width: 99%; } .bigsearch > .searchbox { height: 30px; width: 60%; font-size: 20px; } /* Search-results form. The fixed 60% input + 100px button left a dead gap on the right of the screen; flex lets the input absorb whatever space is left so the pair always spans the full width. */ .bigsearch { display: flex; align-items: stretch; gap: 8px; width: 100%; box-sizing: border-box; } .bigsearch > .searchbox { flex: 1 1 auto; width: auto; min-width: 0; height: auto; box-sizing: border-box; } .bigsearch > .searchbutton { flex: 0 0 auto; width: auto; min-width: 104px; height: auto; box-sizing: border-box; } #navigation { float: right; position: relative; } #navigation #navigationToggle { display: block; } #navigation #navigationMenu { display: none; } #navigation:hover #navigationMenu { background-clip: padding-box; background-color: #000; border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.35) 0 0 8px; display: block; moz-background-clip: padding; moz-border-radius: 4px; moz-box-shadow: rgba(0, 0, 0, 0.35) 0 0 8px; ms-background-clip: padding-box; ms-border-radius: 4px; ms-box-shadow: rgba(0, 0, 0, 0.35) 0 0 8px; o-background-clip: padding-box; o-border-radius: 4px; o-box-shadow: rgba(0, 0, 0, 0.35) 0 0 8px; padding: 4px; position: absolute; right: 0; webkit-background-clip: padding-box; webkit-border-radius: 4px; webkit-box-shadow: rgba(0, 0, 0, 0.35) 0 0 8px; z-index: 9; } #navigation:hover #navigationMenu > li { border-top: 1px solid rgba(255, 255, 255, 0.1); display: block; } #navigation:hover #navigationMenu > li:first-child { border-top: 0; } #navigation:hover #navigationMenu > li > a { font-size: 16px; line-height: 32px; padding: 0 16px; text-align: right; } #navigation:hover #navigationMenu > li.active > a { background-color: var(--main-color); color: #fff; } #search { clear: both; float: none; text-align: center; padding-top: 3px; } #search #search-input, #search input[type=search] { padding: 8px 8px 8px 24px; width: 90%; } #subnavigation { background-clip: padding-box; border-radius: 0 !important; box-shadow: rgba(0, 0, 0, 0.35) 0 0 4px; /* Full-bleed: span full viewport width regardless of .wrap's 16px horizontal padding */ width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: 12px; padding-right: 12px; box-sizing: border-box; moz-background-clip: padding; ms-background-clip: padding-box; o-background-clip: padding-box; webkit-background-clip: padding-box; } #subnavigation > nav { float: none; padding: 0; } #subnavigation > nav > ul > li { margin-right: 0; } #subnavigation > nav > ul > li > a { font-size: 13px; line-height: 24px; padding: 0 8px; } #subnavigation > nav > ul > li.dropdown > a:after { margin: 10px -4px 0 4px; } #subnavigation #cart { clear: both; float: right; margin-top: 8px; text-align: center; width: 49%; display:inline-block; } #subnavigation .icon { display: none; } #subnavigation #currency { clear: both; float: none; margin-top: 8px; text-align: center; width: 49%; display:inline-block; } #currencydrop { min-width: 100%; } #currencydrop > div { max-width: 100%; text-align: center; font-size: 14px; } .updatecartwheel { display:inline-block; width: 16px; height: 16px; } .mobile-cart-controls { display:inline-block; font-size: 40px; line-height: 40px; vertical-align: bottom; } .mobile-cart-controls > a { display:inline-block; margin: 0px 10px; } .wrap { max-width: none; } #breadcrumb { margin-top: 0; } #breadcrumb > ul li.home > a { background-position: center -68px; padding: 0 8px; text-indent: -9000px; width: 12px; } #breadcrumb > ul li.top > a { background-position: center -100px; display: block; text-indent: -9000px; width: 12px; } #footer { padding: 0; text-align: center; } #siteinfo-community{ margin-left:0; } #footer > div { border-bottom: 1px solid rgba(0, 0, 0, 0.1); float: none !important; margin-right: 0; padding: 8px; width: 100%; } #footer > div#siteinfo-social { /*display: none;*/ } #footer ul li { border-left: 1px solid rgba(0, 0, 0, 0.1); display: inline-block; margin-right: 8px; padding-left: 12px; } #footer ul li:first-child { border-left: 0; padding-left: 0; } #footer ul li:last-child { margin-right: 0; } #footer .copyright { font-size: 10px; margin: 0; } #body .wrap { padding: 16px 0; } #mainBar.full { float: none; margin-left: 0; width: auto; } #mainBar.withsidecat{ float: none; margin-left: 0; width: auto; } #sidebar { float: none; margin-right: 0; padding: 16px; width: auto; } #sidebar-categories { border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(0, 0, 0, 0.1); } #sidebar-categories h4 { margin: 0; } #sidebar-categories h4 a { display: block; font-size: 16px; line-height: 32px; } #sidebar-categories h4 a:after { border-color: transparent; border-style: solid; border-top-color: #999; border-width: 7px; content: ''; display: block; float: right; height: 0; margin: 13px 0 0 4px; width: 0; } #sidebar-categories:hover ul { display: block; } #sidebar-categories ul { display: none; } .leftCornerMobile > ul { margin: 0 0 -5px 0; } .paymentsAccepted { margin-bottom: 10px; } .note { margin-bottom: 20px; width: auto; overflow: hidden; padding: 0 6px; border-top: 1px solid #ddd; color: #666; font-size: 11px; line-height: 20px; padding: 10px 10px; background:#fff; } .note > img { height: auto; width: 100%; } .flextable * .note { margin: 0px; padding: 0px; border: none; } .leftCorner{ display: none; } .leftCornerMobile{ display: block; } #descriptionMobile{ display: block; } .agree-checkout-terms { font-size: 12px; } #promos { /*margin: 0 6px 16px 0; */ overflow: hidden; width: 100%; text-align: center; } #promos-x-large { display: block; margin-bottom: 8px; width: 100%; } #promos-x-large img{ height: auto; width: 100%; } #promos-large { display: block; margin-bottom: 8px; margin:0; } #promos-large img { height: 200px; width: 100%; } #promos-small-left { display: block; float: left; width: 49%; margin-top:4px; } #promos-small-right { display: block; float: left; width: 49%; margin-top:4px; } #promos-small-left img, #promos-small-right img { height: auto; width: 100%; } /* Product grid on small phones — two columns, compact cards. */ .itemtiles { padding: 0 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .item > figure > figcaption { font-size: 12px; line-height: 1.3; padding: 8px 10px 10px; min-height: 62px; } .item > figure var { font-size: 14px; } .tshirt { margin: -8px -8px 0; padding: 8px; } .tshirt figure { box-shadow: rgba(0, 0, 0, 0.15) 0 2px 8px; float: none; margin: 0 auto 16px; max-width: 98%; min-width: 282px; moz-box-shadow: rgba(0, 0, 0, 0.15) 0 2px 8px; ms-box-shadow: rgba(0, 0, 0, 0.15) 0 2px 8px; o-box-shadow: rgba(0, 0, 0, 0.15) 0 2px 8px; webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 2px 8px; } .tshirt .tshirtinfo { float: none; padding: 0 8px; width: auto; } .tshirt .tshirtLeftView{ float: none; width: auto; } .tshirt .tshirtLeftView .social-links { clear: both; content: ''; display: block; padding-bottom: 5px; text-align: center; padding-top: 0px; } .tshirt .tshirtinfo h2 { font-size: 20px; line-height: 24px; margin-bottom: 8px; } .tshirt .tshirtinfo .dropdown { margin-right: 0; } .tshirt .tshirtinfo .dropdown > span { width: 234px; } .tshirt .tshirtinfo .tshirtinfosize { margin-bottom: 12px; } .tshirt .tshirtinfo .tshirtinfosize .tshirtinfosizingchart { margin-left: 12px; } .tshirt .tshirtinfo .tshirtinfoorder var { font-size: 30px; line-height: 32px; margin-right: 16px; } .tshirt .tshirtinfo .tshirtinfoorder .add-cart { font-size: 16px; min-height: 32px; padding: 9px 19px; } .add-cart-alt{ width: 100%; margin:10px 0 0 0; height:50px; } .tshirt .tshirtinfo p { margin-bottom: 16px; } .tshirt .tshirtLeftView .note { width:auto; } .deDays { margin: 20px 0 20px 0; padding: 0 0; } .deHeading { margin: 20px 0 20px 0; padding: 0 0; } .deTitle { color: var(--font-color); margin-bottom:0px; float: left; } .deInfo { margin-top:-10px; text-align: center; margin-bottom: 45px; } .deDates { font-weight: bold; } .deType { font-weight: 100; } .paymentsheading { background-size: 114px 16px; } .nextitem { display:block; } .cartlist { margin-bottom: 16px; } .cartlist .cartheading .cartheadinginfo { float: none; } .cartlist .cartheading .cartheadinginfo:after { content: ' / '; } .cartlist .cartheading .cartheadingcontrols { display: inline; float: none; } .cartlist .cartitem { padding: 8px 0; } .cartlist .cartitem .cartiteminfo { float: none; padding-left: 44px; width: auto; } .cartlist .cartitem .cartiteminfo figure { height: 32px; margin-left: -44px; margin-top: 1px; width: 32px; } .cartlist .cartitem .cartiteminfo figure img { height: 32px; max-height: 32px; max-width: 32px; width: 32px; } .cartlist .cartitem .cartiteminfo h3 { font-size: 16px; line-height: 16px; margin: 0; } .cartlist .cartitem .cartiteminfo .dropdown > span { line-height: 16px; max-width: 72px; } .cartlist .cartitem .cartiteminfo .dropdown > span:after { top: 6px; } .cartlist .cartitem .cartiteminfo .checkout-removeitem { clear: left; color: rgba(255, 255, 255, 0); /*float: left;*/ font-size: 0; margin-left: 0; /*margin-top: 14px;*/ } .cartlist .cartitem .cartiteminfo .checkout-removeitem:before { vertical-align: middle; } .cartlist .cartitem .cartiteminfo .checkout-removeitem:after { color: var(--main-color); content: 'Remove'; display: inline-block; font-size: 11px; line-height: 20px; vertical-align: middle; } .cartlist .cartitem .cartinfocontrols { border-left: 0; float: none; padding: 8px 8px 0; } .cartlist .cartitem .cartinfocontrols var { margin-left: 12px; } .cartlist .carttotal { padding: 4px 0; text-align: right; } .cartlist .carttotal .carttotalinfo { display: inline-block; float: none; padding-right: 12px; width: auto; } .cartlist .carttotal .carttotalcontrols { display: inline-block; float: none; padding: 0 8px; } .checkout-buttons .checkout-continueshopping { display: none; } .checkout-buttons.right { float: none; } .checkout-buttons br { display: block; } .col-left, .col-right { float: none; margin: 10px 0 !important; width: auto; } .col-left .smallfield, .col-right .smallfield, .shippingMethod > .smallfield, .inputform > .smallfield { float: none !important; padding-left: 0 !important; } .col-left .smallfield input, .col-right .smallfield input, .col-left .smallfield select, .col-right .smallfield select, .shippingMethod > .smallfield input, .shippingMethod > .smallfield select, { width: 98% !important; } .performance li { display:inline-table; } .settings_section { flex-direction: column; } .choose-smtp { display: flex; flex-direction: column; flex-wrap: nowrap; } .choose-smtp > .button { margin-left: 0px; } .settings_section > .field { margin-bottom: 50px; } } .smtp-app-notice { display: inline-block; font-size: 14px; font-weight: bold; text-decoration-line: underline; } .customblock-wrap { background-color: #fdfdfd; border: solid 1px #e0e0e0; padding: 10px; margin-bottom: 20px; } .copy_details { display: inline-block; margin-left: 3px; cursor: pointer; } .ck-editor__editable { min-height: 500px; } /* ==================== MODERN PLUGIN MANAGEMENT UI ==================== */ /* Plugin Card Grid Layout */ .plugin-category { margin-bottom: 40px; } .category-title { font-size: 22px; font-weight: 600; color: var(--font-color); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--main-color); display: flex; align-items: center; gap: 10px; } .plugin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-bottom: 30px; } /* Plugin Card Styling */ .plugin-card { background: var(--bg-color); border: 1px solid var(--settings-border-color); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; display: flex; flex-direction: column; height: 100%; position: relative; } .plugin-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); transform: translateY(-2px); border-color: var(--main-color); } .plugin-card.has-update { border-left: 4px solid #ff9800; } .plugin-card-header { padding: 20px; text-align: center; border-bottom: 1px solid var(--settings-border-color); flex-shrink: 0; } .plugin-icon { position: relative; display: inline-block; margin-bottom: 15px; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, var(--main-color) 0%, rgba(0, 0, 0, 0.05) 100%); display: flex; align-items: center; justify-content: center; } .plugin-icon img { width: 100%; height: 100%; object-fit: cover; } .update-indicator { position: absolute; top: -5px; right: -5px; background: #ff9800; color: white; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 14px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .plugin-title { font-size: 16px; font-weight: 600; color: var(--font-color); margin: 0; line-height: 1.4; } .plugin-card-description { padding: 15px 20px; color: var(--settings-fieldnote); font-size: 13px; line-height: 1.5; flex-grow: 1; margin: 0; } .plugin-card-footer { display: flex; gap: 8px; padding: 15px 20px; border-top: 1px solid var(--settings-border-color); flex-shrink: 0; } /* Button Styling */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border: none; border-radius: 4px; font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; text-align: center; } .btn-primary, a.btn-primary, a.btn-primary:link, a.btn-primary:visited { background: var(--main-color); color: #fff; } /* Selector list bumps specificity above the generic `a:hover { color: var(--link-hover) }` on line ~2363. Without this, anchor-based primary buttons (.btn.btn-primary used as ) inherit a:hover's color, which is the same blue as --link-hover background — the label disappears against its own button. */ .btn-primary:hover, a.btn-primary:hover, a.btn-primary:focus, a.btn-primary:active { background: var(--link-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } .btn-secondary, a.btn-secondary, a.btn-secondary:link, a.btn-secondary:visited { background: var(--settings-bg-color); color: var(--font-color); border: 1px solid var(--settings-border-color); } .btn-secondary:hover, a.btn-secondary:hover, a.btn-secondary:focus, a.btn-secondary:active { background: var(--wrap-bg-color); border-color: var(--main-color); color: var(--font-color); } .btn i { font-size: 13px; } /* The Resend Order / Resend Receipt buttons double as status displays: on success js/admin.js swaps their label for the server's full response message (e.g. "Your order was successfully received. Your new order number is: 123456" or "Email has been sent to customer@example.com"). Because .btn is inline-flex with white-space:nowrap, that long message rendered as a single un-wrapping line, blowing the button far past the mobile viewport width. That horizontal overflow widened the whole /admin/order page and clipped the left edge of every label. Let these two buttons wrap their text and stay within their container so the page still fits on mobile. */ .resendOrderT, .resendEmailReceipt { white-space: normal; max-width: 100%; overflow-wrap: anywhere; } /* Plugin Detail Card */ .plugin-detail-card { background: var(--bg-color); border: 1px solid var(--settings-border-color); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); overflow: hidden; } .plugin-detail-header { display: flex; gap: 30px; padding: 40px; border-bottom: 1px solid var(--settings-border-color); align-items: flex-start; } .plugin-detail-icon { flex-shrink: 0; } .plugin-detail-icon img { width: 150px; height: 150px; border-radius: 8px; object-fit: cover; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .plugin-detail-info { flex: 1; } .plugin-detail-info h2 { font-size: 28px; font-weight: 700; color: var(--font-color); margin: 0 0 15px 0; } .version-info { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; margin-bottom: 15px; font-size: 14px; } .version-label { color: var(--settings-fieldnote); font-weight: 500; } .version-value { color: var(--font-color); font-weight: 600; background: var(--settings-bg-color); padding: 4px 10px; border-radius: 4px; } .update-badge { display: inline-flex; align-items: center; gap: 6px; background: #fff3cd; color: #856404; padding: 8px 12px; border-radius: 4px; font-size: 12px; font-weight: 600; } .plugin-detail-content { padding: 30px 40px; border-bottom: 1px solid var(--settings-border-color); } .plugin-description { font-size: 14px; line-height: 1.6; color: var(--font-color); margin: 0 0 20px 0; } .changes-section h3 { font-size: 16px; font-weight: 600; color: var(--font-color); margin-top: 20px; margin-bottom: 10px; } .changes-list { list-style: disc; margin-left: 20px; padding: 0; } .changes-list li { font-size: 13px; color: var(--settings-fieldnote); margin-bottom: 8px; line-height: 1.5; } .plugin-detail-actions { padding: 20px 40px; display: flex; gap: 10px; flex-wrap: wrap; } .plugin-detail-actions .btn { padding: 10px 16px; font-size: 13px; min-width: 140px; } /* Plugin Settings Section Styling */ .plugin-settings-section { background: var(--settings-bg-color); border: 1px solid var(--settings-border-color); border-radius: 8px; padding: 30px; margin-bottom: 25px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .plugin-settings-section h3 { font-size: 18px; font-weight: 600; color: var(--font-color); margin: 0 0 20px 0; padding: 10px 0 10px 15px; border-bottom: none; border-left: 3px solid var(--main-color); background: linear-gradient(to right, rgba(0,0,0,0.02), transparent); display: flex; align-items: center; gap: 10px; } .plugin-settings-section h4 { font-size: 14px; font-weight: 600; color: var(--font-color); margin: 20px 0 15px 0; } .plugin-settings-section .field { margin-bottom: 12px; display: flex; flex-direction: column; } .plugin-settings-section label { font-size: 13px; font-weight: 600; color: var(--font-color); margin-bottom: 2px; display: block; } /* Tighten
noise that older form markup uses to separate label from input. .field is display:flex column already; explicit
after the label would otherwise add a phantom line of height ~14px. */ .plugin-settings-section .field br { display: none; } .plugin-settings-section input[type="text"], .plugin-settings-section input[type="email"], .plugin-settings-section input[type="password"], .plugin-settings-section input[type="number"], .plugin-settings-section input[type="date"], .plugin-settings-section textarea, .plugin-settings-section select { width: 100%; max-width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--settings-border-color); border-radius: 4px; font-size: 13px; font-family: inherit; color: var(--font-color); background: var(--bg-color); transition: border-color 0.2s ease; } .plugin-settings-section .field, .plugin-settings-section .settings-form, .plugin-settings-section form { min-width: 0; max-width: 100%; } .plugin-settings-section input[type="text"]:focus, .plugin-settings-section input[type="email"]:focus, .plugin-settings-section input[type="password"]:focus, .plugin-settings-section input[type="number"]:focus, .plugin-settings-section input[type="date"]:focus, .plugin-settings-section textarea:focus, .plugin-settings-section select:focus { outline: none; border-color: var(--main-color); box-shadow: 0 0 0 3px rgba(var(--main-color), 0.1); } .plugin-settings-section textarea { resize: vertical; min-height: 100px; } /* Styled file upload — turn the bare into a full-width tinted drop zone with a visible "Choose File" button and the accepted-extensions / max-size hint reading as part of the zone. Works without any markup changes: the existing FileUpload::imageUploadForm() output stays, we just paint it. */ .plugin-settings-section input[type="file"] { display: block; width: 100%; box-sizing: border-box; padding: 18px 16px; border: 2px dashed var(--main-color, #2563eb); border-radius: 8px; background: rgba(37, 99, 235, 0.04); color: var(--font-color, #334155); font-size: 13px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .plugin-settings-section input[type="file"]:hover { background: rgba(37, 99, 235, 0.08); border-color: var(--main-color, #2563eb); } .plugin-settings-section input[type="file"]::file-selector-button { margin-right: 14px; padding: 8px 16px; border: none; border-radius: 6px; background: var(--main-color, #2563eb); color: #fff; font-weight: 600; font-size: 13px; cursor: pointer; transition: background 0.15s ease; } .plugin-settings-section input[type="file"]::file-selector-button:hover { background: var(--link-hover, #1d4ed8); } /* Webkit prefix for Safari < 16 */ .plugin-settings-section input[type="file"]::-webkit-file-upload-button { margin-right: 14px; padding: 8px 16px; border: none; border-radius: 6px; background: var(--main-color, #2563eb); color: #fff; font-weight: 600; font-size: 13px; cursor: pointer; } /* Zebra-stripe hack removed 2026-06-16 — was causing every-other-field to bleed past the section padding with a distracting tint band. Forms read cleaner without it. */ /* ---- Checkbox rows inside plugin admin views ---- Matches the .field.checkbox pattern used in the main Settings area (includes/admin/newsettings.php): checkbox on the LEFT, label inline to its right, optional description below. Overrides the generic `.plugin-settings-section .field { display: flex; flex-direction: column }` rule above so the checkbox isn't pushed to a separate row. */ .plugin-settings-section .field.checkbox { display: block; } .plugin-settings-section .field.checkbox input[type="checkbox"] { width: auto; max-width: none; float: left; margin: 3px 10px 0 0; padding: 0; height: 18px; border: 0; background: transparent; box-shadow: none; } .plugin-settings-section .field.checkbox label { display: inline-block; margin-bottom: 0; font-weight: 600; font-size: 13px; color: var(--font-color); cursor: pointer; } .plugin-settings-section .field.checkbox .fieldnote, .plugin-settings-section .field.checkbox small { display: block; clear: both; margin: 4px 0 0 28px; font-size: 12px; font-weight: 400; color: var(--mc-text-muted, #6b7280); } /* Notice type overrides — colors per type, base styles from original .notice rule above */ .notice.success { background-color: #f1fff1; border-color: #bbd7bb; color: #155724; } .notice.error { background-color: #fff7f7; border-color: #e0c4c4; color: #721c24; } .notice.info { background-color: #d1ecf1; border-color: #bee5eb; color: #0c5460; } /* .notice.notice is the generic/default type — keeps the original yellow */ /* Settings Form Layout */ .settings-form { display: grid; gap: 25px; } /* Disable grid when form uses float-based column layout */ .settings-form:has(.col-left), .settings-form:has(.col-right) { display: block; } /* Disable grid when form uses float-based column layout */ .settings-form:has(.col-left), .settings-form:has(.col-right) { display: block; } .settings-form-actions { display: flex; gap: 10px; padding-top: 20px; border-top: 1px solid var(--settings-border-color); } .settings-form-actions .btn, .settings-form-actions input[type="submit"], .settings-form-actions button { padding: 10px 20px; font-size: 13px; font-weight: 600; min-width: 140px; } /* Responsive Design */ @media screen and (max-width: 1024px) { .plugin-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .plugin-detail-header { flex-direction: column; padding: 30px; } .plugin-detail-icon img { width: 120px; height: 120px; } } /* Feed List - Google Merchant */ .feed-list { display: flex; flex-direction: column; gap: 12px; } .feed-item { background: rgba(255,255,255,0.7); border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; transition: border-color 0.2s; min-width: 0; } .feed-item:hover { border-color: var(--accent-colour); } .feed-item-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; } .feed-status { color: #28a745; font-size: 1.1em; } .feed-item-header .btn-sm { margin-left: auto; padding: 4px 10px; font-size: 0.75rem; } .btn-sm { padding: 4px 10px; font-size: 0.75rem; border-radius: 4px; } .btn-danger { background: #dc3545; color: #fff; border: none; cursor: pointer; text-decoration: none; display: inline-block; } .btn-danger:hover { background: #c82333; } .feed-item-urls { padding: 8px 12px; background: #f8f9fa; border-radius: 6px; margin-bottom: 8px; } .feed-item-urls code { font-size: 0.85em; color: #495057; word-break: break-all; } .feed-item-date { font-size: 0.85em; color: #6c757d; } .feed-item-date i { margin-right: 4px; } /* --------------------------------------------------- Plugin admin — shared mobile responsiveness. All /plugin/* admin pages use the same wrapper (.plugin-settings-section) and action-row pattern (.settings-form-actions with 140px min-width .btn's), so one global mobile rule covers Google Merchant, Stripe, and every other plugin admin view instead of patching each plugin individually. --------------------------------------------------- */ @media (max-width: 600px) { .plugin-settings-section { padding: 18px 14px; overflow-x: hidden; } .plugin-settings-section h3 { font-size: 16px; } .plugin-settings-section > p { font-size: 14px; } /* The zebra-stripe hack on every second field uses -12px margins to bleed past the section padding; that was designed for desktop and overflows the viewport on phones. Reset it on mobile. */ /* Desktop zebra hack removed 2026-06-16 — no mobile reset needed. */ .plugin-settings-section .field { margin-bottom: 14px; } .plugin-settings-section label { font-size: 13px; } .plugin-settings-section input[type="text"], .plugin-settings-section input[type="email"], .plugin-settings-section input[type="password"], .plugin-settings-section input[type="number"], .plugin-settings-section input[type="date"], .plugin-settings-section textarea, .plugin-settings-section select { font-size: 14px; /* avoids iOS zoom-on-focus */ padding: 9px 10px; } .plugin-settings-section textarea { min-height: 80px; } .plugin-settings-section .fieldnote { display: block; margin-top: 2px; font-size: 11px; } /* Right-aligned action bars at the top of plugin pages (e.g. Stripe's "Ship to Countries" shortcut) should stack naturally on narrow screens. */ .plugin-settings-section + form > div[style*="text-align: right"], section > div[style*="text-align: right"] { text-align: left !important; } .settings-form-actions { flex-wrap: wrap; gap: 8px; padding-top: 16px; } /* Primary form-submission buttons (Save Settings / Save Changes etc.) need to feel like a proper CTA on mobile — 44-48px tap target. */ .settings-form-actions .btn, .settings-form-actions input[type="submit"], .settings-form-actions button, .plugin-settings-section .settings-form-actions .btn { padding: 14px 20px; font-size: 14px; min-height: 46px; min-width: 0; flex: 1 1 auto; } /* Shrink every OTHER .btn variant inside a plugin settings section — inline Upload / Ship to / Delete / etc. — but leave the primary submit-row buttons above alone. */ .plugin-settings-section .btn { padding: 8px 12px; font-size: 12px; } .plugin-settings-section .btn-sm { padding: 4px 8px; font-size: 0.7rem; } /* Google Merchant feed rows — the action-row wraps onto a second line and the Delete button shrinks. */ .feed-item { padding: 12px; } .feed-item-header { gap: 8px; flex-wrap: wrap; } .feed-item-header strong { flex: 1 1 auto; min-width: 0; word-break: break-word; } .feed-item-header .btn, .feed-item-header .btn-sm, .feed-item-header a.btn-danger { margin-left: auto; padding: 4px 8px !important; font-size: 0.7rem !important; line-height: 1.3 !important; min-height: 0 !important; min-width: 0 !important; white-space: nowrap; flex: 0 0 auto; } .feed-item-header .btn-sm i, .feed-item-header a.btn-danger i { margin-right: 4px; font-size: 0.9em; } .feed-item-urls { padding: 6px 10px; } .feed-item-urls code { font-size: 0.78em; } .feed-item-date { font-size: 0.78em; } } /* Very narrow phones: collapse the Delete button to icon-only so the country label can claim the full row width. */ @media (max-width: 400px) { .feed-item-header .btn-sm, .feed-item-header a.btn-danger { font-size: 0 !important; padding: 6px 8px !important; } .feed-item-header .btn-sm i, .feed-item-header a.btn-danger i { font-size: 13px !important; margin: 0 !important; } } /* Checkbox Grid - for country/style selectors */ .checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 12px 0; } .checkbox-card { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(255,255,255,0.7); border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-weight: normal; } .checkbox-card:hover { border-color: var(--accent-colour); background: rgba(255,255,255,0.9); } .checkbox-card input[type="checkbox"]:checked + span { color: var(--accent-colour); font-weight: 600; } .checkbox-card input[type="checkbox"] { accent-color: var(--accent-colour); width: 16px; height: 16px; } /* Admin page section cards */ .admin-section { background: var(--settings-bg-color, #fafafa); border: 1px solid #e5e7eb; border-radius: 10px; padding: 24px; margin-bottom: 20px; } .admin-section h3 { font-size: 1.1rem; font-weight: 600; color: #1e293b; margin: 0 0 16px 0; padding-bottom: 10px; border-bottom: 2px solid var(--accent-colour, #6366f1); display: flex; align-items: center; gap: 8px; } .admin-section h3 i { color: var(--accent-colour, #6366f1); } /* ------------------------------------------------------------------ Edit Product page grid layout ------------------------------------------------------------------ The legacy markup was .col-left (48%) floated next to .col-right (48%), which left a tall column of blank space under the short preview thumbnail on the right and forced every form section to stack vertically on the left. The new grid layout lets cards flow into the empty space — the preview holds the top-right cell and subsequent admin-section cards (basics, SEO/pricing, plugin sections like Customizable Template) fill the remaining cells in document order. Plugins that emit their own .admin-section also automatically get a grid cell with no extra wrapper code. We disable the existing .settings-form:has(.col-left){display:block} override (line ~8488) by giving this rule higher specificity via the .edit-product-grid class on the form itself. ------------------------------------------------------------------ */ .settings-form.edit-product-grid { display: block; /* outer form remains a block; the inner div is the grid */ } .edit-product-grid-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; /* don't stretch short preview to match tall form cards */ grid-auto-flow: row dense; /* let later cards backfill any empty grid slots */ } .edit-product-grid-inner > .admin-section { margin: 0; /* gap handles spacing inside the grid */ min-width: 0; /* allow inputs to shrink rather than overflow */ max-width: 100%; } .edit-product-grid-inner > .preview-card { grid-column: 2; /* pin preview to the right column */ text-align: center; } .edit-product-grid-inner > .preview-card img { max-width: 100%; height: auto; } /* Within grid cells the legacy float-based .col-left and .col-right classes — if any survive on inner elements — must not float, or they break the cell. Belt and braces. */ .edit-product-grid-inner .col-left, .edit-product-grid-inner .col-right { float: none; width: auto; margin: 0; } /* The
spacers from the legacy layout become layout-breakers inside a grid (they'd consume a whole row). Hide them when they're a child of the new grid. */ .edit-product-grid-inner > .clear { display: none; } /* Collapse to single column on narrow screens — preserves field readability without horizontal scrolling. */ @media (max-width: 900px) { .edit-product-grid-inner { grid-template-columns: 1fr; } .edit-product-grid-inner > .preview-card { grid-column: 1; } } /* Admin table styling */ .admin-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid #e5e7eb; } .admin-table thead th { background: #f1f5f9; padding: 12px 16px; text-align: left; font-weight: 600; font-size: 0.85rem; color: #475569; text-transform: uppercase; letter-spacing: 0.025em; border-bottom: 2px solid #e2e8f0; } .admin-table tbody td { padding: 12px 16px; border-bottom: 1px solid #f1f5f9; font-size: 0.9rem; color: #334155; } .admin-table tbody tr:hover { background: #f8fafc; } .admin-table tbody tr:last-child td { border-bottom: none; } /* ============================================================ Responsive admin tables (mobile stacked cards) ------------------------------------------------------------ On narrow screens a normal would overflow sideways. This collapses each real table into a stack of cards: the is hidden and every
becomes its own "label: value" line, with the label pulled from the cell's data-label="..." attribute (mirrors the template line page). Scoped to table.admin-table so it does NOT touch the div-based .flextable.admin-table layouts (categories, template-gen lines) which already have their own .mobilehead responsive handling. ============================================================ */ @media screen and (max-width: 768px) { table.admin-table { border: none; background: transparent; border-radius: 0; overflow: visible; } table.admin-table thead { /* visually hidden but kept for accessibility */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } table.admin-table tbody, table.admin-table tr, table.admin-table td { display: block; width: 100%; } table.admin-table tr { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 12px; padding: 4px 14px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); } table.admin-table tbody tr:hover { background: #fff; } table.admin-table td { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid #f1f5f9; font-size: 0.9rem; text-align: right; word-break: break-word; min-width: 0; } table.admin-table tr td:last-child { border-bottom: none; } /* Label pulled from data-label; cells without one span full width */ table.admin-table td[data-label]::before { content: attr(data-label); flex: 0 0 38%; text-align: left; font-weight: 600; color: #6b7280; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; } table.admin-table td:not([data-label]) { justify-content: flex-start; text-align: left; } /* An empty cell with no label adds nothing — hide it */ table.admin-table td:not([data-label]):empty { display: none; } /* Cells that hold action buttons/links: let them wrap and fill */ table.admin-table td .button, table.admin-table td a.btn, table.admin-table td .btn { display: inline-block; } /* ---------------------------------------------------------- Mobile safety net for the remaining raw elements in admin/settings pages that are NOT flextables (pricing matrices, event-log tables, size charts, bulk pricing). Rather than restructure these data/form grids, let them scroll horizontally so they never push the page wider than the viewport. Scoped to admin containers so the storefront is untouched; matches real
only, so the div-based .flextable layouts are unaffected. ---------------------------------------------------------- */ .pm-card-body > table, .table-container > table, .admin-section table:not(.admin-table), .plugin-settings-section table:not(.admin-table), table.sizechart-table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Admin stats cards */ .admin-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; } .admin-stat-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 20px; text-align: center; min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; box-sizing: border-box; } .admin-stat-card strong { overflow-wrap: anywhere; word-break: break-word; } .admin-stat-card .stat-value { font-size: 1.8rem; font-weight: 700; color: var(--accent-colour, #6366f1); } .admin-stat-card .stat-label { font-size: 0.85rem; color: #6b7280; margin-top: 4px; } .admin-stat-list { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; margin-top: 8px; } .admin-stat-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; min-width: 0; padding: 4px 0; border-bottom: 1px solid #f1f5f9; } .admin-stat-line:last-child { border-bottom: 0; } .admin-stat-line-label { flex: 1 1 60%; min-width: 0; overflow-wrap: anywhere; word-break: break-word; color: #374151; } .admin-sources-list .admin-stat-line-label { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; } .admin-stat-line-value { flex: 0 0 auto; white-space: nowrap; color: #111827; } /* Admin action bar */ .admin-action-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 16px; background: var(--settings-bg-color, #fafafa); border: 1px solid #e5e7eb; border-radius: 8px; } /* Status badges */ .badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; } .badge-success { background: #dcfce7; color: #166534; } .badge-warning { background: #fef9c3; color: #854d0e; } .badge-danger { background: #fee2e2; color: #991b1b; } .badge-info { background: #dbeafe; color: #1e40af; } .badge-secondary { background: #f1f5f9; color: #475569; } /* Admin form improvements */ .admin-section .field { margin-bottom: 25px; position: relative; min-height: 40px; border-bottom: solid 1px #eee; padding-bottom: 10px; } .admin-section .field label { display: block; font-weight: 600; font-size: 0.9rem; color: #334155; margin-bottom: 6px; } .admin-section select, .admin-section input[type="text"], .admin-section input[type="number"], .admin-section input[type="email"], .admin-section input[type="password"], .admin-section textarea { width: 100%; max-width: 450px; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.9rem; transition: border-color 0.2s; box-sizing: border-box; } .admin-section .field.smallfield select, .admin-section .field.smallfield input[type="text"], .admin-section .field.smallfield input[type="number"] { width: auto; max-width: none; } .admin-section select:focus, .admin-section input:focus, .admin-section textarea:focus { border-color: var(--accent-colour); outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); } /* Settings page quick-links bar — stretch to fill wrapper */ .settings-quicklinks-wrap { margin-bottom: 20px; } .settings-quicklinks { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; } .settings-quicklinks > .btn { flex: 1 1 0; min-width: 120px; text-align: center; justify-content: center; } /* Page header with action */ .admin-page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; } .admin-page-header h1 { margin: 0; } /* Pagination */ .admin-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 24px 0; flex-wrap: wrap; } .admin-pagination a, .admin-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.85rem; color: #475569; text-decoration: none; transition: all 0.2s; } .admin-pagination a:hover { background: var(--accent-colour); color: #fff; border-color: var(--accent-colour); } .admin-pagination .active { background: var(--accent-colour); color: #fff; border-color: var(--accent-colour); font-weight: 600; } @media screen and (max-width: 768px) { .size_button { padding:8px; font-size: 16px; } .swatchCircle li { min-width: 18px; max-width: 18px; min-height: 18px; max-height: 18px; } .plugin-grid { grid-template-columns: 1fr; } .plugin-card-footer { flex-direction: column; } /* Full-width buttons on mobile. box-sizing MUST be border-box here: there is no global border-box reset, so min-width:100% + .btn's 14px side padding made every mobile button 28px wider than its container, pushing the page sideways (horizontal scroll) — most visibly on admin page-header actions. */ .btn { flex: 1; min-width: 100%; box-sizing: border-box; } /* Page-header action buttons (e.g. "Errors (last 3 days)") sit under the heading on mobile and shouldn't be forced to a full-width block that dominates the screen — size them to their label instead. */ .admin-page-header .btn { flex: 0 0 auto; min-width: 0; width: auto; max-width: 100%; } /* Event log "More" link. On mobile each log row is a stacked card, where an inline link tacked onto the end of the Event text is easy to miss (and can land mid-sentence). .mobile-pos/.pos-top-right-1 park it in the row's top-right corner instead, so it's always in the same, obvious spot. */ .log-more { z-index: 2; } .log-more a { display: inline-block; padding: 4px 10px; border: 1px solid var(--main-color, #4a7c2f); border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.2; text-decoration: none; background: #fff; } .plugin-detail-header { gap: 15px; padding: 20px; } .plugin-detail-content, .plugin-detail-actions { padding: 20px; } .version-info { flex-direction: column; align-items: flex-start; gap: 8px; } /* Tighten the admin-section container padding on mobile so the search bar and list rows aren't boxed in by 24px of whitespace. */ .admin-section { padding: 14px; } /* Stacked list rows (logs, etc.) — drop the per-field horizontal padding (the section already provides the side gutter) and shrink the vertical padding so each field line sits compactly. */ .flextable.mobilehead > .trow.narrow > .col { padding: 2px 0; } } /* Admin search bar — unified search + filters inside admin-section wrapper */ .admin-search-bar { display: block; margin-bottom: 20px; } .admin-search-bar form { margin: 0; } .admin-search-bar .admin-search-label { display: block; font-weight: 600; font-size: 0.9rem; color: #334155; margin-bottom: 6px; } .admin-search-bar .admin-search-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .admin-search-bar .admin-search-input { flex: 1 1 300px; min-width: 0; width: auto; max-width: none; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.9rem; background: #fff; float: none; box-sizing: border-box; transition: border-color 0.2s; } .admin-search-bar .admin-search-input:focus { border-color: var(--accent-colour); outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); } .admin-search-bar .admin-search-row .btn { flex: 0 0 auto; } .admin-search-bar .admin-search-desc { margin: 15px 0 0 0; color: #64748b; font-size: 0.9rem; } .admin-search-bar .advancedFeatures { margin-top: 15px; padding-top: 15px; border-top: 1px solid #e5e7eb; } .admin-search-bar .advancedFeatures.hidden { display: none; } .admin-search-bar .advanced-filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-bottom: 15px; } .admin-search-bar .advanced-filters-grid .section { min-width: 0; } .admin-search-bar .advanced-filters-grid .field { margin-bottom: 12px; border-bottom: none; padding-bottom: 0; min-height: 0; } .admin-search-bar .advanced-filters-grid .field > label { display: block; font-weight: 600; font-size: 0.9rem; color: #334155; margin-bottom: 6px; } .admin-search-bar .advanced-filters-grid select { width: 100%; max-width: none; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.9rem; background: #fff; } .admin-search-bar .advanced-filters-grid .checkbox-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .admin-search-bar .advanced-filters-grid .checkbox-row label { font-weight: normal; margin: 0; color: #475569; font-size: 0.9rem; } .admin-search-bar .advanced-search-actions { display: flex; justify-content: flex-start; padding-top: 12px; margin-top: 5px; border-top: 1px solid #e5e7eb; } /* ============================================ BUYPAGE — MODERN LAYOUT (NewBuypage == 4) ============================================ */ .buypage-modern { --bpm-text: #0f172a; --bpm-text-muted: #64748b; --bpm-border: #e5e7eb; --bpm-border-dark: #d1d5db; --bpm-bg-subtle: #f8fafc; --bpm-success: #10b981; --bpm-radius-sm: 6px; --bpm-radius: 10px; --bpm-radius-lg: 16px; --bpm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); color: var(--bpm-text); font-size: 14px; line-height: 1.5; } .buypage-modern * { box-sizing: border-box; } /* --- Price block --- */ .buypage-modern .bpm-price-block { display: flex; align-items: baseline; gap: 14px; margin: 0 0 22px 0; padding-bottom: 18px; border-bottom: 1px solid var(--bpm-border); flex-wrap: wrap; } .buypage-modern .bpm-price { font-size: 32px; font-weight: 700; color: var(--bpm-text); letter-spacing: -0.02em; font-style: normal; } .buypage-modern .bpm-stock { display: inline-flex; align-items: center; gap: 6px; color: var(--bpm-success); font-weight: 500; font-size: 13px; } .buypage-modern .bpm-stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--bpm-success); display: inline-block; } .buypage-modern .bpm-stock span { color: var(--bpm-success); } /* --- Selector groups --- */ .buypage-modern .bpm-selector { margin-bottom: 22px; } .buypage-modern .bpm-selector-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 10px; } .buypage-modern .bpm-label-text { font-size: 12px; font-weight: 600; color: var(--bpm-text); text-transform: uppercase; letter-spacing: 0.06em; } .buypage-modern .bpm-label-value { font-size: 13px; color: var(--bpm-text-muted); font-weight: 500; text-align: right; } /* --- Style cards --- */ .buypage-modern .bpm-style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; } /* Collapsed by default — only show first 10 style cards (2 rows of 5 on desktop) */ .buypage-modern .bpm-style-grid:not(.expanded) .bpm-style-card:nth-child(n+11) { display: none; } .buypage-modern .bpm-view-more { display: block; width: 100%; margin-top: 10px; padding: 10px 14px; background: #fff; border: 1px dashed var(--bpm-border-dark); border-radius: var(--bpm-radius); color: var(--bpm-text-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: all 0.15s; font-family: inherit; } .buypage-modern .bpm-view-more:hover { border-color: var(--main-color, #2196f3); color: var(--main-color, #2196f3); } .buypage-modern .bpm-view-more i { margin-left: 6px; transition: transform 0.2s; } .buypage-modern .bpm-view-more.expanded i { transform: rotate(180deg); } .buypage-modern .bpm-view-more.hidden { display: none; } .buypage-modern .bpm-style-card { background: #fff; border: 2px solid var(--bpm-border); border-radius: var(--bpm-radius); padding: 6px 4px 6px; cursor: pointer; text-align: center; transition: all 0.15s; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* Override global .style_button defaults */ float: none; margin: 0; width: auto; height: auto; min-height: 80px; } .buypage-modern .bpm-style-card:hover { border-color: var(--bpm-border-dark); transform: translateY(-2px); box-shadow: var(--bpm-shadow-sm); } .buypage-modern .bpm-style-card.selected { border-color: var(--main-color, #2196f3); background: rgba(33, 150, 243, 0.03); } .buypage-modern .bpm-style-card.selected::after { content: '\f00c'; font-family: 'FontAwesome', 'Font Awesome 5 Free', 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; background: var(--main-color, #2196f3); color: #fff; border-radius: 50%; font-size: 9px; display: flex; align-items: center; justify-content: center; } .buypage-modern .bpm-style-card-icon { /* Re-apply the sprite sheet, but center and un-float it inside the card */ float: none; margin: 0 auto 2px; width: 50px; height: 60px; } .buypage-modern .bpm-style-card-name { font-size: 10px; font-weight: 600; color: var(--bpm-text); line-height: 1.2; word-break: break-word; } /* --- Colour swatches: restyle the existing .swatchCircle list --- */ .buypage-modern .bpm-color-wrap { padding: 0; } .buypage-modern .bpm-color-wrap .tshirtinfoswatch, .buypage-modern .bpm-color-wrap .swatchCircle { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; background: none; border: none; width: auto; max-width: none; } .buypage-modern .bpm-color-wrap .tshirtinfoswatch > li, .buypage-modern .bpm-color-wrap .swatchCircle li, .buypage-modern .bpm-color-wrap .selectcolour { width: 40px !important; height: 40px !important; min-width: 40px !important; max-width: 40px !important; min-height: 40px !important; max-height: 40px !important; border-radius: 50% !important; cursor: pointer; position: relative; box-shadow: 0 0 0 1px var(--bpm-border-dark); transition: transform 0.15s, box-shadow 0.15s; padding: 0 !important; margin: 0 !important; float: none !important; display: block; overflow: visible; box-sizing: border-box; } .buypage-modern .bpm-color-wrap .selectcolour:hover { transform: scale(1.08); } /* Strip the old checkmark image and show an icon instead */ .buypage-modern .bpm-color-wrap .tshirtinfoswatch .check, .buypage-modern .bpm-color-wrap .selectcolour.check { background-image: none !important; } .buypage-modern .bpm-color-wrap .selectcolour.check { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--main-color, #2196f3) !important; } .buypage-modern .bpm-color-wrap .selectcolour.check::after { content: '\f00c'; font-family: 'FontAwesome', 'Font Awesome 5 Free', 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .buypage-modern .bpm-color-wrap .selectcolour.light.check::after, .buypage-modern .bpm-color-wrap .selectcolour.white.check::after { color: #000; text-shadow: none; } .buypage-modern .bpm-color-wrap .selectcolour span { display: none; } /* Swirl / tie-dye swatches: the legacy rules hard-code background-size: 23px 23px and a 3px border which leaves the swirl floating inside the 40px modern circle. Force the swirl image to cover the whole swatch and clip to the circle. */ .buypage-modern .bpm-color-wrap .selectcolour.rainbowswirl, .buypage-modern .bpm-color-wrap .selectcolour.royalblueswirl, .buypage-modern .bpm-color-wrap .selectcolour.redswirl, .buypage-modern .bpm-color-wrap .selectcolour.purpleswirl, .buypage-modern .bpm-color-wrap .selectcolour.orangeswirl, .buypage-modern .bpm-color-wrap .selectcolour.navyswirl, .buypage-modern .bpm-color-wrap .selectcolour.irishgreenswirl, .buypage-modern .bpm-color-wrap .selectcolour.goldswirl, .buypage-modern .bpm-color-wrap .selectcolour.forestgreenswirl, .buypage-modern .bpm-color-wrap .selectcolour.blackswirl { background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; border: none !important; overflow: hidden; } /* --- Size pill buttons --- */ .buypage-modern .bpm-size-grid { display: flex; flex-wrap: wrap; gap: 8px; } .buypage-modern .bpm-size-grid .size_button { min-width: 54px; padding: 10px 16px; background: #fff; border: 2px solid var(--bpm-border); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--bpm-text); cursor: pointer; transition: all 0.15s; width: auto; height: auto; line-height: 1; display: inline-flex; align-items: center; justify-content: center; float: none; margin: 0; text-align: center; } .buypage-modern .bpm-size-grid .size_button:hover { border-color: var(--bpm-border-dark); } .buypage-modern .bpm-size-grid .size_button.selected { border-color: var(--main-color, #2196f3); background: var(--main-color, #2196f3); color: #fff; } .buypage-modern .bpm-size-chart-row { margin-top: 10px; } .buypage-modern .bpm-size-chart-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--main-color, #2196f3); text-decoration: none; font-weight: 500; } .buypage-modern .bpm-size-chart-link:hover { text-decoration: underline; } /* --- Dimensions display (live size chart) --- */ .buypage-modern .bpm-dimensions { margin-top: 8px; padding: 10px 14px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: var(--bpm-radius, 8px); } .buypage-modern .bpm-dimensions__row { display: flex; gap: 20px; flex-wrap: wrap; } .buypage-modern .bpm-dimensions__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 60px; } .buypage-modern .bpm-dimensions__label { font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.03em; } .buypage-modern .bpm-dimensions__val { font-size: 16px; font-weight: 700; color: #1f2937; } /* --- Purchase row / Add to cart --- */ .buypage-modern .bpm-purchase-row { display: flex; gap: 12px; margin: 20px 0 16px; padding: 0; border: none; background: none; flex-wrap: wrap; } .buypage-modern .bpm-add-to-cart { flex: 1 1 100%; min-height: 52px; padding: 14px 24px; background: var(--main-color, #2196f3); color: #fff; border: none; border-radius: var(--bpm-radius); font-size: 15px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: background 0.2s; text-transform: none; letter-spacing: 0; box-shadow: none; width: auto; max-width: none; } .buypage-modern .bpm-add-to-cart:hover { background: var(--main-color-dark, #1b82d4); filter: brightness(0.92); box-shadow: none; } .buypage-modern .bpm-add-to-cart i { font-size: 16px; } /* --- Personalize button (same silhouette as Add to Cart, secondary tone) --- */ .buypage-modern .bpm-personalize { flex: 1 1 100%; width: 100%; box-sizing: border-box; min-height: 52px; padding: 14px 24px; background: #7c3aed; color: #fff; border: none; border-radius: var(--bpm-radius); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: background 0.2s; text-transform: none; letter-spacing: 0; box-shadow: none; text-decoration: none; order: -1; } .buypage-modern .bpm-personalize:hover { background: #6d28d9; color: #fff; text-decoration: none; } .buypage-modern .bpm-personalize i { font-size: 16px; } /* --- Trust badges --- */ .buypage-modern .bpm-trust-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px; background: var(--bpm-bg-subtle); border-radius: var(--bpm-radius); margin-top: 18px; border: 1px solid var(--bpm-border); } .buypage-modern .bpm-trust-badge { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--bpm-text-muted); } .buypage-modern .bpm-trust-badge i { font-size: 18px; color: var(--main-color, #2196f3); flex: 0 0 auto; } .buypage-modern .bpm-trust-badge-label { line-height: 1.3; font-size: 11px; } .buypage-modern .bpm-trust-badge-label strong { display: block; color: var(--bpm-text); font-weight: 600; font-size: 12px; margin-bottom: 1px; } /* --- Responsive --- */ @media (max-width: 900px) { .buypage-modern .bpm-price { font-size: 26px; } .buypage-modern .bpm-style-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); } .buypage-modern .bpm-trust-badges { grid-template-columns: 1fr; gap: 10px; } } @media (max-width: 500px) { .buypage-modern .bpm-price { font-size: 22px; } .buypage-modern .bpm-style-grid { grid-template-columns: repeat(4, 1fr); } .buypage-modern .bpm-style-card { min-height: 78px; } .buypage-modern .bpm-color-wrap .selectcolour { width: 40px; height: 40px; } .buypage-modern .bpm-add-to-cart { flex: 1 1 100%; } .buypage-modern .bpm-personalize { flex: 1 1 100%; } } /* --- Mobile: shrink Add to Cart / Personalize buttons (buy page) --- */ @media (max-width: 768px) { /* Modern layout (NewBuypage 4) */ .buypage-modern .bpm-add-to-cart { min-height: 42px; padding: 10px 16px; font-size: 14px; } .buypage-modern .bpm-add-to-cart i { font-size: 14px; } .buypage-modern .bpm-personalize { min-height: 42px; padding: 10px 16px; font-size: 14px; } .buypage-modern .bpm-purchase-row { gap: 8px; margin: 14px 0 12px; } /* Legacy layouts (NewBuypage 0–3) */ .button.add-cart-alt, a.button.add-cart-alt { font-size: 15px; padding: 8px 16px; } } /* --- Fix double-image display on product pages --- #tshirtBg.hidden and #overlays with empty src should not render */ #tshirtBg.hidden { display: none !important; } /* #firstLoad gets class="hidden" on the live-preview branch, but the modern-v2 layout rule (.tshirt.modern-v2-layout ... figure #firstLoad { display:block }) has higher specificity than the plain .hidden class and kept #firstLoad visible on load — so the flat product photo AND the #tshirtBg composite both rendered in normal flow, stacking as two shirts until a hover .hide() collapsed it. !important lets the hidden state win regardless of specificity. */ #firstLoad.hidden { display: none !important; } #overlays[src=""], #overlays:not([src]) { display: none !important; } #hoverOverlays[src=""], #hoverOverlays:not([src]) { display: none !important; } /* --- Hover preview fills the figure ---------------------------------- #hoverOverlays gets emitted with the same canvas-position inline style as #overlays (e.g. left:30%; top:25%; width:40%; height:30%) so the print preview sits in the right print box on top of the shirt. But when the JS hover swaps #firstLoad/#tshirtBg out for #hoverOverlays, the overlay is the ONLY visible element — and we want it filling the figure for an enlarged preview, not pinned to its tiny print bbox. The !important rules below win over the inline style and let the PNG scale up while keeping its aspect ratio. */ .tshirt figure #hoverOverlays { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; margin: 0 !important; padding: 12px; box-sizing: border-box; } /* ========================================================================= MODERN v2 — shared redesign for description tabs, delivery, payments Applies only when the container has .modern-v2 (added for NewBuypage == 4) ========================================================================= */ /* --- Description / Product Details / Refunds tabs --- */ .leftCorner.modern-v2, .leftCornerMobile.modern-v2 { background: #fff; border: 1px solid #e6e8ec; border-radius: 12px; padding: 0; margin-top: 24px; box-shadow: 0 1px 3px rgba(17, 24, 39, 0.04); overflow: hidden; } .leftCorner.modern-v2 #descriptionTabs, .leftCornerMobile.modern-v2 #descriptionTabsMobile { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; background: #f7f8fa; border-bottom: 1px solid #e6e8ec; } .leftCorner.modern-v2 #descriptionTabs li, .leftCornerMobile.modern-v2 #descriptionTabsMobile li { flex: 1 1 auto; padding: 14px 18px; margin: 0; background: transparent; border: none; border-bottom: 3px solid transparent; font-size: 13px; font-weight: 600; color: #64748b; text-transform: none; letter-spacing: 0.02em; cursor: pointer; text-align: center; transition: color 0.15s, border-color 0.15s, background 0.15s; list-style: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.2; } .leftCorner.modern-v2 #descriptionTabs li:hover, .leftCornerMobile.modern-v2 #descriptionTabsMobile li:hover { color: #1f2937; background: #eef1f5; } .leftCorner.modern-v2 #descriptionTabs li.active, .leftCornerMobile.modern-v2 #descriptionTabsMobile li.active { color: var(--main-color, #2196f3); background: #fff; border-bottom-color: var(--main-color, #2196f3); } .leftCorner.modern-v2 #descriptionTabs li .tab-icon, .leftCornerMobile.modern-v2 #descriptionTabsMobile li .tab-icon { font-size: 14px; opacity: 0.85; } .leftCorner.modern-v2 .note, .leftCornerMobile.modern-v2 .note { padding: 22px 24px; background: #fff; border: none; color: #334155; font-size: 14px; line-height: 1.65; } .leftCorner.modern-v2 .note ul, .leftCornerMobile.modern-v2 .note ul { margin: 0; padding-left: 20px; } .leftCorner.modern-v2 .note ul li, .leftCornerMobile.modern-v2 .note ul li { margin-bottom: 8px; } .leftCorner.modern-v2 .note.hidden, .leftCornerMobile.modern-v2 .note.hidden { display: none; } /* --- Delivers To panel --- */ .deDays.modern-v2 { background: #fff; border: 1px solid #e6e8ec; border-radius: 12px; padding: 16px 18px; margin-top: 20px; box-shadow: 0 1px 3px rgba(17, 24, 39, 0.04); } .deDays.modern-v2 .deHeading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #eef1f5; } .deDays.modern-v2 .deTitle { display: inline-flex; align-items: center; gap: 10px; color: #1f2937; font-size: 14px; font-weight: 600; } .deDays.modern-v2 .deTitle .deTitle-icon { width: 34px; height: 34px; border-radius: 50%; background: #eef2ff; color: #4f46e5; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; } .deDays.modern-v2 .deTitle span { color: #1f2937; font-weight: 600; } .deDays.modern-v2 .dropdownCountry { position: relative; } .deDays.modern-v2 .dropdownCountry .triangle-down { display: none; } .deDays.modern-v2 .dropbtn { background: #f7f8fa; color: #1f2937; border: 1px solid #e6e8ec; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 0.15s, border-color 0.15s; } .deDays.modern-v2 .dropbtn:hover { background: #eef1f5; border-color: #d4d8dd; } .deDays.modern-v2 .dropbtn .bpm-chev { font-size: 10px; opacity: 0.6; } .deDays.modern-v2 .dropdown-content { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid #e6e8ec; border-radius: 8px; box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08); padding: 6px; min-width: 180px; z-index: 10; display: none; } .deDays.modern-v2 .dropdownCountry:hover .dropdown-content, .deDays.modern-v2 .dropdownCountry.open .dropdown-content { display: block; } .deDays.modern-v2 .dropdown-content ul { list-style: none; margin: 0; padding: 0; } .deDays.modern-v2 .dropdown-content li { padding: 8px 12px; border-radius: 6px; font-size: 13px; color: #334155; cursor: pointer; transition: background 0.12s; } .deDays.modern-v2 .dropdown-content li:hover { background: #f1f5f9; color: #1f2937; } .deDays.modern-v2 .deInfo { font-size: 13px; color: #475569; line-height: 1.5; padding: 4px 0 8px; } .deDays.modern-v2 .postInfo { margin-top: 8px; } .deDays.modern-v2 .postInfo .postMethod { max-width: 100%; } /* --- Contact + Accepted payments --- */ .paymentsAccepted.modern-v2 { background: #fff; border: 1px solid #e6e8ec; border-radius: 12px; padding: 18px 20px; margin-top: 18px; box-shadow: 0 1px 3px rgba(17, 24, 39, 0.04); text-align: left; } /* When .paymentsAccepted is nested inside an accordion body, strip the card chrome so it doesn't look like a nested box. */ .paymentsAccepted.modern-v2.bpm-inline { background: transparent; border: none; border-radius: 0; padding: 0; margin-top: 0; box-shadow: none; } .paymentsAccepted.modern-v2 .bpm-contact-row, .paymentsAccepted.modern-v2 .bpm-payments-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #eef1f5; flex-wrap: wrap; } .paymentsAccepted.modern-v2 .bpm-contact-row:first-child { padding-top: 0; } /* When nested inside the accordion (no card chrome to provide the gap), restore a top padding so "Need help?" doesn't sit flush against the accordion header. */ .paymentsAccepted.modern-v2.bpm-inline .bpm-contact-row:first-child { padding-top: 14px; } .paymentsAccepted.modern-v2 .bpm-payments-row:last-of-type { border-bottom: none; } .paymentsAccepted.modern-v2 .bpm-contact-label, .paymentsAccepted.modern-v2 .bpm-payments-label { font-size: 12px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; } .paymentsAccepted.modern-v2 .bpm-contact-label i, .paymentsAccepted.modern-v2 .bpm-payments-label i { font-size: 14px; color: #4f46e5; } .paymentsAccepted.modern-v2 .bpm-contact-values { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; } .paymentsAccepted.modern-v2 .bpm-contact-item { font-size: 13px; color: #1f2937; text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; transition: color 0.15s; } .paymentsAccepted.modern-v2 .bpm-contact-item:hover { color: var(--main-color, #2196f3); } .paymentsAccepted.modern-v2 .bpm-contact-item i { font-size: 11px; color: #94a3b8; } .paymentsAccepted.modern-v2 .bpm-payments-logos { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .paymentsAccepted.modern-v2 .bpm-payments-logos img { height: 24px; width: auto; max-width: 100%; display: inline-block; vertical-align: middle; filter: grayscale(0); opacity: 0.95; } .paymentsAccepted.modern-v2 .bpm-secure-note { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 12px; margin-top: 4px; font-size: 12px; color: #64748b; border-top: 1px solid #eef1f5; } .paymentsAccepted.modern-v2 .bpm-secure-note i { color: #16a34a; font-size: 13px; } /* Mobile adjustments */ @media only screen and (max-width: 720px) { .leftCorner.modern-v2 #descriptionTabs li, .leftCornerMobile.modern-v2 #descriptionTabsMobile li { padding: 12px 10px; font-size: 12px; gap: 6px; } .leftCorner.modern-v2 .note, .leftCornerMobile.modern-v2 .note { padding: 18px; font-size: 13px; } .deDays.modern-v2 .deHeading { flex-direction: column; align-items: flex-start; gap: 10px; } .deDays.modern-v2 .dropdownCountry { width: 100%; } .deDays.modern-v2 .dropbtn { width: 100%; justify-content: space-between; } .paymentsAccepted.modern-v2 .bpm-contact-row, .paymentsAccepted.modern-v2 .bpm-payments-row { flex-direction: column; align-items: flex-start; } .paymentsAccepted.modern-v2 .bpm-contact-values, .paymentsAccepted.modern-v2 .bpm-payments-logos { align-items: flex-start; text-align: left; justify-content: flex-start; } } /* ============================================================ Modern v2 — Full-width bottom panels (accordion) Row 1: Description (full width) Row 2: Delivery | Contact (side-by-side on desktop) ============================================================ */ .bpm-bottom-panels.modern-v2 { clear: both; width: 100%; max-width: 1200px; margin: 24px auto 40px; padding: 0 16px; box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Description panel always spans both columns */ .bpm-bottom-panels.modern-v2 .bpm-accordion[data-panel="description"] { grid-column: 1 / -1; } .bpm-bottom-panels.modern-v2 .bpm-accordion { background: #ffffff; border: 1px solid #e5e9ef; border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); overflow: hidden; transition: box-shadow 0.2s ease, border-color 0.2s ease; } /* Description panel gets a tinted accent background so it stands out */ .bpm-bottom-panels.modern-v2 .bpm-accordion[data-panel="description"] { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border-color: #d8e0ec; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); } .bpm-bottom-panels.modern-v2 .bpm-accordion[data-panel="description"] .bpm-accordion-head { background: #f1f5f9; border-bottom: 1px solid #e2e8f0; } .bpm-bottom-panels.modern-v2 .bpm-accordion[data-panel="description"] .bpm-accordion-head:hover { background: #e9eff6; } .bpm-bottom-panels.modern-v2 .bpm-accordion[data-panel="description"] .bpm-accordion-title i { color: #0f172a; } .bpm-bottom-panels.modern-v2 .bpm-accordion[data-panel="description"] .bpm-accordion-body { background: #ffffff; border-top: none; } .bpm-bottom-panels.modern-v2 .bpm-accordion:hover { border-color: #d6dce5; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); } .bpm-bottom-panels.modern-v2 .bpm-accordion-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; background: transparent; border: 0; cursor: pointer; font-size: 15px; font-weight: 600; color: #0f172a; text-align: left; font-family: inherit; transition: background 0.15s ease; } .bpm-bottom-panels.modern-v2 .bpm-accordion-head:hover { background: #f8fafc; } .bpm-bottom-panels.modern-v2 .bpm-accordion-head:focus { outline: none; background: #f1f5f9; } .bpm-bottom-panels.modern-v2 .bpm-accordion-title { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: 0.1px; } .bpm-bottom-panels.modern-v2 .bpm-accordion-title i { font-size: 16px; color: #64748b; width: 18px; text-align: center; } .bpm-bottom-panels.modern-v2 .bpm-accordion-chev { font-size: 14px; color: #94a3b8; transition: transform 0.25s ease; flex-shrink: 0; } .bpm-bottom-panels.modern-v2 .bpm-accordion.open .bpm-accordion-chev { transform: rotate(180deg); color: #0f172a; } .bpm-bottom-panels.modern-v2 .bpm-accordion-body { display: none; padding: 0 22px 22px; border-top: 1px solid #eef1f5; } .bpm-bottom-panels.modern-v2 .bpm-accordion.open .bpm-accordion-body { display: block; animation: bpmAccordionFade 0.25s ease; } @keyframes bpmAccordionFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Description tabs inside accordion body */ .bpm-bottom-panels.modern-v2 .bpm-accordion-body #descriptionTabs, .bpm-bottom-panels.modern-v2 .bpm-accordion-body .descriptionTabs { list-style: none; margin: 18px 0 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid #eef1f5; } .bpm-bottom-panels.modern-v2 .bpm-accordion-body #descriptionTabs li, .bpm-bottom-panels.modern-v2 .bpm-accordion-body .descriptionTabs li { list-style: none; padding: 12px 18px; margin: 0; cursor: pointer; font-size: 13px; font-weight: 600; color: #64748b; background: transparent; border: 0; border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; display: inline-flex; align-items: center; gap: 8px; } .bpm-bottom-panels.modern-v2 .bpm-accordion-body #descriptionTabs li:hover, .bpm-bottom-panels.modern-v2 .bpm-accordion-body .descriptionTabs li:hover { color: #0f172a; } .bpm-bottom-panels.modern-v2 .bpm-accordion-body #descriptionTabs li.selected, .bpm-bottom-panels.modern-v2 .bpm-accordion-body .descriptionTabs li.selected { color: #0f172a; border-bottom-color: #0f172a; } .bpm-bottom-panels.modern-v2 .bpm-accordion-body .note { padding: 22px 4px 4px; font-size: 14px; line-height: 1.7; color: #334155; } .bpm-bottom-panels.modern-v2 .bpm-accordion-body .note p { margin: 0 0 12px; } /* Country pills (delivery quick-buttons) */ .bpm-bottom-panels.modern-v2 .bpm-country-label { display: block; font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.6px; margin: 18px 0 10px; } .bpm-bottom-panels.modern-v2 .bpm-country-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .bpm-bottom-panels.modern-v2 .bpm-country-pill { appearance: none; -webkit-appearance: none; background: #f1f5f9; border: 1px solid #e2e8f0; color: #334155; font-family: inherit; font-size: 13px; font-weight: 600; padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: all 0.15s ease; display: inline-flex; align-items: center; gap: 6px; } .bpm-bottom-panels.modern-v2 .bpm-country-pill:hover { background: #e2e8f0; border-color: #cbd5e1; color: #0f172a; } .bpm-bottom-panels.modern-v2 .bpm-country-pill.selected { background: #0f172a; border-color: #0f172a; color: #ffffff; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18); } .bpm-bottom-panels.modern-v2 .bpm-hidden { display: none !important; } /* Delivery info area */ .bpm-bottom-panels.modern-v2 .bpm-delivery-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; background: #f8fafc; border: 1px solid #eef1f5; border-radius: 12px; } .bpm-bottom-panels.modern-v2 .bpm-delivery-info .deInfo { flex: 1 1 auto; font-size: 13px; color: #334155; line-height: 1.6; } .bpm-bottom-panels.modern-v2 .bpm-delivery-info .deInfo b, .bpm-bottom-panels.modern-v2 .bpm-delivery-info .deInfo strong { color: #0f172a; } .bpm-bottom-panels.modern-v2 .bpm-delivery-info .postInfo { flex: 0 0 auto; } .bpm-bottom-panels.modern-v2 .bpm-delivery-info .postMethod { width: 200px; height: 60px; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: none; } .bpm-bottom-panels.modern-v2 .bpm-delivery-info .postMethod.shipping_usps { background-image: url(../images/carriers/usps.svg); } .bpm-bottom-panels.modern-v2 .bpm-delivery-info .postMethod.shipping_canadapost { background-image: url(../images/carriers/canadapost.svg); } .bpm-bottom-panels.modern-v2 .bpm-delivery-info .postMethod.shipping_spring { background-image: url(../images/carriers/spring.svg); } .bpm-bottom-panels.modern-v2 .bpm-delivery-info .postMethod.shipping_royalmail { background-image: url(../images/carriers/royalmail.svg); } /* Fallback for Landmark — show USPS */ .bpm-bottom-panels.modern-v2 .bpm-delivery-info .postMethod.shipping_landmark { background-image: url(../images/carriers/usps.svg); } /* Contact + Payments panel */ .bpm-bottom-panels.modern-v2 .bpm-contact-row, .bpm-bottom-panels.modern-v2 .bpm-payments-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; flex-wrap: wrap; } .bpm-bottom-panels.modern-v2 .bpm-contact-row { border-bottom: 1px solid #eef1f5; } .bpm-bottom-panels.modern-v2 .bpm-contact-label, .bpm-bottom-panels.modern-v2 .bpm-payments-label { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #0f172a; } .bpm-bottom-panels.modern-v2 .bpm-contact-label i, .bpm-bottom-panels.modern-v2 .bpm-payments-label i { color: #64748b; font-size: 15px; } .bpm-bottom-panels.modern-v2 .bpm-contact-values { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; } .bpm-bottom-panels.modern-v2 .bpm-contact-values a { color: #334155; text-decoration: none; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; transition: color 0.15s ease; } .bpm-bottom-panels.modern-v2 .bpm-contact-values a:hover { color: #0f172a; text-decoration: underline; } .bpm-bottom-panels.modern-v2 .bpm-payments-logos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .bpm-bottom-panels.modern-v2 .bpm-payments-logos img { height: 24px; width: auto; opacity: 0.95; } .bpm-bottom-panels.modern-v2 .bpm-secure-note { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 14px; margin-top: 6px; font-size: 12px; color: #64748b; border-top: 1px solid #eef1f5; } .bpm-bottom-panels.modern-v2 .bpm-secure-note i { color: #16a34a; font-size: 13px; } /* Medium screens — still 2-col but tighten gap */ @media only screen and (max-width: 980px) { .bpm-bottom-panels.modern-v2 { gap: 12px; } } /* Mobile — collapse grid to single column */ @media only screen and (max-width: 720px) { .bpm-bottom-panels.modern-v2 { grid-template-columns: 1fr; padding: 0 10px; margin: 16px auto 28px; gap: 10px; } .bpm-bottom-panels.modern-v2 .bpm-accordion[data-panel="description"] { grid-column: auto; } .bpm-bottom-panels.modern-v2 .bpm-accordion-head { padding: 14px 16px; font-size: 14px; } .bpm-bottom-panels.modern-v2 .bpm-accordion-body { padding: 0 16px 18px; } .bpm-bottom-panels.modern-v2 .bpm-accordion-body #descriptionTabs li, .bpm-bottom-panels.modern-v2 .bpm-accordion-body .descriptionTabs li { padding: 10px 12px; font-size: 12px; } .bpm-bottom-panels.modern-v2 .bpm-country-pill { padding: 9px 14px; font-size: 12px; } .bpm-bottom-panels.modern-v2 .bpm-delivery-info { flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 16px; } .bpm-bottom-panels.modern-v2 .bpm-delivery-info .deInfo { flex: 0 0 auto; } .bpm-bottom-panels.modern-v2 .bpm-delivery-info .postInfo { flex: 0 0 auto; margin-top: 2px; display: flex; justify-content: center; } .bpm-bottom-panels.modern-v2 .bpm-delivery-info .postMethod { width: 140px; height: 44px; background-position: center center; margin: 0 auto; } .bpm-bottom-panels.modern-v2 .bpm-contact-row, .bpm-bottom-panels.modern-v2 .bpm-payments-row { flex-direction: column; align-items: stretch; text-align: left; gap: 8px; } .bpm-bottom-panels.modern-v2 .bpm-contact-label, .bpm-bottom-panels.modern-v2 .bpm-payments-label { justify-content: flex-start; text-align: left; } .bpm-bottom-panels.modern-v2 .bpm-contact-values { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; text-align: left; } .bpm-bottom-panels.modern-v2 .bpm-contact-values a { justify-content: flex-start; text-align: left; } .bpm-bottom-panels.modern-v2 .bpm-payments-logos { justify-content: flex-start; align-items: center; text-align: left; } .bpm-bottom-panels.modern-v2 .bpm-secure-note { justify-content: flex-start; text-align: left; } .paymentsAccepted.modern-v2, .paymentsAccepted.modern-v2.bpm-inline { text-align: left; } } /* ============================================================ Modern v2 — Wider two-column product layout (up to 1200px) Legacy layouts keep their existing 990px-era dimensions. ============================================================ */ .tshirt.modern-v2-layout { max-width: 1200px; margin: 20px auto; padding: 28px 28px 32px; box-sizing: border-box; background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); border: 1px solid #e5e9ef; border-radius: 18px; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04); } .tshirt.modern-v2-layout .tshirtLeftView.modern-v2-layout { float: left; width: 540px; max-width: 48%; } .tshirt.modern-v2-layout .tshirtLeftView.modern-v2-layout figure { margin-right: 0; background: #ffffff; border: 1px solid #eef1f5; border-radius: 14px; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06); padding: 12px; box-sizing: border-box; } /* Fill the figure's available width with the product preview, and let the intrinsic 400:363 aspect ratio of the shirt mockup drive the height — no more fixed 516x468 with empty white below. #overlays is positioned in percentages, so it follows the container automatically. */ .tshirt.modern-v2-layout .tshirtLeftView.modern-v2-layout figure #firstLoad { width: 100%; height: auto; max-height: 80vh; /* don't let portrait images blow up to absurd heights */ object-fit: contain; display: block; margin: 0 auto; } .tshirt.modern-v2-layout .tshirtLeftView.modern-v2-layout figure #tshirtBg { width: 100%; max-width: 100%; height: auto; aspect-ratio: 400 / 363; /* matches the source mockup, keeps width/height locked */ } .tshirt.modern-v2-layout .tshirtinfo.modern-v2-layout { float: right; width: 600px; max-width: 50%; padding-left: 8px; box-sizing: border-box; } /* Tablet — keep two columns but tighten */ @media only screen and (max-width: 1180px) { .tshirt.modern-v2-layout .tshirtLeftView.modern-v2-layout { width: 46%; max-width: 46%; } .tshirt.modern-v2-layout .tshirtinfo.modern-v2-layout { width: 52%; max-width: 52%; } .tshirt.modern-v2-layout .tshirtLeftView.modern-v2-layout figure #tshirtBg { width: 100%; } } /* Small tablet — stack columns */ @media only screen and (max-width: 900px) { .tshirt.modern-v2-layout { padding: 16px 14px 20px; border-radius: 14px; } .tshirt.modern-v2-layout .tshirtLeftView.modern-v2-layout, .tshirt.modern-v2-layout .tshirtinfo.modern-v2-layout { float: none; width: 100%; max-width: 100%; padding-left: 0; } .tshirt.modern-v2-layout .tshirtLeftView.modern-v2-layout { margin-bottom: 20px; } .tshirt.modern-v2-layout .tshirtLeftView.modern-v2-layout figure #firstLoad { max-width: 100%; } .tshirt.modern-v2-layout .tshirtLeftView.modern-v2-layout figure #tshirtBg { width: 100%; max-width: 100%; height: auto; aspect-ratio: 400 / 363; margin: 0 auto; } } /* ========================================================================== Modern Cart Layout (Shopify-style) — scoped under .modern-cart-layout ========================================================================== */ .modern-cart-layout { --mc-bg: #ffffff; --mc-panel-tint: #fafbfc; --mc-panel-tint-strong: #f4f5f7; --mc-divider: #e4e6ea; --mc-divider-soft: #eef0f2; --mc-text: #1a1c1e; --mc-text-muted: #6b7177; --mc-text-subtle: #9aa0a6; --mc-accent: #0f766e; --mc-accent-hover: #0b5f58; --mc-success: #16a34a; --mc-danger: #b42318; --mc-radius: 12px; --mc-radius-sm: 8px; --mc-shadow-soft: 0 1px 2px rgba(26, 28, 30, 0.04); max-width: 1080px; margin: 0 auto; padding: 40px 24px 80px; font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--mc-text); font-size: 14px; line-height: 1.5; box-sizing: border-box; } .modern-cart-layout *, .modern-cart-layout *::before, .modern-cart-layout *::after { box-sizing: border-box; } .modern-cart-layout a { color: var(--mc-accent); text-decoration: none; } .modern-cart-layout a:hover { color: var(--mc-accent-hover); text-decoration: underline; } .modern-cart-layout .mc-breadcrumb { font-size: 13px; color: var(--mc-text-subtle); margin-bottom: 10px; font-weight: 500; } .modern-cart-layout .mc-breadcrumb a { color: var(--mc-text-muted); } .modern-cart-layout .mc-breadcrumb .sep { margin: 0 8px; color: var(--mc-text-subtle); } .modern-cart-layout .mc-heading { display: flex; align-items: baseline; gap: 14px; margin-bottom: 32px; } .modern-cart-layout .mc-heading h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--mc-text); } .modern-cart-layout .mc-heading .mc-item-count { color: var(--mc-text-muted); font-size: 15px; font-weight: 500; } .modern-cart-layout .mc-empty { padding: 80px 20px; text-align: center; color: var(--mc-text-muted); } .modern-cart-layout .mc-empty h2 { margin: 0 0 10px; font-size: 20px; font-weight: 600; color: var(--mc-text); } .modern-cart-layout .mc-empty a { display: inline-block; margin-top: 18px; padding: 12px 24px; background: var(--mc-accent); color: #fff; border-radius: var(--mc-radius-sm); font-weight: 600; } .modern-cart-layout .mc-empty a:hover { text-decoration: none; background: var(--mc-accent-hover); } .modern-cart-layout .mc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; } /* ---- LEFT: editable items ---- */ .modern-cart-layout .mc-items { background: var(--mc-bg); } .modern-cart-layout .mc-line { display: grid; grid-template-columns: 110px 1fr auto; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--mc-divider-soft); align-items: flex-start; } .modern-cart-layout .mc-line:first-child { padding-top: 0; } .modern-cart-layout .mc-line:last-child { border-bottom: none; } .modern-cart-layout .mc-line__image { width: 110px; height: 110px; border-radius: var(--mc-radius-sm); background: var(--mc-panel-tint-strong); display: flex; align-items: center; justify-content: center; overflow: hidden; } .modern-cart-layout .mc-line__image img { width: 100%; height: 100%; object-fit: cover; } .modern-cart-layout .mc-line__image .mc-tshirt-svg { width: 90%; height: 90%; } /* Make the whole thumbnail + title a clickable back-link to the product listing */ .modern-cart-layout .mc-line__image-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; } .modern-cart-layout .mc-line__title-link { cursor: pointer; } .modern-cart-layout .mc-line__body { min-width: 0; padding-top: 2px; } .modern-cart-layout .mc-line__title { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--mc-text); line-height: 1.35; } .modern-cart-layout .mc-line__title a { color: var(--mc-text); } .modern-cart-layout .mc-line__title a:hover { color: var(--mc-accent); text-decoration: none; } .modern-cart-layout .mc-line__variants { font-size: 13px; color: var(--mc-text-muted); margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 6px 12px; list-style: none; padding: 0; } .modern-cart-layout .mc-line__variants li { display: inline-flex; align-items: center; gap: 6px; } .modern-cart-layout .mc-line__variants li + li::before { content: "·"; margin-right: 12px; color: var(--mc-text-subtle); } .modern-cart-layout .mc-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(26, 28, 30, 0.15); } .modern-cart-layout .mc-line__custom-text { margin-top: 6px; font-size: 0.85rem; color: var(--mc-text-subtle, #64748b); line-height: 1.4; } .modern-cart-layout .mc-line__custom-text .fa-star { color: #eab308; margin-right: 4px; } .modern-cart-layout .mc-line__actions { display: flex; align-items: center; gap: 20px; } .modern-cart-layout .mc-qty-stepper { display: inline-flex; align-items: center; background: var(--mc-bg); border: 1px solid var(--mc-divider); border-radius: var(--mc-radius-sm); overflow: hidden; box-shadow: var(--mc-shadow-soft); } .modern-cart-layout .mc-qty-stepper a { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--mc-text); font-size: 16px; font-weight: 500; cursor: pointer; transition: background 0.15s; text-decoration: none; user-select: none; } .modern-cart-layout .mc-qty-stepper a:hover { background: var(--mc-panel-tint-strong); text-decoration: none; } .modern-cart-layout .mc-qty-stepper input.checkout-input-qty { width: 36px; height: 32px; text-align: center; border: none; border-left: 1px solid var(--mc-divider); border-right: 1px solid var(--mc-divider); font-size: 14px; font-weight: 600; color: var(--mc-text); background: transparent; padding: 0; -moz-appearance: textfield; } .modern-cart-layout .mc-qty-stepper input.checkout-input-qty::-webkit-outer-spin-button, .modern-cart-layout .mc-qty-stepper input.checkout-input-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .modern-cart-layout .mc-line__actions .checkout-removeitem { border: none; background: none; padding: 0; color: var(--mc-text-muted); font-size: 13px; font-weight: 500; cursor: pointer; } .modern-cart-layout .mc-line__actions .checkout-removeitem:hover { color: var(--mc-danger); text-decoration: underline; } .modern-cart-layout .mc-line__price { text-align: right; font-size: 15px; font-weight: 600; color: var(--mc-text); white-space: nowrap; padding-top: 2px; } .modern-cart-layout .mc-continue { display: inline-flex; align-items: center; gap: 6px; margin-top: 28px; font-size: 14px; color: var(--mc-accent); font-weight: 500; } /* ---- RIGHT: order summary (tinted panel) ---- */ .modern-cart-layout .mc-summary { position: sticky; top: 24px; } .modern-cart-layout .mc-summary-panel { background: var(--mc-panel-tint); border: 1px solid var(--mc-divider-soft); border-radius: var(--mc-radius); padding: 28px 26px; } .modern-cart-layout .mc-summary-panel h2 { margin: 0 0 20px; font-size: 16px; font-weight: 600; color: var(--mc-text); letter-spacing: -0.01em; } .modern-cart-layout .mc-summary-items { list-style: none; margin: 0 0 20px; padding: 0 0 20px; border-bottom: 1px solid var(--mc-divider); display: flex; flex-direction: column; gap: 16px; } .modern-cart-layout .mc-summary-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; } .modern-cart-layout .mc-summary-item__thumb { position: relative; width: 56px; height: 56px; border-radius: 10px; background: var(--mc-bg); border: 1px solid var(--mc-divider); display: flex; align-items: center; justify-content: center; overflow: visible; } .modern-cart-layout .mc-summary-item__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; overflow: hidden; } .modern-cart-layout .mc-summary-item__thumb .mc-tshirt-svg { width: 82%; height: 82%; } .modern-cart-layout .mc-summary-item__qty { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px; background: var(--mc-text-muted); color: #fff; border: 2px solid var(--mc-panel-tint); border-radius: 999px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .modern-cart-layout .mc-summary-item__info { min-width: 0; } .modern-cart-layout .mc-summary-item__name { font-size: 13px; font-weight: 600; color: var(--mc-text); margin: 0 0 2px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .modern-cart-layout .mc-summary-item__variant { font-size: 12px; color: var(--mc-text-muted); line-height: 1.3; } .modern-cart-layout .mc-summary-item__price { font-size: 13px; font-weight: 600; color: var(--mc-text); white-space: nowrap; align-self: center; } /* discount */ .modern-cart-layout .mc-discount-row { display: flex; gap: 8px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--mc-divider); } .modern-cart-layout .mc-discount-row input[type="text"] { flex: 1; min-width: 0; height: 40px; padding: 0 12px; background: var(--mc-bg); border: 1px solid var(--mc-divider); border-radius: var(--mc-radius-sm); font-size: 13px; color: var(--mc-text); font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s; } .modern-cart-layout .mc-discount-row input[type="text"]::placeholder { color: var(--mc-text-subtle); } .modern-cart-layout .mc-discount-row input[type="text"]:focus { outline: none; border-color: var(--mc-accent); box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15); } .modern-cart-layout .mc-discount-row input[type="submit"], .modern-cart-layout .mc-discount-row button { height: 40px; padding: 0 18px; background: var(--mc-bg); border: 1px solid var(--mc-divider); border-radius: var(--mc-radius-sm); color: var(--mc-text); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s, border-color 0.15s; } .modern-cart-layout .mc-discount-row input[type="submit"]:hover, .modern-cart-layout .mc-discount-row button:hover { background: var(--mc-panel-tint-strong); border-color: var(--mc-text-subtle); } .modern-cart-layout .mc-coupon-applied { margin: -12px 0 20px; padding-bottom: 20px; border-bottom: 1px solid var(--mc-divider); font-size: 12px; color: var(--mc-success); display: flex; align-items: center; gap: 6px; } .modern-cart-layout .mc-coupon-applied a { margin-left: auto; color: var(--mc-text-muted); font-weight: 500; } /* totals */ .modern-cart-layout .mc-totals { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .modern-cart-layout .mc-totals li { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--mc-text-muted); } .modern-cart-layout .mc-totals li strong { color: var(--mc-text); font-weight: 500; } .modern-cart-layout .mc-totals li.mc-discount-line strong { color: var(--mc-success); } .modern-cart-layout .mc-totals li.mc-total { margin-top: 14px; padding-top: 18px; border-top: 1px solid var(--mc-divider); align-items: baseline; } .modern-cart-layout .mc-totals li.mc-total > span:first-child { font-size: 16px; font-weight: 700; color: var(--mc-text); } .modern-cart-layout .mc-totals li.mc-total .mc-total-amount { font-size: 26px; font-weight: 700; color: var(--mc-text); letter-spacing: -0.02em; } .modern-cart-layout .mc-totals li.mc-total .mc-total-note { display: block; font-size: 11px; font-weight: 500; color: var(--mc-text-subtle); text-align: right; margin-top: 2px; } /* CTA */ .modern-cart-layout .mc-checkout-btn { display: block; width: 100%; padding: 16px 20px; background: var(--mc-accent); color: #fff; border: none; border-radius: var(--mc-radius-sm); font-size: 15px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; font-family: inherit; transition: background 0.15s, transform 0.1s; text-align: center; text-decoration: none; } .modern-cart-layout .mc-checkout-btn:hover { background: var(--mc-accent-hover); color: #fff; text-decoration: none; } .modern-cart-layout .mc-checkout-btn:active { transform: translateY(1px); } .modern-cart-layout .mc-secure-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; font-size: 12px; color: var(--mc-text-muted); font-weight: 500; } .modern-cart-layout .mc-secure-note svg { width: 14px; height: 14px; } /* Checkout section (shipping form + payment) beneath the cart */ .modern-cart-layout .mc-checkout-section { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--mc-divider); } .modern-cart-layout .mc-checkout-section h2 { margin: 0 0 18px; font-size: 18px; font-weight: 700; color: var(--mc-text); letter-spacing: -0.01em; } .modern-cart-layout .mc-checkout-section .field { margin-bottom: 14px; } .modern-cart-layout .mc-checkout-section .field label { display: block; font-size: 12px; font-weight: 600; color: var(--mc-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; } .modern-cart-layout .mc-checkout-section .field .input, .modern-cart-layout .mc-checkout-section .field select { width: 100%; max-width: 420px; height: 40px; padding: 0 12px; background: var(--mc-bg); border: 1px solid var(--mc-divider); border-radius: var(--mc-radius-sm); font-size: 14px; color: var(--mc-text); font-family: inherit; } .modern-cart-layout .mc-checkout-section .field .input:focus, .modern-cart-layout .mc-checkout-section .field select:focus { outline: none; border-color: var(--mc-accent); box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15); } .modern-cart-layout .mc-checkout-section .field.smallfield .input, .modern-cart-layout .mc-checkout-section .field.smallfield select { max-width: 220px; } /* Validation error state — applied by Moneris/Stripe/etc. JS when a required billing field is empty. The base input rules above have higher specificity than the global .input.error rule, so we re-declare it inside the modern cart scope. Also covers select + the CC field rows outside .mc-checkout-section. */ .modern-cart-layout .mc-checkout-section .field .input.error, .modern-cart-layout .mc-checkout-section .field select.error, .modern-cart-layout .mc-field-row .input.error, .modern-cart-layout .mc-field-row select.error, .modern-cart-layout .field .validateField.error, #paymentOptions_MonerisCheckout .mc-field-row .input.error, #paymentOptions_MonerisCheckout .mc-field-row select.error { border-color: #d04949 !important; background-color: #fcebeb !important; box-shadow: 0 0 0 3px rgba(208, 73, 73, 0.12) !important; } .modern-cart-layout .mc-checkout-section .field .input.error:focus, .modern-cart-layout .mc-checkout-section .field select.error:focus, .modern-cart-layout .mc-field-row .input.error:focus, .modern-cart-layout .mc-field-row select.error:focus, #paymentOptions_MonerisCheckout .mc-field-row .input.error:focus, #paymentOptions_MonerisCheckout .mc-field-row select.error:focus { border-color: #d04949 !important; box-shadow: 0 0 0 3px rgba(208, 73, 73, 0.25) !important; } /* Also tint the field label so it's obvious at a glance which row is bad. */ .modern-cart-layout .field.error > label, .modern-cart-layout .field:has(> .input.error) > label, .modern-cart-layout .field:has(> select.error) > label { color: #d04949; } .modern-cart-layout .mc-checkout-section .checkout-buttons { margin-top: 0; } .modern-cart-layout .mc-checkout-section nav.checkout-buttons > * { display: block; margin-bottom: 10px; } /* ---- Shipping-method line-item row (pinned to top of the items list) ---- */ /* Shipping-method collapsible body */ .modern-cart-layout .mc-shipping-hint { font-size: 13px; color: var(--mc-text-muted, #6b7280); margin: 0 0 10px; } .modern-cart-layout .mc-shipping-select { width: 100%; height: 44px; padding: 0 12px; background: #fff; border: 1px solid var(--mc-divider, #e5e7eb); border-radius: var(--mc-radius-sm, 8px); font-size: 14px; color: var(--mc-text, #111827); font-family: inherit; cursor: pointer; box-sizing: border-box; } .modern-cart-layout .mc-shipping-select:focus { outline: none; border-color: #111827; box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08); } /* ---- Collapsible sections (native
) ---- */ .modern-cart-layout .mc-collapsible, .mc-collapsible { border: 1px solid var(--mc-divider, #e5e7eb); border-radius: 12px; background: #fff; margin-bottom: 16px; overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease; } .modern-cart-layout .mc-collapsible[open], .mc-collapsible[open] { border-color: rgba(15,118,110,0.28); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .modern-cart-layout .mc-collapsible__summary, .mc-collapsible__summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; font-size: 15px; font-weight: 700; color: var(--mc-text, #0f172a); user-select: none; transition: background .15s ease; } .modern-cart-layout .mc-collapsible__summary::-webkit-details-marker, .mc-collapsible__summary::-webkit-details-marker { display: none; } .modern-cart-layout .mc-collapsible__summary:hover, .mc-collapsible__summary:hover { background: rgba(15, 118, 110, 0.04); } .modern-cart-layout .mc-collapsible__label, .mc-collapsible__label { display: inline-flex; align-items: center; gap: 12px; } .modern-cart-layout .mc-collapsible__label svg, .mc-collapsible__label svg { width: 18px; height: 18px; color: var(--mc-accent, #0f766e); flex-shrink: 0; } .modern-cart-layout .mc-collapsible__chevron, .mc-collapsible__chevron { width: 10px; height: 10px; border-right: 2px solid var(--mc-text-muted, #64748b); border-bottom: 2px solid var(--mc-text-muted, #64748b); transform: rotate(45deg); transition: transform .2s ease; } .modern-cart-layout .mc-collapsible[open] > .mc-collapsible__summary .mc-collapsible__chevron, .mc-collapsible[open] > .mc-collapsible__summary .mc-collapsible__chevron { transform: rotate(-135deg); } .modern-cart-layout .mc-collapsible__body, .mc-collapsible__body { padding: 4px 22px 22px; border-top: 1px solid var(--mc-divider, #e5e7eb); } .modern-cart-layout .mc-collapsible__body .field:first-child { margin-top: 18px; } /* Locked (non-collapsible) variant — used for mandatory sections like Terms and Conditions. Reuses the same visual shell as mc-collapsible but is rendered as a plain
with no chevron and no hover affordance. */ .modern-cart-layout .mc-collapsible--locked, .mc-collapsible--locked { border-color: rgba(15,118,110,0.28); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .modern-cart-layout .mc-collapsible--locked > .mc-collapsible__summary, .mc-collapsible--locked > .mc-collapsible__summary { cursor: default; user-select: auto; } .modern-cart-layout .mc-collapsible--locked > .mc-collapsible__summary:hover, .mc-collapsible--locked > .mc-collapsible__summary:hover { background: transparent; } .modern-cart-layout .mc-collapsible--locked .mc-collapsible__chevron, .mc-collapsible--locked .mc-collapsible__chevron { display: none; } /* Shipping/Payment collapsibles span full width inside the checkout section */ .modern-cart-layout .mc-checkout-section .mc-collapsible { max-width: 100%; } .modern-cart-layout .mc-checkout-section .mc-collapsible .field .input, .modern-cart-layout .mc-checkout-section .mc-collapsible .field select { max-width: 100%; } .modern-cart-layout .mc-checkout-section .mc-collapsible .field.smallfield .input, .modern-cart-layout .mc-checkout-section .mc-collapsible .field.smallfield select { max-width: 260px; } /* ---- Inline payment method options ---- */ .modern-cart-layout .mc-payment-options { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 18px; } /* Hide stray
or whitespace that plugins may still emit between options */ .modern-cart-layout .mc-payment-options > br, .modern-cart-layout .mc-payment-options > .stripe_apple_gpay_btn > br { display: none; } .modern-cart-layout .mc-payment-options .mc-payment-option { display: inline-flex; margin: 0 !important; padding: 0 !important; flex: 1 1 auto; min-width: 180px; max-width: 280px; } .modern-cart-layout .mc-payment-options input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .modern-cart-layout .mc-payment-options .mc-payment-option label { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 1.5px solid var(--mc-divider, #e5e7eb); border-radius: 10px; background: #fff; cursor: pointer; transition: all .15s ease; font-size: 13px; font-weight: 600; color: var(--mc-text, #0f172a); text-transform: none !important; letter-spacing: normal !important; margin: 0 !important; } .modern-cart-layout .mc-payment-options .mc-payment-option label:hover { border-color: rgba(15, 118, 110, 0.45); background: rgba(15, 118, 110, 0.03); } .modern-cart-layout .mc-payment-options input[type="radio"]:checked + label, .modern-cart-layout .mc-payment-options .mc-payment-option label:has(input[type="radio"]:checked) { border-color: var(--mc-accent, #0f766e); background: rgba(15, 118, 110, 0.06); box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15); } .modern-cart-layout .mc-payment-options .mc-payment-option label img, .modern-cart-layout .mc-payment-options .mc-payment-option label .checkout-payment-icon { height: 22px; width: auto; max-width: 60px; padding: 0 !important; object-fit: contain; flex-shrink: 0; } .modern-cart-layout .mc-payment-options .mc-payment-option__name { white-space: nowrap; flex: 1 1 auto; text-align: left; } /* Terms checkbox inside the payment collapsible */ .modern-cart-layout .mc-terms-field { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--mc-divider, #e5e7eb); display: flex; align-items: center; gap: 10px; } .modern-cart-layout .mc-terms-field label { text-transform: none !important; letter-spacing: normal !important; font-size: 13px !important; color: var(--mc-text, #0f172a) !important; margin-bottom: 0 !important; font-weight: 500 !important; } /* ---- Emphasized "Copy shipping address" button inside moneris billing collapsible ---- */ .modern-cart-layout .mc-copy-shipping, .mc-copy-shipping { margin: 4px 0 20px; } .modern-cart-layout .mc-copy-shipping__label, .mc-copy-shipping__label { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; text-transform: none !important; letter-spacing: normal !important; font-weight: normal !important; color: var(--mc-text, #0f172a) !important; margin: 0 !important; box-shadow: none; } .modern-cart-layout .mc-copy-shipping__label:hover, .mc-copy-shipping__label:hover { background: #f1f5f9; border-color: #cbd5e1; transform: none; box-shadow: none; } .modern-cart-layout .mc-copy-shipping__label input[type="checkbox"], .mc-copy-shipping__label input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } .modern-cart-layout .mc-copy-shipping__box, .mc-copy-shipping__box { width: 24px; height: 24px; border-radius: 6px; border: 2px solid #94a3b8; background: #fff; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; transition: background-color .15s ease, border-color .15s ease; } .modern-cart-layout .mc-copy-shipping__box svg, .mc-copy-shipping__box svg { width: 16px; height: 16px; opacity: 0; transform: scale(0.7); transition: all .15s ease; } .modern-cart-layout .mc-copy-shipping__label input[type="checkbox"]:checked ~ .mc-copy-shipping__box, .mc-copy-shipping__label input[type="checkbox"]:checked ~ .mc-copy-shipping__box { background: #0f172a; border-color: #0f172a; } .modern-cart-layout .mc-copy-shipping__label input[type="checkbox"]:checked ~ .mc-copy-shipping__box svg, .mc-copy-shipping__label input[type="checkbox"]:checked ~ .mc-copy-shipping__box svg { opacity: 1; transform: scale(1); } .modern-cart-layout .mc-copy-shipping__text, .mc-copy-shipping__text { display: flex; flex-direction: column; gap: 2px; text-align: left; } .modern-cart-layout .mc-copy-shipping__text strong, .mc-copy-shipping__text strong { font-size: 14px; font-weight: 700; color: var(--mc-text, #0f172a); } .modern-cart-layout .mc-copy-shipping__text small, .mc-copy-shipping__text small { font-size: 12px; color: var(--mc-text-muted, #64748b); } /* ---- responsive ---- */ @media (max-width: 900px) { .modern-cart-layout .mc-layout { grid-template-columns: 1fr; gap: 32px; } .modern-cart-layout .mc-summary { position: static; order: -1; } .modern-cart-layout .mc-heading { margin-bottom: 24px; } .modern-cart-layout { padding: 32px 20px 64px; } } /* ========================================================= Modern cart — mobile sticky totals bar Appears when the user scrolls past .mc-summary (IntersectionObserver toggles .is-visible from core.js). Desktop (>900px) never shows it. All rules namespaced under .modern-cart-layout so nothing can leak into legacy cart or other pages. ========================================================= */ .modern-cart-layout .mc-sticky-totals { /* Hidden by default on all viewports; the mobile media query below flips it to display:flex and the JS observer toggles .is-visible. */ display: none; } @media (max-width: 900px) { .modern-cart-layout .mc-sticky-totals { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 900; background: var(--mc-bg); border-bottom: 1px solid var(--mc-divider); box-shadow: 0 2px 10px rgba(17, 24, 39, 0.08); /* Right padding reserves space for the fixed mobile hamburger toggle (.mobile-menu-toggle: top:12 right:12 width:44 — occupies ~56px from the right edge). */ padding: 0 62px 0 10px; min-height: 48px; max-height: 52px; align-items: center; font-family: inherit; color: var(--mc-text); /* Hidden state — slid up + faded out. .is-visible drops it back in. */ transform: translateY(-100%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform 0.25s ease, opacity 0.2s ease, visibility 0.25s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .modern-cart-layout .mc-sticky-totals.is-visible { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; } .modern-cart-layout .mc-sticky-totals__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 1200px; margin: 0 auto; } .modern-cart-layout .mc-sticky-totals__count { font-size: 13px; font-weight: 500; color: var(--mc-text-muted); flex: 0 0 auto; } .modern-cart-layout .mc-sticky-totals__price { font-size: 16px; font-weight: 700; color: var(--mc-text); flex: 1 1 auto; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .modern-cart-layout .mc-sticky-totals__price var { font-style: normal; font-weight: inherit; } .modern-cart-layout .mc-sticky-totals__btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; background: var(--mc-accent); color: #fff; border: none; border-radius: var(--mc-radius-sm); font-size: 13px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; flex: 0 0 auto; transition: background 0.15s, transform 0.1s; } .modern-cart-layout .mc-sticky-totals__btn:hover, .modern-cart-layout .mc-sticky-totals__btn:focus { background: var(--mc-accent-hover); color: #fff; text-decoration: none; } .modern-cart-layout .mc-sticky-totals__btn:active { transform: translateY(1px); } } @media (max-width: 600px) { .modern-cart-layout { padding: 24px 16px 56px; } .modern-cart-layout .mc-heading h1 { font-size: 24px; } .modern-cart-layout .mc-line { grid-template-columns: 88px 1fr; grid-template-areas: "image body" "price price"; gap: 16px; padding: 20px 0; } .modern-cart-layout .mc-line__image { width: 88px; height: 88px; grid-area: image; } .modern-cart-layout .mc-line__body { grid-area: body; } .modern-cart-layout .mc-line__price { grid-area: price; text-align: left; padding-top: 4px; } .modern-cart-layout .mc-line__actions { gap: 14px; flex-wrap: wrap; } .modern-cart-layout .mc-summary-panel { padding: 22px 20px; } /* Stack payment options vertically on small screens so logos + names don't wrap awkwardly */ .modern-cart-layout .mc-payment-options { flex-direction: column; } .modern-cart-layout .mc-payment-options .mc-payment-option { max-width: 100%; } .modern-cart-layout .mc-collapsible__summary { padding: 13px 12px; font-size: 14px; } .modern-cart-layout .mc-collapsible__body { padding: 2px 12px 14px; } /* First field inside each collapsible section — tighter top spacing on mobile */ .modern-cart-layout .mc-collapsible__body .field:first-child { margin-top: 12px; } /* Field wrapper spacing inside the body — tighten vertical rhythm so the shipping address card reads as a compact block on small phones. */ .modern-cart-layout .mc-collapsible__body .field { margin-bottom: 10px; } .modern-cart-layout .mc-collapsible__body .mc-field-row { margin-bottom: 10px; } .modern-cart-layout .mc-collapsible__body .mc-field-row .field { margin-bottom: 0; } /* Shipping-method hint has extra top margin on desktop; trim on mobile */ .modern-cart-layout .mc-shipping-hint { margin: 0 0 10px; font-size: 12px; } /* Any "note" descendant inside the modern cart (shipping notes, field notes, secure-note, total-note, tooltip_note, custom note classes) must flow inline on mobile — absolute-positioned notes overlap the adjacent content on narrow screens, so reset to static block flow and restore natural spacing. Desktop rules are unchanged. */ .modern-cart-layout [class*="note"], .modern-cart-layout [class*="-note"], .modern-cart-layout [class*="_note"], .modern-cart-layout .fieldnote, .modern-cart-layout .field_note, .modern-cart-layout .tooltip_note, .modern-cart-layout .mc-shipping-note, .modern-cart-layout .mc-notice { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: auto !important; max-width: 100%; display: block; margin-top: 6px; margin-bottom: 6px; } /* Inline "(optional)" labels and the currency badge next to the total should stay inline — they're not standalone notes. */ .modern-cart-layout label .fieldnote, .modern-cart-layout .mc-total .mc-total-note { display: inline-block; margin-top: 0; margin-bottom: 0; } } /* ========================================================= Storefront topbar — dark bar with quick links Mirrors the admin-topbar visual style (#1a1a2e). Always visible on mobile (wraps / scrolls, no collapse). ========================================================= */ /* ── Store topbar: matches admin #subnavigation height ───── */ .store-topbar { display: flex; align-items: center; background: #d6d6d6; width: 100%; min-height: 50px; z-index: 100; padding: 4px 0px; font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe WP", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; box-shadow: rgba(0, 0, 0, 0.35) 0 0 8px; } /* Nav links — left side, wraps if needed */ .store-topbar__nav { display: flex; flex-wrap: wrap; align-items: center; padding: 0; margin: 0; gap: 2px; flex: 1 1 auto; min-width: 0; } /* Actions — right side, currency + cart side by side */ .store-topbar__actions { display: flex; align-items: center; margin-left: auto; flex-shrink: 0; gap: 4px; margin-right:10px; } /* Links — match admin: line-height:32px, padding:0 12px, border-radius:4px */ .store-topbar__link { display: inline-flex; align-items: center; gap: 5px; padding: 0 12px; line-height: 40px; color: #666; font-size: 13px; font-weight: 600; text-decoration: none; text-transform: uppercase; white-space: nowrap; border-radius: 4px; transition: color 0.15s ease, background-color 0.15s ease; cursor: pointer; } .store-topbar__link:hover, .store-topbar__link:focus { color: #333; background: rgba(0,0,0,0.1); text-decoration: none; outline: none; } .store-topbar__link.is-active { color: #333; background: rgba(0,0,0,0.08); } .store-topbar__link--logout { color: #c53030; } .store-topbar__link--logout:hover, .store-topbar__link--logout:focus { color: #9b2c2c; } .store-topbar__link i { font-size: 13px; } /* Mobile: nav links on top (order 1), currency+cart below (order 2) */ @media only screen and (max-width: 998px) { .store-topbar { flex-wrap: wrap; } .store-topbar__nav { flex: 1 1 100%; order: 1; justify-content: center; padding: 0 2px 2px; } .store-topbar__actions { flex: 1 1 100%; order: 2; justify-content: center; border-top: 1px solid rgba(0,0,0,.08); padding-top: 4px; } .store-topbar__link { padding: 0 8px; font-size: 13px; line-height: 28px; } .store-topbar__link i { font-size: 13px; } } /* ========================================================= Storefront cart + currency (stb-* redesign) Old IDs (#cart, #currency, #currencydrop) wrapped in .stb-id-reset { display:contents } — layout-invisible, but old selectors still match through DOM tree. We override them with SAME selectors + !important below. ========================================================= */ /* ── Kill old #subnavigation chrome when store-topbar is present ── */ #subnavigation:has(.store-topbar), #subnavigation.has-store-topbar { background: none !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } /* Wrapper IDs kept for JS — make them layout-invisible */ .stb-id-reset { display: contents !important; } /* ── Cart pill — matches admin button sizing ────────────────── */ .stb-cart { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; height: 40px; background: #eee; color: #666; font-size: 13px; font-weight: 600; text-decoration: none; border-radius: 4px; white-space: nowrap; transition: background .15s; } .stb-cart:hover { background: #fff; color: #333; text-decoration: none; } .stb-cart__icon { font-size: 14px; } .stb-cart__text { text-transform: uppercase; letter-spacing: .5px; } .stb-cart__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; /* 999px (not 50%) — single digits render as a perfect circle because the box is square; multi-digit values (10+) keep the pill shape instead of becoming an eye-shaped ellipse like 50% would. */ border-radius: 999px; box-sizing: border-box; background: var(--main-color, #3b82f6); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; text-indent: 0; } /* ── Currency pill — matches admin button sizing ────────────── */ .stb-currency { position: relative; cursor: pointer; display: inline-flex; align-items: center; } .stb-currency__btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; height: 40px; background: #eee; color: #666; font-size: 13px; font-weight: 600; border-radius: 4px; white-space: nowrap; cursor: pointer; transition: background .15s; } .stb-currency__btn:hover { background: #fff; color: #333; } .stb-currency__flag { display: inline-block; width: 24px; height: 16px; flex-shrink: 0; vertical-align: middle; object-fit: contain; border-radius: 2px; } .stb-currency__code { font-weight: 600; } .stb-currency__caret { font-size: 9px; color: #888; margin-left: 2px; } /* Dropdown menu — shown/hidden by jQuery .dropdown click handler */ .stb-currency__menu { display: none; position: absolute; top: 100%; right: 0; min-width: 160px; padding: 4px 0; margin: 0; list-style: none; background: #fff; border: 1px solid #ccc; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.15); z-index: 200; } .stb-currency__menu li { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 12px; font-weight: 500; color: #333; cursor: pointer; transition: background .1s; text-transform: none; } .stb-currency__menu li:hover { background: var(--main-color); color: #fff; border-radius: 4px; } /* ── NUCLEAR OVERRIDES — use old selectors + !important to kill leaks ── */ /* Kill ALL old #subnavigation #cart styles */ #subnavigation #cart { float: none !important; clear: none !important; width: auto !important; display: contents !important; } #subnavigation #cart > a { display: inline-flex !important; align-items: center !important; background-color: #eee !important; background-image: none !important; background-clip: unset !important; border-radius: 4px !important; padding: 0 14px !important; height: 40px !important; font-family: inherit !important; font-size: 13px !important; font-weight: 600 !important; color: #666 !important; gap: 8px !important; } #subnavigation #cart > a:hover { background-color: #fff !important; color: #333 !important; } #subnavigation #cart > a::before, #subnavigation #cart > a::after { display: none !important; content: none !important; } #subnavigation #cart > a > span { display: inline-flex !important; align-items: center !important; line-height: 1 !important; vertical-align: baseline !important; height: auto !important; } #subnavigation #cart > a > .stb-cart__badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 20px !important; height: 20px !important; padding: 0 5px !important; border-radius: 999px !important; box-sizing: border-box !important; background: var(--main-color, #3b82f6) !important; color: #fff !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1 !important; text-indent: 0 !important; } #subnavigation #cart > a > var { display: none !important; } /* Kill ALL old .dropdown / #currencydrop / #currency styles */ #subnavigation #currency { float: none !important; display: contents !important; padding: 0 !important; width: auto !important; } #subnavigation .currencyselect { display: contents !important; } #currencydrop.stb-currency, .has-store-topbar #currencydrop { display: inline-flex !important; align-items: center !important; height: auto !important; min-width: auto !important; max-width: none !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; color: inherit !important; font-weight: inherit !important; text-transform: inherit !important; } #currencydrop.stb-currency > span, .has-store-topbar #currencydrop > span { display: inline-flex !important; align-items: center !important; overflow: visible !important; padding: 0 14px !important; height: 40px !important; position: static !important; background: #eee !important; border-radius: 4px !important; gap: 6px !important; cursor: pointer !important; font-size: 13px !important; font-weight: 600 !important; color: #666 !important; white-space: nowrap !important; transition: background .15s !important; } #currencydrop.stb-currency > span:hover, .has-store-topbar #currencydrop > span:hover { background: #fff !important; color: #333 !important; } #currencydrop.stb-currency > span::before, #currencydrop.stb-currency > span::after, .has-store-topbar #currencydrop > span::before, .has-store-topbar #currencydrop > span::after, .has-store-topbar .dropdown > span::after { display: none !important; content: none !important; } .stb-currency__flag { float: none !important; margin: 0 !important; width: 24px !important; height: 16px !important; object-fit: contain !important; border-radius: 2px !important; } #currencydrop.stb-currency > ul, .has-store-topbar #currencydrop > ul { background-color: #fff !important; border-radius: 6px !important; border: 1px solid #ccc !important; z-index: 200 !important; padding: 4px 0 !important; min-width: 160px !important; } #currencydrop.stb-currency > ul > li, .has-store-topbar #currencydrop > ul > li { display: flex !important; align-items: center !important; gap: 8px !important; padding: 8px 14px !important; font-size: 12px !important; font-weight: 500 !important; color: #333 !important; border-top: 0 !important; text-transform: none !important; } #currencydrop.stb-currency > ul > li:hover, .has-store-topbar #currencydrop > ul > li:hover { background-color: var(--main-color) !important; color: #fff !important; border-radius: 4px !important; } /* ── Mobile adjustments ────────────────────────────────────── */ @media only screen and (max-width: 998px) { .store-topbar__actions { display: flex !important; flex-wrap: nowrap !important; } /* Each button wrapper takes 50% */ .store-topbar__actions > .stb-id-reset { display: flex !important; flex: 1 1 50% !important; min-width: 0 !important; } /* Cart — fill its 50% container */ .stb-cart, #subnavigation #cart > a { flex: 1 1 100% !important; justify-content: center !important; padding: 0px 10px !important; font-size: 12px !important; } .stb-cart__badge { min-width: 18px; height: 18px; font-size: 10px; } /* Currency wrapper + button — fill its 50% container */ .stb-currency, #currencydrop.stb-currency, .has-store-topbar #currencydrop { flex: 1 1 100% !important; } .stb-currency__btn, #currencydrop.stb-currency > span, .has-store-topbar #currencydrop > span { flex: 1 1 100% !important; justify-content: center !important; padding: 0px 10px !important; font-size: 12px !important; } /* Dropdown opens left-aligned on mobile */ .stb-currency__menu, #currencydrop.stb-currency > ul, .has-store-topbar #currencydrop > ul { left: 0 !important; right: auto !important; min-width: 180px !important; } } /* ========================================================= Mobile slide-out drawer menu Namespaced under .mobile-menu / .mobile-menu-overlay. Only shown on mobile (<=767px); desktop nav is unchanged. ========================================================= */ .mobile-menu-toggle { display: none; -webkit-appearance: none; appearance: none; background: rgba(15, 23, 42, 0.55); border: 1px solid rgba(255, 255, 255, 0.18); padding: 0; margin: 0; cursor: pointer; position: fixed; top: 12px; right: 12px; z-index: 10002; width: 44px; height: 44px; border-radius: 50%; color: #ffffff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); align-items: center; justify-content: center; transition: background 0.2s ease, transform 0.15s ease; } .mobile-menu-toggle:hover, .mobile-menu-toggle:focus { background: rgba(15, 23, 42, 0.8); outline: none; } .mobile-menu-toggle:active { transform: scale(0.95); } .mobile-menu-toggle__icon { font-size: 20px; line-height: 1; color: inherit; } /* Legacy bar-span fallback (no longer used but retained for safety) */ .mobile-menu-toggle__bar { display: block; width: 22px; height: 2px; background: #ffffff; margin: 4px auto; border-radius: 2px; } .mobile-menu-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); opacity: 0; transition: opacity 0.25s ease; z-index: 10000; } .mobile-menu-overlay.is-open { display: block; opacity: 1; } .mobile-menu { position: fixed; top: 0; left: 0; /* 100vh on mobile includes area behind the URL bar and home indicator, hiding the bottom of the drawer. dvh = dynamic viewport height (actual visible area). Fallback to vh for older browsers. */ height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; width: 85vw; max-width: 340px; background: #ffffff; color: #0f172a; z-index: 10001; box-shadow: 4px 0 24px rgba(15, 23, 42, 0.18); transform: translateX(-105%); transition: transform 0.28s ease; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; /* Safe-area padding so the last footer link sits comfortably above the iPhone home indicator / Android gesture bar. Falls back to 0 on browsers that don't support env(). */ padding-bottom: env(safe-area-inset-bottom); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .mobile-menu.is-open { transform: translateX(0); } .mobile-menu__header { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 14px; border-bottom: 0; } .mobile-menu__title { font-size: 22px; font-weight: 700; color: #0f172a; margin: 0; letter-spacing: -0.01em; } .mobile-menu__close { -webkit-appearance: none; appearance: none; background: #f1f5f9; border: 0; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #475569; font-size: 16px; transition: background 0.15s ease, color 0.15s ease; padding: 0; } .mobile-menu__close:hover, .mobile-menu__close:focus { background: #e2e8f0; color: #0f172a; outline: none; } .mobile-menu__search { padding: 6px 20px 14px; } .mobile-menu__search-wrap { position: relative; } .mobile-menu__search-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 14px; pointer-events: none; z-index: 2; } .mobile-menu__search-input { width: 100%; box-sizing: border-box; background: #f1f5f9; border: 1px solid transparent; border-radius: 999px; padding: 12px 40px 12px 16px; font-size: 15px; color: #0f172a; outline: none; transition: background 0.15s ease, border-color 0.15s ease; font-family: inherit; } .mobile-menu__search-input::placeholder { color: #94a3b8; } .mobile-menu__search-input:focus { background: #ffffff; border-color: #cbd5e1; } .mobile-menu__links { display: flex; flex-direction: column; padding: 4px 12px 8px; } .mobile-menu__link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; color: #0f172a; font-size: 15px; font-weight: 500; text-decoration: none; margin: 2px 0; transition: background 0.15s ease, color 0.15s ease; position: relative; } .mobile-menu__link:hover, .mobile-menu__link:focus { background: #f1f5f9; color: #0f172a; text-decoration: none; outline: none; } .mobile-menu__link.is-active { background: #dbeafe; color: #1d4ed8; } .mobile-menu__link.is-active .mobile-menu__link-icon { color: #1d4ed8; } .mobile-menu__link-icon { width: 22px; text-align: center; color: #475569; font-size: 16px; flex-shrink: 0; } .mobile-menu__link-label { flex: 1; } .mobile-menu__badge { background: #1d4ed8; color: #ffffff; font-size: 11px; font-weight: 600; min-width: 20px; height: 20px; border-radius: 10px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .mobile-menu__section { margin-top: 14px; padding: 14px 20px 24px; border-top: 1px solid #f1f5f9; } .mobile-menu__section-title { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 10px; } .mobile-menu__cats { display: flex; flex-direction: column; } .mobile-menu__cat { display: block; padding: 9px 2px; color: #334155; font-size: 14px; text-decoration: none; font-weight: 400; transition: color 0.15s ease; } .mobile-menu__cat:hover, .mobile-menu__cat:focus { color: #1d4ed8; text-decoration: none; outline: none; } .mobile-menu__cat.is-active { color: #1d4ed8; font-weight: 600; } /* Help & Support — icon nav links grouped under a section heading. Reuses .mobile-menu__link styling; the section padding is reset so the inner links control their own spacing like the primary nav. */ .mobile-menu__section--support { padding: 14px 12px 8px; } .mobile-menu__section--support .mobile-menu__section-title { padding: 0 14px; } .mobile-menu__section--support .mobile-menu__links { padding: 0; } /* Info / legal links at the bottom of the drawer — footer-style, lighter than primary nav */ .mobile-menu__section--info { margin-top: 4px; padding-top: 16px; /* Extra trailing space so Privacy / Refund / Terms aren't flush against the bottom edge of the viewport on phones with a home indicator. The env(safe-area-inset-bottom) on .mobile-menu adds device-specific inset on top of this. */ padding-bottom: 56px; border-top: 1px solid #e2e8f0; } .mobile-menu__section--info .mobile-menu__section-title { color: #94a3b8; font-size: 10px; margin-bottom: 6px; } .mobile-menu__info { display: flex; flex-direction: column; } .mobile-menu__info-link { display: block; padding: 6px 2px; color: #64748b; font-size: 12px; font-weight: 400; text-decoration: none; transition: color 0.15s ease; } .mobile-menu__info-link:hover, .mobile-menu__info-link:focus { color: #1d4ed8; text-decoration: none; outline: none; } body.mobile-menu-lock, body.no-scroll { overflow: hidden !important; touch-action: none; } /* Only show the mobile drawer UI on mobile widths */ @media only screen and (min-width: 768px) { .mobile-menu, .mobile-menu-overlay, .mobile-menu-toggle { display: none !important; } } @media only screen and (max-width: 767px) { .mobile-menu-toggle { display: inline-flex; } /* Hide the old hover-driven mobile menu toggle since we now use the drawer */ #navigation #navigationToggle { display: none !important; } #navigation:hover #navigationMenu { display: none !important; } } /* ========================================================= Sticky mobile add-to-cart bar (buy page) ========================================================= */ .bpm-sticky-cart { position: fixed; left: 0; right: 0; bottom: 0; background: #ffffff; border-top: 1px solid #e5e7eb; box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.12); padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 9000; transform: translateY(120%); transition: transform 0.28s ease; display: none; } .bpm-sticky-cart.is-visible { transform: translateY(0); } .bpm-sticky-cart__inner { display: flex; align-items: center; gap: 12px; max-width: 100%; } .bpm-sticky-cart__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; overflow: hidden; } .bpm-sticky-cart__price { font-size: 18px; font-weight: 700; color: #0f172a; white-space: nowrap; } .bpm-sticky-cart__meta { font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bpm-sticky-cart__btn { flex: 0 0 auto; min-height: 48px; padding: 12px 22px; background: var(--main-color, #2196f3); color: #ffffff; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; -webkit-appearance: none; appearance: none; box-shadow: none; transition: filter 0.15s ease; } .bpm-sticky-cart__btn:hover, .bpm-sticky-cart__btn:focus { filter: brightness(0.92); outline: none; } .bpm-sticky-cart__btn i { font-size: 15px; } @media only screen and (max-width: 767px) { .bpm-sticky-cart { display: block; } /* Reserve space at bottom of body when the sticky bar is shown so content isn't hidden */ body.bpm-sticky-active { padding-bottom: 84px; } } /* ========================================================= Moneris modern-checkout enhancements - Inline field rows for first/last name and expiry/cvv - Process Payment button matches cart Checkout button - Billing collapsible open by default, no gradient/glow on Copy Shipping ========================================================= */ .modern-cart-layout .mc-field-row { display: flex; gap: 12px; margin: 0; /* Bottom-align so the inputs sit flush regardless of label height or line wraps. */ align-items: flex-end; flex-wrap: nowrap; } .modern-cart-layout .mc-field-row > .field { /* Column-flex each field so label sits on top and the input naturally docks at the bottom of the column — makes align-items:flex-end on the parent line the inputs up across siblings. */ display: flex; flex-direction: column; justify-content: flex-end; flex: 1 1 0; min-width: 0; margin-right: 0 !important; float: none !important; width: auto !important; max-width: none !important; box-sizing: border-box; } .modern-cart-layout .mc-field-row--halves > .field { flex-basis: 50%; } .modern-cart-layout .mc-field-row--thirds > .field { flex-basis: 33.333%; } .modern-cart-layout .mc-field-row > .field input, .modern-cart-layout .mc-field-row > .field select { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } /* Process Payment button — match the cart's Checkout button style. Covers both Moneris (#moneris_process) and Stripe (#submitPayment) submit buttons via the shared .mc-process-btn class. */ .modern-cart-layout #moneris_process.mc-checkout-btn, .modern-cart-layout .mc-process-btn, .modern-cart-layout #paymentOptions_StripeCheckout button#submitPayment.mc-process-btn, #paymentOptions_StripeCheckout button#submitPayment.mc-process-btn { display: block !important; width: 100% !important; max-width: 100% !important; margin: 16px 0 0 !important; padding: 16px 20px !important; background: var(--mc-accent, #0f766e) !important; color: #fff !important; border: none !important; border-radius: var(--mc-radius-sm, 8px) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.01em !important; cursor: pointer !important; font-family: inherit !important; text-align: center !important; text-decoration: none !important; text-transform: none !important; line-height: 1.2 !important; box-shadow: none !important; transition: background-color 0.15s ease !important; float: none !important; position: relative; } .modern-cart-layout #moneris_process.mc-checkout-btn i, .modern-cart-layout .mc-process-btn i, #paymentOptions_StripeCheckout button#submitPayment.mc-process-btn i { margin-right: 6px; } .modern-cart-layout #moneris_process.mc-checkout-btn:hover, .modern-cart-layout .mc-process-btn:hover, #paymentOptions_StripeCheckout button#submitPayment.mc-process-btn:hover { background: var(--mc-accent-hover, #0c5d57) !important; color: #fff !important; text-decoration: none !important; } .modern-cart-layout #moneris_process.mc-checkout-btn:active, .modern-cart-layout .mc-process-btn:active, #paymentOptions_StripeCheckout button#submitPayment.mc-process-btn:active { transform: translateY(1px); } /* .is-loading state — inline spinner on the Process Payment button. Disables clicks, dims slightly, and shows a spinning icon before the button text. Replaces the previous separate loading.gif overlay. */ .modern-cart-layout .mc-process-btn.is-loading, .modern-cart-layout #moneris_process.mc-process-btn.is-loading, #paymentOptions_StripeCheckout button#submitPayment.mc-process-btn.is-loading { pointer-events: none !important; opacity: 0.85 !important; cursor: default !important; } .modern-cart-layout .mc-process-btn.is-loading > i:first-child, .modern-cart-layout .mc-process-btn.is-loading > .fa-lock { display: none !important; } .modern-cart-layout .mc-process-btn.is-loading::before, #paymentOptions_StripeCheckout button#submitPayment.mc-process-btn.is-loading::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; border-radius: 50%; animation: mcProcessSpin 0.7s linear infinite; } @keyframes mcProcessSpin { to { transform: rotate(360deg); } } @media only screen and (max-width: 600px) { /* Keep shorter fields side-by-side on mobile. Only collapse to a single column at very narrow widths (<380px) via the rule below. */ .modern-cart-layout .mc-field-row { flex-wrap: nowrap; gap: 10px; } .modern-cart-layout .mc-field-row--halves > .field { flex-basis: 50%; } .modern-cart-layout .mc-field-row--thirds { flex-wrap: nowrap; } .modern-cart-layout .mc-field-row--thirds > .field { flex-basis: 33.333%; } .modern-cart-layout .mc-field-row--halves label, .modern-cart-layout .mc-field-row--thirds label { font-size: 12px; } .modern-cart-layout #moneris_process.mc-checkout-btn, .modern-cart-layout .mc-process-btn { width: 100% !important; } } /* Very narrow phones — collapse .mc-field-row--halves to a single column so tight two-column fields stay usable. Thirds stay inline (expiry/ccv). */ @media only screen and (max-width: 380px) { .modern-cart-layout .mc-field-row--halves { flex-wrap: wrap; } .modern-cart-layout .mc-field-row--halves > .field { flex-basis: 100%; } } /* ========================================================= Moneris — "Same as shipping" placed OUTSIDE billing details Needs a little extra breathing room so it doesn't look glued to the collapsible summary below it. ========================================================= */ .modern-cart-layout .mc-copy-shipping--outside, .mc-copy-shipping--outside { margin: 0 0 14px !important; } .modern-cart-layout #paymentOptions_MonerisCheckout > .mc-copy-shipping--outside + .mc-billing-collapsible { margin-top: 0; } /* ========================================================= Moneris credit card field rows — apply inline grid even outside modern-cart-layout so the CC inputs match billing fields visually and align on the same horizontal rows. ========================================================= */ #paymentOptions_MonerisCheckout .mc-field-row { display: flex; gap: 12px; margin: 0 0 10px; align-items: flex-end; flex-wrap: nowrap; } #paymentOptions_MonerisCheckout .mc-field-row > .field { flex: 1 1 0; min-width: 0; margin-right: 0 !important; float: none !important; width: auto !important; max-width: none !important; box-sizing: border-box; } #paymentOptions_MonerisCheckout .mc-field-row--halves > .field { flex-basis: 50%; } #paymentOptions_MonerisCheckout .mc-field-row--thirds > .field { flex-basis: 33.333%; } #paymentOptions_MonerisCheckout .mc-field-row > .field input, #paymentOptions_MonerisCheckout .mc-field-row > .field select { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } #paymentOptions_MonerisCheckout .mc-field-row > .field label { display: block; } /* Make sure the CC section's .field inputs inherit the same baseline styling as the billing .input fields (height, padding, border). */ #paymentOptions_MonerisCheckout .field input.input, #paymentOptions_MonerisCheckout .field select.select { width: 100%; box-sizing: border-box; } @media only screen and (max-width: 600px) { #paymentOptions_MonerisCheckout .mc-field-row { flex-wrap: wrap; } #paymentOptions_MonerisCheckout .mc-field-row--halves > .field { flex-basis: 100%; } #paymentOptions_MonerisCheckout .mc-field-row--thirds { flex-wrap: nowrap; } #paymentOptions_MonerisCheckout .mc-field-row--thirds > .field { flex-basis: 33.333%; } #paymentOptions_MonerisCheckout .mc-field-row--thirds label { font-size: 12px; } } /* ========================================================= Stripe checkout — match Moneris look - Stripe Elements' iframe is hosted inside #card-element; we restyle the wrapper to look like a standard .input field. - Submit Payment button uses the shared .mc-process-btn style. ========================================================= */ #paymentOptions_StripeCheckout .stripe-card-element, #paymentOptions_StripeCheckout #card-element { display: block; width: 100%; box-sizing: border-box; padding: 12px 14px; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; min-height: 44px; transition: border-color .15s ease, box-shadow .15s ease; } #paymentOptions_StripeCheckout #card-element.StripeElement--focus { border-color: var(--mc-accent, #0f766e); box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15); } #paymentOptions_StripeCheckout #card-element.StripeElement--invalid { border-color: #d04949; background-color: #fcbdbd; } #paymentOptions_StripeCheckout .stripe-card-errors, #paymentOptions_StripeCheckout #card-errors { display: block; margin-top: 6px; color: #d04949; font-size: 13px; min-height: 1em; } #paymentOptions_StripeCheckout .form-row { margin-bottom: 12px; } /* Stripe's #submitPayment uses the shared .mc-process-btn rules defined above (next to the Moneris process button) — no duplicate block here. */ /* ========================================================================= SIZING GUIDE — /sizing All rules scoped under .sizing-guide so nothing bleeds into other pages. Uses --main-color (the per-store theme accent) for brand tints. ========================================================================= */ .sizing-guide { max-width: 1100px; margin: 0 auto; padding: 36px 16px 72px; color: #1a1c1e; font-family: inherit; box-sizing: border-box; --sg-border: #e5e7eb; --sg-border-soft: #eef0f2; --sg-panel: #ffffff; --sg-tint: #f9fafb; --sg-text: #1f2937; --sg-text-muted: #4b5563; --sg-text-subtle: #6b7280; --sg-shadow: 0 1px 2px rgba(17, 24, 39, 0.04); --sg-shadow-lg: 0 4px 18px rgba(17, 24, 39, 0.06); --sg-radius: 14px; --sg-radius-sm: 8px; } .sizing-guide *, .sizing-guide *::before, .sizing-guide *::after { box-sizing: border-box; } .sizing-guide h1, .sizing-guide h2, .sizing-guide h3, .sizing-guide p { margin: 0; color: inherit; } /* Hero / intro */ .sizing-guide .sg-hero { text-align: center; padding: 48px 28px 52px; border-radius: var(--sg-radius); background: linear-gradient(180deg, var(--sg-tint) 0%, #fff 100%); border: 1px solid var(--sg-border-soft); box-shadow: var(--sg-shadow); margin-bottom: 48px; } .sizing-guide .sg-hero__badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; background: rgba(17, 24, 39, 0.05); color: var(--main-color, #0f766e); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid rgba(17, 24, 39, 0.06); } .sizing-guide .sg-hero__badge svg { color: var(--main-color, #0f766e); } .sizing-guide .sg-hero h1 { font-size: 40px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; margin: 18px 0 14px; color: #111827; } .sizing-guide .sg-hero p { font-size: 16px; line-height: 1.65; color: var(--sg-text-muted); max-width: 640px; margin: 0 auto; } .sizing-guide .sg-hero p + p { margin-top: 10px; } .sizing-guide .sg-hero__note { font-size: 14px !important; color: var(--sg-text-subtle) !important; padding-top: 12px; border-top: 1px solid var(--sg-border-soft); max-width: 540px !important; margin-top: 18px !important; } .sizing-guide .sg-hero__note strong { color: var(--sg-text); } /* Section heading used above the measure grid */ .sizing-guide .sg-section-heading { font-size: 22px; font-weight: 700; color: #111827; margin: 0 0 20px; letter-spacing: -0.005em; } /* How to measure */ .sizing-guide .sg-measure { margin: 0 0 48px; } .sizing-guide .sg-measure__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .sizing-guide .sg-measure__card { background: var(--sg-panel); border: 1px solid var(--sg-border); border-radius: var(--sg-radius); padding: 24px 22px; box-shadow: var(--sg-shadow); display: flex; flex-direction: column; gap: 12px; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .sizing-guide .sg-measure__card:hover { border-color: rgba(17, 24, 39, 0.12); box-shadow: var(--sg-shadow-lg); transform: translateY(-2px); } .sizing-guide .sg-measure__head { display: flex; align-items: center; gap: 12px; min-width: 0; } .sizing-guide .sg-measure__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(17, 24, 39, 0.05); color: var(--main-color, #0f766e); flex: 0 0 auto; } .sizing-guide .sg-measure__card h3 { font-size: 16px; font-weight: 700; color: #111827; margin: 0; min-width: 0; } .sizing-guide .sg-measure__card p { font-size: 14px; color: var(--sg-text-muted); line-height: 1.6; margin: 0; } /* Tabs */ .sizing-guide .sg-tabs { display: flex; gap: 6px; padding: 6px; background: var(--sg-tint); border: 1px solid var(--sg-border-soft); border-radius: 12px; margin: 0 0 28px; position: sticky; top: 0; z-index: 5; -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px); } .sizing-guide .sg-tabs__btn { flex: 1 1 0; min-width: 0; padding: 12px 16px; background: transparent; border: none; border-radius: var(--sg-radius-sm); font-family: inherit; font-size: 14px; font-weight: 600; color: var(--sg-text-subtle); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; white-space: nowrap; text-align: center; line-height: 1.2; } .sizing-guide .sg-tabs__btn:hover { color: var(--sg-text); background: rgba(17, 24, 39, 0.03); } .sizing-guide .sg-tabs__btn:focus-visible { outline: 2px solid var(--main-color, #0f766e); outline-offset: 2px; } .sizing-guide .sg-tabs__btn[aria-selected="true"] { background: var(--sg-panel); color: var(--main-color, #0f766e); box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08); } /* Tab panels */ .sizing-guide .sg-panel { display: none; animation: sgFadeIn 0.2s ease; } .sizing-guide .sg-panel.is-active { display: block; } @keyframes sgFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Style cards */ .sizing-guide .sg-style { background: var(--sg-panel); border: 1px solid var(--sg-border); border-radius: var(--sg-radius); padding: 26px 28px; margin: 0 0 18px; box-shadow: var(--sg-shadow); scroll-margin-top: 80px; } .sizing-guide .sg-style:last-child { margin-bottom: 0; } .sizing-guide .sg-style h3 { font-size: 18px; font-weight: 700; color: #111827; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--sg-border-soft); } .sizing-guide .sg-style__note { font-size: 13px; color: var(--sg-text-subtle); margin-top: 14px; font-style: italic; line-height: 1.5; } /* Table — uses a sticky first column so the size labels stay visible while the size columns scroll horizontally on narrow screens. */ .sizing-guide .sg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0; border-radius: var(--sg-radius-sm); border: 1px solid var(--sg-border-soft); scrollbar-width: thin; scrollbar-color: rgba(17, 24, 39, 0.2) transparent; } .sizing-guide .sg-table-wrap::-webkit-scrollbar { height: 8px; } .sizing-guide .sg-table-wrap::-webkit-scrollbar-thumb { background: rgba(17, 24, 39, 0.18); border-radius: 4px; } .sizing-guide .sg-table-wrap::-webkit-scrollbar-track { background: transparent; } .sizing-guide .sg-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; color: var(--sg-text); background: var(--sg-panel); } .sizing-guide .sg-table th, .sizing-guide .sg-table td { padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--sg-border-soft); white-space: nowrap; background: var(--sg-panel); } .sizing-guide .sg-table thead th { background: var(--sg-tint); color: var(--sg-text); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--sg-border); } .sizing-guide .sg-table thead th:first-child { text-align: left; position: sticky; left: 0; z-index: 3; box-shadow: 1px 0 0 var(--sg-border); } .sizing-guide .sg-table tbody th[scope="row"] { background: var(--sg-tint); font-weight: 600; color: var(--sg-text); text-align: left; position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 var(--sg-border); min-width: 110px; } .sizing-guide .sg-table tbody tr:last-child th, .sizing-guide .sg-table tbody tr:last-child td { border-bottom: none; } .sizing-guide .sg-table tbody tr:hover td { background: rgba(17, 24, 39, 0.02); } /* Disclaimer line */ .sizing-guide .sg-disclaimer { font-size: 12px; color: var(--sg-text-subtle); text-align: center; margin: 18px 0 0; line-height: 1.6; } .sizing-guide .sg-disclaimer strong { color: var(--sg-text); } /* Continue-shopping CTA */ .sizing-guide .sg-cta { text-align: center; padding: 44px 24px 8px; margin-top: 40px; border-top: 1px solid var(--sg-border-soft); } .sizing-guide .sg-cta p { font-size: 15px; color: var(--sg-text-muted); margin: 0 0 20px; } .sizing-guide .sg-cta__btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; background: var(--main-color, #0f766e); color: #fff; border-radius: var(--sg-radius-sm); font-size: 15px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease; box-shadow: 0 2px 6px rgba(17, 24, 39, 0.12); } .sizing-guide .sg-cta__btn:hover, .sizing-guide .sg-cta__btn:focus { color: #fff; text-decoration: none; filter: brightness(0.92); box-shadow: 0 4px 12px rgba(17, 24, 39, 0.16); } .sizing-guide .sg-cta__btn:active { transform: translateY(1px); } /* Responsive — tablet */ @media (max-width: 900px) { .sizing-guide { padding: 28px 12px 56px; } .sizing-guide .sg-hero { padding: 36px 16px 40px; margin-bottom: 36px; } .sizing-guide .sg-hero h1 { font-size: 30px; } .sizing-guide .sg-hero p { font-size: 15px; } .sizing-guide .sg-measure__grid { grid-template-columns: 1fr; gap: 14px; } .sizing-guide .sg-measure__card { padding: 18px 16px; } .sizing-guide .sg-tabs { overflow-x: auto; flex-wrap: nowrap; } .sizing-guide .sg-tabs__btn { flex: 1 0 auto; } .sizing-guide .sg-style { padding: 22px 14px; } } /* Responsive — phone */ @media (max-width: 600px) { .sizing-guide { padding: 20px 8px 48px; } .sizing-guide .sg-hero { padding: 26px 14px 30px; border-radius: 12px; margin-bottom: 26px; } .sizing-guide .sg-hero__badge { font-size: 11px; padding: 5px 12px; } .sizing-guide .sg-hero h1 { font-size: 24px; margin: 14px 0 10px; } .sizing-guide .sg-hero p { font-size: 14px; } .sizing-guide .sg-section-heading { font-size: 18px; margin-bottom: 14px; } .sizing-guide .sg-measure__card { gap: 10px; padding: 16px 14px; } .sizing-guide .sg-measure__head { gap: 10px; } .sizing-guide .sg-measure__icon { width: 40px; height: 40px; } .sizing-guide .sg-tabs { padding: 5px; margin-bottom: 22px; } .sizing-guide .sg-tabs__btn { font-size: 13px; padding: 10px 12px; } .sizing-guide .sg-style { padding: 16px 10px; border-radius: 12px; } .sizing-guide .sg-style h3 { font-size: 16px; margin-bottom: 14px; padding-bottom: 12px; } .sizing-guide .sg-table { font-size: 13px; } .sizing-guide .sg-table th, .sizing-guide .sg-table td { padding: 10px 12px; } .sizing-guide .sg-table tbody th[scope="row"] { min-width: 92px; } .sizing-guide .sg-cta { padding: 32px 14px 8px; margin-top: 28px; } .sizing-guide .sg-cta__btn { padding: 13px 22px; font-size: 14px; } } /* Responsive — very narrow phones */ @media (max-width: 380px) { .sizing-guide { padding: 18px 6px 44px; } .sizing-guide .sg-hero { padding: 22px 12px 26px; } .sizing-guide .sg-hero h1 { font-size: 22px; } .sizing-guide .sg-measure__card { padding: 14px 12px; } .sizing-guide .sg-style { padding: 14px 8px; } .sizing-guide .sg-style h3 { margin-bottom: 12px; padding-bottom: 10px; } .sizing-guide .sg-table th, .sizing-guide .sg-table td { padding: 9px 10px; } .sizing-guide .sg-table tbody th[scope="row"] { min-width: 84px; } .sizing-guide .sg-cta { padding: 28px 10px 8px; } } /* ========================================================================= ALL CATEGORIES — /categories Grid of category cards. Scoped under .categories-page / .categories-grid / .category-card so nothing leaks. Uses --main-color for brand tint. ========================================================================= */ .categories-page { max-width: 1200px; margin: 0 auto; padding: 36px 16px 72px; color: #1a1c1e; font-family: inherit; box-sizing: border-box; --cat-border: #e5e7eb; --cat-border-soft: #eef0f2; --cat-panel: #ffffff; --cat-tint: #f9fafb; --cat-text: #111827; --cat-text-muted: #4b5563; --cat-text-subtle: #6b7280; --cat-shadow: 0 1px 2px rgba(17, 24, 39, 0.04); --cat-shadow-lg: 0 10px 28px rgba(17, 24, 39, 0.10); --cat-radius: 14px; } .categories-page *, .categories-page *::before, .categories-page *::after { box-sizing: border-box; } .categories-page__hero { text-align: center; padding: 40px 24px 36px; border-radius: var(--cat-radius); background: linear-gradient(180deg, var(--cat-tint) 0%, #fff 100%); border: 1px solid var(--cat-border-soft); box-shadow: var(--cat-shadow); margin-bottom: 36px; } .categories-page__title { font-size: 40px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 10px; color: var(--cat-text); } .categories-page__stat { font-size: 14px; font-weight: 500; color: var(--cat-text-subtle); margin: 0; letter-spacing: 0.02em; } .categories-page__empty { text-align: center; padding: 60px 20px; background: var(--cat-panel); border: 1px dashed var(--cat-border); border-radius: var(--cat-radius); color: var(--cat-text-muted); font-size: 15px; } /* The grid */ .categories-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } /* Individual card — clickable */ .category-card { position: relative; display: flex; align-items: center; gap: 14px; min-height: 108px; padding: 20px 22px; background: var(--cat-panel); border: 1px solid var(--cat-border); border-radius: var(--cat-radius); box-shadow: var(--cat-shadow); color: var(--cat-text); text-decoration: none; overflow: hidden; isolation: isolate; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .category-card:hover, .category-card:focus { transform: translateY(-3px); border-color: var(--main-color, #0f766e); box-shadow: var(--cat-shadow-lg); text-decoration: none; outline: none; } /* Decorative first-letter watermark sitting behind the name */ .category-card__initial { position: absolute; top: 50%; right: -14px; transform: translateY(-50%); font-size: 112px; font-weight: 800; line-height: 1; color: var(--main-color, #0f766e); opacity: 0.10; letter-spacing: -0.04em; pointer-events: none; user-select: none; z-index: 0; transition: opacity 0.18s ease, transform 0.18s ease; } .category-card:hover .category-card__initial, .category-card:focus .category-card__initial { opacity: 0.18; transform: translateY(-50%) scale(1.04); } /* Text body — sits above the watermark */ .category-card__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; } .category-card__name { font-size: 17px; font-weight: 700; color: var(--cat-text); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; } .category-card__count { display: inline-flex; align-self: flex-start; align-items: center; padding: 3px 10px; border-radius: 999px; background: rgba(17, 24, 39, 0.06); color: var(--cat-text-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.4; } .category-card:hover .category-card__count, .category-card:focus .category-card__count { background: color-mix(in srgb, var(--main-color, #0f766e) 12%, transparent); color: var(--main-color, #0f766e); } /* Tablet — 3 up */ @media only screen and (max-width: 900px) { .categories-page { padding: 28px 14px 56px; } .categories-page__hero { padding: 32px 20px 28px; margin-bottom: 28px; } .categories-page__title { font-size: 32px; } .categories-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .category-card { min-height: 98px; padding: 18px 18px; } .category-card__initial { font-size: 96px; right: -12px; } .category-card__name { font-size: 16px; } } /* Phone — 2 up, snug */ @media only screen and (max-width: 600px) { .categories-page { padding: 20px 12px 48px; } .categories-page__hero { padding: 24px 16px 22px; margin-bottom: 22px; border-radius: 12px; } .categories-page__title { font-size: 26px; margin-bottom: 8px; } .categories-page__stat { font-size: 12px; } .categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .category-card { min-height: 88px; padding: 14px 14px; gap: 10px; border-radius: 12px; } .category-card__initial { font-size: 76px; right: -8px; opacity: 0.12; } .category-card__name { font-size: 14px; } .category-card__count { font-size: 11px; padding: 2px 8px; } } /* ========================================================================= 404 / NOT FOUND — modern redesign. Scoped under .notfound-page so nothing leaks. Reuses .category-card + .bpm-also-like-* for the two lower rows. Mobile-first: defaults stack, desktop opens up at >=720px. ========================================================================= */ .notfound-page { max-width: 1200px; margin: 0 auto; padding: 24px 16px 64px; color: #1a1c1e; font-family: inherit; box-sizing: border-box; --nf-border: #e5e7eb; --nf-border-soft: #eef0f2; --nf-panel: #ffffff; --nf-tint: #f9fafb; --nf-text: #111827; --nf-text-muted: #4b5563; --nf-text-subtle: #6b7280; --nf-shadow: 0 1px 2px rgba(17, 24, 39, 0.04); --nf-shadow-lg: 0 10px 28px rgba(17, 24, 39, 0.10); --nf-radius: 14px; } .notfound-page *, .notfound-page *::before, .notfound-page *::after { box-sizing: border-box; } /* --- Hero --- */ .notfound-hero { text-align: center; padding: 40px 20px 36px; border-radius: var(--nf-radius); background: linear-gradient(180deg, var(--nf-tint) 0%, #fff 100%); border: 1px solid var(--nf-border-soft); box-shadow: var(--nf-shadow); margin-bottom: 36px; } .notfound-hero__kicker { display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px; background: rgba(17, 24, 39, 0.06); color: var(--nf-text-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .notfound-hero__title { font-size: 32px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 10px; color: var(--nf-text); } .notfound-hero__subhead { max-width: 560px; margin: 0 auto 26px; font-size: 15px; line-height: 1.55; color: var(--nf-text-muted); } /* --- Action row --- */ .notfound-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 24px; } .notfound-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 10px; background: #fff; border: 1px solid var(--nf-border); color: var(--nf-text); font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease, color 0.18s ease; } .notfound-btn:hover, .notfound-btn:focus { text-decoration: none; border-color: var(--main-color, #0f766e); box-shadow: var(--nf-shadow); color: var(--nf-text); outline: none; } .notfound-btn--primary { background: var(--main-color, #0f766e); border-color: var(--main-color, #0f766e); color: #fff; } .notfound-btn--primary:hover, .notfound-btn--primary:focus { background: var(--main-color-dark, #0b5f59); border-color: var(--main-color-dark, #0b5f59); color: #fff; filter: brightness(0.96); } .notfound-btn i { font-size: 13px; } /* --- Search bar --- */ .notfound-search { position: relative; display: flex; align-items: center; gap: 0; max-width: 540px; margin: 0 auto; background: #fff; border: 1px solid var(--nf-border); border-radius: 999px; padding: 4px 4px 4px 18px; box-shadow: var(--nf-shadow); transition: border-color 0.18s ease, box-shadow 0.18s ease; } .notfound-search:focus-within { border-color: var(--main-color, #0f766e); box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12); } .notfound-search__icon { color: var(--nf-text-subtle); font-size: 14px; margin-right: 10px; flex-shrink: 0; } .notfound-search input[type="text"] { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent; padding: 10px 4px; font-size: 15px; color: var(--nf-text); } .notfound-search input[type="text"]::placeholder { color: var(--nf-text-subtle); } .notfound-search__submit { flex: 0 0 auto; background: var(--main-color, #0f766e); color: #fff; border: none; border-radius: 999px; padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.18s ease, filter 0.18s ease; } .notfound-search__submit:hover, .notfound-search__submit:focus { filter: brightness(0.92); outline: none; } /* --- Section spacing for popular cats and also-like --- */ .notfound-section { margin-top: 36px; } .notfound-section__heading { font-size: 20px; font-weight: 700; color: var(--nf-text); margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--nf-border); } /* --- Popular categories grid — reuses .category-card classes from the categories page but scoped inside .notfound-cat-grid so we can control column counts without fighting the /categories page. --- */ .notfound-cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; /* Override the categories-page wrapper padding so it sits flush inside the 404 section container. */ padding: 0 !important; max-width: none !important; margin: 0 !important; } .notfound-also-like { margin-top: 40px; } /* --- Developer debug box --- */ .notfound-debug { margin-top: 28px; padding: 14px 16px; border: 1px dashed #f59e0b; border-radius: 10px; background: #fffbeb; color: #78350f; font-size: 12px; line-height: 1.6; } .notfound-debug code { background: rgba(120, 53, 15, 0.08); padding: 1px 6px; border-radius: 4px; font-size: 11px; word-break: break-all; } .notfound-debug strong { display: block; margin-bottom: 6px; font-size: 13px; } /* --- Tablet / desktop bump --- */ @media only screen and (min-width: 720px) { .notfound-page { padding: 36px 20px 72px; } .notfound-hero { padding: 56px 32px 48px; } .notfound-hero__title { font-size: 42px; } .notfound-hero__subhead { font-size: 16px; margin-bottom: 30px; } .notfound-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .notfound-section__heading { font-size: 22px; } } @media only screen and (min-width: 1024px) { .notfound-hero__title { font-size: 48px; } } /* Template Gallery CTA strip on homepage */ .template-gallery-cta { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 20px; margin: 0 auto 20px; max-width: var(--max-width, 1200px); background: var(--settings-bg-color, #f5f5f5); border: 1px solid var(--border-color, #e0e0e0); border-radius: 8px; font-size: 14px; color: var(--text-color, #333); } .template-gallery-cta i { font-size: 18px; color: var(--main-color); } .template-gallery-cta .btn { white-space: nowrap; flex-shrink: 0; } @media only screen and (max-width: 600px) { .template-gallery-cta { flex-direction: column; text-align: center; margin: 0 10px 15px; } } /* ========================================================================== Admin Navigation Redesign (2026-04) Light grey top bar, dark dropdown panels, mega-menus for Settings/Plugins. ========================================================================== */ /* Reset old #subnavigation styling when new admin-topbar is present. Uses a class added via JS as a fallback for browsers without :has(). */ #subnavigation:has(.admin-topbar), #subnavigation.has-admin-topbar { background: none !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; font-family: inherit !important; font-size: inherit !important; font-weight: normal !important; text-shadow: none !important; text-transform: none !important; } /* ── Top bar ───────────────────────────────────────────────── */ .admin-topbar { background: #d6d6d6; display: flex; align-items: center; justify-content: flex-start; padding: 0 24px; height: 56px; box-shadow: 0 2px 6px rgba(0,0,0,.1); position: relative; z-index: 1000; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; text-transform: none; } /* ── Desktop nav ───────────────────────────────────────────── */ .admin-nav { display: flex; align-items: stretch; height: 56px; gap: 2px; list-style: none; margin: 0; padding: 0; flex: 1; } .admin-nav > li { position: relative; display: flex; align-items: stretch; } .admin-nav > li > a { display: flex; align-items: center; gap: 7px; padding: 0 16px; height: 100%; color: #333; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .2s, background .2s; border-bottom: 2px solid transparent; letter-spacing: .2px; } .admin-nav > li > a i.fa-solid, .admin-nav > li > a i.fa-brands, .admin-nav > li > a i.fa-regular { font-size: 14px; width: 16px; text-align: center; } .admin-nav > li > a .caret { font-size: 10px; opacity: .4; margin-left: 2px; transition: transform .2s; } .admin-nav > li:hover > a, .admin-nav > li.active > a { color: #000; background: rgba(0,0,0,.07); border-bottom-color: #333; } .admin-nav > li:hover > a .caret { transform: rotate(180deg); } /* ── Standard dropdown ─────────────────────────────────────── */ .admin-nav .dropdown { position: absolute; top: 100%; left: 0; background: #374151; border-radius: 0 0 10px 10px; min-width: 220px; padding: 8px 0; box-shadow: 0 12px 32px rgba(0,0,0,.35); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s, transform .2s, visibility .2s; list-style: none; margin: 0; } .admin-nav > li:hover > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .admin-nav .dropdown li a { display: flex; align-items: center; gap: 10px; padding: 9px 18px; color: #c0c3d4; text-decoration: none; font-size: 13px; font-weight: 400; transition: background .15s, color .15s; white-space: nowrap; } .admin-nav .dropdown li a i { width: 16px; text-align: center; font-size: 13px; opacity: .55; } .admin-nav .dropdown li a:hover { background: rgba(147,197,253,.15); color: #fff; } .admin-nav .dropdown li a:hover i { opacity: 1; color: #93c5fd; } .admin-nav .dropdown .divider { height: 1px; background: rgba(255,255,255,.07); margin: 6px 14px; } /* ── Mega-menu (Settings & Plugins) ────────────────────────── */ .admin-nav .mega { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-4px); background: #374151; border-radius: 0 0 12px 12px; padding: 20px 24px 16px; min-width: 480px; box-shadow: 0 12px 32px rgba(0,0,0,.35); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; } .admin-nav > li:hover > .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .mega .mega-group { margin-bottom: 10px; } .mega .mega-group-title { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #93c5fd; padding: 0 10px 6px; margin-bottom: 2px; } .mega ul { list-style: none; margin: 0; padding: 0; } .mega ul li a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: #c0c3d4; text-decoration: none; font-size: 13px; font-weight: 400; transition: background .15s, color .15s; white-space: nowrap; } .mega ul li a i { width: 16px; text-align: center; font-size: 13px; opacity: .55; } .mega ul li a:hover { background: rgba(147,197,253,.12); color: #fff; } .mega ul li a:hover i { opacity: 1; color: #93c5fd; } .mega ul li a .badge-dep { font-size: 9px; font-weight: 700; text-transform: uppercase; background: #ff6b6b; color: #fff; padding: 1px 5px; border-radius: 3px; margin-left: auto; letter-spacing: .5px; } /* 3-col mega for Plugins */ .mega.mega-wide { min-width: 600px; grid-template-columns: 1fr 1fr 1fr; } /* ── Logout button (pinned to the far right) ───────────────── */ .admin-nav > li.nav-logout { margin-left: auto; } .admin-nav > li.nav-logout > a { color: #c53030; } .admin-nav > li.nav-logout:hover > a { color: #c53030; background: rgba(197,48,48,.08); border-bottom-color: #c53030 !important; } /* ── Hamburger (mobile) ────────────────────────────────────── */ .admin-topbar .hamburger { display: none; background: none; border: none; color: #555; font-size: 22px; cursor: pointer; padding: 8px; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); } .admin-topbar .hamburger:hover { color: #000; } /* ── Mobile quick links (Products / Purchases shortcuts) ───── Minimal tab-style links, no pill background or border. */ .admin-topbar .admin-quicklinks { display: none; } .admin-topbar .admin-quicklink { display: inline-flex; align-items: center; gap: 7px; padding: 10px 4px; font-size: 15px; font-weight: 600; color: #374151; text-decoration: none; background: none; border: none; border-bottom: 2px solid transparent; line-height: 1; white-space: nowrap; transition: color .15s, border-color .15s; } .admin-topbar .admin-quicklink i { font-size: 15px; opacity: .75; } .admin-topbar .admin-quicklink:hover, .admin-topbar .admin-quicklink:focus { color: #111; text-decoration: none; } .admin-topbar .admin-quicklink:hover i, .admin-topbar .admin-quicklink:focus i { opacity: 1; } .admin-topbar .admin-quicklink.active { color: #111; border-bottom-color: #374151; } .admin-topbar .admin-quicklink.active i { opacity: 1; } /* ── Admin mobile drawer ───────────────────────────────────── */ .admin-mobile-drawer { display: none; position: fixed; inset: 0; z-index: 9999; } .admin-mobile-drawer.open { display: flex; } .admin-mobile-drawer .mobile-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); } .admin-mobile-drawer .mobile-panel { position: relative; width: 300px; max-width: 85vw; background: #4b5563; overflow-y: auto; padding: 20px 0; z-index: 1; animation: adminSlideIn .25s ease-out; } @keyframes adminSlideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } .admin-mobile-drawer .mobile-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: #b0b3c5; font-size: 20px; cursor: pointer; } .admin-mobile-drawer .mobile-close:hover { color: #fff; } .admin-mobile-drawer .mob-logo { padding: 0 20px 16px; font-weight: 700; font-size: 15px; color: #fff; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 8px; } .admin-mobile-drawer .mob-logo i { color: #93c5fd; } .admin-mobile-drawer .mob-section { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); } .admin-mobile-drawer .mob-title { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #bfdbfe; padding: 8px 16px 8px 14px; margin-top: 4px; border-left: 3px solid #93c5fd; } .admin-mobile-drawer .mob-subtitle { font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: #e2e8f0; padding: 10px 16px 6px 14px; margin-top: 6px; border-left: 2px solid rgba(148,163,184,0.55); } .admin-mobile-drawer .mob-link { display: flex; align-items: center; gap: 10px; padding: 10px 20px; color: #c0c3d4; text-decoration: none; font-size: 14px; transition: background .15s, color .15s; } .admin-mobile-drawer .mob-link:hover { background: rgba(147,197,253,.12); color: #fff; } .admin-mobile-drawer .mob-link i { width: 18px; text-align: center; font-size: 14px; opacity: .5; } .admin-mobile-drawer .mob-link:hover i { opacity: 1; color: #93c5fd; } .admin-mobile-drawer .mob-link.logout { color: #ff6b6b; opacity: .7; } .admin-mobile-drawer .mob-link.logout:hover { opacity: 1; } /* Active page: highlighted with a left accent bar, brighter text and a tinted background so the current section stands out in the dark drawer. */ .admin-mobile-drawer .mob-link.active { background: rgba(147,197,253,.16); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 #93c5fd; } .admin-mobile-drawer .mob-link.active i { opacity: 1; color: #93c5fd; } /* ── Admin nav responsive ──────────────────────────────────── */ @media (max-width: 1024px) { .admin-nav { display: none; } .admin-topbar .hamburger { display: block; } /* Break out of .wrap container to span full viewport width */ .admin-topbar { width: 100vw; margin-left: calc(-50vw + 50%); padding: 0 12px; /* Reserve room on the right so quick links never collide with the absolutely-positioned hamburger button (~52px wide). */ padding-right: 56px; box-sizing: border-box; gap: 8px; } /* Quick links live left-of-hamburger */ .admin-topbar .admin-quicklinks { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; /* Firefox */ } .admin-topbar .admin-quicklinks::-webkit-scrollbar { display: none; } } @media (max-width: 480px) { /* On very narrow phones, tighten spacing but keep text readable */ .admin-topbar .admin-quicklink { padding: 9px 2px; font-size: 14px; gap: 6px; } .admin-topbar .admin-quicklink i { font-size: 14px; } .admin-topbar { padding: 0 10px; padding-right: 50px; gap: 10px; } } /* ── Admin stat value / label (generic) ─────────────────── */ .admin-stat-value { display: block; font-size: 1.8rem; font-weight: 700; color: var(--accent-colour, #6366f1); } .admin-stat-label { display: block; font-size: 0.85rem; color: #6b7280; margin-top: 4px; } /* ── Categories admin page ──────────────────────────────── */ .cat-stats-row { grid-template-columns: repeat(4, 1fr); } /* Create category section */ .cat-create-toggle-wrap { margin-bottom: 12px; } .cat-create-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 16px; } .cat-create-grid .field.checkbox { grid-column: 1 / -1; } /* Toolbar: search + sort */ .cat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .cat-toolbar-left { flex: 1; min-width: 200px; max-width: 360px; } .cat-search-input { width: 100%; padding: 9px 14px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.9rem; transition: border-color 0.2s; box-sizing: border-box; } .cat-search-input:focus { border-color: var(--accent-colour, #6366f1); outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); } .cat-toolbar-right { display: flex; gap: 8px; } .cat-sort-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; padding: 6px 12px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: #475569; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .cat-sort-btn:hover { background: #f1f5f9; border-color: var(--accent-colour, #6366f1); color: var(--accent-colour, #6366f1); } /* Sync errors bulk bar */ .syncerr-bulk-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin: 0 0 12px; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 8px; } .syncerr-bulk-count { color: #6b7280; font-size: 0.85rem; font-weight: 500; } .syncerr-table { table-layout: auto; } .syncerr-table .syncerr-checkcol { width: 36px; text-align: center; padding-left: 10px; padding-right: 4px; } .syncerr-table input[type="checkbox"] { cursor: pointer; width: 16px; height: 16px; margin: 0; vertical-align: middle; } .syncerr-table .syncerr-msg { overflow-wrap: anywhere; word-break: break-word; } #syncErrorsResolveBtn:disabled { opacity: 0.55; cursor: not-allowed; } /* Long error strings shouldn't blow out the page width */ .admin-section, .admin-section > p { overflow-wrap: anywhere; word-break: break-word; } /* ── Sync errors responsive: tablet & smaller ─────────────────── */ @media (max-width: 768px) { /* Bulk bar: stack vertically, full-width button */ .syncerr-bulk-bar { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; } .syncerr-bulk-bar #syncErrorsResolveBtn { width: 100%; justify-content: center; } .syncerr-bulk-count { text-align: center; } /* Table → cards: hide thead, stack rows as cards */ .syncerr-table { display: block; border: none; background: transparent; } .syncerr-table thead { /* Visually hide but keep accessible to screen readers */ position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .syncerr-table tbody { display: block; } .syncerr-table tbody tr { display: grid; grid-template-columns: 28px 1fr; row-gap: 6px; column-gap: 10px; align-items: start; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); } .syncerr-table tbody td { display: block; padding: 0; border: none; font-size: 0.9rem; min-width: 0; } /* Checkbox sits in the left grid column, spanning all rows */ .syncerr-table tbody td.syncerr-checkcol { grid-column: 1; grid-row: 1 / span 4; width: auto; padding: 4px 0 0; text-align: left; } /* All data cells flow into the right column with their label */ .syncerr-table tbody td:not(.syncerr-checkcol) { grid-column: 2; } .syncerr-table tbody td:not(.syncerr-checkcol)::before { content: attr(data-label) ":"; display: inline-block; min-width: 70px; font-weight: 600; color: #6b7280; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 6px; } /* Error message gets full width, label on its own line for readability */ .syncerr-table tbody td.syncerr-msg { grid-column: 1 / -1; padding-top: 4px; border-top: 1px solid #f1f5f9; margin-top: 4px; } .syncerr-table tbody td.syncerr-msg::before { display: block; margin-bottom: 2px; } /* Empty-state cell */ .syncerr-table tbody td.empty-table { grid-column: 1 / -1; text-align: center; padding: 20px; color: #6b7280; } .syncerr-table tbody td.empty-table::before { content: none; } } /* Bulk actions bar */ .cat-bulk-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 8px 8px 0 0; margin-bottom: 0; } .cat-bulk-left { display: flex; align-items: center; gap: 8px; } .cat-bulk-label { font-size: 0.85rem; color: #64748b; cursor: pointer; } .cat-selected-count { font-size: 0.82rem; font-weight: 600; color: var(--accent-colour, #6366f1); } .cat-bulk-right { display: flex; align-items: center; gap: 8px; } .cat-bulk-select { padding: 6px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.85rem; background: #fff; } .cat-bulk-right .btn { padding: 6px 14px; font-size: 0.85rem; line-height: 1.5; border-radius: 6px; } /* Table tweaks */ .cat-admin-table { border-radius: 0 0 8px 8px; } .cat-col-name { width: 40%; } .cat-col-count { width: 12%; text-align: center; } .cat-col-visible { width: 12%; } .cat-col-actions { width: 20%; } .cat-col-check { width: 5%; text-align: center; } .cat-count-cell { text-align: center; font-variant-numeric: tabular-nums; } .cat-actions-cell { display: flex; gap: 12px; } .cat-action-link { color: #64748b; transition: color 0.15s; font-size: 0.9rem; } .cat-action-link:hover { color: var(--accent-colour, #6366f1); } .cat-action-delete:hover { color: #ef4444; } /* Expand toggle for subcategories */ .cat-expand-toggle { cursor: pointer; color: var(--accent-colour, #6366f1); font-weight: 600; font-size: 0.85rem; user-select: none; } .cat-expand-toggle:hover { text-decoration: underline; } /* Status dots */ .cat-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .cat-status-visible { background: #22c55e; } .cat-status-hidden { background: #d1d5db; } /* Badges */ .cat-badge { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 10px; vertical-align: middle; margin-left: 6px; text-transform: uppercase; letter-spacing: 0.03em; } .cat-badge-parent { background: #e0e7ff; color: #4338ca; } .cat-badge-empty { background: #fef3c7; color: #92400e; } /* Parent row styling */ .cat-row-parent td { background: #f8fafc; font-weight: 600; } /* Info note at bottom */ .cat-info-section { background: transparent; border: none; padding: 8px 0; } .cat-info-note { font-size: 0.85rem; color: #64748b; } .cat-info-note i { color: var(--accent-colour, #6366f1); margin-right: 4px; } .cat-info-note code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: 0.82rem; } /* sr-only utility */ .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; } /* ── Categories responsive: tablet ────────��────────────── */ @media (max-width: 768px) { /* Stats: 2-up grid */ .cat-stats-row { grid-template-columns: repeat(2, 1fr); gap: 10px; } .admin-stats-row { grid-template-columns: 1fr; gap: 12px; } .admin-stat-card { padding: 14px 10px; } .admin-stat-card h4 { overflow-wrap: anywhere; word-break: break-word; } .admin-stat-value { font-size: 1.4rem; } /* Create form: single column */ .cat-create-grid { grid-template-columns: 1fr; } /* Toolbar stacks */ .cat-toolbar { flex-direction: column; align-items: stretch; } .cat-toolbar-left { max-width: none; min-width: 0; } .cat-toolbar-right { justify-content: flex-start; } /* Bulk bar stacks */ .cat-bulk-bar { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; border-radius: 8px; } .cat-bulk-right { justify-content: flex-start; } /* Admin sections: tighter padding */ .cat-table-section { padding: 16px 12px; } .cat-create-section { padding: 16px 12px; } /* ── Table → card layout ─────────────────────────────── */ .cat-admin-table, .cat-admin-table thead, .cat-admin-table tbody, .cat-admin-table tr, .cat-admin-table td, .cat-admin-table th { display: block; width: 100%; } /* Hide the header row — labels go inline on cards */ .cat-admin-table thead { display: none; } /* Remove fixed column widths */ .cat-col-name, .cat-col-count, .cat-col-visible, .cat-col-actions, .cat-col-check { width: auto; } /* Each row becomes a card */ .cat-admin-table tbody tr { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 14px 10px; margin-bottom: 10px; position: relative; align-items: center; } .cat-admin-table tbody tr:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.06); } /* td reset */ .cat-admin-table tbody td { border-bottom: none; padding: 0; font-size: 0.88rem; } /* -- Cell 1: Category name — spans full width, first row */ .cat-admin-table tbody td:nth-child(1) { grid-column: 1 / -1; font-weight: 600; font-size: 0.95rem; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #f1f5f9; word-break: break-word; } /* -- Cell 2: Item count — second row left */ .cat-admin-table tbody td:nth-child(2) { grid-column: 1; grid-row: 2; text-align: left; } .cat-admin-table tbody td:nth-child(2)::before { content: "Items: "; color: #94a3b8; font-weight: 400; font-size: 0.82rem; } .cat-count-cell { text-align: left; } /* -- Cell 3: Visible — second row, after count */ .cat-admin-table tbody td:nth-child(3) { grid-column: 1; grid-row: 3; padding-top: 2px; } .cat-admin-table tbody td:nth-child(3)::before { content: "Visible: "; color: #94a3b8; font-weight: 400; font-size: 0.82rem; } /* -- Cell 4: Action icons — right side, rows 2-3 */ .cat-admin-table tbody td:nth-child(4) { grid-column: 2; grid-row: 2 / 4; justify-self: end; align-self: center; } .cat-actions-cell { flex-direction: row; gap: 14px; } .cat-action-link { font-size: 1.05rem; } /* -- Cell 5: Checkbox — top-right corner of card */ .cat-admin-table tbody td:nth-child(5) { position: absolute; top: 14px; right: 14px; } .cat-admin-table tbody td:nth-child(5) input[type="checkbox"] { width: 18px; height: 18px; } /* Parent row card tweaks */ .cat-row-parent { background: #f8fafc; border-color: #d1d5db; } .cat-row-parent td { background: transparent; } /* Fix border-radius on table (card mode removes the table shape) */ .cat-admin-table { border-radius: 0; background: transparent; border: none; box-shadow: none; } /* Table container needs no overflow in card mode */ .cat-table-section .table-container { overflow: visible; } /* Badges smaller on mobile */ .cat-badge { font-size: 0.65rem; padding: 1px 6px; } } /* ── Categories responsive: narrow phone ───────────────── */ @media (max-width: 480px) { /* Stats: single column */ .cat-stats-row { grid-template-columns: 1fr; gap: 8px; } .admin-stat-card { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px; text-align: left; } .admin-stat-value { font-size: 1.2rem; margin: 0; } .admin-stat-label { margin-top: 2px; font-size: 0.75rem; } /* reconstructed 2026-06-04; original property text was lost during an append; verify against design */ } /* --- 2026-06-04 swatch hex rules (extends existing .tshirtinfoswatch palette) --- */ .tshirtinfoswatch > .acidgreen { background-color: #8cbe39; border: solid 3px #8cbe39; } /* Acid Green */ .tshirtinfoswatch > .aloe { background-color: #83aa62; border: solid 3px #83aa62; } /* Aloe */ .tshirtinfoswatch > .alpinegreen { background-color: #414b45; border: solid 3px #414b45; } /* Alpine Green */ .tshirtinfoswatch > .antiquecherryred { background-color: #920f26; border: solid 3px #920f26; } /* Antique Cherry Red */ .tshirtinfoswatch > .antiquegold { background-color: #da9020; border: solid 3px #da9020; } /* Antique Gold */ .tshirtinfoswatch > .antiqueheliconia { background-color: #bc4381; border: solid 3px #bc4381; } /* Antique Heliconia */ .tshirtinfoswatch > .antiqueirishgreen { background-color: #029b5a; border: solid 3px #029b5a; } /* Antique Irish Green */ .tshirtinfoswatch > .antiquejadedome { background-color: #01878c; border: solid 3px #01878c; } /* Antique Jade Dome */ .tshirtinfoswatch > .antiqueorange { background-color: #d14f2b; border: solid 3px #d14f2b; } /* Antique Orange */ .tshirtinfoswatch > .antiqueroyal { background-color: #1c55ac; border: solid 3px #1c55ac; } /* Antique Royal */ .tshirtinfoswatch > .antiquesapphire { background-color: #016d8f; border: solid 3px #016d8f; } /* Antique Sapphire */ .tshirtinfoswatch > .applegreen { background-color: #a3d19c; border: solid 3px #a3d19c; } /* Apple Green */ .tshirtinfoswatch > .aqua { background-color: #2a9bc5; border: solid 3px #2a9bc5; } /* Aqua */ .tshirtinfoswatch > .aquatic { background-color: #80a8a4; border: solid 3px #80a8a4; } /* Aquatic */ .tshirtinfoswatch > .aquatriblend { background-color: #51b0c2; border: solid 3px #51b0c2; } /* Aqua Triblend */ .tshirtinfoswatch > .army { background-color: #2c3820; border: solid 3px #2c3820; } /* Army */ .tshirtinfoswatch > .armyheather { background-color: #5f6045; border: solid 3px #5f6045; } /* Army Heather */ .tshirtinfoswatch > .ash { background-color: #9ca3af; border: solid 3px #9ca3af; } /* Ash */ .tshirtinfoswatch > .asphalt { background-color: #4e4e4e; border: solid 3px #4e4e4e; } /* Asphalt */ .tshirtinfoswatch > .athleticgrey { background-color: #cac9ce; border: solid 3px #cac9ce; } /* Athletic Grey */ .tshirtinfoswatch > .athleticgreytriblend { background-color: #b6b6b6; border: solid 3px #b6b6b6; } /* Athletic Grey Triblend */ .tshirtinfoswatch > .athleticheather { background-color: #b7b7b9; border: solid 3px #b7b7b9; } /* Athletic Heather */ .tshirtinfoswatch > .atlantic { background-color: #102f32; border: solid 3px #102f32; } /* Atlantic */ .tshirtinfoswatch > .auroraivy { background-color: #0e474a; border: solid 3px #0e474a; } /* Aurora Ivy */ .tshirtinfoswatch > .autumn { background-color: #bb572c; border: solid 3px #bb572c; } /* Autumn */ .tshirtinfoswatch > .azalea { background-color: #d9479c; border: solid 3px #d9479c; } /* Azalea */ .tshirtinfoswatch > .babyblue { background-color: #acc2da; border: solid 3px #acc2da; } /* Baby Blue */ .tshirtinfoswatch > .ballerina { background-color: #f6e0e7; border: solid 3px #f6e0e7; } /* Ballerina */ .tshirtinfoswatch > .balsamgreen { background-color: #8eab97; border: solid 3px #8eab97; } /* Balsam Green */ .tshirtinfoswatch > .banana { background-color: #e9d295; border: solid 3px #e9d295; } /* Banana */ .tshirtinfoswatch > .bananacream { background-color: #fef3c7; border: solid 3px #fef3c7; } /* Banana Cream */ .tshirtinfoswatch > .bay { background-color: #9aa49b; border: solid 3px #9aa49b; } /* Bay */ .tshirtinfoswatch > .berry { background-color: #e94778; border: solid 3px #e94778; } /* Berry */ .tshirtinfoswatch > .berrytriblend { background-color: #d03e66; border: solid 3px #d03e66; } /* Berry Triblend */ .tshirtinfoswatch > .black { background-color: #000000; border: solid 3px #000000; } /* Black */ .tshirtinfoswatch > .blackberry { background-color: #3c324a; border: solid 3px #3c324a; } /* Blackberry */ .tshirtinfoswatch > .blackblack { background-color: #24201d; border: solid 3px #24201d; } /* Black/Black */ .tshirtinfoswatch > .blackbrown { background-color: #25211e; border: solid 3px #25211e; } /* Black/Brown */ .tshirtinfoswatch > .blackcamo { background-color: #3f3c3e; border: solid 3px #3f3c3e; } /* Black Camo */ .tshirtinfoswatch > .blackcarbon { background-color: #171717; border: solid 3px #171717; } /* Black/Carbon */ .tshirtinfoswatch > .blackcharcoal { background-color: #111111; border: solid 3px #111111; } /* Black/Charcoal */ .tshirtinfoswatch > .blackdenim { background-color: #505050; border: solid 3px #505050; } /* Black Denim */ .tshirtinfoswatch > .blackgold { background-color: #111111; border: solid 3px #111111; } /* Black/Gold */ .tshirtinfoswatch > .blackheather { background-color: #141414; border: solid 3px #141414; } /* Black Heather */ .tshirtinfoswatch > .blackheathertriblend { background-color: #111112; border: solid 3px #111112; } /* Black Heather Triblend */ .tshirtinfoswatch > .blackmetallicsilver { background-color: #333333; border: solid 3px #333333; } /* Black/Metallic Silver */ .tshirtinfoswatch > .blackmtgold { background-color: #25262b; border: solid 3px #25262b; } /* Black/MT Gold */ .tshirtinfoswatch > .blackout { background-color: #312f31; border: solid 3px #312f31; } /* Blackout */ .tshirtinfoswatch > .blackringer { background: linear-gradient(135deg, #f4f4f7 50%, #000000 50%); border: solid 3px #000000; } /* Black Ringer */ .tshirtinfoswatch > .blacksteel { background-color: #2a2a2a; border: solid 3px #2a2a2a; } /* Black/Steel */ .tshirtinfoswatch > .blackswirl { background-color: #605f61; border: solid 3px #605f61; } /* Black Swirl */ .tshirtinfoswatch > .blackvegasgold { background-color: #111111; border: solid 3px #111111; } /* Black/Vegas Gold */ .tshirtinfoswatch > .blackwhite { background: linear-gradient(135deg, #15100f 50%, #ffffff 50%); border: solid 3px #ffffff; } /* Black/White */ .tshirtinfoswatch > .blackwhiteblack { background-color: #dedde3; border: solid 3px #dedde3; } /* Black/White/Black */ .tshirtinfoswatch > .blackwhiteheathergrey { background-color: #111111; border: solid 3px #111111; } /* Black/White/Heather Grey */ .tshirtinfoswatch > .blackwhitered { background-color: #111111; border: solid 3px #111111; } /* Black/White/Red */ .tshirtinfoswatch > .blossom { background-color: #eec1d5; border: solid 3px #eec1d5; } /* Blossom */ .tshirtinfoswatch > .blueaqua { background-color: #a5d4e4; border: solid 3px #a5d4e4; } /* Blue Aqua */ .tshirtinfoswatch > .bluedusk { background-color: #363f55; border: solid 3px #363f55; } /* Blue Dusk */ .tshirtinfoswatch > .bluejean { background-color: #6e7480; border: solid 3px #6e7480; } /* Blue Jean */ .tshirtinfoswatch > .bluelagoon { background-color: #3fa6cd; border: solid 3px #3fa6cd; } /* Blue Lagoon */ .tshirtinfoswatch > .bluespruce { background-color: #425050; border: solid 3px #425050; } /* Blue Spruce */ .tshirtinfoswatch > .bluestorm { background-color: #828d8f; border: solid 3px #828d8f; } /* Blue Storm */ .tshirtinfoswatch > .bluestormtriblend { background-color: #80898b; border: solid 3px #80898b; } /* Blue Storm Triblend */ .tshirtinfoswatch > .bluetriblend { background-color: #7d99c9; border: solid 3px #7d99c9; } /* Blue Triblend */ .tshirtinfoswatch > .bodyblush { background-color: #efe2e0; border: solid 3px #efe2e0; } /* Body Blush */ .tshirtinfoswatch > .bondiblue { background-color: #15adc3; border: solid 3px #15adc3; } /* Bondi Blue */ .tshirtinfoswatch > .bone { background-color: #f2efea; border: solid 3px #f2efea; } /* Bone */ .tshirtinfoswatch > .bottle { background-color: #1f5046; border: solid 3px #1f5046; } /* Bottle */ .tshirtinfoswatch > .brick { background-color: #964c50; border: solid 3px #964c50; } /* Brick */ .tshirtinfoswatch > .brightnavy { background-color: #20314a; border: solid 3px #20314a; } /* Bright Navy */ .tshirtinfoswatch > .brightred { background-color: #cb0327; border: solid 3px #cb0327; } /* Bright Red */ .tshirtinfoswatch > .brightroyal { background-color: #074dad; border: solid 3px #074dad; } /* Bright Royal */ .tshirtinfoswatch > .brown { background-color: #92400e; border: solid 3px #92400e; } /* Brown */ .tshirtinfoswatch > .brownkhaki { background-color: #5c493e; border: solid 3px #5c493e; } /* Brown/Khaki */ .tshirtinfoswatch > .brownsavana { background-color: #a98e80; border: solid 3px #a98e80; } /* Brown Savana */ .tshirtinfoswatch > .brownwhite { background-color: #574642; border: solid 3px #574642; } /* Brown/White */ .tshirtinfoswatch > .burgundy { background-color: #7f1d1d; border: solid 3px #7f1d1d; } /* Burgundy */ .tshirtinfoswatch > .burntorange { background-color: #ee852c; border: solid 3px #ee852c; } /* Burnt Orange */ .tshirtinfoswatch > .butter { background-color: #f6e0a1; border: solid 3px #f6e0a1; } /* Butter */ .tshirtinfoswatch > .campusgold { background-color: #f6c048; border: solid 3px #f6c048; } /* Campus Gold */ .tshirtinfoswatch > .campusorange { background-color: #f6562e; border: solid 3px #f6562e; } /* Campus Orange */ .tshirtinfoswatch > .campuspurple { background-color: #4c2c6b; border: solid 3px #4c2c6b; } /* Campus Purple */ .tshirtinfoswatch > .cantaloupe { background-color: #f5a874; border: solid 3px #f5a874; } /* Cantaloupe */ .tshirtinfoswatch > .canvasred { background-color: #b81828; border: solid 3px #b81828; } /* Canvas Red */ .tshirtinfoswatch > .caramel { background-color: #a8724c; border: solid 3px #a8724c; } /* Caramel */ .tshirtinfoswatch > .caramelblack { background-color: #ae7448; border: solid 3px #ae7448; } /* Caramel/Black */ .tshirtinfoswatch > .carbon { background-color: #4b464c; border: solid 3px #4b464c; } /* Carbon */ .tshirtinfoswatch > .carbonblack { background-color: #57525b; border: solid 3px #57525b; } /* Carbon/Black */ .tshirtinfoswatch > .carbonheather { background-color: #595d60; border: solid 3px #595d60; } /* Carbon Heather */ .tshirtinfoswatch > .cardinal { background-color: #6c1d23; border: solid 3px #6c1d23; } /* Cardinal */ .tshirtinfoswatch > .cardinalred { background-color: #dc2626; border: solid 3px #dc2626; } /* Cardinal Red */ .tshirtinfoswatch > .cardinaltriblend { background-color: #6c0922; border: solid 3px #6c0922; } /* Cardinal Triblend */ .tshirtinfoswatch > .carmelblack { background-color: #713f12; border: solid 3px #713f12; } /* Carmel/Black */ .tshirtinfoswatch > .carolinablue { background-color: #60a5fa; border: solid 3px #60a5fa; } /* Carolina Blue */ .tshirtinfoswatch > .castlerockheatherblack { background-color: #6f7074; border: solid 3px #6f7074; } /* Castlerock Heather/Black */ .tshirtinfoswatch > .castlerockstealthgrey { background-color: #4f5054; border: solid 3px #4f5054; } /* Castlerock/Stealth Grey */ .tshirtinfoswatch > .castlerockwhite { background-color: #585657; border: solid 3px #585657; } /* Castlerock/White */ .tshirtinfoswatch > .cement { background-color: #b3afae; border: solid 3px #b3afae; } /* Cement */ .tshirtinfoswatch > .chalkymint { background-color: #9fdcd9; border: solid 3px #9fdcd9; } /* Chalky Mint */ .tshirtinfoswatch > .chambray { background-color: #d0dde5; border: solid 3px #d0dde5; } /* Chambray */ .tshirtinfoswatch > .charcoal { background-color: #6b7280; border: solid 3px #6b7280; } /* Charcoal */ .tshirtinfoswatch > .charcoalblack { background-color: #5e5b5c; border: solid 3px #5e5b5c; } /* Charcoal/Black */ .tshirtinfoswatch > .charcoalblacktriblend { background-color: #343438; border: solid 3px #343438; } /* Charcoal Black Triblend */ .tshirtinfoswatch > .charcoalcolumbiablue { background-color: #4e4a49; border: solid 3px #4e4a49; } /* Charcoal/Columbia Blue */ .tshirtinfoswatch > .charcoalgrey { background-color: #3c444a; border: solid 3px #3c444a; } /* Charcoal Grey */ .tshirtinfoswatch > .charcoalheather { background-color: #434246; border: solid 3px #434246; } /* Charcoal Heather */ .tshirtinfoswatch > .charcoalnavy { background-color: #514d4d; border: solid 3px #514d4d; } /* Charcoal/Navy */ .tshirtinfoswatch > .charcoalneonblue { background-color: #4e4a49; border: solid 3px #4e4a49; } /* Charcoal/Neon Blue */ .tshirtinfoswatch > .charcoalneongreen { background-color: #534b4b; border: solid 3px #534b4b; } /* Charcoal/Neon Green */ .tshirtinfoswatch > .charcoalneonorange { background-color: #565255; border: solid 3px #565255; } /* Charcoal/Neon Orange */ .tshirtinfoswatch > .charcoalneonpink { background-color: #4e4a49; border: solid 3px #4e4a49; } /* Charcoal/Neon Pink */ .tshirtinfoswatch > .charcoalneonyellow { background-color: #4e4a49; border: solid 3px #4e4a49; } /* Charcoal/Neon Yellow */ .tshirtinfoswatch > .charcoalorange { background-color: #4e4a49; border: solid 3px #4e4a49; } /* Charcoal/Orange */ .tshirtinfoswatch > .charcoalred { background-color: #4e4a49; border: solid 3px #4e4a49; } /* Charcoal/Red */ .tshirtinfoswatch > .charcoalroyal { background-color: #4e4a49; border: solid 3px #4e4a49; } /* Charcoal/Royal */ .tshirtinfoswatch > .charcoalwhite { background-color: #504b4f; border: solid 3px #504b4f; } /* Charcoal/White */ .tshirtinfoswatch > .charitypink { background-color: #fb80a4; border: solid 3px #fb80a4; } /* Charity Pink */ .tshirtinfoswatch > .charitypinktriblend { background-color: #ef799c; border: solid 3px #ef799c; } /* Charity Pink Triblend */ .tshirtinfoswatch > .cherryred { background-color: #b91c1c; border: solid 3px #b91c1c; } /* Cherry Red */ .tshirtinfoswatch > .chinablue { background-color: #425073; border: solid 3px #425073; } /* China Blue */ .tshirtinfoswatch > .chocolate { background-color: #92400e; border: solid 3px #92400e; } /* Chocolate */ .tshirtinfoswatch > .citrus { background-color: #fec056; border: solid 3px #fec056; } /* Citrus */ .tshirtinfoswatch > .classicnavy { background-color: #252a3e; border: solid 3px #252a3e; } /* Classic Navy */ .tshirtinfoswatch > .classicnavyheather { background-color: #505269; border: solid 3px #505269; } /* Classic Navy Heather */ .tshirtinfoswatch > .classicnavyheathercarbo { background-color: #313155; border: solid 3px #313155; } /* Classic Navy Heather/Carbo */ .tshirtinfoswatch > .collegiatenavywhite { background-color: #212f4b; border: solid 3px #212f4b; } /* Collegiate Navy/White */ .tshirtinfoswatch > .collegiatered { background-color: #d52932; border: solid 3px #d52932; } /* Collegiate Red */ .tshirtinfoswatch > .collegiateredblack { background-color: #dc2a35; border: solid 3px #dc2a35; } /* Collegiate Red/Black */ .tshirtinfoswatch > .collegiateroyal { background-color: #123cb2; border: solid 3px #123cb2; } /* Collegiate Royal */ .tshirtinfoswatch > .collegiateroyalgreythre { background-color: #0d4699; border: solid 3px #0d4699; } /* Collegiate Royal/Grey Thre */ .tshirtinfoswatch > .columbiablue { background-color: #2c6da7; border: solid 3px #2c6da7; } /* Columbia Blue */ .tshirtinfoswatch > .columbiabluewhite { background-color: #478cb2; border: solid 3px #478cb2; } /* Columbia Blue/White */ .tshirtinfoswatch > .coolblue { background-color: #064069; border: solid 3px #064069; } /* Cool Blue */ .tshirtinfoswatch > .coral { background-color: #f06746; border: solid 3px #f06746; } /* Coral */ .tshirtinfoswatch > .coralsilk { background-color: #fc7277; border: solid 3px #fc7277; } /* Coral Silk */ .tshirtinfoswatch > .cornsilk { background-color: #f7e68e; border: solid 3px #f7e68e; } /* Cornsilk */ .tshirtinfoswatch > .coyotebrown { background-color: #ab8761; border: solid 3px #ab8761; } /* Coyote Brown */ .tshirtinfoswatch > .coyotebrownblack { background-color: #745c41; border: solid 3px #745c41; } /* Coyote Brown/Black */ .tshirtinfoswatch > .cranberry { background-color: #771f30; border: solid 3px #771f30; } /* Cranberry */ .tshirtinfoswatch > .cream { background-color: #fef3c7; border: solid 3px #fef3c7; } /* Cream */ .tshirtinfoswatch > .crewnavy { background-color: #333a56; border: solid 3px #333a56; } /* Crew Navy */ .tshirtinfoswatch > .crimson { background-color: #ba5964; border: solid 3px #ba5964; } /* Crimson */ .tshirtinfoswatch > .crimsonred { background-color: #8c4549; border: solid 3px #8c4549; } /* Crimson Red */ .tshirtinfoswatch > .crunchberry { background-color: #e7788f; border: solid 3px #e7788f; } /* Crunchberry */ .tshirtinfoswatch > .csgreylightheatherwhit { background-color: #a2a1a6; border: solid 3px #a2a1a6; } /* CS Grey Light Heather/Whit */ .tshirtinfoswatch > .daisy { background-color: #fbbf24; border: solid 3px #fbbf24; } /* Daisy */ .tshirtinfoswatch > .darkblue { background-color: #272c4a; border: solid 3px #272c4a; } /* Dark Blue */ .tshirtinfoswatch > .darkcharcoal { background-color: #3d4248; border: solid 3px #3d4248; } /* Dark Charcoal */ .tshirtinfoswatch > .darkchocolate { background-color: #2b1810; border: solid 3px #2b1810; } /* Dark Chocolate */ .tshirtinfoswatch > .darkcrimson { background-color: #781522; border: solid 3px #781522; } /* Dark Crimson */ .tshirtinfoswatch > .darkcrimsonslatesky { background-color: #771120; border: solid 3px #771120; } /* Dark Crimson/Slate Sky */ .tshirtinfoswatch > .darkgreen { background-color: #14532d; border: solid 3px #14532d; } /* Dark Green */ .tshirtinfoswatch > .darkgreenheather { background-color: #52524a; border: solid 3px #52524a; } /* Dark Green Heather */ .tshirtinfoswatch > .darkgreenwhite { background-color: #173731; border: solid 3px #173731; } /* Dark Green/white */ .tshirtinfoswatch > .darkgrey { background-color: #374151; border: solid 3px #374151; } /* Dark Grey */ .tshirtinfoswatch > .darkgreyheather { background-color: #3e3534; border: solid 3px #3e3534; } /* Dark Grey Heather */ .tshirtinfoswatch > .darkheather { background-color: #374151; border: solid 3px #374151; } /* Dark Heather */ .tshirtinfoswatch > .darkheathergray { background-color: #2a2d33; border: solid 3px #2a2d33; } /* Dark Heather Gray */ .tshirtinfoswatch > .darkheathergrey { background-color: #2a2d33; border: solid 3px #2a2d33; } /* Dark Heather Grey */ .tshirtinfoswatch > .darklavender { background-color: #c6b5d7; border: solid 3px #c6b5d7; } /* Dark Lavender */ .tshirtinfoswatch > .darklavendertriblend { background-color: #c2b0cb; border: solid 3px #c2b0cb; } /* Dark Lavender Triblend */ .tshirtinfoswatch > .darkmaroon { background-color: #60343b; border: solid 3px #60343b; } /* Dark Maroon */ .tshirtinfoswatch > .darkmocha { background-color: #412d24; border: solid 3px #412d24; } /* Dark Mocha */ .tshirtinfoswatch > .darkmyrtle { background-color: #133f34; border: solid 3px #133f34; } /* Dark Myrtle */ .tshirtinfoswatch > .darkmyrtleslatesky { background-color: #0e3c31; border: solid 3px #0e3c31; } /* Dark Myrtle/Slate Sky */ .tshirtinfoswatch > .darknavy { background-color: #383b4d; border: solid 3px #383b4d; } /* Dark Navy */ .tshirtinfoswatch > .deepheather { background-color: #717670; border: solid 3px #717670; } /* Deep Heather */ .tshirtinfoswatch > .deepnavy { background-color: #1f2e45; border: solid 3px #1f2e45; } /* Deep Navy */ .tshirtinfoswatch > .deepnavywhiteglow { background-color: #222836; border: solid 3px #222836; } /* Deep Navy/White Glow */ .tshirtinfoswatch > .deepred { background-color: #e4102b; border: solid 3px #e4102b; } /* Deep Red */ .tshirtinfoswatch > .deeproyal { background-color: #1e4086; border: solid 3px #1e4086; } /* Deep Royal */ .tshirtinfoswatch > .deepteal { background-color: #234350; border: solid 3px #234350; } /* Deep Teal */ .tshirtinfoswatch > .denim { background-color: #515765; border: solid 3px #515765; } /* Denim */ .tshirtinfoswatch > .denimblue { background-color: #6485a0; border: solid 3px #6485a0; } /* Denim Blue */ .tshirtinfoswatch > .divingblue { background-color: #73bfcf; border: solid 3px #73bfcf; } /* Diving Blue */ .tshirtinfoswatch > .duckbrown { background-color: #885828; border: solid 3px #885828; } /* Duck Brown */ .tshirtinfoswatch > .dust { background-color: #d2ccc2; border: solid 3px #d2ccc2; } /* Dust */ .tshirtinfoswatch > .dustyblue { background-color: #adc3b7; border: solid 3px #adc3b7; } /* Dusty Blue */ .tshirtinfoswatch > .dustybluetriblend { background-color: #adc2bb; border: solid 3px #adc2bb; } /* Dusty Blue Triblend */ .tshirtinfoswatch > .dustyrose { background-color: #eebeaa; border: solid 3px #eebeaa; } /* Dusty Rose */ .tshirtinfoswatch > .electricblue { background-color: #368fb8; border: solid 3px #368fb8; } /* Electric Blue */ .tshirtinfoswatch > .electricgreen { background-color: #b6f149; border: solid 3px #b6f149; } /* Electric Green */ .tshirtinfoswatch > .emerald { background-color: #558786; border: solid 3px #558786; } /* Emerald */ .tshirtinfoswatch > .emeraldgreen { background-color: #015954; border: solid 3px #015954; } /* Emerald Green */ .tshirtinfoswatch > .emeraldtriblend { background-color: #0f1a1b; border: solid 3px #0f1a1b; } /* Emerald Triblend */ .tshirtinfoswatch > .espresso { background-color: #564340; border: solid 3px #564340; } /* Espresso */ .tshirtinfoswatch > .evergreen { background-color: #066e46; border: solid 3px #066e46; } /* Evergreen */ .tshirtinfoswatch > .evergreenwhite { background-color: #335d42; border: solid 3px #335d42; } /* Evergreen/White */ .tshirtinfoswatch > .festiveroyal { background-color: #133282; border: solid 3px #133282; } /* Festive Royal */ .tshirtinfoswatch > .fineblack { background-color: #232323; border: solid 3px #232323; } /* Fine Black */ .tshirtinfoswatch > .finecharcoal { background-color: #3b3b3b; border: solid 3px #3b3b3b; } /* Fine Charcoal */ .tshirtinfoswatch > .finekellygreen { background-color: #0c7344; border: solid 3px #0c7344; } /* Fine Kelly Green */ .tshirtinfoswatch > .finenavy { background-color: #1a1f32; border: solid 3px #1a1f32; } /* Fine Navy */ .tshirtinfoswatch > .finered { background-color: #bd192e; border: solid 3px #bd192e; } /* Fine Red */ .tshirtinfoswatch > .fineturquoise { background-color: #028fc9; border: solid 3px #028fc9; } /* Fine Turquoise */ .tshirtinfoswatch > .finewhite { background-color: #ededf1; border: solid 3px #ededf1; } /* Fine White */ .tshirtinfoswatch > .floblue { background-color: #708ad1; border: solid 3px #708ad1; } /* Flo Blue */ .tshirtinfoswatch > .forest { background-color: #14532d; border: solid 3px #14532d; } /* Forest */ .tshirtinfoswatch > .forestcamo { background-color: #56513f; border: solid 3px #56513f; } /* Forest Camo */ .tshirtinfoswatch > .forestcarbon { background-color: #2a3e33; border: solid 3px #2a3e33; } /* Forest/Carbon */ .tshirtinfoswatch > .forestgreen { background-color: #14532d; border: solid 3px #14532d; } /* Forest Green */ .tshirtinfoswatch > .frenchblue { background-color: #5c90c1; border: solid 3px #5c90c1; } /* French Blue */ .tshirtinfoswatch > .frenchbluemelange { background-color: #076bbd; border: solid 3px #076bbd; } /* French Blue Melange */ .tshirtinfoswatch > .fresholive { background-color: #656243; border: solid 3px #656243; } /* Fresh Olive */ .tshirtinfoswatch > .fuchsia { background-color: #ec4899; border: solid 3px #ec4899; } /* Fuchsia */ .tshirtinfoswatch > .galapagosblue { background-color: #007787; border: solid 3px #007787; } /* Galapagos Blue */ .tshirtinfoswatch > .garnet { background-color: #62222e; border: solid 3px #62222e; } /* Garnet */ .tshirtinfoswatch > .gold { background-color: #fbbf24; border: solid 3px #fbbf24; } /* Gold */ .tshirtinfoswatch > .goldglint { background-color: #db974b; border: solid 3px #db974b; } /* Gold Glint */ .tshirtinfoswatch > .goldswirl { background-color: #f6a31c; border: solid 3px #f6a31c; } /* Gold Swirl */ .tshirtinfoswatch > .granite { background-color: #9e9fa3; border: solid 3px #9e9fa3; } /* Granite */ .tshirtinfoswatch > .graniteheather { background-color: #77767b; border: solid 3px #77767b; } /* Granite Heather */ .tshirtinfoswatch > .grape { background-color: #7a6b92; border: solid 3px #7a6b92; } /* Grape */ .tshirtinfoswatch > .graphite { background-color: #646465; border: solid 3px #646465; } /* Graphite */ .tshirtinfoswatch > .graphiteblack { background-color: #322e34; border: solid 3px #322e34; } /* Graphite Black */ .tshirtinfoswatch > .graphiteheather { background-color: #948f95; border: solid 3px #948f95; } /* Graphite Heather */ .tshirtinfoswatch > .graphitemelange { background-color: #6b6e73; border: solid 3px #6b6e73; } /* Graphite Melange */ .tshirtinfoswatch > .grassgreentriblend { background-color: #345739; border: solid 3px #345739; } /* Grass Green Triblend */ .tshirtinfoswatch > .gravel { background-color: #b1acad; border: solid 3px #b1acad; } /* Gravel */ .tshirtinfoswatch > .greencamoblack { background-color: #49432e; border: solid 3px #49432e; } /* Green Camo/Black */ .tshirtinfoswatch > .greentriblend { background-color: #70bb82; border: solid 3px #70bb82; } /* Green Triblend */ .tshirtinfoswatch > .grey { background-color: #6b7280; border: solid 3px #6b7280; } /* Grey */ .tshirtinfoswatch > .greyacidwash { background-color: #3c373b; border: solid 3px #3c373b; } /* Grey Acid Wash */ .tshirtinfoswatch > .greyblack { background: linear-gradient(135deg, #a9a9aa 50%, #000000 50%); border: solid 3px #000000; } /* Grey/Black */ .tshirtinfoswatch > .greycharcoalblack { background-color: #888687; border: solid 3px #888687; } /* Grey/Charcoal/Black */ .tshirtinfoswatch > .greyfiveblack { background-color: #69676c; border: solid 3px #69676c; } /* Grey Five/Black */ .tshirtinfoswatch > .greyheather { background-color: #c9c5c2; border: solid 3px #c9c5c2; } /* Grey Heather */ .tshirtinfoswatch > .greynavy { background: linear-gradient(135deg, #a9a9aa 50%, #1b283b 50%); border: solid 3px #1b283b; } /* Grey/Navy */ .tshirtinfoswatch > .greyred { background: linear-gradient(135deg, #a9a9aa 50%, #93172b 50%); border: solid 3px #93172b; } /* Grey/Red */ .tshirtinfoswatch > .greyroyal { background: linear-gradient(135deg, #a8a9aa 50%, #16447f 50%); border: solid 3px #16447f; } /* Grey/Royal */ .tshirtinfoswatch > .greythree { background-color: #979495; border: solid 3px #979495; } /* Grey Three */ .tshirtinfoswatch > .greytriblend { background-color: #746f70; border: solid 3px #746f70; } /* Grey Triblend */ .tshirtinfoswatch > .grigioscuro { background-color: #242424; border: solid 3px #242424; } /* Grigio Scuro */ .tshirtinfoswatch > .gunmetalheather { background-color: #85898c; border: solid 3px #85898c; } /* Gunmetal Heather */ .tshirtinfoswatch > .hazetiedye { background-color: #ecedea; border: solid 3px #ecedea; } /* Haze Tie Dye */ .tshirtinfoswatch > .heather { background-color: #9ea2a6; border: solid 3px #9ea2a6; } /* Heather */ .tshirtinfoswatch > .heatheraqua { background-color: #43a5cf; border: solid 3px #43a5cf; } /* Heather Aqua */ .tshirtinfoswatch > .heatherautumn { background-color: #c77849; border: solid 3px #c77849; } /* Heather Autumn */ .tshirtinfoswatch > .heatherberry { background-color: #db6c9e; border: solid 3px #db6c9e; } /* Heather Berry */ .tshirtinfoswatch > .heatherblack { background-color: #767984; border: solid 3px #767984; } /* Heather/Black */ .tshirtinfoswatch > .heatherblue { background-color: #97a9cc; border: solid 3px #97a9cc; } /* Heather Blue */ .tshirtinfoswatch > .heatherbluelagoon { background-color: #8daaad; border: solid 3px #8daaad; } /* Heather Blue Lagoon */ .tshirtinfoswatch > .heatherbluestorm { background-color: #7e8786; border: solid 3px #7e8786; } /* Heather Blue Storm */ .tshirtinfoswatch > .heatherbrown { background-color: #523f31; border: solid 3px #523f31; } /* Heather Brown */ .tshirtinfoswatch > .heatherbubblegum { background-color: #f8c3d3; border: solid 3px #f8c3d3; } /* Heather Bubble Gum */ .tshirtinfoswatch > .heatherburgundy { background-color: #79444b; border: solid 3px #79444b; } /* Heather Burgundy */ .tshirtinfoswatch > .heathercanvasred { background-color: #902328; border: solid 3px #902328; } /* Heather Canvas Red */ .tshirtinfoswatch > .heathercardinal { background-color: #612e2d; border: solid 3px #612e2d; } /* Heather Cardinal */ .tshirtinfoswatch > .heathercardinalred { background-color: #d36b79; border: solid 3px #d36b79; } /* Heather Cardinal Red */ .tshirtinfoswatch > .heathercement { background-color: #dad6d3; border: solid 3px #dad6d3; } /* Heather Cement */ .tshirtinfoswatch > .heathercharcoal { background-color: #5b6164; border: solid 3px #5b6164; } /* Heather Charcoal */ .tshirtinfoswatch > .heathercharitypink { background-color: #fc7091; border: solid 3px #fc7091; } /* Heather Charity Pink */ .tshirtinfoswatch > .heatherclay { background-color: #8f4e3f; border: solid 3px #8f4e3f; } /* Heather Clay */ .tshirtinfoswatch > .heathercolumbiablue { background-color: #5a88c5; border: solid 3px #5a88c5; } /* Heather Columbia Blue */ .tshirtinfoswatch > .heathercoolblue { background-color: #36689e; border: solid 3px #36689e; } /* Heather Cool Blue */ .tshirtinfoswatch > .heathercoolgrey { background-color: #d5ccc6; border: solid 3px #d5ccc6; } /* Heather Cool Grey */ .tshirtinfoswatch > .heathercoral { background-color: #e87365; border: solid 3px #e87365; } /* Heather Coral */ .tshirtinfoswatch > .heatherdarkgreen { background-color: #6e8575; border: solid 3px #6e8575; } /* Heather Dark Green */ .tshirtinfoswatch > .heatheremerald { background-color: #0e201c; border: solid 3px #0e201c; } /* Heather Emerald */ .tshirtinfoswatch > .heatherforest { background-color: #3a453f; border: solid 3px #3a453f; } /* Heather Forest */ .tshirtinfoswatch > .heatherforestgreen { background-color: #3c5c56; border: solid 3px #3c5c56; } /* Heather Forest Green */ .tshirtinfoswatch > .heathergalapagosblue { background-color: #42a3b7; border: solid 3px #42a3b7; } /* Heather Galapagos Blue */ .tshirtinfoswatch > .heathergraphite { background-color: #383536; border: solid 3px #383536; } /* Heather Graphite */ .tshirtinfoswatch > .heathergrassgreen { background-color: #10785b; border: solid 3px #10785b; } /* Heather Grass Green */ .tshirtinfoswatch > .heathergray { background-color: #6b7280; border: solid 3px #6b7280; } /* Heather Gray */ .tshirtinfoswatch > .heathergreen { background-color: #96ae74; border: solid 3px #96ae74; } /* Heather Green */ .tshirtinfoswatch > .heathergrey { background-color: #6b7280; border: solid 3px #6b7280; } /* Heather Grey */ .tshirtinfoswatch > .heathergreyblack { background-color: #a4abb3; border: solid 3px #a4abb3; } /* Heather Grey/Black */ .tshirtinfoswatch > .heathergreycharcoalmaro { background-color: #656769; border: solid 3px #656769; } /* Heather Grey/Charcoal/Maro */ .tshirtinfoswatch > .heathergreydarkgreen { background-color: #656769; border: solid 3px #656769; } /* Heather Grey/Dark Green */ .tshirtinfoswatch > .heathergreylightgrey { background-color: #656769; border: solid 3px #656769; } /* Heather Grey/Light Grey */ .tshirtinfoswatch > .heathergreynavy { background-color: #656769; border: solid 3px #656769; } /* Heather Grey/Navy */ .tshirtinfoswatch > .heathergreyroyal { background-color: #656769; border: solid 3px #656769; } /* Heather Grey/Royal */ .tshirtinfoswatch > .heathergreywhite { background-color: #979a9f; border: solid 3px #979a9f; } /* Heather Grey/White */ .tshirtinfoswatch > .heatherheavymetal { background-color: #646263; border: solid 3px #646263; } /* Heather Heavy Metal */ .tshirtinfoswatch > .heatherheliconia { background-color: #fb74a2; border: solid 3px #fb74a2; } /* Heather Heliconia */ .tshirtinfoswatch > .heathericeblue { background-color: #cceaeb; border: solid 3px #cceaeb; } /* Heather Ice Blue */ .tshirtinfoswatch > .heatherindigo { background-color: #818aab; border: solid 3px #818aab; } /* Heather Indigo */ .tshirtinfoswatch > .heatheririshgreen { background-color: #039d6a; border: solid 3px #039d6a; } /* Heather Irish Green */ .tshirtinfoswatch > .heatherkelly { background-color: #01a467; border: solid 3px #01a467; } /* Heather Kelly */ .tshirtinfoswatch > .heatherkellygreen { background-color: #488366; border: solid 3px #488366; } /* Heather Kelly Green */ .tshirtinfoswatch > .heatherlapis { background-color: #78609a; border: solid 3px #78609a; } /* Heather Lapis */ .tshirtinfoswatch > .heathermagenta { background-color: #ae5b82; border: solid 3px #ae5b82; } /* Heather Magenta */ .tshirtinfoswatch > .heathermaroon { background-color: #56363b; border: solid 3px #56363b; } /* Heather Maroon */ .tshirtinfoswatch > .heathermauve { background-color: #b77775; border: solid 3px #b77775; } /* Heather Mauve */ .tshirtinfoswatch > .heathermidnightnavy { background-color: #373648; border: solid 3px #373648; } /* Heather Midnight Navy */ .tshirtinfoswatch > .heathermilitarygreen { background-color: #6a695b; border: solid 3px #6a695b; } /* Heather Military Green */ .tshirtinfoswatch > .heathermint { background-color: #97dfcd; border: solid 3px #97dfcd; } /* Heather Mint */ .tshirtinfoswatch > .heathermustard { background-color: #eaaa47; border: solid 3px #eaaa47; } /* Heather Mustard */ .tshirtinfoswatch > .heathernatural { background-color: #f1e8df; border: solid 3px #f1e8df; } /* Heather Natural */ .tshirtinfoswatch > .heathernavy { background-color: #525368; border: solid 3px #525368; } /* Heather Navy */ .tshirtinfoswatch > .heatheroatmeal { background-color: #e8e6d9; border: solid 3px #e8e6d9; } /* Heather Oatmeal */ .tshirtinfoswatch > .heatherolive { background-color: #73694b; border: solid 3px #73694b; } /* Heather Olive */ .tshirtinfoswatch > .heatherorange { background-color: #f36e40; border: solid 3px #f36e40; } /* Heather Orange */ .tshirtinfoswatch > .heatherorchid { background-color: #d4a0a4; border: solid 3px #d4a0a4; } /* Heather Orchid */ .tshirtinfoswatch > .heatherpeach { background-color: #f7c2ae; border: solid 3px #f7c2ae; } /* Heather Peach */ .tshirtinfoswatch > .heatherpink { background-color: #d74d69; border: solid 3px #d74d69; } /* Heather Pink */ .tshirtinfoswatch > .heatherprismblue { background-color: #c9d2e1; border: solid 3px #c9d2e1; } /* Heather Prism Blue */ .tshirtinfoswatch > .heatherprismdustyblue { background-color: #b1c6bd; border: solid 3px #b1c6bd; } /* Heather Prism Dusty Blue */ .tshirtinfoswatch > .heatherprismiceblue { background-color: #d0e5ea; border: solid 3px #d0e5ea; } /* Heather Prism Ice Blue */ .tshirtinfoswatch > .heatherprismlilac { background-color: #e6b9e0; border: solid 3px #e6b9e0; } /* Heather Prism Lilac */ .tshirtinfoswatch > .heatherprismmint { background-color: #dcede5; border: solid 3px #dcede5; } /* Heather Prism Mint */ .tshirtinfoswatch > .heatherprismnatural { background-color: #ddd7c7; border: solid 3px #ddd7c7; } /* Heather Prism Natural */ .tshirtinfoswatch > .heatherpurple { background-color: #987e8b; border: solid 3px #987e8b; } /* Heather Purple */ .tshirtinfoswatch > .heatherradiantorchid { background-color: #dd8cc9; border: solid 3px #dd8cc9; } /* Heather Radiant Orchid */ .tshirtinfoswatch > .heatherraspberry { background-color: #b82d52; border: solid 3px #b82d52; } /* Heather Raspberry */ .tshirtinfoswatch > .heatherred { background-color: #d74244; border: solid 3px #d74244; } /* Heather Red */ .tshirtinfoswatch > .heatherroyal { background-color: #3365a3; border: solid 3px #3365a3; } /* Heather Royal */ .tshirtinfoswatch > .heathersage { background-color: #92a896; border: solid 3px #92a896; } /* Heather Sage */ .tshirtinfoswatch > .heathersanddune { background-color: #ecc3a3; border: solid 3px #ecc3a3; } /* Heather Sand Dune */ .tshirtinfoswatch > .heathersapphire { background-color: #43a6d0; border: solid 3px #43a6d0; } /* Heather Sapphire */ .tshirtinfoswatch > .heatherscarletred { background-color: #c96066; border: solid 3px #c96066; } /* Heather Scarlet Red */ .tshirtinfoswatch > .heatherseagreen { background-color: #03decb; border: solid 3px #03decb; } /* Heather Sea Green */ .tshirtinfoswatch > .heathersilver { background-color: #dee0df; border: solid 3px #dee0df; } /* Heather Silver */ .tshirtinfoswatch > .heatherslate { background-color: #647680; border: solid 3px #647680; } /* Heather Slate */ .tshirtinfoswatch > .heathersoftcream { background-color: #f7e5c6; border: solid 3px #f7e5c6; } /* Heather Soft Cream */ .tshirtinfoswatch > .heatherstone { background-color: #b7b0a7; border: solid 3px #b7b0a7; } /* Heather Stone */ .tshirtinfoswatch > .heatherstorm { background-color: #908e99; border: solid 3px #908e99; } /* Heather Storm */ .tshirtinfoswatch > .heathersunset { background-color: #fca18c; border: solid 3px #fca18c; } /* Heather Sunset */ .tshirtinfoswatch > .heathertan { background-color: #c2ad98; border: solid 3px #c2ad98; } /* Heather Tan */ .tshirtinfoswatch > .heatherteampurple { background-color: #735a92; border: solid 3px #735a92; } /* Heather Team Purple */ .tshirtinfoswatch > .heathertrueroyal { background-color: #457ec9; border: solid 3px #457ec9; } /* Heather True Royal */ .tshirtinfoswatch > .heatherturquoise { background-color: #5d9fd3; border: solid 3px #5d9fd3; } /* Heather Turquoise */ .tshirtinfoswatch > .heatherwhite { background-color: #edecf1; border: solid 3px #edecf1; } /* Heather White */ .tshirtinfoswatch > .heatheryellow { background-color: #fdde5a; border: solid 3px #fdde5a; } /* Heather Yellow */ .tshirtinfoswatch > .heatheryellowgold { background-color: #ecb348; border: solid 3px #ecb348; } /* Heather Yellow Gold */ .tshirtinfoswatch > .heavymetal { background-color: #494949; border: solid 3px #494949; } /* Heavy Metal */ .tshirtinfoswatch > .heliconia { background-color: #dc3879; border: solid 3px #dc3879; } /* Heliconia */ .tshirtinfoswatch > .hemp { background-color: #cebea4; border: solid 3px #cebea4; } /* Hemp */ .tshirtinfoswatch > .hotpink { background-color: #ec4899; border: solid 3px #ec4899; } /* Hot Pink */ .tshirtinfoswatch > .huntergreen { background-color: #2d3932; border: solid 3px #2d3932; } /* Hunter Green */ .tshirtinfoswatch > .hydrangea { background-color: #b9d8ef; border: solid 3px #b9d8ef; } /* Hydrangea */ .tshirtinfoswatch > .iceblue { background-color: #c9dbe7; border: solid 3px #c9dbe7; } /* Ice Blue */ .tshirtinfoswatch > .icebluetriblend { background-color: #e9f3f4; border: solid 3px #e9f3f4; } /* Ice Blue Triblend */ .tshirtinfoswatch > .icegrey { background-color: #dfd5d6; border: solid 3px #dfd5d6; } /* Ice Grey */ .tshirtinfoswatch > .indigo { background-color: #617999; border: solid 3px #617999; } /* Indigo */ .tshirtinfoswatch > .indigoblue { background-color: #556f88; border: solid 3px #556f88; } /* Indigo Blue */ .tshirtinfoswatch > .iris { background-color: #568dc8; border: solid 3px #568dc8; } /* Iris */ .tshirtinfoswatch > .irishgreen { background-color: #2e9a4c; border: solid 3px #2e9a4c; } /* Irish Green */ .tshirtinfoswatch > .irishgreenringer { background: linear-gradient(135deg, #f4f4f7 50%, #599b64 50%); border: solid 3px #599b64; } /* Irish Green Ringer */ .tshirtinfoswatch > .islandreef { background-color: #aaddc4; border: solid 3px #aaddc4; } /* Island Reef */ .tshirtinfoswatch > .islandtiedye { background-color: #dcf2f3; border: solid 3px #dcf2f3; } /* Island Tie Dye */ .tshirtinfoswatch > .ivory { background-color: #fef3c7; border: solid 3px #fef3c7; } /* Ivory */ .tshirtinfoswatch > .jadedome { background-color: #007f82; border: solid 3px #007f82; } /* Jade Dome */ .tshirtinfoswatch > .jetblackheather { background-color: #2c2c2e; border: solid 3px #2c2c2e; } /* Jet Black Heather */ .tshirtinfoswatch > .kelly { background-color: #2e9a4c; border: solid 3px #2e9a4c; } /* Kelly */ .tshirtinfoswatch > .kellygreen { background-color: #65a30d; border: solid 3px #65a30d; } /* Kelly Green */ .tshirtinfoswatch > .kellywhite { background-color: #000000; border: solid 3px #000000; } /* Kelly/White */ .tshirtinfoswatch > .kellywhitekelly { background-color: #d9dce5; border: solid 3px #d9dce5; } /* Kelly/White/Kelly */ .tshirtinfoswatch > .khaki { background-color: #d6b27b; border: solid 3px #d6b27b; } /* Khaki */ .tshirtinfoswatch > .khakibrown { background-color: #957e64; border: solid 3px #957e64; } /* Khaki/Brown */ .tshirtinfoswatch > .khakicoffee { background-color: #948569; border: solid 3px #948569; } /* Khaki/Coffee */ .tshirtinfoswatch > .khakitaupe { background-color: #b1a99e; border: solid 3px #b1a99e; } /* Khaki/Taupe */ .tshirtinfoswatch > .khakiwhite { background-color: #948569; border: solid 3px #948569; } /* Khaki/White */ .tshirtinfoswatch > .kiwi { background-color: #aec67a; border: solid 3px #aec67a; } /* Kiwi */ .tshirtinfoswatch > .kryptektyphon { background-color: #33343a; border: solid 3px #33343a; } /* Kryptek Typhon */ .tshirtinfoswatch > .lagoon { background-color: #6ec8d7; border: solid 3px #6ec8d7; } /* Lagoon */ .tshirtinfoswatch > .latenightblue { background-color: #112b4d; border: solid 3px #112b4d; } /* Late Night Blue */ .tshirtinfoswatch > .lavender { background-color: #a389c5; border: solid 3px #a389c5; } /* Lavender */ .tshirtinfoswatch > .lavenderblue { background-color: #93a2c1; border: solid 3px #93a2c1; } /* Lavender Blue */ .tshirtinfoswatch > .leaf { background-color: #749b6e; border: solid 3px #749b6e; } /* Leaf */ .tshirtinfoswatch > .lightblue { background-color: #60a5fa; border: solid 3px #60a5fa; } /* Light Blue */ .tshirtinfoswatch > .lightblueheather { background-color: #81aad2; border: solid 3px #81aad2; } /* Light Blue Heather */ .tshirtinfoswatch > .lightbluemelange { background-color: #9db3d2; border: solid 3px #9db3d2; } /* Light Blue Melange */ .tshirtinfoswatch > .lightgray { background-color: #9ca3af; border: solid 3px #9ca3af; } /* Light Gray */ .tshirtinfoswatch > .lightgreen { background-color: #617866; border: solid 3px #617866; } /* Light Green */ .tshirtinfoswatch > .lightgrey { background-color: #9ca3af; border: solid 3px #9ca3af; } /* Light Grey */ .tshirtinfoswatch > .lightolive { background-color: #958d70; border: solid 3px #958d70; } /* Light Olive */ .tshirtinfoswatch > .lightpink { background-color: #fbcfe8; border: solid 3px #fbcfe8; } /* Light Pink */ .tshirtinfoswatch > .lightsteel { background-color: #b3adb7; border: solid 3px #b3adb7; } /* Light Steel */ .tshirtinfoswatch > .lightviolet { background-color: #beaab7; border: solid 3px #beaab7; } /* Light Violet */ .tshirtinfoswatch > .lightyellow { background-color: #f8e2ac; border: solid 3px #f8e2ac; } /* Light Yellow */ .tshirtinfoswatch > .lilac { background-color: #e9c5dc; border: solid 3px #e9c5dc; } /* Lilac */ .tshirtinfoswatch > .lime { background-color: #65a30d; border: solid 3px #65a30d; } /* Lime */ .tshirtinfoswatch > .lodenblack { background-color: #414336; border: solid 3px #414336; } /* Loden/Black */ .tshirtinfoswatch > .maizeyellow { background-color: #d9b63b; border: solid 3px #d9b63b; } /* Maize Yellow */ .tshirtinfoswatch > .maroon { background-color: #7f1d1d; border: solid 3px #7f1d1d; } /* Maroon */ .tshirtinfoswatch > .maroongrey { background-color: #5c2731; border: solid 3px #5c2731; } /* Maroon/Grey */ .tshirtinfoswatch > .maroontriblend { background-color: #804b63; border: solid 3px #804b63; } /* Maroon Triblend */ .tshirtinfoswatch > .maroonwhite { background-color: #4a1726; border: solid 3px #4a1726; } /* Maroon/White */ .tshirtinfoswatch > .mauve { background-color: #bf7e7b; border: solid 3px #bf7e7b; } /* Mauve */ .tshirtinfoswatch > .mauvelous { background-color: #e09fa0; border: solid 3px #e09fa0; } /* Mauvelous */ .tshirtinfoswatch > .mauvetriblend { background-color: #cb7c7d; border: solid 3px #cb7c7d; } /* Mauve Triblend */ .tshirtinfoswatch > .metroblue { background-color: #4c5889; border: solid 3px #4c5889; } /* Metro Blue */ .tshirtinfoswatch > .midnight { background-color: #204958; border: solid 3px #204958; } /* Midnight */ .tshirtinfoswatch > .midnightnavy { background-color: #18192e; border: solid 3px #18192e; } /* Midnight Navy */ .tshirtinfoswatch > .midnightnavymetallicsil { background-color: #3d3f51; border: solid 3px #3d3f51; } /* Midnight Navy/Metallic Sil */ .tshirtinfoswatch > .midnightnavywhite { background-color: #26324c; border: solid 3px #26324c; } /* Midnight Navy/White */ .tshirtinfoswatch > .midnightroyal { background-color: #112060; border: solid 3px #112060; } /* Midnight Royal */ .tshirtinfoswatch > .militarygreen { background-color: #065f46; border: solid 3px #065f46; } /* Military Green */ .tshirtinfoswatch > .militarygreenheather { background-color: #676956; border: solid 3px #676956; } /* Military Green Heather */ .tshirtinfoswatch > .militarygreentriblend { background-color: #6f7163; border: solid 3px #6f7163; } /* Military Green Triblend */ .tshirtinfoswatch > .mint { background-color: #a8d3c4; border: solid 3px #a8d3c4; } /* Mint */ .tshirtinfoswatch > .mintgreen { background-color: #c0e7c1; border: solid 3px #c0e7c1; } /* Mint Green */ .tshirtinfoswatch > .minttriblend { background-color: #aeeedd; border: solid 3px #aeeedd; } /* Mint Triblend */ .tshirtinfoswatch > .modgreylightheatherwhi { background-color: #d4d8db; border: solid 3px #d4d8db; } /* Mod Grey Light Heather/Whi */ .tshirtinfoswatch > .modgreymediumheatherbl { background-color: #d9dade; border: solid 3px #d9dade; } /* Mod Grey Medium Heather/Bl */ .tshirtinfoswatch > .modgreywhite { background-color: #b8bdc1; border: solid 3px #b8bdc1; } /* Mod Grey/White */ .tshirtinfoswatch > .montereysage { background-color: #616651; border: solid 3px #616651; } /* Monterey Sage */ .tshirtinfoswatch > .moss { background-color: #757a68; border: solid 3px #757a68; } /* Moss */ .tshirtinfoswatch > .mosskhaki { background-color: #494024; border: solid 3px #494024; } /* Moss/Khaki */ .tshirtinfoswatch > .multicamalpine { background-color: #eae9e7; border: solid 3px #eae9e7; } /* Multicam Alpine */ .tshirtinfoswatch > .multicamalpinewhite { background-color: #eeeced; border: solid 3px #eeeced; } /* Multicam Alpine/White */ .tshirtinfoswatch > .multicamaridbrown { background-color: #a7876a; border: solid 3px #a7876a; } /* Multicam Arid/Brown */ .tshirtinfoswatch > .multicamaridtan { background-color: #6e503b; border: solid 3px #6e503b; } /* Multicam Arid/Tan */ .tshirtinfoswatch > .multicamblack { background-color: #373332; border: solid 3px #373332; } /* Multicam Black */ .tshirtinfoswatch > .multicamblackblack { background-color: #383432; border: solid 3px #383432; } /* Multicam Black/Black */ .tshirtinfoswatch > .multicamgreen { background-color: #82795c; border: solid 3px #82795c; } /* Multicam Green */ .tshirtinfoswatch > .multicamgreenblack { background-color: #908267; border: solid 3px #908267; } /* Multicam Green/Black */ .tshirtinfoswatch > .multicamgreenkhaki { background-color: #9a866b; border: solid 3px #9a866b; } /* Multicam Green/Khaki */ .tshirtinfoswatch > .multicamtropic { background-color: #473d2c; border: solid 3px #473d2c; } /* Multicam Tropic */ .tshirtinfoswatch > .multicamtropicgreen { background-color: #726744; border: solid 3px #726744; } /* Multicam Tropic/Green */ .tshirtinfoswatch > .mustard { background-color: #e4a442; border: solid 3px #e4a442; } /* Mustard */ .tshirtinfoswatch > .mustardtriblend { background-color: #df9830; border: solid 3px #df9830; } /* Mustard Triblend */ .tshirtinfoswatch > .natural { background-color: #d6b27b; border: solid 3px #d6b27b; } /* Natural */ .tshirtinfoswatch > .naturalblack { background-color: #cfc7be; border: solid 3px #cfc7be; } /* Natural/Black */ .tshirtinfoswatch > .naturalheather { background-color: #e4e3dd; border: solid 3px #e4e3dd; } /* Natural Heather */ .tshirtinfoswatch > .naturalnatural { background-color: #c0bdb7; border: solid 3px #c0bdb7; } /* Natural/Natural */ .tshirtinfoswatch > .naturalnavy { background-color: #000000; border: solid 3px #000000; } /* Natural/Navy */ .tshirtinfoswatch > .naturalred { background-color: #bf3442; border: solid 3px #bf3442; } /* Natural/Red */ .tshirtinfoswatch > .naturalroyal { background-color: #000000; border: solid 3px #000000; } /* Natural/Royal */ .tshirtinfoswatch > .navy { background-color: #1e3a8a; border: solid 3px #1e3a8a; } /* Navy */ .tshirtinfoswatch > .navybrown { background-color: #241e29; border: solid 3px #241e29; } /* Navy/Brown */ .tshirtinfoswatch > .navycarmel { background-color: #0b1121; border: solid 3px #0b1121; } /* Navy/Carmel */ .tshirtinfoswatch > .navycharcoal { background-color: #0b1220; border: solid 3px #0b1220; } /* Navy/Charcoal */ .tshirtinfoswatch > .navyheather { background-color: #4f4c5a; border: solid 3px #4f4c5a; } /* Navy Heather */ .tshirtinfoswatch > .navymelange { background-color: #2e303d; border: solid 3px #2e303d; } /* Navy Melange */ .tshirtinfoswatch > .navyorange { background-color: #0b1220; border: solid 3px #0b1220; } /* Navy/Orange */ .tshirtinfoswatch > .navyringer { background: linear-gradient(135deg, #f4f4f7 50%, #04035e 50%); border: solid 3px #04035e; } /* Navy Ringer */ .tshirtinfoswatch > .navysilver { background-color: #263142; border: solid 3px #263142; } /* Navy/Silver */ .tshirtinfoswatch > .navyswirl { background-color: #466080; border: solid 3px #466080; } /* Navy Swirl */ .tshirtinfoswatch > .navytriblend { background-color: #252549; border: solid 3px #252549; } /* Navy Triblend */ .tshirtinfoswatch > .navywhite { background-color: #232d3c; border: solid 3px #232d3c; } /* Navy/White */ .tshirtinfoswatch > .navywhiteheathergrey { background-color: #0b1220; border: solid 3px #0b1220; } /* Navy/White/Heather Grey */ .tshirtinfoswatch > .navywhitenavy { background-color: #d8dbe4; border: solid 3px #d8dbe4; } /* Navy/White/Navy */ .tshirtinfoswatch > .neomint { background-color: #cff4c8; border: solid 3px #cff4c8; } /* Neo Mint */ .tshirtinfoswatch > .neonblue { background-color: #1a92be; border: solid 3px #1a92be; } /* Neon Blue */ .tshirtinfoswatch > .neoncantaloupe { background-color: #fdc490; border: solid 3px #fdc490; } /* Neon Cantaloupe */ .tshirtinfoswatch > .neongreen { background-color: #b6f149; border: solid 3px #b6f149; } /* Neon Green */ .tshirtinfoswatch > .neonheathergreen { background-color: #85e47c; border: solid 3px #85e47c; } /* Neon Heather Green */ .tshirtinfoswatch > .neonlemon { background-color: #eee7a4; border: solid 3px #eee7a4; } /* Neon Lemon */ .tshirtinfoswatch > .neonorange { background-color: #ee7c03; border: solid 3px #ee7c03; } /* Neon Orange */ .tshirtinfoswatch > .neonpink { background-color: #f872b5; border: solid 3px #f872b5; } /* Neon Pink */ .tshirtinfoswatch > .neonviolet { background-color: #e8b4f5; border: solid 3px #e8b4f5; } /* Neon Violet */ .tshirtinfoswatch > .newforestgreen { background-color: #2a3527; border: solid 3px #2a3527; } /* New Forest Green */ .tshirtinfoswatch > .oatmeal { background-color: #e1ded7; border: solid 3px #e1ded7; } /* Oatmeal */ .tshirtinfoswatch > .oatmealheather { background-color: #cdcdcd; border: solid 3px #cdcdcd; } /* Oatmeal Heather */ .tshirtinfoswatch > .oatmealtriblend { background-color: #e0dcd7; border: solid 3px #e0dcd7; } /* Oatmeal Triblend */ .tshirtinfoswatch > .oceanblue { background-color: #1f79c4; border: solid 3px #1f79c4; } /* Ocean Blue */ .tshirtinfoswatch > .offwhite { background-color: #ffffff; border: solid 3px #ffffff; } /* Off White */ .tshirtinfoswatch > .oldgold { background-color: #ebb37e; border: solid 3px #ebb37e; } /* Old Gold */ .tshirtinfoswatch > .olive { background-color: #065f46; border: solid 3px #065f46; } /* Olive */ .tshirtinfoswatch > .olivetriblend { background-color: #74644a; border: solid 3px #74644a; } /* Olive Triblend */ .tshirtinfoswatch > .orange { background-color: #ea580c; border: solid 3px #ea580c; } /* Orange */ .tshirtinfoswatch > .orangeswirl { background-color: #fd784e; border: solid 3px #fd784e; } /* Orange Swirl */ .tshirtinfoswatch > .orchid { background-color: #cd9b9e; border: solid 3px #cd9b9e; } /* Orchid */ .tshirtinfoswatch > .oxbloodblack { background-color: #2f1419; border: solid 3px #2f1419; } /* Oxblood Black */ .tshirtinfoswatch > .oxford { background-color: #858283; border: solid 3px #858283; } /* Oxford */ .tshirtinfoswatch > .paragon { background-color: #c3adb2; border: solid 3px #c3adb2; } /* Paragon */ .tshirtinfoswatch > .peach { background-color: #f4c6af; border: solid 3px #f4c6af; } /* Peach */ .tshirtinfoswatch > .peachtriblend { background-color: #f0cdbd; border: solid 3px #f0cdbd; } /* Peach Triblend */ .tshirtinfoswatch > .peachy { background-color: #f1c5b5; border: solid 3px #f1c5b5; } /* Peachy */ .tshirtinfoswatch > .pebblebrown { background-color: #716161; border: solid 3px #716161; } /* Pebble Brown */ .tshirtinfoswatch > .pepper { background-color: #635958; border: solid 3px #635958; } /* Pepper */ .tshirtinfoswatch > .pfdwhite { background-color: #efeff0; border: solid 3px #efeff0; } /* PFD White */ .tshirtinfoswatch > .pink { background-color: #ec4899; border: solid 3px #ec4899; } /* Pink */ .tshirtinfoswatch > .pinkgravel { background-color: #c7afaf; border: solid 3px #c7afaf; } /* Pink Gravel */ .tshirtinfoswatch > .pinklemonade { background-color: #fb7a9f; border: solid 3px #fb7a9f; } /* Pink Lemonade */ .tshirtinfoswatch > .pistachio { background-color: #cedcb7; border: solid 3px #cedcb7; } /* Pistachio */ .tshirtinfoswatch > .pitchblack { background-color: #1e1e1e; border: solid 3px #1e1e1e; } /* Pitch Black */ .tshirtinfoswatch > .pitchgreymediumheather { background-color: #6e7174; border: solid 3px #6e7174; } /* Pitch Grey Medium Heather/ */ .tshirtinfoswatch > .platinum { background-color: #d8d7d5; border: solid 3px #d8d7d5; } /* Platinum */ .tshirtinfoswatch > .poolblue { background-color: #395b8a; border: solid 3px #395b8a; } /* Pool Blue */ .tshirtinfoswatch > .poppy { background-color: #fb4634; border: solid 3px #fb4634; } /* Poppy */ .tshirtinfoswatch > .poseidonblack { background-color: #373840; border: solid 3px #373840; } /* Poseidon Black */ .tshirtinfoswatch > .prairiedust { background-color: #908267; border: solid 3px #908267; } /* Prairie Dust */ .tshirtinfoswatch > .pumablack { background-color: #18181b; border: solid 3px #18181b; } /* Puma Black */ .tshirtinfoswatch > .pumablackslatesky { background-color: #18181c; border: solid 3px #18181c; } /* Puma Black/Slate Sky */ .tshirtinfoswatch > .puristblue { background-color: #98dce3; border: solid 3px #98dce3; } /* Purist Blue */ .tshirtinfoswatch > .purple { background-color: #a855f7; border: solid 3px #a855f7; } /* Purple */ .tshirtinfoswatch > .purplerush { background-color: #573d7b; border: solid 3px #573d7b; } /* Purple Rush */ .tshirtinfoswatch > .purplestorm { background-color: #7a656e; border: solid 3px #7a656e; } /* Purple Storm */ .tshirtinfoswatch > .purpleswirl { background-color: #9876c3; border: solid 3px #9876c3; } /* Purple Swirl */ .tshirtinfoswatch > .purpletriblend { background-color: #745995; border: solid 3px #745995; } /* Purple Triblend */ .tshirtinfoswatch > .purplewhite { background-color: #442664; border: solid 3px #442664; } /* Purple/White */ .tshirtinfoswatch > .puttybeige { background-color: #9f9488; border: solid 3px #9f9488; } /* Putty Beige */ .tshirtinfoswatch > .rainbowswirl { background-color: #a35a4e; border: solid 3px #a35a4e; } /* Rainbow Swirl */ .tshirtinfoswatch > .raspberry { background-color: #f76ca6; border: solid 3px #f76ca6; } /* Raspberry */ .tshirtinfoswatch > .realtreeedgebrown { background-color: #82715f; border: solid 3px #82715f; } /* Realtree Edge/Brown */ .tshirtinfoswatch > .realtreemax7brown { background-color: #4e463c; border: solid 3px #4e463c; } /* Realtree Max7/Brown */ .tshirtinfoswatch > .red { background-color: #dc2626; border: solid 3px #dc2626; } /* Red */ .tshirtinfoswatch > .redblack { background-color: #d5323a; border: solid 3px #d5323a; } /* Red/Black */ .tshirtinfoswatch > .redringer { background: linear-gradient(135deg, #f4f4f7 50%, #d71919 50%); border: solid 3px #d71919; } /* Red Ringer */ .tshirtinfoswatch > .redriverclay { background-color: #c4443b; border: solid 3px #c4443b; } /* Red River Clay */ .tshirtinfoswatch > .redswirl { background-color: #e42132; border: solid 3px #e42132; } /* Red Swirl */ .tshirtinfoswatch > .redwhite { background-color: #cb0d29; border: solid 3px #cb0d29; } /* Red/White */ .tshirtinfoswatch > .redwhiteblack { background-color: #991514; border: solid 3px #991514; } /* Red/White/Black */ .tshirtinfoswatch > .redwhiteheathergrey { background-color: #991514; border: solid 3px #991514; } /* Red/White/Heather Grey */ .tshirtinfoswatch > .rickieorange { background-color: #f87327; border: solid 3px #f87327; } /* Rickie Orange */ .tshirtinfoswatch > .royal { background-color: #1d4ed8; border: solid 3px #1d4ed8; } /* Royal */ .tshirtinfoswatch > .royalblack { background-color: #0d356d; border: solid 3px #0d356d; } /* Royal/Black */ .tshirtinfoswatch > .royalblue { background-color: #1d4ed8; border: solid 3px #1d4ed8; } /* Royal Blue */ .tshirtinfoswatch > .royalblueheather { background-color: #485282; border: solid 3px #485282; } /* Royal Blue Heather */ .tshirtinfoswatch > .royalblueringer { background: linear-gradient(135deg, #f4f4f7 50%, #2b206b 50%); border: solid 3px #2b206b; } /* Royal Blue Ringer */ .tshirtinfoswatch > .royalblueswirl { background-color: #3ca4dd; border: solid 3px #3ca4dd; } /* Royal Blue Swirl */ .tshirtinfoswatch > .royalcaribe { background-color: #4e86aa; border: solid 3px #4e86aa; } /* Royal Caribe */ .tshirtinfoswatch > .royalheather { background-color: #3a699f; border: solid 3px #3a699f; } /* Royal Heather */ .tshirtinfoswatch > .royalpine { background-color: #51665a; border: solid 3px #51665a; } /* Royal Pine */ .tshirtinfoswatch > .royalwhite { background-color: #0939a5; border: solid 3px #0939a5; } /* Royal/White */ .tshirtinfoswatch > .royalwhiteheathergrey { background-color: #0d356d; border: solid 3px #0d356d; } /* Royal/White/Heather Grey */ .tshirtinfoswatch > .royalwhiteroyal { background-color: #dadde5; border: solid 3px #dadde5; } /* Royal/White/Royal */ .tshirtinfoswatch > .russet { background-color: #654645; border: solid 3px #654645; } /* Russet */ .tshirtinfoswatch > .rust { background-color: #813632; border: solid 3px #813632; } /* Rust */ .tshirtinfoswatch > .rusticorangekhaki { background-color: #cb4c32; border: solid 3px #cb4c32; } /* Rustic Orange/Khaki */ .tshirtinfoswatch > .saddle { background-color: #8b684d; border: solid 3px #8b684d; } /* Saddle */ .tshirtinfoswatch > .safarioxford { background-color: #b7b69f; border: solid 3px #b7b69f; } /* Safari Oxford */ .tshirtinfoswatch > .safetygreen { background-color: #b6f149; border: solid 3px #b6f149; } /* Safety Green */ .tshirtinfoswatch > .safetyorange { background-color: #ea580c; border: solid 3px #ea580c; } /* Safety Orange */ .tshirtinfoswatch > .safetypink { background-color: #fc81a5; border: solid 3px #fc81a5; } /* Safety Pink */ .tshirtinfoswatch > .safetyyellow { background-color: #f4fd63; border: solid 3px #f4fd63; } /* Safety Yellow */ .tshirtinfoswatch > .sage { background-color: #93a492; border: solid 3px #93a492; } /* Sage */ .tshirtinfoswatch > .salmon { background-color: #f97062; border: solid 3px #f97062; } /* Salmon */ .tshirtinfoswatch > .saltwater { background-color: #98d0c6; border: solid 3px #98d0c6; } /* Saltwater */ .tshirtinfoswatch > .sand { background-color: #d6b27b; border: solid 3px #d6b27b; } /* Sand */ .tshirtinfoswatch > .sandstone { background-color: #aca694; border: solid 3px #aca694; } /* Sandstone */ .tshirtinfoswatch > .sapphire { background-color: #0f62ae; border: solid 3px #0f62ae; } /* Sapphire */ .tshirtinfoswatch > .scarlet { background-color: #b4182a; border: solid 3px #b4182a; } /* Scarlet */ .tshirtinfoswatch > .scarletred { background-color: #ba1a37; border: solid 3px #ba1a37; } /* Scarlet Red */ .tshirtinfoswatch > .scubablue { background-color: #7bd3d4; border: solid 3px #7bd3d4; } /* Scuba Blue */ .tshirtinfoswatch > .seafoam { background-color: #76ada7; border: solid 3px #76ada7; } /* Seafoam */ .tshirtinfoswatch > .seagreentriblend { background-color: #69dedc; border: solid 3px #69dedc; } /* Sea Green Triblend */ .tshirtinfoswatch > .shiitake { background-color: #89746f; border: solid 3px #89746f; } /* Shiitake */ .tshirtinfoswatch > .silk { background-color: #c4bab8; border: solid 3px #c4bab8; } /* Silk */ .tshirtinfoswatch > .silver { background-color: #9ca3af; border: solid 3px #9ca3af; } /* Silver */ .tshirtinfoswatch > .silverblack { background-color: #c8c1bf; border: solid 3px #c8c1bf; } /* Silver/Black */ .tshirtinfoswatch > .silvergrey { background-color: #dedce1; border: solid 3px #dedce1; } /* Silver Grey */ .tshirtinfoswatch > .sky { background-color: #60a5fa; border: solid 3px #60a5fa; } /* Sky */ .tshirtinfoswatch > .skyblue { background-color: #92b4d1; border: solid 3px #92b4d1; } /* Sky Blue */ .tshirtinfoswatch > .slate { background-color: #667683; border: solid 3px #667683; } /* Slate */ .tshirtinfoswatch > .slatesky { background-color: #626264; border: solid 3px #626264; } /* Slate Sky */ .tshirtinfoswatch > .slateskyashgrey { background-color: #626264; border: solid 3px #626264; } /* Slate Sky/Ash Grey */ .tshirtinfoswatch > .smoke { background-color: #4e4d4b; border: solid 3px #4e4d4b; } /* Smoke */ .tshirtinfoswatch > .softcream { background-color: #efd4b1; border: solid 3px #efd4b1; } /* Soft Cream */ .tshirtinfoswatch > .softpink { background-color: #fbcfe8; border: solid 3px #fbcfe8; } /* Soft Pink */ .tshirtinfoswatch > .solidasphaltblend { background-color: #767478; border: solid 3px #767478; } /* Solid Asphalt Blend */ .tshirtinfoswatch > .solidathleticgrey { background-color: #cecac7; border: solid 3px #cecac7; } /* Solid Athletic Grey */ .tshirtinfoswatch > .solidblackblend { background-color: #1a1617; border: solid 3px #1a1617; } /* Solid Black Blend */ .tshirtinfoswatch > .solidblacktriblend { background-color: #323035; border: solid 3px #323035; } /* Solid Black Triblend */ .tshirtinfoswatch > .soliddarkgreytriblend { background-color: #2b2b2b; border: solid 3px #2b2b2b; } /* Solid Dark Grey Triblend */ .tshirtinfoswatch > .solidforesttriblend { background-color: #263931; border: solid 3px #263931; } /* Solid Forest Triblend */ .tshirtinfoswatch > .solidnaturaltriblend { background-color: #f9f1e6; border: solid 3px #f9f1e6; } /* Solid Natural Triblend */ .tshirtinfoswatch > .solidnavyblend { background-color: #283150; border: solid 3px #283150; } /* Solid Navy Blend */ .tshirtinfoswatch > .solidnavytriblend { background-color: #1a2138; border: solid 3px #1a2138; } /* Solid Navy Triblend */ .tshirtinfoswatch > .solidredblend { background-color: #cc0227; border: solid 3px #cc0227; } /* Solid Red Blend */ .tshirtinfoswatch > .solidredtriblend { background-color: #af0c23; border: solid 3px #af0c23; } /* Solid Red Triblend */ .tshirtinfoswatch > .solidtrueroyalblend { background-color: #1a6bc2; border: solid 3px #1a6bc2; } /* Solid True Royal Blend */ .tshirtinfoswatch > .solidwhiteblend { background-color: #f1f0f5; border: solid 3px #f1f0f5; } /* Solid White Blend */ .tshirtinfoswatch > .solidwhitetriblend { background-color: #e3e4e9; border: solid 3px #e3e4e9; } /* Solid White Triblend */ .tshirtinfoswatch > .sportathleticgold { background-color: #eebb1c; border: solid 3px #eebb1c; } /* Sport Athletic Gold */ .tshirtinfoswatch > .sportcharitypink { background-color: #d066a4; border: solid 3px #d066a4; } /* Sport Charity Pink */ .tshirtinfoswatch > .sportdarknavy { background-color: #0b2a49; border: solid 3px #0b2a49; } /* Sport Dark Navy */ .tshirtinfoswatch > .sportforest { background-color: #115f4c; border: solid 3px #115f4c; } /* Sport Forest */ .tshirtinfoswatch > .sportgraphite { background-color: #747476; border: solid 3px #747476; } /* Sport Graphite */ .tshirtinfoswatch > .sportgrey { background-color: #6b7280; border: solid 3px #6b7280; } /* Sport Grey */ .tshirtinfoswatch > .sportlightblue { background-color: #67a1cf; border: solid 3px #67a1cf; } /* Sport Light Blue */ .tshirtinfoswatch > .sportmaroon { background-color: #732a3e; border: solid 3px #732a3e; } /* Sport Maroon */ .tshirtinfoswatch > .sportorange { background-color: #eb4824; border: solid 3px #eb4824; } /* Sport Orange */ .tshirtinfoswatch > .sportpurple { background-color: #553283; border: solid 3px #553283; } /* Sport Purple */ .tshirtinfoswatch > .sportred { background-color: #c8243d; border: solid 3px #c8243d; } /* Sport Red */ .tshirtinfoswatch > .sportroyal { background-color: #133b78; border: solid 3px #133b78; } /* Sport Royal */ .tshirtinfoswatch > .spruce { background-color: #2a3d39; border: solid 3px #2a3d39; } /* Spruce */ .tshirtinfoswatch > .stainlesssteel { background-color: #b0ada7; border: solid 3px #b0ada7; } /* Stainless Steel */ .tshirtinfoswatch > .steelblue { background-color: #5c7a92; border: solid 3px #5c7a92; } /* Steel Blue */ .tshirtinfoswatch > .steelbluesilver { background-color: #3e718e; border: solid 3px #3e718e; } /* Steel Blue/Silver */ .tshirtinfoswatch > .steelbluetriblend { background-color: #3c6173; border: solid 3px #3c6173; } /* Steel Blue Triblend */ .tshirtinfoswatch > .stone { background-color: #c5b6a5; border: solid 3px #c5b6a5; } /* Stone */ .tshirtinfoswatch > .stoneblue { background-color: #8a9bac; border: solid 3px #8a9bac; } /* Stone Blue */ .tshirtinfoswatch > .stonegrey { background-color: #8f8d81; border: solid 3px #8f8d81; } /* Stone Grey */ .tshirtinfoswatch > .stonewashdenim { background-color: #a2b7c7; border: solid 3px #a2b7c7; } /* Stonewash Denim */ .tshirtinfoswatch > .storm { background-color: #988d97; border: solid 3px #988d97; } /* Storm */ .tshirtinfoswatch > .stormtriblend { background-color: #9f9aa1; border: solid 3px #9f9aa1; } /* Storm Triblend */ .tshirtinfoswatch > .strongred { background-color: #a1051d; border: solid 3px #a1051d; } /* Strong Red */ .tshirtinfoswatch > .sunset { background-color: #fdb092; border: solid 3px #fdb092; } /* Sunset */ .tshirtinfoswatch > .tahitiblue { background-color: #01afbf; border: solid 3px #01afbf; } /* Tahiti Blue */ .tshirtinfoswatch > .tan { background-color: #d6b27b; border: solid 3px #d6b27b; } /* Tan */ .tshirtinfoswatch > .tangerine { background-color: #fd9f7c; border: solid 3px #fd9f7c; } /* Tangerine */ .tshirtinfoswatch > .tantriblend { background-color: #bea891; border: solid 3px #bea891; } /* Tan Triblend */ .tshirtinfoswatch > .teal { background-color: #2dd4bf; border: solid 3px #2dd4bf; } /* Teal */ .tshirtinfoswatch > .tealtriblend { background-color: #01717d; border: solid 3px #01717d; } /* Teal Triblend */ .tshirtinfoswatch > .teamlightblue { background-color: #6eaae1; border: solid 3px #6eaae1; } /* Team Light Blue */ .tshirtinfoswatch > .teamlightbluewhiteglow { background-color: #6aa6da; border: solid 3px #6aa6da; } /* Team Light Blue/White Glow */ .tshirtinfoswatch > .teamnavy { background-color: #262255; border: solid 3px #262255; } /* Team Navy */ .tshirtinfoswatch > .teampurple { background-color: #5e3a91; border: solid 3px #5e3a91; } /* Team Purple */ .tshirtinfoswatch > .tennesseeorange { background-color: #fe9900; border: solid 3px #fe9900; } /* Tennessee Orange */ .tshirtinfoswatch > .terracotta { background-color: #f8927f; border: solid 3px #f8927f; } /* Terracotta */ .tshirtinfoswatch > .texasorange { background-color: #af5b30; border: solid 3px #af5b30; } /* Texas Orange */ .tshirtinfoswatch > .thyme { background-color: #c8cabf; border: solid 3px #c8cabf; } /* Thyme */ .tshirtinfoswatch > .toast { background-color: #d49458; border: solid 3px #d49458; } /* Toast */ .tshirtinfoswatch > .tropicalblue { background-color: #2dd4bf; border: solid 3px #2dd4bf; } /* Tropical Blue */ .tshirtinfoswatch > .truenavy { background-color: #232d46; border: solid 3px #232d46; } /* True Navy */ .tshirtinfoswatch > .truered { background-color: #a2112d; border: solid 3px #a2112d; } /* True Red */ .tshirtinfoswatch > .trueroyal { background-color: #1d4ed8; border: solid 3px #1d4ed8; } /* True Royal */ .tshirtinfoswatch > .trueroyalcarbon { background-color: #1348b2; border: solid 3px #1348b2; } /* True Royal/Carbon */ .tshirtinfoswatch > .trueroyaltriblend { background-color: #3267ae; border: solid 3px #3267ae; } /* True Royal Triblend */ .tshirtinfoswatch > .turfgreen { background-color: #0b8f50; border: solid 3px #0b8f50; } /* Turf Green */ .tshirtinfoswatch > .turquoise { background-color: #58c5e0; border: solid 3px #58c5e0; } /* Turquoise */ .tshirtinfoswatch > .turquoisewhite { background-color: #2e6178; border: solid 3px #2e6178; } /* Turquoise/White */ .tshirtinfoswatch > .tweed { background-color: #545152; border: solid 3px #545152; } /* Tweed */ .tshirtinfoswatch > .ultimateblackmodgrey { background-color: #1c1c1c; border: solid 3px #1c1c1c; } /* Ultimate Black/Mod Grey */ .tshirtinfoswatch > .vegasgold { background-color: #edd5a9; border: solid 3px #edd5a9; } /* Vegas Gold */ .tshirtinfoswatch > .veilwideland { background-color: #6b5c51; border: solid 3px #6b5c51; } /* Veil Wideland */ .tshirtinfoswatch > .vineyard { background-color: #815761; border: solid 3px #815761; } /* Vineyard */ .tshirtinfoswatch > .vineyardred { background-color: #846465; border: solid 3px #846465; } /* Vineyard Red */ .tshirtinfoswatch > .vintageblack { background-color: #232325; border: solid 3px #232325; } /* Vintage Black */ .tshirtinfoswatch > .vintageblueoxford { background-color: #a7cfd1; border: solid 3px #a7cfd1; } /* Vintage Blue Oxford */ .tshirtinfoswatch > .vintagebrown { background-color: #896859; border: solid 3px #896859; } /* Vintage Brown */ .tshirtinfoswatch > .vintagedenim { background-color: #7c8a97; border: solid 3px #7c8a97; } /* Vintage Denim */ .tshirtinfoswatch > .vintageheatherblue { background-color: #637fab; border: solid 3px #637fab; } /* Vintage Heather Blue */ .tshirtinfoswatch > .vintagenavy { background-color: #46525d; border: solid 3px #46525d; } /* Vintage Navy */ .tshirtinfoswatch > .vintagered { background-color: #d45662; border: solid 3px #d45662; } /* Vintage Red */ .tshirtinfoswatch > .vintagewhite { background-color: #e8e4e0; border: solid 3px #e8e4e0; } /* Vintage White */ .tshirtinfoswatch > .violet { background-color: #a855f7; border: solid 3px #a855f7; } /* Violet */ .tshirtinfoswatch > .vividlime { background-color: #7cd361; border: solid 3px #7cd361; } /* Vivid Lime */ .tshirtinfoswatch > .warmgrey { background-color: #8c8276; border: solid 3px #8c8276; } /* Warm Grey */ .tshirtinfoswatch > .washeddenim { background-color: #8a9eb9; border: solid 3px #8a9eb9; } /* Washed Denim */ .tshirtinfoswatch > .watermelon { background-color: #f68477; border: solid 3px #f68477; } /* Watermelon */ .tshirtinfoswatch > .white { background-color: #ffffff; border: solid 3px #ffffff; } /* White */ .tshirtinfoswatch > .whiteblack { background: linear-gradient(135deg, #ccd1d2 50%, #000000 50%); border: solid 3px #000000; } /* White/Black */ .tshirtinfoswatch > .whiteblackaccent { background-color: #a6a6a6; border: solid 3px #a6a6a6; } /* White/Black Accent */ .tshirtinfoswatch > .whiteflecktriblend { background-color: #dcdbe3; border: solid 3px #dcdbe3; } /* White Fleck Triblend */ .tshirtinfoswatch > .whiteglow { background-color: #eae9ef; border: solid 3px #eae9ef; } /* White Glow */ .tshirtinfoswatch > .whiteglowsedategrey { background-color: #e6e5ec; border: solid 3px #e6e5ec; } /* White Glow/Sedate Grey */ .tshirtinfoswatch > .whitelightblueaccent { background-color: #a6a6a6; border: solid 3px #a6a6a6; } /* White/Light Blue Accent */ .tshirtinfoswatch > .whitelightgreenaccent { background-color: #a6a6a6; border: solid 3px #a6a6a6; } /* White/Light Green Accent */ .tshirtinfoswatch > .whitemodgrey { background-color: #efefef; border: solid 3px #efefef; } /* White/Mod Grey */ .tshirtinfoswatch > .whitenavy { background: linear-gradient(135deg, #cfcfcf 50%, #1e3a5f 50%); border: solid 3px #1e3a5f; } /* White/Navy */ .tshirtinfoswatch > .whitenavyaccent { background-color: #a6a6a6; border: solid 3px #a6a6a6; } /* White/Navy Accent */ .tshirtinfoswatch > .whiteorangeaccent { background-color: #a6a6a6; border: solid 3px #a6a6a6; } /* White/Orange Accent */ .tshirtinfoswatch > .whiteoxford { background-color: #dfdfdf; border: solid 3px #dfdfdf; } /* White Oxford */ .tshirtinfoswatch > .whitepinkaccent { background-color: #a6a6a6; border: solid 3px #a6a6a6; } /* White/Pink Accent */ .tshirtinfoswatch > .whitepitchgrey { background-color: #e7e6eb; border: solid 3px #e7e6eb; } /* White/Pitch Grey */ .tshirtinfoswatch > .whitepitchgreymediumhe { background-color: #e8e9ed; border: solid 3px #e8e9ed; } /* White/Pitch Grey Medium He */ .tshirtinfoswatch > .whitered { background: linear-gradient(135deg, #c9d3d5 50%, #b91c1c 50%); border: solid 3px #b91c1c; } /* White/Red */ .tshirtinfoswatch > .whiteredaccent { background-color: #a6a6a6; border: solid 3px #a6a6a6; } /* White/Red Accent */ .tshirtinfoswatch > .whiteroyal { background: linear-gradient(135deg, #cfcfcf 50%, #16447f 50%); border: solid 3px #16447f; } /* White/Royal */ .tshirtinfoswatch > .whitewhite { background-color: #eaeaea; border: solid 3px #eaeaea; } /* White/White */ .tshirtinfoswatch > .whiteyellowaccent { background-color: #a6a6a6; border: solid 3px #a6a6a6; } /* White/Yellow Accent */ .tshirtinfoswatch > .wine { background-color: #7c6477; border: solid 3px #7c6477; } /* Wine */ .tshirtinfoswatch > .yam { background-color: #bd7350; border: solid 3px #bd7350; } /* Yam */ .tshirtinfoswatch > .yellow { background-color: #fbbf24; border: solid 3px #fbbf24; } /* Yellow */ .tshirtinfoswatch > .yellowgoldtriblend { background-color: #fdbb29; border: solid 3px #fdbb29; } /* Yellow Gold Triblend */ .tshirtinfoswatch > .yellowhaze { background-color: #fedba5; border: solid 3px #fedba5; } /* Yellow Haze */ /* --- 2026-06-04 SKU-specific shirt backgrounds (.tshirtBg.color{N}.{slug}); from actual Pricing variations --- */ /* Style 100 — gildan_18500b (16 colors) */ .tshirtBg.color1.gildan_18500b { background-image: url("../images/shirts/gildan_18500b/Black.png"); } /* Black */ .tshirtBg.color2.gildan_18500b { background-image: url("../images/shirts/gildan_18500b/White.png"); } /* White */ .tshirtBg.color3.gildan_18500b { background-image: url("../images/shirts/gildan_18500b/CharcoalGrey.png"); } /* Charcoal Grey */ .tshirtBg.color8.gildan_18500b { background-image: url("../images/shirts/gildan_18500b/IrishGreen.png"); } /* Irish Green */ .tshirtBg.color10.gildan_18500b { background-image: url("../images/shirts/gildan_18500b/LightPink.png"); } /* Light Pink */ .tshirtBg.color12.gildan_18500b { background-image: url("../images/shirts/gildan_18500b/Navy.png"); } /* Navy */ .tshirtBg.color14.gildan_18500b { background-image: url("../images/shirts/gildan_18500b/Purple.png"); } /* Purple */ .tshirtBg.color15.gildan_18500b { background-image: url("../images/shirts/gildan_18500b/Red.png"); } /* Red */ .tshirtBg.color16.gildan_18500b { background-image: url("../images/shirts/gildan_18500b/RoyalBlue.png"); } /* Royal Blue */ .tshirtBg.color17.gildan_18500b { background-image: url("../images/shirts/gildan_18500b/SportGrey.png"); } /* Sport Grey */ .tshirtBg.color83.gildan_18500b { background-image: url("../images/shirts/gildan_18500b/Maroon.png"); } /* Maroon */ .tshirtBg.color84.gildan_18500b { background-image: url("../images/shirts/gildan_18500b/CardinalRed.png"); } /* Cardinal Red */ .tshirtBg.color85.gildan_18500b { background-image: url("../images/shirts/gildan_18500b/Heliconia.png"); } /* Heliconia */ .tshirtBg.color92.gildan_18500b { background-image: url("../images/shirts/gildan_18500b/Forest.png"); } /* Forest */ .tshirtBg.color149.gildan_18500b { background-image: url("../images/shirts/gildan_18500b/CarolinaBlue.png"); } /* Carolina Blue */ .tshirtBg.color150.gildan_18500b { background-image: url("../images/shirts/gildan_18500b/DarkHeather.png"); } /* Dark Heather */ /* Style 101 — gildan_18500 (28 colors) */ .tshirtBg.color1.gildan_18500 { background-image: url("../images/shirts/gildan_18500/Black.png"); } /* Black */ .tshirtBg.color2.gildan_18500 { background-image: url("../images/shirts/gildan_18500/White.png"); } /* White */ .tshirtBg.color3.gildan_18500 { background-image: url("../images/shirts/gildan_18500/CharcoalGrey.png"); } /* Charcoal Grey */ .tshirtBg.color5.gildan_18500 { background-image: url("../images/shirts/gildan_18500/DarkChocolate.png"); } /* Dark Chocolate */ .tshirtBg.color6.gildan_18500 { background-image: url("../images/shirts/gildan_18500/ForestGreen.png"); } /* Forest Green */ .tshirtBg.color7.gildan_18500 { background-image: url("../images/shirts/gildan_18500/Gold.png"); } /* Gold */ .tshirtBg.color8.gildan_18500 { background-image: url("../images/shirts/gildan_18500/IrishGreen.png"); } /* Irish Green */ .tshirtBg.color9.gildan_18500 { background-image: url("../images/shirts/gildan_18500/LightBlue.png"); } /* Light Blue */ .tshirtBg.color10.gildan_18500 { background-image: url("../images/shirts/gildan_18500/LightPink.png"); } /* Light Pink */ .tshirtBg.color11.gildan_18500 { background-image: url("../images/shirts/gildan_18500/MilitaryGreen.png"); } /* Military Green */ .tshirtBg.color12.gildan_18500 { background-image: url("../images/shirts/gildan_18500/Navy.png"); } /* Navy */ .tshirtBg.color13.gildan_18500 { background-image: url("../images/shirts/gildan_18500/Orange.png"); } /* Orange */ .tshirtBg.color14.gildan_18500 { background-image: url("../images/shirts/gildan_18500/Purple.png"); } /* Purple */ .tshirtBg.color15.gildan_18500 { background-image: url("../images/shirts/gildan_18500/Red.png"); } /* Red */ .tshirtBg.color16.gildan_18500 { background-image: url("../images/shirts/gildan_18500/RoyalBlue.png"); } /* Royal Blue */ .tshirtBg.color17.gildan_18500 { background-image: url("../images/shirts/gildan_18500/SportGrey.png"); } /* Sport Grey */ .tshirtBg.color82.gildan_18500 { background-image: url("../images/shirts/gildan_18500/ColumbiaBlue.png"); } /* Columbia Blue */ .tshirtBg.color83.gildan_18500 { background-image: url("../images/shirts/gildan_18500/Maroon.png"); } /* Maroon */ .tshirtBg.color84.gildan_18500 { background-image: url("../images/shirts/gildan_18500/CardinalRed.png"); } /* Cardinal Red */ .tshirtBg.color85.gildan_18500 { background-image: url("../images/shirts/gildan_18500/Heliconia.png"); } /* Heliconia */ .tshirtBg.color87.gildan_18500 { background-image: url("../images/shirts/gildan_18500/Ash.png"); } /* Ash */ .tshirtBg.color127.gildan_18500 { background-image: url("../images/shirts/gildan_18500/Sand.png"); } /* Sand */ .tshirtBg.color149.gildan_18500 { background-image: url("../images/shirts/gildan_18500/CarolinaBlue.png"); } /* Carolina Blue */ .tshirtBg.color150.gildan_18500 { background-image: url("../images/shirts/gildan_18500/DarkHeather.png"); } /* Dark Heather */ .tshirtBg.color151.gildan_18500 { background-image: url("../images/shirts/gildan_18500/Garnet.png"); } /* Garnet */ .tshirtBg.color152.gildan_18500 { background-image: url("../images/shirts/gildan_18500/GraphiteHeather.png"); } /* Graphite Heather */ .tshirtBg.color153.gildan_18500 { background-image: url("../images/shirts/gildan_18500/Royal.png"); } /* Royal */ .tshirtBg.color154.gildan_18500 { background-image: url("../images/shirts/gildan_18500/CherryRed.png"); } /* Cherry Red */ /* Style 102 — gildan_18000 (24 colors) */ .tshirtBg.color1.gildan_18000 { background-image: url("../images/shirts/gildan_18000/Black.png"); } /* Black */ .tshirtBg.color2.gildan_18000 { background-image: url("../images/shirts/gildan_18000/White.png"); } /* White */ .tshirtBg.color3.gildan_18000 { background-image: url("../images/shirts/gildan_18000/CharcoalGrey.png"); } /* Charcoal Grey */ .tshirtBg.color5.gildan_18000 { background-image: url("../images/shirts/gildan_18000/DarkChocolate.png"); } /* Dark Chocolate */ .tshirtBg.color6.gildan_18000 { background-image: url("../images/shirts/gildan_18000/ForestGreen.png"); } /* Forest Green */ .tshirtBg.color7.gildan_18000 { background-image: url("../images/shirts/gildan_18000/Gold.png"); } /* Gold */ .tshirtBg.color8.gildan_18000 { background-image: url("../images/shirts/gildan_18000/IrishGreen.png"); } /* Irish Green */ .tshirtBg.color9.gildan_18000 { background-image: url("../images/shirts/gildan_18000/LightBlue.png"); } /* Light Blue */ .tshirtBg.color10.gildan_18000 { background-image: url("../images/shirts/gildan_18000/LightPink.png"); } /* Light Pink */ .tshirtBg.color11.gildan_18000 { background-image: url("../images/shirts/gildan_18000/MilitaryGreen.png"); } /* Military Green */ .tshirtBg.color12.gildan_18000 { background-image: url("../images/shirts/gildan_18000/Navy.png"); } /* Navy */ .tshirtBg.color14.gildan_18000 { background-image: url("../images/shirts/gildan_18000/Purple.png"); } /* Purple */ .tshirtBg.color15.gildan_18000 { background-image: url("../images/shirts/gildan_18000/Red.png"); } /* Red */ .tshirtBg.color16.gildan_18000 { background-image: url("../images/shirts/gildan_18000/RoyalBlue.png"); } /* Royal Blue */ .tshirtBg.color17.gildan_18000 { background-image: url("../images/shirts/gildan_18000/SportGrey.png"); } /* Sport Grey */ .tshirtBg.color83.gildan_18000 { background-image: url("../images/shirts/gildan_18000/Maroon.png"); } /* Maroon */ .tshirtBg.color84.gildan_18000 { background-image: url("../images/shirts/gildan_18000/CardinalRed.png"); } /* Cardinal Red */ .tshirtBg.color85.gildan_18000 { background-image: url("../images/shirts/gildan_18000/Heliconia.png"); } /* Heliconia */ .tshirtBg.color87.gildan_18000 { background-image: url("../images/shirts/gildan_18000/Ash.png"); } /* Ash */ .tshirtBg.color127.gildan_18000 { background-image: url("../images/shirts/gildan_18000/Sand.png"); } /* Sand */ .tshirtBg.color149.gildan_18000 { background-image: url("../images/shirts/gildan_18000/CarolinaBlue.png"); } /* Carolina Blue */ .tshirtBg.color150.gildan_18000 { background-image: url("../images/shirts/gildan_18000/DarkHeather.png"); } /* Dark Heather */ .tshirtBg.color151.gildan_18000 { background-image: url("../images/shirts/gildan_18000/Garnet.png"); } /* Garnet */ .tshirtBg.color152.gildan_18000 { background-image: url("../images/shirts/gildan_18000/GraphiteHeather.png"); } /* Graphite Heather */ /* Style 106 — gildan_64000: no active variants in Pricing */ /* Style 109 — gildan_2400 (19 colors) */ .tshirtBg.color1.gildan_2400 { background-image: url("../images/shirts/gildan_2400/Black.png"); } /* Black */ .tshirtBg.color2.gildan_2400 { background-image: url("../images/shirts/gildan_2400/White.png"); } /* White */ .tshirtBg.color6.gildan_2400 { background-image: url("../images/shirts/gildan_2400/ForestGreen.png"); } /* Forest Green */ .tshirtBg.color7.gildan_2400 { background-image: url("../images/shirts/gildan_2400/Gold.png"); } /* Gold */ .tshirtBg.color8.gildan_2400 { background-image: url("../images/shirts/gildan_2400/IrishGreen.png"); } /* Irish Green */ .tshirtBg.color9.gildan_2400 { background-image: url("../images/shirts/gildan_2400/LightBlue.png"); } /* Light Blue */ .tshirtBg.color10.gildan_2400 { background-image: url("../images/shirts/gildan_2400/LightPink.png"); } /* Light Pink */ .tshirtBg.color11.gildan_2400 { background-image: url("../images/shirts/gildan_2400/MilitaryGreen.png"); } /* Military Green */ .tshirtBg.color12.gildan_2400 { background-image: url("../images/shirts/gildan_2400/Navy.png"); } /* Navy */ .tshirtBg.color14.gildan_2400 { background-image: url("../images/shirts/gildan_2400/Purple.png"); } /* Purple */ .tshirtBg.color15.gildan_2400 { background-image: url("../images/shirts/gildan_2400/Red.png"); } /* Red */ .tshirtBg.color16.gildan_2400 { background-image: url("../images/shirts/gildan_2400/RoyalBlue.png"); } /* Royal Blue */ .tshirtBg.color17.gildan_2400 { background-image: url("../images/shirts/gildan_2400/SportGrey.png"); } /* Sport Grey */ .tshirtBg.color83.gildan_2400 { background-image: url("../images/shirts/gildan_2400/Maroon.png"); } /* Maroon */ .tshirtBg.color84.gildan_2400 { background-image: url("../images/shirts/gildan_2400/CardinalRed.png"); } /* Cardinal Red */ .tshirtBg.color127.gildan_2400 { background-image: url("../images/shirts/gildan_2400/Sand.png"); } /* Sand */ .tshirtBg.color149.gildan_2400 { background-image: url("../images/shirts/gildan_2400/CarolinaBlue.png"); } /* Carolina Blue */ .tshirtBg.color150.gildan_2400 { background-image: url("../images/shirts/gildan_2400/DarkHeather.png"); } /* Dark Heather */ .tshirtBg.color153.gildan_2400 { background-image: url("../images/shirts/gildan_2400/Royal.png"); } /* Royal */ /* Style 113 — gildan_64000l (16 colors) */ .tshirtBg.color1.gildan_64000l { background-image: url("../images/shirts/gildan_64000l/Black.png"); } /* Black */ .tshirtBg.color2.gildan_64000l { background-image: url("../images/shirts/gildan_64000l/White.png"); } /* White */ .tshirtBg.color12.gildan_64000l { background-image: url("../images/shirts/gildan_64000l/Navy.png"); } /* Navy */ .tshirtBg.color14.gildan_64000l { background-image: url("../images/shirts/gildan_64000l/Purple.png"); } /* Purple */ .tshirtBg.color15.gildan_64000l { background-image: url("../images/shirts/gildan_64000l/Red.png"); } /* Red */ .tshirtBg.color16.gildan_64000l { background-image: url("../images/shirts/gildan_64000l/RoyalBlue.png"); } /* Royal Blue */ .tshirtBg.color17.gildan_64000l { background-image: url("../images/shirts/gildan_64000l/SportGrey.png"); } /* Sport Grey */ .tshirtBg.color53.gildan_64000l { background-image: url("../images/shirts/gildan_64000l/Azalea.png"); } /* Azalea */ .tshirtBg.color85.gildan_64000l { background-image: url("../images/shirts/gildan_64000l/Heliconia.png"); } /* Heliconia */ .tshirtBg.color127.gildan_64000l { background-image: url("../images/shirts/gildan_64000l/Sand.png"); } /* Sand */ .tshirtBg.color150.gildan_64000l { background-image: url("../images/shirts/gildan_64000l/DarkHeather.png"); } /* Dark Heather */ .tshirtBg.color152.gildan_64000l { background-image: url("../images/shirts/gildan_64000l/GraphiteHeather.png"); } /* Graphite Heather */ .tshirtBg.color153.gildan_64000l { background-image: url("../images/shirts/gildan_64000l/Royal.png"); } /* Royal */ .tshirtBg.color157.gildan_64000l { background-image: url("../images/shirts/gildan_64000l/HeatherPurple.png"); } /* Heather Purple */ .tshirtBg.color160.gildan_64000l { background-image: url("../images/shirts/gildan_64000l/RsSportGrey.png"); } /* Rs Sport Grey */ .tshirtBg.color458.gildan_64000l { background-image: url("../images/shirts/gildan_64000l/AntiqueSapphire.png"); } /* Antique Sapphire */ /* Style 114 — gildan_5000l (14 colors) */ .tshirtBg.color1.gildan_5000l { background-image: url("../images/shirts/gildan_5000l/Black.png"); } /* Black */ .tshirtBg.color2.gildan_5000l { background-image: url("../images/shirts/gildan_5000l/White.png"); } /* White */ .tshirtBg.color8.gildan_5000l { background-image: url("../images/shirts/gildan_5000l/IrishGreen.png"); } /* Irish Green */ .tshirtBg.color9.gildan_5000l { background-image: url("../images/shirts/gildan_5000l/LightBlue.png"); } /* Light Blue */ .tshirtBg.color10.gildan_5000l { background-image: url("../images/shirts/gildan_5000l/LightPink.png"); } /* Light Pink */ .tshirtBg.color12.gildan_5000l { background-image: url("../images/shirts/gildan_5000l/Navy.png"); } /* Navy */ .tshirtBg.color14.gildan_5000l { background-image: url("../images/shirts/gildan_5000l/Purple.png"); } /* Purple */ .tshirtBg.color15.gildan_5000l { background-image: url("../images/shirts/gildan_5000l/Red.png"); } /* Red */ .tshirtBg.color16.gildan_5000l { background-image: url("../images/shirts/gildan_5000l/RoyalBlue.png"); } /* Royal Blue */ .tshirtBg.color17.gildan_5000l { background-image: url("../images/shirts/gildan_5000l/SportGrey.png"); } /* Sport Grey */ .tshirtBg.color53.gildan_5000l { background-image: url("../images/shirts/gildan_5000l/Azalea.png"); } /* Azalea */ .tshirtBg.color54.gildan_5000l { background-image: url("../images/shirts/gildan_5000l/Sapphire.png"); } /* Sapphire */ .tshirtBg.color85.gildan_5000l { background-image: url("../images/shirts/gildan_5000l/Heliconia.png"); } /* Heliconia */ .tshirtBg.color153.gildan_5000l { background-image: url("../images/shirts/gildan_5000l/Royal.png"); } /* Royal */ /* Style 116 — independent_ss3000: no active variants in Pricing */ /* Style 121 — independent_ss4500: no active variants in Pricing */ /* Style 124 — nextlevel_3600 (22 colors) */ .tshirtBg.color1.nextlevel_3600 { background-image: url("../images/shirts/nextlevel_3600/Black.png"); } /* Black */ .tshirtBg.color2.nextlevel_3600 { background-image: url("../images/shirts/nextlevel_3600/White.png"); } /* White */ .tshirtBg.color6.nextlevel_3600 { background-image: url("../images/shirts/nextlevel_3600/ForestGreen.png"); } /* Forest Green */ .tshirtBg.color9.nextlevel_3600 { background-image: url("../images/shirts/nextlevel_3600/LightBlue.png"); } /* Light Blue */ .tshirtBg.color10.nextlevel_3600 { background-image: url("../images/shirts/nextlevel_3600/LightPink.png"); } /* Light Pink */ .tshirtBg.color11.nextlevel_3600 { background-image: url("../images/shirts/nextlevel_3600/MilitaryGreen.png"); } /* Military Green */ .tshirtBg.color12.nextlevel_3600 { background-image: url("../images/shirts/nextlevel_3600/Navy.png"); } /* Navy */ .tshirtBg.color15.nextlevel_3600 { background-image: url("../images/shirts/nextlevel_3600/Red.png"); } /* Red */ .tshirtBg.color83.nextlevel_3600 { background-image: url("../images/shirts/nextlevel_3600/Maroon.png"); } /* Maroon */ .tshirtBg.color101.nextlevel_3600 { background-image: url("../images/shirts/nextlevel_3600/Turquoise.png"); } /* Turquoise */ .tshirtBg.color115.nextlevel_3600 { background-image: url("../images/shirts/nextlevel_3600/Cardinal.png"); } /* Cardinal */ .tshirtBg.color127.nextlevel_3600 { background-image: url("../images/shirts/nextlevel_3600/Sand.png"); } /* Sand */ .tshirtBg.color153.nextlevel_3600 { background-image: url("../images/shirts/nextlevel_3600/Royal.png"); } /* Royal */ .tshirtBg.color172.nextlevel_3600 { background-image: url("../images/shirts/nextlevel_3600/KellyGreen.png"); } /* Kelly Green */ .tshirtBg.color175.nextlevel_3600 { background-image: url("../images/shirts/nextlevel_3600/PurpleRush.png"); } /* Purple Rush */ .tshirtBg.color177.nextlevel_3600 { background-image: url("../images/shirts/nextlevel_3600/Cream.png"); } /* Cream */ .tshirtBg.color178.nextlevel_3600 { background-image: url("../images/shirts/nextlevel_3600/HeavyMetal.png"); } /* Heavy Metal */ .tshirtBg.color179.nextlevel_3600 { background-image: url("../images/shirts/nextlevel_3600/LightGrey.png"); } /* Light Grey */ .tshirtBg.color181.nextlevel_3600 { background-image: url("../images/shirts/nextlevel_3600/Indigo.png"); } /* Indigo */ .tshirtBg.color185.nextlevel_3600 { background-image: url("../images/shirts/nextlevel_3600/HeatherGrey.png"); } /* Heather Grey */ .tshirtBg.color239.nextlevel_3600 { background-image: url("../images/shirts/nextlevel_3600/CoolBlue.png"); } /* Cool Blue */ .tshirtBg.color240.nextlevel_3600 { background-image: url("../images/shirts/nextlevel_3600/LightOlive.png"); } /* Light Olive */ /* Style 125 — lat_3321 (5 colors) */ .tshirtBg.color1.lat_3321 { background-image: url("../images/shirts/lat_3321/Black.png"); } /* Black */ .tshirtBg.color2.lat_3321 { background-image: url("../images/shirts/lat_3321/White.png"); } /* White */ .tshirtBg.color12.lat_3321 { background-image: url("../images/shirts/lat_3321/Navy.png"); } /* Navy */ .tshirtBg.color17.lat_3321 { background-image: url("../images/shirts/lat_3321/SportGrey.png"); } /* Sport Grey */ .tshirtBg.color58.lat_3321 { background-image: url("../images/shirts/lat_3321/Pink.png"); } /* Pink */ /* Style 290 — bella_3501 (24 colors) */ .tshirtBg.color1.bella_3501 { background-image: url("../images/shirts/bella_3501/Black.png"); } /* Black */ .tshirtBg.color2.bella_3501 { background-image: url("../images/shirts/bella_3501/White.png"); } /* White */ .tshirtBg.color11.bella_3501 { background-image: url("../images/shirts/bella_3501/MilitaryGreen.png"); } /* Military Green */ .tshirtBg.color12.bella_3501 { background-image: url("../images/shirts/bella_3501/Navy.png"); } /* Navy */ .tshirtBg.color15.bella_3501 { background-image: url("../images/shirts/bella_3501/Red.png"); } /* Red */ .tshirtBg.color16.bella_3501 { background-image: url("../images/shirts/bella_3501/RoyalBlue.png"); } /* Royal Blue */ .tshirtBg.color31.bella_3501 { background-image: url("../images/shirts/bella_3501/Natural.png"); } /* Natural */ .tshirtBg.color55.bella_3501 { background-image: url("../images/shirts/bella_3501/Teal.png"); } /* Teal */ .tshirtBg.color56.bella_3501 { background-image: url("../images/shirts/bella_3501/DarkGrey.png"); } /* Dark Grey */ .tshirtBg.color83.bella_3501 { background-image: url("../images/shirts/bella_3501/Maroon.png"); } /* Maroon */ .tshirtBg.color87.bella_3501 { background-image: url("../images/shirts/bella_3501/Ash.png"); } /* Ash */ .tshirtBg.color92.bella_3501 { background-image: url("../images/shirts/bella_3501/Forest.png"); } /* Forest */ .tshirtBg.color98.bella_3501 { background-image: url("../images/shirts/bella_3501/SteelBlue.png"); } /* Steel Blue */ .tshirtBg.color99.bella_3501 { background-image: url("../images/shirts/bella_3501/TeamPurple.png"); } /* Team Purple */ .tshirtBg.color100.bella_3501 { background-image: url("../images/shirts/bella_3501/TrueRoyal.png"); } /* True Royal */ .tshirtBg.color115.bella_3501 { background-image: url("../images/shirts/bella_3501/Cardinal.png"); } /* Cardinal */ .tshirtBg.color116.bella_3501 { background-image: url("../images/shirts/bella_3501/Storm.png"); } /* Storm */ .tshirtBg.color199.bella_3501 { background-image: url("../images/shirts/bella_3501/Olive.png"); } /* Olive */ .tshirtBg.color254.bella_3501 { background-image: url("../images/shirts/bella_3501/Asphalt.png"); } /* Asphalt */ .tshirtBg.color258.bella_3501 { background-image: url("../images/shirts/bella_3501/Toast.png"); } /* Toast */ .tshirtBg.color414.bella_3501 { background-image: url("../images/shirts/bella_3501/BlueStorm.png"); } /* Blue Storm */ .tshirtBg.color415.bella_3501 { background-image: url("../images/shirts/bella_3501/DarkLavender.png"); } /* Dark Lavender */ .tshirtBg.color417.bella_3501 { background-image: url("../images/shirts/bella_3501/LightViolet.png"); } /* Light Violet */ .tshirtBg.color419.bella_3501 { background-image: url("../images/shirts/bella_3501/VintageBrown.png"); } /* Vintage Brown */ /* Style 379 — bella_3001 (83 colors) */ .tshirtBg.color1.bella_3001 { background-image: url("../images/shirts/bella_3001/Black.png"); } /* Black */ .tshirtBg.color2.bella_3001 { background-image: url("../images/shirts/bella_3001/White.png"); } /* White */ .tshirtBg.color3.bella_3001 { background-image: url("../images/shirts/bella_3001/CharcoalGrey.png"); } /* Charcoal Grey */ .tshirtBg.color7.bella_3001 { background-image: url("../images/shirts/bella_3001/Gold.png"); } /* Gold */ .tshirtBg.color9.bella_3001 { background-image: url("../images/shirts/bella_3001/LightBlue.png"); } /* Light Blue */ .tshirtBg.color11.bella_3001 { background-image: url("../images/shirts/bella_3001/MilitaryGreen.png"); } /* Military Green */ .tshirtBg.color12.bella_3001 { background-image: url("../images/shirts/bella_3001/Navy.png"); } /* Navy */ .tshirtBg.color13.bella_3001 { background-image: url("../images/shirts/bella_3001/Orange.png"); } /* Orange */ .tshirtBg.color15.bella_3001 { background-image: url("../images/shirts/bella_3001/Red.png"); } /* Red */ .tshirtBg.color16.bella_3001 { background-image: url("../images/shirts/bella_3001/RoyalBlue.png"); } /* Royal Blue */ .tshirtBg.color18.bella_3001 { background-image: url("../images/shirts/bella_3001/Tan.png"); } /* Tan */ .tshirtBg.color23.bella_3001 { background-image: url("../images/shirts/bella_3001/Burgundy.png"); } /* Burgundy */ .tshirtBg.color30.bella_3001 { background-image: url("../images/shirts/bella_3001/HotPink.png"); } /* Hot Pink */ .tshirtBg.color31.bella_3001 { background-image: url("../images/shirts/bella_3001/Natural.png"); } /* Natural */ .tshirtBg.color52.bella_3001 { background-image: url("../images/shirts/bella_3001/Silver.png"); } /* Silver */ .tshirtBg.color55.bella_3001 { background-image: url("../images/shirts/bella_3001/Teal.png"); } /* Teal */ .tshirtBg.color56.bella_3001 { background-image: url("../images/shirts/bella_3001/DarkGrey.png"); } /* Dark Grey */ .tshirtBg.color58.bella_3001 { background-image: url("../images/shirts/bella_3001/Pink.png"); } /* Pink */ .tshirtBg.color61.bella_3001 { background-image: url("../images/shirts/bella_3001/BurntOrange.png"); } /* Burnt Orange */ .tshirtBg.color80.bella_3001 { background-image: url("../images/shirts/bella_3001/Berry.png"); } /* Berry */ .tshirtBg.color82.bella_3001 { background-image: url("../images/shirts/bella_3001/ColumbiaBlue.png"); } /* Columbia Blue */ .tshirtBg.color83.bella_3001 { background-image: url("../images/shirts/bella_3001/Maroon.png"); } /* Maroon */ .tshirtBg.color86.bella_3001 { background-image: url("../images/shirts/bella_3001/Aqua.png"); } /* Aqua */ .tshirtBg.color87.bella_3001 { background-image: url("../images/shirts/bella_3001/Ash.png"); } /* Ash */ .tshirtBg.color88.bella_3001 { background-image: url("../images/shirts/bella_3001/BabyBlue.png"); } /* Baby Blue */ .tshirtBg.color89.bella_3001 { background-image: url("../images/shirts/bella_3001/Brown.png"); } /* Brown */ .tshirtBg.color90.bella_3001 { background-image: url("../images/shirts/bella_3001/DeepTeal.png"); } /* Deep Teal */ .tshirtBg.color91.bella_3001 { background-image: url("../images/shirts/bella_3001/Evergreen.png"); } /* Evergreen */ .tshirtBg.color92.bella_3001 { background-image: url("../images/shirts/bella_3001/Forest.png"); } /* Forest */ .tshirtBg.color93.bella_3001 { background-image: url("../images/shirts/bella_3001/Fuchsia.png"); } /* Fuchsia */ .tshirtBg.color94.bella_3001 { background-image: url("../images/shirts/bella_3001/Kelly.png"); } /* Kelly */ .tshirtBg.color95.bella_3001 { background-image: url("../images/shirts/bella_3001/Mint.png"); } /* Mint */ .tshirtBg.color96.bella_3001 { background-image: url("../images/shirts/bella_3001/SoftCream.png"); } /* Soft Cream */ .tshirtBg.color97.bella_3001 { background-image: url("../images/shirts/bella_3001/SoftPink.png"); } /* Soft Pink */ .tshirtBg.color98.bella_3001 { background-image: url("../images/shirts/bella_3001/SteelBlue.png"); } /* Steel Blue */ .tshirtBg.color99.bella_3001 { background-image: url("../images/shirts/bella_3001/TeamPurple.png"); } /* Team Purple */ .tshirtBg.color100.bella_3001 { background-image: url("../images/shirts/bella_3001/TrueRoyal.png"); } /* True Royal */ .tshirtBg.color101.bella_3001 { background-image: url("../images/shirts/bella_3001/Turquoise.png"); } /* Turquoise */ .tshirtBg.color102.bella_3001 { background-image: url("../images/shirts/bella_3001/VintageBlack.png"); } /* Vintage Black */ .tshirtBg.color103.bella_3001 { background-image: url("../images/shirts/bella_3001/Yellow.png"); } /* Yellow */ .tshirtBg.color115.bella_3001 { background-image: url("../images/shirts/bella_3001/Cardinal.png"); } /* Cardinal */ .tshirtBg.color116.bella_3001 { background-image: url("../images/shirts/bella_3001/Storm.png"); } /* Storm */ .tshirtBg.color143.bella_3001 { background-image: url("../images/shirts/bella_3001/Mustard.png"); } /* Mustard */ .tshirtBg.color144.bella_3001 { background-image: url("../images/shirts/bella_3001/Orchid.png"); } /* Orchid */ .tshirtBg.color173.bella_3001 { background-image: url("../images/shirts/bella_3001/Lilac.png"); } /* Lilac */ .tshirtBg.color187.bella_3001 { background-image: url("../images/shirts/bella_3001/CharityPink.png"); } /* Charity Pink */ .tshirtBg.color188.bella_3001 { background-image: url("../images/shirts/bella_3001/MaizeYellow.png"); } /* Maize Yellow */ .tshirtBg.color199.bella_3001 { background-image: url("../images/shirts/bella_3001/Olive.png"); } /* Olive */ .tshirtBg.color219.bella_3001 { background-image: url("../images/shirts/bella_3001/Peach.png"); } /* Peach */ .tshirtBg.color223.bella_3001 { background-image: url("../images/shirts/bella_3001/VintageNavy.png"); } /* Vintage Navy */ .tshirtBg.color227.bella_3001 { background-image: url("../images/shirts/bella_3001/VintageRed.png"); } /* Vintage Red */ .tshirtBg.color230.bella_3001 { background-image: url("../images/shirts/bella_3001/Coral.png"); } /* Coral */ .tshirtBg.color254.bella_3001 { background-image: url("../images/shirts/bella_3001/Asphalt.png"); } /* Asphalt */ .tshirtBg.color261.bella_3001 { background-image: url("../images/shirts/bella_3001/Mauve.png"); } /* Mauve */ .tshirtBg.color273.bella_3001 { background-image: url("../images/shirts/bella_3001/Clay.png"); } /* Clay */ .tshirtBg.color292.bella_3001 { background-image: url("../images/shirts/bella_3001/Sage.png"); } /* Sage */ .tshirtBg.color323.bella_3001 { background-image: url("../images/shirts/bella_3001/PebbleBrown.png"); } /* Pebble Brown */ .tshirtBg.color411.bella_3001 { background-image: url("../images/shirts/bella_3001/DustyBlue.png"); } /* Dusty Blue */ .tshirtBg.color413.bella_3001 { background-image: url("../images/shirts/bella_3001/SolidAthleticGrey.png"); } /* Solid Athletic Grey */ .tshirtBg.color414.bella_3001 { background-image: url("../images/shirts/bella_3001/BlueStorm.png"); } /* Blue Storm */ .tshirtBg.color415.bella_3001 { background-image: url("../images/shirts/bella_3001/DarkLavender.png"); } /* Dark Lavender */ .tshirtBg.color416.bella_3001 { background-image: url("../images/shirts/bella_3001/LavenderBlue.png"); } /* Lavender Blue */ .tshirtBg.color417.bella_3001 { background-image: url("../images/shirts/bella_3001/LightViolet.png"); } /* Light Violet */ .tshirtBg.color419.bella_3001 { background-image: url("../images/shirts/bella_3001/VintageBrown.png"); } /* Vintage Brown */ .tshirtBg.color421.bella_3001 { background-image: url("../images/shirts/bella_3001/VintageWhite.png"); } /* Vintage White */ .tshirtBg.color422.bella_3001 { background-image: url("../images/shirts/bella_3001/Leaf.png"); } /* Leaf */ .tshirtBg.color423.bella_3001 { background-image: url("../images/shirts/bella_3001/PinkGravel.png"); } /* Pink Gravel */ .tshirtBg.color424.bella_3001 { background-image: url("../images/shirts/bella_3001/PurpleStorm.png"); } /* Purple Storm */ .tshirtBg.color425.bella_3001 { background-image: url("../images/shirts/bella_3001/VintageDenim.png"); } /* Vintage Denim */ .tshirtBg.color482.bella_3001 { background-image: url("../images/shirts/bella_3001/Cocoa.png"); } /* Cocoa */ .tshirtBg.color505.bella_3001 { background-image: url("../images/shirts/bella_3001/Sunset.png"); } /* Sunset */ .tshirtBg.color536.bella_3001 { background-image: url("../images/shirts/bella_3001/Dust.png"); } /* Dust */ .tshirtBg.color541.bella_3001 { background-image: url("../images/shirts/bella_3001/Atlantic.png"); } /* Atlantic */ .tshirtBg.color570.bella_3001 { background-image: url("../images/shirts/bella_3001/HunterGreen.png"); } /* Hunter Green */ .tshirtBg.color571.bella_3001 { background-image: url("../images/shirts/bella_3001/Poppy.png"); } /* Poppy */ .tshirtBg.color607.bella_3001 { background-image: url("../images/shirts/bella_3001/Slate.png"); } /* Slate */ .tshirtBg.color629.bella_3001 { background-image: url("../images/shirts/bella_3001/OceanBlue.png"); } /* Ocean Blue */ .tshirtBg.color636.bella_3001 { background-image: url("../images/shirts/bella_3001/Autumn.png"); } /* Autumn */ .tshirtBg.color637.bella_3001 { background-image: url("../images/shirts/bella_3001/CanvasRed.png"); } /* Canvas Red */ .tshirtBg.color638.bella_3001 { background-image: url("../images/shirts/bella_3001/OxbloodBlack.png"); } /* Oxblood Black */ .tshirtBg.color639.bella_3001 { background-image: url("../images/shirts/bella_3001/Rust.png"); } /* Rust */ .tshirtBg.color792.bella_3001 { background-image: url("../images/shirts/bella_3001/TeamNavy.png"); } /* Team Navy */ .tshirtBg.color793.bella_3001 { background-image: url("../images/shirts/bella_3001/Thyme.png"); } /* Thyme */ /* Style 520 — bella_3001y (31 colors) */ .tshirtBg.color1.bella_3001y { background-image: url("../images/shirts/bella_3001y/Black.png"); } /* Black */ .tshirtBg.color2.bella_3001y { background-image: url("../images/shirts/bella_3001y/White.png"); } /* White */ .tshirtBg.color7.bella_3001y { background-image: url("../images/shirts/bella_3001y/Gold.png"); } /* Gold */ .tshirtBg.color12.bella_3001y { background-image: url("../images/shirts/bella_3001y/Navy.png"); } /* Navy */ .tshirtBg.color15.bella_3001y { background-image: url("../images/shirts/bella_3001y/Red.png"); } /* Red */ .tshirtBg.color16.bella_3001y { background-image: url("../images/shirts/bella_3001y/RoyalBlue.png"); } /* Royal Blue */ .tshirtBg.color18.bella_3001y { background-image: url("../images/shirts/bella_3001y/Tan.png"); } /* Tan */ .tshirtBg.color31.bella_3001y { background-image: url("../images/shirts/bella_3001y/Natural.png"); } /* Natural */ .tshirtBg.color52.bella_3001y { background-image: url("../images/shirts/bella_3001y/Silver.png"); } /* Silver */ .tshirtBg.color55.bella_3001y { background-image: url("../images/shirts/bella_3001y/Teal.png"); } /* Teal */ .tshirtBg.color56.bella_3001y { background-image: url("../images/shirts/bella_3001y/DarkGrey.png"); } /* Dark Grey */ .tshirtBg.color58.bella_3001y { background-image: url("../images/shirts/bella_3001y/Pink.png"); } /* Pink */ .tshirtBg.color80.bella_3001y { background-image: url("../images/shirts/bella_3001y/Berry.png"); } /* Berry */ .tshirtBg.color82.bella_3001y { background-image: url("../images/shirts/bella_3001y/ColumbiaBlue.png"); } /* Columbia Blue */ .tshirtBg.color83.bella_3001y { background-image: url("../images/shirts/bella_3001y/Maroon.png"); } /* Maroon */ .tshirtBg.color94.bella_3001y { background-image: url("../images/shirts/bella_3001y/Kelly.png"); } /* Kelly */ .tshirtBg.color96.bella_3001y { background-image: url("../images/shirts/bella_3001y/SoftCream.png"); } /* Soft Cream */ .tshirtBg.color98.bella_3001y { background-image: url("../images/shirts/bella_3001y/SteelBlue.png"); } /* Steel Blue */ .tshirtBg.color99.bella_3001y { background-image: url("../images/shirts/bella_3001y/TeamPurple.png"); } /* Team Purple */ .tshirtBg.color100.bella_3001y { background-image: url("../images/shirts/bella_3001y/TrueRoyal.png"); } /* True Royal */ .tshirtBg.color102.bella_3001y { background-image: url("../images/shirts/bella_3001y/VintageBlack.png"); } /* Vintage Black */ .tshirtBg.color115.bella_3001y { background-image: url("../images/shirts/bella_3001y/Cardinal.png"); } /* Cardinal */ .tshirtBg.color116.bella_3001y { background-image: url("../images/shirts/bella_3001y/Storm.png"); } /* Storm */ .tshirtBg.color219.bella_3001y { background-image: url("../images/shirts/bella_3001y/Peach.png"); } /* Peach */ .tshirtBg.color254.bella_3001y { background-image: url("../images/shirts/bella_3001y/Asphalt.png"); } /* Asphalt */ .tshirtBg.color411.bella_3001y { background-image: url("../images/shirts/bella_3001y/DustyBlue.png"); } /* Dusty Blue */ .tshirtBg.color413.bella_3001y { background-image: url("../images/shirts/bella_3001y/SolidAthleticGrey.png"); } /* Solid Athletic Grey */ .tshirtBg.color414.bella_3001y { background-image: url("../images/shirts/bella_3001y/BlueStorm.png"); } /* Blue Storm */ .tshirtBg.color415.bella_3001y { background-image: url("../images/shirts/bella_3001y/DarkLavender.png"); } /* Dark Lavender */ .tshirtBg.color416.bella_3001y { background-image: url("../images/shirts/bella_3001y/LavenderBlue.png"); } /* Lavender Blue */ .tshirtBg.color417.bella_3001y { background-image: url("../images/shirts/bella_3001y/LightViolet.png"); } /* Light Violet */ /* Style 524 — bella_3480 (7 colors) */ .tshirtBg.color1.bella_3480 { background-image: url("../images/shirts/bella_3480/Black.png"); } /* Black */ .tshirtBg.color2.bella_3480 { background-image: url("../images/shirts/bella_3480/White.png"); } /* White */ .tshirtBg.color12.bella_3480 { background-image: url("../images/shirts/bella_3480/Navy.png"); } /* Navy */ .tshirtBg.color13.bella_3480 { background-image: url("../images/shirts/bella_3480/Orange.png"); } /* Orange */ .tshirtBg.color55.bella_3480 { background-image: url("../images/shirts/bella_3480/Teal.png"); } /* Teal */ .tshirtBg.color234.bella_3480 { background-image: url("../images/shirts/bella_3480/GreenTriblend.png"); } /* Green Triblend */ .tshirtBg.color254.bella_3480 { background-image: url("../images/shirts/bella_3480/Asphalt.png"); } /* Asphalt */ /* Style 540 — comfortcolors_1717 (52 colors) */ .tshirtBg.color1.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Black.png"); } /* Black */ .tshirtBg.color2.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/White.png"); } /* White */ .tshirtBg.color12.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Navy.png"); } /* Navy */ .tshirtBg.color15.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Red.png"); } /* Red */ .tshirtBg.color41.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/BlueJean.png"); } /* Blue Jean */ .tshirtBg.color42.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Brick.png"); } /* Brick */ .tshirtBg.color44.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/LightGreen.png"); } /* Light Green */ .tshirtBg.color45.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Grey.png"); } /* Grey */ .tshirtBg.color46.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Pepper.png"); } /* Pepper */ .tshirtBg.color48.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Watermelon.png"); } /* Watermelon */ .tshirtBg.color80.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Berry.png"); } /* Berry */ .tshirtBg.color129.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Bay.png"); } /* Bay */ .tshirtBg.color130.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Blossom.png"); } /* Blossom */ .tshirtBg.color131.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/BlueSpruce.png"); } /* Blue Spruce */ .tshirtBg.color132.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Chambray.png"); } /* Chambray */ .tshirtBg.color133.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Espresso.png"); } /* Espresso */ .tshirtBg.color134.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/FloBlue.png"); } /* Flo Blue */ .tshirtBg.color135.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Granite.png"); } /* Granite */ .tshirtBg.color136.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Graphite.png"); } /* Graphite */ .tshirtBg.color137.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Hemp.png"); } /* Hemp */ .tshirtBg.color138.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/IceBlue.png"); } /* Ice Blue */ .tshirtBg.color139.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/IslandReef.png"); } /* Island Reef */ .tshirtBg.color140.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Ivory.png"); } /* Ivory */ .tshirtBg.color141.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Midnight.png"); } /* Midnight */ .tshirtBg.color142.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Moss.png"); } /* Moss */ .tshirtBg.color143.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Mustard.png"); } /* Mustard */ .tshirtBg.color144.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Orchid.png"); } /* Orchid */ .tshirtBg.color145.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Seafoam.png"); } /* Seafoam */ .tshirtBg.color146.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/WashedDenim.png"); } /* Washed Denim */ .tshirtBg.color147.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Yam.png"); } /* Yam */ .tshirtBg.color169.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Sandstone.png"); } /* Sandstone */ .tshirtBg.color203.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Butter.png"); } /* Butter */ .tshirtBg.color204.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/ChalkyMint.png"); } /* Chalky Mint */ .tshirtBg.color205.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/LagoonBlue.png"); } /* Lagoon Blue */ .tshirtBg.color206.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/TrueNavy.png"); } /* True Navy */ .tshirtBg.color207.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Violet.png"); } /* Violet */ .tshirtBg.color237.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/NeonPink.png"); } /* Neon Pink */ .tshirtBg.color269.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Denim.png"); } /* Denim */ .tshirtBg.color270.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Peachy.png"); } /* Peachy */ .tshirtBg.color271.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Crimson.png"); } /* Crimson */ .tshirtBg.color398.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Khaki.png"); } /* Khaki */ .tshirtBg.color427.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Lagoon.png"); } /* Lagoon */ .tshirtBg.color829.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/ChinaBlue.png"); } /* China Blue */ .tshirtBg.color830.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Crunchberry.png"); } /* Crunchberry */ .tshirtBg.color831.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Emerald.png"); } /* Emerald */ .tshirtBg.color832.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Grape.png"); } /* Grape */ .tshirtBg.color833.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Hydrangea.png"); } /* Hydrangea */ .tshirtBg.color834.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/NeonCantaloupe.png"); } /* Neon Cantaloupe */ .tshirtBg.color835.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/NeonLemon.png"); } /* Neon Lemon */ .tshirtBg.color836.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/NeonViolet.png"); } /* Neon Violet */ .tshirtBg.color837.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Terracotta.png"); } /* Terracotta */ .tshirtBg.color838.comfortcolors_1717 { background-image: url("../images/shirts/comfortcolors_1717/Wine.png"); } /* Wine */ /* Style 577 — ypclassics_6506 (17 colors) */ .tshirtBg.color1.ypclassics_6506 { background-image: url("../images/shirts/ypclassics_6506/Black.png"); } /* Black */ .tshirtBg.color2.ypclassics_6506 { background-image: url("../images/shirts/ypclassics_6506/White.png"); } /* White */ .tshirtBg.color12.ypclassics_6506 { background-image: url("../images/shirts/ypclassics_6506/Navy.png"); } /* Navy */ .tshirtBg.color15.ypclassics_6506 { background-image: url("../images/shirts/ypclassics_6506/Red.png"); } /* Red */ .tshirtBg.color28.ypclassics_6506 { background-image: url("../images/shirts/ypclassics_6506/BlackWhite.png"); } /* Black/White */ .tshirtBg.color89.ypclassics_6506 { background-image: url("../images/shirts/ypclassics_6506/Brown.png"); } /* Brown */ .tshirtBg.color155.ypclassics_6506 { background-image: url("../images/shirts/ypclassics_6506/Charcoal.png"); } /* Charcoal */ .tshirtBg.color180.ypclassics_6506 { background-image: url("../images/shirts/ypclassics_6506/HeatherWhite.png"); } /* Heather White */ .tshirtBg.color246.ypclassics_6506 { background-image: url("../images/shirts/ypclassics_6506/HeatherBlack.png"); } /* Heather/Black */ .tshirtBg.color247.ypclassics_6506 { background-image: url("../images/shirts/ypclassics_6506/HeatherWhite.png"); } /* Heather/White */ .tshirtBg.color338.ypclassics_6506 { background-image: url("../images/shirts/ypclassics_6506/BlackWhite.png"); } /* Black White */ .tshirtBg.color341.ypclassics_6506 { background-image: url("../images/shirts/ypclassics_6506/BrownKhaki.png"); } /* Brown Khaki */ .tshirtBg.color354.ypclassics_6506 { background-image: url("../images/shirts/ypclassics_6506/CharcoalWhite.png"); } /* Charcoal White */ .tshirtBg.color373.ypclassics_6506 { background-image: url("../images/shirts/ypclassics_6506/RedWhite.png"); } /* Red White */ .tshirtBg.color398.ypclassics_6506 { background-image: url("../images/shirts/ypclassics_6506/Khaki.png"); } /* Khaki */ .tshirtBg.color402.ypclassics_6506 { background-image: url("../images/shirts/ypclassics_6506/NavyWhite.png"); } /* Navy/White */ .tshirtBg.color518.ypclassics_6506 { background-image: url("../images/shirts/ypclassics_6506/CharcoalWhite.png"); } /* Charcoal/White */ /* Style 104 — gildan_5000b (added 2026-06-05) */ .tshirtBg.color53.gildan_5000b { background-image: url("../images/shirts/gildan_5000b/Azalea.png"); } /* Azalea */ .tshirtBg.color1.gildan_5000b { background-image: url("../images/shirts/gildan_5000b/Black.png"); } /* Black */ .tshirtBg.color84.gildan_5000b { background-image: url("../images/shirts/gildan_5000b/CardinalRed.png"); } /* CardinalRed */ .tshirtBg.color149.gildan_5000b { background-image: url("../images/shirts/gildan_5000b/CarolinaBlue.png"); } /* CarolinaBlue */ .tshirtBg.color150.gildan_5000b { background-image: url("../images/shirts/gildan_5000b/DarkHeather.png"); } /* DarkHeather */ .tshirtBg.color6.gildan_5000b { background-image: url("../images/shirts/gildan_5000b/ForestGreen.png"); } /* ForestGreen */ .tshirtBg.color85.gildan_5000b { background-image: url("../images/shirts/gildan_5000b/Heliconia.png"); } /* Heliconia */ .tshirtBg.color8.gildan_5000b { background-image: url("../images/shirts/gildan_5000b/IrishGreen.png"); } /* IrishGreen */ .tshirtBg.color9.gildan_5000b { background-image: url("../images/shirts/gildan_5000b/LightBlue.png"); } /* LightBlue */ .tshirtBg.color10.gildan_5000b { background-image: url("../images/shirts/gildan_5000b/LightPink.png"); } /* LightPink */ .tshirtBg.color83.gildan_5000b { background-image: url("../images/shirts/gildan_5000b/Maroon.png"); } /* Maroon */ .tshirtBg.color12.gildan_5000b { background-image: url("../images/shirts/gildan_5000b/Navy.png"); } /* Navy */ .tshirtBg.color14.gildan_5000b { background-image: url("../images/shirts/gildan_5000b/Purple.png"); } /* Purple */ .tshirtBg.color15.gildan_5000b { background-image: url("../images/shirts/gildan_5000b/Red.png"); } /* Red */ .tshirtBg.color16.gildan_5000b { background-image: url("../images/shirts/gildan_5000b/RoyalBlue.png"); } /* RoyalBlue */ .tshirtBg.color17.gildan_5000b { background-image: url("../images/shirts/gildan_5000b/SportGrey.png"); } /* SportGrey */ .tshirtBg.color2.gildan_5000b { background-image: url("../images/shirts/gildan_5000b/White.png"); } /* White */ /* ========================================================================== Template Generator Manager — mobile layout (added 2026-06-16) 1. Export/Import action buttons that broke the layout on small screens. 2. Line-items table built as a .flextable. On desktop it's a normal row of columns; on mobile each .trow becomes a self-contained card whose cells reflow (full / half width) and label themselves via ::before. No overflow-x, no horizontal scroll — the flex layout adapts. Mirrors the cp/myproducts "My Products" mobile card pattern. ========================================================================== */ /* Small inline colour chip next to the hex value in the Color column. */ .tg-color-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.2); margin-right: 6px; vertical-align: -1px; } /* Mobile: ≤767px — buttons + line-item cards. */ @media only screen and (max-width: 767px) { /* --- Export / Import action buttons --- */ /* They sit in a floated .right container; the float plus full-size inline-block buttons overflowed the section. Unfloat the container, force full width, and stack the buttons vertically so they can never extend past the content area regardless of label length. */ .template-gen-actions { float: none; display: flex; flex-direction: column; gap: 8px; width: 100%; margin-bottom: 12px; } .template-gen-actions .button, .template-gen-actions a.button { display: block; width: 100%; box-sizing: border-box; /* keep padding inside the 100% width */ margin: 0; /* clear the global .button + .button margin */ padding: 10px 12px; font-size: 14px; text-align: center; white-space: normal; /* allow wrap instead of overflow */ } /* --- Line-item rows become cards --- */ /* The shared .mobilehead rule hides .thead; here we turn each row into a wrapping flex card so its cells flow onto multiple lines instead of forcing a single horizontal row (which would need scrolling). */ .template-gen-lines > .trow { flex-direction: row; /* override .mobilehead column stacking */ flex-wrap: wrap; min-height: 0; /* override the 110px cart-row min-height */ padding: 10px 6px; margin-bottom: 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; } /* Each cell carries its own label so the hidden header isn't missed. */ .template-gen-lines .tg-cell[data-label]::before { content: attr(data-label); display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #64748b; margin-bottom: 2px; } /* Full-width cells (Font, Edit) and paired half-width cells (Size+Color, Align+Baseline) so two values sit side by side. */ .template-gen-lines .tg-cell { padding: 6px 10px; } .template-gen-lines .tg-cell-full { flex: 1 1 100%; } .template-gen-lines .tg-cell-half { flex: 1 1 50%; } .template-gen-lines .tg-cell.col-highlight { font-size: 1rem; font-weight: 700; } /* Action cell: button spans the card, no header label needed. */ .template-gen-lines .tg-cell-actions { margin-top: 4px; } .template-gen-lines .tg-cell-actions .button { display: block; width: 100%; text-align: center; } /* --- Page header (top action buttons + title) --- */ /* The top "toolbar" (Home / Add Font / Add Template / Help Guides) is a floated .right row of nowrap .btn buttons. With no mobile handling it overflowed horizontally, forcing page-wide horizontal scroll — which is what made the global nav look broken and the

get clipped on the left. Unfloat, wrap the buttons, and contain the float. */ .tpl-page-header { overflow: hidden; /* contain the floated action row */ } .tpl-page-header .tpl-page-actions { float: none; display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin: 0 0 12px 0; } .tpl-page-header .tpl-page-actions .btn { flex: 1 1 auto; min-width: 0; justify-content: center; } .tpl-page-header h1 { font-size: 1.4rem; line-height: 1.2; margin: 0; overflow-wrap: anywhere; word-break: break-word; } } /* ── Developer canvas-debug overlay (product page, developer accounts only) ── Toggled from the "Canvas debug" button in the product admin bar. The box is a sibling of #overlays inside #tshirtBg; JS copies #overlays' rendered offsets onto it so it outlines EXACTLY where the design canvas renders. */ .canvas-debug-box { position: absolute; z-index: 60; /* above .overlaycover so it's always visible */ pointer-events: none; border: 2px dashed #e11fd0; background: /* center crosshair, vertical + horizontal */ linear-gradient(to right, transparent calc(50% - 1px), rgba(225,31,208,0.55) calc(50% - 1px), rgba(225,31,208,0.55) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to bottom, transparent calc(50% - 1px), rgba(225,31,208,0.55) calc(50% - 1px), rgba(225,31,208,0.55) calc(50% + 1px), transparent calc(50% + 1px)), rgba(225, 31, 208, 0.12); box-sizing: border-box; } .canvas-debug-info { margin: 8px 0 4px; padding: 10px 12px; background: #fdf2fc; border: 1px solid #f0c0ea; border-radius: 6px; color: #b016a3; font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; } .canvas-debug-info .cdbg-ok { color: #15803d; font-weight: 700; } .canvas-debug-info .cdbg-bad { color: #b91c1c; font-weight: 700; } .canvas-debug-copy { margin-left: 8px; padding: 2px 10px; border: 1px solid #b016a3; border-radius: 4px; background: #fff; color: #b016a3; font-size: 11px; font-weight: 600; cursor: pointer; } #canvasDebugToggle.active { background: #e11fd0; border-color: #e11fd0; color: #fff; }