/* ---------------------------------------------------------------------------- This file will load automatically when the Wokiee theme is active. You can use it for custom CSS. */ /* --------------------------------------------------------------------------- Footer "POPULAR LINKS" sub-heading (Sexy Social Links & Videos column): remove the bottom padding that Wokiee core's generic accordion-heading rule (.tt-mobile-collapse .tt-collapse-title, theme.css) applies to every collapse title site-wide. Scoped via the adjacent-sibling combinator so it only matches a heading that follows another title/content block inside the same .tt-mobile-collapse - in the footer that's only "POPULAR LINKS". --------------------------------------------------------------------------- */ #tt-footer .tt-mobile-collapse .tt-collapse-content + .tt-collapse-title { padding-bottom: 0; } /* --------------------------------------------------------------------------- Horizontal header mega menu: level-1 category = image + title side by side --------------------------------------------------------------------------- */ .tt-desctop-menu .dropdown-menu .tt-col-list .tt-title-submenu { display: flex; align-items: center; gap: 15px; padding-bottom: 0; margin-bottom: 0; } /* the image is the 2nd child in source order - pull it in front of the title */ .tt-desctop-menu .dropdown-menu .tt-col-list .tt-title-submenu > a:last-child { order: -1; flex: 0 0 100px; } /* title takes all remaining width and wraps cleanly instead of overflowing */ .tt-desctop-menu .dropdown-menu .tt-col-list .tt-title-submenu > a:first-child { flex: 1 1 auto; min-width: 0; white-space: normal; line-height: 1.35; } .tt-desctop-menu .dropdown-menu .tt-col-list .tt-title-submenu span.submenu-img { width: 100px; display: block; } .tt-desctop-menu .dropdown-menu .tt-col-list .tt-title-submenu img { width: 100px; height: 100px; max-width: none; margin: 0; object-fit: cover; /* crop to square; use "contain" to letterbox instead */ } /* Level-1 columns: equal width, 3 per row (4 per row on wide desktop). Overrides both Wokiee's `.tt-col-list [class^=col]{flex-basis:inherit}` and the admin "Megamenu columns" setting, which no longer affects the level-1 row count. */ .tt-desctop-menu .dropdown-menu .tt-col-list.level1 > li { flex: 1 1 33.333%; max-width: 33.333%; display: flex; } @media (min-width: 1400px) { .tt-desctop-menu .dropdown-menu .tt-col-list.level1 > li { flex-basis: 25%; max-width: 25%; } } .tt-desctop-menu .dropdown-menu .tt-col-list.level1 > li > .tt-title-submenu { width: 100%; } /* Vertical "Shop by category" box: keep its level-1 images from being stretched to the full column width by Wokiee core CSS. */ .tt-menu-categories .tt-dropdown-menu nav > ul .tt-title-submenu span.submenu-img { width: auto; } .tt-menu-categories .tt-dropdown-menu nav > ul .tt-title-submenu img { width: 100px; height: auto; max-width: 100%; } /* --------------------------------------------------------------------------- Category listing page (main_page=index): category image + description side by side (image left, description right), smaller description text. Scoped to #indexProductList so tpl_index_categories.php is unaffected. --------------------------------------------------------------------------- */ /* Smaller description text */ #indexProductList .category-description { font-size: 14px; line-height: 1.7; } #indexProductList .category-description p, #indexProductList .category-description li { font-size: inherit; line-height: inherit; } /* Side-by-side layout */ #indexProductList .cat-top .category-wrapper { display: flex; flex-wrap: wrap; column-gap: 30px; align-items: flex-start; } #indexProductList .cat-top .page-title { flex: 1 1 100%; } #indexProductList .cat-top .category-banner { flex: 0 0 300px; max-width: 35%; margin-bottom: 0; } #indexProductList .cat-top .category-description { flex: 1 1 320px; min-width: 0; } /* Neutralize the core divider spacing/border so both columns align at the top */ #indexProductList .cat-top .category-description.category-description:not(:first-child) { margin-top: 0; padding-top: 0; border-top: none; border-bottom: none; } /* Responsive: stack on small screens (image above description) */ @media (max-width: 767px) { #indexProductList .cat-top .category-banner, #indexProductList .cat-top .category-description { flex-basis: 100%; max-width: 100%; } #indexProductList .cat-top .category-banner { margin-bottom: 20px; } #indexProductList .cat-top .category-banner img { width: 100%; height: auto; } } /* --------------------------------------------------------------------------- Subcategory grid (category_row.php, .cat-img): uniform thumbnail size. Wokiee's installer blanks SUBCATEGORY_IMAGE_WIDTH/HEIGHT (template_sql.sql), so wt_image() falls back to each source file's native pixel dimensions - with no CSS constraining .cat-img, thumbnails render at wildly different sizes (seen live: 200x267 up to 2000x2000, plus 1x1 pixel_trans.gif for categories with no image assigned). Fixed aspect-ratio box + object-fit:contain gives every thumbnail the same rendered footprint without cropping - the full source image is always visible, letterboxed within the box instead of cut off. Ratio matches the old SUBCATEGORY_IMAGE_WIDTH/HEIGHT default (100x57). Applies to both cat_grid_style markup variants in category_row.php (.tt-promo-box and .tt-blog-thumb), so it's consistent on every category listing page, not just one. --------------------------------------------------------------------------- */ .cat-img { width: 100%; height: auto; aspect-ratio: 100 / 57; object-fit: contain; display: block; } /* --------------------------------------------------------------------------- Product listing: black border on the "Filter By: Manufacturers" and "Sort By" select boxes. Wokiee core sets `.tt-sort select { border:none }`, so we re-add a visible border here. Scoped to #indexProductList (category/ manufacturer listing) and #searchResultsDefault (search results, which reuses the same Filter By/Sort By row - see tpl_search_result_default.php). --------------------------------------------------------------------------- */ #indexProductList .tt-sort select, #searchResultsDefault .tt-sort select { border: 1px solid #000; border-radius: 0; padding: 6px 28px 6px 10px; /* right padding leaves room for the native arrow */ background-color: #fff; } /* Space between the "Filter By" block and the nested "Sort By" block */ #indexProductList #js-tt-filters-options .tt-filters-options, #searchResultsDefault #js-tt-filters-options .tt-filters-options { padding-left: 20px; } /* Uniform look for both labels: "Filter By:" (.select-label) uses the same font size/colour/weight as "Sort By:" (.inputLabel, styled in wt_styles.css) */ #indexProductList .tt-sort label.select-label, #indexProductList .tt-sort label.inputLabel, #searchResultsDefault .tt-sort label.select-label, #searchResultsDefault .tt-sort label.inputLabel { font-size: 14px; color: #191919; font-weight: 500; letter-spacing: .02em; } /* --------------------------------------------------------------------------- Price block (.tt-price): emphasise the "% off" figure and mute the parenthetical secondary-currency amount, e.g. "Sale: $227.89 ($151.93 USD)". Markup is produced by zen_get_products_display_price() in includes/functions/functions_prices.php and rendered inside .tt-price on the product listing, product info page, quickview, related and wishlist views. --------------------------------------------------------------------------- */ /* Larger, bolder percentage-off figure, e.g. "25% off" (span.percentage_off_number, prepended to the price string). Restores the prominence it had in the old Couples theme; scoped to .tt-price. */ .tt-price .percentage_off_number { display: inline-block; font-weight: 700; font-size: 24px; line-height: 1.1; } @media (max-width: 768px) { .tt-price .percentage_off_number { font-size: 20px; } } /* keep it inheriting size inside compact sidebox / mini-cart price blocks */ .tt-aside .tt-price .percentage_off_number, .tt-dropdown-obj .tt-price .percentage_off_number { font-size: inherit; } /* Sale price figure, e.g. "$227.89" */ .tt-price .special_price_container .productSalePrice { font-size: 24px; margin: 5px 0; } /* Secondary-currency amount in round brackets, e.g. "($151.93 USD)": force onto its own line at 16px, black at 0.2 opacity instead of the sale-price red set by wt_styles.css (.tt-price .productSalePrice). !important / flex-basis needed because theme.css forces every .tt-price span to display:inline-block and makes .tt-price a flex row in the listing grid. */ .tt-price .special_price_container .second_currency { display: block !important; flex-basis: 100% !important; font-size: 16px; color: #000; opacity: 0.2; } /* "Compare at" reference price: no strike-through (overrides wt_styles.css:42 `.tt-price .normalprice { text-decoration: line-through }`). */ .tt-price .normalprice { text-decoration: none; margin: 5px 0; } /* Shopping cart only: restore the strike-through the rule above removes site-wide. Cart-item price is rendered via zen_get_zx_products_display_price(), same markup/classes as the listing/product price block, so it needs its own, more specific override to win back the line-through in this one context. */ #cartContentsDisplay .cartUnitDisplay .normalprice { text-decoration: line-through; } /* Larger pricing type on the full product-detail page and its quickview modal only (both share id="productGeneral" on their outer wrapper - product_info_html_id defaults to 'productGeneral' in tpl_product_info_display.php, and tpl_wt_product_quickview.php hardcodes the same id). Scoped so the listing grid / wishlist / aside price blocks keep the smaller sizes set above. */ .tt-product-single-info .tt-price .percentage_off_number { font-size: 36px; } .tt-product-single-info .tt-price .normalprice { font-size: 24px; } .tt-product-single-info .tt-price .special_price_container .productSalePrice { font-size: 36px; } .tt-product-single-info .tt-price .special_price_container .productSalePrice.second_currency { font-size: 24px; } @media (max-width: 768px) { .tt-product-single-info .tt-price .percentage_off_number { font-size: 28px; } .tt-product-single-info .tt-price .normalprice { font-size: 18px; } .tt-product-single-info .tt-price .special_price_container .productSalePrice { font-size: 28px; } .tt-product-single-info .tt-price .special_price_container .productSalePrice.second_currency { font-size: 18px; } } /* Breathing room in the listing-grid tile's stacked info block: Model/Manufacturer (.tt-add-info), title, price block, "Ships From Canada" — theme.css ships these with 0-4px margins, which reads as congested once the price block grew to 4 lines (% off / Compare at / sale price / second currency). */ #indexProductList .tt-product .tt-add-info { margin-bottom: 8px; } #indexProductList .tt-product .tt-title { margin-bottom: 8px; } /* gap between the wrapped lines inside .tt-price itself (% off, Compare at, sale price, second currency) - .tt-price is already display:flex;flex-wrap:wrap in theme.css, so `gap` is enough without touching each child individually */ #indexProductList .tt-product .tt-price { row-gap: 6px; margin-bottom: 10px; } #indexProductList .tt-product .ships_canada { margin-top: 4px; } /* 3xtoys custom: "Ships From Canada" badge in the product listing. Ported from the old Couples theme (stylesheet_zx_min.css .ships_canada), font-size toned down for Wokiee's smaller listing cards. */ .ships_canada { clear: both; color: #bf1e2e; font-size: 1.4rem; font-weight: 700; margin-top: 8px; } @media (max-width: 769px) { .ships_canada { font-size: 1rem; } } /* --------------------------------------------------------------------------- Product grid cards: give each grid item a subtle border + soft shadow so products read as distinct cards. Applies to every product grid (category listing, new products, featured, specials, all-products) via the shared .tt-product-listing.grid-view markup from includes/templates/wokiee/wt_common/tpl_wt_display_styles.php. The inner .tt-product is styled (not .tt-col-item) so the border sits inside the Bootstrap column gutter. Row/list view (.tt-col-one) and sliders (.tt-carousel-products) are intentionally excluded. --------------------------------------------------------------------------- */ .tt-product-listing.grid-view .tt-col-item { margin-bottom: 30px; } .tt-product-listing.grid-view .tt-col-item .tt-product { height: 100%; display: flex; flex-direction: column; padding: 10px 10px 18px; border: 1px solid #ebebeb; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, .04); transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; } .tt-product-listing.grid-view .tt-col-item .tt-product:hover { border-color: #dddddd; box-shadow: 0 6px 20px rgba(0, 0, 0, .10); transform: translateY(-3px); } .tt-product-listing.grid-view .tt-col-item .tt-product .tt-image-box { border-radius: 4px; overflow: hidden; } /* --------------------------------------------------------------------------- Product grid cards: make the Quick View / Wishlist / Compare actions discoverable. Wokiee core (theme.css, inside @media min-width:1025px) keeps .tt-btn-quickview at opacity:0 and only fades the icons in on card hover, so shoppers never learn the hover exists. Here we show the icons at rest (slightly shrunk + soft shadow so the white circles read on any image) and promote them on hover: full size/opacity, with Quick View taking the brand red as the primary action. Below 1025px core sets these display:none and we leave that untouched. Scoped to .grid-view so list view / sliders are unaffected. Specificity (6-7 classes) intentionally beats the core rules. --------------------------------------------------------------------------- */ @media (min-width: 1025px) { .tt-product-listing.grid-view .tt-col-item .tt-product .tt-image-box .tt-btn-quickview, .tt-product-listing.grid-view .tt-col-item .tt-product .tt-image-box .tt-btn-wishlist, .tt-product-listing.grid-view .tt-col-item .tt-product .tt-image-box .tt-btn-compare { opacity: .9; transform: scale(.86); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); transition: opacity .2s linear, transform .2s ease, background-color .2s linear, color .2s linear; background: #eeeeee; } .tt-product-listing.grid-view .tt-col-item .tt-product:hover .tt-image-box .tt-btn-quickview, .tt-product-listing.grid-view .tt-col-item .tt-product:hover .tt-image-box .tt-btn-wishlist, .tt-product-listing.grid-view .tt-col-item .tt-product:hover .tt-image-box .tt-btn-compare { opacity: 1; transform: scale(1); } } /* --------------------------------------------------------------------------- Newsletter popup (#Modalnewsletter): white background instead of Wokiee's default dark promo skin, with dark text so it stays readable, and the ported OLD promo image (SignUpFor-Newsletter2.png, see define_newsletter_popup.php) sized to 450px. Dialog widened to fit the image and GEM signup iframe without clipping. --------------------------------------------------------------------------- */ #Modalnewsletter .modal-dialog { max-width: 500px; width: 90%; } #Modalnewsletter .modal-content { background-color: #fff; } #Modalnewsletter .tt-modal-newsletter-promo img { width: 450px; max-width: 100%; height: auto; display: block; margin: 0 auto; } #Modalnewsletter .tt-modal-newsletter, #Modalnewsletter .tt-modal-newsletter p, #Modalnewsletter .tt-modal-newsletter .checkbox-group label { color: #191919; } #Modalnewsletter .modal-header .close .icon-clear { color: #191919; } /* GEM signup iframe: full width, no wrapper margin/padding so it lines up flush with the 450px promo image above it (overrides wt_styles.css `.row-subscibe .input-group { margin-left: 8px }`). */ #Modalnewsletter .subscribe-form, #Modalnewsletter .row-subscibe, #Modalnewsletter .input-group { margin: 0; padding: 0; width: 100%; } #Modalnewsletter .newsletter_iframe { width: 100%; display: block; border: 0; } /* --------------------------------------------------------------------------- Homepage Categories / Homepage Manufacturers grid (tpl_wt_home_categories.php, tpl_wt_home_manufacturers.php): keep the price/Add to Cart hover-reveal, but stop it from growing the card's box height. Wokiee core hides .tt-product-inside-hover via `max-height:0;overflow:hidden` and expands it in normal flow on hover (theme.css, @media min-width:1025px), which pushes neighbouring cards down. Here it's repositioned as an absolutely-positioned overlay instead, with a fixed-height reserved area so it always has room to render without affecting sibling card layout. Scoped to .tt-home-center-content so the real category-listing product grid is untouched. --------------------------------------------------------------------------- */ .tt-home-center-content .tt-product.thumbprod-center .tt-description { position: relative; min-height: 180px; } @media (min-width: 1025px) { /* Reserve room for the Add to Cart button (~40px + 12px top margin) so it never overlaps "Ships From Canada" or extra sale-price lines (% off, Compare at, second currency) that push the text content taller than the 180px min-height on discounted products. */ .tt-home-center-content .tt-product.thumbprod-center .tt-description { padding-bottom: 58px; } .tt-home-center-content .tt-product.thumbprod-center .tt-product-inside-hover { position: absolute; left: 0; right: 0; bottom: 0; max-height: none !important; overflow: visible !important; visibility: hidden; opacity: 0; transition: opacity .2s linear; display: inline-flex !important; justify-content: center; } .tt-home-center-content .tt-product.thumbprod-center:hover .tt-product-inside-hover, .tt-home-center-content .tt-product.thumbprod-center.hovered .tt-product-inside-hover { visibility: visible !important; opacity: 1 !important; } } /* Crop each card's product image to a fixed aspect instead of rendering at the source photo's natural size, so cards are visually consistent. */ .tt-home-center-content .tt-product.thumbprod-center .tt-image-box { height: 280px; } .tt-home-center-content .tt-product.thumbprod-center .tt-image-box img { width: 100%; height: 100%; object-fit: cover; } /* Cancel the site-wide equal-height-row stretch (`.tt-product-listing .grid-view .tt-col-item .tt-product { height: 100% }`, declared further up this file) for this section, per request: cards size to their own content instead of stretching to match the tallest card in their row, so category/ manufacturer labels underneath won't all land on the same line - accepted trade-off to keep the hover-reveal behaviour simple and reliable. !important needed: that rule matches 4 classes (.tt-product-listing .grid-view .tt-col-item .tt-product), this one only 3, so it would otherwise lose on specificity despite loading later. */ .tt-home-center-content .tt-product.thumbprod-center { height: auto !important; } /* Category/manufacturer title link below each card: small breathing room above it, separating it from the product card content stacked on top. */ .tt-home-center-content .tt-title1 { margin-top: 10px; } /* --------------------------------------------------------------------------- "About 3xToys" blurb (.price_match_container): originally ported from the old Couples theme (stylesheet_zx_min.css) as a single

