:root { --wd-text-font: "Lato", Arial, Helvetica, sans-serif; --wd-text-font-weight: 400; --wd-text-color: rgb(118,118,118); --wd-text-font-size: 15px; --wd-title-font: "Roboto", Arial, Helvetica, sans-serif; --wd-title-font-weight: 500; --wd-title-color: #84593C; --wd-entities-title-font: "Roboto", Arial, Helvetica, sans-serif; --wd-entities-title-font-weight: 400; --wd-entities-title-color: #333333; --wd-entities-title-color-hover: rgb(51 51 51 / 65%); --wd-alternative-font: "Playfair Display", Arial, Helvetica, sans-serif; --wd-widget-title-font: "Roboto", Arial, Helvetica, sans-serif; --wd-widget-title-font-weight: 500; --wd-widget-title-transform: uppercase; --wd-widget-title-color: #84593C; --wd-widget-title-font-size: 16px; --wd-header-el-font: "Lato", Arial, Helvetica, sans-serif; --wd-header-el-font-weight: 700; --wd-header-el-transform: uppercase; --wd-header-el-font-size: 15px; --wd-otl-style: dotted; --wd-otl-width: 2px; --wd-primary-color: #84593C; --wd-alternative-color: #A48A7A; --btn-default-bgcolor: #F1EAE4; --btn-default-bgcolor-hover: #E8E0DA; --btn-accented-bgcolor: #84593C; --btn-accented-bgcolor-hover: #6F4A31; --wd-form-brd-width: 1px; --notices-success-bg: rgb(24,140,1); --notices-success-color: #fff; --notices-warning-bg: rgb(214,152,53); --notices-warning-color: #fff; --wd-link-color: #84593C; --wd-link-color-hover: #6F4A31; --wd-sticky-btn-height: 95px; } .wd-age-verify-wrap { --wd-popup-width: 500px; } .wd-popup.wd-promo-popup { background-color: #111111; background-image: url(https://babywood.shop/wp-content/uploads/2021/07/promo-popup.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; } .wd-promo-popup-wrap { --wd-popup-width: 800px; --wd-popup-padding: 15px; } :is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content { max-height: 223px; } .wd-page-title .wd-page-title-bg img { object-fit: cover; object-position: center center; } .mfp-wrap.wd-popup-quick-view-wrap { --wd-popup-width: 920px; } .wd-builder-off .wd-fbt.wd-design-side { --wd-form-width: 50%; } @media (max-width: 1024px) { :root { --wd-sticky-btn-height: 95px; } } @media (max-width: 768.98px) { :root { --wd-sticky-btn-height: 42px; } } :root{ --wd-container-w: 1600px; --wd-form-brd-radius: 5px; --btn-default-color: #333; --btn-default-color-hover: #333; --btn-accented-color: #fff; --btn-accented-color-hover: #fff; --btn-default-brd-radius: 5px; --btn-default-box-shadow: none; --btn-default-box-shadow-hover: none; --btn-accented-brd-radius: 5px; --btn-accented-box-shadow: none; --btn-accented-box-shadow-hover: none; --wd-brd-radius: 8px; } .wd-page-title { background-color: #84593C; } .wd-header-cart .wd-cart-subtotal { font-size: 17px; } .wd-dropdown-my-account .wd-sub-menu > li > a { font-size: 15px; } .woocommerce table.shop_table th { color: #84593C; } .wd-nav-main > li > a { color: #84593C; } .whb-general-header .wd-tools-element:not([class*=wd-design-7]) > a, .whb-general-header .wd-tools-element:not([class*=wd-design-7]) .wd-tools-text { color: #84593C !important; } /* My Account: warm tint (accentStrong .05/.10) instead of neutral grey */ .wd-builder-off .woocommerce-MyAccount-navigation ul > li > a:hover { background-color: rgba(132,89,60,.05); } .wd-builder-off .woocommerce-MyAccount-navigation ul > li.is-active > a { background-color: rgba(132,89,60,.1); } .wd-builder-off .wd-nav-my-acc { --nav-bg-hover: rgba(132,89,60,.05); } /* Footer column titles: .color-scheme-dark resets --wd-title-color to #242424 */ .wd-footer.color-scheme-dark { --wd-title-color: #84593C; } /* Mega-menu dropdown titles: same color-scheme-dark token reset */ .wd-dropdown-menu.color-scheme-dark { --wd-title-color: #84593C; } /* Footer copyright line: caramel text and links */ .wd-footer .wd-copyrights, .wd-footer .wd-copyrights a { color: #84593C; } .wd-footer .wd-copyrights a:hover { color: #6F4A31; } /* Single product: breadcrumbs, title, tabs, summary labels */ .single-product .wd-breadcrumbs { --wd-link-color: #84593C; --wd-link-color-hover: #6F4A31; --wd-bcrumb-color-active: #84593C; --wd-bcrumb-delim-color: #84593C; color: #84593C; } .single-product h1.product_title { color: #84593C; } .wd-nav-tabs.wc-tabs > li > a { color: rgba(132,89,60,.7); } .wd-nav-tabs.wc-tabs > li.active > a { color: #84593C; } .single-product .summary .wd-action-text { color: #84593C; } .single-product .summary .meta-label, .single-product .summary .share-title { color: #84593C; } /* Single product: icons (woodmart-font glyphs in pseudo-elements) */ .single-product .summary .wd-action-btn .wd-action-icon::before { color: #84593C; } .single-product .summary .wd-social-icon .wd-icon::before { color: #84593C; } .single-product .wd-products-nav .wd-product-nav-btn::before { color: #84593C; } /* Post titles site-wide (blog archive, single H1, related, recent-posts widget, prev/next). Product titles stay dark. */ .wd-post-title, .wd-post-title a { color: #84593C; } .wd-post-title a:hover { color: #6F4A31; } .woodmart-recent-posts .wd-entities-title, .woodmart-recent-posts .wd-entities-title a { color: #84593C; } .wd-page-nav .wd-entities-title { color: #84593C; } /* Bordered buttons (except explicit btn-color-* variants, e.g. white on dark) */ .btn.btn-style-bordered:not([class*='btn-color-']) { color: #84593C; } .btn.btn-style-bordered:not([class*='btn-color-']):hover { color: #6F4A31; } /* Post tag list */ .wd-single-footer .wd-tags-list a { color: #84593C; } .wd-single-footer .wd-tags-list a:hover { color: #6F4A31; } /* Post date badge over photo: caramel numerals + warm shadow (theme: #333 on white, black shadow). Extra .wd-post for specificity: theme CSS part loads in body, after our inline. */ .wd-post .wd-post-date.wd-style-with-bg { color: #84593C; box-shadow: 0 0 9px rgba(132,89,60,.18); } .wd-post .wd-post-date.wd-style-with-bg .post-date-month { color: #6E635D; } /* Carousel dots: theme exposes vars, defaults are gray-300 idle / gray-800 active */ .wd-nav-pagin-wrap { --wd-pagin-brd-color: #E8E0DA; --wd-pagin-brd-color-hover: #A48A7A; --wd-pagin-brd-color-act: #84593C; --wd-pagin-bg-act: #84593C; } /* Comment form: logged-in links (#666), notes, required marker (#e01020 -> warm danger) */ .comments-area .comment-respond .logged-in-as > a { color: #84593C; } .comments-area .comment-respond .logged-in-as > a:hover { color: #6F4A31; } .comment-form .comment-notes, .comments-area .logged-in-as .required-field-message { color: #6E635D; } .required { color: #B4402E; } /* Home + site-wide caramel pass: every rule below overrides a theme variable, no !important needed */ /* Link-style buttons ("See more" in cover banners): theme pins --btn-color to gray-800 regardless of color variant */ .btn.btn-style-link.btn-color-primary { --btn-color: #84593C; --btn-color-hover: #6F4A31; } /* Category tiles: --wd-entities-title-color is shared with product titles, so scope it to .wd-cat. Product titles stay dark. */ .wd-cat { --wd-entities-title-color: #84593C; --wd-entities-title-color-hover: #6F4A31; } /* Products-tabs nav (own class, NOT .wc-tabs / wd-sp-tabs): theme derives .7 idle / 1 active from one RGB triplet */ .wd-nav-tabs.products-tabs-title { --wd-navigation-color: 132, 89, 60; } /* Loop hover icons: woodmart-font glyphs read --wd-action-icon-color, falling back to --wd-action-color */ .wd-product .wd-action-btn { --wd-action-color: #84593C; --wd-action-color-hover: #6F4A31; } /* Tooltip: plate and rotated-square arrow read the same variable, text stays white (6.04:1 on caramel) */ body .tooltip { --wd-tooltip-bg: #84593C; } /* Shop toolbar (category & shop head): breadcrumbs, per-page, view switch, sorting. Theme parts load in the document head before our inline, so equal specificity wins. */ /* Breadcrumbs scoped to the toolbar: the same block also sits inside the caramel page-title plate on /blog/, where text must stay white */ .wd-shop-tools .wd-breadcrumbs { --wd-link-color: rgba(132,89,60,.7); --wd-link-color-hover: #84593C; --wd-bcrumb-color-active: #84593C; --wd-bcrumb-delim-color: rgba(132,89,60,.7); } .wd-products-per-page { --wd-link-color: rgba(132,89,60,.7); --wd-link-color-hover: #84593C; color: rgba(132,89,60,.7); } /* .wd-label is shared with filters and swatches, so scope it to the per-page block */ .wd-products-per-page .wd-label { color: #84593C; } .wd-products-shop-view { --wd-link-color: rgba(132,89,60,.45); --wd-link-color-hover: #6F4A31; } .wd-products-shop-view a.shop-view.current-variation { color: #84593C; } /* Sorting: text plus the theme's data-URI chevron (stroke #bbb -> caramel). Desktop only: under 769px the theme makes the select text transparent and shows an icon instead */ @media (min-width: 769px) { .woocommerce-ordering select.orderby { color: #84593C; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiM4NDU5M0MiPjxwYXRoIGQ9Ik02IDlsNiA2IDYtNiIvPjwvc3ZnPg=="); } } @media (max-width: 768.98px) { .woocommerce-ordering.wd-ordering-mb-icon::after { color: #84593C; } } /* Buttons -> unified ROUNDED preset (user decision 27.07, supersedes the pill contract line): every button follows the admin's btns_*_style radius. --btn-default-brd-radius is printed to :root by Theme Settings (ROUNDED = 5px). */ :root { --btn-brd-radius: var(--btn-default-brd-radius, 5px); } /* Per-block shape classes beat :root, so bring ROUND (35px) and SEMI-ROUND to the same unified radius */ .btn-shape-round, .btn-style-round, .btn-shape-semi-round, .btn-style-semi-round { --btn-brd-radius: var(--btn-default-brd-radius, 5px); } /* .btn-style-link is not a plate: theme strips its padding and height and leaves only a bottom border (the "See more" underline). A radius would bend it into an arc. */ .btn.btn-style-link { --btn-brd-radius: 0px; } /* Quantity steppers (.minus/.plus carry .btn): zero the shorthand so woo-mod-quantity's per-corner --wd-form-brd-radius rules shape the group as designed */ div.quantity :is(.minus,.plus) { --btn-brd-radius: 0px; } /* Off-canvas sidebar (shop_hide_sidebar_desktop): toolbar opener + the panel's own Close button. Both are .wd-action-btn, whose default --wd-action-color is gray-800. Icon glyph and label both fall back to it. */ .wd-shop-tools .wd-show-sidebar-btn, .wd-sidebar .wd-heading .close-side-widget { --wd-action-color: #84593C; --wd-action-color-hover: #6F4A31; } /* Tables in page content — caramel borders, rounded corners, tinted head. Theme gives only horizontal gray rules (base.css `table th` / `table td`); no vertical borders at all. Scope is `.wp-block-table` — the Gutenberg `wp:table` wrapper — and NOT `.entry-content`: Woodmart uses the latter as a generic content wrapper, so it also covers the cart table, the checkout review table and the product attributes tab. Only editor-inserted tables carry .wp-block-table, so this needs no :not(.shop_table) escape hatch and survives new Woo tables. */ .wp-block-table table { border-collapse: separate; border-spacing: 0; border: 1px solid #84593C; border-radius: 10px; } .wp-block-table table :is(th, td) { border: 0; border-bottom: 1px solid rgba(132, 89, 60, .35); border-inline-end: 1px solid rgba(132, 89, 60, .35); } .wp-block-table table :is(th, td):last-child { border-inline-end: 0; } /* `tbody` in the selector is load-bearing: a thead with a single row makes that row `tr:last-child` too, and at (0,2,2) the rule outweighs `thead th` (0,1,3) — the line under the head disappears. */ .wp-block-table table :is(tbody, tfoot) tr:last-child :is(th, td) { border-bottom: 0; } .wp-block-table table thead th { border-bottom: 1px solid #84593C; background-color: rgba(132, 89, 60, .07); color: #84593C; } /* Corners: the radius on shapes only the outer border. Cell backgrounds are painted inside it, so each corner cell needs its own radius or the head fill squares off the top two corners. 9px = 10px minus the 1px border. */ .wp-block-table table thead tr:first-child th:first-child { border-start-start-radius: 9px; } .wp-block-table table thead tr:first-child th:last-child { border-start-end-radius: 9px; } .wp-block-table table :is(tbody, tfoot) tr:last-child :is(th, td):first-child { border-end-start-radius: 9px; } .wp-block-table table :is(tbody, tfoot) tr:last-child :is(th, td):last-child { border-end-end-radius: 9px; } /* Catalog archives (/shop/, product categories & tags, product search) run full width. `.container` is capped by `var(--wd-container-w)` — 1600px from :root because site_width='wide'. Declaring the var on the archive's own main container leaves the header, the footer and every other template at 1600px; `main` holds no nested `.container`, so nothing else inherits it. The `woodmart-archive-shop` body class is present on all three archive types and absent on single product, blog and pages (measured 30.07). */ body.woodmart-archive-shop main.wd-content-layout { --wd-container-w: 100%; } /* Mini-cart off-canvas panel: 340px -> 440px on desktop. `--wd-side-hidden-w` is declared on the shared `.wd-side-hidden` class (base.css: `width: min(var(--wd-side-hidden-w), 100vw)`), which also drives the mobile menu and the off-canvas filters sidebar — hence the scope to `.cart-widget-side`. Desktop only: under 1025px the theme re-declares the var as `min(300px, 80vw)`, and the panel must keep showing the backdrop on phones. Two classes (0,2,0) beat the theme's single-class declaration regardless of stylesheet order. */ @media (min-width: 1025px) { .wd-side-hidden.cart-widget-side { --wd-side-hidden-w: 440px; } } /* babywood: checkout clearfix. Paired fields are floated by woo-mod-grid.css and the wrapper declares no clearfix; no theme option covers it. Full note (RU): docs/kb/woodmart.md */ .woocommerce-billing-fields__field-wrapper::after, .woocommerce-shipping-fields__field-wrapper::after, .woocommerce-additional-fields__field-wrapper::after { content: ""; display: table; clear: both; }