.elementor-kit-6{--e-global-color-primary:#7130FE;--e-global-color-secondary:#160B33;--e-global-color-text:#3D3558;--e-global-color-accent:#C8F94A;--e-global-color-sgcream:#FFF8EE;--e-global-color-sglilac:#EFE7FF;--e-global-color-sgpink:#FF6FB5;--e-global-color-sgdeep:#4A12C9;--e-global-color-sgyellow:#FFD23F;--e-global-color-sgwhite:#FFFFFF;--e-global-typography-primary-font-family:"Nunito";--e-global-typography-primary-font-weight:900;--e-global-typography-primary-text-transform:lowercase;--e-global-typography-primary-line-height:0.95em;--e-global-typography-primary-letter-spacing:-0.02em;--e-global-typography-secondary-font-family:"Space Mono";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Space Mono";--e-global-typography-text-font-size:15px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6em;--e-global-typography-accent-font-family:"Space Mono";--e-global-typography-accent-font-weight:400;--e-global-typography-accent-text-transform:lowercase;--e-global-typography-accent-letter-spacing:0.5px;background-color:#160B33;color:#3D3558;font-family:"Space Mono", Sans-serif;font-size:18px;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:#7130FE;font-family:"Space Mono", Sans-serif;font-weight:700;text-transform:lowercase;color:#FFFFFF;border-radius:3px 3px 3px 3px;padding:15px 30px 15px 30px;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{background-color:#160B33;color:#FFFFFF;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:#7130FE;}.elementor-kit-6 a:hover{color:#4A12C9;}.elementor-kit-6 h1{color:#160B33;font-family:"Nunito", Sans-serif;font-weight:900;}.elementor-kit-6 h2{color:#160B33;font-family:"Nunito", Sans-serif;font-weight:900;}.elementor-kit-6 h3{color:#160B33;font-family:"Nunito", Sans-serif;font-weight:900;}.elementor-kit-6 h4{color:#160B33;font-family:"Nunito", Sans-serif;font-weight:900;}.elementor-kit-6 h5{color:#160B33;}.elementor-kit-6 h6{color:#160B33;}.elementor-kit-6 input:not([type="button"]):not([type="submit"]),.elementor-kit-6 textarea,.elementor-kit-6 .elementor-field-textual{background-color:#FFFFFF;border-style:solid;border-width:2px 2px 2px 2px;border-color:#160B33;border-radius:14px 14px 14px 14px;padding:12px 16px 12px 16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1240px;}.e-con{--container-max-width:1240px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:16px;}.elementor-element{--widgets-spacing:16px 16px;--widgets-spacing-row:16px;--widgets-spacing-column:16px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ================================================================== STONED GEMS - SITE-WIDE CSS HOW THIS FILE WORKS (read this before changing anything) ================================================================== WHERE YOU ARE: Elementor > Site Settings > Custom CSS. Everything here applies to EVERY page at once. A change here shows up sitewide, so make one change, save, then look at the site. THE BRAND COLOURS are set once, near the top of the STARFACE-STYLE SYSTEM section, and reused everywhere as --sg-names: --sg-ink #160B33 near-black purple, used for all body text --sg-violet #7130FE the main purple --sg-lime #C8F94A the bright green --sg-pink #FF6FB5 the header / footer pink --sg-yellow #FFD23F --sg-lilac #EFE7FF pale lavender backgrounds --sg-cream #FFF8EE Change a colour THERE and it updates everywhere at once. Colours written out as #ABCDEF further down are deliberate one-offs (usually matched to a specific product photo) - see the comments beside them. HOW TO FIND A SECTION: press Ctrl+F (Cmd+F on Mac) and search for the heading. Sections, in the order they appear: 1. GLOBAL STYLES ............ fonts, marquee bars, stickers 2. WOOCOMMERCE POLISH ....... shop buttons, sale badges, swatches 3. TABLES ................... dosage / shipping / lab tables 4. MOBILE ................... general phone tweaks 5. CART & CHECKOUT .......... basket and checkout styling 6. MY ACCOUNT ............... logged-in account pages 7. LOGO HOVER ............... the logo swap on hover 8. STARFACE-STYLE SYSTEM .... brand colours, buttons, the side rail 9. BENTO .................... homepage tile grid 10. SHOP TILES ............... product cards and product page 11. ROTATOR .................. the homepage tile that flips between glacier dust and the combo 12. SG BIGMARK ............... giant footer wordmark hover 13. SG MOBILE POLISH ......... phone fixes for tables and images 14. PRODUCT CARD COLOURS ..... one line per product, card colours 15. SG FOOTER PAY ............ the Interac badge in the footer 16. HOMEPAGE MOBILE ORDER .... tile order on phones only TWO RULES OF THUMB: - Anything marked "leave as is" or "do not edit" is wiring, not styling. Changing it breaks a feature rather than a colour. - !important appears a lot on purpose - it is how these rules beat Elementor's own styling. Removing it usually undoes the rule. IF SOMETHING GOES WRONG: Elementor keeps a history. Site Settings closes without saving if you hit Escape, and every page has History > Revisions in the editor panel. ================================================================== */ /* ===== STONED GEMS GLOBAL STYLES (edit freely) ===== */ body{-webkit-font-smoothing:antialiased;} /* Marquee bars: add class sg-marquee to an HTML widget wrapper */ .sg-marquee{overflow:hidden;white-space:nowrap;} .sg-marquee__track{display:inline-flex;gap:0;animation:sgscroll 28s linear infinite;will-change:transform;} .sg-marquee--rev .sg-marquee__track{animation-direction:reverse;} .sg-marquee:hover .sg-marquee__track{animation-play-state:paused;} .sg-marquee__item{display:inline-flex;align-items:center;gap:22px;padding-right:22px;font-family:"Nunito",sans-serif;text-transform:uppercase;letter-spacing:.5px;} .sg-marquee__item i{font-style:normal;} @keyframes sgscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* Cards lift on hover */ .sg-card{transition:transform .25s ease, box-shadow .25s ease;} .sg-card:hover{transform:translateY(-6px);} .sg-tilt-l,.sg-tilt-r{transform:none;} .sg-sticker,.elementor-widget-heading.sg-pill .elementor-heading-title{display:inline-block;background:#C8F94A;color:#160B33;border:2px solid #160B33;border-radius:999px;padding:6px 14px;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.6px;} /* Header */ /* WooCommerce polish */ .woocommerce ul.products li.product .button,.woocommerce a.button,.woocommerce button.button,.woocommerce .single_add_to_cart_button{border-radius:999px!important;font-weight:800!important;text-transform:uppercase;letter-spacing:.5px;} .woocommerce span.onsale{background:#C8F94A!important;color:#160B33!important;border:2px solid #160B33;border-radius:999px;min-height:auto;line-height:1;padding:8px 12px;font-weight:800;} /* Variation buttons (Variation Swatches plugin) */ .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).button-variable-item{min-width:64px;height:auto!important;padding:10px 18px!important;border-radius:999px!important;box-shadow:0 0 0 2px #160B33!important;background:#fff;} .woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item .variable-item-span{font-weight:700;color:#160B33;font-size:15px;} .woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item.selected{background:#7130FE!important;box-shadow:0 0 0 2px #7130FE!important;} .woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item.selected .variable-item-span{color:#fff;} .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item):hover{box-shadow:0 0 0 2px #7130FE!important;} .woocommerce div.product form.cart .variations th.label label{font-weight:800;text-transform:uppercase;letter-spacing:.5px;font-size:13px;color:#160B33;} .woocommerce div.product form.cart .variations td,.woocommerce div.product form.cart .variations th{display:block;padding:4px 0;} .woocommerce div.product form.cart .reset_variations{font-size:13px;} .woocommerce .quantity .qty{border:2px solid #160B33;border-radius:999px;height:52px;width:80px;} @media(max-width:767px){.admin-bar .sg-header{top:0;}} /* Tables (dosage, shipping, etc.) */ .sg-table-wrap{overflow-x:auto;border:2px solid #160B33;border-radius:22px;background:#fff;} .sg-table{width:100%;border-collapse:collapse;margin:0;font-size:16px;} .sg-table th{background:#160B33;color:#C8F94A;text-align:left;padding:16px 20px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;font-size:13px;border:0;} .sg-table td{padding:16px 20px;border:0;border-top:1px solid #E3DAF7;color:#3D3558;vertical-align:top;} .sg-table tr:nth-child(even) td{background:#FBF8FF;} .sg-table td:first-child{font-weight:800;color:#160B33;} html{scroll-behavior:smooth;} [id^="s"]{scroll-margin-top:140px;} .woocommerce div.product form.cart table.variations,.woocommerce div.product form.cart .variations tr,.woocommerce div.product form.cart .variations td,.woocommerce div.product form.cart .variations th{background:transparent!important;border:0!important;} .woocommerce div.product .woocommerce-variation-price .price{color:#7130FE;font-family:"Nunito",sans-serif;font-size:26px;} .woocommerce div.product form.cart .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;gap:12px;align-items:center;} .woocommerce div.product form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button{flex:1 1 200px;} .elementor-widget-woocommerce-product-images span.onsale{top:14px!important;left:14px!important;right:auto!important;} /* ===== MOBILE ===== */ html,body{overflow-x:clip;} @media(max-width:767px){ .sg-marquee__item{gap:14px;padding-right:14px;} .sg-marquee{font-size:clamp(14px,4.4vw,20px)!important;} .elementor-widget-button .elementor-button{white-space:normal;} .sgl-tab{font-size:13px;padding:6px 14px 6px 6px;} .woocommerce div.product form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button{flex:1 1 100%;} .elementor-widget-reviews .elementor-swiper-button{display:none;} } .sg-logo img{height:auto;display:block;} .sg-hero-sticker{font-size:15px;padding:10px 18px;box-shadow:3px 3px 0 #160B33;} .sgs .sgs-btn,.sgs .sgs-go{min-width:0!important;padding:0!important;line-height:1!important;box-shadow:none!important} .sgs .sgs-btn{width:42px!important;height:42px!important;border-radius:50%!important} .sgs .sgs-go{width:38px!important;height:38px!important;border-radius:50%!important} .elementor-location-header .elementor-widget-nav-menu .elementor-menu-toggle{margin:0!important} .elementor-location-header .elementor-widget-html,.elementor-location-header .elementor-widget-nav-menu{align-self:center} .elementor-location-header .elementor-menu-toggle{width:42px!important;height:42px!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center;flex:none} .elementor-location-header .elementor-widget-nav-menu.elementor-nav-menu--toggle{width:auto;flex:none} .elementor-location-header .elementor-nav-menu--toggle{gap:0!important;row-gap:0!important} .elementor-location-header .elementor-nav-menu--toggle nav.elementor-nav-menu--dropdown{position:absolute} /* CART & CHECKOUT */ .woocommerce,.woocommerce table.shop_table,.woocommerce form .form-row,.woocommerce-page table.shop_table td::before{font-family:"Space Mono",sans-serif!important;color:#3D3558} .woocommerce table.shop_table{border:0!important;border-radius:0;margin:0} .woocommerce table.shop_table td,.woocommerce table.shop_table th{border-color:#EFE7FF!important;padding:14px 10px!important;vertical-align:middle} .woocommerce table.shop_table th,.woocommerce-page table.shop_table td::before{color:#160B33!important;font-weight:800!important;text-transform:uppercase;font-size:12px;letter-spacing:.6px} .woocommerce table.shop_table a:not(.remove),.woocommerce-MyAccount-content a,.woocommerce-info a,.woocommerce-cart-form a:not(.remove),.woocommerce form .form-row a{color:#7130FE!important;font-weight:700;text-decoration:none} .woocommerce table.cart img{width:72px!important;border-radius:14px;border:2px solid #160B33} .woocommerce a.remove{color:#160B33!important;background:#EFE7FF;border-radius:50%;width:28px;height:28px;line-height:26px;font-size:20px} .woocommerce a.remove:hover{background:#FF6FB5!important;color:#160B33!important} .woocommerce .quantity .qty{height:42px!important;width:70px!important;border-radius:999px!important;border:2px solid #160B33!important;text-align:center} .woocommerce .cart_totals h2,.woocommerce-checkout h3{font-family:"Nunito",sans-serif!important;text-transform:uppercase;color:#160B33;font-size:22px} .woocommerce .order-total .amount{color:#7130FE;font-size:20px} .woocommerce input.input-text,.woocommerce select,.woocommerce textarea,.select2-container .select2-selection{border:2px solid #160B33!important;border-radius:12px!important;min-height:46px;padding:10px 14px!important;background:#fff} @media(max-width:767px){.woocommerce-page table.shop_table_responsive tr td.product-price,.woocommerce-page table.shop_table_responsive tr td.product-quantity,.woocommerce-page table.shop_table_responsive tr td.product-subtotal{display:flex!important;justify-content:space-between;align-items:center}.woocommerce-page table.shop_table_responsive tr td.product-name{text-align:left!important}.woocommerce-page table.shop_table_responsive tr td.product-name::before{display:block;float:none;margin-bottom:4px}.woocommerce-page table.shop_table_responsive tr td.product-remove{text-align:right!important}.woocommerce table.shop_table_responsive tr{border-bottom:2px solid #EFE7FF}} /* MY ACCOUNT */ .e-my-account-tab .woocommerce{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start} .e-my-account-tab .woocommerce-MyAccount-navigation,.e-my-account-tab .woocommerce-MyAccount-content{float:none!important;width:auto!important;margin:0!important} .e-my-account-tab .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:14px;background:#160B33;border-radius:22px;display:flex;flex-direction:column;gap:6px} .e-my-account-tab .woocommerce-MyAccount-navigation-link{border:0!important;margin:0!important;padding:0!important} .e-my-account-tab .woocommerce-MyAccount-navigation-link a{display:block;padding:12px 16px!important;border-radius:999px;color:#FFFFFF!important;font-weight:800;text-transform:uppercase;font-size:14px;letter-spacing:.5px} .e-my-account-tab .woocommerce-MyAccount-navigation-link a:hover{background:rgba(255,255,255,.1)} .e-my-account-tab .woocommerce-MyAccount-navigation-link.is-active a{background:#C8F94A;color:#160B33!important} .e-my-account-tab .woocommerce-MyAccount-content{background:#fff;border:2px solid #160B33;border-radius:22px;padding:32px;box-shadow:6px 6px 0 #160B33;min-height:260px} .woocommerce-account .woocommerce form.login,.woocommerce-account .woocommerce form.register{background:#fff;border:2px solid #160B33!important;border-radius:22px!important;padding:30px!important;box-shadow:6px 6px 0 #160B33} .woocommerce-account #customer_login h2{font-family:"Nunito",sans-serif;text-transform:uppercase;color:#160B33} .woocommerce-account .woocommerce button.button{background:#7130FE!important;color:#fff!important;padding:14px 28px!important} .woocommerce-account .woocommerce button.button:hover{background:#160B33!important} @media(max-width:767px){.e-my-account-tab .woocommerce{grid-template-columns:1fr;gap:16px}.e-my-account-tab .woocommerce-MyAccount-navigation ul{flex-direction:row;flex-wrap:wrap;border-radius:18px}.e-my-account-tab .woocommerce-MyAccount-navigation-link a{padding:9px 13px!important;font-size:12px}.e-my-account-tab .woocommerce-MyAccount-content{padding:20px}} .e-my-account-tab .woocommerce-MyAccount-navigation-link a{background:transparent!important;color:#FFFFFF!important} .e-my-account-tab .woocommerce-MyAccount-navigation-link a:hover{background:rgba(255,255,255,.12)!important} .e-my-account-tab .woocommerce-MyAccount-navigation-link.is-active a{background:#C8F94A!important;color:#160B33!important} .e-my-account-tab .woocommerce-MyAccount-content-wrapper{border:0!important;padding:0!important;box-shadow:none!important;background:transparent!important} @media(max-width:767px){.e-my-account-tab .woocommerce-MyAccount-navigation ul{flex-direction:row!important;flex-wrap:wrap!important}} body .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-navigation ul li a{color:#FFFFFF!important} body .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-navigation ul li.is-active a{color:#160B33!important} body .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content{padding:28px!important} @media(max-width:767px){body .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-navigation ul{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important}body .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content{padding:20px!important}} /* LOGO HOVER */ .sg-logo a{position:relative;display:inline-block} .sg-logo a::after{content:"";position:absolute;inset:0;background:url(http://stonedgems.cc/wp/wp-content/uploads/2026/09/stoned-gems-logo-hover.webp) center/contain no-repeat;opacity:0;transform:scale(.85) rotate(-8deg);transition:opacity .25s ease,transform .3s cubic-bezier(.34,1.56,.64,1);pointer-events:none} .sg-logo a img{transition:opacity .2s ease,transform .3s ease} @media (hover:hover){.sg-logo a:hover::after{opacity:1;transform:scale(1) rotate(0)}.sg-logo a:hover img{opacity:0;transform:scale(.9)}} /* END LOGO HOVER */ /* ===== STARFACE-STYLE SYSTEM (v2 redesign) ===== */ :root{--sg-ink:#160B33;--sg-violet:#7130FE;--sg-lime:#C8F94A;--sg-pink:#FF6FB5;--sg-yellow:#FFD23F;--sg-lilac:#EFE7FF;--sg-cream:#FFF8EE;--sg-rail:78px;--sg-gap:6px;--sg-r:18px} body{font-family:"Space Mono",monospace} h1,h2,h3,h4,h5,h6{font-family:"Nunito",sans-serif;font-weight:900;letter-spacing:-.02em} ::selection{background:var(--sg-lime);color:var(--sg-ink)} /* Buttons: chunky rounded, ink outline, lowercase mono */ .elementor-button,.woocommerce .button,.woocommerce button.button,.woocommerce a.button,.single_add_to_cart_button,.checkout-button,.elementor-field-type-submit .elementor-button{border-radius:10px!important;border:2px solid var(--sg-ink)!important;box-shadow:none!important;font-family:"Space Mono",monospace!important;font-weight:700!important;text-transform:lowercase!important;letter-spacing:0!important;transition:transform .15s ease,background-color .15s,color .15s!important} .elementor-button:hover,.woocommerce .button:hover,.single_add_to_cart_button:hover{transform:translateY(-2px)!important} .elementor-button .elementor-button-text{font-size:15px} .sg-sticker,.elementor-widget-heading.sg-pill .elementor-heading-title{font-family:"Space Mono",monospace!important;text-transform:lowercase!important;border-radius:8px!important;box-shadow:none!important;letter-spacing:0!important} .sg-card{border-radius:var(--sg-r)!important;box-shadow:none!important} .sg-card:hover{transform:translateY(-4px)!important;box-shadow:none!important} .elementor-widget-image img[style*="border"],.sgl-card{border-radius:var(--sg-r)} .woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item{border-radius:10px!important;font-family:"Space Mono",monospace;text-transform:lowercase} .sg-marquee__item{font-family:"Nunito",sans-serif;font-weight:900;text-transform:lowercase} /* ---- HEADER: side rail (desktop) / top bar (tablet+mobile) ---- */ .elementor-location-header{position:relative;z-index:9999} .sg-rail{position:fixed!important;left:0;top:0;bottom:0;width:var(--sg-rail)!important;max-width:var(--sg-rail)!important;z-index:10001;background:var(--sg-pink)!important;border-right:2px solid var(--sg-ink);display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:space-between!important;gap:10px;padding:14px 0!important;flex-wrap:nowrap!important} .admin-bar .sg-rail{top:32px} .sg-rail > .e-con,.sg-rail .sg-rail-grp{display:flex;flex-direction:column;align-items:center;gap:10px;width:auto!important;padding:0!important} .sg-rail .sg-logo img{width:54px!important;height:auto} .sg-wordmark,.elementor-widget-heading.sg-wordmark-w .elementor-heading-title{writing-mode:vertical-rl;transform:rotate(180deg);font:900 46px/1 "Nunito",sans-serif;color:var(--sg-ink);letter-spacing:-.03em;text-transform:lowercase;text-decoration:none;white-space:nowrap;display:block;user-select:none} .sg-wordmark:hover,.elementor-widget-heading.sg-wordmark-w .elementor-heading-title:hover{color:var(--sg-violet)} .sg-rail .sgs-btn,.sg-rail .elementor-icon.elementor-view-framed{border-color:var(--sg-ink)!important;color:var(--sg-ink)!important;background:transparent} .sg-rail .elementor-icon.elementor-view-framed{width:42px;height:42px;padding:0!important;display:grid;place-items:center} .sg-rail .elementor-icon.elementor-view-framed i,.sg-rail .elementor-icon.elementor-view-framed svg{color:var(--sg-ink)!important;fill:var(--sg-ink)!important;font-size:16px} .sg-rail .sgs-btn:hover,.sg-rail .elementor-icon.elementor-view-framed:hover{background:var(--sg-ink)!important;color:var(--sg-lime)!important} .sg-rail .elementor-menu-cart__toggle .elementor-button{background:var(--sg-ink)!important;color:#fff!important;border-color:var(--sg-ink)!important;border-radius:999px!important;padding:11px 12px!important} .sg-rail .sg-rail-mascot img{width:46px!important;transition:transform .3s cubic-bezier(.34,1.56,.64,1)} .sg-rail .sg-rail-mascot:hover img{transform:rotate(-12deg) scale(1.1)} @media(min-width:1025px){body{padding-left:var(--sg-rail)}.sg-rail .sgs-pop{left:calc(100% + 14px);right:auto;top:auto;bottom:-6px}} /* burger */ .sg-burger{width:44px;height:44px;border-radius:12px;border:2px solid var(--sg-ink);background:var(--sg-ink);display:grid;place-content:center;gap:5px;cursor:pointer;padding:0} .sg-burger span{display:block;width:20px;height:2.5px;border-radius:2px;background:var(--sg-lime);transition:transform .25s,opacity .2s} body.sg-menu-open .sg-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} body.sg-menu-open .sg-burger span:nth-child(2){opacity:0} body.sg-menu-open .sg-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} /* drawer */ .sg-drawer{position:fixed!important;left:var(--sg-rail);top:0;bottom:0;width:min(440px,92vw)!important;max-width:none!important;background:var(--sg-violet)!important;z-index:10000;padding:34px 30px!important;overflow-y:auto;border-right:2px solid var(--sg-ink);transform:translateX(-105%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility .35s;display:flex!important;flex-direction:column!important;gap:24px} .admin-bar .sg-drawer{top:32px} body.sg-menu-open .sg-drawer{transform:none;visibility:visible} .sg-scrim{position:fixed;inset:0;background:rgba(22,11,51,.45);z-index:9998;opacity:0;visibility:hidden;transition:.3s} body.sg-menu-open .sg-scrim{opacity:1;visibility:visible} .sg-drawer .elementor-nav-menu--main .elementor-nav-menu{display:block!important} .sg-drawer .elementor-nav-menu > li{border-bottom:2px solid rgba(255,255,255,.14)} .sg-drawer .elementor-nav-menu a.elementor-item{font-family:"Nunito",sans-serif!important;font-weight:900!important;font-size:34px!important;line-height:1.1!important;text-transform:lowercase!important;color:#fff!important;padding:12px 0!important;background:none!important;justify-content:space-between} .sg-drawer .elementor-nav-menu a.elementor-item:hover,.sg-drawer li.sg-open > a.elementor-item{color:var(--sg-lime)!important} .sg-drawer .elementor-nav-menu a.elementor-item:after,.sg-drawer .elementor-nav-menu a.elementor-item:before{display:none!important} .sg-drawer .sub-arrow{display:inline-flex!important;transition:transform .2s} .sg-drawer li.sg-open > a .sub-arrow{transform:rotate(180deg)} .sg-drawer .sub-menu{position:static!important;display:none!important;width:auto!important;margin:0 0 12px!important;background:none!important;border:0!important;box-shadow:none!important;padding:0 0 0 14px!important;min-width:0!important;left:auto!important;top:auto!important} .sg-drawer li.sg-open > .sub-menu{display:block!important} .sg-drawer .sub-menu a.elementor-sub-item{font-family:"Space Mono",monospace!important;font-size:15px!important;font-weight:400!important;text-transform:lowercase!important;color:var(--sg-lilac)!important;background:none!important;padding:7px 0!important;border:0!important} .sg-drawer .sub-menu a.elementor-sub-item:hover{color:var(--sg-lime)!important} .sg-drawer .sg-drawer-foot{font-family:"Space Mono",monospace;font-size:13px;color:var(--sg-lilac)} .sg-drawer .sg-drawer-foot a{color:var(--sg-lime);text-decoration:underline} @media(max-width:1024px){ .elementor-location-header{position:sticky;top:0} .admin-bar .elementor-location-header{top:46px} .sg-rail{position:relative!important;top:auto!important;bottom:auto;width:100%!important;max-width:none!important;height:64px;flex-direction:row!important;padding:0 12px!important;border-right:0;border-bottom:2px solid var(--sg-ink)} .sg-rail > .e-con,.sg-rail .sg-rail-grp{flex-direction:row!important} .sg-rail .sg-logo img{width:46px!important} .sg-rail .sg-wordmark,.sg-rail .sg-wordmark-w .elementor-heading-title,.sg-rail .sg-rail-mascot{display:none!important} .sg-drawer{left:0;top:0;width:100%!important;border-right:0;padding-top:90px!important} body.sg-menu-open .sg-rail{position:fixed!important;top:0!important;left:0;right:0;z-index:10002} .admin-bar.sg-menu-open .sg-rail{top:46px!important} .sg-drawer .elementor-nav-menu a.elementor-item{font-size:30px!important} } @media(max-width:600px){.admin-bar .elementor-location-header{top:0}} body.sg-menu-open{overflow:hidden} /* ===== BENTO (homepage tiles) ===== */ .sg-burger,.sg-burger:hover,.sg-burger:focus{background:#160B33!important;border:2px solid #160B33!important;border-radius:12px!important;padding:0!important} .sg-drawer .elementor-widget-nav-menu,.sg-drawer .elementor-nav-menu--main,.sg-drawer .elementor-nav-menu{width:100%!important;margin:0!important} .sg-drawer .elementor-nav-menu > li > a.elementor-item{padding-left:0!important;padding-right:0!important;justify-content:space-between!important;display:flex!important} .sg-drawer .elementor-nav-menu--layout-vertical > .elementor-nav-menu > li > a{justify-content:space-between!important} .sg-drawer .sg-drawer-foot{margin-top:auto} .sg-bento{background:#160B33} .sg-tile{border-radius:var(--sg-r)!important;overflow:hidden;position:relative} .sg-tile > .elementor-widget-image img,.sg-tile > .elementor-element.elementor-widget-image img{width:100%!important;height:auto} .sg-tile .elementor-widget-image a{display:block} .sg-tile .elementor-widget-image img{display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)} .sg-tile:hover .elementor-widget-image img{transform:scale(1.04)} .sg-sq .elementor-widget-image img{aspect-ratio:1/1;width:100%!important;object-fit:cover} .sg-tile .sg-chip,.sg-tile .elementor-widget-heading.sg-chip-w .elementor-heading-title{display:inline-flex;align-items:center;height:44px;padding:0 14px;border:2px solid #160B33;border-radius:10px;background:#fff;color:#160B33;font:700 14px/1 "Space Mono",monospace} .sg-tile .sg-badge,.sg-tile .elementor-widget-heading.sg-badge-w .elementor-heading-title{position:absolute;top:14px;left:14px;z-index:2;background:#160B33;color:#fff;font:700 12px/1 "Space Mono",monospace;padding:8px 10px;border-radius:8px;text-transform:lowercase} .sg-menu-row{border-bottom:2px solid rgba(255,255,255,.16);transition:padding .2s} .sg-menu-row:last-child{border-bottom:0} .sg-menu-row:hover{padding-left:8px!important} .sg-menu-row:hover .elementor-heading-title{color:#C8F94A!important} .sg-menu-row img{transition:transform .3s cubic-bezier(.34,1.56,.64,1)} .sg-menu-row:hover img{transform:rotate(-10deg) scale(1.12)} .sg-bigmarq .sg-marquee__item{font-size:clamp(28px,4vw,56px)!important;font-weight:900} @media(max-width:767px){.sg-tile{border-radius:14px!important}} /* ===== END BENTO ===== */ /* ===== SHOP TILES (product cards + product page) ===== */ .sg-badge,.elementor-widget-heading.sg-badge-w .elementor-heading-title{white-space:nowrap} .elementor-loop-container{gap:6px!important} .e-loop-item .sg-card{border:0!important;border-radius:18px!important;overflow:hidden;background:#EFE7FF} /* card colours rotate: edit hex codes here */ .e-loop-item .sg-card img{border-radius:0!important;aspect-ratio:4/5;object-fit:cover;width:100%!important;height:auto!important;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)} .e-loop-item .sg-card:hover img{transform:scale(1.04)} .e-loop-item .sg-card .elementor-heading-title,.e-loop-item .sg-card .product_title{font-family:"Nunito",sans-serif!important;font-weight:900!important;text-transform:lowercase!important;font-size:22px!important;line-height:1!important;color:#160B33} .e-loop-item .sg-card .price{font-family:"Space Mono",monospace!important;font-weight:700!important} .single-product .woocommerce-product-gallery,.single-product .flex-viewport{border-radius:18px;overflow:hidden} .single-product .product_title{text-transform:lowercase} .woocommerce .price,.woocommerce-Price-amount{font-family:"Space Mono",monospace} /* per-product card colours = the product photo background (edit here) */ /* ===== END SHOP TILES ===== */ /* stars: unicode ★ so they never depend on an icon font */ .elementor-star-rating i:before{content:"\2605"!important;font-family:inherit!important;font-style:normal} .elementor-star-rating .elementor-star-empty:before{content:"\2606"!important} .elementor-star-rating i{font-family:inherit!important;font-style:normal} /* payment method icon slot */ .sg-pay-icon{max-width:340px;margin:22px auto 0;border:2px solid #160B33;border-radius:18px;overflow:hidden;padding:0!important} .sg-pay-icon > .e-con-inner{width:100%!important;max-width:none!important;padding:0!important} .sg-pay-icon .elementor-widget-image{width:100%!important;max-width:100%!important;margin:0!important} .sg-pay-icon .elementor-widget-image .elementor-widget-container{width:100%!important} .sg-pay-icon .elementor-widget-image{overflow:hidden} /* SG PAY ZOOM - crops the violet margin baked into the source image */ .sg-pay-icon .elementor-widget-image img{display:block;width:100%!important;max-width:100%!important;height:auto;transform:scale(1.32);transform-origin:center} .sg-pay-icon .elementor-widget-heading{padding:16px 18px 0!important;margin:0!important} .sg-pay-icon .elementor-widget-heading .elementor-heading-title{color:#160B33!important} .sg-pay-icon .elementor-widget-text-editor{padding:6px 18px 18px!important;margin:0!important;color:#160B33!important} .sg-pay-icon .elementor-widget-text-editor p{color:#160B33!important;margin:0} .sg-pay-icon .sg-pay-slot img{background:#fff;border:2px solid #160B33;border-radius:16px;padding:14px} /* ===== ROTATOR (glacier dust tile) — edit the timings here ===== */ .sg-rot{--sg-rot-time:11.6s;animation:sgRotBg var(--sg-rot-time) infinite} .sg-rot .sg-rot-media{position:relative} .sg-rot .sg-rot-media > .sg-rot-b{position:absolute;inset:0} .sg-rot .sg-rot-media > .sg-rot-b img{width:100%;height:100%;object-fit:cover} .sg-rot .sg-rot-info{position:relative;min-height:214px} .sg-rot .sg-rot-info > .sg-rot-b{position:absolute;inset:0} .sg-rot .sg-rot-a{animation:sgRotA var(--sg-rot-time) infinite} .sg-rot .sg-rot-b{animation:sgRotB var(--sg-rot-time) infinite} @keyframes sgRotA{0%{opacity:1;pointer-events:auto}43%{opacity:1}50%{opacity:0;pointer-events:none}93%{opacity:0}100%{opacity:1;pointer-events:auto}} @keyframes sgRotB{0%{opacity:0;pointer-events:none}43%{opacity:0}50%{opacity:1;pointer-events:auto}93%{opacity:1}100%{opacity:0;pointer-events:none}} /* both halves use the same violet - it matches the flat background baked into both product photos */ @keyframes sgRotBg{0%,43%{background-color:#6A17CB}50%,93%{background-color:#6A17CB}100%{background-color:#6A17CB}} .sg-rot:hover,.sg-rot:hover .sg-rot-a,.sg-rot:hover .sg-rot-b{animation-play-state:paused} @media(max-width:767px){.sg-rot .sg-rot-info{min-height:232px}} @media(prefers-reduced-motion:reduce){.sg-rot,.sg-rot .sg-rot-a,.sg-rot .sg-rot-b{animation:none!important}.sg-rot .sg-rot-b{opacity:0}} /* ===== END ROTATOR ===== */ /* SG BIGMARK (footer giant wordmark hover) */ .sg-bigmark .elementor-heading-title{transition:color .3s ease} @media (hover:hover){.sg-bigmark:hover .elementor-heading-title{color:var(--sg-violet)!important}} /* END SG BIGMARK */ /* SG MOBILE POLISH */ @media(max-width:600px){ .sg-table{font-size:13px;table-layout:fixed} .sg-table th{padding:10px 8px;font-size:10px;letter-spacing:.3px;word-break:break-word} .sg-table td{padding:10px 8px;word-break:break-word} .sg-table-wrap{border-radius:16px} .sg-wordmark,.sg-wordmark-w .elementor-heading-title{display:none!important} .woocommerce table.shop_table{font-size:13px} .woocommerce table.shop_table th,.woocommerce table.shop_table td{padding:10px 8px;word-break:break-word} img{max-width:100%;height:auto} } @media(max-width:380px){ .sg-table{font-size:12px} .sg-table th,.sg-table td{padding:8px 6px} } /* END SG MOBILE POLISH */ /* ===== PRODUCT CARD COLOURS ===================================== Shop / category cards (the Elementor product loop). THE PHOTO PANEL is the coloured box behind each product photo. Every product photo is 800 x 1000 px, so the panel is locked to that same 4:5 shape - nothing gets cropped and every card in the grid ends up exactly the same height. Each panel colour is sampled from that product's own photo background, so photo and panel read as one solid block. TO ADD A PRODUCT: copy one PANEL line, swap the post ID and the hex colour. Find the post ID in the URL while editing the product (post.php?post=123). If the colour is dark, also add that post ID to the WHITE TEXT line at the bottom. ================================================================= */ /* --- panel shape (applies to every card) --- The panel is a fixed 4:5 box (padding-top 125% = 1000/800). That locks every card in the grid to the same height and stops Elementor's grid from squashing the photo on narrow screens. If you ever switch to square photos, change 125% to 100%. --- */ body .e-loop-item .elementor-widget-theme-post-featured-image{position:relative;padding-top:125%!important;height:0!important;overflow:hidden;border-radius:18px;background:#EFE7FF;flex:0 0 auto} body .e-loop-item .elementor-widget-theme-post-featured-image a{position:absolute;inset:0;display:block} body .e-loop-item .elementor-widget-theme-post-featured-image img{position:absolute;inset:0;width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover;display:block} /* --- card text + button padding (image stays full-bleed) --- */ /* sg card inner padding */ body .e-loop-item .sg-card > *:not(.elementor-widget-theme-post-featured-image){padding-left:18px!important;padding-right:18px!important} body .e-loop-item .sg-card > *:last-child{padding-bottom:18px!important} /* --- CARD COLOURS, one line per product --- Each card is painted the same colour as its photo background, so photo and card read as one solid block. To add a product: copy a CARD line, swap post-NNN and the hex. Then add that post ID to the matching TEXT line below (dark card = white text, light card = ink text). --- */ body .e-loop-item .sg-card{background:#EFE7FF!important} /* fallback */ body .e-loop-item.post-35 .sg-card{background:#6A17CB!important} /* glacier dust - violet */ body .e-loop-item.post-658 .sg-card{background:#6A17CB!important} /* glacier party pack - violet */ body .e-loop-item.post-49 .sg-card{background:#FB6CB9!important} /* mango rush - pink */ body .e-loop-item.post-45 .sg-card{background:#FDDF1F!important} /* citrus zap - yellow */ body .e-loop-item.post-1253 .sg-card{background:#FCE021!important} /* orange zap focus gems - yellow */ body .e-loop-item.post-1264 .sg-card{background:#FDDE22!important} /* bottled focus gems strawberry - yellow */ body .e-loop-item.post-1273 .sg-card{background:#FDDD19!important} /* bottled focus gems rootbeer - yellow */ body .e-loop-item.post-1281 .sg-card{background:#FEDE1A!important} /* bottled focus gems pina colada - yellow */ body .e-loop-item.post-1289 .sg-card{background:#FDE018!important} /* bottled focus gems green apple - yellow */ body .e-loop-item.post-1297 .sg-card{background:#FEE01B!important} /* bottled focus gems grape - yellow */ body .e-loop-item.post-1306 .sg-card{background:#FCE215!important} /* bottled focus gems coconut - yellow */ body .e-loop-item.post-1314 .sg-card{background:#FD70B6!important} /* jolly green gems - pink */ body .e-loop-item.post-1322 .sg-card{background:#FC74B8!important} /* jolly orange gems - pink */ body .e-loop-item.post-1330 .sg-card{background:#FC6FB2!important} /* jolly purple gems - pink */ body .e-loop-item.post-1338 .sg-card{background:#FC6AB6!important} /* glacier jolly gems - pink */ body .e-loop-item.post-1348 .sg-card{background:#FBB7DA!important} /* pink pop candy - light pink */ body .e-loop-item.post-1357 .sg-card{background:#FD802A!important} /* orange gummy candy - orange */ body .e-loop-item.post-1362 .sg-card{background:#FD7F29!important} /* white gummy candy - orange */ body .e-loop-item.post-1371 .sg-card{background:#FD8630!important} /* white triangle gummy candy - orange */ body .e-loop-item.post-1384 .sg-card{background:#FD8533!important} /* ice pops gummy candy - orange */ body .e-loop-item.post-1395 .sg-card{background:#FC802D!important} /* circle white gummy candy - orange */ body .e-loop-item.post-1403 .sg-card{background:#FD8633!important} /* rectangle gummy candy - orange */ body .e-loop-item.post-1411 .sg-card{background:#FD8231!important} /* blue gummy candy - orange */ body .e-loop-item.post-1418 .sg-card{background:#FD8532!important} /* small blue gummy candy - orange */ body .e-loop-item.post-1426 .sg-card{background:#16DFEC!important} /* peach gummy gems - cyan */ body .e-loop-item.post-1432 .sg-card{background:#02D5E2!important} /* rolex gummy gems - cyan */ body .e-loop-item.post-1440 .sg-card{background:#06E0EB!important} /* tesla blue gummy gems - cyan */ body .e-loop-item.post-1450 .sg-card{background:#06E1E9!important} /* tesla pink gummy gems - cyan */ body .e-loop-item.post-1458 .sg-card{background:#21EBF4!important} /* tesla red gummy gems - cyan */ body .e-loop-item.post-1463 .sg-card{background:#15E9EF!important} /* blue gummy gems - cyan */ body .e-loop-item.post-1470 .sg-card{background:#15DAE8!important} /* buddha gummy gems - cyan */ body .e-loop-item.post-1474 .sg-card{background:#58CF9F!important} /* toony mint strips - mint green */ body .e-loop-item.post-1484 .sg-card{background:#1C60FD!important} /* pen gummy - blue */ body .e-loop-item.post-1492 .sg-card{background:#C07BFC!important} /* pink heart funny gummy - lavender */ body .e-loop-item.post-1505 .sg-card{background:#BF7FFB!important} /* yellow heart funny gummy - lavender */ body .e-loop-item.post-1510 .sg-card{background:#C07DFC!important} /* dark blue funny gummy - lavender */ body .e-loop-item.post-1523 .sg-card{background:#BC79FC!important} /* superman blue funny gummy - lavender */ body .e-loop-item.post-1532 .sg-card{background:#FC4D56!important} /* mushy food gummies - red */ body .e-loop-item.post-1384 .sg-card{background:#FD8533!important} /* ice pops gummy candy - orange */ body .e-loop-item.post-1357 .sg-card{background:#FD802A!important} /* orange gummy candy - orange */ body .e-loop-item.post-53 .sg-card{background:#C5FB47!important} /* starter bundle - lime */ body .e-loop-item.post-1096 .sg-card{background:#7E18E5!important} /* unflavoured mint gum - violet */ body .e-loop-item.post-1165 .sg-card{background:#7C13E8!important} /* mint gum pina colada - violet */ body .e-loop-item.post-1174 .sg-card{background:#8515EA!important} /* mint gum rootbeer - violet */ body .e-loop-item.post-1182 .sg-card{background:#7B19E1!important} /* mint gum strawberry - violet */ body .e-loop-item.post-1191 .sg-card{background:#8B1BF7!important} /* bottled mint gum unflavoured - violet */ body .e-loop-item.post-1203 .sg-card{background:#931CFC!important} /* bottled mint gum rootbeer - violet */ body .e-loop-item.post-1211 .sg-card{background:#8E1CF9!important} /* bottled mint gum strawberry - violet */ body .e-loop-item.post-1217 .sg-card{background:#931EFA!important} /* bottled mint gum mango - violet */ body .e-loop-item.post-1228 .sg-card{background:#8D1DFB!important} /* bottled mint gum green apple - violet */ body .e-loop-item.post-1236 .sg-card{background:#9121FA!important} /* bottled mint gum grape - violet */ body .e-loop-item.post-1245 .sg-card{background:#8F1BFA!important} /* bottled mint gum cola - violet */ /* the photo panel keeps the same colour so no seam ever shows */ body .e-loop-item.post-35 .elementor-widget-theme-post-featured-image{background:#6A17CB} body .e-loop-item.post-658 .elementor-widget-theme-post-featured-image{background:#6A17CB} body .e-loop-item.post-49 .elementor-widget-theme-post-featured-image{background:#FB6CB9} body .e-loop-item.post-45 .elementor-widget-theme-post-featured-image{background:#FDDF1F} body .e-loop-item.post-1253 .elementor-widget-theme-post-featured-image{background:#FCE021} body .e-loop-item.post-1264 .elementor-widget-theme-post-featured-image{background:#FDDE22} body .e-loop-item.post-1273 .elementor-widget-theme-post-featured-image{background:#FDDD19} body .e-loop-item.post-1281 .elementor-widget-theme-post-featured-image{background:#FEDE1A} body .e-loop-item.post-1289 .elementor-widget-theme-post-featured-image{background:#FDE018} body .e-loop-item.post-1297 .elementor-widget-theme-post-featured-image{background:#FEE01B} body .e-loop-item.post-1306 .elementor-widget-theme-post-featured-image{background:#FCE215} body .e-loop-item.post-1314 .elementor-widget-theme-post-featured-image{background:#FD70B6} body .e-loop-item.post-1322 .elementor-widget-theme-post-featured-image{background:#FC74B8} body .e-loop-item.post-1330 .elementor-widget-theme-post-featured-image{background:#FC6FB2} body .e-loop-item.post-1338 .elementor-widget-theme-post-featured-image{background:#FC6AB6} body .e-loop-item.post-1348 .elementor-widget-theme-post-featured-image{background:#FBB7DA} body .e-loop-item.post-1357 .elementor-widget-theme-post-featured-image{background:#FD802A} body .e-loop-item.post-1362 .elementor-widget-theme-post-featured-image{background:#FD7F29} body .e-loop-item.post-1371 .elementor-widget-theme-post-featured-image{background:#FD8630} body .e-loop-item.post-1384 .elementor-widget-theme-post-featured-image{background:#FD8533} body .e-loop-item.post-1395 .elementor-widget-theme-post-featured-image{background:#FC802D} body .e-loop-item.post-1403 .elementor-widget-theme-post-featured-image{background:#FD8633} body .e-loop-item.post-1411 .elementor-widget-theme-post-featured-image{background:#FD8231} body .e-loop-item.post-1418 .elementor-widget-theme-post-featured-image{background:#FD8532} body .e-loop-item.post-1426 .elementor-widget-theme-post-featured-image{background:#16DFEC} body .e-loop-item.post-1432 .elementor-widget-theme-post-featured-image{background:#02D5E2} body .e-loop-item.post-1440 .elementor-widget-theme-post-featured-image{background:#06E0EB} body .e-loop-item.post-1450 .elementor-widget-theme-post-featured-image{background:#06E1E9} body .e-loop-item.post-1458 .elementor-widget-theme-post-featured-image{background:#21EBF4} body .e-loop-item.post-1463 .elementor-widget-theme-post-featured-image{background:#15E9EF} body .e-loop-item.post-1470 .elementor-widget-theme-post-featured-image{background:#15DAE8} body .e-loop-item.post-1474 .elementor-widget-theme-post-featured-image{background:#58CF9F} body .e-loop-item.post-1484 .elementor-widget-theme-post-featured-image{background:#1C60FD} body .e-loop-item.post-1492 .elementor-widget-theme-post-featured-image{background:#C07BFC} body .e-loop-item.post-1505 .elementor-widget-theme-post-featured-image{background:#BF7FFB} body .e-loop-item.post-1510 .elementor-widget-theme-post-featured-image{background:#C07DFC} body .e-loop-item.post-1523 .elementor-widget-theme-post-featured-image{background:#BC79FC} body .e-loop-item.post-1532 .elementor-widget-theme-post-featured-image{background:#FC4D56} body .e-loop-item.post-1384 .elementor-widget-theme-post-featured-image{background:#FD8533} body .e-loop-item.post-1357 .elementor-widget-theme-post-featured-image{background:#FD802A} body .e-loop-item.post-53 .elementor-widget-theme-post-featured-image{background:#C5FB47} body .e-loop-item.post-1096 .elementor-widget-theme-post-featured-image{background:#7E18E5} body .e-loop-item.post-1165 .elementor-widget-theme-post-featured-image{background:#7C13E8} body .e-loop-item.post-1174 .elementor-widget-theme-post-featured-image{background:#8515EA} body .e-loop-item.post-1182 .elementor-widget-theme-post-featured-image{background:#7B19E1} body .e-loop-item.post-1191 .elementor-widget-theme-post-featured-image{background:#8B1BF7} body .e-loop-item.post-1203 .elementor-widget-theme-post-featured-image{background:#931CFC} body .e-loop-item.post-1211 .elementor-widget-theme-post-featured-image{background:#8E1CF9} body .e-loop-item.post-1217 .elementor-widget-theme-post-featured-image{background:#931EFA} body .e-loop-item.post-1228 .elementor-widget-theme-post-featured-image{background:#8D1DFB} body .e-loop-item.post-1236 .elementor-widget-theme-post-featured-image{background:#9121FA} body .e-loop-item.post-1245 .elementor-widget-theme-post-featured-image{background:#8F1BFA} /* --- TEXT colour: WHITE on dark cards, INK on light cards --- */ body .e-loop-item:is(.post-35,.post-658,.post-1096,.post-1165,.post-1174,.post-1182,.post-1191,.post-1203,.post-1211,.post-1217,.post-1228,.post-1236,.post-1245,.post-1484) .sg-card :is(.elementor-heading-title,.product_title,.price,h2,h3,bdi,.woocommerce-Price-amount){color:#FFFFFF!important} body .e-loop-item:is(.post-49,.post-45,.post-53,.post-1253,.post-1264,.post-1273,.post-1281,.post-1289,.post-1297,.post-1306,.post-1314,.post-1322,.post-1330,.post-1338,.post-1348,.post-1357,.post-1362,.post-1371,.post-1384,.post-1395,.post-1403,.post-1411,.post-1418,.post-1426,.post-1432,.post-1440,.post-1450,.post-1458,.post-1463,.post-1470,.post-1474,.post-1492,.post-1505,.post-1510,.post-1523,.post-1532) .sg-card :is(.elementor-heading-title,.product_title,.price,h2,h3,bdi,.woocommerce-Price-amount){color:#160B33!important} /* ===== END PRODUCT CARD COLOURS ===== */ /* ===== SG FOOTER PAY ===== The Interac e-Transfer badge in the footer bottom bar. Change the size here; change the image in Elementor. */ .sg-foot-pay img{border-radius:10px;display:block} .sg-foot-pay{margin:0!important} @media(max-width:600px){ .sg-foot-pay img{width:46px} } /* ===== END SG FOOTER PAY ===== */ /* ===== HOMEPAGE MOBILE ORDER ===================================== PHONES ONLY (767px and under). Desktop and tablet are untouched. The three bento columns carry the CSS class sg-m-dissolve. On a phone they dissolve (display:contents) so every tile sits directly in the grid and can be put in any order. TO MOVE A TILE: in Elementor select the tile, open Advanced > Layout > Order, switch to the phone view, and change the Custom Order number. Lower number = higher up the page. Duplicated or rebuilt tiles keep working - nothing here uses IDs. ================================================================== */ @media(max-width:767px){ .sg-m-dissolve{display:contents!important} } /* ===== END HOMEPAGE MOBILE ORDER ===== */ /* ===== HOMEPAGE SHOP MENU ===================================== The block holding the rows has class sg-menu-rows; each row has class sg-menu-row. Rows stay equal height however many you add. TEXT + LINK: edit them on each row's HEADING (Content > Title and Content > Link). The whole row is clickable through the rule below. Never put a link on the row container itself - a link inside a link is what used to tear the rows apart. SIZE: edit the heading's Typography in Elementor as normal. ================================================================== */ body .sg-menu-rows{display:grid;grid-auto-rows:1fr;} body .sg-menu-row{align-items:center;min-height:68px;position:relative;} body .sg-menu-row > .elementor-widget-image, body .sg-menu-row > .elementor-widget-icon{flex:0 0 auto;} body .sg-menu-row > .elementor-widget-heading{min-width:0;flex:1 1 auto;position:static;} body .sg-menu-row > .elementor-widget-heading > .elementor-widget-container{position:static;} body .sg-menu-row .elementor-heading-title{overflow-wrap:break-word;} body .sg-menu-row .elementor-heading-title a{color:inherit;text-decoration:none;} body .sg-menu-row .elementor-heading-title a::after{content:"";position:absolute;inset:0;z-index:1;} body.elementor-editor-active .sg-menu-row .elementor-heading-title a::after{display:none;} @media(max-width:1024px){body .sg-menu-row{min-height:62px}} @media(max-width:767px){body .sg-menu-row{min-height:56px}} /* ===== END HOMEPAGE SHOP MENU ===== */ /* ===== EDIT-PROOF PIECES ===================================== Pills, badges, price chips and the side wordmark are normal Elementor HEADING widgets - change the words in the Title box. Their look comes from the CSS class in Advanced > CSS Classes: sg-pill (rounded label) sg-badge-w (corner badge) sg-chip-w (price chip) sg-wordmark-w (side wordmark) Scrolling strips are TEXT EDITOR widgets with class sg-mq. Type one phrase per line - the strip builds and loops itself. Colours / size / padding / borders: the widget's normal Style and Advanced tabs. Speed: Advanced > Attributes, data-sg-speed|30 (bigger number = slower). Tables are TEXT EDITOR widgets with class sg-table-wrap - click a cell and type. To add a row, use the editor's Code (Text) tab. ================================================================ */ .elementor-widget-heading.sg-pill .elementor-heading-title{line-height:inherit;margin:0} .elementor-widget-heading.sg-chip-w .elementor-heading-title,.elementor-widget-heading.sg-badge-w .elementor-heading-title{margin:0} .elementor-widget-heading.sg-wordmark-w .elementor-heading-title a{color:inherit;text-decoration:none;font:inherit} .elementor-widget-text-editor.sg-mq,.elementor-widget-text-editor.sg-table-wrap{font-family:inherit;font-weight:inherit;font-style:inherit;line-height:inherit;letter-spacing:inherit;text-transform:inherit;word-spacing:inherit;color:inherit} .elementor-widget-text-editor.sg-mq .sg-marquee{background:transparent;margin:0} .elementor-widget-text-editor.sg-table-wrap .sg-table{margin:0} .sg-mq:not(.sg-mq-on){overflow:hidden;white-space:nowrap} .sg-mq:not(.sg-mq-on) p{display:inline-block;margin:0 22px 0 0;font-family:"Nunito",sans-serif;font-weight:900;text-transform:lowercase} /* ===== END EDIT-PROOF PIECES ===== *//* End custom CSS */