/* Theme Name: Jedi Theme Dark (Shoptimizer Child) Theme URI: https://github.com/bhuwanthejediweb/jedi-theme-dark Description: Dark, full-width WooCommerce theme for Jedi-Robe, built on the Shoptimizer parent theme. Author: Jedi – The Star Wars Shop Author URI: https://jedi-robe.com Template: shoptimizer Version: 1.4.7 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: jedi-theme-dark Domain Path: /languages Update URI: https://github.com/bhuwanthejediweb/jedi-theme-dark */ body.jr-dark-commerce .woocommerce-ordering select option, body.jr-dark-commerce .woocommerce-ordering select optgroup { color: #f5f7fa; background-color: #0b1218; } body.jr-dark-commerce .woocommerce-ordering select option:disabled { color: #aab4c0; } /** * CommerceKit desktop Sticky Add to Cart drawer. * * Restores the desktop side-panel behaviour after CommerceKit's cloned * form is moved directly beneath , while matching the Jedi-Robe * dark commerce design system used by the mobile Sticky ATC. * * @package Jedi_Theme */ @media (min-width: 993px) { /* ========================================================================== Layering ========================================================================== */ /** * CommerceKit backdrop. */ body.jr-dark-commerce.sticky-atc-open::before { z-index: 100; } /** * Desktop Sticky ATC drawer. * * Hidden off-canvas by default and revealed when CommerceKit adds * .sticky-atc-open to . */ body.jr-dark-commerce > form.cart.commercekit_sticky-atc { position: fixed; z-index: 101; top: 0; right: 0; bottom: 0; width: min(30rem, 38vw); max-width: 100%; margin: 0; padding: 0; background: var(--jr-surface); color: var(--jr-text); border: 0; border-left: 1px solid var(--jr-border); box-shadow: -1.5rem 0 3.5rem rgba(0, 0, 0, 0.42), inset 1px 0 0 rgba(255, 255, 255, 0.025); transform: translateX(100%); visibility: hidden; pointer-events: none; transition: transform 280ms ease, visibility 280ms ease; overflow: hidden; } /** * Open state. */ body.jr-dark-commerce.sticky-atc-open > form.cart.commercekit_sticky-atc { transform: translateX(0); visibility: visible; pointer-events: auto; } /* ========================================================================== Inner drawer ========================================================================== */ body.jr-dark-commerce > form.cart.commercekit_sticky-atc .commercekit-pdp-sticky-inner { display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0; background: var(--jr-surface); color: var(--jr-text); overflow-y: auto; overscroll-behavior: contain; padding: 0; } /* ========================================================================== Product information ========================================================================== */ body.jr-dark-commerce > form.cart.commercekit_sticky-atc .commercekit-pdp-before-form { flex: 0 0 auto; margin: 0; padding: 1rem; background: linear-gradient( 180deg, var(--jr-surface-raised), var(--jr-surface) ); border-bottom: 1px solid var(--jr-border); } body.jr-dark-commerce > form.cart.commercekit_sticky-atc .commercekit-pdp-before-form_wrapper { display: flex; align-items: flex-start; gap: 1.25rem; margin: 0; padding: 0; background: transparent; } /** * Product thumbnail. */ body.jr-dark-commerce > form.cart.commercekit_sticky-atc .cgkit-sticky-atc-image { flex: 0 0 6rem; width: 6rem; height: 7.25rem; margin: 0; padding: 0; background: var(--jr-image-bg); border: 1px solid var(--jr-border); overflow: hidden; justify-content: center; display: flex; } body.jr-dark-commerce > form.cart.commercekit_sticky-atc .cgkit-sticky-atc-image img { display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; } /** * Product text. */ body.jr-dark-commerce > form.cart.commercekit_sticky-atc .product-info { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.5rem; min-width: 0; margin: 0; padding: 0.125rem 0 0; background: transparent; } body.jr-dark-commerce > form.cart.commercekit_sticky-atc .content-title { display: block; margin: 0; color: var(--jr-text); font-size: 1rem; font-weight: 600; line-height: 1.45; } /** * Price — same orange/gold treatment as mobile. */ body.jr-dark-commerce > form.cart.commercekit_sticky-atc .price, body.jr-dark-commerce > form.cart.commercekit_sticky-atc .woocommerce-Price-amount, body.jr-dark-commerce > form.cart.commercekit_sticky-atc .woocommerce-Price-currencySymbol { margin: 0; color: var(--jr-warning); font-size: 1rem; font-weight: 700; } /* ========================================================================== Add to Cart controls ========================================================================== */ body.jr-dark-commerce > form.cart.commercekit_sticky-atc .commercekit-pdp-simple-form { flex: 0 0 auto; margin: 0; padding: 1rem; background: var(--jr-surface); } body.jr-dark-commerce > form.cart.commercekit_sticky-atc .commercekit-sticky-atc-intersector { display: flex; align-items: stretch; gap: 0.75rem; width: 100%; margin: 0; padding: 0; background: transparent; } /* ========================================================================== Quantity ========================================================================== */ body.jr-dark-commerce > form.cart.commercekit_sticky-atc .quantity { position: relative; display: flex; flex: 0 0 4.75rem; width: 4.75rem; min-width: 4.75rem; height: 3.375rem; margin: 0; padding: 0; background: var(--jr-bg-deep); color: var(--jr-text); border: 1px solid var(--jr-border); border-radius: 0.1875rem; overflow: hidden; } body.jr-dark-commerce > form.cart.commercekit_sticky-atc .quantity input.qty { appearance: textfield; -webkit-appearance: none; width: 100%; height: 100%; margin: 0; padding: 0 1.875rem 0 0.5rem; background: transparent; color: var(--jr-text); border: 0; border-radius: 0; box-shadow: none; font-size: 0.9375rem; font-weight: 600; text-align: center; } body.jr-dark-commerce > form.cart.commercekit_sticky-atc .quantity input.qty::-webkit-inner-spin-button, body.jr-dark-commerce > form.cart.commercekit_sticky-atc .quantity input.qty::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; } body.jr-dark-commerce > form.cart.commercekit_sticky-atc .quantity .quantity-nav { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: 1.875rem; background: var(--jr-surface-raised); border: 0; } body.jr-dark-commerce > form.cart.commercekit-sticky-atc .quantity .quantity-button, body.jr-dark-commerce > form.cart.commercekit_sticky-atc .quantity .quantity-button { position: relative; display: block; flex: 1 1 50%; width: 100%; height: 50%; margin: 0; padding: 0; background: transparent; color: var(--jr-text); border: 0; box-shadow: none; } body.jr-dark-commerce > form.cart.commercekit_sticky-atc .quantity .quantity-up { border-bottom: 1px solid var(--jr-border); } body.jr-dark-commerce .commercekit_sticky-atc .quantity-button.quantity-down::before, body.jr-dark-commerce .commercekit_sticky-atc .quantity-button.quantity-up::before { background: var(--jr-text); } /* ========================================================================== Add to Basket ========================================================================== */ body.jr-dark-commerce > form.cart.commercekit_sticky-atc .single_add_to_cart_button { flex: 1 1 auto; width: auto; min-width: 0; height: 3.375rem; margin: 0; padding: 0 1.5rem; border: 1px solid var(--jr-green-light); border-radius: 0.1875rem; background: linear-gradient( 135deg, var(--jr-green-light), var(--jr-green) ); color: #07090d; font-weight: 750; box-shadow: 0 0.7rem 1.5rem rgba(0, 0, 0, 0.19), 0 0 1rem rgba(45, 166, 83, 0.08); transition: filter 180ms ease, box-shadow 180ms ease, transform 180ms ease; } body.jr-dark-commerce > form.cart.commercekit_sticky-atc .single_add_to_cart_button:hover { filter: brightness(1.08); transform: translateY(-0.0625rem); box-shadow: 0 0.9rem 1.8rem rgba(0, 0, 0, 0.24), 0 0 1.35rem rgba(45, 166, 83, 0.14); } /* ========================================================================== Close control ========================================================================== */ body.jr-dark-commerce > form.cart.commercekit_sticky-atc .commercekit-pdp-sticky-inner__close-button { position: absolute; top: 1rem; right: 1rem; z-index: 102; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: 0; padding: 0; background: var(--jr-bg-deep); color: var(--jr-text); border: 1px solid var(--jr-border); border-radius: 0; cursor: pointer; } body.jr-dark-commerce > form.cart.commercekit_sticky-atc .commercekit-pdp-sticky-inner__close-button:hover { background: var(--jr-surface-hover); border-color: var(--jr-border-strong); color: var(--jr-green-light); } /* ========================================================================== Scroll-to-top ========================================================================== */ body.jr-dark-commerce.sticky-atc-open .jedi-scroll-to-top { z-index: 99; opacity: 0; visibility: hidden; pointer-events: none; } } /** new */ @media (max-width: 992px) { .min-ck.woocommerce-checkout .site-header .site-branding button.menu-toggle, .min-ck.woocommerce-checkout .site-header .jedi-mobile-search-toggle { display: none; } .jr-dark-commerce .col-full { padding-right: 0; } .jr-dark-commerce .product-details-wrapper { padding-right: 0; } } /** * CommerceKit mobile Sticky Add to Cart. * * Styles CommerceKit's cloned mobile Add to Cart drawer using the * established Jedi-Robe dark commerce design system. * * The sticky form is moved directly beneath by * commercekit-sticky-atc.js to avoid the product-page stacking context. * * @package Jedi_Theme */ @media (max-width: 992px) { /* ========================================================================== Layering ========================================================================== */ /** * CommerceKit backdrop. */ body.jr-dark-commerce.sticky-atc-open::before { z-index: 100; } /** * Complete Sticky Add to Cart sheet. */ body.jr-dark-commerce > form.cart.commercekit_sticky-atc { z-index: 101; background: var(--jr-surface); color: var(--jr-text); border: 1px solid var(--jr-border); border-bottom: 0; box-shadow: 0 -1.5rem 3.5rem rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.025); } /* ========================================================================== Product information ========================================================================== */ body.jr-dark-commerce > form.cart.commercekit_sticky-atc .commercekit-pdp-sticky-inner { background: var(--jr-surface); color: var(--jr-text); } body.jr-dark-commerce > form.cart.commercekit_sticky-atc .commercekit-pdp-before-form { margin: 0; padding: 0.875rem 0.875rem; background: var(--jr-surface); border-bottom: 1px solid var(--jr-border); } body.jr-dark-commerce > form.cart.commercekit_sticky-atc .commercekit-pdp-before-form_wrapper { display: flex; align-items: center; gap: 0.875rem; margin: 0; padding: 0; background: transparent; } /** * Product thumbnail. * * Keep product photography on the light image surface used elsewhere * throughout the Jedi-Robe catalogue. */ body.jr-dark-commerce > form.cart.commercekit_sticky-atc .cgkit-sticky-atc-image { flex: 0 0 4rem; width: 4rem; height: 4.75rem; margin: 0; padding: 0; background: var(--jr-image-bg); border: 1px solid var(--jr-border); overflow: hidden; } body.jr-dark-commerce > form.cart.commercekit_sticky-atc .cgkit-sticky-atc-image img { display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; } /** * Product title and price column. */ body.jr-dark-commerce > form.cart.commercekit_sticky-atc .product-info { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; gap: 0.25rem; min-width: 0; margin: 0; padding: 0; background: transparent; } body.jr-dark-commerce > form.cart.commercekit_sticky-atc .content-title { display: block; margin: 0; color: var(--jr-text); font-size: 0.875rem; font-weight: 500; line-height: 1.4; } /** * Match the orange/gold product-price language already used by the site, * rather than treating price as a success state. */ body.jr-dark-commerce > form.cart.commercekit_sticky-atc .price, body.jr-dark-commerce > form.cart.commercekit_sticky-atc .woocommerce-Price-amount, body.jr-dark-commerce > form.cart.commercekit_sticky-atc .woocommerce-Price-currencySymbol { margin: 0; color: var(--jr-warning); font-weight: 700; } /* ========================================================================== Control row ========================================================================== */ body.jr-dark-commerce > form.cart.commercekit_sticky-atc .commercekit-pdp-simple-form { margin: 0; padding: 0.875rem; background: var(--jr-surface); } body.jr-dark-commerce > form.cart.commercekit_sticky-atc .commercekit-sticky-atc-intersector { display: flex; align-items: stretch; gap: 0.625rem; width: 100%; margin: 0; padding: 0; background: transparent; } /* ========================================================================== Quantity ========================================================================== */ body.jr-dark-commerce > form.cart.commercekit_sticky-atc .quantity { position: relative; display: flex; flex: 0 0 4.5rem; width: 4.5rem; min-width: 4.5rem; height: 3.25rem; margin: 0; padding: 0; border: 1px solid var(--jr-border); border-radius: 0.1875rem; background: var(--jr-bg-deep); color: var(--jr-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025); overflow: hidden; } /** * Remove the browser's native number spinner. * * Shoptimizer already renders its own .quantity-nav controls, so allowing * the browser spinner as well creates the white/grey double-control effect. */ body.jr-dark-commerce > form.cart.commercekit_sticky-atc .quantity input.qty { appearance: textfield; -webkit-appearance: none; width: 100%; height: 100%; margin: 0; padding: 0 1.75rem 0 0.5rem; border: 0; border-radius: 0; background: transparent; color: var(--jr-text); box-shadow: none; font-size: 0.9375rem; font-weight: 600; line-height: 1; text-align: center; } body.jr-dark-commerce > form.cart.commercekit_sticky-atc .quantity input.qty::-webkit-inner-spin-button, body.jr-dark-commerce > form.cart.commercekit_sticky-atc .quantity input.qty::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; } /** * Shoptimizer quantity navigation. */ body.jr-dark-commerce > form.cart.commercekit_sticky-atc .quantity .quantity-nav { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: 1.75rem; border: 1px solid var(--jr-border); background: var(--jr-surface-raised); } body.jr-dark-commerce > form.cart.commercekit_sticky-atc .quantity .quantity-button { position: relative; display: block; flex: 1 1 50%; width: 100%; height: 50%; margin: 0; padding: 0; border: 0; background: transparent; color: var(--jr-text); box-shadow: none; } body.jr-dark-commerce > form.cart.commercekit_sticky-atc .quantity .quantity-up { border-bottom: 1px solid var(--jr-border); } /* ========================================================================== Add to Basket ========================================================================== */ /** * Reproduce the site's canonical Add to Basket treatment. * * The cloned form now lives directly beneath , so the normal selector * `.product .cart .single_add_to_cart_button` can no longer reach it. */ body.jr-dark-commerce > form.cart.commercekit_sticky-atc .single_add_to_cart_button { flex: 1 1 auto; width: auto; min-width: 0; height: 3.25rem; margin: 0; padding: 0 1.25rem; border: 1px solid var(--jr-green-light); border-radius: 0.1875rem; background: linear-gradient( 135deg, var(--jr-green-light), var(--jr-green) ); color: #07090d; font-weight: 750; box-shadow: 0 0.7rem 1.5rem rgba(0, 0, 0, 0.19), 0 0 1rem rgba(45, 166, 83, 0.08); transition: filter 180ms ease, box-shadow 180ms ease, transform 180ms ease; } /* ========================================================================== Close control ========================================================================== */ body.jr-dark-commerce > form.cart.commercekit_sticky-atc .commercekit-pdp-sticky-inner__close-button { z-index: 102; color: var(--jr-text); } body.jr-dark-commerce .commercekit_sticky-atc .quantity-button.quantity-down:before, body.jr-dark-commerce .commercekit_sticky-atc .quantity-button.quantity-up:before { background: var(--jr-text); } /* ========================================================================== Scroll-to-top interaction ========================================================================== */ /** * The global Jedi scroll-to-top component normally uses z-index: 999. * While Sticky ATC is open it must sit behind the CommerceKit modal layer * and must not intercept touch/click input. */ body.jr-dark-commerce.sticky-atc-open .jedi-scroll-to-top { z-index: 99; opacity: 0; visibility: hidden; pointer-events: none; } } /* ========================================================================== Fine pointer interaction ========================================================================== */ @media (max-width: 992px) and (hover: hover) and (pointer: fine) { body.jr-dark-commerce > form.cart.commercekit_sticky-atc .single_add_to_cart_button:hover { filter: brightness(1.08); transform: translateY(-0.0625rem); box-shadow: 0 0.9rem 1.8rem rgba(0, 0, 0, 0.24), 0 0 1.35rem rgba(45, 166, 83, 0.14); } body.jr-dark-commerce > form.cart.commercekit_sticky-atc .quantity .quantity-button:hover { background: var(--jr-surface-hover); } } @media (max-width: 768px) { body.jr-dark-commerce.single-product .related.products ul.products { grid-template-columns: repeat(1, minmax(0, 1fr)); } } .related-wrapper ul.products li.product div.woocommerce-image__wrapper img { max-height: auto; }