/* Theme Name: DevBhoomi Theme URI: https://devbhoomisky.com Author: DevBhoomi Description: Lean block theme for a drone and UAV parts marketplace. WooCommerce-ready. Colours, fonts, sizes and spacing are all editable in Appearance > Editor > Styles. Requires at least: 6.7 Requires PHP: 7.4 Version: 0.11.6 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: devbhoomi */ /* * Keep this file small. Colours, fonts, sizes and spacing come from theme.json * (edit them in the Site Editor). Only things theme.json cannot express live here, * and they use the same CSS variables so they follow your Styles settings. */ /* Top bar */ .dbh-topbar { padding-block: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--small); } .dbh-topbar p { margin: 0; } .dbh-topbar a { color: inherit; text-decoration: underline; } /* Header */ .dbh-header { background: var(--wp--preset--color--base); border-bottom: 1px solid var(--wp--preset--color--border); padding-block: var(--wp--preset--spacing--40); } .dbh-header .wp-block-search { flex: 1 1 320px; max-width: 720px; } .dbh-header .wp-block-search__inside-wrapper { border: 2px solid var(--wp--preset--color--primary); border-radius: var(--wp--custom--radius); overflow: hidden; background: var(--wp--preset--color--base); } .dbh-header .wp-block-search__input { border: 0; min-height: 44px; padding-inline: var(--wp--preset--spacing--40); } .dbh-header .wp-block-search__button { margin: 0; border: 0; border-radius: 0; min-height: 44px; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); font-weight: 600; } .dbh-nav { background: var(--wp--preset--color--base); border-bottom: 1px solid var(--wp--preset--color--border); } .dbh-nav .wp-block-navigation { font-weight: 500; } /* Boxed sections and tiles */ .dbh-section, .dbh-tile { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius); padding: var(--wp--preset--spacing--50); } .dbh-tile { padding: var(--wp--preset--spacing--40); transition: border-color .15s ease, box-shadow .15s ease; } .dbh-tile:hover { border-color: var(--wp--preset--color--muted); box-shadow: 0 4px 16px rgb(11 34 57 / 12%); } .dbh-section > .wp-block-group:first-child { align-items: baseline; } /* Hero */ .dbh-hero .wp-block-cover__inner-container { max-width: 36rem; margin-inline: 0; padding: var(--wp--preset--spacing--60); } .dbh-hero { border-radius: var(--wp--custom--radius); overflow: hidden; } /* Category list in the hero sidebar */ .dbh-sidebar .wp-block-woocommerce-product-categories { margin: 0; padding: 0; list-style: none; } .dbh-sidebar .wc-block-product-categories-list { margin: 0; padding: 0; list-style: none; } .dbh-sidebar .wc-block-product-categories-list-item { border-top: 1px solid var(--wp--preset--color--border); } .dbh-sidebar .wc-block-product-categories-list-item a { display: block; padding: 0.6rem 0; color: var(--wp--preset--color--contrast); text-decoration: none; } .dbh-sidebar .wc-block-product-categories-list-item a:hover { color: var(--wp--preset--color--primary); } /* Trust row icons */ .dbh-icon { margin: 0; flex: none; } .dbh-tile h4 { margin: 0; } /* Promo tiles */ /* WooCommerce product cards (Product Collection block) */ .wp-block-woocommerce-product-collection .wc-block-product { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius); padding: var(--wp--preset--spacing--40); transition: border-color .15s ease, box-shadow .15s ease; } .wp-block-woocommerce-product-collection .wc-block-product:hover { border-color: var(--wp--preset--color--muted); box-shadow: 0 4px 16px rgb(11 34 57 / 12%); } .wp-block-woocommerce-product-collection .wp-block-post-title { font-size: var(--wp--preset--font-size--medium); font-weight: 600; line-height: 1.3; } .wp-block-woocommerce-product-collection .wp-block-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; } .wp-block-woocommerce-product-collection .wc-block-components-product-price { font-weight: 700; font-size: var(--wp--preset--font-size--large); } .wp-block-woocommerce-product-collection .wc-block-components-product-price del { color: var(--wp--preset--color--muted); font-weight: 400; font-size: var(--wp--preset--font-size--small); } .wp-block-woocommerce-product-collection .wp-block-button__link, .wp-block-woocommerce-product-collection .wc-block-components-product-button__button { width: 100%; justify-content: center; } .wc-block-components-product-sale-badge { background: var(--wp--preset--color--sale); color: var(--wp--preset--color--base); border: 0; border-radius: 4px; font-weight: 700; } /* Footer */ .dbh-footer a { color: inherit; text-decoration: none; } .dbh-footer a:hover { text-decoration: underline; } .dbh-footer ul { list-style: none; margin: 0; padding: 0; } .dbh-footer li { padding-block: 0.25rem; } /* Page body, banner, footer bottom row, site title */ .dbh-main { padding-block: var(--wp--preset--spacing--50); } .dbh-main .wp-block-post-content > * + * { margin-block-start: var(--wp--preset--spacing--50); } .dbh-banner { border-radius: var(--wp--custom--radius); padding: var(--wp--preset--spacing--60); } .dbh-footer-bottom { border-top: 1px solid rgb(255 255 255 / 15%); padding-top: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--50); } .dbh-header .wp-block-site-title { margin: 0; font-weight: 700; } .dbh-header .wp-block-site-title a { color: var(--wp--preset--color--navy); text-decoration: none; } .dbh-footer .wp-block-site-title { margin: 0; font-weight: 700; } /* Accessibility */ :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } /* Product cards: equal height, image box, buttons on one line */ .wp-block-woocommerce-product-collection .wc-block-product { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; } .wp-block-woocommerce-product-collection .wc-block-components-product-image { position: relative; aspect-ratio: 1 / 1; margin-bottom: var(--wp--preset--spacing--30); } .wp-block-woocommerce-product-collection .wc-block-components-product-image a { display: block; height: 100%; } .wp-block-woocommerce-product-collection .wc-block-components-product-image img { width: 100%; height: 100%; object-fit: contain; } .wp-block-woocommerce-product-collection .wp-block-post-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: calc(3 * 1.3em); margin: 0 0 var(--wp--preset--spacing--20); } .wp-block-woocommerce-product-collection .wc-block-components-product-price { margin-bottom: var(--wp--preset--spacing--30); } .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-button { margin-top: auto; } /* Quick view */ .dbh-qv__row { display: flex; gap: 8px; align-items: stretch; margin-top: auto; } .dbh-qv__row > .wp-block-woocommerce-product-button { flex: 1 1 auto; margin: 0; } .dbh-qv__trigger { flex: none; min-height: 44px; padding: 0 14px; font: inherit; font-size: var(--wp--preset--font-size--small); font-weight: 500; background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius); cursor: pointer; } .dbh-qv__trigger:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); } .dbh-qv { width: min(860px, 94vw); max-height: 90vh; padding: 0; border: 0; border-radius: var(--wp--custom--radius); overflow: auto; } .dbh-qv::backdrop { background: rgb(11 34 57 / 60%); } .dbh-qv__close { position: absolute; top: 8px; right: 12px; z-index: 1; background: none; border: 0; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--wp--preset--color--contrast); } .dbh-qv__body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--50); padding: var(--wp--preset--spacing--50); } .dbh-qv__img img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; } .dbh-qv__title { margin: 0 0 var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--x-large); } .dbh-qv__price { font-size: var(--wp--preset--font-size--large); font-weight: 700; margin-bottom: var(--wp--preset--spacing--30); } .dbh-qv__sku { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); } .dbh-qv__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--40); } .dbh-qv__loading { padding: var(--wp--preset--spacing--50); } @media (max-width: 640px) { .dbh-qv__body { grid-template-columns: 1fr; } } /* Hero row, as in the mockup: sidebar on the left, banner and promo tiles on the right */ .dbh-herorow { gap: 20px; flex-wrap: nowrap; } @media (max-width: 781px) { .dbh-herorow { flex-wrap: wrap; } } .dbh-herocol > * + * { margin-block-start: 20px; } .dbh-herocol .dbh-promorow { gap: 16px; } /* Sidebar box and category list */ .dbh-sidebar-box { padding: 0; overflow: hidden; } .dbh-sidebar-title { margin: 0; padding: 14px 16px; font-size: var(--wp--preset--font-size--medium); border-bottom: 1px solid var(--wp--preset--color--border); } .dbh-catlist { list-style: none; margin: 0; padding: 0; } .dbh-catlist li { margin: 0; padding: 0; border-bottom: 1px solid var(--wp--preset--color--border); } .dbh-catlist li:last-child { border-bottom: 0; } .dbh-catlist a { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 16px; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast); text-decoration: none; } .dbh-catlist a::after { content: ""; width: 6px; height: 6px; border: solid var(--wp--preset--color--muted); border-width: 0 1.6px 1.6px 0; transform: rotate(-45deg); flex: none; } .dbh-catlist a:hover { color: var(--wp--preset--color--primary); background: var(--wp--preset--color--surface); } .dbh-catlist .dbh-catall a { min-height: 46px; font-weight: 600; color: var(--wp--preset--color--primary); } .dbh-catlist .dbh-catall a::after { display: none; } /* Hero banner: text on the left over a fading dark overlay */ .dbh-hero { background: var(--wp--preset--color--navy); justify-content: flex-start; } .dbh-hero .wp-block-cover__background { opacity: 1 !important; background: linear-gradient(90deg, rgb(8 24 40 / 92%) 0%, rgb(8 24 40 / 70%) 45%, rgb(8 24 40 / 0%) 85%) !important; } .dbh-hero .wp-block-cover__inner-container { max-width: 36rem; width: 100%; margin: 0; padding: var(--wp--preset--spacing--60); } .dbh-hero h1 { margin: 0; } /* Promo tiles: image on the left, whole tile clickable */ .dbh-promo { position: relative; height: 100%; box-sizing: border-box; padding: 12px; gap: 14px; } .dbh-promo h3 { margin: 0; line-height: 1.25; } .dbh-promo p { margin: 0; } .dbh-promo a { text-decoration: none; color: var(--wp--preset--color--primary); } .dbh-promo a::after { content: ""; position: absolute; inset: 0; } /* Category tiles block */ .dbh-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; } a.dbh-promo { display: flex; align-items: center; gap: 14px; padding: 12px; color: inherit; text-decoration: none; } .dbh-promo__img { flex: none; width: 84px; height: 84px; object-fit: contain; background: var(--wp--preset--color--base); } .dbh-promo__img--empty { display: block; background: var(--wp--preset--color--surface); border-radius: var(--wp--custom--radius); } .dbh-promo__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dbh-promo__title { font-weight: 700; font-size: var(--wp--preset--font-size--medium); line-height: 1.25; } .dbh-promo__sub { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); } .dbh-promo__more { font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--primary); margin-top: 4px; } /* Card buttons: Add to cart fills the row, Quick view beside it, both the same height and edges */ .wp-block-woocommerce-product-collection .dbh-qv__row { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 8px; width: 100%; margin-top: auto; } .wp-block-woocommerce-product-collection .dbh-qv__row > .wp-block-woocommerce-product-button { display: flex; flex: 1 1 auto; align-items: stretch; width: auto; min-width: 0; margin: 0; padding: 0; } .wp-block-woocommerce-product-collection .dbh-qv__row .wc-block-components-product-button { display: flex; flex: 1 1 auto; align-items: stretch; width: 100%; margin: 0; } .wp-block-woocommerce-product-collection .dbh-qv__row .wc-block-components-product-button__button, .wp-block-woocommerce-product-collection .dbh-qv__row .wp-block-button__link { flex: 1 1 auto; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 0; padding: 0 14px; font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: 1.2; } .wp-block-woocommerce-product-collection .dbh-qv__row .added_to_cart { display: none; } .wp-block-woocommerce-product-collection .dbh-qv__row .dbh-qv__trigger { box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; margin: 0; line-height: 1.2; } /* Customer reviews row */ .dbh-reviews { position: relative; } .dbh-reviews__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; } .dbh-reviews__track > * { margin: 0; } .dbh-review { flex: 0 0 min(320px, 82%); box-sizing: border-box; scroll-snap-align: start; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius); padding: var(--wp--preset--spacing--40); } .dbh-review p { margin: 0; } .dbh-review > * + * { margin-block-start: var(--wp--preset--spacing--30); } .dbh-review--summary { flex-basis: min(260px, 82%); background: linear-gradient(135deg, var(--wp--preset--color--surface), var(--wp--preset--color--base)); border-left: 4px solid var(--wp--preset--color--primary); } .dbh-review--summary h3 { margin: 0; } .dbh-review__head { gap: 12px; } .dbh-avatar { flex: none; width: 40px; height: 40px; display: flex !important; align-items: center; justify-content: center; border-radius: 50%; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); font-weight: 600; } .dbh-stars { color: #F5A400; letter-spacing: 2px; font-size: 1.1rem; } .dbh-reviews__wrap { position: relative; } .dbh-reviews__nav { position: absolute; top: calc(50% - 4px); transform: translateY(-50%); z-index: 2; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0 0 3px; border-radius: 50%; border: 1px solid var(--wp--preset--color--border); background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgb(11 34 57 / 15%); } .dbh-reviews__nav--prev { left: 6px; } .dbh-reviews__nav--next { right: 6px; } .dbh-reviews__nav:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); } /* "All Categories" menu in the header */ .dbh-nav .wp-block-group.alignwide { align-items: stretch; gap: var(--wp--preset--spacing--40); } .dbh-catmenu { position: relative; } .dbh-catmenu__btn { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--navy); border: 0; font: inherit; font-weight: 600; cursor: pointer; min-width: 220px; } .dbh-catmenu__icon { width: 16px; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; } .dbh-catmenu__caret { margin-left: auto; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); } .dbh-catmenu__panel { display: none; position: absolute; z-index: 50; top: 100%; left: 0; width: min(1000px, 94vw); max-height: 75vh; overflow-y: auto; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: 0 0 var(--wp--custom--radius) var(--wp--custom--radius); box-shadow: 0 10px 30px rgb(11 34 57 / 18%); padding: var(--wp--preset--spacing--40); } .dbh-catmenu.is-open .dbh-catmenu__panel { display: block; } @media (hover: hover) { .dbh-catmenu:hover .dbh-catmenu__panel, .dbh-catmenu:focus-within .dbh-catmenu__panel { display: block; } } .dbh-catmenu__row { display: flex; align-items: center; } .dbh-catmenu__row .dbh-catmenu__head { flex: 1 1 auto; } .dbh-catmenu__toggle { display: none; } .dbh-catmenu__groups { list-style: none; margin: 0; padding: 0; column-count: var(--dbh-cols, 4); column-gap: var(--wp--preset--spacing--50); } .dbh-catmenu__group { break-inside: avoid; margin: 0 0 var(--wp--preset--spacing--40); } .dbh-catmenu__group ul { list-style: none; margin: 4px 0 0; padding: 0; } .dbh-catmenu__group li { margin: 0; } .dbh-catmenu a { text-decoration: none; color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--small); } .dbh-catmenu__group li a { display: block; padding: 3px 0; color: var(--wp--preset--color--muted); } .dbh-catmenu a.dbh-catmenu__head { font-weight: 700; color: var(--wp--preset--color--navy); font-size: var(--wp--preset--font-size--medium); } .dbh-catmenu a:hover { color: var(--wp--preset--color--primary); } .dbh-catmenu a.dbh-catmenu__all { display: inline-block; margin-top: var(--wp--preset--spacing--30); font-weight: 600; color: var(--wp--preset--color--primary); } /* Reviews: same inner padding as the other sections; arrows sit on the edges, not over the first card */ .dbh-section.dbh-reviews { padding: var(--wp--preset--spacing--50); box-sizing: border-box; } .dbh-reviews__nav--prev { left: -14px; } .dbh-reviews__nav--next { right: -14px; } /* Phones and small tablets */ @media (max-width: 781px) { /* Banner first, categories as a swipeable chip row under it */ .dbh-herocol { order: -1; } .dbh-sidebar-box { border: 0; background: transparent; padding: 0; } .dbh-sidebar-title { display: none; } .dbh-catlist { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } .dbh-catlist::-webkit-scrollbar { display: none; } .dbh-catlist li { flex: none; border: 1px solid var(--wp--preset--color--border); border-radius: 999px; background: var(--wp--preset--color--base); } .dbh-catlist li:last-child { border: 1px solid var(--wp--preset--color--border); } .dbh-catlist a { min-height: 38px; padding: 0 14px; white-space: nowrap; } .dbh-catlist a::after { display: none; } .dbh-hero { min-height: 300px !important; } .dbh-hero .wp-block-cover__inner-container { padding: var(--wp--preset--spacing--40); } .dbh-section { padding: var(--wp--preset--spacing--40); } .dbh-section.dbh-reviews { padding: var(--wp--preset--spacing--40); } } @media (max-width: 600px) { /* Narrow product cards: Add to cart and Quick view stack, both full width */ .wp-block-woocommerce-product-collection .dbh-qv__row { flex-direction: column; } .wp-block-woocommerce-product-collection .dbh-qv__row .dbh-qv__trigger { width: 100%; } .wp-block-woocommerce-product-collection .wc-block-product { padding: var(--wp--preset--spacing--30); } .dbh-reviews__nav { display: none; } .dbh-topbar .alignwide { justify-content: center; text-align: center; } } /* All Categories on phones: full-width panel, tap a row's arrow to open its subcategories */ @media (max-width: 781px) { .dbh-nav { position: relative; } .dbh-nav .wp-block-group.alignwide { flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 8px; } .dbh-catmenu { position: static; flex: 1 1 auto; } .dbh-catmenu__btn { min-width: 0; width: 100%; min-height: 44px; } .dbh-catmenu__panel { left: 0; right: 0; width: auto; max-height: 70vh; border-radius: 0; padding: 0; } .dbh-catmenu__groups { column-count: 1; } .dbh-catmenu__group { margin: 0; border-bottom: 1px solid var(--wp--preset--color--border); } .dbh-catmenu__row { min-height: 48px; padding-left: 16px; } .dbh-catmenu a.dbh-catmenu__head { font-size: var(--wp--preset--font-size--small); padding: 12px 0; } .dbh-catmenu__toggle { display: block; flex: none; width: 48px; height: 48px; border: 0; background: transparent; cursor: pointer; position: relative; } .dbh-catmenu__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border: solid var(--wp--preset--color--muted); border-width: 0 2px 2px 0; transform: translate(-50%, -70%) rotate(45deg); } .dbh-catmenu__group.is-open .dbh-catmenu__toggle::after { transform: translate(-50%, -30%) rotate(-135deg); } .dbh-catmenu__group ul { display: none; margin: 0; padding: 0 16px 10px 32px; background: var(--wp--preset--color--surface); } .dbh-catmenu__group.is-open ul { display: block; } .dbh-catmenu__group li a { padding: 9px 0; } .dbh-catmenu a.dbh-catmenu__all { display: block; margin: 0; padding: 14px 16px; } } /* Brand logo slider: bordered tiles, as in the original Our Partners row */ .dbh-logos__wrap { overflow: hidden; container-type: inline-size; --dbh-vis: 6; } .dbh-logos__track { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 16px; overflow-x: auto; scrollbar-width: none; padding-block: 2px; } .dbh-logos__track::-webkit-scrollbar { display: none; } .dbh-brandtile { flex: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 180px; width: calc((100cqw - 16px * (var(--dbh-vis) - 1)) / var(--dbh-vis)); aspect-ratio: 5 / 2; padding: 8px 14px; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius); color: var(--wp--preset--color--contrast); font-weight: 700; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; } .dbh-brandtile img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; } .dbh-brandtile:hover { border-color: var(--wp--preset--color--muted); box-shadow: 0 4px 16px rgb(11 34 57 / 12%); } .dbh-logos__track.is-marquee { overflow: visible; width: max-content; animation: dbh-marquee var(--dbh-logos-time, 30s) linear infinite; } .dbh-logos__wrap:hover .is-marquee { animation-play-state: paused; } @keyframes dbh-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } } @media (prefers-reduced-motion: reduce) { .dbh-logos__track.is-marquee { animation: none; overflow-x: auto; width: auto; } } @media (max-width: 600px) { .dbh-logos__wrap { --dbh-vis: 3 !important; } .dbh-brandtile { padding: 6px 8px; } } /* Shop view switcher */ .dbh-viewbar { display: flex; gap: 4px; align-items: center; } .dbh-viewbar__btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--wp--preset--color--base); color: var(--wp--preset--color--muted); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius); cursor: pointer; } .dbh-viewbar__btn:hover { color: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); } .dbh-viewbar__btn[aria-pressed="true"] { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); } /* Grid: 2, 3 or 4 columns */ .dbh-shopview[data-view="grid"] .wc-block-product-template, .dbh-shopview[data-view="grid"] .wp-block-woocommerce-product-template { display: grid !important; gap: 16px; grid-template-columns: repeat(var(--dbh-shop-cols, 4), minmax(0, 1fr)) !important; } .dbh-shopview[data-view="grid"][data-cols="2"] { --dbh-shop-cols: 2; } .dbh-shopview[data-view="grid"][data-cols="3"] { --dbh-shop-cols: 3; } .dbh-shopview[data-view="grid"][data-cols="4"] { --dbh-shop-cols: 4; } .dbh-shopview[data-view="grid"] .wc-block-product { width: auto !important; max-width: none !important; margin: 0 !important; } /* List: image on the left, name and price in the middle, buttons on the right */ .dbh-shopview[data-view="list"] .wc-block-product-template, .dbh-shopview[data-view="list"] .wp-block-woocommerce-product-template { display: grid !important; gap: 12px; grid-template-columns: minmax(0, 1fr) !important; } .dbh-shopview[data-view="list"] .wc-block-product { width: auto !important; max-width: none !important; margin: 0 !important; display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 20px; align-items: center; height: auto; } .dbh-shopview[data-view="list"] .wc-block-product > .wp-block-woocommerce-product-image { grid-column: 1; grid-row: 1 / span 2; margin: 0; } .dbh-shopview[data-view="list"] .wc-block-product > .wp-block-post-title { grid-column: 2; grid-row: 1; align-self: end; min-height: 0; margin: 0 0 4px; } .dbh-shopview[data-view="list"] .wc-block-product > .wp-block-woocommerce-product-price { grid-column: 2; grid-row: 2; align-self: start; margin: 0; } .dbh-shopview[data-view="list"] .wc-block-product > .dbh-qv__row, .dbh-shopview[data-view="list"] .wc-block-product > .wp-block-woocommerce-product-button { grid-column: 3; grid-row: 1 / span 2; margin: 0; width: 240px; } @media (max-width: 781px) { .dbh-shopview[data-view="grid"] .wc-block-product-template, .dbh-shopview[data-view="grid"] .wp-block-woocommerce-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; } .dbh-viewbar__btn--wide { display: none; } .dbh-shopview[data-view="list"] .wc-block-product { grid-template-columns: 110px minmax(0, 1fr); row-gap: 6px; column-gap: 14px; } .dbh-shopview[data-view="list"] .wc-block-product > .dbh-qv__row, .dbh-shopview[data-view="list"] .wc-block-product > .wp-block-woocommerce-product-button { grid-column: 1 / -1; grid-row: 3; width: auto; } .wp-block-woocommerce-product-collection.dbh-shopview[data-view="list"] .dbh-qv__row { flex-direction: row; } .wp-block-woocommerce-product-collection.dbh-shopview[data-view="list"] .dbh-qv__row .dbh-qv__trigger { width: auto; } } /* ===== Forms: Ninja Forms, Contact Form 7, WPForms, Gravity Forms, Jetpack, WooCommerce ===== */ :is(.nf-form-cont, .wpcf7, .wpforms-container, .gform_wrapper, .contact-form, .woocommerce-checkout, .woocommerce-account, .woocommerce-cart, .woocommerce form.woocommerce-form, .comment-respond) { --dbh-f-border: var(--wp--preset--color--border); --dbh-f-focus: var(--wp--preset--color--primary); --dbh-f-radius: var(--wp--custom--radius, 6px); font-size: var(--wp--preset--font-size--medium); } /* wrapper card for the plugin forms */ :is(.nf-form-cont, .wpcf7, .wpforms-container, .gform_wrapper, .contact-form) { background: var(--wp--preset--color--base); border: 1px solid var(--dbh-f-border); border-radius: var(--dbh-f-radius); padding: clamp(1rem, 3vw, 2rem); margin-block: var(--wp--preset--spacing--50); } /* headings inside forms */ :is(.nf-form-cont, .wpforms-container, .gform_wrapper) :is(h1, h2, h3, h4) { font-size: var(--wp--preset--font-size--large); margin: 1.5rem 0 .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--dbh-f-border); } :is(.nf-form-cont, .wpforms-container, .gform_wrapper) :is(h1, h2, h3, h4):first-child { margin-top: 0; } .nf-form-title h3 { border: 0; padding: 0; } /* labels */ :is(.nf-form-cont, .wpcf7, .wpforms-container, .gform_wrapper, .contact-form, .woocommerce form .form-row) label, .nf-field-label label, .wpforms-field-label, .gfield_label { display: block; font-weight: 600; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast); margin-bottom: .35rem; } :is(.nf-form-cont, .wpcf7, .wpforms-container, .gform_wrapper, .contact-form) label :is(input[type=checkbox], input[type=radio]) { margin-right: .5rem; } .nf-form-cont .ninja-forms-req-symbol, .wpforms-required-label, .gfield_required, .woocommerce form .required { color: var(--wp--preset--color--sale); text-decoration: none; } .nf-form-fields-required { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); margin-bottom: 1rem; } /* inputs */ :is(.nf-form-cont, .wpcf7, .wpforms-container, .gform_wrapper, .contact-form, .woocommerce form .form-row, .comment-respond) :is(input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=file], [type=hidden], [type=image], [type=range], [type=color]), select, textarea) { width: 100%; max-width: 100%; box-sizing: border-box; min-height: 44px; padding: .6rem .8rem; font: inherit; color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--base); border: 1px solid var(--dbh-f-border); border-radius: var(--dbh-f-radius); box-shadow: none; transition: border-color .15s, box-shadow .15s; } :is(.nf-form-cont, .wpcf7, .wpforms-container, .gform_wrapper, .contact-form, .woocommerce form .form-row, .comment-respond) textarea { min-height: 140px; resize: vertical; line-height: 1.5; } :is(.nf-form-cont, .wpcf7, .wpforms-container, .gform_wrapper, .contact-form, .woocommerce form .form-row, .comment-respond) :is(input, select, textarea):focus { outline: 0; border-color: var(--dbh-f-focus); box-shadow: 0 0 0 3px rgb(0 119 182 / 18%); } :is(.nf-form-cont, .wpcf7, .wpforms-container, .gform_wrapper, .contact-form) ::placeholder { color: var(--wp--preset--color--muted); opacity: .8; } :is(.nf-form-cont, .wpcf7, .wpforms-container, .gform_wrapper, .contact-form, .woocommerce form .form-row) select { appearance: none; padding-right: 2.25rem; background: var(--wp--preset--color--base) url("data:image/svg+xml;utf8,") no-repeat right .75rem center; } :is(.nf-form-cont, .wpcf7, .wpforms-container, .gform_wrapper, .contact-form) input[type=file] { width: 100%; padding: .5rem; font: inherit; font-size: var(--wp--preset--font-size--small); border: 1px dashed var(--dbh-f-border); border-radius: var(--dbh-f-radius); background: var(--wp--preset--color--surface); } :is(.nf-form-cont, .wpcf7, .wpforms-container, .gform_wrapper, .contact-form) input[type=file]::file-selector-button { margin-right: .75rem; padding: .45rem .9rem; border: 1px solid var(--dbh-f-border); border-radius: var(--dbh-f-radius); background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); font: inherit; font-weight: 600; cursor: pointer; } :is(.nf-form-cont, .wpcf7, .wpforms-container, .gform_wrapper, .contact-form) :is(input[type=checkbox], input[type=radio]) { accent-color: var(--wp--preset--color--primary); width: 1.05rem; height: 1.05rem; } /* spacing between fields */ .nf-field-container, .wpforms-field, .gfield, .wpcf7-form > p, .wpcf7-form .wpcf7-form-control-wrap, .woocommerce form .form-row { margin-bottom: 1.1rem; } .wpcf7-form > p { margin-block: 0 1.1rem; } .wpcf7-form-control-wrap { display: block; } .nf-field-container .nf-field-description, .wpforms-field-description, .gfield_description { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); margin-top: .3rem; } /* Ninja Forms: leave its own row/cell widths alone, only tidy the lists */ .nf-form-cont .list-checkbox-wrap li, .nf-form-cont .list-radio-wrap li { list-style: none; margin-bottom: .4rem; } /* WPForms / Gravity column grids */ .wpforms-container .wpforms-field-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1.25rem; } .wpforms-container .wpforms-field { grid-column: 1 / -1; padding: 0; } .wpforms-container .wpforms-field.wpforms-one-half, .wpforms-container .wpforms-field.wpforms-one-third { grid-column: auto; } /* buttons */ :is(.nf-form-cont, .wpcf7, .wpforms-container, .gform_wrapper, .contact-form) :is(input[type=submit], input[type=button], button[type=submit], .nf-field-element input[type=button], .wpforms-submit, .gform_button, .wpcf7-submit, .pushbutton-wide) { appearance: none; width: auto; min-height: 46px; padding: .7rem 1.75rem; font: inherit; font-weight: 600; line-height: 1.2; cursor: pointer; color: var(--wp--preset--color--base); background: var(--wp--preset--color--primary); border: 1px solid var(--wp--preset--color--primary); border-radius: var(--dbh-f-radius); transition: background .15s, border-color .15s, box-shadow .15s; } :is(.nf-form-cont, .wpcf7, .wpforms-container, .gform_wrapper, .contact-form) :is(input[type=submit], input[type=button], button[type=submit], .wpforms-submit, .gform_button, .wpcf7-submit):is(:hover, :focus-visible) { background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); } :is(.nf-form-cont, .wpcf7, .wpforms-container, .gform_wrapper) :is(input[type=submit], button[type=submit]):focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } .nf-form-cont .submit-container, .nf-form-cont .nf-field-container.submit-container { margin-bottom: 0; } .nf-form-cont .nf-field-container.submit-container .nf-field-element { text-align: left; } .wpcf7-spinner { margin-inline: .75rem; } /* validation + messages */ .nf-error .ninja-forms-field, .wpcf7-not-valid, .wpforms-error:is(input, select, textarea), .gfield_error :is(input, select, textarea) { border-color: var(--wp--preset--color--sale) !important; } .nf-error-msg, .nf-error-wrap, .wpcf7-not-valid-tip, label.wpforms-error, .validation_message { color: var(--wp--preset--color--sale); font-size: var(--wp--preset--font-size--small); font-weight: 500; margin-top: .3rem; display: block; } .nf-response-msg, .wpcf7-response-output, .wpforms-confirmation-container-full, .gform_confirmation_message { margin: 1rem 0 0; padding: .8rem 1rem; border: 1px solid var(--dbh-f-border); border-left: 4px solid var(--wp--preset--color--primary); border-radius: var(--dbh-f-radius); background: var(--wp--preset--color--surface); } .wpcf7 form.sent .wpcf7-response-output, .wpforms-confirmation-container-full { border-left-color: var(--wp--preset--color--success); } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-left-color: var(--wp--preset--color--sale); } /* WooCommerce classic forms (checkout, account, login, coupon) */ .woocommerce form .form-row { padding: 0; } .woocommerce form .form-row :is(.input-text, select) { min-height: 44px; } .woocommerce form .select2-container .select2-selection--single { height: 44px; border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius, 6px); } .woocommerce form .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px; padding-left: .8rem; } .woocommerce form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; } .woocommerce-checkout #customer_details h3, .woocommerce-checkout #order_review_heading { font-size: var(--wp--preset--font-size--large); } .woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register, .woocommerce form.lost_reset_password { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius, 6px); padding: 1.25rem; } .woocommerce :is(button.button, a.button, input.button, #respond input#submit) { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); border-radius: var(--wp--custom--radius, 6px); font-weight: 600; padding: .7rem 1.5rem; } .woocommerce :is(button.button, a.button, input.button, #respond input#submit):hover { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--base); } .woocommerce :is(button.button.alt, a.button.alt, input.button.alt) { background: var(--wp--preset--color--primary); } @media (max-width: 781px) { .wpforms-container .wpforms-field-container { grid-template-columns: 1fr; } :is(.nf-form-cont, .wpcf7, .wpforms-container, .gform_wrapper, .contact-form) :is(input[type=submit], button[type=submit], .wpforms-submit, .wpcf7-submit) { width: 100%; } :is(.nf-form-cont, .wpcf7, .wpforms-container, .gform_wrapper, .contact-form) :is(input, select, textarea) { font-size: 16px; } /* stops iOS zoom on focus */ } /* ===== Blog: index / archive / search / single ===== */ .dbh-blog__title { margin: 0 0 .25rem; } .dbh-blog__intro { margin: 0 0 var(--wp--preset--spacing--50); } .dbh-blog .wp-block-query-title { margin-bottom: var(--wp--preset--spacing--50); } .dbh-blog :where(.dbh-postgrid) { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--50); } .dbh-postgrid > li { margin: 0; display: flex; } .dbh-postcard { display: flex; flex-direction: column; width: 100%; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius, 6px); overflow: hidden; transition: box-shadow .2s, border-color .2s, transform .2s; } .dbh-postcard:hover { border-color: var(--wp--preset--color--muted); box-shadow: 0 4px 16px rgb(11 34 57 / 12%); transform: translateY(-2px); } .dbh-postcard__img { margin: 0; background: var(--wp--preset--color--surface); } .dbh-postcard__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .dbh-postcard:hover .dbh-postcard__img img { transform: scale(1.03); } .dbh-postcard__img:not(:has(img)) { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--wp--preset--color--navy), var(--wp--preset--color--primary)); } .dbh-postcard__body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.25rem 1.25rem; gap: .5rem; } .dbh-postcard__cat { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0; } .dbh-postcard__cat a { color: var(--wp--preset--color--primary); text-decoration: none; } .dbh-postcard__title { font-size: 1.15rem; line-height: 1.35; margin: 0; } .dbh-postcard__title a { color: var(--wp--preset--color--contrast); text-decoration: none; } .dbh-postcard__title a:hover { color: var(--wp--preset--color--primary); } .dbh-postcard__excerpt { margin: 0; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); flex: 1; } .dbh-postcard__excerpt p { margin: 0 0 .5rem; } .dbh-postcard__excerpt .wp-block-post-excerpt__more-link { font-weight: 600; color: var(--wp--preset--color--primary); text-decoration: none; } .dbh-postcard__date { font-size: .8rem; color: var(--wp--preset--color--muted); margin: 0; padding-top: .6rem; border-top: 1px solid var(--wp--preset--color--border); } .dbh-pagination { margin-top: var(--wp--preset--spacing--60); gap: .4rem; } .dbh-pagination :is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next) { display: inline-block; min-width: 40px; padding: .45rem .8rem; text-align: center; border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius, 6px); background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); text-decoration: none; margin: 0; } .dbh-pagination .page-numbers.current { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); } .dbh-pagination a:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); } /* single post */ .dbh-article { padding-block: var(--wp--preset--spacing--60); } .dbh-article > * { margin-block: 0; } .dbh-article h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.2; margin: .4rem 0 .9rem; } .dbh-article__meta { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); gap: 0 .6rem; margin-bottom: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--40); border-bottom: 1px solid var(--wp--preset--color--border); } .dbh-article__meta .wp-block-post-author-name { font-weight: 600; color: var(--wp--preset--color--contrast); } .dbh-article__meta .wp-block-post-author-name::after { content: "\00B7"; margin-left: .6rem; color: var(--wp--preset--color--muted); } /* featured image: neat, centred, never full-bleed */ .dbh-article .dbh-article__img { max-width: 960px; margin: 0 auto var(--wp--preset--spacing--50); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius, 6px); overflow: hidden; background: var(--wp--preset--color--base); } .dbh-article .dbh-article__img img { display: block; width: 100%; height: 100%; max-height: 460px; object-fit: contain; } /* article body as a readable white card */ .dbh-article .wp-block-post-content { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius, 6px); padding: clamp(1.25rem, 4vw, 2.5rem); font-size: 1.0625rem; line-height: 1.75; overflow-wrap: anywhere; } .dbh-article .wp-block-post-content > * { max-width: 100%; } .dbh-article .wp-block-post-content :is(h1, h2, h3, h4) { line-height: 1.3; margin: 2rem 0 .75rem; } .dbh-article .wp-block-post-content h1 { font-size: 1.75rem; } .dbh-article .wp-block-post-content :is(h1, h2, h3, h4):first-child { margin-top: 0; } .dbh-article .wp-block-post-content :is(ul, ol) { padding-left: 1.4rem; margin: 0 0 1.25rem; } .dbh-article .wp-block-post-content li { margin-bottom: .35rem; } .dbh-article .wp-block-post-content p { margin: 0 0 1.1rem; } .dbh-article .wp-block-post-content a { color: var(--wp--preset--color--primary); } .dbh-article .wp-block-post-content img { display: block; max-width: 100%; height: auto; margin: 0 0 1rem; border-radius: var(--wp--custom--radius, 6px); } .dbh-article .wp-block-post-content .alignleft, .dbh-article .wp-block-post-content img.alignleft { float: none; margin: 0 0 1rem; } .dbh-article .wp-block-post-content :is(table) { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--small); } .dbh-article .wp-block-post-content :is(th, td) { border: 1px solid var(--wp--preset--color--border); padding: .5rem .75rem; text-align: left; } .dbh-article .wp-block-post-content th { background: var(--wp--preset--color--surface); } .dbh-article .wp-block-post-content :is(blockquote) { margin: 1.5rem 0; padding: .25rem 0 .25rem 1.1rem; border-left: 4px solid var(--wp--preset--color--primary); color: var(--wp--preset--color--muted); } .dbh-article__tags { margin-top: 1.5rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); } .dbh-article__tags a { display: inline-block; margin: 0 .25rem .25rem 0; padding: .15rem .65rem; border: 1px solid var(--wp--preset--color--border); border-radius: 99px; background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); text-decoration: none; } .dbh-article__tags a:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); } .dbh-article__nav { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1rem; margin-block: 2rem; } .dbh-article__nav > * { margin: 0; padding: 1rem 1.1rem; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius, 6px); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); } .dbh-article__nav > :last-child { text-align: right; } .dbh-article__nav > :empty { display: none; } .dbh-article__nav a { display: block; margin-top: .2rem; color: var(--wp--preset--color--contrast); font-weight: 600; font-size: 1rem; text-decoration: none; } .dbh-article__nav > *:hover { border-color: var(--wp--preset--color--primary); } .dbh-article__nav > *:hover a { color: var(--wp--preset--color--primary); } .dbh-article .wp-block-comments { margin-top: 2rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius, 6px); } .dbh-article .comment-reply-title, .dbh-article .wp-block-comments-title { font-size: 1.25rem; margin: 0 0 1rem; } .dbh-article .wp-block-post-comments-form textarea { min-height: 120px; } .dbh-article .wp-block-post-comments-form .form-submit .wp-block-button__link, .dbh-article .wp-block-post-comments-form input[type=submit] { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); border: 0; border-radius: var(--wp--custom--radius, 6px); padding: .7rem 1.5rem; font-weight: 600; cursor: pointer; } @media (max-width: 640px) { .dbh-article__nav { grid-template-columns: 1fr; } .dbh-article__nav > :last-child { text-align: left; } } @media (max-width: 1000px) { .dbh-blog :where(.dbh-postgrid) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .dbh-blog :where(.dbh-postgrid) { grid-template-columns: 1fr; } } /* ===== Product cards: equal buttons, tidy image area, no big gaps when an image is missing ===== */ @media (min-width: 782px) { .wp-block-woocommerce-product-collection .dbh-qv__row > .wp-block-woocommerce-product-button { flex: 1 1 0; } .wp-block-woocommerce-product-collection .dbh-qv__row .dbh-qv__trigger { flex: 1 1 0; width: auto; } } .wp-block-woocommerce-product-collection .dbh-qv__row .dbh-qv__trigger { background: var(--wp--preset--color--base); } /* keep the picture area from growing huge in 2-column view */ .wp-block-woocommerce-product-collection .wc-block-components-product-image { max-height: 320px; } .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image { max-width: 100%; } /* no picture at all: collapse to a small neutral box instead of a big empty square */ .wp-block-woocommerce-product-collection .wc-block-components-product-image:not(:has(img)) { aspect-ratio: 16 / 9; max-height: 140px; background: var(--wp--preset--color--surface); border-radius: var(--wp--custom--radius); } /* WooCommerce placeholder picture: show it smaller and quieter */ .wp-block-woocommerce-product-collection .wc-block-components-product-image:has(img[src*="placeholder"]) { aspect-ratio: 16 / 9; max-height: 160px; background: var(--wp--preset--color--surface); border-radius: var(--wp--custom--radius); } .wp-block-woocommerce-product-collection .wc-block-components-product-image img[src*="placeholder"] { opacity: .55; padding: 12px; box-sizing: border-box; } /* list view: same rules for the small thumbnail */ .dbh-shopview[data-view="list"] .wc-block-components-product-image { max-height: 170px; } /* titles keep a steady height so prices and buttons line up across a row */ .wp-block-woocommerce-product-collection .wc-block-product .wp-block-post-title { margin-block: 0 .35rem; } /* ===== Cart / checkout / account pages: use the full wide column, aligned with the page title ===== */ :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .dbh-main .wp-block-post-content > :is(.wp-block-group, .wp-block-shortcode, .woocommerce), :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .dbh-main .wp-block-post-content :is(.wp-block-shortcode, .woocommerce) { max-width: none !important; width: 100%; margin-inline: 0 !important; } :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .dbh-main .wp-block-post-content > .wp-block-group { max-width: var(--wp--style--global--wide-size, 1440px) !important; margin-inline: auto !important; } .woocommerce-cart .wp-block-post-title, .woocommerce-checkout .wp-block-post-title, .woocommerce-account .wp-block-post-title { max-width: var(--wp--style--global--wide-size, 1440px); margin-inline: auto; } .woocommerce-cart table.shop_table { width: 100%; border-collapse: collapse; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius, 6px); } .woocommerce-cart table.cart img { width: 72px; height: auto; border-radius: 4px; } .woocommerce-cart .cart-collaterals .cart_totals { float: right; width: min(480px, 100%); } @media (max-width: 781px) { .woocommerce-cart .cart-collaterals .cart_totals { float: none; width: 100%; } } /* Cart/checkout/account: remove any leftover narrow max-width on the whole chain (group > shortcode > woocommerce > form/table) */ :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .dbh-main .wp-block-post-content :is(.wp-block-group, .wp-block-shortcode, .woocommerce, .woocommerce-cart-form, .cart-collaterals, .woocommerce-checkout, #customer_details, .woocommerce-MyAccount-content) { max-width: none !important; } .woocommerce-cart .dbh-main .wp-block-post-content .woocommerce { display: block; width: 100% !important; box-sizing: border-box; } .woocommerce-cart .dbh-main .wp-block-post-content .woocommerce-cart-form, .woocommerce-cart .dbh-main .wp-block-post-content table.shop_table { width: 100% !important; } .woocommerce-cart .dbh-main .wp-block-post-content .wp-block-group.alignwide { width: 100%; } /* ===== Checkout (Shopify-style): form on the left, sticky order summary on the right ===== */ .dbh-cohead { background: var(--wp--preset--color--base); border-bottom: 1px solid var(--wp--preset--color--border); padding-block: var(--wp--preset--spacing--40); } .dbh-cohead .wp-block-site-title { margin: 0; } .dbh-cohead p { margin: 0; } .dbh-cohead__back a { color: var(--wp--preset--color--primary); text-decoration: none; font-weight: 600; } .dbh-checkout { padding-block: var(--wp--preset--spacing--50); } .dbh-checkout__title { font-size: var(--wp--preset--font-size--x-large); margin: 0 0 var(--wp--preset--spacing--40); } .woocommerce-checkout .woocommerce-info, .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-left: 4px solid var(--wp--preset--color--primary); border-radius: var(--wp--custom--radius, 6px); padding: .85rem 1rem; margin: 0 0 var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--small); } .woocommerce-checkout .woocommerce-info a { color: var(--wp--preset--color--primary); font-weight: 600; } .woocommerce-checkout form.checkout_coupon { margin-bottom: var(--wp--preset--spacing--40); } form.woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 2.5rem; align-items: start; } form.woocommerce-checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; } form.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; float: none; width: auto; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius, 6px); padding: clamp(1rem, 3vw, 1.75rem); } form.woocommerce-checkout #customer_details .col-1, form.woocommerce-checkout #customer_details .col-2 { float: none; width: 100%; max-width: none; } form.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0 0 .75rem; font-size: 1.15rem; float: none; width: auto; } form.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 1.5rem; float: none; width: auto; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius, 6px); padding: 1.25rem; } .woocommerce-checkout #customer_details h3 { font-size: 1.15rem; margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--wp--preset--color--border); } .woocommerce-checkout #customer_details .col-2 { margin-top: 1.5rem; } .woocommerce-checkout #ship-to-different-address { font-size: 1rem; margin-top: 0; } .woocommerce-checkout #ship-to-different-address label { display: flex; align-items: center; gap: .6rem; font-weight: 600; cursor: pointer; } /* two-up name fields, everything else full width */ .woocommerce-checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper, .woocommerce-checkout .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; } .woocommerce-checkout .form-row { float: none !important; width: auto !important; grid-column: 1 / -1; margin: 0 0 1rem; padding: 0; } .woocommerce-checkout .form-row.form-row-first, .woocommerce-checkout .form-row.form-row-last { grid-column: auto; } .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row textarea, .woocommerce-checkout .form-row select { width: 100%; box-sizing: border-box; } .woocommerce-checkout .select2-container { width: 100% !important; } /* order summary */ .woocommerce-checkout #order_review table.shop_table { width: 100%; border: 0; border-collapse: collapse; margin: 0 0 1rem; background: transparent; } .woocommerce-checkout #order_review table.shop_table :is(th, td) { padding: .6rem 0; border: 0; border-bottom: 1px solid var(--wp--preset--color--border); text-align: left; vertical-align: top; font-size: var(--wp--preset--font-size--small); } .woocommerce-checkout #order_review table.shop_table thead th { font-weight: 700; color: var(--wp--preset--color--muted); text-transform: uppercase; font-size: .75rem; letter-spacing: .04em; } .woocommerce-checkout #order_review table.shop_table :is(.product-total, td:last-child, th:last-child) { text-align: right; } .woocommerce-checkout #order_review table.shop_table .product-quantity { color: var(--wp--preset--color--muted); font-weight: 600; } .woocommerce-checkout #order_review table.shop_table tr.order-total :is(th, td) { font-size: 1.2rem; font-weight: 700; border-bottom: 0; padding-top: .9rem; } .woocommerce-checkout #order_review table.shop_table tr.order-total small { display: block; font-size: .75rem; font-weight: 400; color: var(--wp--preset--color--muted); } /* payment options as selectable boxes */ .woocommerce-checkout #payment { background: transparent; border-radius: 0; } .woocommerce-checkout #payment ul.payment_methods { list-style: none; margin: 0 0 1rem; padding: 0; border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius, 6px); overflow: hidden; } .woocommerce-checkout #payment ul.payment_methods li { margin: 0; padding: .9rem 1rem; border-bottom: 1px solid var(--wp--preset--color--border); } .woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: 0; } .woocommerce-checkout #payment ul.payment_methods li label { display: inline; font-weight: 600; cursor: pointer; margin-left: .35rem; } .woocommerce-checkout #payment ul.payment_methods li img { max-height: 24px; width: auto; margin-left: .5rem; vertical-align: middle; } .woocommerce-checkout #payment div.payment_box { margin: .75rem 0 0; padding: .85rem 1rem; background: var(--wp--preset--color--surface); border-radius: var(--wp--custom--radius, 6px); color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); } .woocommerce-checkout #payment div.payment_box::before { display: none; } .woocommerce-checkout #payment .form-row.place-order { padding: 0; margin: 0; } .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); margin-bottom: 1rem; } .woocommerce-checkout #place_order { float: none; width: 100%; min-height: 52px; padding: .85rem 1.25rem; font-size: 1.05rem; font-weight: 700; color: var(--wp--preset--color--base); background: var(--wp--preset--color--primary); border: 0; border-radius: var(--wp--custom--radius, 6px); cursor: pointer; transition: background .15s; } .woocommerce-checkout #place_order:hover { background: var(--wp--preset--color--navy); } @media (max-width: 900px) { form.woocommerce-checkout { grid-template-columns: 1fr; grid-template-rows: none; } form.woocommerce-checkout #customer_details, form.woocommerce-checkout #order_review_heading, form.woocommerce-checkout #order_review { grid-column: 1; grid-row: auto; } form.woocommerce-checkout #order_review_heading { margin-top: 1.5rem; } form.woocommerce-checkout #order_review { position: static; } .woocommerce-checkout .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; } .woocommerce-checkout .form-row.form-row-first, .woocommerce-checkout .form-row.form-row-last { grid-column: 1 / -1; } .dbh-cohead__secure { display: none; } }