/** * Single product page UX redesign — Fazė 6. * * Stiliuoja TIK esamą, native WooCommerce/WoodMart markup (žr. * inc/product-page.php komentarą su tikslia hook/DOM struktūra). * Jokio naujo markup, jokio template override, jokio JS. * * Ta pati vizualinė kryptis kaip Fazė 5 (žr. category-page.css): * balta bazė, grafitinis tekstas, subtilūs 1px border'ai, ribotas * radius, be gradientų/shadow/pastelinių blokų. Accent (#e83a17) * TIK: pagrindinis CTA, sale/variacijos kaina, aktyvi tab žymė. */ :root { --ps-p-ink: #1f2937; --ps-p-muted: #6b7280; --ps-p-border: #e5e7eb; --ps-p-accent: #e83a17; --ps-p-radius: 8px; } /* ================================================================ 1. BREADCRUMBS ================================================================ */ .single-breadcrumbs-wrapper .woocommerce-breadcrumb { font-size: 13px; color: var(--ps-p-muted); } /* ================================================================ 2. GALLERY — stabilus, švarus, be ištempimo ================================================================ */ .product-images .woocommerce-product-gallery__wrapper .wd-carousel-item img { object-fit: contain; background: #fff; } .woocommerce-product-gallery { border: 1px solid var(--ps-p-border); border-radius: var(--ps-p-radius); overflow: hidden; } .wd-gallery-thumb .wd-product-gallery-item, .wd-gallery-thumb img { border-radius: 6px; } /* Aiški aktyvaus thumbnail būsena — realus native class patikrintas gyvai (paspaudus thumbnail): .wd-thumb-active, NE .wd-active (pastarasis žymi kitą dalyką — matomumą slider'io viewport'e). */ .wd-gallery-thumb .wd-carousel-item.wd-thumb-active img, .wd-gallery-thumb .swiper-slide-thumb-active img { outline: 2px solid var(--ps-p-accent); outline-offset: -2px; } /* ================================================================ 3. TITLE / META / PRICE ================================================================ */ .product_title.entry-title { font-size: 26px; font-weight: 700; color: var(--ps-p-ink); line-height: 1.3; margin: 0 0 8px; } .summary .product_meta { font-size: 12px; color: var(--ps-p-muted); margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ps-p-border); } .summary .product_meta .sku_wrapper, .summary .product_meta .posted_in { margin-right: 10px; } .summary .product_meta .meta-label { color: var(--ps-p-muted); font-weight: 400; } .summary p.price, .summary span.price { font-size: 26px; font-weight: 700; color: var(--ps-p-ink); margin: 0 0 14px; display: block; } .summary .price ins { color: var(--ps-p-accent); text-decoration: none; } .summary .price del { color: var(--ps-p-muted); font-weight: 400; font-size: 17px; opacity: .8; } /* ================================================================ 4. NEMOKAMAS PRISTATYMAS — pašalinam pastelinį/gradientinį fono bloką, suderiname su balta/subtilaus border'o kryptimi. Skaičiavimo logika (slenkstis, progresas, AJAX) NEPALIESTA. PASTABA: šio elemento SAVA CSS ("shippingas" Code Snippet, add_action('wp_head', ...), gradientas + pastelė) renderinasi VĖLIAU nei šis failas, tad prie vienodo specifiškumo laimėtų JI (CSS cascade — vėlesnis šaltinis laimi lygybėje). Todėl čia sąmoningai naudojame `.summary .ps-free-ship-note` (didesnis specifiškumas), NE !important. */ .summary .ps-free-ship-note { background: #fff; border: 1px solid var(--ps-p-border); border-radius: var(--ps-p-radius); padding: 12px 14px; margin: 0 0 16px; } .summary .ps-free-ship-note__row { display: flex; align-items: center; gap: 8px; } .summary .ps-free-ship-note__icon { background: none; color: inherit; font-size: 18px; width: auto; height: auto; } .summary .ps-free-ship-note__text { font-size: 13px; font-weight: 400; color: var(--ps-p-ink); } .summary .ps-free-ship-note__text strong { color: var(--ps-p-accent); font-weight: 700; } .summary .ps-free-ship-note__progress { margin-top: 8px; height: 4px; border-radius: 2px; background: var(--ps-p-border); overflow: hidden; } .summary .ps-free-ship-note__progress span { display: block; height: 100%; background: var(--ps-p-accent); } /* ================================================================ 5. SHORT DESCRIPTION ================================================================ */ .woocommerce-product-details__short-description { font-size: 14px; line-height: 1.7; color: var(--ps-p-ink); margin: 0 0 18px; } .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; } /* ================================================================ 6. VARIATIONS ================================================================ */ .variations_form .variations { width: 100%; margin: 0 0 6px; } .variations_form .variations td.label { font-size: 13px; font-weight: 600; color: var(--ps-p-ink); padding-bottom: 6px; } .variations_form .variations select { min-height: 44px; border: 1px solid var(--ps-p-border); border-radius: 6px; font-size: 14px; padding: 0 12px; } .variations_form .variations select:focus { border-color: var(--ps-p-accent); outline: none; } .woocommerce-variation-description { font-size: 13px; color: var(--ps-p-muted); } .woocommerce-variation-price .price { font-size: 22px !important; } .wd-reset-var .reset_variations { font-size: 12px; color: var(--ps-p-muted); text-decoration: underline; } .wd-reset-var .reset_variations:hover { color: var(--ps-p-accent); } /* ================================================================ 7. QUANTITY + ADD TO CART ================================================================ */ .summary .quantity .qty, .summary .quantity input[type="button"] { min-height: 44px; border: 1px solid var(--ps-p-border); } .summary .single_add_to_cart_button, .summary .wd-buy-now-btn { min-height: 44px; font-size: 14px; font-weight: 700; border-radius: 6px; padding-left: 24px; padding-right: 24px; } .summary .single_add_to_cart_button { background: var(--ps-p-accent); border-color: var(--ps-p-accent); color: #fff; } .summary .single_add_to_cart_button:hover { background: #c9330f; border-color: #c9330f; } /* "PIRKTI" — antrinis veiksmas: kontūrinis, ne konkuruoja su pagrindiniu CTA */ .summary .wd-buy-now-btn { background: #fff; border: 1px solid var(--ps-p-accent); color: var(--ps-p-accent); } .summary .wd-buy-now-btn:hover { background: #fdf1ee; } /* ================================================================ 8. TABS / ACCORDION (jau vienas responsive markup — tik polish) ================================================================ */ .wd-nav-tabs .wd-nav-link { font-size: 14px; font-weight: 600; color: var(--ps-p-muted); } .wd-nav-tabs li.active .wd-nav-link { color: var(--ps-p-ink); } .wc-tabs-wrapper, .woocommerce-tabs { margin-top: 12px; } /* ================================================================ 9. TECHNINĖS SPECIFIKACIJOS (Papildoma informacija lentelė) ================================================================ */ .woocommerce-product-attributes.shop_attributes { width: 100%; border-collapse: collapse; font-size: 14px; } .woocommerce-product-attributes.shop_attributes tr { border-bottom: 1px solid var(--ps-p-border); } .woocommerce-product-attributes-item__label { padding: 10px 16px 10px 0; color: var(--ps-p-muted); font-weight: 600; width: 35%; vertical-align: top; } .woocommerce-product-attributes-item__value { padding: 10px 0; color: var(--ps-p-ink); } .woocommerce-product-attributes-item__value p { margin: 0; } @media (max-width: 767px) { .woocommerce-product-attributes.shop_attributes, .woocommerce-product-attributes.shop_attributes tbody, .woocommerce-product-attributes.shop_attributes tr, .woocommerce-product-attributes.shop_attributes th, .woocommerce-product-attributes.shop_attributes td { display: block; width: auto; } .woocommerce-product-attributes-item__label { padding: 10px 0 2px; border-bottom: 0; } .woocommerce-product-attributes-item__value { padding: 0 0 8px; } } /* ================================================================ 10b. RELATED PRODUCTS carousel — PATIKRINTA IŠ NAUJO. Ankstesnis teiginys ("Swiper neinicializuojasi") buvo klaidingas: tikrinau netinkamą klasę (".swiper-initialized" — tai bendrinė Swiper.js konvencija). WoodMart naudoja savo containerModifierClass ("wd-"), tad realus sėkmės žymuo yra ".wd-initialized" — jis YRA, carousel.swiper objektas egzistuoja, next/prev rodyklės (realiu pelės hover+click) ir mobile swipe (realiu touch event'u) veikia patikrinta gyvai. Native .wd-carousel{overflow:clip} jau teisingai apkerpa slide'us — patikrinta izoliuotai (paslėpus visą related- products bloką body.scrollWidth NEPASIKEITĖ), tad joks papildomas overflow:hidden čia nebuvo reikalingas ir buvo pašalintas. TIKRA horizontal overflow priežastis (390/768/1024px) — palyginimo lentelė () PRODUKTO APRAŠYMO tekste (#tab-description), be jokios klasės, su daugiau stulpelių nei telpa siaurame ekrane. Tai produkto TURINYS (WYSIWYG), jo nekeičiu; sprendžiu tik CSS — įprastas "responsive table" pattern: horizontal scroll pačioje lentelėje, ne visame puslapyje. ================================================================ */ .woocommerce-tabs #tab-description table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ================================================================ 10. STICKY ADD TO CART — accent suderinimas ================================================================ */ .wd-sticky-btn .single_add_to_cart_button, .wd-sticky-btn .wd-sticky-add-to-cart { background: var(--ps-p-accent); border-color: var(--ps-p-accent); min-height: 44px; } .wd-sticky-btn .price { color: var(--ps-p-ink); font-weight: 700; } /* ================================================================ 11. MOBILE — kompaktiška, produktas aukščiau ================================================================ */ @media (max-width: 767px) { .product_title.entry-title { font-size: 21px; margin-bottom: 6px; } .summary p.price, .summary span.price { font-size: 22px; margin-bottom: 10px; } .ps-free-ship-note { padding: 10px 12px; margin-bottom: 12px; } .summary .single_add_to_cart_button, .summary .wd-buy-now-btn { flex: 1 1 auto; } }