paragraph, where it rendered site-wide via templates/Couples/common/tpl_main_page.php. Content was later expanded (H2 heading + H3 subheadings) directly in templates/wokiee/common/tpl_main_page.php; the old inline-block/h3-only rules didn't fit that structure, so headings here are restyled to match Wokiee's own typography (Hind font inherited from the global h1-h6 rule, #d20003 accent used by the theme's other section titles e.g. sidebox headings) instead of ad hoc inline styles. --------------------------------------------------------------------------- */ .price_match_container { display: block; margin: 30px 0; } .price_match_container .price-match-heading { font-size: 26px; font-weight: 500; margin-bottom: 15px; } .price_match_container h3 { font-size: 19px; font-weight: 500; color: #d20003; text-transform: uppercase; letter-spacing: 1px; line-height: 1.5em; margin-top: 20px; } @media (max-width: 1120px) { .price_match_container img { width: 100% !important; height: auto !important; } } /* --------------------------------------------------------------------------- Payment-icons row (.tt-payment-icons): ported from the old Couples theme's footer payment-logo strip (stylesheet_zx_min.css .quick-links-ul), where it rendered site-wide via templates/Couples/common/tpl_footer.php. Rebuilt with a simple flex row (markup uses Wokiee's own d-flex/flex-wrap/ justify-content-center/align-items-center utility classes) rather than the old table-cell + column-count layout. Rendered via the equivalent Wokiee hook point in templates/wokiee/common/tpl_main_page.php, right after .price_match_container. --------------------------------------------------------------------------- */ .tt-payment-icons { gap: 20px; margin: 20px 0; } .tt-payment-icons img { width: 210px; height: 96px; object-fit: contain; } @media (max-width: 480px) { .tt-payment-icons { gap: 8px; flex-wrap: nowrap; } .tt-payment-icons img { flex: 1 1 0; width: auto; max-width: 19%; height: 48px; object-fit: contain; } } /* --------------------------------------------------------------------------- Product info page: "Description" / "Reviews" tab labels, rendered by tpl_product_info_tabs_content.php, at a larger size than the theme.css default. Admin's "Product Tab Style" setting swaps the markup between two variants - both covered here so this keeps working whichever is active: - "default":