/* * Vzhled detailu produktu. * * Originál řeší tyhle hodnoty inline stylem v ("Local Template Style 593"), * navázaným na unikátní ID sekcí BeBuilderu (.mcb-item-561512bab apod.). Naše * šablona ta ID nemá, proto jsou tady tatáž pravidla přepsaná na sémantické třídy. * Hodnoty jsou odečtené 1:1 z originálu, ať detail vypadá stejně. */ /* Sekce se souhrnem: světle šedé pozadí, velký horní odstup */ .mfn-product-detail-section { padding-top: 100px; padding-bottom: 60px; background-color: #F5F5F5; } /* Galerie je odsazená od krajů sloupce */ .mfn-product-gallery-wrap { margin-right: 10%; margin-left: 10%; } /* Bílá zaoblená karta se souhrnem */ .mfn-product-summary-card { padding: 40px 40px 10px; background-color: #FFFFFF; border-radius: 32px; } .mfn-product-summary-card .column_product_title .title { margin-bottom: 10px; } .mfn-product-summary-card .woocommerce-product-details__short-description { color: #6D6F6E; } .mfn-product-summary-card .column_product_short_description { /* Originál má mezi popisem a cenou spacer 10 px */ margin-top: 0; margin-bottom: 10px; } .mfn-product-summary-card .column_product_price .price { font-weight: bold; font-size: 20px; color: #F56804; } /* Výběr varianty */ .mfn-product-summary-card .mfn-variations-wrapper .mfn-vr label { color: #6D6F6E; } .woocommerce #Content .mfn-product-summary-card .woocommerce-variation-price .price { color: #F56804; font-weight: bold; } /* Tlačítko do košíku a přepínač množství */ .woocommerce #Content .mfn-product-summary-card .mfn-product-add-to-cart .button { border-radius: 5px; color: #FFFFFF; background-color: #F56804; } .woocommerce #Content .mfn-product-summary-card .mfn-product-add-to-cart .button:hover { color: #FFFFFF; } .woocommerce #Content .mfn-product-summary-card .mfn-product-add-to-cart .button:hover, .woocommerce #Content .mfn-product-summary-card .mfn-product-add-to-cart .button::before { background: #174B69; } .woocommerce #Content .mfn-product-summary-card .quantity input.qty { background: #FFFFFF; color: #174B69; border-color: #e2e2e2; } .woocommerce #Content .mfn-product-summary-card .quantity a.quantity-change { color: #6D6F6E; } /* * Tlačítko „Získejte cenovou nabídku“. * * Boční odsazení a spodní mezeru dodává obal .mcb-column-inner z proměnných * BeTheme (0 12px 40px) — tytéž hodnoty má originál. Bočních 12 px není * kosmetika: .button_size_3 zvětšuje tlačítko transformem scale(1.1), takže * přesahuje svůj box o 5 % na každou stranu. Bez nich by přesah zajel do * paddingu bílé karty a tlačítko by se opticky přilepilo ke kraji. * * Horní mezeru v originálu dodává spodní odsazení sloupce s košíkem. Ten u nás * .mcb-column-inner nemá (má vlastní, těsnější rozestupy), proto ji přidáváme tady. */ .mfn-product-summary-card .column_button .mcb-column-inner { margin-top: 40px; } /* Dostupnost pod tlačítky — v originálu vystředěná v bílé kartě */ .mfn-product-availability { display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; } /* ---------- Související produkty ---------- */ /* * Hodnoty odečtené z originálu (pravidla pro .mcb-item-e29c51134 v inline CSS * produktové šablony). BeTheme sám těmhle prvkům žádnou typografii nedává — * nadpis by zůstal vlevo a velký jako nadpis sekce, název karty by zdědil * výchozí barvu i velikost textu. */ .woocommerce .column_product_related .mfn-related > .title { text-align: center; margin-bottom: 60px; font-size: 32px; line-height: 32px; font-weight: bold; text-transform: uppercase; } .woocommerce .column_product_related ul.products li.product { background-color: #F5F5F5; padding: 2%; border-radius: 16px; } .woocommerce .column_product_related ul.products li.product .title { margin-top: 60px; margin-bottom: 10px; font-size: 16px; line-height: 16px; font-weight: bold; color: #F56804; } .woocommerce .column_product_related ul.products li.product .title a { color: inherit; } .woocommerce .column_product_related ul.products li.product .price { color: #6D6F6E; font-weight: 500; } /* Odstup celé sekce od patičky, jak ho má originál (na wrap-inner, ne na sloupci) */ .woocommerce .mfn-related-wrap { margin-bottom: 100px; } /* * Bloky dostupnosti, které zakládá administrace (App\Model\Availability). * Původní bloky ze snímku mají náhodná id a pravidla k nim leží v CSS * konkrétního produktu; nově vytvořený blok žádné takové id nemá, tahle * pravidla mu proto dávají stejné nulové okraje. */ .mcb-section .mcb-wrap .mcb-item-nafadmin-av .mcb-column-inner-nafadmin-av { padding: 0; margin: 0; } .mcb-section .mcb-wrap .mcb-item-nafadmin-note .mcb-column-inner-nafadmin-note { margin: 0; }