/* Theme Name: Chimera Child Theme URI: https://chimerabookery.com Description: Child theme for Hello Biz, built for Chimera Bookery. Holds all custom code migrated from Code Snippets plugin. Author: House of Advanced / Digital Med Author URI: https://houseofadvanced.com Template: hello-biz Version: 1.0.114 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v3 or later. License URI: https://www.gnu.org/licenses/gpl-3.0.html Text Domain: chimera-child */ /* ========================================================= Chimera Child Theme — custom styles ========================================================= */ /* --------------------------------------------------------- * Typography — Chimera fonts site-wide * Mapping from Natalia's design: * Abys → hero display, logo * Kiona → nav/labels/eyebrows (uppercase, letter-spaced) * Gotham GR → body, headings (Book weight + Bold weight) * Overrides Elementor's Gothic A1 via high specificity. * --------------------------------------------------------- */ body, body p, body li, body td, body a, body label, body input, body select, body textarea, body button, .elementor-widget-container, .elementor-widget-text-editor, .elementor-widget-heading .elementor-heading-title, .elementor-button, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce div.product .product_title, .wc-block-components-product-name { font-family: 'Gotham GR', 'Inter', sans-serif !important; } /* Headings — Gotham GR Book (400) by default per Natalia's design. * The PDFs show no bold headings: section titles, product titles, hero * captions all render in Book weight. Bold is opt-in via .chimera-bold. */ h1, h2, h3, h4, h5, h6, body h1, body h2, body h3, body h4, body h5, body h6, .elementor-widget-heading h1.elementor-heading-title, .elementor-widget-heading h2.elementor-heading-title, .elementor-widget-heading h3.elementor-heading-title, .elementor-widget-heading h4.elementor-heading-title, .elementor-widget-heading h5.elementor-heading-title, .elementor-widget-heading h6.elementor-heading-title { font-family: 'Gotham GR', 'Inter', sans-serif !important; font-weight: 400 !important; } /* Opt-in bold — for any element that genuinely needs Gotham GR 700. * Apply via Elementor CSS Classes: chimera-bold */ .chimera-bold, .chimera-bold .elementor-heading-title, .elementor-widget-heading.chimera-bold .elementor-heading-title { font-weight: 700 !important; } /* Eyebrow labels (SHOP ONLINE, SELECTIONS, AUTHOR, etc.) — auto-tagged with * .chimera-kiona via JS in functions.php when a heading widget contains short * uppercase text. This rule wins over the heading rule above via specificity * + later-in-stylesheet ordering. */ .elementor-widget-heading .elementor-heading-title.chimera-kiona, .elementor-widget-heading.chimera-kiona .elementor-heading-title { font-family: 'Kiona', 'Gotham GR', sans-serif !important; font-weight: 400 !important; letter-spacing: 0.15em; } /* Small-caps / letter-spaced / nav-style labels use Kiona. * Applied to: main nav, eyebrow labels, utility links, shop loop "AUTHOR" row, * and any element opted-in via .chimera-kiona helper class. */ .elementor-nav-menu .elementor-item, .elementor-nav-menu a, .chimera-kiona, .e-loop-item .book-author, .e-loop-item .elementor-widget-woocommerce-product-title .elementor-heading-title, .woocommerce-result-count, .woocommerce .button.alt, .elementor-button-text, .wc-block-components-button { font-family: 'Kiona', 'Gotham GR', sans-serif !important; } /* Hero display text (big handwritten). Opt-in via .chimera-abys or target specific hero widgets. */ .chimera-abys, .elementor-element .chimera-hero-title, .elementor-element .chimera-hero-title .elementor-heading-title { font-family: 'Abys', cursive !important; font-weight: 400; } /* --------------------------------------------------------- * SHOP PAGE — mobile layout (2026-04-24, updated 2026-04-28) * Sidebar (filters + categories) ABOVE products on mobile, * per Panos's request — easier to filter before scrolling. * --------------------------------------------------------- */ @media (max-width: 767px) { .elementor-element.elementor-element-bec8b20.e-con { flex-direction: column !important; } .elementor-element.elementor-element-bec8b20 > .elementor-element-fdebcc8 { order: 1 !important; width: 100% !important; margin-top: 0 !important; margin-bottom: 28px !important; } .elementor-element.elementor-element-bec8b20 > .elementor-element-5c31790 { order: 2 !important; } } /* --------------------------------------------------------- * HOMEPAGE + site-wide mobile polish (2026-04-24) * --------------------------------------------------------- */ @media (max-width: 767px) { /* Tame large hero headline sizes on mobile */ .elementor-widget-heading h1.elementor-heading-title, .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(24px, 7vw, 40px) !important; line-height: 1.15 !important; } /* Product card titles in loop grids — larger tap targets */ .e-loop-item .elementor-widget-woocommerce-product-title .elementor-heading-title, .e-loop-item .elementor-widget-woocommerce-product-title .elementor-heading-title a { font-size: 14px !important; line-height: 1.35 !important; padding: 6px 0 !important; display: inline-block !important; } /* Price slightly larger for readability */ .e-loop-item .woocommerce-Price-amount, .e-loop-item .elementor-widget-woocommerce-product-price .woocommerce-Price-amount { font-size: 13px !important; } /* Book grids — 1 per row on mobile (default for loop-grids: related * products + any not overridden below). Single-column gives book covers * room to breathe. The books/Pretty-Things archive (T5a, v1.0.96) and the * homepage grids (v1.0.97, below) override this to 2-col. */ .elementor-widget-loop-grid .elementor-loop-container, .elementor-widget-woocommerce-products .elementor-products .products { grid-template-columns: 1fr !important; gap: 28px 0 !important; } /* Homepage book grids — 2-column on mobile. v1.0.97 (2026-05-21): the * homepage "Latest Books" (33063bb) and "Monthly Choices" (58f6dfc) * sections override the 1-col default above to a 2-col grid, matching the * 2-col books/Pretty-Things archive shipped in v1.0.96 (T5a). Scoped to * the two widget IDs — related products and other loop-grids stay 1-col. * Compound `.widget.id` selector outranks the generic rule above. */ .elementor-widget-loop-grid.elementor-element-33063bb .elementor-loop-container, .elementor-widget-loop-grid.elementor-element-58f6dfc .elementor-loop-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px 12px !important; } /* Half-width book cards: contain content so nothing overflows the cell. */ .elementor-element-33063bb .e-loop-item, .elementor-element-58f6dfc .e-loop-item { min-width: 0 !important; } .elementor-element-33063bb .e-loop-item img, .elementor-element-58f6dfc .e-loop-item img { max-width: 100% !important; height: auto !important; } /* Product-card grids in related sections — 2-column on mobile. The * single-product "Related Products" grid (widget 59170f9, v1.0.98) and * the cart "You may be also interested in" grid (widget 167aa21, v1.0.99) * override the 1-col loop-grid default above to 2-col, matching the * homepage grids (v1.0.97) and the books archive (v1.0.96). */ .elementor-widget-loop-grid.elementor-element-59170f9 .elementor-loop-container, .elementor-widget-loop-grid.elementor-element-167aa21 .elementor-loop-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px 12px !important; } .elementor-element-59170f9 .e-loop-item, .elementor-element-167aa21 .e-loop-item { min-width: 0 !important; } .elementor-element-59170f9 .e-loop-item img, .elementor-element-167aa21 .e-loop-item img { max-width: 100% !important; height: auto !important; } /* Price suffix on product cards — secondary to the price. v1.0.99 * (2026-05-21): the WooCommerce "incl. VAT, plus shipping costs" suffix * is legally required (PAngV) but renders at the theme default 16px on * .e-loop-item cards — larger than the 13px card price above it. Shrink * it so it reads as fine print, not a headline. */ .e-loop-item .woocommerce-price-suffix, .e-loop-item .woocommerce-price-suffix a { font-size: 11px !important; } /* Homepage category row (Romance/Feminism/History/Classics/General) — 2-column * grid on mobile. v1.0.96 (2026-05-21): per the 2026-05-20 meeting the prior * vertical 1-col list becomes a 2-column grid, image + title only (descriptions * dropped), with "General" (5th / last card) spanning the full final row. The JS * applyHomepageCategoryList() destroys Swiper and adds .chimera-cats-vertical; * these rules then lay the slides out as the grid. Single source of truth — no * competing block in functions.php. */ .elementor-element-a46e7e4.chimera-cats-vertical, .elementor-element-a46e7e4.chimera-cats-vertical > .e-con-inner, .elementor-element-a46e7e4.chimera-cats-vertical .swiper { display: block !important; width: 100% !important; max-width: 100% !important; overflow-x: visible !important; } /* .swiper-wrapper is the direct parent of the 5 slides — it is the grid. */ .elementor-element-a46e7e4.chimera-cats-vertical .swiper-wrapper { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 12px !important; width: 100% !important; max-width: 100% !important; transform: none !important; height: auto !important; } /* Each category card occupies one grid cell. */ .elementor-element-a46e7e4.chimera-cats-vertical .swiper-slide { width: auto !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; transform: none !important; text-align: center; } /* "General" — 5th / last card — spans the full final row. */ .elementor-element-a46e7e4.chimera-cats-vertical .swiper-slide:last-child { grid-column: 1 / -1 !important; } .elementor-element-a46e7e4.chimera-cats-vertical .swiper-slide img { width: auto !important; height: auto !important; max-width: 78% !important; max-height: 104px !important; display: block !important; margin: 0 auto 12px !important; object-fit: contain !important; } .elementor-element-a46e7e4.chimera-cats-vertical .swiper-slide h1, .elementor-element-a46e7e4.chimera-cats-vertical .swiper-slide h2, .elementor-element-a46e7e4.chimera-cats-vertical .swiper-slide h3, .elementor-element-a46e7e4.chimera-cats-vertical .swiper-slide .elementor-heading-title { margin: 0 !important; padding: 0 4px !important; font-size: 15px !important; line-height: 1.25 !important; overflow-wrap: break-word !important; word-break: break-word !important; } /* Image + title only — drop the category descriptions. */ .elementor-element-a46e7e4.chimera-cats-vertical .swiper-slide p, .elementor-element-a46e7e4.chimera-cats-vertical .swiper-slide .elementor-widget-text-editor { display: none !important; } /* Hide carousel nav arrows + dots. */ .elementor-element-a46e7e4.chimera-cats-vertical .swiper-button-prev, .elementor-element-a46e7e4.chimera-cats-vertical .swiper-button-next, .elementor-element-a46e7e4.chimera-cats-vertical .swiper-pagination { display: none !important; } } /* --------------------------------------------------------- * PRODUCT SINGLE PAGE — mobile polish (2026-04-24) * --------------------------------------------------------- */ @media (max-width: 767px) { /* Gallery takes full width, less padding */ .woocommerce div.product .woocommerce-product-gallery { width: 100% !important; padding: 0 8px !important; } /* Product title — readable size */ .product_title.entry-title, .elementor-widget-woocommerce-product-title .elementor-heading-title { font-size: 22px !important; line-height: 1.25 !important; margin-bottom: 10px !important; } /* Price readable */ .woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 20px !important; margin-bottom: 14px !important; } /* Add to cart — full width, tall tap target */ .woocommerce div.product form.cart .single_add_to_cart_button, form.cart .button.alt { width: 100% !important; padding: 14px 18px !important; font-size: 14px !important; letter-spacing: 1.5px !important; } /* Quantity + add to cart stacked cleanly */ .woocommerce div.product form.cart .quantity { margin-bottom: 10px !important; } /* Tabs bottom content padding handled by existing snippet #10 */ /* Related products — 1 per row on mobile (was 2). */ .related.products ul.products li.product, .e-loop-item { width: 100% !important; } } /* --------------------------------------------------------- * SHOP — price filter slider (2026-04-28) * Per Natalia's Shop.pdf: thin grey rail, red active range, * red circular handles, no Filter button (auto-applies on * slidestop via JS in functions.php Snippet #20-style block). * * 2026-05-02: full-width fix for desktop. The Elementor HTML * widget that wraps .chimera-price-filter is a flex item with * `flex: 0 1 auto`, so without an intrinsic width it collapses * to the content's hit-box (~16px — just the two stacked handles). * The mobile media query at line ~474 already handles this for * <=1199px; this block extends the same fix to desktop. * --------------------------------------------------------- */ .elementor-element-fdebcc8 .elementor-widget-html, .elementor-element-fdebcc8 .elementor-widget-html .elementor-widget-container, .chimera-price-filter, .chimera-price-filter form, .chimera-price-filter .price_slider_wrapper { width: 100%; max-width: 100%; box-sizing: border-box; } .chimera-price-filter .price_slider_wrapper { padding: 4px 0; } .chimera-price-filter .price_slider { background: #e5e5e5 !important; height: 2px !important; border-radius: 999px !important; border: 0 !important; position: relative; margin: 18px 8px 14px; } .chimera-price-filter .ui-slider-range, .chimera-price-filter .price_slider .ui-slider-range { background: #D94F30 !important; height: 2px !important; position: absolute; top: 0; border: 0 !important; } .chimera-price-filter .ui-slider-handle, .chimera-price-filter .price_slider .ui-slider-handle { background: #D94F30 !important; border: 0 !important; border-radius: 50% !important; width: 14px !important; height: 14px !important; display: block !important; position: absolute !important; top: -6px !important; margin-left: -7px !important; cursor: grab; box-shadow: 0 1px 3px rgba(0,0,0,0.18); outline: 0 !important; z-index: 2; } .chimera-price-filter .ui-slider-handle:hover, .chimera-price-filter .ui-slider-handle:focus, .chimera-price-filter .ui-slider-handle.ui-state-active { background: #B8401E !important; cursor: grabbing; } .chimera-price-filter .price_slider_amount { margin-top: 12px; text-align: left; } /* Visible "Price: X € — Y €" range label below the slider. * Panos 2026-05-05: needed to confirm the active price range. */ .chimera-price-filter .price_slider_amount .price_label { display: block !important; font-family: 'Gotham GR', 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; color: #222 !important; margin: 8px 0 0 0 !important; letter-spacing: 0.02em !important; } .chimera-price-filter .price_slider_amount .price_label .from, .chimera-price-filter .price_slider_amount .price_label .to { color: #FA4023 !important; font-weight: 600 !important; } /* Hide the WooCommerce "Filter" button — slidestop JS handles submit. */ .chimera-price-filter .price_slider_amount > button, .chimera-price-filter .price_slider_amount button.button, .chimera-price-filter button[type="submit"].button { display: none !important; } /* Hide the legacy text inputs (modern WC keeps them visually hidden anyway). */ .chimera-price-filter .price_slider_amount input.text { display: none !important; } /* --------------------------------------------------------- * SIDEBAR — branch-aware category visibility (2026-05-03, v1.0.22). * Stavroula 2026-05-03: when on /pretty-things (or any of its * children Postcards/Stickers/Notepads), the sidebar still listed * the 5 book sub-categories (Romance, Feminism, etc.) — looked * like books were "appearing in postcards". Hide those links when * the body is in the Pretty Things branch (term IDs 36/37/38/39). * Books-branch sidebar is unaffected (only book sub-cats listed * there already, no postcard/sticker links to hide). * --------------------------------------------------------- */ body.term-36 .elementor-element-fdebcc8 a[href*="/product-category/romance/"], body.term-37 .elementor-element-fdebcc8 a[href*="/product-category/romance/"], body.term-38 .elementor-element-fdebcc8 a[href*="/product-category/romance/"], body.term-39 .elementor-element-fdebcc8 a[href*="/product-category/romance/"], body.term-36 .elementor-element-fdebcc8 a[href*="/product-category/feminism/"], body.term-37 .elementor-element-fdebcc8 a[href*="/product-category/feminism/"], body.term-38 .elementor-element-fdebcc8 a[href*="/product-category/feminism/"], body.term-39 .elementor-element-fdebcc8 a[href*="/product-category/feminism/"], body.term-36 .elementor-element-fdebcc8 a[href*="/product-category/classics/"], body.term-37 .elementor-element-fdebcc8 a[href*="/product-category/classics/"], body.term-38 .elementor-element-fdebcc8 a[href*="/product-category/classics/"], body.term-39 .elementor-element-fdebcc8 a[href*="/product-category/classics/"], body.term-36 .elementor-element-fdebcc8 a[href*="/product-category/general/"], body.term-37 .elementor-element-fdebcc8 a[href*="/product-category/general/"], body.term-38 .elementor-element-fdebcc8 a[href*="/product-category/general/"], body.term-39 .elementor-element-fdebcc8 a[href*="/product-category/general/"], body.term-36 .elementor-element-fdebcc8 a[href*="/product-category/society-history-race-identity/"], body.term-37 .elementor-element-fdebcc8 a[href*="/product-category/society-history-race-identity/"], body.term-38 .elementor-element-fdebcc8 a[href*="/product-category/society-history-race-identity/"], body.term-39 .elementor-element-fdebcc8 a[href*="/product-category/society-history-race-identity/"] { display: none !important; } /* --------------------------------------------------------- * v1.0.113 (2026-06-03): books-branch sidebar links leaked back * into Pretty Things (desktop + mobile). Stavroula 2026-06-03: * "Στην κατηγορία pretty things υπάρχει ακόμα το φίλτρο για * κατηγορίες τύπου romance κτλ." * * Root cause: applyDrawerCategoryPrefix() (functions.php, v1.0.68) * rewrites the sidebar genre links to /product-category/books//. * The v1.0.22 hide block above still matches the OLD un-prefixed * /product-category// form — [href*=] is a substring match, and * "/product-category/books/romance/" does NOT contain * "/product-category/romance/", so the rule stopped firing once the * prefix was injected. The bare-slug block above is kept as a * no-flash defensive layer (covers the pre-rewrite render); this * block catches the post-rewrite /books/ form and any future book * sub-category, since the Pretty Things sidebar must never link into * the books branch. Same .elementor-element-fdebcc8 element backs the * mobile filter drawer, so this fixes both viewports. * --------------------------------------------------------- */ body.term-36 .elementor-element-fdebcc8 a[href*="/product-category/books/"], body.term-37 .elementor-element-fdebcc8 a[href*="/product-category/books/"], body.term-38 .elementor-element-fdebcc8 a[href*="/product-category/books/"], body.term-39 .elementor-element-fdebcc8 a[href*="/product-category/books/"], body.term-pretty-things .elementor-element-fdebcc8 a[href*="/product-category/books/"] { display: none !important; } /* --------------------------------------------------------- * SINGLE PRODUCT — book-author near title (2026-05-04, v1.0.26). * Reverted v1.0.22's display:none on .book-author per Panos * 2026-05-04: bring back our styled author shortcode above the * title. The Elementor short-description widget still renders * "By AUTHOR · Format · Pages" below the title — that's a richer * line carrying format + pages, kept as the second beat. Visual * order on single product is now: book-author shortcode → title * → short-description (with format/pages). * --------------------------------------------------------- */ /* --------------------------------------------------------- * CATEGORY ARCHIVE — visible category title (2026-05-03, v1.0.22). * Stavroula 2026-05-03: clicking a category (Romance/Feminism/etc.) * lands on a page with no visible title — user "doesn't know where * they are". Title is injected at top of products container by JS * (functions.php). These styles render it in the Chimera typography. * --------------------------------------------------------- */ .chimera-cat-title { display: block !important; width: 100% !important; box-sizing: border-box !important; font-family: 'Gotham GR', 'Inter', sans-serif !important; font-size: 38px !important; font-weight: 600 !important; line-height: 1.2 !important; margin: 0 0 24px 0 !important; padding: 0 !important; color: #222 !important; /* v1.0.47: was text-align:left, but the products column starts at * x=200 (right at the edge of the 180px-wide fixed left nav) and * the H1's leading "B" was visually clipped by the nav's stacking * context. Centering aligns it with the centered grid below and * keeps the title fully visible. */ text-align: center !important; clear: both !important; position: relative !important; z-index: 5 !important; /* v1.0.40: was `flex: 0 0 100%` — that meant "take 100% of main axis" * which in a column-flex parent (.5c31790) translates to "take * the full available height" so the H1 ballooned to ~2900px and * shoved the loop-grid below the footer. Use `0 0 auto` so the * title only takes its content height; full-row width is already * handled by `width: 100%` above. */ flex: 0 0 auto !important; } /* When the title is inserted INSIDE the products column (.5c31790), * force flex-column so the title takes a full row above the loop-grid * widget instead of competing for horizontal flex space — earlier * insertion path stretched books to the right. v1.0.35. * * v1.0.37: also force the products column to flex-grow within its * parent row (.bec8b20) so books fill the space the 230px sidebar * leaves over. Without this the column inherits a fixed 530px width * from Elementor and books crush to ~150px wide × 155px tall. */ .elementor-element-5c31790 { display: flex !important; flex-direction: column !important; align-items: stretch !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; } /* v1.0.41: archive layout — 3-column book grid with filter sidebar * pulled closer to the books (per Panos 2026-05-07). * * The fixed left site nav is 180px wide, so we keep 200px of left * padding (20px breathing room). Right padding drops from the * Elementor-default 120px to 32px so the sidebar doesn't sit in * empty space. That frees ~190px of horizontal room, which lets the * loop-grid render 3 columns of ~220px each (vs the previous * 2 columns of ~243px wedged into a 530px products column). * * Mobile (<768px) keeps the existing 1-col override from line ~160. */ @media (min-width: 768px) { .elementor-location-archive .elementor-element-bec8b20 { /* v1.0.50: left padding now scales with viewport because the * fixed left nav widens with the viewport (180px @ 1200vp, * 227px @ 1512vp, ~290px @ 1920vp). Fixed 200px padding put * the leftmost content (H1, first book) behind the nav at * larger viewports — the "Books" title's "B" was clipped. * clamp(220, 18vw, 320) always clears the nav with a small * breathing margin. * Right padding 80 + gap 48 unchanged (v1.0.49 hierarchy). */ padding-left: clamp(220px, 18vw, 320px) !important; padding-right: 80px !important; gap: 48px !important; } .elementor-location-archive .elementor-element-948bc7f .elementor-loop-container { /* v1.0.49: cards stretched 200 → 240 (more impactful covers). * justify-content: start packs them to the LEFT edge of the * products column — title aligns above the first book. */ grid-template-columns: repeat(3, minmax(0, 240px)) !important; gap: 56px 24px !important; justify-content: start !important; } /* v1.0.48 design polish: editorial breathing above + below grid, * subtle hover lift on cards. Scoped to .elementor-location-archive * so the homepage's Latest Books / Monthly Choices grids are * untouched. * v1.0.49: title left-aligned (overrides the centered default), * sitting above the leftmost book for a clear left edge. */ .elementor-location-archive .elementor-element-5c31790 > .chimera-cat-title { margin-top: 16px !important; margin-bottom: 40px !important; text-align: left !important; } .elementor-location-archive .elementor-element-948bc7f { padding-top: 8px !important; padding-bottom: 32px !important; } .elementor-location-archive .e-loop-item { transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1); } .elementor-location-archive .e-loop-item:hover { transform: translateY(-6px); } .elementor-location-archive .e-loop-item .elementor-widget-theme-post-featured-image img { transition: transform 320ms ease-out; } .elementor-location-archive .e-loop-item:hover .elementor-widget-theme-post-featured-image img { transform: scale(1.03); } } .elementor-element-5c31790 > .chimera-cat-title { margin-top: 8px !important; margin-bottom: 28px !important; } @media (max-width: 1024px) { .chimera-cat-title { font-size: 30px !important; margin: 24px 0 20px 0 !important; } } @media (max-width: 767px) { .chimera-cat-title, .chimera-cat-title.chimera-cat-title-hero { font-size: 28px !important; font-weight: 600 !important; /* v1.0.55: trim top margin (was 20px which inherited from * desktop's 16+40 stack and felt empty on a narrow viewport). */ margin: 8px 16px 12px 16px !important; padding: 0 !important; text-align: left !important; } /* v1.0.55: tighten the items-found / sort / search toolbar on * mobile. The Elementor flex container stacks to column at this * width with a default ~24px gap *plus* whatever vertical padding * each child widget brings — the result was ~150px between each * line. Force a 12px gap and zero out per-widget vertical margins. */ .elementor-305 .elementor-element.elementor-element-195bef1 { --gap: 12px 12px !important; --row-gap: 12px !important; --column-gap: 12px !important; } .elementor-element-195bef1 .elementor-widget { margin-bottom: 0 !important; margin-top: 0 !important; } .elementor-element-195bef1 .elementor-widget-container { padding-top: 0 !important; padding-bottom: 0 !important; } /* Nested toolbar row (.2043b0e) holds Sort + Search and ships * with a 116px Elementor row-gap from the desktop layout. On a * 350px-wide mobile container both children wrap to their own * row, which makes the 116px gap visually break the page. * Elementor injects per-widget CSS variables on its * .elementor-305 .elementor-element.elementor-element-{id} * selector with HIGHER specificity than ours — match it and * override the CSS vars (the actual `gap` property is computed * from `var(--row-gap) var(--column-gap)`). */ .elementor-305 .elementor-element.elementor-element-2043b0e { --gap: 12px 12px !important; --row-gap: 12px !important; --column-gap: 12px !important; } .elementor-element-2043b0e > .elementor-element { margin-bottom: 0 !important; } } /* Loading state during price-filter form submit (2026-05-05, v1.0.28). */ body.chimera-filtering .elementor-widget-loop-grid, body.chimera-filtering ul.products { opacity: 0.5 !important; pointer-events: none !important; transition: opacity 0.18s ease !important; } /* --------------------------------------------------------- * SHOP — active filters / chips component (2026-04-27) * Rendered by [chimera_active_filters] shortcode in functions.php. * Auto-injected above the price filter when any filter is applied. * --------------------------------------------------------- */ .chimera-active-filters { margin: 0 0 18px; } .chimera-active-filters__title { font-family: 'Kiona', 'Gotham GR', sans-serif; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #888; margin: 0 0 8px; } .chimera-active-filters__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .chimera-active-filters__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 12px; background: #fff; border: 1px solid #D94F30; border-radius: 999px; font-family: 'Gotham GR', sans-serif; font-size: 12px; color: #333; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .chimera-active-filters__chip:hover, .chimera-active-filters__chip:focus { background: #D94F30; color: #fff; } .chimera-active-filters__remove { display: inline-block; width: 14px; height: 14px; line-height: 12px; text-align: center; font-size: 14px; font-weight: 700; } .chimera-active-filters__clear { display: inline-block; margin-top: 8px; font-family: 'Kiona', 'Gotham GR', sans-serif; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #D94F30; text-decoration: underline; } /* --------------------------------------------------------- * Touch-target enlargement for accessibility * --------------------------------------------------------- */ @media (max-width: 767px) { /* Clickable product card area */ .e-loop-item a { display: inline-block; min-height: 24px; } } /* --------------------------------------------------------- * TABLET LAYER — 768px to 1023px (iPad portrait + landscape) * Audit 2026-04-28: Elementor falls back to its mobile layout * across this range, leaving cramped hero, footer, and product * page. These rules tighten that range without disturbing * existing mobile (≤767) or desktop (≥1024) behaviour. * --------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1199px) { /* Hero handwriting — keep it big but stop it from cropping the Chimera mascot illustration on portrait iPad. */ .elementor-widget-heading h1.elementor-heading-title.chimera-hero-title, .elementor-element .chimera-hero-title, .elementor-element .chimera-hero-title .elementor-heading-title { font-size: clamp(40px, 6vw, 64px) !important; line-height: 1.05 !important; } /* Loop grids — 3 across on tablet (vs 4 on desktop, 1 on mobile). Matches the design proportions for in-between widths. */ .elementor-widget-loop-grid .elementor-loop-container, .elementor-widget-woocommerce-products .elementor-products .products { grid-template-columns: repeat(3, 1fr) !important; gap: 32px 20px !important; } /* Single product page — image + summary side-by-side at 50/50, instead of the broken near-empty gallery column. */ .woocommerce.single-product div.product { display: flex !important; flex-wrap: wrap !important; gap: 32px !important; } .woocommerce.single-product div.product .woocommerce-product-gallery { flex: 0 0 calc(50% - 16px) !important; max-width: calc(50% - 16px) !important; width: calc(50% - 16px) !important; } .woocommerce.single-product div.product .summary.entry-summary { flex: 0 0 calc(50% - 16px) !important; max-width: calc(50% - 16px) !important; width: calc(50% - 16px) !important; } .woocommerce.single-product div.product .woocommerce-tabs, .woocommerce.single-product div.product .related.products, .woocommerce.single-product div.product .upsells.products { flex: 0 0 100% !important; width: 100% !important; } /* Add-to-wishlist link — keep on the same row, not wrapping into a 3-line column next to ADD TO CART. */ .yith-wcwl-add-to-wishlist, .yith-wcwl-add-to-wishlist .yith-wcwl-add-button, .yith-wcwl-add-to-wishlist a { white-space: nowrap !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; } /* Footer — give the columns breathing room and keep the form inputs readable. Default Elementor stacks them too tightly. */ footer .e-con.e-parent, .elementor-location-footer .e-con.e-parent { gap: 24px !important; padding: 40px 32px !important; } .elementor-location-footer .elementor-widget-form input[type="email"], .elementor-location-footer .elementor-widget-form input[type="text"], .elementor-location-footer input[type="email"], .elementor-location-footer input[type="text"] { max-width: 100% !important; width: 100% !important; } /* Shop sidebar on tablet — sit NEXT TO the books (v1.0.66, 2026-05-11). Reverses the 2026-04-28 stack-above behaviour: on iPad widths there's enough room for a real sidebar if we (a) shrink the desktop's left-nav padding clamp, (b) constrain sidebar width, (c) drop the books grid to 2 cols so it doesn't overflow the remaining column. */ .elementor-location-archive .elementor-element.elementor-element-bec8b20 { padding-left: 32px !important; padding-right: 32px !important; gap: 28px !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; } .elementor-element.elementor-element-bec8b20 > .elementor-element-fdebcc8 { flex: 0 0 200px !important; width: 200px !important; max-width: 200px !important; margin-top: 0 !important; margin-bottom: 0 !important; } .elementor-element.elementor-element-bec8b20 > .elementor-element-5c31790 { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; } /* Archive books grid — 2 cols at iPad widths so cards have room next to the 200px filter sidebar (desktop rule forces 3x240px which overflows the remaining column). */ .elementor-location-archive .elementor-element-948bc7f .elementor-loop-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 40px 20px !important; justify-content: stretch !important; } } /* --------------------------------------------------------- * SHOP SIDEBAR — mobile + iPad (2026-04-28). * The sidebar's child widgets keep their desktop column width * unless we force them full-width here. Without this rule, the * price slider's container is ~16px wide and jQuery UI initialises * the slider with zero usable width — handles overlap and Panos * sees an "invisible" filter. * --------------------------------------------------------- */ @media (max-width: 1199px) { .elementor-element-fdebcc8, .elementor-element-fdebcc8 > .e-con-inner, .elementor-element-fdebcc8 > .elementor-element, .elementor-element-fdebcc8 .elementor-widget, .elementor-element-fdebcc8 .elementor-widget-wrap, .elementor-element-fdebcc8 .elementor-widget-container { width: 100% !important; max-width: 100% !important; } .elementor-element-fdebcc8 .elementor-widget-heading h1.elementor-heading-title, .elementor-element-fdebcc8 .elementor-widget-heading h2.elementor-heading-title, .elementor-element-fdebcc8 .elementor-widget-heading h3.elementor-heading-title, .elementor-element-fdebcc8 .elementor-widget-heading h4.elementor-heading-title, .elementor-element-fdebcc8 .elementor-widget-heading h5.elementor-heading-title, .elementor-element-fdebcc8 .elementor-widget-heading h6.elementor-heading-title { font-size: 15px !important; line-height: 1.3 !important; margin-bottom: 6px !important; } .elementor-element-fdebcc8 .elementor-widget-heading { margin-bottom: 4px !important; } .chimera-price-filter, .chimera-price-filter .price_slider_wrapper, .chimera-price-filter form { width: 100% !important; max-width: 100% !important; } } /* --------------------------------------------------------- * SINGLE PRODUCT — mobile fix (2026-04-28). * Author label was overlapping the bottom of the cover image * because the gallery wrapper had no margin-bottom on mobile. * --------------------------------------------------------- */ @media (max-width: 767px) { .woocommerce.single-product div.product .woocommerce-product-gallery { margin-bottom: 28px !important; position: relative !important; } /* Gallery widget has a fixed Elementor height (~381px) that's shorter than the actual gallery content (~445px), so the cover spills over and overlaps the author widget below. Force every layer (widget, container, parent flex) to grow with content. */ .single-product .elementor-widget-woocommerce-product-images, .single-product .elementor-widget-woocommerce-product-images > .elementor-widget-container, .single-product .elementor-widget-woocommerce-product-images .elementor-widget-container, .single-product .elementor.elementor-location-single .e-con-inner, .single-product .elementor.elementor-location-single .e-con, .single-product .elementor.elementor-location-single .e-flex { height: auto !important; min-height: 0 !important; flex-basis: auto !important; } .single-product .elementor.elementor-location-single .e-con, .single-product .elementor.elementor-location-single .e-flex { align-items: flex-start !important; } .single-product .elementor-widget-woocommerce-product-images { flex: 0 0 auto !important; } /* As a final guarantee: push the author label clearly below the gallery, since the gallery wrapper retains its full slide height even when the widget chain is unconstrained. */ .single-product .elementor-widget-shortcode .book-author, .single-product .elementor-widget-shortcode .single-book-author, .single-product .elementor-widget-shortcode .chimera-book-author { padding-top: 32px !important; } .book-author, .single-book-author, .chimera-book-author, .elementor-widget-shortcode .book-author { display: block !important; margin-top: 0 !important; margin-bottom: 8px !important; clear: both !important; position: static !important; } .product_title.entry-title, .elementor-widget-woocommerce-product-title .elementor-heading-title { clear: both !important; margin-top: 0 !important; } } /* --------------------------------------------------------- * SHOP SIDEBAR — desktop column constraint (2026-05-01, v1.0.19). * Without an explicit width Elementor sizes #fdebcc8 to its * widest content, which on desktop swung between 16px (slider * collapsed) and 508px (sidebar steals product grid). Lock it * to 280px on desktop so: * - the slider has ~248px of usable rail * - the product grid keeps the remaining space * - tablet/mobile @media block at line 451 still wins below 1200 * --------------------------------------------------------- */ @media (min-width: 1200px) { .elementor-element.elementor-element-fdebcc8 { flex: 0 0 230px !important; max-width: 230px !important; width: 230px !important; } } /* --------------------------------------------------------- * WISHLIST PAGE — fix bare-shortcode layout (2026-05-01, v1.0.19). * Wishlist page (ID 1359) only contains the [ti_wishlistsview] * shortcode and has no Elementor data, so it renders through * Hello-Biz's the_content() with no padding to clear the Chimera * Menu's position:fixed 216px sidebar. Result: heading/content * sits under the orange nav. Add a left offset on this specific * page (and its WC siblings if they ever lose Elementor too). * --------------------------------------------------------- */ @media (min-width: 1024px) { body.page-id-1359 main.site-main, body.page-id-1359 .page-content, body.tinvwl-theme-style:not(.elementor-page) main.site-main, body.tinvwl-theme-style:not(.elementor-page) .page-content { padding-left: 240px !important; padding-right: 24px !important; padding-top: 40px !important; padding-bottom: 80px !important; min-height: 60vh !important; box-sizing: border-box !important; } body.page-id-1359 .tinv-wishlist h2, body.page-id-1359 .page-content h2 { font-family: 'Gotham GR', sans-serif !important; font-size: 28px !important; font-weight: 500 !important; margin: 0 0 24px !important; } body.page-id-1359 .return-to-shop .button { background: #D94F30 !important; color: #fff !important; padding: 10px 20px !important; border-radius: 2px !important; text-decoration: none !important; display: inline-block !important; } } @media (max-width: 1023px) { body.page-id-1359 main.site-main, body.page-id-1359 .page-content { padding: 24px 20px 60px !important; min-height: 50vh !important; } } /* --------------------------------------------------------- * SINGLE PRODUCT — equal-width tab buttons (2026-05-01, v1.0.19). * Default Elementor tabs size to content, so "Description" (11ch) * is 161px wide and "Additional Information" (22ch) is 239px wide. * Force flex:1 so both share the heading row equally. * --------------------------------------------------------- */ .elementor-widget-n-tabs .e-n-tabs-heading { display: flex !important; } .elementor-widget-n-tabs .e-n-tabs-heading .e-n-tab-title { flex: 1 1 0 !important; text-align: center !important; justify-content: center !important; min-height: 36px !important; padding-top: 8px !important; padding-bottom: 8px !important; } /* --------------------------------------------------------- * SINGLE PRODUCT — Add-to-Wishlist button (2026-05-01, v1.0.19). * TinvWL renders a 24px text link with no padding/border by default, * sitting next to the 40px ADD TO CART button. Match weight so the * action reads as a real button — outlined to stay secondary. * --------------------------------------------------------- */ .tinv-wraper.tinvwl-after-add-to-cart { display: inline-block !important; margin-left: 12px !important; vertical-align: middle !important; } .tinvwl_add_to_wishlist_button.tinvwl-icon-heart { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 10px 16px !important; border: 1px solid #D94F30 !important; border-radius: 2px !important; background: transparent !important; color: #D94F30 !important; font-family: 'Gotham GR', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.04em !important; text-decoration: none !important; line-height: 1 !important; white-space: nowrap !important; transition: background-color 120ms ease, color 120ms ease; } .tinvwl_add_to_wishlist_button.tinvwl-icon-heart:hover, .tinvwl_add_to_wishlist_button.tinvwl-icon-heart:focus { background: #D94F30 !important; color: #fff !important; } .tinvwl_add_to_wishlist_button.tinvwl-icon-heart::before, .tinvwl_add_to_wishlist_button.tinvwl-icon-heart .tinvwl-icon { color: inherit !important; font-size: 14px !important; } .tinvwl_add_to_wishlist_button .tinvwl_add_to_wishlist-text { color: inherit !important; font: inherit !important; } /* Wishlist already added state — filled red for clarity. */ .tinvwl_add_to_wishlist_button.tinvwl_added, .tinvwl_add_to_wishlist_button.tinvwl-product-in-list { background: #D94F30 !important; color: #fff !important; } /* Stack below cart on phones so the row doesn't wrap awkwardly. */ @media (max-width: 480px) { .tinv-wraper.tinvwl-after-add-to-cart { display: block !important; margin: 12px 0 0 0 !important; } .tinvwl_add_to_wishlist_button.tinvwl-icon-heart { width: 100% !important; justify-content: center !important; } } /* --------------------------------------------------------- * SINGLE PRODUCT — ADD TO CART as primary filled red button * (2026-05-01, v1.0.20). Default WC renders ADD TO CART as a * thin black-bordered outlined button, while our v1.0.19 * Add-to-Wishlist is also outlined red — visually they read * as equal-weight, which is wrong: cart is the primary action, * wishlist secondary. Make cart filled red, keep wishlist * outlined as secondary, and unify heights with quantity input. * --------------------------------------------------------- */ .woocommerce div.product form.cart .single_add_to_cart_button, .woocommerce div.product form.cart .single_add_to_cart_button.button.alt, form.cart button.single_add_to_cart_button { background: #D94F30 !important; color: #fff !important; border: 1px solid #D94F30 !important; border-radius: 2px !important; padding: 0 24px !important; height: 44px !important; line-height: 1 !important; font-family: 'Gotham GR', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; cursor: pointer !important; transition: background-color 120ms ease, border-color 120ms ease !important; } .woocommerce div.product form.cart .single_add_to_cart_button:hover, .woocommerce div.product form.cart .single_add_to_cart_button:focus { background: #B8401E !important; border-color: #B8401E !important; color: #fff !important; } /* Quantity input height matches the 44px buttons. */ .woocommerce div.product form.cart .quantity .qty, .woocommerce div.product form.cart input.qty { height: 44px !important; line-height: 1 !important; border: 1px solid #d0d0d0 !important; border-radius: 2px !important; padding: 0 8px !important; font-family: 'Gotham GR', sans-serif !important; font-size: 14px !important; width: 60px !important; text-align: center !important; box-sizing: border-box !important; } /* Wishlist button also 44px tall to match cart and quantity. */ .tinvwl_add_to_wishlist_button.tinvwl-icon-heart { height: 44px !important; padding: 0 16px !important; box-sizing: border-box !important; } /* Cart row layout — row of [qty] [cart] [wishlist] with even gaps. */ .woocommerce div.product form.cart { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; } .woocommerce div.product form.cart .quantity { margin: 0 !important; } .tinv-wraper.tinvwl-after-add-to-cart { margin-left: 0 !important; } /* --------------------------------------------------------- * SINGLE PRODUCT — equal-height tabs even with wrapped text * (2026-05-01, v1.0.20). On tablet/mobile, "Additional * Information" wraps to 2 lines while "Description" stays on * 1 line, making the tab row look uneven. Force consistent * min-height and align text the same way. * --------------------------------------------------------- */ html body .elementor-widget-n-tabs .e-n-tabs-heading .e-n-tab-title.e-n-tab-title { height: 56px !important; min-height: 56px !important; max-height: 56px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 6px 10px !important; line-height: 1.2 !important; text-align: center !important; box-sizing: border-box !important; overflow: hidden !important; } html body .elementor-widget-n-tabs .e-n-tabs-heading .e-n-tab-title .e-n-tab-title-text { display: block !important; line-height: 1.2 !important; font-size: 11px !important; } /* --------------------------------------------------------- * SINGLE PRODUCT — tablet + phone cart-row layout * (2026-05-01, v1.0.20). Quantity stays inline with cart * button on viewports >=480px. On phones the wishlist button * already drops below per the v1.0.19 rule. * --------------------------------------------------------- */ @media (min-width: 481px) and (max-width: 1023px) { .woocommerce div.product form.cart { gap: 12px !important; } .woocommerce div.product form.cart .single_add_to_cart_button { flex: 0 1 auto !important; min-width: 180px !important; } } @media (max-width: 480px) { html body .woocommerce div.product form.cart .single_add_to_cart_button { flex: 1 1 auto !important; min-width: 140px !important; } /* Force the wishlist wrapper to its own row in the flex form. */ html body .woocommerce div.product form.cart .tinv-wraper.tinvwl-after-add-to-cart, html body .tinv-wraper.tinvwl-after-add-to-cart { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; margin-top: 12px !important; margin-left: 0 !important; } } /* --------------------------------------------------------- * SHOP — MOBILE FILTERS DRAWER (2026-05-04, v1.0.23). * Stavroula 2026-05-03 mobile #2: putting the sidebar above * products on phones made categories look empty on first paint. * Solution: hide the sidebar by default on phones and reveal as * a slide-in drawer triggered by a "FILTERS" button. * --------------------------------------------------------- */ /* v1.0.68 (2026-05-12): force display:none with !important to defeat * the hello-biz parent theme rule `button { display: inline-block }` * (theme.css ver 1.2.1) which was leaking through whenever a user * resized from mobile (drawer rendered) to desktop. The mobile toggle * button stays in the DOM after the body.chimera-filters-mobile class * is removed; without !important, hello-biz's generic button rule wins * the cascade and the orphan button reappears as a tall pill on the * desktop layout. Mobile rule overrides this with `display: inline-flex` * below — that one is scoped to `body.chimera-filters-mobile` so the * desktop branch never sees it. Same fix for the backdrop. */ .chimera-filters-toggle { display: none !important; } .chimera-filters-backdrop { display: none !important; } @media (max-width: 767px) { body.chimera-filters-mobile .elementor-element-fdebcc8 { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 86vw !important; max-width: 360px !important; height: 100vh !important; z-index: 9999 !important; background: #fff !important; box-shadow: 2px 0 16px rgba(0,0,0,0.18) !important; overflow-y: auto !important; /* v1.0.67 (2026-05-11): force nowrap. Elementor's container default is `flex-wrap: wrap`, which on small iPhone heights (e.g. 375x667) caused children past Categories to wrap into a second column at x=364 — pushing Categories list, Newsletter, etc. off-screen to the right. nowrap lets the drawer scroll naturally instead. */ flex-wrap: nowrap !important; padding: 56px 16px 24px !important; margin: 0 !important; transform: translateX(-100%) !important; transition: transform 0.28s ease !important; } body.chimera-filters-mobile.chimera-filters-open .elementor-element-fdebcc8 { transform: translateX(0) !important; } body.chimera-filters-mobile .chimera-filters-backdrop { display: block !important; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9998; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } body.chimera-filters-mobile.chimera-filters-open .chimera-filters-backdrop { opacity: 1; pointer-events: auto; } body.chimera-filters-mobile .chimera-filters-toggle { display: inline-flex !important; align-items: center; gap: 6px; margin: 0 0 16px 0; padding: 6px 14px 6px 10px; align-self: flex-start; background: transparent; color: #FA4023; border: 1px solid #FA4023; border-radius: 999px; font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; line-height: 1; } body.chimera-filters-mobile .chimera-filters-toggle-icon { width: 12px; height: 12px; display: inline-block; background: linear-gradient(#FA4023, #FA4023) center/12px 1.5px no-repeat, linear-gradient(#FA4023, #FA4023) center 4px/9px 1.5px no-repeat, linear-gradient(#FA4023, #FA4023) center 8px/6px 1.5px no-repeat; } body.chimera-filters-mobile.chimera-filters-open { overflow: hidden; } body.chimera-filters-mobile .elementor-element-fdebcc8::before { content: "FILTERS"; display: block; font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; color: #1a1a1a; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid #eee; position: absolute; top: 18px; left: 16px; right: 50px; } } /* --------------------------------------------------------- * Homepage category row titles BLACK (2026-05-05, v1.0.29). * Panos 2026-05-05: "the title here must be black color". * Targets both desktop row (#0c7ab83) and mobile row (#a46e7e4). * --------------------------------------------------------- */ .elementor-element-0c7ab83 .elementor-heading-title, .elementor-element-0c7ab83 .elementor-heading-title a, .elementor-element-a46e7e4 .elementor-heading-title, .elementor-element-a46e7e4 .elementor-heading-title a, .elementor-element-a46e7e4.chimera-cats-vertical .swiper-slide .elementor-heading-title, .elementor-element-a46e7e4.chimera-cats-vertical .swiper-slide .elementor-heading-title a { color: #111 !important; } .elementor-element-0c7ab83 .elementor-heading-title:hover, .elementor-element-0c7ab83 .elementor-heading-title a:hover, .elementor-element-a46e7e4 .elementor-heading-title:hover, .elementor-element-a46e7e4 .elementor-heading-title a:hover { color: #444 !important; } /* --------------------------------------------------------- * Single product Description / Additional Information tabs: * neutralize red hover (2026-05-05, v1.0.29). * Panos: tab buttons flash a red sticky hover state. Lock the * active tab to brand red, but keep inactive tabs neutral on * hover (no red wash on the white tab). * --------------------------------------------------------- */ .woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active):hover, .woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active):focus, .woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active):hover a, .woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active):focus a { background: transparent !important; color: #222 !important; border-color: #FA4023 !important; box-shadow: none !important; } /* Elementor Pro product tabs widget — same neutralization. */ .elementor-widget-woocommerce-product-data-tabs .e-tabs-items > div:not(.e-active):hover, .elementor-widget-woocommerce-product-data-tabs .e-tabs-wrapper > div:not(.e-active):hover, .elementor-widget-woocommerce-product-data-tabs [role="tab"]:not([aria-selected="true"]):hover, .elementor-widget-woocommerce-product-data-tabs [role="tab"]:not([aria-selected="true"]):focus { background: transparent !important; color: #222 !important; } /* --------------------------------------------------------- * Loop card: title prominent + author eyebrow (2026-05-05, v1.0.33). * Reverted from the v1.0.30 swap. Panos: "the title of the author * should be smaller and less visible than that book title." * Targets Elementor Loop Grid product cards (.e-loop-item). * --------------------------------------------------------- */ .e-loop-item .elementor-widget-woocommerce-product-title .elementor-heading-title, .e-loop-item .elementor-widget-woocommerce-product-title .elementor-heading-title a { font-family: 'Gotham GR', 'Inter', sans-serif !important; font-size: 18px !important; font-weight: 500 !important; letter-spacing: -0.01em !important; text-transform: none !important; color: #111 !important; line-height: 1.3 !important; } .e-loop-item .book-author, .e-loop-item .single-book-author, .e-loop-item .chimera-book-author, .e-loop-item .elementor-widget-shortcode .book-author, .e-loop-item .elementor-widget-shortcode .single-book-author, .e-loop-item .elementor-widget-shortcode .chimera-book-author { font-family: 'Kiona', 'Gotham GR', sans-serif !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: #999 !important; line-height: 1.5 !important; display: block !important; margin: 0 0 6px 0 !important; } @media (max-width: 767px) { .e-loop-item .elementor-widget-woocommerce-product-title .elementor-heading-title, .e-loop-item .elementor-widget-woocommerce-product-title .elementor-heading-title a { font-size: 16px !important; padding: 4px 0 !important; } .e-loop-item .book-author, .e-loop-item .elementor-widget-shortcode .book-author { font-size: 10px !important; letter-spacing: 0.14em !important; } } /* --------------------------------------------------------- * SINGLE PRODUCT — tab buttons polish (2026-05-07, v1.0.51). * Stavroula's design comments: tabs should be identical size * with minimal gap, slightly larger text with tight internal * spacing, and the inactive ("Additional Information") tab * must not flash on hover. The v1.0.29 hover neutralizer only * covered .elementor-widget-woocommerce-product-data-tabs; * the actual widget here is .elementor-widget-n-tabs (Nested * Tabs), which still applied the brand-red hover on inactive. * --------------------------------------------------------- */ /* Tighter row: zero gap between the two tabs. */ html body .elementor-widget-n-tabs .e-n-tabs-heading { gap: 0 !important; } /* Tighter button: 44px tall, larger text, snug padding. */ html body .elementor-widget-n-tabs .e-n-tabs-heading .e-n-tab-title.e-n-tab-title { height: 44px !important; min-height: 44px !important; max-height: 44px !important; padding: 4px 14px !important; line-height: 1.15 !important; } html body .elementor-widget-n-tabs .e-n-tabs-heading .e-n-tab-title .e-n-tab-title-text { font-size: 13px !important; line-height: 1.15 !important; } /* No hover state-change on EITHER tab button (v1.0.54, 2026-05-07). * * v1.0.53 stripped down to only locking background-color, but agent-browser * full-property diff revealed that Elementor's inline :hover rule ALSO sets: * border-style: none (was solid) * border-width: 0px (was 1px) * on the inactive tab. Result: the 1px orange border around the inactive * "Additional Information" pill collapsed to 0 on hover, making the pill's * "surrounding" visibly disappear (Stavroula's report, third iteration). * * v1.0.54 locks border-style and border-width on hover too, so the inactive * border stays at its resting 1px solid. Active tab needs no border lock — * its full-property diff was 0 changes between rest and hover. */ /* Inactive tab — lock background AND the resting 1px solid border on hover. */ html body .elementor-widget-n-tabs.elementor-widget-n-tabs .e-n-tabs[data-touch-mode] .e-n-tabs-heading .e-n-tab-title[aria-selected="false"]:hover, html body .elementor-widget-n-tabs.elementor-widget-n-tabs .e-n-tabs[data-touch-mode] .e-n-tabs-heading .e-n-tab-title[aria-selected="false"]:focus, html body .elementor-widget-n-tabs.elementor-widget-n-tabs .e-n-tabs[data-touch-mode] .e-n-tabs-heading .e-n-tab-title[aria-selected="false"]:focus-visible { background-color: #fff !important; border-style: solid !important; border-width: 1px !important; } /* Active tab — lock hover background to brand red (matches Elementor resting). */ html body .elementor-widget-n-tabs.elementor-widget-n-tabs .e-n-tabs[data-touch-mode] .e-n-tabs-heading .e-n-tab-title[aria-selected="true"]:hover, html body .elementor-widget-n-tabs.elementor-widget-n-tabs .e-n-tabs[data-touch-mode] .e-n-tabs-heading .e-n-tab-title[aria-selected="true"]:focus, html body .elementor-widget-n-tabs.elementor-widget-n-tabs .e-n-tabs[data-touch-mode] .e-n-tabs-heading .e-n-tab-title[aria-selected="true"]:focus-visible { background-color: #D94F30 !important; } /* Kill the transition so any tiny remaining state-change is paint-instant * (no flash). Applies to both tab variants, both pseudo-states. */ html body .elementor-widget-n-tabs.elementor-widget-n-tabs .e-n-tabs[data-touch-mode] .e-n-tabs-heading .e-n-tab-title, html body .elementor-widget-n-tabs.elementor-widget-n-tabs .e-n-tabs[data-touch-mode] .e-n-tabs-heading .e-n-tab-title .e-n-tab-title-text { transition: none !important; } /* --------------------------------------------------------- * SHOP SIDEBAR — hide 2 divider lines on PRETTY THINGS only * (2026-05-07, v1.0.57; was site-wide in v1.0.52, scoped now). * * v1.0.52 hid the two Elementor divider widgets `ff70339` and * `4a9f3bd` site-wide because the screenshot was from * /product-category/pretty-things/. v1.0.57 found out the books * archive USES those dividers as section breaks (Filter by price * → Categories → Newsletter signup) and Stavroula wants them * back on books pages. Pretty-things has no Categories sub-list * to break up, so the dividers there land on empty space and * read as visual noise. * * Scope the hide to `body.term-pretty-things` only. Books page * (`body.term-books`) and other archives keep the dividers. * --------------------------------------------------------- */ body.term-pretty-things .elementor-element.elementor-element-ff70339, body.term-pretty-things .elementor-element.elementor-element-4a9f3bd { display: none !important; } /* --------------------------------------------------------- * MOBILE — also hide the same Categories/Newsletter dividers * inside the off-canvas FILTERS drawer on every archive * (2026-05-14, v1.0.80). The desktop sidebar keeps them as * section breaks per Stavroula's v1.0.57 ask, but on mobile * the drawer sections are already separated by spacing alone * and the lines read as noise (Panos design pass 2026-05-14). * --------------------------------------------------------- */ @media (max-width: 767px) { .elementor-element.elementor-element-ff70339, .elementor-element.elementor-element-4a9f3bd { display: none !important; } } /* --------------------------------------------------------- * SHOP / CATEGORY ARCHIVE — DESKTOP-ONLY sidebar slim down * (2026-05-07 v1.0.59, scope-tightened 2026-05-11 v1.0.66). * Was `(min-width: 768px)` which leaked into iPad widths and * fought the tablet sidebar layout. Scoped to ≥1200 so the * 768-1199 tablet block (above) controls iPad-range sidebar + * grid sizing. * --------------------------------------------------------- */ @media (min-width: 1200px) { .elementor-element.elementor-element-bec8b20 > .elementor-element-fdebcc8 { flex: 0 0 240px !important; width: 240px !important; max-width: 240px !important; padding-right: 24px !important; } .elementor-element.elementor-element-bec8b20 > .elementor-element-5c31790 { flex: 1 1 auto !important; min-width: 0 !important; } /* v1.0.60: stretch the 3-column books grid to fill the products * container. Earlier rule used 240px fixed columns which left ~387px * slack inside the 813px container. `1fr` makes each column expand. */ .elementor-element.elementor-element-5c31790 .elementor-loop-container, .elementor-element.elementor-element-5c31790 .elementor-grid, .elementor-element.elementor-element-5c31790 .elementor-products .products { grid-template-columns: repeat(3, 1fr) !important; } } /* --------------------------------------------------------- * TABLET FLEX-DIRECTION OVERRIDE (2026-05-11, v1.0.66). * Elementor's container system uses `--flex-direction` CSS * variables and toggles them at the tablet breakpoint based on * the widget's responsive setting. Raw `flex-direction: row` * loses to that cascade, so we override the variable itself. * --------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1199px) { .elementor-location-archive .elementor-element.elementor-element-bec8b20.e-con { --flex-direction: row !important; --container-widget-width: initial !important; flex-direction: row !important; flex-wrap: nowrap !important; } } /* ===================================================================== * SHOP — LANGUAGE FILTER (v1.0.63, 2026-05-11) * Renders below the price slider on /product-category/books/ and its * subcategories. Mirrors the visual rhythm of "Filter by price". * ===================================================================== */ .chimera-language-filter { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(0, 0, 0, 0.08); } .chimera-language-filter-title { font-family: "Gothic A1", sans-serif; font-size: 16px; font-weight: 300; letter-spacing: 0.04em; text-transform: none; margin: 0 0 10px; color: inherit; } .chimera-language-filter-list { list-style: none; margin: 0; padding: 0; } .chimera-language-filter-list li { margin: 0; padding: 0; line-height: 1.5; } .chimera-language-filter-list a { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 4px 0; text-decoration: none; color: inherit; font-family: "Gothic A1", sans-serif; font-size: 14px; font-weight: 300; } .chimera-language-filter-list a:hover { text-decoration: underline; } .chimera-language-filter-list li.is-active a { font-weight: 500; } .chimera-language-filter-list li.is-active a::before { content: "✕"; display: inline-block; margin-right: 6px; font-size: 11px; opacity: 0.7; } .chimera-language-filter-list .count { opacity: 0.55; font-size: 13px; } /* Mobile filter drawer: keep the same look inside the slide-in. */ @media (max-width: 767px) { body.chimera-filters-open .chimera-language-filter { margin-top: 20px; } } /* ===================================================================== * v1.0.68 (2026-05-12) — MOBILE POLISH BATCH 2 from Stavroula 2026-05-11 * * Three issues she reported on the iPhone view: * (a) hero banners (home + every category page) sit small + centred * inside their pink container, leaving wide whitespace bands on * both sides ("απλά μένουν στο κέντρο"). They should fill the * viewport width. * (b) loop product cards on /books/ + sub-categories render in the * wrong order: AUTHOR → PRICE → IMAGE → TITLE. Root cause: the * Elementor composite that holds author + price (#fd51087) has * `--order: -1` set in the Elementor editor for desktop intent * (author eyebrow above title). On mobile the composite ALSO * contains the price, so the negative order pulls both above the * cover. Reset --order to 0 on phone widths so DOM order takes * over: image → title → author → price. * (c) homepage category swiper-slides were marked `inert` by Swiper * — fixed in functions.php applyHomepageCategoryList(), no CSS * needed here. Recorded for cross-reference. * ===================================================================== */ @media (max-width: 767px) { /* (a) Hero banners — full-width on mobile. * Targets: * #f95a8a5 = home hero ("BOOKWORM but make it RADICAL") * #abe1a24 = shared category-page banner * ("NO BINARIES NO BORDERS JUST BOOKS" / pretty-things variant) * Each banner widget sits as the ONLY child of a section container * (#aef2da3 on home, #a2ec6e7 on category pages); that section has * 20px left/right padding that was leaving the banner boxed inward. * Zero out section padding (safe — verified each section only * holds the banner image) AND override the image widget's inline * width so the banner fills 100% of the viewport. */ /* Specificity note: Elementor injects an inline page rule * `.e-con.e-parent { padding-left: 20px !important; padding-right: 20px !important }` * at @media (max-width: 767px). That's 2 class-spec; the bare * `.elementor-element-aef2da3 { padding: 0 !important }` from the * earlier attempt was only 1 class-spec and lost. Chain the * banner section's own class hooks (elementor-element + * elementor-element-aef2da3 + e-con-full + e-con + e-parent + * e-flex = 6) to beat the 2-class baseline cleanly. */ .elementor-element.elementor-element-aef2da3.e-con.e-con-full.e-parent.e-flex, .elementor-element.elementor-element-a2ec6e7.e-con.e-con-full.e-parent.e-flex { padding-left: 0 !important; padding-right: 0 !important; } .elementor-element-f95a8a5, .elementor-element-f95a8a5 .elementor-widget-container, .elementor-element-abe1a24, .elementor-element-abe1a24 .elementor-widget-container { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; max-width: 100% !important; } .elementor-element-f95a8a5 img, .elementor-element-abe1a24 img { width: 100% !important; max-width: 100% !important; height: auto !important; display: block !important; margin: 0 !important; } /* (b) Loop card mobile order — image first, then title, then * author + price. The composite #fd51087 holds author (text-editor) * and price (woocommerce-product-price) together; pushing the * composite to the end of the flex stack restores natural reading * order on phones without breaking the desktop eyebrow layout. * * Specificity note: Elementor injects an inline page rule * `.elementor-305 .e-con.e-parent > .e-con:last-child { order: -1 !important }` * (5 class-spec; pulls the LAST e-con sibling above the rest). * Our previous `.e-loop-item .elementor-element-fd51087` only has * 2 class-spec and lost the cascade. Chain the composite's own * class hooks (e-con + e-con-full + e-flex + elementor-element + * elementor-element-fd51087 = 5) plus the .e-loop-item ancestor * (= 6 total) to win. */ .e-loop-item .elementor-element.elementor-element-fd51087.e-con.e-con-boxed.e-flex.e-child { --order: 2 !important; order: 2 !important; } /* Belt-and-suspenders: pin the cover and title at the top of the * stack (default order is 0; we want them BEFORE the composite). */ .e-loop-item .elementor-widget-theme-post-featured-image { --order: 0 !important; order: 0 !important; } .e-loop-item .elementor-widget-woocommerce-product-title { --order: 1 !important; order: 1 !important; } } /* ===================================================================== * v1.0.70 (2026-05-12) — SINGLE PRODUCT MOBILE RESTRUCTURE * * Stavroula 2026-05-03 (single product, comment #3): * "Βλέποντας οποιοδήποτε βιβλίο έχουμε συγγραφέα, τίτλο, ξανά * συγγραφέα, σελίδες κτλ. και μετά SKU, category. Αρχικά να έχουμε * τον συγγραφέα μόνο μία φορά, και επίσης το SKU, category είναι * μεγαλύτερο από τον συγγραφέα κτλ. Θα έπρεπε να είναι αντίστροφο * το μέγεθος δηλαδή. Αλλιώς ας μικρύνει και το SKU γιατί τώρα πάει * εκεί το μάτι κατευθείαν χωρίς λόγο." * * Author-once already shipped (book-author shortcode renders once at * top). Remaining: SKU + Category are visually heavier than the author * line on mobile (Categories renders at 17px / 600, vs author at 16px * / 400). Plus Panos 2026-05-12: full mobile restructure to put image * → title → author → format/pages → price + ADD TO CART → Description * → SKU + Category (smaller, at the bottom). * * Widget IDs verified live on /product/1984/ (mobile 390×844): * b3e00bc = product images * e7009ff = title+author wrapper (flex column) * 43e4644 = title (woocommerce-product-title, "1984") * e7f5605 = book-author shortcode ("by George Orwell") * f24706f = info column wrapper (flex column) * b49f523 = short-description ("Paperback · 314 pages") * d627c50 = SKU+Category wrapper * 02a403e = SKU text-editor * c4ec793 = Categories text-editor * 1433305 = horizontal divider * 6082faa = price text-editor * a7d59e3 = add-to-cart (qty + Buy + Wishlist) * 03a776c = section that wraps the description tabs widget * * The d627c50 (SKU+Category) sub-tree is moved DOM-wise via JS in * functions.php (applySingleProductMobileReorder) to sit AFTER the * description tabs section, since it lives in a different sibling * tree than 03a776c and CSS `order` cannot reach across parents. * Everything else fits inside its existing parent flex container, * so plain `order` does the work below. * ===================================================================== */ @media (max-width: 767px) { /* (1) e7009ff = title+author. Today renders author first (DOM * order). Swap so title comes first, then "by Author" eyebrow. */ .elementor-element.elementor-element-43e4644 { --order: 1 !important; order: 1 !important; } .elementor-element.elementor-element-e7f5605 { --order: 2 !important; order: 2 !important; } /* Title and author widgets render with width:max-content on mobile * (the same Elementor responsive default that shrinks the related- * loop title to 112px). Force them full width so spacing reads * correctly and any future text-align changes take visible effect. */ .elementor-element.elementor-element-43e4644, .elementor-element.elementor-element-e7f5605 { width: 100% !important; max-width: 100% !important; } /* (2) Hide horizontal dividers on mobile — in the restacked layout * they land as visual noise between widgets: * • 1433305 = info-column divider (was between SKU/Cat and price * in the original layout; now stacked elsewhere) * • 7fec330 = post-cart divider (sits between Add-to-Wishlist * and the Related Products heading on mobile; Panos * 2026-05-12: "fix the line issue") */ .elementor-element.elementor-element-1433305, .elementor-element.elementor-element-7fec330 { display: none !important; } /* (3) f24706f = info column. After divider is hidden and the * description-tabs widget (#bf37ba2) is moved IN by JS, the desired * order top-to-bottom is (v1.0.78, 2026-05-12, Panos re-correction: * meta info gets pushed UNDER the description tab — above we keep * only title + author + price as the "buy decision" cluster, then * description tells the story, then the meta details, then cart): * 0. e7009ff title+author wrapper (default order 0) * 1. 6082faa price * 2. bf37ba2 description tabs (moved from #03a776c — see JS) * 3. b49f523 short-description (Paperback · 314 pages) * 4. d627c50 Category + SKU wrapper * 5. a7d59e3 add-to-cart + wishlist */ .elementor-element.elementor-element-6082faa { --order: 1 !important; order: 1 !important; } .elementor-element.elementor-element-bf37ba2 { --order: 2 !important; order: 2 !important; } .elementor-element.elementor-element-b49f523 { --order: 3 !important; order: 3 !important; } .elementor-element.elementor-element-d627c50 { --order: 4 !important; order: 4 !important; } .elementor-element.elementor-element-a7d59e3 { --order: 5 !important; order: 5 !important; } /* Inside d627c50: Category first ("πρώτα το general"), SKU second. */ .elementor-element.elementor-element-c4ec793 { --order: 1 !important; order: 1 !important; } .elementor-element.elementor-element-02a403e { --order: 2 !important; order: 2 !important; } /* (4) SKU + Category typography — Stavroula's specific complaint. * Current: SKU 13px / 400 (already small), but Categories renders at * 17px / 600 (BOLD, bigger than author 16px / 400). Shrink both so * neither outweighs the author line. Dim color slightly so the eye * skips them at first scan. */ /* SKU + Category typography (v1.0.75, 2026-05-12 Panos correction). * Earlier v1.0.72 made both 12px/400/#888 — Panos: "the general * must be more stylized, with the bold, not what you have just put * there". Split treatment: * • Category (c4ec793) — keep BOLD weight (600) but drop from * 17px → 13px so it doesn't tower over the author line (16px), * and use a darker neutral (#444) so the bold still reads as * emphasis rather than fading muted gray. * • SKU (02a403e) — stays small and dim (12px / 400 / #888). * A reference number, not a design beat. */ body.single-product .elementor-element.elementor-element-c4ec793.elementor-widget, body.single-product .elementor-element.elementor-element-c4ec793.elementor-widget * { font-size: 13px !important; font-weight: 600 !important; color: #444 !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; line-height: 1.5 !important; } body.single-product .elementor-element.elementor-element-02a403e.elementor-widget, body.single-product .elementor-element.elementor-element-02a403e.elementor-widget * { font-size: 12px !important; font-weight: 400 !important; color: #888 !important; letter-spacing: 0.02em !important; line-height: 1.5 !important; } /* SKU+Category wrapper — keep it tight so it reads as a single * compact eyebrow group between paperback and price. */ .elementor-element.elementor-element-d627c50 { padding-top: 10px !important; padding-bottom: 14px !important; gap: 2px !important; } /* (6) Description tab content — was 17px / 1.7 line-height which * reads as long-form essay copy. Drop to 14px / 1.6 for mobile so * the tab fits more lines on screen and the price/add-to-cart * pairing below stays within thumb reach. */ body.single-product .elementor-element.elementor-element-bf37ba2 .e-n-tab-content, body.single-product .elementor-element.elementor-element-bf37ba2 .e-n-tab-content p, body.single-product .elementor-element.elementor-element-bf37ba2 .elementor-widget-text-editor, body.single-product .elementor-element.elementor-element-bf37ba2 .elementor-widget-text-editor p, body.single-product .elementor-element.elementor-element-bf37ba2 .elementor-widget-woocommerce-product-content, body.single-product .elementor-element.elementor-element-bf37ba2 .elementor-widget-woocommerce-product-content p, body.single-product .elementor-element.elementor-element-bf37ba2 .woocommerce-Tabs-panel, body.single-product .elementor-element.elementor-element-bf37ba2 .woocommerce-Tabs-panel p { font-size: 14px !important; line-height: 1.6 !important; } /* (7) Add-to-Cart + Wishlist buttons — harmonize so they read as a * matched pair. Today: ADD TO CART is a solid red rectangle (13px, * br: 2px, no vertical padding); Wishlist is a transparent text * link at 16px with no border. Visual mismatch. Fix: * • Cart: bump vertical padding so it reads as a real button. * • Wishlist: same padding, same border-radius, transparent fill * with red border to mirror the cart rectangle as an "outline * variant" of the same button family. * Same font-size, weight, and tracking on both. */ body.single-product .elementor-element.elementor-element-a7d59e3 .single_add_to_cart_button { padding: 14px 24px !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; border-radius: 2px !important; width: 100% !important; } /* Wishlist outer wrapper — reset (was getting a duplicate border * because the inner anchor also gets button styling below). */ body.single-product .elementor-element.elementor-element-a7d59e3 .tinv-wraper.tinv-wishlist { display: block !important; border: 0 !important; background: transparent !important; padding: 0 !important; margin: 12px 0 0 0 !important; width: 100% !important; border-radius: 0 !important; } /* The actual button-shaped element: the inner anchor. Matches the * cart rectangle as an "outline variant" of the same button family. */ body.single-product .elementor-element.elementor-element-a7d59e3 .tinvwl_add_to_wishlist_button { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 13px 24px !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; border: 1px solid #D94F30 !important; background: transparent !important; color: #D94F30 !important; border-radius: 2px !important; width: 100% !important; text-decoration: none !important; box-sizing: border-box !important; } /* (8) Compact symmetric rhythm (v1.0.78 — Panos: "more compact but * still symmetrical"). Was 16px between every widget; drop to 10px * so the page feels tighter and the buy-decision cluster reads as * one block. The title+author wrapper gets an even shorter gap so * the author eyebrow hugs the title. */ .elementor-element.elementor-element-f24706f > .e-con-inner > .elementor-element { margin-bottom: 10px !important; } .elementor-element.elementor-element-f24706f > .e-con-inner > .elementor-element:last-child { margin-bottom: 0 !important; } /* Title→author: zero gap on the flex parent + collapse the author * widget's own top margin/padding so the eyebrow sits right under * the title, no whitespace between them. */ .elementor-element.elementor-element-e7009ff { gap: 0 !important; } .elementor-element.elementor-element-e7f5605 { margin-top: 0 !important; padding-top: 0 !important; } .elementor-element.elementor-element-e7f5605 .elementor-widget-container { margin-top: -4px !important; } /* Trim the bottom-of-title space so author lifts up visually. */ .elementor-element.elementor-element-43e4644 { margin-bottom: 0 !important; } .elementor-element.elementor-element-43e4644 .elementor-heading-title { margin-bottom: 0 !important; } /* (5) Related products card title — same width:max-content quirk as * the single-product title above. The widget has text-align:center * already, but with width:112px sitting at x=20 the centered text * looks left-aligned. Force full width so the center alignment * actually centers visually. Applies to all loop cards (e-loop-item), * which covers Related Products + any future loop grids. */ .e-loop-item .elementor-widget.elementor-widget-woocommerce-product-title { width: 100% !important; max-width: 100% !important; } .e-loop-item .elementor-widget.elementor-widget-woocommerce-product-title .elementor-widget-container, .e-loop-item .elementor-widget.elementor-widget-woocommerce-product-title h1, .e-loop-item .elementor-widget.elementor-widget-woocommerce-product-title h2, .e-loop-item .elementor-widget.elementor-widget-woocommerce-product-title h3 { width: 100% !important; } /* (9) Single product cover image — Panos 2026-05-12: "this image * doesn't have the right dimensions on mobile view". WooCommerce's * default single-product image size is the `woocommerce_single` * thumbnail (265×353 here) but FlexSlider scales it up to 334×445 * to fill the gallery wrapper width, producing a soft/blurry render * and a tall wrapper that pushes the title further down. * * Cap the rendered image at its natural width so it stays sharp, * center it, and release the FlexSlider-imposed fixed wrapper * height so the wrapper hugs the image instead of leaving dead * vertical space. */ body.single-product .elementor-element.elementor-element-b3e00bc .woocommerce-product-gallery__wrapper, body.single-product .elementor-element.elementor-element-b3e00bc .woocommerce-product-gallery__image, body.single-product .elementor-element.elementor-element-b3e00bc .woocommerce-product-gallery__image a { height: auto !important; max-width: 100% !important; } body.single-product .elementor-element.elementor-element-b3e00bc .woocommerce-product-gallery { padding: 0 !important; } body.single-product .elementor-element.elementor-element-b3e00bc img { width: auto !important; max-width: min(280px, 80%) !important; height: auto !important; display: block !important; margin: 0 auto !important; } } /* --------------------------------------------------------- * SINGLE PRODUCT — tab buttons polish v1.0.80 (2026-05-14). * Panos design pass: existing v1.0.51/v1.0.54 left button * heights matched (44px both), but visual mass and typography * were off: * - Active had border 0px (filled), inactive had 1px solid * orange → same outer height but jumpy weight on switch. * - Labels rendered "D e s c r i p t i o n" because * letter-spacing was 2px on a 10px font — too shouty for * a sub-tab inside a product page; read like a promo * banner instead of a quiet section toggle. * * Fix: lock 1px solid border on BOTH states (active + inactive) * so the visual frame is constant. Drop font to 12px / spacing * 0.04em / weight 500 — readable, calm, on-brand. Also kill * the post-tap blue focus ring (keep keyboard focus-visible). * --------------------------------------------------------- */ html body .elementor-widget-n-tabs .e-n-tabs-heading .e-n-tab-title.e-n-tab-title { height: 40px !important; min-height: 40px !important; max-height: 40px !important; padding: 0 14px !important; border: 1px solid #D94F30 !important; } html body .elementor-widget-n-tabs .e-n-tabs-heading .e-n-tab-title[aria-selected="true"] { background-color: #D94F30 !important; color: #fff !important; border-color: #D94F30 !important; } html body .elementor-widget-n-tabs .e-n-tabs-heading .e-n-tab-title[aria-selected="false"] { background-color: #fff !important; color: #D94F30 !important; border-color: #D94F30 !important; } /* Lock active hover too — earlier rule only touched bg, but the * active border collapsed to 0px on hover. Hold it at 1px. */ html body .elementor-widget-n-tabs.elementor-widget-n-tabs .e-n-tabs[data-touch-mode] .e-n-tabs-heading .e-n-tab-title[aria-selected="true"]:hover, html body .elementor-widget-n-tabs.elementor-widget-n-tabs .e-n-tabs[data-touch-mode] .e-n-tabs-heading .e-n-tab-title[aria-selected="true"]:focus, html body .elementor-widget-n-tabs.elementor-widget-n-tabs .e-n-tabs[data-touch-mode] .e-n-tabs-heading .e-n-tab-title[aria-selected="true"]:focus-visible { background-color: #D94F30 !important; border-style: solid !important; border-width: 1px !important; border-color: #D94F30 !important; } html body .elementor-widget-n-tabs .e-n-tabs-heading .e-n-tab-title .e-n-tab-title-text { font-size: 12px !important; letter-spacing: 0.04em !important; line-height: 1.2 !important; font-weight: 500 !important; } /* v1.0.81: Elementor sets a per-widget literal font-size/letter-spacing in * an inline