/* ==================================================================== Laudatio Shoptet Theme Override v2.2 — CLEAN Target: https://eshop.laudatio.cz/ Design source: Laudatio globals.css (light palette) Native Shoptet colors are the source of truth for brand/action colors. IMPORTANT - Load this stylesheet AFTER Shoptet and custom legacy styles. - Plus Jakarta Sans must be loaded separately in the document . - Shoptet icon font is intentionally preserved. - Do NOT redefine --color-primary / --color-secondary here. - Current Shoptet colors are consumed through --la-primary etc. ==================================================================== */ :root { /* Laudatio light design tokens */ --la-background: oklch(0.985 0.006 95); --la-foreground: oklch(0.24 0.02 155); --la-card: oklch(1 0 0); --la-card-foreground: oklch(0.24 0.02 155); /* Brand/action colors come from Shoptet's native template settings. */ --la-primary: var(--color-primary); --la-primary-hover: var(--color-primary-hover); --la-conversion: var(--color-secondary); --la-conversion-hover: var(--color-secondary-hover); --la-primary-foreground: #fff; /* Laudatio-only surface token; Shoptet has no native equivalent. */ --la-secondary: oklch(0.95 0.02 155); --la-secondary-foreground: oklch(0.32 0.04 160); --la-muted: oklch(0.955 0.008 95); --la-muted-foreground: oklch(0.5 0.02 155); --la-accent: oklch(0.83 0.11 75); --la-accent-foreground: oklch(0.28 0.05 60); --la-destructive: oklch(0.58 0.19 27); --la-destructive-foreground: oklch(0.98 0.01 95); --la-border: oklch(0.9 0.012 120); --la-ring: oklch(0.43 0.08 165); /* Four-step typography scale */ --la-text-xl: 2.5rem; /* 40 px — H1 */ --la-text-lg: 1.5rem; /* 24 px — section headings / main prices */ --la-text-md: 1rem; /* 16 px — standard UI/body text */ --la-text-sm: .875rem; /* 14 px — secondary/helper text */ --la-radius-sm: 0.625rem; --la-radius-md: 0.75rem; --la-radius-lg: 1rem; --la-radius-xl: 1.375rem; --la-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04); --la-shadow-md: 0 8px 28px rgba(20, 35, 27, .08); --template-font: "Plus Jakarta Sans"; --template-headings-font: "Plus Jakarta Sans"; } /* ================================================================== 01. Base / typography ================================================================== */ html, body { background: var(--la-background) !important; color: var(--la-foreground); } body, input, select, textarea, button { font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } body { font-size: var(--la-text-md); line-height: 1.5; } body, p { font-weight: 400; } p { line-height: 1.5; } h1, h2, h3, h4, h5, h6, .topic, .design-header { color: var(--la-foreground); font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; font-weight: 700; letter-spacing: -0.025em; line-height: 1.18; } /* Neutralize the old global inline h1/h3 overrides and old light weight. */ h1, #content h1, #content-in h1, #welcome h1, #product-detail-h1 { font-size: var(--la-text-xl) !important; font-weight: 700 !important; letter-spacing: -0.035em !important; line-height: 1.1 !important; } h2, h3, #description h3 { font-size: var(--la-text-lg) !important; line-height: 1.25 !important; } h4, h5, h6 { font-size: var(--la-text-md) !important; } a { color: var(--la-primary); text-underline-offset: .16em; } a:hover, a:focus { color: var(--la-primary-hover); } small, .small, .not-important, .vote-time, .news-item time, .product-code, .p-code, .additional-information { color: var(--la-muted-foreground) !important; font-size: var(--la-text-sm) !important; } ::selection { background: var(--la-primary); color: var(--la-primary-foreground); } /* ================================================================== 02. Main layout / surfaces ================================================================== */ #content, #content-in, #main { color: var(--la-foreground); } .box, .product > .columns, .product-single, .checkout-single-box, .f-border, .lightbox-model, .ui-datepicker, .checkout-summary, .cart-summary { border-color: var(--la-border) !important; } .box, .product > .columns, .product-single, .checkout-single-box, .lightbox-model, .ui-datepicker { background: var(--la-card); color: var(--la-card-foreground); border-radius: var(--la-radius-lg); } hr, .subcategories-divider { border-color: var(--la-border) !important; background: var(--la-border) !important; } /* ================================================================== 03. Header ================================================================== */ #header, #header-in { background: var(--la-card) !important; color: var(--la-foreground); } #header-in { border-bottom: 1px solid var(--la-border); margin-bottom: 0; } #header a, #header-in a, #top-links a, #header-cart, #header-cart strong { color: var(--la-foreground); } #header a:hover, #header-in a:hover, #top-links a:hover { color: var(--la-primary); } #header-cart:before { background: var(--la-primary); color: var(--la-primary-foreground); } .cart-recapitulation { background: var(--la-card); border-color: var(--la-border) !important; border-top-color: var(--la-primary) !important; border-radius: var(--la-radius-md); box-shadow: var(--la-shadow-md); } /* Keep intentional hiding from the legacy header CSS. */ .header-email, .header-phone { visibility: hidden; } /* ================================================================== 04. Main menu / navigation ================================================================== */ #menu, .navigation-menu, #menu-helper-box { background: var(--la-card); } #menu li, .navigation-menu li { font-size: var(--la-text-md); } #menu li a, .navigation-menu li a { color: var(--la-foreground); font-weight: 600; letter-spacing: .01em; } #menu .list-inline > li:hover > a, #menu .list-inline > .expandable.expanded > a, .navigation-menu li:hover > a, .navigation-menu li.active > a { color: var(--la-primary); } #menu .list-inline ul, #menu-helper-box, .navigation-menu ul { background: var(--la-card); border: 1px solid var(--la-border); border-radius: var(--la-radius-md); box-shadow: var(--la-shadow-md); } #menu-helper-box li, .navigation-menu li { border-color: var(--la-border); } #navigation { background: transparent; border-bottom: 1px solid var(--la-border); color: var(--la-muted-foreground); margin-bottom: 1.5rem; padding: .65rem 0 .8rem; } #navigation span, #navigation span a { color: var(--la-muted-foreground); font-size: var(--la-text-sm); } #navigation span a:hover { color: var(--la-primary); } /* ================================================================== 05. Search ================================================================== */ #s-word, .searchform .s-word, #search .s-word { background-color: var(--la-card) !important; border: 1px solid var(--la-border) !important; border-radius: var(--la-radius-md) 0 0 var(--la-radius-md); color: var(--la-foreground); } #search .b-confirm, .searchform .b-search { border-radius: 0 var(--la-radius-md) var(--la-radius-md) 0; } .search-whisperer { background: var(--la-muted); border: 1px solid var(--la-border); border-radius: var(--la-radius-md); box-shadow: var(--la-shadow-md); overflow: hidden; } .search-whisperer-link, .search-whisperer-document { background: var(--la-card); color: var(--la-foreground); } .search-whisperer-link:hover, .search-whisperer-document:hover { background: var(--la-secondary); } /* ================================================================== 06. Buttons / controls ================================================================== */ .button, .btn, input[type="submit"], input[type="button"], .b-cart2, .b-next, .b-send-order, .complete-shopping .button, .show-filter-button, #param-filter-actual-button > a.button { /* Color is intentionally left to Shoptet's native color variables. */ border-radius: var(--la-radius-md); font-weight: 700; letter-spacing: .01em; text-transform: none; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .button:focus-visible, .btn:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid color-mix(in oklch, var(--la-ring) 30%, transparent); outline-offset: 2px; } /* ================================================================== 07. Forms ================================================================== */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], select, textarea, #n-email, #mce-EMAIL { background-color: var(--la-card) !important; border: 1px solid var(--la-border) !important; border-radius: var(--la-radius-md); color: var(--la-foreground) !important; } input::placeholder, textarea::placeholder { color: var(--la-muted-foreground); } input:focus, select:focus, textarea:focus { border-color: var(--la-primary) !important; box-shadow: 0 0 0 3px color-mix(in oklch, var(--la-primary) 16%, transparent); outline: none; } [readonly], [readonly]:focus, input:disabled, select:disabled, textarea:disabled { background: var(--la-muted) !important; border-color: var(--la-border) !important; color: var(--la-muted-foreground) !important; } /* ================================================================== 08. Left category menu / filters ================================================================== */ #column-l-in #categories, #column-r #categories { background: var(--la-card); border: 1px solid var(--la-border); border-radius: var(--la-radius-lg); margin-bottom: 1.5rem; overflow: hidden; } /* Neutralize legacy #D4A190 topic background. */ .categories .topic, .categories.expandable .topic { background-color: var(--la-secondary) !important; } #column-l-in #categories .categories .topic, #column-r #categories .categories .topic { color: var(--la-secondary-foreground); font-size: var(--la-text-sm); font-weight: 700; letter-spacing: .02em; } .categories .topic a { color: var(--la-secondary-foreground); padding: .9rem 1rem; } .categories.expandable > ul > li { border-top: 1px solid color-mix(in oklch, var(--la-border) 70%, transparent); text-transform: none; } .categories.expandable > ul > li > a { color: var(--la-foreground); padding-top: .65rem; padding-bottom: .65rem; } .categories.expandable > ul > li > a:hover, .categories.expandable ul .active > a { color: var(--la-primary); } #category-filter, #category-filter-hover-content, .active-line-wrapper { background: var(--la-card); border-color: var(--la-border) !important; } #category-filter { border: 1px solid var(--la-border); border-radius: var(--la-radius-lg); padding: 1rem; } #category-filter-hover-content { border: 1px solid var(--la-border); border-radius: var(--la-radius-lg); box-shadow: var(--la-shadow-md); } .param-filter-single { border-color: var(--la-border); } .active-line-wrapper { border-radius: var(--la-radius-md); } #category-tabs .tab-single label { border-radius: 999px; padding: .6rem 1rem; } #category-tabs .tab-single.active label, #category-tabs .tab-single:hover label { background: var(--la-secondary); color: var(--la-secondary-foreground); } /* ================================================================== 09. Product listing / cards ================================================================== */ .products .product > .columns, .product-list .product > .columns, .product-single { background: var(--la-card); border: 1px solid var(--la-border); border-radius: var(--la-radius-lg); box-shadow: var(--la-shadow-sm); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .products .product > .columns:hover, .product-list .product > .columns:hover, .product-single:hover { border-color: color-mix(in oklch, var(--la-primary) 30%, var(--la-border)); box-shadow: var(--la-shadow-md); } .product > .columns:before { display: none; } .p-name, .p-name a, .p-list-descr-name, .p-list-descr-name a { color: var(--la-foreground) !important; font-weight: 700; letter-spacing: -.01em; text-transform: none; } .p-name a:hover, .p-list-descr-name a:hover { color: var(--la-primary) !important; } .p-type-descr, .shortDescription, .p-list-short-descr { color: var(--la-muted-foreground) !important; line-height: 1.55; } .p-final-price, .p-det-main-price, .p-list-price, .price, .product-detail-final-price, .cart-main-price { color: var(--la-primary) !important; font-weight: 800; } .p-cat-availability, .p-list-availability, .availability { color: var(--la-muted-foreground); } /* ================================================================== 10. Semantic product flags ================================================================== */ .bool-icon-single { border-radius: 999px; font-weight: 700; letter-spacing: .01em; } .bool-action, .bool-discount, .bool-sleva { background: var(--la-destructive) !important; color: var(--la-destructive-foreground) !important; } .bool-new, .bool-pripravujeme { background: var(--la-primary) !important; color: var(--la-primary-foreground) !important; } .bool-tip, .bool-freeshipping, .bool-gift { background: var(--la-accent) !important; color: var(--la-accent-foreground) !important; } /* ================================================================== 11. Product detail ================================================================== */ #product-detail, .product-detail { color: var(--la-foreground); } #td-product-detail { background: transparent; } #product-detail .p-info-wrapper { border-color: var(--la-border); font-family: "Plus Jakarta Sans", sans-serif; } #short-description, #product-detail #short-description { color: var(--la-foreground) !important; font-size: var(--la-text-md) !important; font-weight: 400; line-height: 1.5 !important; } #product-detail, #product-detail p, #product-detail li, #product-detail td, #product-detail th, #content-in #product-detail td, #content-in #product-detail th, #product-detail label, #product-detail select, #product-detail option, #product-detail input, #product-detail button, #product-detail a, #product-detail-info, #product-detail-info strong, #tr-links a { font-family: "Plus Jakarta Sans", sans-serif !important; font-size: var(--la-text-md) !important; line-height: 1.5 !important; } #product-detail td:first-child, #product-detail th, #product-detail-info strong { font-weight: 700 !important; } #product-detail .price, #product-detail .p-det-main-price, #product-detail .p-final-price, #product-detail .product-detail-final-price, #product-detail .price-final, #product-detail .price-final-holder { color: var(--la-primary) !important; font-size: var(--la-text-lg) !important; font-weight: 800 !important; letter-spacing: -0.03em !important; line-height: 1.2 !important; } #product-detail .availability-amount, #product-detail .availability-label { font-size: var(--la-text-md) !important; font-weight: 600; } #product-detail select { min-height: 44px; padding: 0 42px 0 14px; background-color: var(--la-card) !important; border: 1px solid var(--la-border) !important; border-radius: var(--la-radius-sm) !important; color: var(--la-foreground) !important; } #product-detail select:focus { border-color: var(--la-primary) !important; box-shadow: 0 0 0 3px color-mix(in oklch, var(--la-primary) 16%, transparent); outline: none; } .advanced-parameter-inner, .variant-list select { border-color: var(--la-border) !important; border-radius: var(--la-radius-sm); } #product-detail .quantity { background: var(--la-card); border: 1px solid var(--la-border) !important; border-radius: var(--la-radius-sm) !important; overflow: hidden; } #product-detail .quantity input { border: 0 !important; box-shadow: none !important; } #product-detail .p-param-block { color: var(--la-muted-foreground); } #product-detail .p-param-block a { color: var(--la-primary); font-weight: 500; text-decoration: none; } #product-detail .p-param-block a:hover { text-decoration: underline; } #product-detail button.add-to-cart-button, #product-detail .add-to-cart-button, #product-detail button[type="submit"].btn-conversion, #product-detail .btn-conversion, #product-detail .button-cart-wrap .b-cart2 { min-height: 48px !important; padding: 0 26px !important; background: var(--la-primary) !important; border: 1px solid var(--la-primary) !important; border-radius: 999px !important; color: #fff !important; font-size: var(--la-text-md) !important; font-weight: 700 !important; box-shadow: none !important; text-shadow: none !important; } #product-detail button.add-to-cart-button:hover, #product-detail .add-to-cart-button:hover, #product-detail button[type="submit"].btn-conversion:hover, #product-detail .btn-conversion:hover, #product-detail .button-cart-wrap .b-cart2:hover { background: var(--la-conversion-hover) !important; border-color: var(--la-conversion-hover) !important; color: #fff !important; } #product-detail small, #product-detail .product-code, #product-detail .product-appendix, #product-detail .p-additional-price, #product-detail .p-price-measure { font-size: var(--la-text-sm) !important; line-height: 1.45 !important; } #tabs-div { border-top-color: var(--la-border) !important; } #content-in #tabs li a, .ui-state-default a { color: var(--la-muted-foreground); } #content-in #tabs li.ui-state-active a, #content-in #tabs li a:hover { color: var(--la-primary); } /* ================================================================== 12. Laudatio rich product-description components ================================================================== */ .ld-description { --ld-gap: clamp(1.25rem, 3vw, 2.5rem); --ld-radius: var(--la-radius-lg); --ld-border: var(--la-border); --ld-muted-bg: var(--la-muted); color: var(--la-foreground); } .ld-parameter, .ld-faq__item { background: var(--la-card); border-color: var(--la-border); } .ld-parameter { box-shadow: var(--la-shadow-sm); } .ld-parameter__value, .ld-faq__question { color: var(--la-foreground); } .ld-parameter__label { color: var(--la-muted-foreground); opacity: 1; } .ld-faq__item[open] { border-color: color-mix(in oklch, var(--la-primary) 35%, var(--la-border)); } .ld-faq__question::after { color: var(--la-primary); } .ld-rich-text--soft { background: var(--la-muted); } /* ================================================================== 12A. Laudatio rich product-description — STRUCTURAL CORE Required by generated .ld-* product descriptions. ================================================================== */ .ld-description, .ld-description * { box-sizing: border-box; } .ld-description img { display: block; max-width: 100%; height: auto; } .ld-block { margin-block: clamp(2rem, 5vw, 4rem); } .ld-block:first-child { margin-top: 0; } .ld-block:last-child { margin-bottom: 0; } /* Image + text */ .ld-image-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ld-gap); align-items: center; } .ld-image-text--left .ld-image-text__media { order: -1; } .ld-image-text__content > :first-child, .ld-rich-text > :first-child { margin-top: 0; } .ld-image-text__content > :last-child, .ld-rich-text > :last-child { margin-bottom: 0; } .ld-image-text__media { margin: 0; } .ld-image-text__media img { width: 100%; } /* Parameters */ .ld-parameters__layout { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr); gap: var(--ld-gap); align-items: center; } .ld-parameters__media { margin: 0; } .ld-parameters__media img { width: 100%; } .ld-parameters__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; } .ld-parameter { min-width: 0; padding: 1rem; border: 1px solid var(--ld-border); border-radius: var(--ld-radius); text-align: center; } .ld-parameter__icon { width: 42px !important; height: 42px !important; max-width: 42px !important; margin: 0 auto .75rem; object-fit: contain; } .ld-parameter__value { display: block; font-weight: 700; line-height: 1.2; } .ld-parameter__label { display: block; margin-top: .35rem; font-size: .9em; } /* FAQ — supports both renderer variants: and plain . */ .ld-faq { display: grid; gap: .625rem; } .ld-faq__item { border: 1px solid var(--ld-border); border-radius: var(--ld-radius); overflow: clip; } .ld-faq__question, .ld-faq__item > summary { position: relative; cursor: pointer; padding: 1rem 3rem 1rem 1rem; font-weight: 700; list-style: none; } .ld-faq__question::-webkit-details-marker, .ld-faq__item > summary::-webkit-details-marker { display: none; } .ld-faq__question::after, .ld-faq__item > summary::after { content: "+"; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); color: var(--la-primary); font-size: 1.4em; line-height: 1; } .ld-faq__item[open] > .ld-faq__question::after, .ld-faq__item[open] > summary::after { content: "−"; } .ld-faq__answer { padding: 0 1rem 1rem; } .ld-faq__answer > :first-child { margin-top: 0; } .ld-faq__answer > :last-child { margin-bottom: 0; } /* Rich text / optional soft grouping */ .ld-rich-text--soft { padding: clamp(1rem, 3vw, 1.5rem); border-radius: var(--ld-radius); } /* ================================================================== 13. Cart ================================================================== */ #cart, #cart table, .single-merchandise, #summary, .checkout-summary { color: var(--la-foreground); } #content-in #cart table td, #content-in #cart table th, .single-merchandise { border-color: var(--la-border) !important; } #summary, .checkout-summary, .cart-summary { background: var(--la-card); border: 1px solid var(--la-border); border-radius: var(--la-radius-lg); } .b-delete { background: var(--la-muted) !important; border-color: var(--la-border) !important; color: var(--la-destructive) !important; } .b-delete:hover { background: color-mix(in oklch, var(--la-destructive) 10%, white) !important; color: var(--la-destructive) !important; } /* ================================================================== 14. Checkout ================================================================== */ .checkout-single-box { background: var(--la-card); border: 1px solid var(--la-border); box-shadow: var(--la-shadow-sm); } .shipping-billing-table tr, .shipping-billing-table td, .shipping-billing-table th { border-color: var(--la-border) !important; } .shipping-billing-table tr:hover td { background: var(--la-secondary); } #order-steps div.order-step-single { color: var(--la-muted-foreground); } #order-steps div.order-step-single.active { color: var(--la-primary); font-weight: 700; } .buttons-order .continue-shopping a { color: var(--la-muted-foreground); } .buttons-order .continue-shopping a:hover { color: var(--la-primary); } /* ================================================================== 15. Messages / states ================================================================== */ .error-message, .search-notice { background: color-mix(in oklch, var(--la-destructive) 9%, white) !important; border-color: color-mix(in oklch, var(--la-destructive) 40%, white) !important; color: var(--la-destructive) !important; border-radius: var(--la-radius-md); } .notice-message, .success-message { background: var(--la-secondary) !important; border-color: color-mix(in oklch, var(--la-primary) 35%, white) !important; color: var(--la-secondary-foreground) !important; border-radius: var(--la-radius-md); } .warning-message { background: color-mix(in oklch, var(--la-accent) 28%, white) !important; border-color: var(--la-accent) !important; color: var(--la-accent-foreground) !important; border-radius: var(--la-radius-md); } /* ================================================================== 16. Modals / overlays ================================================================== */ .lightbox-model-wrapper, #cboxOverlay { background: rgba(20, 28, 24, .45) !important; } .lightbox-model, #colorbox, #cboxLoadedContent { border-radius: var(--la-radius-lg); } .lightbox-model-close { background: var(--la-primary) !important; color: var(--la-primary-foreground) !important; border-radius: 999px; } /* ================================================================== 17. Footer ================================================================== */ #footer { background: var(--la-secondary) !important; color: var(--la-secondary-foreground) !important; } #footer-in { border-top-color: var(--la-border) !important; } #footer .topic, #footer .topic a { color: var(--la-foreground) !important; font-weight: 700; text-transform: none; } #footer-in a:not(.button) { color: var(--la-secondary-foreground) !important; } #footer-in a:not(.button):hover { color: var(--la-primary) !important; } #copyright { background: var(--la-foreground) !important; } #copyright, #copyright a, .copy { color: var(--la-background) !important; } #copyright a:hover { color: var(--la-accent) !important; } /* ================================================================== 18. Preserve Shoptet icon font ================================================================== */ [class*=" shoptet-icon"], [class^="shoptet-icon"], .icon-menu-arrow:before, .box-account-links-trigger:before, .image360:before, .show360image:before, #menu-helper:before, #a-home:before, #header-cart:before, .dropdown__menu--icon:after, .star:before, .star:after, .add-comment .icon-rating:before, .add-comment .icon-comment:before, #lightbox-secNav-btnClose:before, .ccr-single span:before { font-family: shoptet !important; } /* ================================================================== 19. Responsive refinements ================================================================== */ @media (max-width: 767px) { :root { --la-text-xl: 2rem; /* 32 px */ --la-text-lg: 1.5rem; /* 24 px */ --la-text-md: 1rem; /* 16 px */ --la-text-sm: .875rem; /* 14 px */ } .product > .columns, .product-single, .checkout-single-box, .lightbox-model, #category-filter { border-radius: var(--la-radius-md); } /* Shoptet mobile core gives #td-product-detail a grey background. */ #td-product-detail { background: var(--la-card) !important; border-radius: var(--la-radius-md); } #navigation { margin-bottom: 1rem; } .ld-image-text, .ld-parameters__layout { grid-template-columns: 1fr; } .ld-image-text--left .ld-image-text__media { order: 0; } .ld-image-text__media { order: -1; } .ld-parameters__items { grid-template-columns: 1fr; } .ld-parameters__media { max-width: 360px; margin-inline: auto; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* ================================================================== 20. Product-card CTA ================================================================== */ /* Exact Shoptet product-card link used by this template. */ a.button-content-product.button-content.small.button, a.button-content-product.button-content.small.button:link, a.button-content-product.button-content.small.button:visited { background: var(--la-primary) !important; border-color: var(--la-primary) !important; border-radius: 999px !important; color: #fff !important; opacity: 1 !important; box-shadow: none !important; text-decoration: none !important; text-shadow: none !important; } a.button-content-product.button-content.small.button:hover, a.button-content-product.button-content.small.button:focus, a.button-content-product.button-content.small.button:active { background: var(--la-conversion-hover) !important; border-color: var(--la-conversion-hover) !important; color: #fff !important; } .product .button-wrap { background: transparent !important; border: 0 !important; } /* ================================================================== 21. Text casing ================================================================== */ /* Laudatio does not force uppercase anywhere. Text is displayed as entered. */ * { text-transform: none !important; }