/* Theme Name: Neve Child Theme URI: https://themeisle.com/themes/neve/ Template: neve Author: ThemeIsle Author URI: https://themeisle.com Description: Neve is a super fast, easily customizable, multi-purpose theme. It’s perfect for blogs, small business, startups, agencies, firms, e-commerce shops (WooCommerce storefront) as well as personal portfolio sites and most types of projects. A fully AMP optimized and responsive theme, Neve will load in mere seconds and adapt perfectly on any viewing device. While it is lightweight and has a minimalist design, the theme is highly extendable, it has a highly SEO optimized code, resulting in top rankings in Google search results. Neve works perfectly with Gutenberg and the most popular page builders (Elementor, Brizy, Beaver Builder, Visual Composer, SiteOrigin, Divi). Neve is also WooCommerce ready, responsive, RTL & translation ready. Look no further. Neve is the perfect theme for you! Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: neve Tags: blog, custom-logo, e-commerce, rtl-language-support, post-formats, grid-layout, one-column, two-columns, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, flexible-header, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, accessibility-ready, wide-blocks, block-styles */ .footer-bottom-inner .row { grid-template-columns: 1fr !important; display: flex; justify-content: center; align-items: center; } /* Cart icon */ .cart-icon-wrapper .cart-count { background: #ffffff; color: #000000; } /* Text */ p { margin-bottom: 15px; } blockquote { margin: 40px 0; border: solid var(--nv-text-color); border-width: 0 0 0 2px !important; padding: 0 0 0 2em; border-top-left-radius: 20px; border-bottom-left-radius: 20px; } .darkquote { border-color: #ffffff !important; border-width: 0 0 0 2px !important; } /* Logo Text */ .site-logo small { font-size: 14px; font-weight: bold; margin-top: -1.6em; } @media only screen and (max-width: 480px) { .site-logo small { position: relative; top: 0em; font-size: 12px; } } @media only screen and (min-width: 640px) { .site-logo small { position: relative; top: 1em; } } @media only screen and (min-width: 1024px) { .site-logo small { position: relative; top: 0.2em; } } /* Logo */ @media only screen and (max-width: 480px) { .site-logo img { max-width: 4em; } } @media only screen and (min-width: 640px) { .site-logo img { max-width: 4em; } } @media only screen and (min-width: 1024px) { .site-logo img { max-width: 4.5em; } } /* Back to top button */ @media only screen and (max-width: 480px) { button-primary, button, input[type=button], input[type=reset], input[type=submit] { margin-top: -1em; margin-left: 12px; } } /* MailerLite Subscibe Form */ #mlb2-40748594.ml-form-embedContainer { padding-right: 10px; } #mlb2-40748594.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input { margin: 0px 10px !important; } #block-7 { margin-bottom: -2em !important; } #block-10 { margin-bottom: -0.4em !important; } /* __________________________ */ /* SHOP */ /* SHOP PAGE */ /* 1. Add the background image with a light white/grey tint */ body.post-type-archive-product, body.woocommerce-cart, body.woocommerce-checkout { background-image: linear-gradient(rgba(255, 255, 255, 0.33), rgba(255, 255, 255, 0.33)), url('https://arielpress.com/wp-content/uploads/2026/05/paper-seamless-backdrop.jpg') !important; background-repeat: repeat !important; } /* SEARCH PRODUCTS BAR BACKGROUND */ /* 1. Force the input field to be white at all times */ .woocommerce-product-search input[type="search"], .woocommerce-product-search fieldset input, .ws-search-form input, input.search-field { background-color: #ffffff !important; color: #333333 !important; border: 1px solid #cccccc !important; } /* 2. Prevent it from flashing yellow when you click inside it (Focus state) */ .woocommerce-product-search input[type="search"]:focus, input.search-field:focus { background-color: #ffffff !important; border-color: #ff0000 !important; } /* SEARCH BUTTON (MAGNIFYING GLASS) BACKGROUND */ /* 1. Change the button background to a light grey */ .woocommerce-product-search button[type="submit"], .woocommerce-product-search input[type="submit"], .ws-search-form button { background-color: #e0e0e0 !important; color: #333333 !important; border: 1px solid #cccccc !important; border-left: none !important; } /* 2. Change the color when a user hovers over it */ .woocommerce-product-search button[type="submit"]:hover, .ws-search-form button:hover { background-color: #32CD32 !important; } /* Remove sorting dropdown box */ .woocommerce-ordering { display: none !important; } .woocommerce-result-count { display: none !important; } /* Left column titles */ .widget .widget-title { margin-bottom: 10px; font-weight: 700; font-size: 1.2em; } /* Product title */ .woocommerce ul.products li.product a.woocommerce-loop-product__link>h2, .woocommerce ul.products li.product a.woocommerce-loop-product__link>h3 { font-size: 1.15em; text-align: center; } /* Reduces the bottom spacing on the category list box */ .widget_product_categories, .sidebar .widget_product_categories { margin-bottom: 10px !important; padding-bottom: 0 !important; } /* 2. Pulls the Recently Viewed Products widget up into the gap */ .widget_recently_viewed_products, .sidebar .widget_recently_viewed_products { margin-top: 1.5em !important; /* A negative margin pulls the box upwards */ } /* PRICES */ /* Targets the dark Gravestown pages AND the main pale Shop page grid */ body.tax-product_cat.term-gravestown .custom-stacked-prices, body.product-cat-gravestown .custom-stacked-prices, body.post-type-archive-product .custom-stacked-prices { text-align: center !important; display: block !important; width: 100% !important; line-height: 2 !important; font-weight: 500; } /* For your pale Shop page grid (forces dark text for visibility) */ body.post-type-archive-product .custom-stacked-prices { color: #333333 !important; } /* PRICES BACKGROUND COLOUR */ /* Universal layout */ .products .custom-stacked-prices .price-line { padding: 6px 12px !important; margin: 5px auto !important; display: inline-block !important; font-size: 13px !important; font-weight: bold !important; width: 100%; } /* Shop page */ body.post-type-archive-product .products .printed-price { background-color: rgba(185, 217, 235, 0.6) !important; color: #333333 !important; } body.post-type-archive-product .products .digital-price { background-color: rgba(225, 235, 238, 0.7) !important; color: #333333 !important; } /* Gravestown pages */ body.tax-product_cat.term-gravestown .products .printed-price, body.product-cat-gravestown .products .printed-price { background-color: rgba(0, 49, 83, 0.7) !important; color: #ffffff !important; } body.tax-product_cat.term-gravestown .products .digital-price, body.product-cat-gravestown .products .digital-price { background-color: rgba(76, 81, 109, 0.7) !important; color: #ffffff !important; } /* Keeps the stacked prices left-aligned in the sidebar column widgets */ .widget_recently_viewed_products .custom-stacked-prices, .primary-sidebar .custom-stacked-prices, #secondary .custom-stacked-prices { text-align: left !important; } /* GLOBAL SHOP FRONT GRID TITLE HEIGHT EQUALISER */ /* 1. Shop Front Catalog Grid: Force ALL titles to align at the top while keeping banners level at the bottom */ body.post-type-archive-product ul.products li.product h2.woocommerce-loop-product__title, body.post-type-archive-product .products .product h2.woocommerce-loop-product__title, body.post-type-archive-product .products .product [class*="loop-product__title"] { min-height: 95px !important; /* Keeps the identical structural depth to protect your bottom alignment */ display: flex !important; align-items: flex-start !important; /* ANCHORS TITLES TO THE TOP: Forces all text to start flush under the image */ justify-content: center !important; /* Keeps your text center-aligned horizontally matching your design */ text-align: center !important; margin-bottom: 15px !important; /* Fixed visual separation directly above your pricing banners */ padding-top: 5px !important; /* Creates a neat, uniform little gap directly below the image frames */ } /* 2. Ensure all action buttons and checkout options align cleanly below the level pricing row */ body.post-type-archive-product ul.products li.product .neve-loop-actions, body.post-type-archive-product .products .product .neve-loop-actions, body.post-type-archive-product ul.products li.product .button, body.post-type-archive-product .products .product .button { width: 100% !important; display: block !important; text-align: center !important; margin-top: auto !important; } /* ___________________________ */ /* GRAVESTOWN CATEGORY */ /* Hides the 'Category' and 'SKU' section */ body.single-product .product_meta { display: none !important; } /* Hides the Additional Information tab and content for Gravestown */ body.product-cat-gravestown .additional_information_tab, body.product-cat-gravestown #tab-additional_information { display: none !important; } /* BACKGROUND IMAGE */ body.product-cat-gravestown, body.tax-product_cat.term-gravestown { background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('https://arielpress.com/wp-content/uploads/2026/05/gravestown-backdrop-scaled.jpg') !important; background-size: cover !important; background-position: center center !important; background-attachment: fixed !important; background-repeat: no-repeat !important; } /* BREADCRUMBS */ /* Targets all links in the breadcrumb on Gravestown pages */ body.product-cat-gravestown .woocommerce-breadcrumb a, body.tax-product_cat.term-gravestown .woocommerce-breadcrumb a { color: #ff0000 !important; } /* Targets the current (active) page text in the breadcrumb */ body.product-cat-gravestown .woocommerce-breadcrumb, body.tax-product_cat.term-gravestown .woocommerce-breadcrumb { color: #ffffff !important; } /* Optional: Make the breadcrumb links turn red on hover */ body.product-cat-gravestown .woocommerce-breadcrumb a:hover, body.tax-product_cat.term-gravestown .woocommerce-breadcrumb a:hover { color: #ff0000 !important; } /* CATEGORY SHOP PAGE */ /* Targets the Price (Regular and Sale prices) */ body.product-cat-gravestown .price, body.product-cat-gravestown .amount, body.tax-product_cat.term-gravestown .price, body.tax-product_cat.term-gravestown .amount { color: #ffffff !important; } /* Forces the Product Titles in the Gravestown Grid to be White */ body.tax-product_cat.term-gravestown .woocommerce ul.products li.product a.woocommerce-loop-product__link > h2, body.tax-product_cat.term-gravestown .woocommerce ul.products li.product a.woocommerce-loop-product__link > h3, body.tax-product_cat.term-gravestown .woocommerce-loop-product__title { color: #ffffff !important; } /* 1. Target the text when the entire product container is hovered */ body.tax-product_cat.term-gravestown .woocommerce ul.products li.product:hover a.woocommerce-loop-product__link > h2, body.tax-product_cat.term-gravestown .woocommerce ul.products li.product:hover a.woocommerce-loop-product__link > h3, body.tax-product_cat.term-gravestown .woocommerce-loop-product__title:hover { color: #ff0000 !important; transition: color 0.3s ease; /* Makes the color change smooth */ } /* PRODUCT PAGE */ /* Font size and spacing for product description */ .woocommerce-product-details__short-description, .woocommerce-product-details__short-description p { font-family: inherit !important; font-size: 16px !important; line-height: 1.6 !important; } /* Price and breadcrumbs colour */ body.product-cat-gravestown { --nv-link-color: #ffffff !important; --nv-link-color-visited: #ffffff !important; --nv-text-color: #ffffff !important; } /* Text, headings, and meta links */ body.product-cat-gravestown .woocommerce-product-details__short-description p, body.product-cat-gravestown .product_title, body.product-cat-gravestown .price, body.product-cat-gravestown .woocommerce-tabs .tabs li a, body.product-cat-gravestown .woocommerce-Tabs-panel h2 { color: #ffffff !important; } /* Quantity Input Box */ body.product-cat-gravestown .quantity input.qty { background-color: transparent !important; color: #ffffff !important; border: 1px solid #ffffff !important; border-radius: 4px !important; } /* Hide price */ body.product-cat-gravestown .summary > .price { display: none !important; } /* FORCE PORTRAIT GALLERY THUMBNAILS FOR GRAVESTOWN COMICS */ /* Image thumbnails beneath main comic book cover */ body.single-product.product-cat-gravestown .flex-control-thumbs li img, body.single-product.product-cat-gravestown .woocommerce-product-gallery__wrapper .zoomImg { aspect-ratio: 1339 / 2047 !important; object-fit: cover !important; width: 100% !important; height: auto !important; } /* Red border */ body.single-product.product-cat-gravestown .flex-control-thumbs li { background-color: transparent !important; margin-bottom: 10px !important; } body.single-product.product-cat-gravestown .flex-control-thumbs li img { border: 1px solid rgba(255, 255, 255, 0.2) !important; opacity: 0.6; transition: all 0.2s ease; } /* 3. Hover state: Turns the border to your signature red when moused over */ body.single-product.product-cat-gravestown .flex-control-thumbs li img:hover { opacity: 1 !important; border-color: #ff0000 !important; /* Lights up in your signature red */ box-shadow: 0 0 8px rgba(255, 0, 0, 0.6) !important; /* Adds a clean, subtle red gothic glow */ cursor: pointer; } /* VARIATIONS BOXES */ /* Dropdown Select Box */ body.product-cat-gravestown .variations select { background-color: transparent !important; color: #ffffff !important; border: 1px solid #ffffff !important; padding: 5px 10px !important; border-radius: 4px !important; appearance: none; -webkit-appearance: none; } /* "Clear" link */ body.product-cat-gravestown .reset_variations { color: #ff0000 !important; text-decoration: underline; } /* Style the Swatch Buttons (Normal State) */ body.product-cat-gravestown .variable-items-wrapper .variable-item { background-color: transparent !important; color: #ffffff !important; border-radius: 0 !important; padding: 10px 20px !important; font-weight: bold; } /* Style the Selected Button (Active State) */ body.product-cat-gravestown .variable-items-wrapper .variable-item.selected { background-color: #ff0000 !important; border-color: #ff0000 !important; color: #ffffff !important; box-shadow: 0 0 10px rgba(255, 0, 0, 0.6); } /* Style the Hover State */ body.product-cat-gravestown .variable-items-wrapper .variable-item:hover { border-color: #ff0000 !important; color: #ff0000 !important; } /* Hides the 'Format' label */ body.product-cat-gravestown .variations .label, body.product-cat-gravestown .variations th.label { display: none !important; } body.product-cat-gravestown .variations td.value { padding-left: 0 !important; margin-top: 2em; } /* Stackes boxes */ body.product-cat-gravestown .variable-items-wrapper { display: flex; flex-direction: column; gap: 10px; } /* Left align boxes */ body.product-cat-gravestown .variable-items-wrapper { padding-left: 0 !important; margin-left: -2px; !important; margin-bottom: 35px !important; justify-content: flex-start !important; } /* Line under 'Other titles' */ body.product-cat-gravestown .exclusive .products { border-width: 1px; border-top-style: solid; !important; border-color: #ffffff !important; padding-top: 2em !important; } /* Space under product */ .nv-single-product-top { margin-bottom: 2em !important; } /* CLEAR SINGLE PRODUCT GALLERY THUMBNAIL OVERLAYS */ /* Force all inactive gallery images to display at full color, brightness, and 100% opacity */ .flex-control-thumbs li img, body.single-product .flex-control-thumbs li img { opacity: 1 !important; /* Strips away the dull theme fade layout entirely */ filter: none !important; -webkit-filter: none !important; } /* Optional hover interaction: adds a clean, sleek zoom pop to show clickability */ .flex-control-thumbs li img:hover { transform: scale(1.03); transition: transform 0.2s ease-in-out; } /* PERMANENT GRAVESTOWN CHRONOLOGICAL SERIES LOCK */ /* 1. Turn the "Other titles in this series" layout list into a strict layout track */ .single-product .up-sells ul.products, .single-product .upsells ul.products, .single-product .related.products ul.products { display: flex !important; flex-wrap: wrap !important; } /* Issue 1 */ .single-product ul.products li.post-1063 { order: 1 !important; } /* Issue 2 */ .single-product ul.products li.post-1146 { order: 2 !important; } /* Issue 3 */ .single-product ul.products li.post-1264 { order: 3 !important; } /* Issue 4 */ .single-product ul.products li.post-1572 { order: 4 !important; } /* Gravestown Trade Paperback */ .single-product ul.products li.post-1812 { order: 5 !important; } /* Gravestown Collected Edition Hardback */ .single-product ul.products li.post-1815 { order: 6 !important; } /* BOTTOM CROSS-PROMOTION SEPARATION LINES */ /* COMICS CATEGORIES */ body.single-product.product-cat-gravestown .up-sells, body.single-product.product-cat-gravestown .upsells, body.single-product.product-cat-gravestown .related.products { border-top: 1px solid #ff0000 !important; padding-top: 55px !important; margin-top: -15px !important; } /* ART CATEGORIES */ body.tax-product_cat.term-art .up-sells, body.tax-product_cat.term-art .upsells, body.tax-product_cat.term-art .related.products, body.single-product.product-cat-art .up-sells, body.single-product.product-cat-art .upsells, body.single-product.product-cat-art .related.products { border-top: 1px solid #ff0000 !important; padding-top: 55px !important; margin-top: 40px !important; } /* MERCHANDISE CATEGORY: */ body.tax-product_cat.term-merchandise .up-sells, body.tax-product_cat.term-merchandise .upsells, body.tax-product_cat.term-merchandise .related.products, body.single-product.product-cat-merchandise .up-sells, body.single-product.product-cat-merchandise .upsells, body.single-product.product-cat-merchandise .related.products { border-top: 1px solid #000000 !important; padding-top: 35px !important; margin-top: 35px !important; } /* ______________________ */ /* HOMEPAGE AND SHOP GRID BASELINE EQUALIZER */ /* 1. HOMEPAGE LOOP: Force the product names in your modern homepage grid to share an identical box height */ .wc-block-product-template .wc-block-product h2.wp-block-post-title, .wp-block-woocommerce-product-template .wc-block-product h2.wp-block-post-title { min-height: 65px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; margin-bottom: 15px !important; / } /* 2. STANDARD SHOP LOOPS: Force your standard theme shop category grids to follow the exact same height baseline */ .products .product h2.woocommerce-loop-product__title, ul.products li.product h2.woocommerce-loop-product__title, .is-merchandise-card h2.woocommerce-loop-product__title { min-height: 65px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; margin-bottom: 15px !important; } /* 3. BUTTON ALIGNMENT: Ensure your homepage "Select Options" button wrappers sit level across all rows */ .wc-block-product .wp-block-woocommerce-product-button, .wc-block-product .wc-block-components-product-button { margin-top: auto !important; display: block !important; width: 100% !important; } /* 4. Force the underlying homepage cards to utilize clear relative structural layouts */ .wc-block-product-template .wc-block-product, .wp-block-woocommerce-product-template .wc-block-product { display: flex !important; flex-direction: column !important; height: 100% !important; } /* FIX GRAVESTOWN COMIC TITLE TOP GAP OFFSET */ /* Pulls the comic titles up slightly on standard shop grids to balance them with merchandise */ body.post-type-archive-product ul.products li.product:not(.is-merchandise-card) h2.woocommerce-loop-product__title { margin-top: 0 !important; min-height: 80px !important; } /* Safety fix for mobile viewports to ensure text elements stay properly spaced */ @media (max-width: 768px) { body.post-type-archive-product ul.products li.product:not(.is-merchandise-card) h2.woocommerce-loop-product__title { margin-top: 0 !important; min-height: 65px !important; } } /* ______________________ */ /* MERCHANDISE CATEGORY */ /* Background */ body.tax-product_cat.term-merchandise, body.single-product.product-cat-merchandise { background-image: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)), url('https://arielpress.com/wp-content/uploads/2026/07/paper-seamless-backdrop-1.jpg') !important; background-repeat: repeat !important; } /* CHANGE IMAGE FORMAT */ /* Reset the animation track containers so the thumbnail switch click can glide safely */ body.single-product.product-cat-merchandise .flex-viewport, body.single-product.product-cat-merchandise .woocommerce-product-gallery__wrapper { aspect-ratio: auto !important; height: auto !important; } /* Target ONLY the actual images inside the gallery box to force your comic footprint */ body.single-product.product-cat-merchandise .woocommerce-product-gallery__image img, body.single-product.product-cat-merchandise .woocommerce-product-gallery__wrapper .flex-active-slide img { aspect-ratio: 1339 / 2047 !important; object-fit: cover !important; width: 100% !important; height: auto !important; } /* Force the small thumbnail selector boxes underneath the shirt picture to match */ body.single-product.product-cat-merchandise .flex-control-thumbs li img { aspect-ratio: 1339 / 2047 !important; object-fit: cover !important; opacity: 0.7; transition: opacity 0.2s ease; } /* Normal state - no border */ body.single-product.product-cat-merchandise .flex-control-thumbs li img { aspect-ratio: 1339 / 2047 !important; object-fit: cover !important; opacity: 0.6; border: 1px solid rgba(0, 0, 0, 0.1) !important; transition: all 0.2s ease; cursor: pointer; } /* Hover state */ body.single-product.product-cat-merchandise .flex-control-thumbs li img:hover { opacity: 1 !important; border-color: #ff0000 !important; box-shadow: 0 0 8px rgba(255, 0, 0, 0.5) !important; } /* Quantity box colour */ body.single-product.product-cat-merchandise .quantity input.qty { background-color: #ffffff !important; color: #333333 !important; border: 1px solid #cccccc !important; padding: 0 8px !important; border-radius: 0 !important; height: 44px !important; line-height: 44px !important; display: inline-block !important; } /* 2. Prevent the box from flashing yellow when a customer clicks inside it to type */ body.single-product.product-cat-merchandise .quantity input.qty:focus { background-color: #ffffff !important; border-color: #ff0000 !important; /* Optional: outline turns red on click to match theme */ outline: none !important; } /* Price Boxes */ /* 1. Forces the grey price box to display and stretch to full image width on BOTH pages */ body.tax-product_cat.term-merchandise ul.products li.product .price, body.tax-product_cat.term-merchandise .products .product .price, body.post-type-archive-product ul.products li.product.is-merchandise-card .price { text-align: center !important; display: block !important; /* Expands the box horizontally across the card width */ width: 100% !important; /* Spans 100% of the available grid column wrapper */ max-width: 100% !important; box-sizing: border-box !important; /* Prevents inside spacing from clipping the borders */ margin: 8px 0 0 0 !important; /* Neat vertical margin break below your shirt title */ padding: 8px 12px !important; /* Cushions the font safely inside the background bar */ background-color: rgba(224, 224, 224, 0.85) !important; /* Semi-transparent grey banner letting your tile filter through */ color: #333333 !important; /* Dark charcoal font color for crisp readability */ font-size: 13px !important; font-weight: bold !important; border-radius: 3px !important; /* Softens the sharp edges of the bar slightly */ } /* 2. Lock the alignment properties of the text elements to the middle of the cards */ body.tax-product_cat.term-merchandise ul.products li.product, body.tax-product_cat.term-merchandise .products .product, body.post-type-archive-product ul.products li.product.is-merchandise-card { text-align: center !important; } /* DISPLAY PRICE FOR MERCHANDISE (KEEP COMICS HIDDEN) */ /* 1. Force the top price block below the title to show up ONLY on Merchandise items */ body.single-product.product-cat-merchandise .summary-inner > .price, body.single-product.product-cat-merchandise .entry-summary .price { display: block !important; visibility: visible !important; } /* 2. Format the merchandise price text so it is large, dark charcoal, and stands out on your seamless tile */ body.single-product.product-cat-merchandise .summary-inner .price .amount, body.single-product.product-cat-merchandise .entry-summary .price .amount { color: #333333 !important; /* Dark charcoal text for readability */ font-size: 26px !important; /* Large, clear pricing font */ font-weight: bold !important; margin-top: 10px !important; margin-bottom: 15px !important; display: inline-block !important; } /* 'Related products' section prices */ /* 1. Targets the price bars inside the Related Products section underneath the T-shirt */ .single-product .related.products ul.products li.product .price, .single-product .related.products .products .product .price { text-align: center !important; display: block !important; /* Expands the box horizontally across the card */ width: 100% !important; /* Spans 100% of the available grid column wrapper */ max-width: 100% !important; box-sizing: border-box !important; /* Prevents inside spacing from clipping the borders */ margin: 8px 0 0 0 !important; /* Neat vertical margin break below your shirt title */ padding: 8px 12px !important; /* Cushions the font safely inside the background bar */ background-color: rgba(224, 224, 224, 0.85) !important; /* Semi-transparent grey banner letting your tile filter through */ color: #333333 !important; /* Dark charcoal font color for crisp readability */ font-size: 13px !important; font-weight: bold !important; border-radius: 3px !important; /* Softens the sharp edges of the bar slightly */ } /* 2. Lock the center text alignment for the entire product card inside that specific bottom section */ .single-product .related.products ul.products li.product, .single-product .related.products .products .product { text-align: center !important; } /* MERCHANDISE CLOTHING SWATCH LEFT ALIGNMENT */ /* 1. Reset responsive margins to force your clothing buttons row to align flush to the left */ body.single-product.product-cat-merchandise .variations td.value { display: flex !important; flex-wrap: wrap !important; padding: 10px 0 !important; /* Clears top and bottom padding boundaries */ box-sizing: border-box !important; } /* DESKTOP VIEWPORT: Pulls your clothing buttons flush to the left on wide computer screens */ @media (min-width: 769px) { body.single-product.product-cat-merchandise .variations td.value { margin-left: -10px !important; /* Fixed pixel pull to match your text grid boundaries */ } } /* MOBILE AND TABLET VIEWPORTS: Applies a tailored negative margin to clear the mobile padding tracks */ @media (max-width: 768px) { body.single-product.product-cat-merchandise .variations td.value { margin-left: -15px !important; /* Slightly stronger pull to fit perfectly on compact phone screens */ } } /* __________________________ */ /* ART CATEGORY */ /* Background */ body.tax-product_cat.term-art, body.single-product.product-cat-art { background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6 )), url('https://arielpress.com/wp-content/uploads/2026/07/art-backdrop-texture.jpg') !important; background-repeat: repeat !important; } /* CHANGE IMAGE FORMAT */ /* Reset the animation track containers so the thumbnail switch click can glide safely */ body.single-product.product-cat-art .flex-viewport, body.single-product.product-cat-art .woocommerce-product-gallery__wrapper { aspect-ratio: auto !important; height: auto !important; } /* Target ONLY the actual images inside the gallery box to force your comic footprint */ body.single-product.product-cat-art .woocommerce-product-gallery__image img, body.single-product.product-cat-art .woocommerce-product-gallery__wrapper .flex-active-slide img { aspect-ratio: 1339 / 2047 !important; object-fit: cover !important; width: 100% !important; height: auto !important; } /* Force the small thumbnail selector boxes underneath the shirt picture to match */ body.single-product.product-cat-art .flex-control-thumbs li img { aspect-ratio: 1339 / 2047 !important; object-fit: cover !important; opacity: 0.7; transition: opacity 0.2s ease; } /* Normal state - no border */ body.single-product.product-cat-art .flex-control-thumbs li img { aspect-ratio: 1339 / 2047 !important; object-fit: cover !important; opacity: 0.6; border: 1px solid rgba(0, 0, 0, 0.1) !important; transition: all 0.2s ease; cursor: pointer; } /* Hover state */ body.single-product.product-cat-art .flex-control-thumbs li img:hover { opacity: 1 !important; border-color: #ff0000 !important; box-shadow: 0 0 8px rgba(255, 0, 0, 0.5) !important; } /* Quantity box colour */ body.single-product.product-cat-art .quantity input.qty { background-color: transparent !important; color: #ffffff !important; border: 1px solid #ffffff !important; border-radius: 4px !important; margin-left: 2px; margin-right: 1px; } /* 2. Prevent the box from flashing yellow when a customer clicks inside it to type */ body.single-product.product-cat-art .quantity input.qty:focus { background-color: #ffffff !important; border-color: #ff0000 !important; outline: none !important; } /* Price Boxes */ /* 1. Forces the grey price box to display and stretch to full image width on BOTH pages */ body.tax-product_cat.term-art ul.products li.product .price, body.tax-product_cat.term-art .products .product .price, body.post-type-archive-product ul.products li.product.is-art-card .price { text-align: center !important; display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 8px 0 0 0 !important; padding: 8px 12px !important; background-color: rgba(224, 224, 224, 0.85) !important; color: #333333 !important; font-size: 13px !important; font-weight: bold !important; border-radius: 3px !important; } /* 2. Lock the alignment properties of the text elements to the middle of the cards */ body.tax-product_cat.term-art ul.products li.product, body.tax-product_cat.term-art .products .product, body.post-type-archive-product ul.products li.product.is-art-card { text-align: center !important; } /* Align boxes to the left */ .woocommerce.single #tab-description ol, .woocommerce.single #tab-description ul, .woocommerce.single .entry-summary ol, .woocommerce.single .entry-summary ul { padding-left: 9px; margin-bottom: 15px; } /* DISPLAY PRICE FOR art (KEEP COMICS HIDDEN) */ /* 1. Force the top price block below the title to show up ONLY on art items */ body.single-product.product-cat-art .summary-inner > .price, body.single-product.product-cat-art .entry-summary .price { display: block !important; visibility: visible !important; } /* 2. Format the art price text so it is large, dark charcoal, and stands out on your seamless tile */ body.single-product.product-cat-art .summary-inner .price .amount, body.single-product.product-cat-art .entry-summary .price .amount { color: #333333 !important; font-size: 26px !important; font-weight: bold !important; margin-top: 10px !important; margin-bottom: 15px !important; display: inline-block !important; } /* 'Related products' section prices */ /* 1. Targets the price bars inside the Related Products section underneath the T-shirt */ .single-product .related.products ul.products li.product .price, .single-product .related.products .products .product .price { text-align: center !important; display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 8px 0 0 0 !important; padding: 8px 12px !important; background-color: rgba(224, 224, 224, 0.85) !important; color: #333333 !important; font-size: 13px !important; font-weight: bold !important; border-radius: 3px !important; } /* 2. Lock the center text alignment for the entire product card inside that specific bottom section */ .single-product .related.products ul.products li.product, .single-product .related.products .products .product { text-align: center !important; } /* ART GALLERY BLOCK COLOR OVERWRITE */ /* 1. Global Core Text Overwrite: Forces titles, text blocks, and counts to turn white */ .tax-product_cat.term-art h1, .tax-product_cat.term-art h2, .tax-product_cat.term-art p, .tax-product_cat.term-art .page-title, .tax-product_cat.term-art .woocommerce-result-count, .tax-product_cat.term-art .wc-block-grid__product-title, .tax-product_cat.term-art .wp-block-post-title { color: #ffffff !important; } /* 2. Direct Anchor Overwrite: Changes all block item titles and general links to white */ .tax-product_cat.term-art a, .tax-product_cat.term-art h2 a, .tax-product_cat.term-art .wp-block-post-title a, .tax-product_cat.term-art .wc-block-product-template a { color: #ffffff !important; } /* 3. Navigation Paths: Converts your archive breadcrumbs into white text strings */ .tax-product_cat.term-art .woocommerce-breadcrumb, .tax-product_cat.term-art .woocommerce-breadcrumb a, .tax-product_cat.term-art .nv-page-title-wrap a { color: rgba(255, 255, 255, 0.85) !important; } .tax-product_cat.term-art .woocommerce-breadcrumb a:hover { color: #ff0000 !important; /* Glows your signature red on mouse hover */ } /* 4. Pricing Badges: Gives your art grid numbers a high-contrast frosted look */ .tax-product_cat.term-art .wc-block-components-product-price, .tax-product_cat.term-art .woocommerce-Price-amount, .tax-product_cat.term-art .wc-block-grid__product-price, .tax-product_cat.term-art .amount bdi { color: #ffffff !important; background-color: rgba(255, 255, 255, 0.15) !important; /* Translucent frosted banner background */ border: 1px solid rgba(255, 255, 255, 0.25) !important; } /* ART INDIVIDUAL PRODUCT PAGES WHITE TEXT STACK */ /* 1. Master Page Titles, Descriptions, Reviews, and Tabs Content */ body.single-product.product-cat-art h1, body.single-product.product-cat-art h1.product_title, body.single-product.product-cat-art p, body.single-product.product-cat-art .woocommerce-product-details__short-description, body.single-product.product-cat-art .entry-summary, body.single-product.product-cat-art .woocommerce-Tabs-panel, body.single-product.product-cat-art label { color: #ffffff !important; } /* 2. Variation Dropdown Text and Attributes (e.g., Dimensions/Frames text) */ body.single-product.product-cat-art th.label label, body.single-product.product-cat-art .variations td, body.single-product.product-cat-art .woocommerce-product-attributes-item__label, body.single-product.product-cat-art .woocommerce-product-attributes-item__value p { color: #ffffff !important; } /* 3. Navigation Paths: Converts your individual item breadcrumbs and metadata links into white */ body.single-product.product-cat-art .woocommerce-breadcrumb, body.single-product.product-cat-art .woocommerce-breadcrumb a, body.single-product.product-cat-art .product_meta, body.single-product.product-cat-art .product_meta a, body.single-product.product-cat-art .posted_in a { color: rgba(255, 255, 255, 0.85) !important; } body.single-product.product-cat-art .woocommerce-breadcrumb a:hover, body.single-product.product-cat-art .product_meta a:hover { color: #ff0000 !important; /* Glows your signature red on mouse hover */ } /* 4. Core Details Page Pricing: Formats the large main price text under the canvas title */ body.single-product.product-cat-art .summary-inner .price, body.single-product.product-cat-art .entry-summary .price, body.single-product.product-cat-art .price .amount, body.single-product.product-cat-art .amount bdi { color: #ffffff !important; } /* ART DETAILS PAGE TABS & ACCORDION TITLES */ /* 1. Target the clickable tab headings (Description / Additional Info buttons) */ body.single-product.product-cat-art .woocommerce-tabs ul.tabs li a, body.single-product.product-cat-art .wc-tabs li a { color: rgba(255, 255, 255, 0.8) !important; /* Soft white tab title links */ background-color: transparent !important; } /* 2. Highlight the active/selected tab heading line */ body.single-product.product-cat-art .woocommerce-tabs ul.tabs li.active a, body.single-product.product-cat-art .wc-tabs li.active a { color: #ffffff !important; /* Crisp white for the currently visible section heading */ border-bottom: 2px solid #ff0000 !important; /* Adds your signature red underline indicator */ } /* 3. Target the large text headings inside the tab panel boxes themselves */ body.single-product.product-cat-art .woocommerce-Tabs-panel h2, body.single-product.product-cat-art #tab-description h2, body.single-product.product-cat-art #tab-additional_information h2 { color: #ffffff !important; } /* ART DETAILS PAGE RELATED PRODUCTS WHITE TEXT */ /* 1. Target the main section header ("Related products") */ body.single-product.product-cat-art .related.products h2, body.single-product.product-cat-art .related.products h2.wp-block-heading { color: #ffffff !important; } /* 2. Target the product titles inside the related items cards */ body.single-product.product-cat-art .related.products ul.products li.product h2 a, body.single-product.product-cat-art .related.products .products .product h2.woocommerce-loop-product__title { color: #ffffff !important; } /* 3. Target the pricing text and layout numbers inside the related collection card items */ body.single-product.product-cat-art .related.products .products .product .price, body.single-product.product-cat-art .related.products .products .product .price .amount, body.single-product.product-cat-art .related.products .products .product .price bdi { color: #ffffff !important; } /* 4. Canvas Prints Related Pricing Badges: Gives them that matching high-contrast frosted look */ body.single-product.product-cat-art .related.products .products .product .price { background-color: rgba(255, 255, 255, 0.15) !important; /* Translucent light frost bar */ border: 1px solid rgba(255, 255, 255, 0.25) !important; /* Clean boundary border line layout */ } /* UNIVERSAL FROSTED GRID PRICE FIX FOR ART BLOCKS */ /* 1. Force the block price containers on the Art page views to adopt your full-width layout rules */ .tax-product_cat.term-art .is-merchandise-card .wp-block-woocommerce-product-price, .tax-product_cat.term-art .is-merchandise-card [data-block-name="woocommerce/product-price"], body.home .wp-block-woocommerce-product-collection li.product:has(a[href*="product/art"]) .wp-block-woocommerce-product-price, body.home .wc-block-product-template li.product:has(a[href*="product-cat-art"]) .wp-block-woocommerce-product-price { display: block !important; /* Resizes the container out of its narrow layout flow tracker */ width: 100% !important; /* Spans 100% of the available grid card column space */ max-width: 100% !important; box-sizing: border-box !important; margin: 8px 0 !important; background-color: rgba(255, 255, 255, 0.15) !important; /* Beautiful uniform frosted-glass background */ border: 1px solid rgba(255, 255, 255, 0.25) !important; /* Clean frosted boundary lines */ padding: 8px 12px !important; /* Cushions all text elements safely inside the banner */ border-radius: 3px !important; /* Softens the sharp corners slightly to match site design */ } /* 2. Strip the stubborn backgrounds and borders off the DEEPER interior block frames inside your Art elements */ .tax-product_cat.term-art .is-merchandise-card .wc-block-components-product-price, .tax-product_cat.term-art .is-merchandise-card .wc-block-grid__product-price, body.home .wp-block-woocommerce-product-collection li.product .wc-block-components-product-price, body.home .wc-block-product-template li.product .wc-block-grid__product-price { background-color: transparent !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; display: inline !important; /* Forces text strings and numbers onto a single line */ } /* ART CATEGORY ARCHIVE GRID FROSTED BADGES & ALIGNMENT */ /* 1. Target the pricing container blocks on the main Art Category page to apply the frosted-glass banner */ body.tax-product_cat.term-art .wc-block-product-template .wc-block-product .wp-block-woocommerce-product-price, body.tax-product_cat.term-art .wc-block-product-template .wc-block-product [data-block-name="woocommerce/product-price"] { display: block !important; /* Expands the box horizontally across the card width */ width: 100% !important; /* Spans 100% of the available grid column cell width */ max-width: 100% !important; box-sizing: border-box !important; /* Prevents internal spacing from clipping the borders */ margin: 10px auto !important; /* Clean vertical margin break below your art title */ padding: 8px 12px !important; /* Cushions all text elements safely inside the banner */ border-radius: 3px !important; /* Softens the sharp corners slightly to match site design */ background-color: rgba(255, 255, 255, 0.15) !important; /* Beautiful uniform frosted-glass background */ border: 1px solid rgba(255, 255, 255, 0.25) !important; /* Clean frosted boundary lines */ } /* 2. Strip the stubborn backgrounds and borders off the internal wrappers on the Category page view */ body.tax-product_cat.term-art .wc-block-product-template .wc-block-product .wc-block-components-product-price, body.tax-product_cat.term-art .wc-block-product-template .wc-block-product .wc-block-grid__product-price { background-color: transparent !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; display: inline !important; /* Forces text strings and numbers onto a single line */ } /* 3. Force the product title space on the Category page to match heights, keeping the badges aligned */ body.tax-product_cat.term-art .wc-block-product-template .wc-block-product h2.wp-block-post-title { min-height: 65px !important; /* Matches the height track used across your other grids */ display: flex !important; align-items: center !important; /* Centers shorter titles vertically inside the tracking space */ justify-content: center !important; text-align: center !important; margin-bottom: 15px !important; } /* ART ARCHIVE STANDARD GRID FROSTED BADGES & ALIGNMENT */ /* 1. Target the merchandise price class wrapper ONLY when it appears inside the dark Art Category view */ body.tax-product_cat.term-art ul.products li.product.is-merchandise-card .price, body.tax-product_cat.term-art .products .product.is-merchandise-card .price, .tax-product_cat.term-art .art-frosted-grid-fix .price { background-color: rgba(255, 255, 255, 0.15) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; text-align: center !important; display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 10px auto !important; padding: 8px 12px !important; border-radius: 3px !important; } /* 2. Force the text strings ("Printed -"), lines, and currency indicators inside this archive loop to turn white */ body.tax-product_cat.term-art ul.products li.product.is-merchandise-card .price *, body.tax-product_cat.term-art .products .product.is-merchandise-card .price-line, body.tax-product_cat.term-art .products .product.is-merchandise-card .printed-price, body.tax-product_cat.term-art .woocommerce-Price-amount bdi { color: #ffffff !important; } /* 3. Force the standard theme art title spaces to match heights, keeping your new frosted bars aligned */ body.tax-product_cat.term-art ul.products li.product.is-merchandise-card h2.woocommerce-loop-product__title { min-height: 65px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; margin-bottom: 15px !important; color: #ffffff !important; } /* ART ARCHIVE MASTER CLEANUP AND BASELINE LINEUP */ /* 1. FORCE CLEARING: Strips backgrounds and borders off ALL nested containers inside the Art price row */ body.tax-product_cat.term-art ul.products li.product.is-merchandise-card .price *, body.tax-product_cat.term-art .products .product.is-merchandise-card .price *, .tax-product_cat.term-art .price .amount *, .tax-product_cat.term-art .price bdi { background-color: transparent !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; display: inline !important; } /* 2. NEVE GRID ANCHOR: Force the parent grid cells to match heights and align elements along the bottom */ body.tax-product_cat.term-art ul.products, body.tax-product_cat.term-art .products { display: flex !important; flex-wrap: wrap !important; } body.tax-product_cat.term-art ul.products li.product.is-merchandise-card, body.tax-product_cat.term-art .products .product.is-merchandise-card { display: flex !important; flex-direction: column !important; height: auto !important; } /* 3. PUSH SPACER: Forces the main price badge to lock perfectly flush to the baseline across all cards */ body.tax-product_cat.term-art ul.products li.product.is-merchandise-card .price, body.tax-product_cat.term-art .products .product.is-merchandise-card .price { margin-top: auto !important; margin-bottom: 10px !important; } /* ART ARCHIVE INNER LINK BASELINE FORCE */ /* 1. Force Neve's inner content wrapper to stretch and fill 100% of the available row track height */ body.tax-product_cat.term-art ul.products li.product.is-merchandise-card .nv-card-content-wrapper, body.tax-product_cat.term-art .products .product.is-merchandise-card .nv-card-content-wrapper { display: flex !important; flex-direction: column !important; height: 100% !important; } /* 2. Force the title anchor link container itself to expand and handle the layout spacing */ body.tax-product_cat.term-art ul.products li.product.is-merchandise-card a.woocommerce-LoopProduct-link, body.tax-product_cat.term-art .products .product.is-merchandise-card a.woocommerce-LoopProduct-link { display: flex !important; flex-direction: column !important; flex-grow: 1 !important; height: 100% !important; } /* 3. The Core Elastic Link: Push the price badge to the floor of the card cell */ body.tax-product_cat.term-art ul.products li.product.is-merchandise-card h2.woocommerce-loop-product__title, body.tax-product_cat.term-art .products .product.is-merchandise-card h2.woocommerce-loop-product__title { margin-bottom: auto !important; } /* PERMANENT RED BREADCRUMBS FOR ART PAGES */ /* 1. Force the active links inside the Art Category page breadcrumbs to stay permanently red */ body.tax-product_cat.term-art .woocommerce-breadcrumb a, .term-art .woocommerce-breadcrumb a { color: #ff0000 !important; } /* 2. Force the active links inside the individual Art Product page breadcrumbs to stay permanently red */ body.single-product.product-cat-art .woocommerce-breadcrumb a { color: #ff0000 !important; } /* 3. Visual polish: Keeps the final non-linked plain text part (the current page name) white/silver so it's easy to read */ body.tax-product_cat.term-art .woocommerce-breadcrumb, body.single-product.product-cat-art .woocommerce-breadcrumb { color: rgba(255, 255, 255, 0.6) !important; } /* ART CANVAS SWATCH LAYOUT PERFECTION */ /* 1. Reset cell padding and enforce responsive left alignments for ALL device screen sizes */ body.single-product.product-cat-art .variations td.value { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; padding: 10px 0 !important; box-sizing: border-box !important; } /* DESKTOP VIEWPORT: Applies your precise left-side shift alignment on wide monitors */ @media (min-width: 769px) { body.single-product.product-cat-art .variations td.value { margin-left: -10px !important; } } /* MOBILE AND TABLET VIEWPORTS: Applies a tailored negative margin to clear the responsive mobile indent */ @media (max-width: 768px) { body.single-product.product-cat-art .variations td.value { margin-left: -15px !important; } } /* 2. Strip background colors, shadows, and borders off all hidden nested container frames */ body.single-product.product-cat-art .variations td.value .variable-item *, body.single-product.product-cat-art .variations td.value .variable-item-contents, body.single-product.product-cat-art .variations td.value .variable-item-span { background-color: transparent !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } /* 3. Style the outer button containers into your uniform frosted-glass design */ body.single-product.product-cat-art .variations td.value .variable-item, body.single-product.product-cat-art .button-variable-item { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 12px 22px !important; background-color: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; color: #ffffff !important; border-radius: 4px !important; cursor: pointer !important; height: auto !important; width: auto !important; min-width: 120px !important; box-sizing: border-box !important; transition: all 0.2s ease-in-out !important; } /* 4. ENLARGE PRICE FONT: Bumps up the size and prominence of the injected variation price digits */ body.single-product.product-cat-art .variations .swatch-price-tag { font-size: 15px !important; font-weight: 700 !important; opacity: 1 !important; margin-top: 5px !important; } /* 5. REMOVE REDUNDANT PRICE STRINGS: Forcefully hides any lingering theme summary prices above the choices */ body.single-product.product-cat-art .summary .price, body.single-product.product-cat-art .entry-summary .price, body.single-product.product-cat-art p.price { display: none !important; } /* 6. Active Selection State: Glows your signature brand red when a user chooses a canvas size */ body.single-product.product-cat-art .variations td.value .variable-item.selected, body.single-product.product-cat-art .button-variable-item.selected { background-color: #ff0000 !important; border-color: #ff0000 !important; box-shadow: 0 0 12px rgba(255, 0, 0, 0.45) !important; } body.single-product.product-cat-art .variations td.value .variable-item.selected *, body.single-product.product-cat-art .button-variable-item.selected * { color: #ffffff !important; } /* 7. Hover State: Smooth hover interaction to show clickability before selecting an option */ body.single-product.product-cat-art .variations td.value .variable-item:hover:not(.selected) { background-color: rgba(255, 255, 255, 0.2) !important; border-color: rgba(255, 255, 255, 0.4) !important; transform: translateY(-1px); } /* __________________________ */ /* TWIST AND TURN CATEGORY */ /* 1. Inherit all your dark theme text alignments and white variables instantly using the utility class */ .tax-product_cat.term-twist-and-turn, body.single-product.product-cat-twist-and-turn { --wp--preset--color--black: #ffffff !important; color: #ffffff !important; } /* 2. Dedicate just ONE simple rule to apply your unique background wallpaper graphic! */ body.tax-product_cat.term-twist-and-turn, body.single-product.product-cat-twist-and-turn { background-image: url('https://arielpress.com/wp-content/uploads/2026/05/twist-turn-the-faerie-king-1-scaled.jpg') !important; background-size: cover !important; background-attachment: fixed !important; } /* TWIST AND TURN COMIC VARIATIONS & QUANTITY SYNC */ /* 1. BUTTON TEXT & LAYOUT: Removes the white background, adds the white border outline, and flips the text to white */ body.single-product.product-cat-twist-and-turn .variations td.value .variable-item, body.single-product.product-cat-twist-and-turn .button-variable-item { background-color: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; } /* Fixes the active clicked selection state to flash into your deep signature red button */ body.single-product.product-cat-twist-and-turn .variations td.value .variable-item.selected, body.single-product.product-cat-twist-and-turn .button-variable-item.selected { background-color: #ff0000 !important; border-color: #ff0000 !important; color: #ffffff !important; box-shadow: 0 0 10px rgba(255, 0, 0, 0.4) !important; } /* 2. REMOVE BUTTON INDENT & FORCE VERTICAL STACK: Stacks Printed and Digital vertically just like Gravestown */ body.single-product.product-cat-twist-and-turn .variations td.value { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; padding: 10px 0 !important; box-sizing: border-box !important; } @media (min-width: 769px) { body.single-product.product-cat-twist-and-turn .variations td.value { margin-left: -10px !important; } } @media (max-width: 768px) { body.single-product.product-cat-twist-and-turn .variations td.value { margin-left: -15px !important; } } /* Extends the buttons horizontally so they form clean, matching, full-width stacked blocks */ body.single-product.product-cat-twist-and-turn .variations td.value .variable-item { width: 100% !important; max-width: 280px !important; text-align: center !important; } /* 3. QUANTITY BOX CLEANUP: Strips the default yellow style background, adding the clean white text and outline */ body.single-product.product-cat-twist-and-turn .quantity input.qty, body.single-product.product-cat-twist-and-turn .quantity .qty { background-color: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; border-radius: 4px !important; } /* 4. WHITE BREADCRUMBS ENDING: Flips the final plain-text active page trail ending item to crisp white */ body.tax-product_cat.term-twist-and-turn .woocommerce-breadcrumb, body.single-product.product-cat-twist-and-turn .woocommerce-breadcrumb { color: rgba(255, 255, 255, 0.6) !important; } body.tax-product_cat.term-twist-and-turn .woocommerce-breadcrumb a, body.single-product.product-cat-twist-and-turn .woocommerce-breadcrumb a { color: #ff0000 !important; } /* 5. UNIFIED COMIC VARIATION BUTTONS: Perfect centering and identical 280px widths */ body.single-product.product-cat-twist-and-turn .variations td.value .variable-item, body.single-product.product-cat-twist-and-turn .variations td.value .button-variable-item, body.single-product.product-cat-gravestown .variations td.value .variable-item, body.single-product.product-cat-gravestown .variations td.value .button-variable-item { display: flex !important; width: 280px !important; min-width: 280px !important; max-width: 280px !important; height: auto !important; padding: 10px 0 !important; justify-content: center !important; align-items: center !important; box-sizing: border-box !important; } /* Reset the inner typography components to keep text level and clean */ body.single-product.product-cat-twist-and-turn .variations td.value .variable-item-contents, body.single-product.product-cat-twist-and-turn .variations td.value .variable-item span, body.single-product.product-cat-gravestown .variations td.value .variable-item-contents, body.single-product.product-cat-gravestown .variations td.value .variable-item span, body.single-product.product-cat-gravestown .variations td.value .variable-item-contents * { display: inline-block !important; width: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; vertical-align: middle !important; } /* ========================================================================== 5. UNBREAKABLE SIDE-BY-SIDE CHECKOUT BUTTON ALIGNMENTS (ALL CATEGORIES) ========================================================================== */ /* --- TRACK A: GLOBAL ROW RESETS --- */ body.single-product form.cart, body.single-product .cart, body.single-product .product-btn-wrap, body.single-product .variations_button, body.single-product .composite-form { display: block !important; /* Disables stubborn theme flex or grid compression */ width: 100% !important; /* Expands row to full text column width */ max-width: 100% !important; clear: both !important; box-sizing: border-box !important; height: auto !important; } /* Hard lock the quantity box to the left wall across all basic pages */ body.single-product .quantity, body.single-product .cart .quantity { display: block !important; float: left !important; /* Locks the box to the left column wall naturally */ width: 65px !important; min-width: 65px !important; max-width: 65px !important; height: 44px !important; /* Force full height */ margin: 0 15px 0 0 !important; /* UNIFIED GAP: Hard-locks your 15px gap on the right */ padding: 0 !important; box-sizing: border-box !important; } /* Force standard checkout buttons to stretch full width across remaining column space */ body.single-product button.single_add_to_cart_button, body.single-product .single_add_to_cart_button, body.single-product .cart .button, body.single-product form.cart .button { display: block !important; float: left !important; width: calc(100% - 80px) !important; /* Automatic spacing calculation formula */ min-width: calc(100% - 80px) !important; max-width: calc(100% - 80px) !important; height: 44px !important; line-height: 44px !important; padding: 0 15px !important; margin: 0 !important; text-align: center !important; box-sizing: border-box !important; } /* --- TRACK B: VARIABLE COMIC SELECTION OVERRIDE (GRAVESTOWN & TWIST AND TURN) --- */ /* Target the dynamic box that WooCommerce injects the moment a comic format is selected */ body.single-product .woocommerce-variation-add-to-cart { display: block !important; /* Smashes the theme's vertical table cells */ width: 100% !important; min-width: 100% !important; max-width: 100% !important; clear: both !important; float: left !important; margin: 15px 0 0 0 !important; padding: 0 !important; height: auto !important; } /* Force the comic quantity square box inside that dynamic layout container to behave */ body.single-product .woocommerce-variation-add-to-cart .quantity { display: block !important; float: left !important; /* Hard locks it flush to the left wall */ width: 65px !important; min-width: 65px !important; max-width: 65px !important; height: 44px !important; /* Restores your perfect 44px button height */ margin: 0 15px 0 0 !important; /* RESTORES THE GAP: Hard-locks your 15px gap to the right */ padding: 0 !important; box-sizing: border-box !important; } /* Ensure the inner text field input numbers fill out 100% of the box height */ body.single-product .quantity input.qty, body.single-product .quantity .qty, body.single-product .woocommerce-variation-add-to-cart .quantity input.qty { display: block !important; width: 100% !important; height: 44px !important; /* Hard locks the input height so it can never shrink */ min-height: 44px !important; max-height: 44px !important; line-height: 44px !important; margin: 0 !important; padding: 0 !important; text-align: center !important; box-sizing: border-box !important; } /* Force the comic Add to Basket buttons inside the dynamic wrapper to stretch beautifully to full width */ body.single-product .woocommerce-variation-add-to-cart button.single_add_to_cart_button, body.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button { display: block !important; float: left !important; /* Floats it side-by-side right next to your left-locked quantity box */ width: calc(100% - 80px) !important; /* AUTOMATIC FULL WIDTH STRETCH: Fills out the rest of the column width */ min-width: calc(100% - 80px) !important; max-width: calc(100% - 80px) !important; height: 44px !important; line-height: 44px !important; padding: 0 15px !important; margin: 0 !important; text-align: center !important; box-sizing: border-box !important; } /* --- TRACK C: GLOBAL FOOTER FLOATS CLEANUP --- */ body.single-product form.cart::after, body.single-product .cart::after, body.single-product .woocommerce-variation-add-to-cart::after { content: "" !important; display: table !important; clear: both !important; } /* Ensure our custom Printed & Digital vertical buttons are the only clickable options visible */ body.single-product.product-cat-twist-and-turn .variations td.value { display: flex !important; flex-direction: column !important; /* Locks Printed and Digital vertically stacked */ align-items: flex-start !important; gap: 12px !important; width: 100% !important; } /* 1. REMOVE DUPLICATE TEXT BOXES & LABELS: Force-hides the theme's core table elements on the graphic novel page */ body.single-product.product-cat-twist-and-turn table.variations td.label, body.single-product.product-cat-twist-and-turn table.variations label, body.single-product.product-cat-twist-and-turn table.variations .selector, body.single-product.product-cat-twist-and-turn select { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; } /* 2. RED SEPARATION LINES: Restores your crisp signature red divider border line directly above the Related cross-promotion rows */ body.single-product.product-cat-twist-and-turn .up-sells, body.single-product.product-cat-twist-and-turn .upsells, body.single-product.product-cat-twist-and-turn .related.products, body.single-product.postid-1771 .up-sells, body.single-product.postid-1771 .upsells, body.single-product.postid-1771 .related.products { border-top: 1px solid #ff0000 !important; /* Locks your thin crisp signature red boundary line */ padding-top: 35px !important; /* Breathing gap space below the line */ margin-top: 35px !important; /* Balanced separation spacing above the line */ display: block !important; clear: both !important; } /* --- COMIC HEADER PRICE RANGE CLEANUP --- */ /* Hides the default unstyled theme price range text from the top section of your comic book pages across ALL variations */ body.single-product.product-cat-twist-and-turn .summary p.price, body.single-product.product-cat-twist-and-turn .summary div.price, body.single-product.product-cat-twist-and-turn .summary .price, body.single-product.product-cat-twist-and-turn .summary .price .amount, body.single-product.product-cat-gravestown .summary p.price, body.single-product.product-cat-gravestown .summary div.price, body.single-product.product-cat-gravestown .summary .price, body.single-product.product-cat-gravestown .summary .price .amount { display: none !important; /* Clear out the theme plain text range completely */ visibility: hidden !important; opacity: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* PROTECTION FILTER: Natively restores your beautiful custom choice buttons inside the form section */ body.single-product.product-cat-twist-and-turn form.cart .variations .price, body.single-product.product-cat-twist-and-turn form.cart .variations .price .amount, body.single-product.product-cat-gravestown form.cart .variations .price, body.single-product.product-cat-gravestown form.cart .variations .price .amount, body.single-product.product-cat-twist-and-turn form.cart .variable-item .price, body.single-product.product-cat-gravestown form.cart .variable-item .price { display: inline-block !important; /* Hard-locks your active choice labels back into view safely */ visibility: visible !important; opacity: 1 !important; height: auto !important; color: #ffffff !important; } /* UNIFIED PRODUCT SUMMARY UNDERLINES */ /* Injects the clean, matching theme underline below the checkout section on Art and Twist and Turn pages */ body.single-product.product-cat-art form.cart, body.single-product.product-cat-art .cart, body.single-product.product-cat-twist-and-turn form.cart, body.single-product.product-cat-twist-and-turn .cart { border-bottom: 2px solid rgba(255, 255, 255, 0.77) !important; padding-bottom: 30px !important; margin-bottom: 25px !important; display: block !important; width: 100% !important; } .woocommerce.single .entry-summary>form.cart { display: flex; flex-wrap: wrap; border-bottom: 2px solid rgba(255, 255, 255, 0.77) !important; margin-bottom: 30px; padding-bottom: 30px; } /* 1. ARCHIVE CATEGORY FEEDS: White text styling for your new comic book rows */ body.tax-product_cat.term-twist-and-turn h2, body.tax-product_cat.term-twist-and-turn .woocommerce-loop-product__title { color: #ffffff !important; } /* Split your format options into separate frosted-glass blocks on the category view screen */ body.tax-product_cat.term-twist-and-turn .products .product:not(.post-1771) .price { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; display: block !important; width: 100% !important; } body.tax-product_cat.term-twist-and-turn .products .product:not(.post-1771) .price-line { background-color: rgba(255, 255, 255, 0.15) !important; /* Premium semi-transparent individual frosted box look */ border: 1px solid rgba(255, 255, 255, 0.25) !important; color: #ffffff !important; text-align: center !important; display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 6px auto !important; padding: 8px 12px !important; border-radius: 3px !important; } /* Style the clean single standalone frosted price banner ONLY for the main album card on the category grid view */ body.tax-product_cat.term-twist-and-turn .products > .product.post-1771 .price { background-color: rgba(255, 255, 255, 0.15) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; color: #ffffff !important; text-align: center !important; display: block !important; width: 100% !important; max-height: 42px !important; min-height: 42px !important; display: inline-block !important; vertical-align: middle !important; line-height: 44px !important; box-sizing: border-box !important; margin: auto !important; padding: 0px 50px 55px 50px !important; border-radius: 3px !important; } body.tax-product_cat.term-twist-and-turn .products .product .price .amount, body.tax-product_cat.term-twist-and-turn .products .product .price bdi { color: #ffffff !important; background: transparent !important; } /* 2. COMIC VARIATION BUTTONS: Symmetrical 280px vertical blocks for both variable comic categories */ body.single-product.product-cat-twist-and-turn .variations td.value .variable-item, body.single-product.product-cat-twist-and-turn .variations td.value .button-variable-item, body.single-product.product-cat-gravestown .variations td.value .variable-item, body.single-product.product-cat-gravestown .variations td.value .button-variable-item { display: flex !important; width: 280px !important; min-width: 280px !important; max-width: 280px !important; height: auto !important; padding: 10px 0 !important; justify-content: center !important; align-items: center !important; box-sizing: border-box !important; background-color: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; } body.single-product.product-cat-twist-and-turn .variations td.value .variable-item-contents, body.single-product.product-cat-twist-and-turn .variations td.value .variable-item span, body.single-product.product-cat-gravestown .variations td.value .variable-item-contents, body.single-product.product-cat-gravestown .variations td.value .variable-item span { display: inline-block !important; width: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; vertical-align: middle !important; } /* 3. ALBUM DISPLAY PRICE REMOVAL: Smoothly hides the redundant theme header price on the album page */ body.single-product.postid-1771 .summary p.price, body.single-product.postid-1771 .summary .price, body.single-product.postid-1771 .summary .price .amount { display: none !important; /* Hides the theme price layout cleanly from the header summary */ } /* 4. INVASION REMOVAL FILTER: Excludes variation numbers from entering simple text fields */ body.single-product .quantity .woocommerce-Price-amount, body.single-product .quantity .amount, body.single-product .quantity bdi, body.single-product .woocommerce-variation-add-to-cart .woocommerce-Price-amount { display: none !important; } /* 7. NAVIGATION RED PATHS & RELATED CROSS-PROMOTION TEXT BOX REPAIR */ body.tax-product_cat.term-twist-and-turn .woocommerce-breadcrumb a, body.single-product.product-cat-twist-and-turn .woocommerce-breadcrumb a, body.single-product.postid-1771 .woocommerce-breadcrumb a { color: #ff0000 !important; } body.tax-product_cat.term-twist-and-turn .woocommerce-breadcrumb, body.single-product.product-cat-twist-and-turn .woocommerce-breadcrumb, body.single-product.postid-1771 .woocommerce-breadcrumb { color: rgba(255, 255, 255, 0.6) !important; } /* Formats the cross-promotion titles to white across all Twist & Turn family detail pages */ body.single-product.postid-1771 .related.products ul.products li.product h2, body.single-product.postid-1771 .related.products .products .product h2, body.single-product.postid-1771 .related.products .woocommerce-loop-product__title, body.single-product.product-cat-twist-and-turn .related.products ul.products li.product h2, body.single-product.product-cat-twist-and-turn .related.products .products .product h2, body.single-product.product-cat-twist-and-turn .related.products .woocommerce-loop-product__title { color: #ffffff !important; /* Flips cross-promotion titles to bright white across pages */ } /* Strips the large clunky background wrappers off the related gallery items across the collection */ body.single-product.postid-1771 .related.products ul.products li.product .price, body.single-product.postid-1771 .related.products .products .product .price, body.single-product.product-cat-twist-and-turn .related.products ul.products li.product .price, body.single-product.product-cat-twist-and-turn .related.products .products .product .price { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; display: block !important; width: 100% !important; } /* Formats the price blocks into matching frosted-glass banners across all related panels */ body.single-product.postid-1771 .related.products .products .product .custom-stacked-prices span.price-line, body.single-product.postid-1771 .related.products .products .product .price .amount, body.single-product.postid-1771 .related.products .products .product .price bdi, body.single-product.product-cat-twist-and-turn .related.products .products .product .custom-stacked-prices span.price-line, body.single-product.product-cat-twist-and-turn .related.products .products .product .price .amount, body.single-product.product-cat-twist-and-turn .related.products .products .product .price bdi { background-color: rgba(255, 255, 255, 0.15) !important; /* Premium semi-transparent frosted box look */ border: 1px solid rgba(255, 255, 255, 0.25) !important; /* Clean frosted outline border frame */ color: #ffffff !important; /* Bright white text layout */ text-align: center !important; display: block !important; /* Splits layout into distinct blocks */ width: 100% !important; box-sizing: border-box !important; margin: 6px auto !important; /* Creates balanced layout spacing padding */ padding: 8px 12px !important; border-radius: 3px !important; } body.single-product.postid-1771 .related.products .products .product .custom-stacked-prices span.price-line *, body.single-product.product-cat-twist-and-turn .related.products .products .product .custom-stacked-prices span.price-line * { color: #ffffff !important; background: transparent !important; } /* 1. RELATED PRODUCTS TITLE FIX: Forces the product title inside the album's related gallery to turn crisp white */ body.single-product.postid-1771 .related.products ul.products li.product h2, body.single-product.postid-1771 .related.products .products .product h2, body.single-product.postid-1771 .related.products .woocommerce-loop-product__title { color: #ffffff !important; /* Flips the black cross-promotion title text to bright white */ } /* ____________________________________________________________________________ */ /* Printful prices */ .wc-block-product { text-align: center !important; } /* Lift eBook section */ #wp-block-themeisle-blocks-advanced-columns-5e729d77 { margin-top: -30px !important; } /* Canvas art buttons on homepage */ #wp-block-themeisle-blocks-button-41781e72 { width: 100% !important; background-color: #f80808 !important; } /* _________________________ */ /* SHOPPING CART PAGE */ /* 1. Force the Quantity Box to be White with Dark Text */ body.woocommerce-cart .quantity input.qty { background-color: #ffffff !important; color: #333333 !important; border: 1px solid #cccccc !important; padding: 8px !important; } /* 2. Force the Coupon Input Box to be White with Dark Text */ body.woocommerce-cart #coupon_code { background-color: #ffffff !important; color: #333333 !important; border: 1px solid #cccccc !important; padding: 8px 12px !important; height: auto !important; } /* 3. Style the "Apply Coupon" Button to be Light Grey (or Red on Hover) */ body.woocommerce-cart button[name="apply_coupon"] { background-color: #e0e0e0 !important; color: #333333 !important; border: 1px solid #cccccc !important; padding: 8px 15px !important; font-weight: bold; } /* 4. Make the Coupon Button Turn Red on Hover to Match Your Theme */ body.woocommerce-cart button[name="apply_coupon"]:hover { background-color: #ff0000 !important; /* Your signature red */ color: #ffffff !important; border-color: #ff0000 !important; cursor: pointer; } /* CHECKOUT BILLING FIELDS BACKGROUND */ /* Force all checkout text inputs, dropdowns, and textareas to be white */ body.woocommerce-checkout .form-row input.input-text, body.woocommerce-checkout .form-row select, body.woocommerce-checkout .form-row textarea, body.woocommerce-checkout .select2-container--default .select2-selection--single { background-color: #ffffff !important; color: #333333 !important; border: 1px solid #cccccc !important; } /* Target browser 'Autofill' (stops fields from turning yellow when auto-completed) */ body.woocommerce-checkout input:-webkit-autofill, body.woocommerce-checkout input:-webkit-autofill:hover, body.woocommerce-checkout input:-webkit-autofill:focus, body.woocommerce-checkout textarea:-webkit-autofill, body.woocommerce-checkout textarea:-webkit-autofill:hover, body.woocommerce-checkout textarea:-webkit-autofill:focus, body.woocommerce-checkout select:-webkit-autofill, body.woocommerce-checkout select:-webkit-autofill:hover, body.woocommerce-checkout select:-webkit-autofill:focus { -webkit-text-fill-color: #333333 !important; -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important; transition: background-color 5000s ease-in-out 0s; } /* Force the Stripe / Card Payment Gateway inputs to be white */ body.woocommerce-checkout #payment .payment_box, body.woocommerce-checkout #payment fieldset, body.woocommerce-checkout .wc-stripe-elements-field { background-color: #ffffff !important; color: #333333 !important; border: 1px solid #cccccc !important; } /* _________________________ */ /* MINI-CART */ /* 1. Reset Neve's internal variables for this box to fix text & backgrounds */ .neve-mini-cart-content, .nav-menu-widget .widget_shopping_cart_content { --nv-site-bg: transparent !important; --nv-text-color: #333333 !important; --nv-c-1: #2a2a2a !important; /* Forces yellow accent boxes to turn dark grey */ --nv-primary-accent: #2a2a2a !important; } /* 2. Apply your pale background image to the ENTIRE dropdown window box */ .neve-mini-cart-content, .nav-menu-widget .widget_shopping_cart_content, .woocommerce-mini-cart, .widget_shopping_cart { background-image: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)), url('https://arielpress.com/wp-content/uploads/2026/05/paper-seamless-backdrop.jpg') !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-color: #ffffff !important; /* White backup fallback */ } /* 3. Force the subtotal box and list items to drop their yellow backgrounds */ .neve-mini-cart-content .total, .widget_shopping_cart_content .total, .woocommerce-mini-cart-item, .mini_cart_item { background-color: transparent !important; background-image: none !important; border-bottom: 1px solid #e5e5e5 !important; } /* 4. Force EVERY single piece of text, links, prices, and multipliers to be dark charcoal */ .neve-mini-cart-content *, .nav-menu-widget .widget_shopping_cart_content *, .woocommerce-mini-cart-item *, .neve-mini-cart-content .total *, .widget_shopping_cart_content .total * { color: #333333 !important; } /* 5. Fix the lower button area wrapper and remove any lingering yellow rows below it */ .neve-mini-cart-content .woocommerce-mini-cart__buttons, .widget_shopping_cart_content .buttons, .neve-mini-cart-content .buttons, .neve-mini-cart-content p:last-child { background-color: #2a2a2a !important; /* Solid dark grey container box */ background-image: none !important; padding: 15px !important; margin: 10px 0 0 0 !important; } /* 6. Ensure the white "View Basket" and "Checkout" buttons stand out inside that dark box */ .neve-mini-cart-content .buttons a.button, .widget_shopping_cart_content .buttons a.button { background-color: #ffffff !important; color: #2a2a2a !important; border: 1px solid #444444 !important; font-weight: bold !important; text-transform: uppercase !important; } /* 7. Hover effect turns buttons to your signature red */ .neve-mini-cart-content .buttons a.button:hover, .widget_shopping_cart_content .buttons a.button:hover { background-color: #ff0000 !important; color: #ffffff !important; border-color: #ff0000 !important; } /* FIX MINI-CART REMOVE 'X' BUTTON COLOR */ /* 1. Force the normal state of the 'X' to be dark charcoal */ .neve-mini-cart-content a.remove, .widget_shopping_cart_content a.remove, .woocommerce-mini-cart-item a.remove { color: #333333 !important; background-color: transparent !important; /* Ensures no weird background box behind it */ border-color: #333333 !important; /* If it has a thin circular border */ } /* 2. Ensure your signature red hover state stays active when moused over */ .neve-mini-cart-content a.remove:hover, .widget_shopping_cart_content a.remove:hover, .woocommerce-mini-cart-item a.remove:hover { color: #ff0000 !important; background-color: transparent !important; } /* _________________________ */ /* CONTACT FORM */ .wpforms-form input[type=submit], .wpforms-form button[type=submit] { text-transform: uppercase; width: 200px !important; } .wpforms-form button[type=submit], .wpforms-page-button:focus { font-weight: 700 !important; } div.wpforms-container-full .wpforms-form input.wpforms-field-medium, div.wpforms-container-full .wpforms-form select.wpforms-field-medium, div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-medium { max-width: 1000%; } @media only screen and (max-width: 480px) { #wp-block-themeisle-blocks-advanced-column-4a967f4d { margin-bottom: 1em !important; } } @media only screen and (min-width: 640px) { #wp-block-themeisle-blocks-advanced-column-4a967f4d { margin-right: 2em !important; } } @media only screen and (min-width: 1024px) { #wp-block-themeisle-blocks-advanced-column-4a967f4d { margin-right: -4em !important; } } /* _________________________ */ /* FOOTER */ /* Join our newsletter text */ #block-7 { width: 450px; } /* Subscribe form */ #block-13 { width: 450px; } /* Divider line */ #block-19 { width: 11px; margin-left: 5em; margin-top: 1em; font-weight: 300 !important; height: 77px; border-right: 1px solid red; } /* Stay in touch text */ #block-10 { width: 450px; padding-right: 7em; } /* Social icons */ #block-17 { width: 450px; padding-right: 7em; } /* _________________________ */ /* MOBILE */ /* Buttons */ /* Gravestown */ @media only screen and (max-width: 480px) { #wp-block-themeisle-blocks-button-db3b6f1f { margin-bottom: 2em !important; } } @media only screen and (max-width: 480px) { #wp-block-themeisle-blocks-button-62c00346 { margin-bottom: 2em !important; } } @media only screen and (max-width: 480px) { #wp-block-themeisle-blocks-button-c2a6ff38 { margin-bottom: 2em !important; } } @media only screen and (max-width: 480px) { #wp-block-themeisle-blocks-button-5008f893 { margin-bottom: 1em !important; } } @media only screen and (max-width: 480px) { #wp-block-themeisle-blocks-button-79f10612 { margin-bottom: 2em !important; } } /* Harker */ @media only screen and (max-width: 480px) { #wp-block-themeisle-blocks-button-35aa35c5 { margin-bottom: 2em !important; } } @media only screen and (max-width: 480px) { #wp-block-themeisle-blocks-button-960f3c03 { margin-bottom: 2em !important; } } @media only screen and (max-width: 480px) { #wp-block-themeisle-blocks-button-4cc5b9c3 { margin-bottom: 2em !important; } } @media only screen and (max-width: 480px) { #mlb2-40748594.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input { text-align: center !important; } } /* FOOTER */ /* Mobile */ @media only screen and (max-width: 480px) { #block-7 { padding-right: 10em !important; margin-top: 1em !important; } } @media only screen and (max-width: 480px) { #block-13 { padding-right: 10em !important; } } @media only screen and (max-width: 480px) { #block-10 { padding-right: 10em !important; } } @media only screen and (max-width: 480px) { #block-17 { padding-right: 10em !important; padding-bottom: 1.5em !important; } } /* Tablet */ @media only screen and (min-width: 640px) { #block-7 { margin-left: 8em !important; margin-top: 1em !important; } } @media only screen and (min-width: 1024px) { #block-7 { margin-left: 0 !important; } } @media only screen and (min-width: 640px) { #block-13 { margin-left: 8em !important; } } @media only screen and (min-width: 1024px) { #block-13 { margin-left: 0 !important; } } @media only screen and (min-width: 640px) { #block-10 { margin-left: 8em !important; } } @media only screen and (min-width: 1024px) { #block-10 { margin-left: 0 !important; } } @media only screen and (min-width: 640px) { #block-17 { margin-left: 8em !important; padding-bottom: 1.5em !important; } } @media only screen and (min-width: 1024px) { #block-17 { margin-left: 0 !important; } } /* Final music listing */ #mep_26 { margin-bottom: 5em; } /* Force the wide logo to scale up by targeting height instead of width */ .builder-item--logo .site-logo img { height: 75px !important; /* Adjust this number until it looks right */ max-width: 100% !important; width: auto !important; } /* Mobile & Tablet logo sizing to prevent menu crowding */ @media (max-width: 959px) { .builder-item--logo .site-logo img { height: 70px !important; max-width: 100% !important; margin-bottom: 10px; } } /* Targets the hamburger button just on mobile screens to shift it down */ @media (max-width: 959px) { .menu-mobile-toggle { margin-top: 20px !important; } } /* ========================================================================== 5. UNIFIED CATALOG SHOP GRID BASELINE OVERHAUL (ALL PRODUCT TYPES) ========================================================================== */ /* 1. MASTER TITLE TRACKING ROW: Forces all product grid title headers to occupy a clean, uniform vertical space */ body.archive.post-type-archive-product ul.products li.product .woocommerce-loop-product__title, body.shop-page ul.products li.product .woocommerce-loop-product__title, .tax-product_cat ul.products li.product .woocommerce-loop-product__title { display: flex !important; flex-direction: column !important; justify-content: center !important; /* Centers single-line titles vertically inside their allocated cell room */ align-items: center !important; text-align: center !important; height: auto !important; min-height: 72px !important; /* UNIFIED HEIGHT BLOCK: Secure cushion footprint room to absorb 1, 2, or 3 lines of text smoothly */ max-height: none !important; margin: 0 0 15px 0 !important; /* Clean uniform breathing space directly above your price rows */ padding: 0 !important; box-sizing: border-box !important; } /* 2. BASELINE SYNC ROW RESETS: Ensures your comic stacked columns, clothing boxes, and simple bars sit aligned side-by-side */ body.archive.post-type-archive-product ul.products li.product .price, body.shop-page ul.products li.product .price, .tax-product_cat ul.products li.product .price, body.archive.post-type-archive-product ul.products li.product .custom-stacked-prices, body.shop-page ul.products li.product .custom-stacked-prices { display: block !important; margin-top: 0 !important; margin-bottom: 0 !important; vertical-align: top !important; /* Forces top-edge alignment natively on all pricing rows */ width: 100% !important; box-sizing: border-box !important; clear: both !important; float: none !important; } /* Flatten Neve's inner structural elements on Apparel & Canvases so they follow our baseline rules */ body.archive.post-type-archive-product ul.products li.product .neve-wooc-loop-actions, body.shop-page ul.products li.product .neve-wooc-loop-actions, .tax-product_cat ul.products li.product .neve-wooc-loop-actions { display: block !important; margin: 0 !important; padding: 0 !important; height: auto !important; } /* --- UNIVERSAL RECENTLY VIEWED ROW ISOLATION CLEANUP --- */ /* 1. ATTRIBUTE INLINE OVERRIDE: Targets and strips hardcoded inline styles off the pricing boxes inside the history widget list row */ ul.product_list_widget li .custom-clean-loop-box, ul.product_list_widget li .custom-stacked-prices, ul.product_list_widget li [class*="loop-box"], ul.product_list_widget li [class*="custom"] { background-color: transparent !important; background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; padding: 0 !important; margin: 4px 0 0 0 !important; display: block !important; width: 100% !important; height: auto !important; line-height: normal !important; } /* 2. RE-LIGHT ALL INNER STRINGS: Strips white font styling off all nested pricing spans inside the history footer grid */ ul.product_list_widget li .price, ul.product_list_widget li .price *, ul.product_list_widget li .custom-clean-loop-box *, ul.product_list_widget li [class*="loop-box"] * { color: #222222 !important; /* Hard-locks text font digits to matching dark grey/black */ background-color: transparent !important; background: transparent !important; border: none !important; display: inline-block !important; width: auto !important; margin-right: 8px !important; /* Clean horizontal separation padding gap between the printed/digital texts */ } /* ========================================================================== 7. THE DEFINITIVE UNBREAKABLE CROSS-PROMOTION GRID UNIFICATION ========================================================================== */ /* 1. SEPARATE COLUMN FLOW PROTECTION: Forces Neve Pro's columns and cross-promotion cards to float naturally */ .related.products .products .product .price, .upsells.products .products .product .price, .up-sells.products .products .product .price, body.single-product .products .product .price { display: block !important; background: transparent !important; background-color: transparent !important; border: none !important; border-style: none !important; box-shadow: none !important; outline: none !important; padding: 0 !important; margin: 12px 0 0 0 !important; width: 100% !important; max-width: 100% !important; float: none !important; clear: none !important; } /* 2. EXTERMINATE UNDERLYING THEME NOISE: Strips messy duplicate border rings off child text tokens */ .products .product .price *, .products .product .price bdi, .products .product .price .amount, .final-unbreakable-grid-block ~ *, body.single-product .products .product .price .woocommerce-Price-amount { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } /* ========================================================================== 8. UNBREAKABLE 4-COLUMN CROSS-PROMOTION GRID LAYOUT ENGINE ========================================================================== */ /* Forces the related and upsell product item rows to behave as a modern, un-snaggable flex row grid layout */ .single-product .up-sells ul.products, .single-product .upsells ul.products, .single-product .related ul.products, .single-product .up-sells .products, .single-product .upsells .products, .single-product .related .products { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: flex-start !important; align-items: stretch !important; /* Equalises the physical vertical height footprint of all 4 item cards in the row */ clear: both !important; float: none !important; width: 100% !important; } /* Forces each individual card to occupy an exact, rigid 4-column percentage track boundary across your screen views */ .single-product .up-sells ul.products li.product, .single-product .upsells ul.products li.product, .single-product .related ul.products li.product { flex: 0 0 calc(25% - 20px) !important; /* HARD AUTOMATIC 4-COLUMN CALCULATOR FRAME */ width: calc(25% - 20px) !important; min-width: calc(25% - 20px) !important; max-width: calc(25% - 20px) !important; margin: 0 10px 30px 10px !important; /* Clean visual horizontal cushion gap separation between cards */ float: none !important; /* Smashes the broken theme floats to prevent column merging glitches */ display: flex !important; flex-direction: column !important; justify-content: flex-start !important; } /* Responsive safeguard fallback view for medium screen tablet/ipad layouts (flips to an elegant 2x2 presentation grid) */ @media only screen and (max-width: 992px) { .single-product .up-sells ul.products li.product, .single-product .upsells ul.products li.product, .single-product .related ul.products li.product { flex: 0 0 calc(50% - 20px) !important; width: calc(50% - 20px) !important; min-width: calc(50% - 20px) !important; max-width: calc(50% - 20px) !important; } } /* Responsive safeguard fallback view for small mobile smartphone devices (flips to a single centered vertical shopping lane column) */ @media only screen and (max-width: 576px) { .single-product .up-sells ul.products li.product, .single-product .upsells ul.products li.product, .single-product .related ul.products li.product { flex: 0 0 100% !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; margin: 0 0 30px 0 !important; } } /* ========================================================================== 9. CATEGORY ARCHIVE SONGS DOUBLE-BOX ERASER ========================================================================== */ /* 1. PARENT CLEANUP: Clears the duplicate frosted borders, overlays, and shadows off the outer category summary text containers */ body.tax-product_cat.term-twist-and-turn .products .product.post-1771 .price, body.tax-product_cat .products .product.post-1771 .price { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; padding: 0 !important; margin: 6px auto !important; display: block !important; width: 100% !important; } /* 2. HOUSING LOCK: Hard-locks exactly ONE crisp white frosted box layout frame straight to the inner element housing */ body.tax-product_cat.term-twist-and-turn .products .product.post-1771 .price .custom-clean-loop-box, body.tax-product_cat .products .product.post-1771 .custom-clean-loop-box { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; background-color: rgba(255, 255, 255, 0.15) !important; /* Premium semi-transparent white frosted look */ border: 1px solid rgba(255, 255, 255, 0.25) !important; /* Crisp single white outline border line */ color: #ffffff !important; /* Bold, bright white text visibility digits */ text-align: center !important; margin: 0 auto !important; padding: 8px 12px !important; border-radius: 3px !important; font-weight: 700 !important; font-size: 14px !important; height: 44px !important; /* Equalises box depth to match your comic swatches perfectly */ line-height: 26px !important; /* Natively balances and centers text within the box boundaries */ } /* Ensure all nested currency symbol strings inside this archive container frame load in pure bright white */ body.tax-product_cat.term-twist-and-turn .products .product.post-1771 .price bdi, body.tax-product_cat.term-twist-and-turn .products .product.post-1771 .price .amount, body.tax-product_cat.term-twist-and-turn .products .product.post-1771 .price span { color: #ffffff !important; background: transparent !important; display: inline-block !important; }