/* ------------------------------------------------------------------ BookLab — OUCI-inspired skin. PILOT: scoped to so only the pages that opt in are affected. Delete this file and the class to revert completely. ------------------------------------------------------------------ */ @font-face { font-family: 'e-Ukraine'; font-display: swap; src: url('fonts/e-Ukraine-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; } @font-face { font-family: 'e-Ukraine'; font-display: swap; src: url('fonts/e-Ukraine-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; } body.ouci { --ouci-ink: #000; --ouci-muted: #6c757d; --ouci-canvas: #fff; --ouci-line: rgba(0, 0, 0, .12); --ouci-accent-a: #c3aab2; --ouci-accent-b: #99eecc; --ouci-accent-c: #80c0c8; --ouci-accent-d: #4b8bfa; font-family: 'e-Ukraine', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 300; color: var(--ouci-ink); background-color: #ccf3de; } /* Soft pastel field behind the white canvas (own artwork, not copied). */ body.ouci::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(60rem 40rem at 88% -8%, #9beaca 0%, rgba(155, 234, 202, 0) 62%), radial-gradient(52rem 38rem at 6% 4%, #cfe4f4 0%, rgba(207, 228, 244, 0) 58%), radial-gradient(46rem 36rem at 76% 92%, #f7e7c9 0%, rgba(247, 231, 201, 0) 60%), linear-gradient(160deg, #ccf3de 0%, #e7eef3 55%, #f6efe6 100%); } /* ---------- the white canvas ---------- */ body.ouci #container { max-width: 1520px; margin: 0 auto; background: var(--ouci-canvas); box-shadow: 1px 0 4px 1px rgba(0, 0, 0, .075); } body.ouci #container > nav#top, body.ouci #container > header, body.ouci #container > main, body.ouci #container > footer { padding-left: max(min(16px + 44 * (100vw - 36rem) / 416, 3.75rem), 1rem); padding-right: max(min(16px + 44 * (100vw - 36rem) / 416, 3.75rem), 1rem); } body.ouci #container > nav#top > .container, body.ouci #container > header > .container, body.ouci #container > main > .container, body.ouci #container > footer > .container, body.ouci #common-home.container { max-width: 100%; padding-left: 0; padding-right: 0; } /* ---------- header strip ---------- */ body.ouci #free-shipping-banner { background: #111 !important; font-size: 13px; letter-spacing: .01em; } body.ouci nav#top { background: transparent; border: 0; font-size: 13px; padding-top: 18px; color: var(--ouci-muted); } body.ouci nav#top a, body.ouci nav#top .dropdown-toggle { color: var(--ouci-ink); opacity: .6; text-decoration: none; } body.ouci nav#top a:hover, body.ouci nav#top .dropdown-toggle:hover { opacity: 1; } body.ouci header { background: transparent; border: 0; padding-top: 6px; padding-bottom: 6px; } /* The logo is the same letter-spaced wordmark used under the header on the home page. */ body.ouci .ouci-logo { display: inline-block; font-family: 'e-Ukraine', system-ui, sans-serif; font-weight: 400; font-size: 30px; letter-spacing: .22em; text-transform: uppercase; color: var(--ouci-muted); text-decoration: none; padding: 6px 0; } body.ouci .ouci-logo:hover { color: var(--ouci-ink); } /* Category menu: plain text nav, no coloured bar. */ body.ouci #menu.navbar { background: transparent !important; border: 0; padding-left: 0; padding-right: 0; } body.ouci #menu .nav-link, body.ouci #menu #category, body.ouci #menu .navbar-toggler, body.ouci #menu #menu-ai-button { color: var(--ouci-ink); background: transparent; border: 0; font-weight: 300; } body.ouci #menu .nav-link { opacity: .7; } body.ouci #menu .nav-link:hover { opacity: 1; } body.ouci #menu .dropdown-menu { border: 0; border-radius: 0; box-shadow: 0 8px 28px rgba(0, 0, 0, .1); padding: 24px; } body.ouci #menu .dropdown-item { font-weight: 300; border-radius: 0; padding-left: 0; } /* ---------- home hero ---------- */ body.ouci .ouci-hero { padding-top: 12px; } @media (max-width: 991.98px) { body.ouci .ouci-hero { padding-top: 8px; } } body.ouci .ouci-hero__mark { font-size: 15px; letter-spacing: .28em; text-transform: uppercase; opacity: .55; } body.ouci .ouci-hero__title { margin-top: 40px; font-size: clamp(2rem, 1.1rem + 3.6vw, 4.2rem); font-weight: 300; line-height: 1.08; letter-spacing: -.02em; text-shadow: 2px 4px 8px hsla(0, 0%, 45%, .18); } /* ---------- stat tiles ---------- */ body.ouci .ouci-stats { margin-top: 120px; } @media (max-width: 991.98px) { body.ouci .ouci-stats { margin-top: 64px; } } body.ouci .ouci-stat { border-top: 4px solid var(--ouci-ink); padding-top: 16px; padding-bottom: 60px; line-height: 1.35; } body.ouci .ouci-stat__value { font-size: 2rem; font-weight: 400; margin-bottom: 24px; } body.ouci .ouci-stat p { margin: 0; font-size: 15px; } /* ---------- section rules + product cards ---------- */ body.ouci #content h1, body.ouci #content h2, body.ouci #content h3 { font-weight: 300; letter-spacing: -.01em; } body.ouci #content h3 { border-bottom: 2px solid var(--ouci-ink); padding-bottom: 10px; margin-bottom: 32px; font-size: 1.25rem; } body.ouci .product-thumb { border: 0; border-radius: 0; background: transparent; box-shadow: none; } body.ouci .product-thumb .image img { border-radius: 2px; } body.ouci .product-thumb .description, body.ouci .product-thumb .caption { padding-left: 0; padding-right: 0; } body.ouci .product-thumb h4, body.ouci .product-thumb .caption a { font-size: 15px; font-weight: 300; color: var(--ouci-ink); text-decoration: none; } body.ouci .product-thumb .price { font-size: 15px; font-weight: 400; color: var(--ouci-ink); } body.ouci .product-thumb .price-old { color: var(--ouci-muted); } body.ouci .product-thumb .price-new { color: var(--ouci-ink); } body.ouci .btn-primary, body.ouci .btn-light, body.ouci .btn-secondary { --bs-btn-bg: #000; --bs-btn-border-color: #000; --bs-btn-color: #fff; --bs-btn-hover-bg: #333; --bs-btn-hover-border-color: #333; --bs-btn-hover-color: #fff; border-radius: 50px; font-weight: 300; } /* Gradient hairline used as a section divider, like OUCI's search underline. */ body.ouci .ouci-rule { height: 2px; border: 0; opacity: 1; background: linear-gradient(68.94deg, var(--ouci-accent-a) -4.77%, var(--ouci-accent-b) 46.72%, var(--ouci-accent-c) 90.23%, var(--ouci-accent-d) 134.46%); } /* ---------- footer ---------- */ body.ouci footer { background: transparent; color: var(--ouci-ink); border-top: 1px solid var(--ouci-line); margin-top: 80px; padding-top: 40px; padding-bottom: 40px; font-weight: 300; } body.ouci footer h5 { font-weight: 400; font-size: 15px; } body.ouci footer a { color: var(--ouci-ink); opacity: .65; text-decoration: none; } body.ouci footer a:hover { opacity: 1; } /* ---------- header: hand search over to the hero ---------- */ body.ouci-common-home header .col-md-5 { display: none; } body.ouci-common-home header .col-md-3.col-lg-4 { flex: 0 0 auto; width: auto; } body.ouci header #cart { margin-left: auto; width: auto; flex: 0 0 auto; } body.ouci header .row { align-items: center; } body.ouci #cart > .btn, body.ouci #cart button.btn { background: transparent !important; border: 1px solid var(--ouci-ink) !important; color: var(--ouci-ink) !important; border-radius: 50px; font-weight: 300; font-size: 14px; padding: 8px 18px; } body.ouci #cart > .btn:hover, body.ouci #cart button.btn:hover { background: var(--ouci-ink) !important; color: #fff !important; } /* ---------- product cards: monochrome, no red circles ---------- */ body.ouci .product-thumb .btn, body.ouci .product-thumb button { background: transparent !important; border: 1px solid var(--ouci-line) !important; color: var(--ouci-ink) !important; border-radius: 50px; box-shadow: none; } body.ouci .product-thumb .btn:hover, body.ouci .product-thumb button:hover { background: var(--ouci-ink) !important; border-color: var(--ouci-ink) !important; color: #fff !important; } body.ouci .product-thumb .image { margin-bottom: 18px; } body.ouci .product-thumb .image img { box-shadow: 0 6px 18px rgba(0, 0, 0, .10); } body.ouci .product-thumb h4 a, body.ouci .product-thumb .description a { color: var(--ouci-ink); } /* Softer hero shadow, a touch more air before the tiles. */ body.ouci .ouci-hero__title { text-shadow: 1px 3px 10px hsla(0, 0%, 45%, .14); } /* Let the pastel field show at the edges of very wide screens. */ @media (min-width: 1640px) { body.ouci #container { max-width: 1520px; } } /* ================================================================== STEP 2 — navigation, category and search pages ================================================================== */ /* ---------- navigation ---------- */ body.ouci #menu.navbar { border-bottom: 1px solid var(--ouci-line); padding-top: 4px; padding-bottom: 10px; margin-bottom: 8px; } body.ouci #menu .nav-link { padding-left: 0; padding-right: 32px; font-size: 15px; letter-spacing: .01em; } body.ouci #menu .dropdown-menu { margin-top: 12px; } body.ouci #menu .dropdown-item { padding-top: 6px; padding-bottom: 6px; font-size: 14px; } body.ouci #menu .dropdown-item:hover, body.ouci #menu .dropdown-item:focus { background: transparent; color: var(--ouci-ink); text-decoration: underline; } body.ouci #menu #menu-ai-button { order: 3; margin-left: auto !important; border: 1px solid var(--ouci-line) !important; border-radius: 50px; font-size: 13px; padding: 6px 16px; } body.ouci #menu #menu-ai-button:hover { border-color: var(--ouci-ink) !important; background: var(--ouci-ink) !important; color: #fff !important; } @media (min-width: 992px) { body.ouci #menu #navbar-menu { order: 2; } } /* ---------- inner pages: the header search becomes the headline field ---------- */ body.ouci:not(.ouci-common-home) header .row { flex-wrap: wrap; } body.ouci:not(.ouci-common-home) header .col-md-5 { flex: 0 0 100%; width: 100%; max-width: 100%; order: 3; margin-top: 20px; } body.ouci:not(.ouci-common-home) header .col-md-5 > .position-relative { margin-bottom: 0 !important; } body.ouci:not(.ouci-common-home) header form.input-group { position: relative; flex-wrap: nowrap; align-items: center; padding-bottom: 6px; } body.ouci:not(.ouci-common-home) header form.input-group::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: linear-gradient(68.94deg, var(--ouci-accent-a) -4.77%, var(--ouci-accent-b) 46.72%, var(--ouci-accent-c) 90.23%, var(--ouci-accent-d) 134.46%); } body.ouci:not(.ouci-common-home) #input-header-search { font-family: inherit; font-size: clamp(20px, 3.2vw, 40px); font-weight: 300; line-height: 1.2; height: auto; padding: 6px 0; background: transparent !important; border: 0 !important; border-radius: 0; box-shadow: none !important; } body.ouci:not(.ouci-common-home) #input-header-search::placeholder { color: #b6bbc0; transition: opacity .18s ease-in-out; } body.ouci:not(.ouci-common-home) #input-header-search:focus::placeholder { opacity: 0; } body.ouci:not(.ouci-common-home) header form.input-group .btn { background: transparent !important; border: 0 !important; color: var(--ouci-ink) !important; font-size: clamp(18px, 2vw, 24px); padding-right: 0; box-shadow: none; } body.ouci #header-search-autocomplete { border: 0; border-radius: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .12) !important; } body.ouci #header-search-autocomplete .list-group-item { border: 0; border-bottom: 1px solid var(--ouci-line); font-weight: 300; } body.ouci #header-search-autocomplete .list-group-item.active { background: #f5f5f5; color: var(--ouci-ink); } /* ---------- breadcrumb + page heading ---------- */ body.ouci .breadcrumb { background: transparent; padding: 0; margin: 24px 0 8px; font-size: 13px; } body.ouci .breadcrumb-item a { color: var(--ouci-muted); text-decoration: none; } body.ouci .breadcrumb-item a:hover { color: var(--ouci-ink); } body.ouci .breadcrumb-item + .breadcrumb-item::before { content: '/'; color: #c9ced3; background: none; width: auto; padding-right: .5rem; } body.ouci #content h1 { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem); font-weight: 300; letter-spacing: -.02em; margin: 8px 0 40px; } /* ---------- refine-search list ---------- */ body.ouci-product-category #content .row-cols-lg-4 ul, body.ouci-product-category #content .col-sm-3 ul { list-style: none; padding-left: 0; margin-bottom: 0; } body.ouci-product-category #content .row-cols-lg-4 li, body.ouci-product-category #content .col-sm-3 li { margin-bottom: 10px; } body.ouci-product-category #content .row-cols-lg-4 li a, body.ouci-product-category #content .col-sm-3 li a { color: var(--ouci-ink); text-decoration: none; font-size: 14px; line-height: 1.4; } body.ouci-product-category #content .row-cols-lg-4 li a:hover, body.ouci-product-category #content .col-sm-3 li a:hover { text-decoration: underline; } /* ---------- toolbar above the product grid ---------- */ /* One flex row: view toggle on the left, the two selects pinned right, everything on a single baseline. (Was a Bootstrap grid with an empty column and an offset, which drifted out of line as soon as a label wrapped.) */ body.ouci .product-toolbar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; border-bottom: 2px solid var(--ouci-ink); padding-bottom: 12px; margin-bottom: 40px; } body.ouci .product-toolbar__controls { display: flex; align-items: center; gap: 32px; margin-left: auto; flex-wrap: wrap; } body.ouci .product-toolbar__field { display: flex; align-items: center; gap: 8px; } body.ouci .product-toolbar__field label { margin: 0; font-size: 14px; font-weight: 300; color: var(--ouci-muted); white-space: nowrap; } /* All three controls share one height, one type size and one pill outline, so the row reads as a single set rather than a borrowed toggle next to two bare selects. */ body.ouci .product-toolbar { --toolbar-height: 40px; } body.ouci #content .product-toolbar .form-select { background-color: transparent; border: 1px solid var(--ouci-line); border-radius: 50px; box-shadow: none; font-family: inherit; font-weight: 300; font-size: 14px; color: var(--ouci-ink); height: var(--toolbar-height); padding: 0 2.2rem 0 16px; background-position: right 14px center; width: auto; line-height: 1.4; } body.ouci #content .product-toolbar .form-select:hover, body.ouci #content .product-toolbar .form-select:focus { border-color: var(--ouci-ink); outline: 0; } /* Segmented control: two halves of one pill, the active half filled. */ body.ouci .product-toolbar__view { border-radius: 50px; overflow: hidden; } body.ouci .product-toolbar__view .btn.btn-light { background: transparent !important; border: 1px solid var(--ouci-line) !important; color: var(--ouci-muted) !important; border-radius: 0 !important; height: var(--toolbar-height); min-width: 52px; padding: 0 16px; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } body.ouci .product-toolbar__view .btn.btn-light:first-child { border-radius: 50px 0 0 50px !important; } body.ouci .product-toolbar__view .btn.btn-light:last-child { border-radius: 0 50px 50px 0 !important; border-left: 0 !important; } body.ouci .product-toolbar__view .btn.btn-light:hover { color: var(--ouci-ink) !important; } body.ouci .product-toolbar__view .btn.btn-light.active { background: var(--ouci-ink) !important; border-color: var(--ouci-ink) !important; color: #fff !important; } /* ---------- grid spacing, pagination, result counter ---------- */ body.ouci #product-list > .col { margin-bottom: 76px !important; } /* The pager is the one control on a 28-page category that gets used repeatedly, so the targets are a real 42px rather than a line of 38px-wide text. */ body.ouci .product-pager { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 8px; } body.ouci .product-pager__results { color: var(--ouci-muted); font-size: 13px; } body.ouci .pagination { --bs-pagination-border-width: 0; gap: 6px; margin: 0; } body.ouci .pagination .page-link { color: var(--ouci-ink); background: transparent; border: 1px solid transparent; border-radius: 50px; font-weight: 300; font-size: 15px; min-width: 42px; height: 42px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; } body.ouci .pagination .page-link:hover { border-color: var(--ouci-line); color: var(--ouci-ink); } body.ouci .pagination .page-item.active .page-link { background: var(--ouci-ink); border-color: var(--ouci-ink); color: #fff; } /* The ellipsis is a marker, not a target. */ body.ouci .pagination .page-item--gap .page-link { min-width: 24px; padding: 0; color: var(--ouci-muted); pointer-events: none; } body.ouci .pagination .page-link--nav { border-color: var(--ouci-line); font-size: 13px; } body.ouci .pagination .page-link--nav:hover { background: var(--ouci-ink); border-color: var(--ouci-ink); color: #fff; } body.ouci .text-end .results, body.ouci #content > .row:last-of-type .text-end { color: var(--ouci-muted); font-size: 13px; } /* ---------- breadcrumb: strip the stock chevron pills ---------- */ body.ouci .breadcrumb { border: 0 !important; background-color: transparent !important; border-radius: 0 !important; } body.ouci .breadcrumb > li.breadcrumb-item { text-shadow: none; padding: 0 10px 0 0; /* stylesheet.css pins every crumb to `white-space: nowrap`. The last crumb is the product title, so on a narrow screen a long one cannot wrap and pushes the whole page wider than the viewport (a Spanish title overflowed 390px by 25px while the shorter Ukrainian one fitted). Let crumbs wrap, and break a title with no spaces. */ white-space: normal; min-width: 0; overflow-wrap: anywhere; } body.ouci .breadcrumb > li.breadcrumb-item:after { display: none !important; } body.ouci .breadcrumb > li.breadcrumb-item + li:before { content: '/'; padding: 0 10px 0 0; color: #c9ced3; } body.ouci .breadcrumb > li.breadcrumb-item > a { color: var(--ouci-muted); } body.ouci .breadcrumb > li.breadcrumb-item > a:hover { color: var(--ouci-ink); text-decoration: underline; } body.ouci .breadcrumb > li.breadcrumb-item:last-child > a { color: var(--ouci-ink); font-weight: 400; } /* ---------- left column: OUCI-style filter list ---------- */ body.ouci #column-left { padding-right: 48px; } body.ouci #column-left .list-group { border: 0; border-top: 4px solid var(--ouci-ink); border-radius: 0; padding-top: 14px; } body.ouci #column-left .list-group-item { border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--ouci-ink) !important; padding: 7px 0; font-size: 14px; font-weight: 300; line-height: 1.4; } body.ouci #column-left .list-group-item:hover { text-decoration: underline; } body.ouci #column-left .list-group-item.active { font-weight: 400; box-shadow: inset 3px 0 0 var(--ouci-ink); padding-left: 12px; } /* ---------- forms and buttons on inner pages ---------- */ body.ouci .btn-primary, body.ouci .btn-danger, body.ouci #button-search { background-color: var(--ouci-ink) !important; border-color: var(--ouci-ink) !important; color: #fff !important; border-radius: 50px; font-weight: 300; padding: 10px 28px; } body.ouci .btn-primary:hover, body.ouci .btn-danger:hover, body.ouci #button-search:hover { background-color: #333 !important; border-color: #333 !important; } body.ouci #content .form-select, body.ouci #content .form-control { font-family: inherit; font-weight: 300; background-color: transparent; border: 0; border-bottom: 1px solid var(--ouci-line); border-radius: 0; box-shadow: none; padding-left: 0; } body.ouci #content .form-select:focus, body.ouci #content .form-control:focus { border-bottom-color: var(--ouci-ink); box-shadow: none; } body.ouci #content .input-group-text { background: transparent; border: 0; padding-left: 0; color: var(--ouci-muted); font-size: 13px; } body.ouci #content .form-check-label { font-size: 14px; color: var(--ouci-muted); } body.ouci #content .form-check-input:checked { background-color: var(--ouci-ink); border-color: var(--ouci-ink); } /* Search page: same rule under the section heading as elsewhere. */ body.ouci-product-search #content h2 { border-bottom: 2px solid var(--ouci-ink); padding-bottom: 10px; margin: 48px 0 32px; font-size: 1.25rem; font-weight: 300; } body.ouci-product-search #content > .row .btn-group { margin-bottom: 0; } /* Grid/list toggle: outline pair, filled when active. */ body.ouci .btn-group #button-list, body.ouci .btn-group #button-grid { background: transparent !important; border: 1px solid var(--ouci-line) !important; color: var(--ouci-ink) !important; } body.ouci .btn-group #button-list.active, body.ouci .btn-group #button-grid.active { background: var(--ouci-ink) !important; border-color: var(--ouci-ink) !important; color: #fff !important; } /* ================================================================== STEP 3 — product page ================================================================== */ body.ouci-product-product #content > .row.mb-3 { --bs-gutter-x: 64px; } /* ---------- cover art ---------- */ body.ouci-product-product .image .img-thumbnail { border: 0; padding: 0; background: transparent; border-radius: 2px; box-shadow: 0 16px 44px rgba(0, 0, 0, .16); } body.ouci-product-product .image > div .img-thumbnail { box-shadow: 0 4px 14px rgba(0, 0, 0, .12); width: 76px; margin-right: 8px; } body.ouci-product-product .image { text-align: center; } body.ouci-product-product .image > a > .img-thumbnail { max-height: 560px; width: auto; } /* ---------- title, meta table ---------- */ body.ouci-product-product #content h1 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.15; margin: 0 0 28px; } body.ouci .product-meta { border-top: 2px solid var(--ouci-ink); padding-top: 14px; margin-top: 0; } body.ouci .product-meta li { font-size: 14px; padding: 7px 0; } body.ouci .product-meta .label { color: var(--ouci-muted); font-weight: 300; } body.ouci .product-meta .value { font-weight: 400; color: var(--ouci-ink); } body.ouci .product-meta .dots { border-bottom-color: #e3e6e9; } body.ouci .product-meta a { color: var(--ouci-ink) !important; font-weight: 400; text-decoration: none; border-bottom: 1px solid var(--ouci-line); } body.ouci .product-meta a:hover { color: var(--ouci-ink) !important; border-bottom-color: var(--ouci-ink); text-decoration: none; } /* ---------- price ---------- */ body.ouci-product-product #content h2 { font-size: clamp(1.8rem, 1.2rem + 1.4vw, 2.6rem); font-weight: 400; letter-spacing: -.02em; margin: 28px 0 4px; } body.ouci-product-product .price-new { color: var(--ouci-ink); } body.ouci-product-product .price-old { color: var(--ouci-muted); text-decoration: line-through; font-size: 1rem; } /* ---------- buy row ---------- */ body.ouci .product-actions { margin-top: 20px; gap: 12px; } body.ouci #button-cart { background: var(--ouci-ink) !important; border: 1px solid var(--ouci-ink) !important; color: #fff !important; border-radius: 50px; font-weight: 300; font-size: 16px; padding: 14px 40px; flex: 1 1 auto; max-width: 340px; } body.ouci #button-cart:hover { background: #333 !important; border-color: #333 !important; } body.ouci #button-wishlist { background: transparent !important; border: 1px solid var(--ouci-line) !important; color: var(--ouci-ink) !important; border-radius: 50%; width: 54px; min-width: 54px; padding: 0; } body.ouci #button-wishlist:hover { background: var(--ouci-ink) !important; border-color: var(--ouci-ink) !important; color: #fff !important; } /* ---------- trust badges + delivery block ---------- */ body.ouci .product-badges { margin: 22px 0; } body.ouci .product-badges .badge-pill { background: transparent; color: var(--ouci-muted); border: 1px solid var(--ouci-line); font-weight: 300; font-size: 13px; padding: 7px 16px; } body.ouci .product-badges .badge-pill i { color: var(--ouci-ink); } body.ouci .product-delivery-info { border: 0; border-top: 1px solid var(--ouci-line); border-radius: 0; padding: 22px 0 0; margin-top: 28px; } body.ouci .product-delivery-info h4 { font-size: 15px; font-weight: 400; margin-bottom: 14px; } body.ouci .product-delivery-info li { color: var(--ouci-ink); font-weight: 300; font-size: 14px; } body.ouci .product-delivery-info li i { color: #b9bfc5; } /* ---------- tabs ---------- */ body.ouci .nav-tabs { border: 0; border-bottom: 2px solid var(--ouci-ink); margin-top: 56px; gap: 36px; } body.ouci .nav-tabs .nav-link { border: 0 !important; border-radius: 0; background: transparent !important; color: var(--ouci-muted); font-weight: 300; font-size: 15px; padding: 8px 0 12px; } body.ouci .nav-tabs .nav-link:hover { color: var(--ouci-ink); } body.ouci .nav-tabs .nav-link.active { color: var(--ouci-ink); box-shadow: inset 0 -3px 0 var(--ouci-ink); } body.ouci .tab-content { padding-top: 32px; font-weight: 300; line-height: 1.65; } body.ouci .tab-content p { max-width: 78ch; } /* ---------- description body ---------- */ body.ouci #tab-description h4 { font-size: 1.05rem; font-weight: 400; margin: 32px 0 4px; } body.ouci #tab-description ul { border: 0; border-radius: 0; margin-top: 12px; max-width: 78ch; } body.ouci #tab-description ul li { background: transparent; border-bottom: 1px solid var(--ouci-line); padding: 12px 0 12px 1.6em; } body.ouci #tab-description ul li::before { color: var(--ouci-ink); font-weight: 400; } /* ---------- specification table ---------- */ body.ouci #tab-specification .table { --bs-table-bg: transparent; border: 0; max-width: 780px; } body.ouci #tab-specification .table > :not(caption) > * > * { border-left: 0; border-right: 0; border-color: var(--ouci-line); padding: 12px 0; font-weight: 300; } body.ouci #tab-specification thead td { border-bottom: 2px solid var(--ouci-ink) !important; padding-top: 28px !important; } body.ouci #tab-specification thead strong { font-weight: 400; } /* ---------- related products ---------- */ body.ouci #content h3 { margin-top: 64px; } /* On a product page the sidebar only ever shows the single root category, so drop it and let the product use the full canvas. */ body.ouci-product-product #column-left { display: none !important; } body.ouci-product-product .image > a > .img-thumbnail { max-height: 620px; } /* ================================================================== STEP 4 — cart and checkout ================================================================== */ /* ---------- cart table ---------- */ body.ouci #output-cart .table { border: 0; --bs-table-bg: transparent; margin-bottom: 0; } body.ouci #output-cart .table > :not(caption) > * > * { border-left: 0; border-right: 0; border-color: var(--ouci-line); padding: 18px 12px; font-weight: 300; vertical-align: middle; background: transparent; } body.ouci #output-cart thead th { border-bottom: 2px solid var(--ouci-ink); color: var(--ouci-muted); font-weight: 400; font-size: 13px; padding-bottom: 10px; } body.ouci #output-cart td a { color: var(--ouci-ink); font-weight: 400; text-decoration: none; } body.ouci #output-cart td a:hover { text-decoration: underline; } body.ouci #output-cart small { color: var(--ouci-muted); } body.ouci #output-cart .img-thumbnail { border: 0; padding: 0; background: transparent; border-radius: 2px; box-shadow: 0 6px 16px rgba(0, 0, 0, .14); } /* quantity + update/remove controls */ body.ouci #output-cart .input-group { flex-wrap: nowrap; align-items: center; gap: 8px; } body.ouci #output-cart .input-group .form-control { flex: 0 0 62px; width: 62px; text-align: center; border: 1px solid var(--ouci-line); border-radius: 50px; padding: 7px 0; background: transparent; } body.ouci #output-cart .btn-primary, body.ouci #output-cart .btn-danger { background: transparent !important; border: 1px solid var(--ouci-line) !important; color: var(--ouci-ink) !important; border-radius: 50% !important; width: 38px; height: 38px; min-width: 38px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; } body.ouci #output-cart .btn-primary:hover, body.ouci #output-cart .btn-danger:hover { background: var(--ouci-ink) !important; border-color: var(--ouci-ink) !important; color: #fff !important; } /* totals */ body.ouci #checkout-total td { border: 0; padding: 8px 12px; font-weight: 300; } body.ouci #checkout-total tr:first-child td { padding-top: 22px; } body.ouci #checkout-total tr:last-child td { border-top: 2px solid var(--ouci-ink); font-size: 1.2rem; font-weight: 400; padding-top: 16px; } /* ---------- accordions (shipping estimate, coupon) ---------- */ body.ouci .accordion, body.ouci .accordion-item { border: 0; background: transparent; border-radius: 0; } body.ouci .accordion-button { background: transparent !important; color: var(--ouci-ink) !important; box-shadow: none !important; border: 0; border-top: 1px solid var(--ouci-line); border-radius: 0 !important; padding: 20px 0; font-weight: 300; } body.ouci .accordion-button::after { margin-left: auto; } body.ouci .accordion-body { padding: 4px 0 26px; } /* ---------- checkout cards ---------- */ /* Cards are dressed as the

blocks in the other column, so the two columns of the checkout start on the same line. */ body.ouci #checkout-checkout .card, body.ouci #checkout-success .card { border: 0; border-radius: 0; background: transparent; margin-bottom: 44px; } body.ouci #checkout-checkout .card-header, body.ouci #checkout-success .card-header { background: transparent; border: 0; border-bottom: 1px solid var(--ouci-line); padding: 0 0 10px; margin-bottom: 20px; font-size: 1.05rem; font-weight: 400; } body.ouci #checkout-checkout .card-body, body.ouci #checkout-success .card-body { padding: 8px 0 12px; } body.ouci .form-label { font-size: 13px; color: var(--ouci-muted); font-weight: 300; } body.ouci .required .form-label::after, body.ouci .required .col-form-label::after { color: var(--ouci-ink); } body.ouci legend { font-size: 1.05rem; font-weight: 400; border-bottom: 1px solid var(--ouci-line); padding-bottom: 10px; margin-bottom: 20px; } /* ---------- alerts ---------- */ body.ouci .alert { border: 0; border-left: 3px solid var(--ouci-ink); border-radius: 0; background: #f5f5f5; color: var(--ouci-ink); font-weight: 300; } body.ouci .alert-danger { border-left-color: #c0392b; } body.ouci .alert-success { border-left-color: #2e7d4f; } body.ouci .alert i { color: var(--ouci-muted); } /* ---------- secondary buttons ---------- */ body.ouci .btn-light:not(#button-wishlist):not(.btn-group .btn):not(header .btn) { background: transparent !important; border: 1px solid var(--ouci-ink) !important; color: var(--ouci-ink) !important; border-radius: 50px; font-weight: 300; } body.ouci .btn-light:not(#button-wishlist):not(.btn-group .btn):not(header .btn):hover { background: var(--ouci-ink) !important; color: #fff !important; } body.ouci #checkout-cart .row .btn, body.ouci #checkout-checkout .btn { padding: 11px 30px; } /* The headline search button must stay borderless — it is a .btn-light too. */ body.ouci:not(.ouci-common-home) header form.input-group .btn.btn-light { background: transparent !important; border: 0 !important; border-radius: 0 !important; color: var(--ouci-ink) !important; } /* ---------- links, required markers, order summary ---------- */ body.ouci #content a:not(.btn):not(.dropdown-item):not(.page-link):not(.list-group-item) { color: var(--ouci-ink); } body.ouci div.required .col-form-label:before, body.ouci div.required .form-label:before { color: var(--ouci-ink); font-weight: 400; } body.ouci #checkout-confirm .table, body.ouci #checkout-confirm .table-bordered { border: 0; --bs-table-bg: transparent; } body.ouci #checkout-confirm .table > :not(caption) > * > * { border-left: 0; border-right: 0; border-color: var(--ouci-line); padding: 14px 0; font-weight: 300; background: transparent; } body.ouci #checkout-confirm thead td, body.ouci #checkout-confirm thead th { border-bottom: 2px solid var(--ouci-ink) !important; color: var(--ouci-muted); font-weight: 400; font-size: 13px; } body.ouci #checkout-confirm tfoot tr:last-child td { border-top: 2px solid var(--ouci-ink); font-weight: 400; font-size: 1.05rem; } /* Toggles pick up the ink colour when on. */ body.ouci .form-check-input:checked { background-color: var(--ouci-ink); border-color: var(--ouci-ink); } /* ================================================================== STEP 5 — footer and information pages ================================================================== */ /* ---------- footer ---------- */ body.ouci footer { margin-top: 100px; padding-top: 56px; padding-bottom: 56px; border-top: 1px solid var(--ouci-line); } body.ouci footer h5 { font-size: 12px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--ouci-muted); margin-bottom: 20px; } body.ouci footer ul { margin-bottom: 0; } body.ouci footer li { margin-bottom: 10px; } body.ouci footer a { font-size: 14px; font-weight: 300; opacity: .75; } body.ouci footer a:hover { opacity: 1; text-decoration: underline; } body.ouci footer hr { margin: 48px 0 24px; border: 0; border-top: 1px solid var(--ouci-line); opacity: 1; } body.ouci footer p { font-size: 13px; color: var(--ouci-muted); margin-bottom: 0; } body.ouci footer p a { color: var(--ouci-muted); } /* ---------- information pages ---------- */ body.ouci-information-information #content, body.ouci-information-contact #content { font-weight: 300; line-height: 1.7; } body.ouci-information-information #content h1 { margin-bottom: 44px; } body.ouci-information-information #content p, body.ouci-information-information #content ul, body.ouci-information-information #content ol, body.ouci-information-contact #content address { max-width: 78ch; } body.ouci-information-information #content h2, body.ouci-information-information #content h3, body.ouci-information-information #content h4 { font-weight: 400; letter-spacing: -.01em; margin: 44px 0 14px; } body.ouci-information-information #content h2 { font-size: 1.4rem; } body.ouci-information-information #content h3 { font-size: 1.15rem; border-bottom: 0; padding-bottom: 0; margin-top: 36px; } body.ouci-information-information #content li { margin-bottom: 8px; } body.ouci-information-information #content table { max-width: 780px; --bs-table-bg: transparent; border: 0; } body.ouci-information-information #content table td, body.ouci-information-information #content table th { border-left: 0; border-right: 0; border-color: var(--ouci-line); padding: 12px 0; } /* Contact page: the location card becomes a plain section. */ body.ouci-information-contact .card { border: 0; border-top: 2px solid var(--ouci-ink); border-radius: 0; background: transparent; } body.ouci-information-contact .card-body { padding: 24px 0 8px; } body.ouci-information-contact #content h3 { font-size: 1.1rem; border-bottom: 0; padding-bottom: 0; margin: 48px 0 4px; } body.ouci-information-contact strong { font-weight: 400; } body.ouci-information-contact address { font-weight: 300; margin-top: 6px; } body.ouci-information-contact .img-thumbnail { border: 0; padding: 0; background: transparent; box-shadow: 0 8px 22px rgba(0, 0, 0, .12); } body.ouci .btn-info { background: transparent !important; border: 1px solid var(--ouci-ink) !important; color: var(--ouci-ink) !important; border-radius: 50px; font-weight: 300; padding: 9px 22px; } body.ouci .btn-info:hover { background: var(--ouci-ink) !important; color: #fff !important; } /* ================================================================== STEP 6 — account section (opted in by the 'account/' prefix) ================================================================== */ /* Bootstrap utility classes carry !important, so these must too. */ body[class*="ouci-account-"] #content .border.rounded, body[class*="ouci-account-"] #content .card { border: 0 !important; border-top: 2px solid var(--ouci-ink) !important; border-radius: 0 !important; padding: 26px 0 0 !important; background: transparent !important; } body[class*="ouci-account-"] #content .card-header { background: transparent; border: 0; padding: 0 0 8px; font-size: 1.05rem; font-weight: 400; } body[class*="ouci-account-"] #content .card-body { padding: 0; } body[class*="ouci-account-"] #content h2 { font-size: 1.3rem; font-weight: 300; letter-spacing: -.01em; margin: 0 0 6px; } body[class*="ouci-account-"] #content p strong { font-weight: 400; color: var(--ouci-muted); } body[class*="ouci-account-"] #content .col-form-label, body[class*="ouci-account-"] #content .form-label { font-size: 13px; font-weight: 300; color: var(--ouci-muted); padding-bottom: 2px; } /* ---------- sidebar (login/register put the menu on the right) ---------- */ body.ouci #column-right { padding-left: 48px; } body.ouci #column-right .list-group { border: 0; border-top: 4px solid var(--ouci-ink); border-radius: 0; padding-top: 14px; } body.ouci #column-right .list-group-item { border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--ouci-ink) !important; padding: 7px 0; font-size: 14px; font-weight: 300; } body.ouci #column-right .list-group-item:hover { text-decoration: underline; } body.ouci #column-right .list-group-item.active { font-weight: 400; box-shadow: inset 3px 0 0 var(--ouci-ink); padding-left: 12px; } /* ---------- account dashboard: link lists become rules ---------- */ body.ouci-account-account #content h2 { font-size: 1.05rem; font-weight: 400; border-bottom: 2px solid var(--ouci-ink); padding-bottom: 10px; margin: 52px 0 4px; max-width: 560px; } body.ouci-account-account #content ul.list-unstyled { margin-bottom: 0; max-width: 560px; } body.ouci-account-account #content ul.list-unstyled li { padding: 11px 0; border-bottom: 1px solid var(--ouci-line); } body.ouci-account-account #content ul.list-unstyled li a { text-decoration: none; font-weight: 300; } body.ouci-account-account #content ul.list-unstyled li a:hover { text-decoration: underline; } /* ---------- tables across the account pages ---------- */ body[class*="ouci-account-"] #content .table { border: 0; --bs-table-bg: transparent; } body[class*="ouci-account-"] #content .table > :not(caption) > * > * { border-left: 0; border-right: 0; border-color: var(--ouci-line); padding: 16px 12px; font-weight: 300; background: transparent; vertical-align: middle; } body[class*="ouci-account-"] #content thead th { border-bottom: 2px solid var(--ouci-ink); color: var(--ouci-muted); font-weight: 400; font-size: 13px; } body[class*="ouci-account-"] #content .table-hover > tbody > tr:hover > * { background: #fafafa; --bs-table-accent-bg: transparent; } body[class*="ouci-account-"] #content .table td:first-child, body[class*="ouci-account-"] #content thead th:first-child { padding-left: 0; } body[class*="ouci-account-"] #content .table td:last-child, body[class*="ouci-account-"] #content thead th:last-child { padding-right: 0; } /* row action buttons become outline circles */ body[class*="ouci-account-"] #content .btn-info, body[class*="ouci-account-"] #content .btn-danger, body[class*="ouci-account-"] #content .table .btn:not(.btn-primary) { width: 38px; height: 38px; min-width: 38px; padding: 0 !important; border-radius: 50% !important; display: inline-flex; align-items: center; justify-content: center; background: transparent !important; border: 1px solid var(--ouci-line) !important; color: var(--ouci-ink) !important; } body[class*="ouci-account-"] #content .btn-info:hover, body[class*="ouci-account-"] #content .btn-danger:hover, body[class*="ouci-account-"] #content .table .btn:not(.btn-primary):hover { background: var(--ouci-ink) !important; border-color: var(--ouci-ink) !important; color: #fff !important; } /* ...but the page-level buttons stay pills */ body[class*="ouci-account-"] #content .buttons .btn, body[class*="ouci-account-"] #content .text-end > .btn, body[class*="ouci-account-"] #content form .btn-primary { width: auto; height: auto; min-width: 0; padding: 11px 30px !important; border-radius: 50px !important; } body[class*="ouci-account-"] #content form .btn-primary { background: var(--ouci-ink) !important; border-color: var(--ouci-ink) !important; color: #fff !important; } /* Text buttons inside account tables (Reorder) stay pills, not icon circles. */ body[class*="ouci-account-"] #content .table .btn-primary { width: auto; height: auto; display: inline-block; min-width: max-content; padding: 8px 20px !important; border-radius: 50px !important; background: var(--ouci-ink) !important; border-color: var(--ouci-ink) !important; color: #fff !important; white-space: nowrap; font-size: 13px; } /* The order-detail table has to fit a text button in its last column, so give the product column room to wrap and keep the cells tight. */ body.ouci-account-order #content .table > :not(caption) > * > * { padding: 14px 8px; } /* Never let the last column squeeze the button — the wrapper scrolls instead. */ body.ouci-account-order #content .table-responsive > .table { min-width: max-content; } body[class*="ouci-account-"] #content .table .btn-primary { padding: 7px 14px !important; font-size: 12px; } /* ================================================================== STEP 7 — mobile: kill the horizontal scroll ================================================================== */ /* The theme uses a wide grid gutter; on a phone the row's negative margins are bigger than the padding available to absorb them, so the grid pokes out. */ @media (max-width: 767.98px) { body.ouci #content .row, body.ouci #common-home > .row, body.ouci #container > main > .container > .row { --bs-gutter-x: 1.5rem; } } /* A long pagination (a category with 28 pages) must wrap, not scroll the page. */ body.ouci .pagination { flex-wrap: wrap; row-gap: 6px; justify-content: center; } /* Last-resort guard: nothing on the storefront may scroll the page sideways. */ body.ouci { overflow-x: hidden; } /* The product page sets a wide gutter of its own — narrow it on a phone too. */ @media (max-width: 767.98px) { body.ouci-product-product #content > .row.mb-3 { --bs-gutter-x: 1.5rem; } } /* ================================================================== STEP 8 — layout corrections ================================================================== */ /* The theme reserved 400px (730px on phones) of empty padding under every page as an old sticky-footer hack. It is what left the void above the footer and between the last product and the "Ми не просто книгарня" block. */ body.ouci #content, body.ouci #column-left, body.ouci #column-right { padding-bottom: 56px; } @media (max-width: 575.98px) { body.ouci #content, body.ouci #column-left, body.ouci #column-right { padding-bottom: 40px; } } /* ---------- brand line, now inside the header ---------- */ body.ouci .ouci-brand { padding-top: 8px; padding-bottom: 26px; } body.ouci .ouci-brand .ouci-hero__title { margin-top: 14px; } @media (max-width: 767.98px) { body.ouci .ouci-brand { padding-bottom: 16px; } body.ouci .ouci-brand .ouci-hero__title { margin-top: 10px; } } /* The wordmark says BookLab already, so the small logo would be a third repetition of the name — hide it on the home page only. */ body.ouci-common-home #logo { display: none; } body.ouci-common-home header .row { min-height: 0; } /* ---------- menu: AI button next to the catalogue, no hover gap ---------- */ body.ouci #menu #menu-ai-button { order: 2; margin-left: 20px !important; } @media (min-width: 992px) { body.ouci #menu #navbar-menu { order: 1; flex-grow: 0; } body.ouci #menu.navbar { justify-content: flex-start; } } /* The dropdown used to sit 12px below the link; that gap closed the menu when the cursor crossed it. Keep the visual offset as padding instead of margin. */ body.ouci #menu .dropdown-menu { margin-top: 0; padding-top: 26px; } /* ---------- "Ми не просто книгарня": photo / text tiles ---------- */ body.ouci #about-space { background: transparent; border-top: 1px solid var(--ouci-line); padding: 72px 0 24px; margin-top: 0; } body.ouci .about-space-heading { font-family: inherit; font-weight: 300; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.2rem); letter-spacing: -.02em; color: var(--ouci-ink); margin-bottom: 40px; } body.ouci .about-space-tiles { display: flex; gap: 56px; align-items: flex-start; } body.ouci .about-space-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 36px; } body.ouci .about-space-intro { max-width: none; color: var(--ouci-ink); font-weight: 300; font-size: 1.05rem; line-height: 1.7; margin-bottom: 0; } body.ouci .about-space-photo { border-radius: 2px; box-shadow: 0 14px 36px rgba(0, 0, 0, .14); } body.ouci .about-space-photo-main { aspect-ratio: 3 / 2; } body.ouci .about-space-photo-small { aspect-ratio: 3 / 2; } body.ouci .about-space-features { margin-bottom: 28px; } body.ouci .about-space-features li { font-weight: 300; font-size: 15px; color: var(--ouci-ink); border-bottom: 1px solid var(--ouci-line); padding-bottom: 14px; margin-bottom: 14px; } body.ouci .about-space-features li i { color: var(--ouci-ink); font-size: 1rem; } body.ouci .about-space-cta { background: var(--ouci-ink); color: #fff; font-weight: 300; border-radius: 50px; padding: 11px 26px; } body.ouci .about-space-cta:hover { background: #333; color: #fff; } @media (max-width: 767.98px) { body.ouci .about-space-tiles { flex-direction: column; gap: 28px; } body.ouci .about-space-col { gap: 24px; } body.ouci #about-space { padding-top: 48px; } } /* ================================================================== STEP 9 — wordmark logo, pill menu, stock state ================================================================== */ /* "Каталог" gets the same rounded outline as the AI button, for consistency. */ body.ouci #menu .navbar-nav > .nav-item > .nav-link { border: 1px solid var(--ouci-line); border-radius: 50px; padding: 7px 20px; margin-right: 0; font-size: 14px; opacity: 1; color: var(--ouci-ink); } body.ouci #menu .navbar-nav > .nav-item > .nav-link:hover, body.ouci #menu .nav-item.dropdown:hover > .nav-link { border-color: var(--ouci-ink); } body.ouci #menu #menu-ai-button { font-size: 14px; padding: 7px 20px; } body.ouci #menu .navbar-nav { gap: 12px; } /* Rows of books need more air between them than inside a row. */ body.ouci .product-thumb .image { margin-bottom: 22px; } /* ---------- out of stock ---------- */ body.ouci .product-out-of-stock { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--ouci-line); border-radius: 50px; padding: 13px 28px; font-weight: 300; color: var(--ouci-muted); } body.ouci .product-out-of-stock i { color: #b9bfc5; } body.ouci .btn-buy--out { opacity: .45; cursor: not-allowed; background: transparent !important; border: 1px solid var(--ouci-line) !important; color: var(--ouci-muted) !important; } body.ouci .btn-buy--out:hover { background: transparent !important; border-color: var(--ouci-line) !important; color: var(--ouci-muted) !important; } /* Rows of book cards — the module grids use .col.mb-3, the category page uses #product-list; :has() picks exactly the columns holding a card. */ body.ouci #content .col:has(> .product-thumb) { margin-bottom: 76px !important; } @media (max-width: 767.98px) { body.ouci #content .col:has(> .product-thumb) { margin-bottom: 48px !important; } body.ouci #product-list > .col { margin-bottom: 48px !important; } } /* ================================================================== STEP 10 — one real search field, spacing corrections ================================================================== */ /* The home page uses the same search module as every other page — the one with live autocomplete — just dressed as the pill. */ body.ouci-common-home .ouci-brand__search { max-width: 820px; margin: 30px auto 0; } body.ouci-common-home .ouci-brand__search > .position-relative { margin-bottom: 0 !important; } body.ouci-common-home .ouci-brand__search form.input-group { height: 60px; align-items: center; flex-wrap: nowrap; border-radius: 50px; background: #fff; padding-left: 28px; padding-right: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .08); } body.ouci-common-home .ouci-brand__search #input-header-search { height: 100%; padding: 0; font-family: inherit; font-size: 20px; font-weight: 300; text-align: left; background: transparent !important; border: 0 !important; border-radius: 0; box-shadow: none !important; } body.ouci-common-home .ouci-brand__search #input-header-search::placeholder { color: #9aa0a6; transition: opacity .18s ease-in-out; } body.ouci-common-home .ouci-brand__search #input-header-search:focus::placeholder { opacity: 0; } body.ouci-common-home .ouci-brand__search .btn { flex: 0 0 54px; width: 54px; background: transparent !important; border: 0 !important; color: var(--ouci-ink) !important; box-shadow: none; } body.ouci-common-home .ouci-brand__search #header-search-autocomplete { text-align: left; margin-top: 6px; border-radius: 14px; overflow: hidden; } /* ---------- spacing ---------- */ /* Less air between the wordmark and the search line. */ body.ouci:not(.ouci-common-home) header { padding-top: 0; padding-bottom: 0; } body.ouci:not(.ouci-common-home) header .row { align-items: center; } body.ouci:not(.ouci-common-home) header .col-md-5 { margin-top: 6px; } body.ouci #logo { margin-bottom: 0; } /* A little breathing room around the menu row and under the breadcrumb. */ body.ouci #menu.navbar { padding-top: 18px; padding-bottom: 18px; margin-bottom: 0; } body.ouci .breadcrumb { margin: 30px 0 14px; } body.ouci #content h1 { margin-top: 6px; } /* ================================================================== Checkout form polish ================================================================== */ /* Every text input on the checkout repeats its label as a placeholder, so the label above it is redundant. Hide it visually (kept in the DOM for screen readers) only where a placeholder actually carries the text — selects, textareas and custom fields keep their visible label. */ body.ouci-checkout-checkout #content div:has(> input.form-control[placeholder]) > label.form-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* The "*" required marker rides along in the placeholder instead (appended by ocMarkRequiredPlaceholders in register.twig) — a floating pseudo-element asterisk ended up next to the wrong column. */ /* The "log in instead" line at the top of the checkout has to read as a link — the page-wide rule paints every #content link in ink. */ body.ouci-checkout-checkout #content .checkout-login-line a { text-decoration: underline; text-underline-offset: 3px; } /* Shipping / payment options are a plain inline radio list, not a modal. */ body.ouci #content .checkout-method { padding: 9px 0; border-bottom: 1px solid var(--ouci-line); } body.ouci #content .checkout-method:last-child { border-bottom: 0; } body.ouci #content .checkout-method .form-check-label { color: var(--ouci-ink); cursor: pointer; } /* ---------- header cart: one click straight to the checkout ---------- */ /* The button is a link now; the preview opens on hover instead of on click. */ body.ouci #cart a.btn { text-decoration: none; } body.ouci #cart .dropdown-menu { display: none; position: absolute; inset: auto 0 auto auto; top: 100%; min-width: 420px; margin: 0; padding: 18px 20px 14px !important; border: 1px solid var(--ouci-line); border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .10); background: #fff; } body.ouci #cart .dropdown:hover .dropdown-menu, body.ouci #cart .dropdown:focus-within .dropdown-menu, body.ouci #cart .dropdown.is-open .dropdown-menu { display: block; } body.ouci #cart .cart-panel__actions { margin-top: 14px; text-align: right; } body.ouci #cart .cart-panel__actions .btn { border-radius: 50px; font-size: 13px; padding: 9px 22px; background: var(--ouci-ink) !important; border-color: var(--ouci-ink) !important; color: #fff !important; } body.ouci #cart .dropdown-menu .table { --bs-table-bg: transparent; margin-bottom: 0; } body.ouci #cart .dropdown-menu .table > :not(caption) > * > * { background: transparent; border: 0; border-bottom: 1px solid var(--ouci-line); padding: 10px 6px; font-weight: 300; vertical-align: middle; } body.ouci #cart .dropdown-menu .table--totals > :not(caption) > * > * { border-bottom: 0; } body.ouci #cart .dropdown-menu .table--totals tr:last-child td { border-top: 1px solid var(--ouci-ink); font-weight: 400; } body.ouci #cart .dropdown-menu a { color: var(--ouci-ink); text-decoration: none; } body.ouci #cart .dropdown-menu a:hover { text-decoration: underline; } body.ouci #cart .dropdown-menu small { color: var(--ouci-muted); } /* stylesheet.css sets `#cart .img-thumbnail { min-width: 100px }`, which beats a plain max-width and blew the 47px thumb up until it collided with the title. */ body.ouci #cart .dropdown-menu .table--items td:first-child { width: 72px; } body.ouci #cart .dropdown-menu .img-thumbnail { border: 0; border-radius: 0; padding: 0; background: transparent; min-width: 0; max-width: 54px; height: auto; } body.ouci #cart .dropdown-menu .btn-danger { background: transparent !important; border: 0 !important; color: var(--ouci-muted) !important; padding: 2px 4px; box-shadow: none; } body.ouci #cart .dropdown-menu .btn-danger:hover { color: var(--ouci-ink) !important; } /* WhatsApp gets its brand green so the icon reads as "you can message us". */ body.ouci .whatsapp-link, body.ouci .whatsapp-link i { color: #25d366 !important; } body.ouci .whatsapp-link:hover { text-decoration: underline; } body.ouci nav#top .whatsapp-link { font-size: 15px; vertical-align: -1px; } /* ---------- events section on the specials page ---------- */ body.ouci .events { margin: 8px 0 56px; } body.ouci .events h2 { font-size: 1.5rem; font-weight: 300; border-bottom: 2px solid var(--ouci-ink); padding-bottom: 10px; margin: 0 0 24px; } body.ouci .events__lead { max-width: 62ch; font-size: 1.05rem; } body.ouci .events__subtitle { font-size: 13px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--ouci-muted); margin: 24px 0 12px; } body.ouci .events__list { list-style: none; padding: 0; margin: 0; } body.ouci .events__list li { border-bottom: 1px solid var(--ouci-line); padding: 9px 0; } body.ouci .events__list li:last-child { border-bottom: 0; } body.ouci .events__gallery { margin: 28px 0 4px; } body.ouci .events__gallery img { width: 100%; height: auto; } body.ouci .events__cta { margin-top: 28px; font-size: 1.05rem; } /* Shipping is only priced at checkout, so the cart states it in words. */ body.ouci .cart-shipping-note { margin-top: 16px; font-size: 13px; max-width: 78ch; } /* ---------- shipping hint (cart + checkout summary) ---------- */ body.ouci .shipping-hint { margin: 20px 0 6px; } body.ouci .shipping-hint__text { margin: 0; font-size: 13px; color: var(--ouci-muted); max-width: 78ch; } body.ouci .shipping-hint--free .shipping-hint__text { color: var(--ouci-ink); } /* The nudge is the one that has to be noticed: a tinted card with the progress bar, the sentence and a call to action that opens the shop in a new tab. */ body.ouci .shipping-hint--nudge { background: #f4f6f5; border: 1px solid var(--ouci-line); border-radius: 14px; padding: 16px 18px 18px; } body.ouci .shipping-hint--nudge .shipping-hint__text { color: var(--ouci-ink); font-size: 14px; margin-bottom: 12px; } body.ouci .shipping-hint__bar { height: 6px; background: #fff; border: 1px solid var(--ouci-line); border-radius: 6px; overflow: hidden; margin-bottom: 12px; } body.ouci .shipping-hint__bar span { display: block; height: 100%; background: var(--ouci-ink); transition: width .3s ease; } body.ouci .shipping-hint__cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } body.ouci .shipping-hint__cta .btn { border-radius: 50px; font-size: 13px; padding: 8px 20px; background: var(--ouci-ink) !important; border-color: var(--ouci-ink) !important; color: #fff !important; } /* This rule sits after the generic `.btn-primary:hover` and matches with the same specificity and !important, so it was winning on document order and the button had no hover at all. It needs its own. */ body.ouci .shipping-hint__cta .btn:hover { background: #333 !important; border-color: #333 !important; color: #fff !important; } body.ouci .shipping-hint__note { font-size: 12px; color: var(--ouci-muted); flex: 1 1 180px; } /* ---------- cookie notice ---------- */ body.ouci #cookie.cookie-toast { position: fixed; left: 20px; bottom: 20px; top: auto; right: auto; width: auto; height: auto; max-width: 380px; z-index: 1080; opacity: 1; background: #fff; color: var(--ouci-ink); border: 1px solid var(--ouci-line); border-radius: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .12); padding: 20px 22px 18px; } body.ouci .cookie-toast__text { margin: 0 0 14px; font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--ouci-ink); } body.ouci .cookie-toast__text a { color: var(--ouci-ink); text-decoration: underline; text-underline-offset: 3px; } body.ouci .cookie-toast__actions { display: flex; gap: 10px; flex-wrap: wrap; } body.ouci .cookie-toast .btn { border-radius: 50px; font-size: 13px; padding: 7px 18px; } body.ouci .cookie-toast .btn-primary { background: var(--ouci-ink) !important; border-color: var(--ouci-ink) !important; color: #fff !important; } body.ouci .cookie-toast .btn-light { background: transparent !important; border: 1px solid var(--ouci-line) !important; color: var(--ouci-muted) !important; } body.ouci .cookie-toast__close { position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 20px; line-height: 1; color: var(--ouci-muted); cursor: pointer; } body.ouci .cookie-toast__close:hover { color: var(--ouci-ink); } @media (max-width: 575px) { body.ouci #cookie.cookie-toast { left: 12px; right: 12px; bottom: 12px; max-width: none; } } /* The checkout form saves itself; this is the only feedback it needs. */ body.ouci .register-status { margin: 10px 0 0; font-size: 13px; color: var(--ouci-muted); min-height: 18px; } body.ouci .register-status a { text-decoration: underline; text-underline-offset: 3px; } /* ---------- editable line items in the order summary ---------- */ /* The controls now live in the total column, above the line total. */ body.ouci .confirm-qty { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 0; } body.ouci .confirm-line-total { margin-top: 8px; } /* The article and the options are details of the title above them, so they are indented under it rather than marked with a dash. */ body.ouci .confirm-detail { padding-left: 18px; } body.ouci .confirm-qty__btn { width: 24px; height: 24px; line-height: 1; padding: 0; border: 1px solid var(--ouci-line); border-radius: 50%; background: transparent; color: var(--ouci-ink); font-size: 14px; cursor: pointer; } body.ouci .confirm-qty__btn:hover { background: var(--ouci-ink); border-color: var(--ouci-ink); color: #fff; } body.ouci .confirm-qty__value { min-width: 20px; text-align: center; font-size: 13px; } body.ouci .confirm-qty__remove { margin-left: 8px; border: 0; background: none; padding: 0; font-size: 12px; color: var(--ouci-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } body.ouci .confirm-qty__remove:hover { color: var(--ouci-ink); } /* ================================================================== STEP 10 — buy controls moved onto the cover ================================================================== */ /* The card buttons above are deliberately transparent with a hairline outline, which reads well against the page but disappears against artwork. On the cover they need to carry their own ground - still monochrome, still no red circle. */ body.ouci .product-thumb .product-actions-overlay .btn, body.ouci .product-thumb .product-actions-overlay button { background: rgba(255, 255, 255, .94) !important; border: 1px solid var(--ouci-line) !important; color: var(--ouci-ink) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .16); } body.ouci .product-thumb .product-actions-overlay .btn:hover, body.ouci .product-thumb .product-actions-overlay button:hover { background: var(--ouci-ink) !important; border-color: var(--ouci-ink) !important; color: #fff !important; } body.ouci .product-thumb .product-actions-overlay .btn-buy--out:hover { background: rgba(255, 255, 255, .94) !important; border-color: var(--ouci-line) !important; color: var(--ouci-muted) !important; } /* The cover now sets the card's height, so the old margin under a padded square would double up on the gap the content block already carries. */ body.ouci .product-thumb .image { margin-bottom: 14px; } /* The checkout's announcements link, in place of the newsletter switch. */ body.ouci #content a.checkout-telegram { display: inline-flex; align-items: center; gap: 10px; color: var(--ouci-ink); text-decoration: none; font-size: 15px; font-weight: 300; border: 1px solid var(--ouci-line); border-radius: 50px; padding: 9px 20px 9px 16px; } body.ouci #content a.checkout-telegram i { font-size: 20px; line-height: 1; } /* Hover is a shade change, the same kind the filled buttons make — not an inversion to solid black. It also has to be scoped through #content: `body.ouci #content a:not(.btn)…` carries an id and outranks a plain class selector, so a colour set without it lost and the label stayed dark on a black pill, i.e. invisible. */ body.ouci #content a.checkout-telegram:hover { border-color: var(--ouci-ink); background: #f2f1ee; color: var(--ouci-ink); }