/* ========================================================================== Product page redesign ========================================================================== */ :root { --cnc-accent: #d21b8a; --cnc-accent-dark: #a3187f; --cnc-accent-rgb: 210, 27, 138; --cnc-purple: #8e3a9e; --cnc-text: #2b2340; --cnc-muted: #8a809a; --cnc-border: #ececf3; --cnc-tint: #faf3fb; --cnc-tint2: #fdeef6; --cnc-green: #1f9d45; --cnc-radius: 20px; --cnc-shadow: 0 16px 40px rgba(90, 30, 90, .10); } /* -------------------------------------------------------------------------- Page width -------------------------------------------------------------------------- */ /* The theme serves single-product as a "full width" layout (no boxed container) -- fine for Elementor pages, which set their own inner max-width, but this raw WooCommerce template has none of its own, so content was stretching edge-to-edge instead of matching the ~1240px content width every other page on the site uses (see archive-product.php .cnc-cat .wrap). content-single-product.php wraps everything in .cnc-product-wrap for this to hang off of. */ .cnc-product-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; } /* The catalog page (archive-product.php) explicitly paints its whole canvas #f4f1f7. First attempt here set that on -- no visible effect, because the theme's own ".wrapper" div (a direct child of body, full viewport width/height) paints a solid opaque white OVER the body background on every page, so body's own colour is never actually visible. ".wrapper" itself is what needs the colour, scoped to single-product only so every other (correctly white) page is untouched. */ body.single-product .wrapper { background: #f4f1f7 !important; } /* The breadcrumb bar paints its own explicit white background on top of that (.breadcrumb-content.container -- measured live: rgb(255,255,255)), leaving a white strip above the now-tinted content. Match it too. */ body.single-product .breadcrumb-title-wrapper, body.single-product .breadcrumb-content { background: #f4f1f7 !important; } /* The theme's own #product- element is a flex column (gallery+summary card, tabs, related products) with its own ~80px gap between each direct child -- measured live via getComputedStyle. That was fine while the "Чому ми?" section sat between the gallery/summary card and the tabs (two 80px gaps, each reasonable on its own), but with that section removed it collapsed into a single 80px gap that reads as a big empty band. Tighten it to match the rest of the page's card spacing. */ body.single-product .product.type-product { gap: 28px !important; } /* The breadcrumb bar is output by the theme's own single-product hook, which runs BEFORE our template (and .cnc-product-wrap) even starts -- so it was rendering in the theme's own ~1340px container instead of our narrower 1240px content width, starting noticeably further left than the gallery card below it. Measured live: our wrap sits at x:100 w:1240 on a 1440px viewport; the breadcrumb's inner box sat at x:50 w:1340. Centering it to the same 1240px max-width aligns both exactly. */ body.single-product .breadcrumb-title { max-width: 1240px !important; margin: 0 auto !important; } /* On mobile the full crumb trail (Home › root category › ... › current product) wrapped onto 3-4 lines, since the theme renders every crumb as a plain inline-block with no per-item wrapper to collapse -- the parent theme's own CSS forces `.breadcrumbs-container *{display:inline-block}`. Turn it into a single horizontally-scrollable line instead: the full trail stays reachable by swipe (nothing removed from the DOM), and each overly long crumb (a long category name, the product title itself) truncates with an ellipsis so one crumb alone can't blow out the row. The product's full name is already shown right below as the H1, so losing the tail of the *breadcrumb's* copy of it costs nothing. First attempt (overflow-x:auto on .breadcrumbs-container alone) instead dragged the WHOLE PAGE sideways on swipe, live-confirmed via a custom diagnostic: .breadcrumbs-container measured 1206px wide on a 390px viewport -- a classic CSS Grid "blowout". .breadcrumb-title (the ancestor two levels up) is `display:grid`, and a grid item's default min-width is `auto`, which resolves to its content's max-content size, not 0 -- so the unwrapped breadcrumb text forced the grid item (.breadcrumbs) to size to its full content width and spill out past the grid's own box (unclipped, since overflow:visible), instead of shrinking to the available track width the way overflow-x:auto on the inner div needed to actually kick in. `min-width: 0` on that grid item is the standard fix -- it lets the track (and therefore everything inside it) shrink to the viewport, so the scrolling stays contained to the breadcrumb strip instead of escaping to the page. */ @media (max-width: 768px) { body.single-product .breadcrumb-title-wrapper .breadcrumbs { min-width: 0; } body.single-product .breadcrumb-title-wrapper .breadcrumbs-container { display: block; width: 100%; min-width: 0; white-space: nowrap; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body.single-product .breadcrumb-title-wrapper .breadcrumbs-container::-webkit-scrollbar { display: none; } body.single-product .breadcrumb-title-wrapper .breadcrumbs-container a, body.single-product .breadcrumb-title-wrapper .breadcrumbs-container span.current { display: inline-block; max-width: 55vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } } /* -------------------------------------------------------------------------- Image + summary layout -------------------------------------------------------------------------- */ .product-images-summary { grid-template-columns: 52% 48% !important; align-items: start !important; gap: 34px !important; } @media (max-width: 991px) { .product-images-summary { grid-template-columns: 100% !important; gap: 24px !important; } /* On mobile the gallery and summary stack vertically, so their own margins stack ON TOP of the grid's 24px gap above instead of collapsing into it (margins never collapse across grid items) -- live-measured via a debug dump: .cnc-product-summary carried a 30px margin-top from the parent theme's responsive.css (body.woocommerce div.product div.summary{margin-top:30px}), and .rtwpvg-images carried a 30px margin-bottom from the gallery plugin's own admin-configurable spacing option (rendered inline as :root{--rtwpvg-gallery-margin-bottom:30px}), together adding up to an ~84px gap instead of the intended 24px. Zero both out here so the grid gap is the single source of truth for this spacing. */ #page .cnc-product-summary, #page div.product .cnc-product-summary { margin-top: 0 !important; } .rtwpvg-images { margin-bottom: 0 !important; } } .woocommerce-product-gallery { margin: 0; background: #fff; border: 1px solid var(--cnc-border); border-radius: var(--cnc-radius); box-shadow: var(--cnc-shadow); overflow: hidden; } /* rtwpvg's main slider runs Swiper with autoHeight:true, which measures the active slide's own rendered height via JS and sets it as an inline style -- for a tall/narrow product shot (e.g. a wall coat rack) that's a short measurement, so the gallery card shrank to whatever that photo implied instead of filling its grid column, leaving a dead gap next to the summary card. A first attempt only fixed the *inner* image container's aspect-ratio, which Swiper's own JS-set inline height on .swiper-wrapper/.swiper-slide could still fight (and did, intermittently, depending on a given photo's proportions -- fine for a landscape shot, badly squashed for others). !important on every element in that chain is what actually beats a JS-set inline style, so apply the fixed square stage there too, and use cover (matching the crop-to-fill treatment the catalog's own product cards already use) instead of contain so the photo always fills the stage with no letterboxing to get wrong. */ .rtwpvg-slider.swiper, .rtwpvg-slider .swiper-wrapper, .rtwpvg-slider .swiper-slide, .rtwpvg-gallery-image, .rtwpvg-single-image-container { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; } .rtwpvg-images, .rtwpvg-wrapper, .rtwpvg-container, .rtwpvg-slider-wrapper, .rtwpvg-slider { width: 100% !important; max-width: 100% !important; } /* Found via a live computed-style dump: the parent theme itself sets .rtwpvg-images{max-width:46%} (presumably for some other layout this gallery markup is also used in) -- as a percentage on a CSS Grid item, that resolves against the grid AREA .rtwpvg-images occupies, not the whole row, so it silently clamped the gallery to 46% of its own already-52%-wide column (~285px) regardless of every width:100% !important above, since max-width always wins over width at equal specificity. That's the actual root cause of the dead gap next to the summary card -- the square-stage rules were a real fix for a different, smaller problem (the box's aspect ratio) but couldn't undo this. */ .rtwpvg-images { max-width: none !important; } .rtwpvg-single-image-container { display: flex !important; align-items: center; justify-content: center; overflow: hidden; background: #fff; } .rtwpvg-single-image-container img.rtwpvg-post-image { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; aspect-ratio: auto !important; } .woocommerce-product-gallery img { border-radius: 0; } .rtwpvg-images { background: #fff; border: 1px solid var(--cnc-border); border-radius: var(--cnc-radius); box-shadow: var(--cnc-shadow); overflow: hidden; } .rtwpvg-images .rtwpvg-slider-wrapper img { border-radius: 0; } /* Breadcrumb title is shown in the product summary instead. */ .single-product .breadcrumb-title-wrapper .heading-title.page-title { display: none; } .single-product .breadcrumb-title-wrapper .breadcrumbs { font-size: 13px; color: var(--cnc-muted); } .single-product .breadcrumb-title-wrapper .breadcrumbs a:hover { color: var(--cnc-accent-dark); } #page .cnc-product-summary, #page div.product .cnc-product-summary { padding: 24px 26px !important; background: #fff; border: 1px solid var(--cnc-border); border-radius: var(--cnc-radius); box-shadow: var(--cnc-shadow); display: flex !important; flex-direction: column !important; gap: 0; width: auto; margin-bottom: 0; } @media (max-width: 991px) { #page .cnc-product-summary, #page div.product .cnc-product-summary { padding: 20px 18px !important; } } /* -------------------------------------------------------------------------- Title / availability / SKU -------------------------------------------------------------------------- */ #page .cnc-product-summary .cnc-product-title { font-size: 25px; font-weight: 700; line-height: 1.25; color: var(--cnc-text); margin: 0 0 10px; } #page .cnc-product-summary .cnc-product-meta-top { display: flex; align-items: center; gap: 20px; font-size: 14px; margin: 0 0 14px; flex-wrap: wrap; } #page .cnc-product-summary .cnc-availability { display: inline-flex; align-items: center; gap: 8px; color: var(--cnc-green); font-weight: 600; font-size: 14.5px; } #page .cnc-product-summary .cnc-availability-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cnc-green); display: inline-block; } #page .cnc-product-summary .cnc-availability.out-of-stock, #page .cnc-product-summary .cnc-availability.out-of-stock .cnc-availability-dot { background: #d32f2f; color: #d32f2f; } #page .cnc-product-summary .cnc-sku { display: inline-flex; align-items: center; gap: 6px; color: var(--cnc-muted); font-size: 13.5px; } #page .cnc-product-summary .cnc-sku-label::after { content: ':'; } /* -------------------------------------------------------------------------- Buy block: price, wishlist heart and the cart row share one grid so the heart can move to a different cell on mobile (see the media query on .cnc-cart-row below) without duplicating the wishlist markup. Desktop: price spans the full width; cart-row and the heart share the row below it, heart pinned to a fixed-width column on the right -- visually identical to the heart sitting at the end of the cart row. -------------------------------------------------------------------------- */ #page .cnc-product-summary .cnc-buy-block { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "price price" "cart wish"; align-items: start; gap: 12px; } #page .cnc-product-summary .cnc-buy-block .cnc-price-row { grid-area: price; } #page .cnc-product-summary .cnc-buy-block .cnc-cart-row { grid-area: cart; } #page .cnc-product-summary .cnc-buy-block .cnc-wishlist-btn { grid-area: wish; } /* -------------------------------------------------------------------------- Price -------------------------------------------------------------------------- */ #page .cnc-product-summary .cnc-price-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0; padding-bottom: 16px; border-bottom: 1px solid var(--cnc-border); } #page .cnc-product-summary .cnc-price-wrap .price, #page .cnc-product-summary .cnc-price-wrap .price.hidden { display: inline-flex !important; align-items: center; gap: 10px; font-size: 30px; font-weight: 800; color: var(--cnc-accent); margin: 0; line-height: 1.2; } #page .cnc-product-summary .cnc-price-wrap .price ins { order: 1; text-decoration: none; } #page .cnc-product-summary .cnc-price-wrap .price del { order: 2; font-size: 17px; color: var(--cnc-muted); font-weight: 400; text-decoration: line-through; } #page .cnc-product-summary .cnc-price-wrap .price .amount { font-size: 30px; font-weight: 800; color: var(--cnc-accent); font-family: inherit; } #page .cnc-product-summary .cnc-price-wrap .price ins .amount { font-size: 30px; font-weight: 800; color: var(--cnc-accent); font-family: inherit; } #page .cnc-product-summary .cnc-price-wrap .price del .amount { color: var(--cnc-muted); font-size: 17px; font-weight: 400; } #page .cnc-product-summary .cnc-savings-badge { display: inline-block; background: var(--cnc-tint2); color: var(--cnc-accent-dark); font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 30px; } #page .cnc-product-summary .cnc-savings-badge .amount, #page .cnc-product-summary .cnc-savings-badge .woocommerce-Price-amount { color: var(--cnc-accent-dark) !important; } /* -------------------------------------------------------------------------- Variations / attributes — woo-variation-swatches output -------------------------------------------------------------------------- */ #page .cnc-product-summary .variations { width: 100%; border: 0; margin: 0 0 4px; } #page .cnc-product-summary .variations tbody, #page .cnc-product-summary .variations tr, #page .cnc-product-summary .variations th, #page .cnc-product-summary .variations td { display: block; width: 100%; padding: 0; text-align: left; } #page .cnc-product-summary .variations, #page .cnc-product-summary .variations tbody, #page .cnc-product-summary .variations tr { display: block; } #page .cnc-product-summary .variations th.label { display: block; padding: 0; font-weight: 600; font-size: 13.5px; color: var(--cnc-muted); margin: 0 0 9px; } #page .cnc-product-summary .variations th.label label { font-weight: 600; } #page .cnc-product-summary .variations th.label label::after { content: ':'; margin-left: 2px; } #page .cnc-product-summary .variations td.value { display: block; padding: 0; margin: 0 0 16px; } #page .cnc-product-summary .variations td.value select, #page .cnc-product-summary .variations td.value .reset_variations { display: none !important; } #page .cnc-product-summary .variable-items-wrapper { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; } #page .cnc-product-summary .variable-item { width: auto !important; height: auto !important; margin: 0 !important; box-shadow: none !important; outline: none !important; } #page .cnc-product-summary .variable-item:hover, #page .cnc-product-summary .variable-item:focus, #page .cnc-product-summary .variable-item.selected, #page .cnc-product-summary .variable-item.selected-variable-item { box-shadow: none !important; outline: none !important; } #page .cnc-product-summary .variable-item .variable-item-contents { display: flex; align-items: center; justify-content: center; } #page .cnc-product-summary .button-variable-item .variable-item-span { display: inline-flex; align-items: center; justify-content: center; min-width: 60px; padding: 9px 15px; border: 1.5px solid var(--cnc-border); border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--cnc-text); background: #fff; transition: all 0.15s ease; } #page .cnc-product-summary .button-variable-item:hover .variable-item-span { border-color: var(--cnc-accent); } #page .cnc-product-summary .button-variable-item.selected .variable-item-span, #page .cnc-product-summary .button-variable-item.selected-variable-item .variable-item-span { border-color: var(--cnc-accent); color: var(--cnc-accent-dark); background: var(--cnc-tint2); } #page .cnc-product-summary .color-variable-item .variable-item-span-color { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--cnc-border); transition: all 0.15s ease; } #page .cnc-product-summary .color-variable-item:hover .variable-item-span-color, #page .cnc-product-summary .color-variable-item.selected .variable-item-span-color, #page .cnc-product-summary .color-variable-item.selected-variable-item .variable-item-span-color { border-color: var(--cnc-accent); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--cnc-accent); } /* -------------------------------------------------------------------------- Cart row: quantity + add to cart + wishlist, one row, per mockup -------------------------------------------------------------------------- */ #page .cnc-product-summary .cnc-cart-row { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; margin: 0; } @media (max-width: 560px) { /* Heart moves up next to the price (top-right), qty + Add to cart become their own full-width row underneath. */ #page .cnc-product-summary .cnc-buy-block { grid-template-columns: 1fr auto; grid-template-areas: "price wish" "cart cart"; } /* Quantity pill (~126px) + the button's old 200px min-width didn't fit side by side on a phone screen, so the button dropped to its own line. Never wrap this row, and let the button shrink to fill whatever space remains next to the quantity pill instead. */ #page .cnc-product-summary .cnc-cart-row, #page .cnc-product-summary form.cart, #page .cnc-product-summary .woocommerce-variation-add-to-cart.variations_button, #page .cnc-product-summary .variations_button { flex-wrap: nowrap !important; gap: 8px !important; } #page .cnc-product-summary .single_add_to_cart_button, #page .cnc-product-summary .woocommerce-variation-add-to-cart .single_add_to_cart_button { min-width: 0 !important; padding: 0 10px !important; font-size: 13px !important; gap: 6px !important; white-space: nowrap !important; } #page .cnc-product-summary .variations_button { min-width: 0 !important; } } #page .cnc-product-summary form.cart { display: flex; align-items: stretch; flex-wrap: wrap; gap: 12px; flex: 1 1 auto; margin: 0; padding: 0; border: 0; min-width: 0; } #page .cnc-product-summary .woocommerce-variation-add-to-cart.variations_button { display: flex; align-items: stretch; flex-wrap: wrap; gap: 12px; width: 100%; } #page .cnc-product-summary .quantity, #page .cnc-product-summary .woocommerce-variation-add-to-cart .quantity { display: flex !important; flex: none; width: auto; max-width: none; border: 1px solid var(--cnc-border); border-radius: 14px; overflow: hidden; margin: 0 !important; padding: 0; background: #fff; } #page .cnc-product-summary .quantity .ts-screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } #page .cnc-product-summary .quantity .number-button, #page .cnc-product-summary .woocommerce-variation-add-to-cart .quantity .number-button { display: flex; align-items: center; } /* Hide parent theme's default +/- icons. */ #page .cnc-product-summary .quantity .number-button::before, #page .cnc-product-summary .quantity .number-button::after, #page .cnc-product-summary .woocommerce-variation-add-to-cart .quantity .number-button::before, #page .cnc-product-summary .woocommerce-variation-add-to-cart .quantity .number-button::after { display: none !important; } #page .cnc-product-summary .quantity .qty, #page .cnc-product-summary .woocommerce-variation-add-to-cart .quantity .qty { flex: none; width: 46px; height: 52px; min-width: 46px; border: 0; background: transparent; text-align: center; font-size: 16px; font-weight: 700; line-height: 52px; padding: 0 !important; appearance: textfield; -moz-appearance: textfield; } #page .cnc-product-summary .quantity .qty::-webkit-outer-spin-button, #page .cnc-product-summary .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #page .cnc-product-summary .quantity .minus, #page .cnc-product-summary .quantity .plus { width: 40px; height: 52px; border: 0; background: #faf7fb; color: var(--cnc-accent-dark); font-size: 19px; font-weight: 500; cursor: pointer; line-height: 52px; padding: 0; position: static; transition: background 0.15s ease; } #page .cnc-product-summary .quantity .minus:hover, #page .cnc-product-summary .quantity .plus:hover { background: var(--cnc-tint2); } #page .cnc-product-summary .variations_button { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; flex: 1; min-width: 220px; } #page .cnc-product-summary .single_add_to_cart_button, #page .cnc-product-summary .woocommerce-variation-add-to-cart .single_add_to_cart_button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: 1 1 auto; min-width: 200px; height: 52px; padding: 0 24px; border: 0; border-radius: 14px; background: linear-gradient(135deg, var(--cnc-accent), var(--cnc-accent-dark)); box-shadow: 0 14px 30px rgba(180, 20, 120, .28); color: #fff; font-size: 15.5px; font-weight: 700; text-transform: none; transition: transform 0.15s ease; } /* Remove parent plus icon; keep loading / added states. */ #page .cnc-product-summary .single_add_to_cart_button:not(.loading):not(.added)::before { content: '' !important; display: none !important; } /* Cart icon after the label. */ #page .cnc-product-summary .single_add_to_cart_button:not(.loading):not(.added)::after { content: '\e909'; font-family: 'icomoon'; font-size: 14px; margin-left: 0; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #page .cnc-product-summary .single_add_to_cart_button:disabled, #page .cnc-product-summary .single_add_to_cart_button.disabled { opacity: 0.5; cursor: not-allowed; } #page .cnc-product-summary .single_add_to_cart_button:hover { transform: translateY(-2px); color: #fff; } #page .cnc-product-summary .single_variation_wrap { margin-top: 0; width: 100%; } #page .cnc-product-summary .woocommerce-variation { margin-bottom: 12px; } #page .cnc-product-summary .woocommerce-variation-price .price { font-size: 24px; color: var(--cnc-accent); font-weight: 700; } /* Wishlist heart button -- a .cnc-buy-block grid item (see grid-area rules above), per mockup's .wish. */ #page .cnc-product-summary .cnc-wishlist-btn { display: flex; align-items: stretch; flex: none; margin: 0; } #page .cnc-product-summary .cnc-wishlist-btn > div { margin: 0; } #page .cnc-product-summary .cnc-wishlist-btn .button-in, #page .cnc-product-summary .cnc-wishlist-btn .yith-wcwl-add-to-wishlist, #page .cnc-product-summary .cnc-wishlist-btn .yith-wcwl-add-button { margin: 0; height: 100%; } #page .cnc-product-summary .cnc-wishlist-btn a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 54px; height: 52px; border: 1.5px solid #eccbe4; border-radius: 14px; color: var(--cnc-accent-dark); text-decoration: none; transition: all 0.15s ease; position: relative; font-size: 0 !important; background: #fff; } #page .cnc-product-summary .cnc-wishlist-btn a:hover { border-color: var(--cnc-accent); background: var(--cnc-tint2); color: var(--cnc-accent-dark); } /* Hide text labels inside the icon link. */ #page .cnc-product-summary .cnc-wishlist-btn a > * { display: none !important; } #page .cnc-product-summary .cnc-wishlist-btn a::before { font-family: 'icomoon' !important; font-weight: normal !important; font-size: 21px !important; line-height: 1; margin: 0; width: auto; height: auto; background: none; mask: none; -webkit-mask: none; content: '\e921' !important; } /* -------------------------------------------------------------------------- Shipping / payment info block -------------------------------------------------------------------------- */ #page .cnc-product-summary .cnc-ship-info { margin-top: 20px; padding: 16px 18px; border-radius: 14px; background: var(--cnc-tint); border: 1px solid #f0e5f2; display: grid; gap: 13px; } #page .cnc-product-summary .cnc-ship-row { display: flex; gap: 12px; align-items: center; font-size: 13.5px; color: #4a4460; line-height: 1.4; } #page .cnc-product-summary .cnc-ship-row strong { color: var(--cnc-text); } #page .cnc-product-summary .cnc-ship-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; background: #fff; color: var(--cnc-accent-dark); display: flex; align-items: center; justify-content: center; } #page .cnc-product-summary .cnc-ship-ic svg { width: 20px; height: 20px; } /* -------------------------------------------------------------------------- Tabs -------------------------------------------------------------------------- */ #page .cnc-tabs-wrapper { margin: 0 0 60px; background: #fff; border: 1px solid var(--cnc-border); border-radius: var(--cnc-radius); box-shadow: var(--cnc-shadow); padding: 28px 32px; } @media (max-width: 560px) { #page .cnc-tabs-wrapper { padding: 6px 8px; /* Smaller than desktop's 60px -- on mobile the accordion card is often the last visible block before the footer (no related products for this category), so a desktop-sized gap reads as a big dead band. */ margin-bottom: 24px; } } #page .cnc-tabs-wrapper .cnc-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--cnc-border); list-style: none; margin: 0 0 24px; padding: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } /* Hide the scrollbar track itself (Chrome/Safari) -- the row still scrolls horizontally if the tabs ever overflow, just without the grey scrollbar bar showing underneath/beside it. */ #page .cnc-tabs-wrapper .cnc-tabs::-webkit-scrollbar { display: none; } #page .cnc-tabs-wrapper .cnc-tabs li { margin: 0 0 -1px; } #page .cnc-tabs-wrapper .cnc-tabs a { display: block; padding: 14px 18px; color: var(--cnc-muted); font-size: 15.5px; font-weight: 600; text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; transition: color 0.15s ease; } #page .cnc-tabs-wrapper .cnc-tabs a:hover { color: var(--cnc-text); } #page .cnc-tabs-wrapper .cnc-tabs .active a, #page .cnc-tabs-wrapper .cnc-tabs li.active a { color: var(--cnc-accent-dark); border-bottom-color: var(--cnc-accent); } #page .cnc-tabs-wrapper .cnc-tabs li a:after { display: none !important; } #page .cnc-tabs-wrapper .cnc-tab-panel { padding: 0; } .cnc-tab-content h2, .cnc-tab-content h3, .cnc-tab-content h4 { color: var(--cnc-text); margin: 24px 0 12px; font-size: 18px; } .cnc-tab-content h2:first-child, .cnc-tab-content h3:first-child, .cnc-tab-content h4:first-child { margin-top: 0; } .cnc-tab-content p, .cnc-tab-content li { font-size: 15px; line-height: 1.7; color: #4a4460; } .cnc-tab-content ul { margin: 0 0 18px; padding-left: 22px; } .cnc-tab-content ul li { margin-bottom: 8px; } .cnc-tab-content--additional-information table { width: 100%; border-collapse: collapse; max-width: 760px; } .cnc-tab-content--additional-information th, .cnc-tab-content--additional-information td { padding: 12px 4px; border-bottom: 1px solid var(--cnc-border); text-align: left; font-size: 14.5px; } .cnc-tab-content--additional-information th { color: var(--cnc-muted); font-weight: 400; width: 45%; } .cnc-tab-content--additional-information td { color: var(--cnc-text); font-weight: 600; } /* --- mobile: tabs become an accordion with its own independent open/close state (a .cnc-acc-open class on the panel) -- see loobek_child_product_tabs_accordion_script(). --- */ .cnc-acc-head { display: none; } @media (max-width: 560px) { #page .cnc-tabs-wrapper .cnc-tabs { display: none !important; } .cnc-acc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; border: none; background: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; color: var(--cnc-text); text-align: left; padding: 12px; border-top: 1px solid var(--cnc-border); } #page .cnc-tabs-wrapper > .cnc-acc-head:first-of-type { border-top: none; } .cnc-acc-head .cnc-acc-cv { flex: none; width: 18px; height: 18px; stroke: var(--cnc-accent-dark); stroke-width: 2.4; fill: none; transition: transform 0.2s ease; } /* Force transparent background and a fixed text colour regardless of any global button/:focus style the parent theme applies elsewhere (found live: a generic button:focus rule paints white text, expecting an accent-coloured background that our !important above already strips -- leaving genuinely invisible white-on-white text once a header had been focused. !important + explicit :focus/:active coverage beats it. */ .cnc-acc-head, .cnc-acc-head:focus, .cnc-acc-head:active, .cnc-acc-head.open { background: none !important; outline: none; box-shadow: none !important; } .cnc-acc-head, .cnc-acc-head:focus, .cnc-acc-head:active { color: var(--cnc-text) !important; } .cnc-acc-head.open, .cnc-acc-head.open:focus, .cnc-acc-head.open:active { color: var(--cnc-accent-dark) !important; } .cnc-acc-head.open .cnc-acc-cv { transform: rotate(180deg); } /* Independent accordion state: collapsed by default, opened only via .cnc-acc-open (toggled in JS) -- decoupled from WooCommerce's own "exactly one tab always active" model, which can't represent an all-collapsed state or a re-tap-to-close interaction. */ #page .cnc-tabs-wrapper .cnc-tab-panel { display: none !important; padding: 0 12px 16px; } #page .cnc-tabs-wrapper .cnc-tab-panel.cnc-acc-open { display: block !important; } .cnc-tab-content h2, .cnc-tab-content h3 { font-size: 16.5px; } .cnc-tab-content p, .cnc-tab-content li { font-size: 14.5px; line-height: 1.6; } } /* -------------------------------------------------------------------------- Tab content components: badge, label, info-card grid, check/cross lists, callout -- shared by the guarantee / payment-delivery / returns tabs. -------------------------------------------------------------------------- */ .cnc-tab-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--cnc-tint2); color: var(--cnc-accent-dark); font-size: 14px; font-weight: 700; padding: 9px 16px; border-radius: 999px; margin: 0 0 20px; } .cnc-tab-badge svg { width: 16px; height: 16px; flex: none; } .cnc-tab-label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cnc-muted); margin: 28px 0 12px; } .cnc-tab-label:first-child { margin-top: 0; } .cnc-tab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 4px; } @media (max-width: 640px) { .cnc-tab-grid { grid-template-columns: 1fr; } } .cnc-tab-card { display: flex; align-items: flex-start; gap: 14px; background: var(--cnc-tint); border-radius: 14px; padding: 18px; } .cnc-tab-card-ic { flex: none; width: 40px; height: 40px; border-radius: 11px; background: #fff; color: var(--cnc-accent-dark); display: flex; align-items: center; justify-content: center; } .cnc-tab-card-ic svg { width: 20px; height: 20px; } .cnc-tab-card-text strong { display: block; color: var(--cnc-text); font-size: 15px; font-weight: 700; margin-bottom: 3px; } .cnc-tab-card-text span { font-size: 13.5px; line-height: 1.5; color: var(--cnc-muted); } .cnc-tab-content ul.cnc-tab-list { list-style: none; margin: 0 0 18px; padding: 0; } .cnc-tab-content ul.cnc-tab-list li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; } .cnc-tab-list-ic { flex: none; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .cnc-tab-list-ic svg { width: 12px; height: 12px; } .cnc-tab-list--check .cnc-tab-list-ic { background: #e4f7e9; color: var(--cnc-green); } .cnc-tab-list--cross .cnc-tab-list-ic { background: #fde9ee; color: #d9294f; } .cnc-tab-callout { display: flex; align-items: flex-start; gap: 12px; background: #fef4e6; border-radius: 14px; padding: 16px 18px; margin: 18px 0; } .cnc-tab-callout svg { flex: none; width: 20px; height: 20px; color: #d98a1f; margin-top: 1px; } .cnc-tab-callout p { margin: 0; } .cnc-tab-callout strong { color: var(--cnc-text); } .cnc-tab-content a { color: var(--cnc-accent-dark); font-weight: 600; } @media (max-width: 560px) { .cnc-tab-grid { gap: 10px; } .cnc-tab-card { padding: 14px; gap: 10px; } } /* -------------------------------------------------------------------------- Description features -------------------------------------------------------------------------- */ .cnc-description-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; } @media (max-width: 767px) { .cnc-description-features { grid-template-columns: 1fr 1fr; gap: 12px; } } @media (max-width: 380px) { .cnc-description-features { grid-template-columns: 1fr; } } .cnc-description-feature { background: var(--cnc-tint); border: 1px solid var(--cnc-border); border-radius: 16px; padding: 20px; } @media (max-width: 767px) { .cnc-description-feature { padding: 16px 14px; } } .cnc-description-feature__icon { width: 40px; height: 40px; border-radius: 11px; background: var(--cnc-tint2); color: var(--cnc-accent-dark); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .cnc-description-feature__icon svg { width: 20px; height: 20px; } .cnc-description-feature__title { font-size: 15.5px; font-weight: 600; margin: 0 0 6px; color: var(--cnc-text); } @media (max-width: 767px) { .cnc-description-feature__title { font-size: 14px; } } .cnc-description-feature__text { font-size: 13.5px; line-height: 1.5; color: #5b5570; margin: 0; } /* -------------------------------------------------------------------------- Related products -- identical card design to the catalog page (archive-product.php's .cnc-cat .pcard), same class names (pcard/pimg/ pb/pn/pst/pprice/pbuy/btn/ic), just scoped under .cnc-related-products instead of .cnc-cat so both stylesheets can coexist. Deliberately NOT using WC's own "related products" classes on the wrapper/grid (no .related, no ul.products) -- the parent theme's main.js auto-turns any ".single-product .related .products" into a swiper carousel, which is what caused the broken/overlapping card layout this replaces; a plain grid (like the catalog) never matches that selector. -------------------------------------------------------------------------- */ .cnc-related-products__title { font-size: 24px; font-weight: 700; margin: 44px 0 20px; color: var(--cnc-text); } @media (max-width: 560px) { .cnc-related-products__title { font-size: 20px; margin: 32px 0 16px; } } .cnc-related-products__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0 0 60px; } @media (max-width: 1080px) { .cnc-related-products__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 820px) { .cnc-related-products__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 360px) { .cnc-related-products__grid { grid-template-columns: 1fr; } } .cnc-related-products .pcard { background: #fff; border: 1px solid var(--cnc-border); border-radius: 16px; box-shadow: var(--cnc-shadow); display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; } .cnc-related-products .pcard:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(90, 30, 90, .14); } .cnc-related-products .pimg { position: relative; display: block; } .cnc-related-products .pimg > a { display: block; } .cnc-related-products .pimg img { width: 100%; height: 210px; object-fit: cover; display: block; border-radius: 16px 16px 0 0; } .cnc-related-products .pimg .badge { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 11px; font-weight: 700; color: #fff !important; padding: 4px 10px; border-radius: 20px; background: var(--cnc-accent); } .cnc-related-products .pimg .badge.hit { background: var(--cnc-purple); } .cnc-related-products .pimg .wish { position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 11px; } /* Same YITH-shortcode restyle trick as the catalog: hide every real child, draw the heart as a ::before background-image, swap it filled once YITH's own state class says the product is already on the wishlist. */ .cnc-related-products .pimg .wish > div { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .cnc-related-products .pimg .wish .yith-wcwl-add-button, .cnc-related-products .pimg .wish .yith-wcwl-wishlistaddedbrowse, .cnc-related-products .pimg .wish .yith-wcwl-wishlistexistsbrowse { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .cnc-related-products .pimg .wish a { display: flex !important; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 11px; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 12px rgba(60, 20, 60, .15); font-size: 0 !important; line-height: 0 !important; color: var(--cnc-accent-dark) !important; text-decoration: none !important; } .cnc-related-products .pimg .wish a:before { content: ""; display: inline-block; width: 19px; height: 19px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3187f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-4.5-9.5-9A5 5 0 0 1 12 6a5 5 0 0 1 9.5 6C19 16.5 12 21 12 21Z'/%3E%3C/svg%3E") center/contain no-repeat; } .cnc-related-products .pimg .wish .yith-wcwl-wishlistaddedbrowse a:before, .cnc-related-products .pimg .wish .yith-wcwl-wishlistexistsbrowse a:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a3187f' stroke='%23a3187f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-4.5-9.5-9A5 5 0 0 1 12 6a5 5 0 0 1 9.5 6C19 16.5 12 21 12 21Z'/%3E%3C/svg%3E"); } .cnc-related-products .pimg .wish span.feedback, .cnc-related-products .pimg .wish .yith-wcwl-icon { display: none !important; } .cnc-related-products .pimg .wish a * { display: none !important; } .cnc-related-products .pb { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; } .cnc-related-products .pn { font-size: 14.5px; font-weight: 600; line-height: 1.35; min-height: 40px; color: var(--cnc-text) !important; } .cnc-related-products .pn a { color: inherit !important; text-decoration: none; } .cnc-related-products .pst { font-size: 12.5px; color: #1f9d45 !important; font-weight: 600; margin: 8px 0 6px; } .cnc-related-products .pst.oos { color: #c62148 !important; } .cnc-related-products .pprice { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 12px; } .cnc-related-products .pprice .woocommerce-Price-amount { font-size: 20px; font-weight: 800; color: var(--cnc-text) !important; } .cnc-related-products .pprice del .woocommerce-Price-amount { font-size: 13.5px; font-weight: 400; color: var(--cnc-muted) !important; text-decoration: line-through; } .cnc-related-products .pprice ins { text-decoration: none; } .cnc-related-products .pbuy { margin-top: auto; display: flex; gap: 8px; } .cnc-related-products .pbuy .btn { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: none; cursor: pointer; font-weight: 700; font-size: 13.5px; padding: 11px 10px; border-radius: 11px; color: #fff !important; background: linear-gradient(135deg, var(--cnc-accent), var(--cnc-accent-dark)); box-shadow: 0 8px 18px rgba(180, 20, 120, .24); text-decoration: none; } .cnc-related-products .pbuy .btn:hover { transform: translateY(-1px); } .cnc-related-products .pbuy .ic { flex: none; width: 44px; border-radius: 11px; border: 1px solid #eccbe4; background: #fff; color: var(--cnc-accent-dark); display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Same icon-only restyle trick as the catalog, this time on the real WC add-to-cart button/link so the small square button quick-adds to cart (same AJAX flow/events as every other add-to-cart button on the site) instead of just being decoration. */ .cnc-related-products .pbuy .ic > a { display: flex !important; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 0 !important; line-height: 0 !important; color: var(--cnc-accent-dark) !important; text-decoration: none !important; background: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } .cnc-related-products .pbuy .ic > a:before { content: ""; display: inline-block; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3187f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6h15l-1.5 9h-12L5 3H2'/%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='17' cy='20' r='1.4'/%3E%3C/svg%3E") center/contain no-repeat; } .cnc-related-products .pbuy .ic > a.added:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ecc55' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E"); } .cnc-related-products .pbuy .ic .added_to_cart { display: none !important; } .cnc-related-products .pbuy .ic > a * { display: none !important; } @media (max-width: 560px) { .cnc-related-products__grid { gap: 12px; } .cnc-related-products .pb { padding: 12px 12px 14px; } .cnc-related-products .pn { font-size: 13px; min-height: 0; line-height: 1.3; } .cnc-related-products .pst { margin: 6px 0 4px; font-size: 12px; } .cnc-related-products .pprice { gap: 2px 8px; margin-bottom: 10px; } .cnc-related-products .pprice .woocommerce-Price-amount { white-space: nowrap; font-size: 17px; } .cnc-related-products .pprice del .woocommerce-Price-amount { font-size: 12px; } .cnc-related-products .pimg img { height: 150px; } .cnc-related-products .pimg .wish { width: 34px; height: 34px; } .cnc-related-products .pbuy .btn { white-space: nowrap; padding: 11px 8px; font-size: 12.5px; gap: 5px; width: 100%; } .cnc-related-products .pbuy .ic { display: none; } } /* -------------------------------------------------------------------------- Product gallery thumbnails (rtwpvg carousel) -------------------------------------------------------------------------- */ #page .rtwpvg-thumbnail-wrapper { margin-top: 14px; position: relative; min-height: auto !important; } #page .rtwpvg-thumbnail-slider { position: relative; padding: 0 30px; overflow: hidden !important; width: 100%; box-sizing: border-box; } #page .rtwpvg-thumbnail-slider .swiper-wrapper { display: flex !important; gap: 0 !important; width: 100%; } #page .rtwpvg-thumbnail-image { margin: 0; } #page .rtwpvg-thumbnail-image-inner { position: relative; border: 2px solid var(--cnc-border); border-radius: 14px; overflow: hidden; transition: border-color 0.15s ease; background: #fff; } #page .rtwpvg-thumbnail-image-inner img { display: block; width: 100%; height: 100%; object-fit: cover; } #page .rtwpvg-thumbnail-image.swiper-slide-thumb-active .rtwpvg-thumbnail-image-inner, #page .rtwpvg-thumbnail-image:hover .rtwpvg-thumbnail-image-inner { border-color: var(--cnc-accent); } #page .rtwpvg-thumbnail-prev-arrow, #page .rtwpvg-thumbnail-next-arrow { display: flex !important; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; font-size: 18px; color: var(--cnc-accent-dark); width: 30px; height: 84px; border-radius: 12px; border: 1px solid var(--cnc-border); background: #fff; line-height: 1; text-align: center; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } #page .rtwpvg-thumbnail-prev-arrow:hover, #page .rtwpvg-thumbnail-next-arrow:hover { border-color: var(--cnc-accent); background: var(--cnc-tint2); } #page .rtwpvg-thumbnail-prev-arrow { left: 0; } #page .rtwpvg-thumbnail-next-arrow { right: 0; }