. With no width the block wrapped underneath, so every account page (login, register, hesabım, adres defteri, siparişler, favorilerim) printed its account menu as a full-width list under the content instead of beside it. The width belongs to the page, not to the module, so it is given here — only where the block really is a row child. */ .row > .durd-modules { flex: 0 0 auto; width: 100%; padding-inline: calc(var(--bs-gutter-x) * .5); margin-top: 2rem; } @media (min-width: 992px) { .row > .durd-modules { width: 26%; margin-top: 0; } } /* The account menu is a plain .list-group (not -flush), so it needs its own card treatment rather than inheriting the filter sidebar's. */ .durd-modules > .list-group { background: var(--durd-surface); border: 1px solid var(--durd-line); border-radius: var(--durd-radius); box-shadow: var(--durd-shadow); overflow: hidden; --bs-list-group-border-radius: 0; } .durd-modules > .list-group > .list-group-item { background: transparent; border: 0; border-bottom: 1px solid var(--durd-line); padding: .7rem 1.1rem; color: var(--durd-ink-2); font-size: 14px; } .durd-modules > .list-group > .list-group-item:last-child { border-bottom: 0; } .durd-modules > .list-group > a.list-group-item:hover { background: var(--durd-surface-2); color: var(--durd-green); } .durd-modules > .list-group > .list-group-item.active { background: var(--durd-green-soft); color: var(--durd-green); font-weight: var(--durd-w-strong); } /* The featured / latest / bestseller / related modules ship `row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-4`. The phone end of that is wrong for this shop: ONE card per screen, against 2-up on the category grid and 2-up on the category tiles, so the home page was 5 700px tall and the same product looked like a different card depending on which page you met it on. Only the phone end is changed; from 992px up the upstream rhythm is kept. The selector names the module's exact class list so it cannot catch another row. CSS rather than a template override because these module templates are skinned, not overridden (§6). */ .row.row-cols-1.row-cols-sm-2.row-cols-md-3.row-cols-xl-4 > * { flex: 0 0 auto; width: 50%; } @media (min-width: 992px) { .row.row-cols-1.row-cols-sm-2.row-cols-md-3.row-cols-xl-4 > * { width: 33.3333%; } } @media (min-width: 1200px) { .row.row-cols-1.row-cols-sm-2.row-cols-md-3.row-cols-xl-4 > * { width: 25%; } } /* Module heading: featured / latest / bestseller / special all emit a bare h3. */ #content > .durd-modules h3, .durd-page > .container > h3, #common-home h3 { margin-bottom: 1.25rem; } /* Filter + category modules in the sidebar. */ .durd-modules .card { background: var(--durd-surface); border: 1px solid var(--durd-line); border-radius: var(--durd-radius); box-shadow: var(--durd-shadow); overflow: hidden; margin-bottom: 1rem; } .durd-modules .card-header { background: transparent; border-bottom: 1px solid var(--durd-line); font-family: var(--durd-serif); font-size: 1.05rem; font-weight: var(--durd-w-strong); padding: .9rem 1.1rem; } .durd-modules .card-header i { display: none; } .durd-modules .card-body { padding: .9rem 1.1rem; } .durd-modules .card-footer { background: transparent; border-top: 1px solid var(--durd-line); padding: .9rem 1.1rem; } .durd-modules .card-footer .btn { width: 100%; } .durd-modules .list-group-flush > .list-group-item { background: transparent; border-color: var(--durd-line); padding: .6rem 1.1rem; color: var(--durd-ink); } /* The filter module emits a bare as a group heading. */ .durd-modules a.list-group-item:not([href]) { font-size: 12px; font-weight: var(--durd-w-strong); letter-spacing: .08em; text-transform: uppercase; color: var(--durd-ink-3); border-bottom: 0; padding-bottom: .2rem; } .durd-modules .list-group-item + a.list-group-item:not([href]) { border-top: 1px solid var(--durd-line); margin-top: .3rem; padding-top: .8rem; } .durd-modules .list-group-item a { color: var(--durd-ink-2); } .durd-modules .list-group-item a:hover { color: var(--durd-green); } .durd-modules .form-check { margin-bottom: .1rem; } /* Under 992px the filter panel is a drawer: fixed-position, zero height in the flow — but its .col-lg-3 wrapper still collected the row's vertical gutter, so every listing page opened with ~48px of empty ground between the heading and the toolbar that looked like a rendering fault. The column cannot simply be display:none — the drawer inside it has to stay openable. */ @media (max-width: 991.98px) { #product-category > .container > .row > .col-lg-3:has(.durd-filters), #product-search > .container > .row > .col-lg-3:has(.durd-filters) { display: contents; } } @media (min-width: 992px) { .durd-filters { position: sticky; top: calc(var(--durd-header-h) + 12px); } .durd-filters .offcanvas-header { display: none; } .durd-filters .offcanvas-body { padding: 0; } } /* ---------------------------------------------------------------- search form product/search.twig is overridden; this is the criteria card on top of it. */ .durd-searchform { padding: 1.1rem; margin-bottom: 1.5rem; } .durd-searchform__grid { display: grid; gap: 1rem; } @media (min-width: 768px) { .durd-searchform { padding: 1.4rem; } .durd-searchform__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } } /* ---------------------------------------------------------------- sitemap Upstream renders nested

, which covers most of the page — but the consent switches, the submit button and the order comment sit in bare

s, so they floated loose on the page ground between two white cards. Given the same card so the column reads as one stack. */ #checkout-checkout #form-register > .row:last-child > .col:has(.form-switch), #checkout-checkout #checkout-payment-method > .mb-2:has(#input-comment) { background: var(--durd-surface); border: 1px solid var(--durd-line); border-radius: var(--durd-radius); box-shadow: var(--durd-shadow); padding: 1.25rem; margin-bottom: 1rem; } /* The switch and the "I have read" agreement are the two things a buyer must not miss; upstream stacks them with no gap at all. */ #checkout-checkout .form-switch + .form-switch { margin-top: .5rem; } /* Upstream puts the password fieldset in one half of a two-column row whose other half is the captcha — and with no captcha module installed that half is an empty div, so the password card rendered at half width beside nothing. */ #checkout-checkout #form-register #password:has(+ .col:empty) { flex: 0 0 100%; width: 100%; } #checkout-checkout #form-register #password + .col:empty { display: none; } /* A bare
between panels adds a stray line box on top of the card margins. */ #checkout-checkout #checkout-payment-method > br, #checkout-checkout #checkout-shipping-method > br { display: none; } /* --- address fields in Turkish reading order ------------------------------ Upstream orders an address Firma → Adres → Adres (devamı) → City → Posta Kodu → Ülke → Zone. In OpenCart "city" is the district and "zone" is the province (Phase 1 relabelled them İlçe and İl for exactly that reason), so the form asked a Turkish buyer for the district BEFORE the province, and put the province last of all, under the country. Reordered visually only: the country