/* * Rims (Ζάντες) storefront — linked by resources/views/front/rims/* only. * Every selector is scoped under .rims-page (listing) or .rim-detail (detail * page). The sheet is yielded into BEFORE front.css and custom.css, so * it wins by specificity, never by order: every rule here outranks the * single-class rules of those sheets, and the seven `!important`s below * answer custom.css's own `a{color:#C90401!important}` and * `.price-tag{font-size:45px!important}` — nothing else needs one. */ /* ---------- listing page frame ---------- */ .rims-page h1 { margin: 12px 0 4px; color: #fff; } .rims-page .found-title { color: #fff; } .rims-page .rim-sort { display: inline-block; margin-left: 12px; } .rims-page .rim-sort label { margin: 0 4px 0 0; } /* (0,4,1): outranks Bootstrap's select.form-control:not([size]):not([multiple]) (0,3,1) */ .rims-page .found-title .rim-sort select.rimsort { display: inline-block; width: auto; height: 30px; padding: 2px 34px 2px 8px; font-size: 14px; vertical-align: middle; } .rims-page .rim-empty { height: auto; padding: 24px; text-align: center; } /* the paginator: Bootstrap's .pagination never wraps; 15 page items are ~570px */ .rims-page .pagination { flex-wrap: wrap; justify-content: center; } .rims-page .page-link { margin-bottom: 4px; } /* ---------- sidebar: collapsible facet groups, counts, mobile toggle ---------- */ .rims-page .rims-filter-toggle { display: block; width: 100%; margin: 10px 0; background: linear-gradient(180deg, #464647 0, #010101); color: #fff; /* front.css has .btn{border:0!important}: the frame is a box-shadow */ box-shadow: inset 0 0 0 1px #707070; font-size: 16px; } .rims-page .rims-filter-toggle:hover, .rims-page .rims-filter-toggle:focus { color: #fff; box-shadow: inset 0 0 0 1px #e95005; } .rims-page .rim-facet-group { margin-bottom: 8px; } .rims-page .rim-facet-heading { margin: 0; font-size: inherit; line-height: inherit; } /* the toggle is a real button (keyboard-operable), styled as a heading */ .rims-page .rim-facet-toggle { position: relative; display: block; width: 100%; margin: 0; padding: 6px 22px 6px 0; background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .15); border-radius: 0; color: #fff; font: inherit; font-size: 1.05rem; font-weight: 700; line-height: 1.3; text-align: left; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .rims-page .rim-facet-toggle:focus { outline: 1px dotted #fff; outline-offset: 2px; } .rims-page .rim-facet-toggle::after { content: "\2212"; position: absolute; right: 4px; top: 6px; font-weight: 400; color: #e95005; } .rims-page .rim-facet-toggle.collapsed::after { content: "+"; } .rims-page .rim-facet-list { list-style: none; margin: 6px 0 4px; padding: 0; } .rims-page .rim-facet-list .sidebar-item label { display: block; margin: 0; padding: 2px 0; color: #fff; cursor: pointer; } .rims-page .rim-facet-list input[type="checkbox"] { margin-right: 6px; vertical-align: middle; } .rims-page .rim-facet-count { font-size: 12px; opacity: .75; } .rims-page .rim-facet-count::before { content: "("; } .rims-page .rim-facet-count::after { content: ")"; } /* dimmed, still clickable; the count keeps full opacity so the two do not multiply */ .rims-page .rim-facet-zero label { opacity: .6; } .rims-page .rim-facet-zero .rim-facet-count { opacity: 1; } /* ---------- active-filter chips ---------- */ .rims-page .rim-chips { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 8px; } .rims-page .rim-chip { display: inline-block; margin: 0 6px 6px 0; padding: 3px 10px; border: 1px solid #707070; border-radius: 14px; background: #fff; color: #212529 !important; font-size: 13px; line-height: 18px; text-decoration: none; } .rims-page .rim-chip:hover, .rims-page .rim-chip:focus { background: #e95005; border-color: #e95005; color: #fff !important; text-decoration: none; } .rims-page .rim-chip-x { font-weight: 700; margin-left: 2px; } .rims-page .rim-chips-clear { margin: 0 0 6px 4px; color: #fff !important; font-size: 13px; text-decoration: underline; } /* ---------- result card (.rim-box): a grid — image | heading + size | availability, price, cart ---------- */ /* the tyre card is a 250px box with absolutely positioned regions (front.css / custom.css); the rim card is a grid (browsers without grid — IE11 — get the four blocks stacked, still readable) */ .rims-page .rim-box { display: grid; grid-template-columns: 140px minmax(0, 1fr) 200px; grid-template-areas: "media main side" "media specs side"; grid-gap: 6px 18px; align-items: start; height: auto; min-height: 0; padding: 16px 18px; } .rims-page .rim-media { grid-area: media; } .rims-page .rim-box .result-image { position: static; width: 140px; height: 140px; min-height: 0; min-width: 0; border-radius: 8px; background-color: #fff; background-repeat: no-repeat; background-size: contain; background-position: 50%; } .rims-page .rim-box .result-image .block { height: 140px; max-height: none; } /* no usable supplier image: a quiet frame instead of a blank white plate */ .rims-page .rim-box .result-image.rim-image-none { background: rgba(255, 255, 255, .06); border: 1px dashed rgba(255, 255, 255, .3); } .rims-page .rim-main { grid-area: main; min-width: 0; } .rims-page .rim-heading { display: block; color: #fff !important; line-height: 1.15; text-decoration: none; } .rims-page .rim-heading:hover .result-type, .rims-page .rim-heading:hover .result-brand { text-decoration: underline; } .rims-page .rim-heading .result-brand { font-size: 26px; } .rims-page .rim-heading .result-type { display: block; font-size: 16px; } .rims-page .rim-size { margin: 2px 0 0; font-size: 22px; min-width: 0; } .rims-page .rim-specs { grid-area: specs; display: flex; flex-wrap: wrap; align-self: start; margin: 0; } .rims-page .rim-spec { margin: 0 8px 6px 0; padding: 4px 8px; min-width: 86px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 6px; background: rgba(255, 255, 255, .08); } .rims-page .rim-spec dt { margin: 0; font-size: 11px; font-weight: 400; letter-spacing: .03em; text-transform: uppercase; opacity: .75; } .rims-page .rim-spec dd { margin: 0; font-size: 14px; font-weight: 700; white-space: nowrap; } .rims-page .rim-spec-colour dd { white-space: normal; } .rims-page .rim-swatch { display: inline-block; width: 12px; height: 12px; margin-right: 5px; border: 1px solid #fff; border-radius: 50%; vertical-align: -1px; } .rims-page .rim-colour-name { font-size: 12px; font-weight: 400; opacity: .8; } .rims-page .rim-side { grid-area: side; display: flex; flex-direction: column; align-items: center; justify-content: space-between; align-self: stretch; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .18); text-align: center; } .rims-page .rim-availability { font-size: 13px; } .rims-page .rim-price { line-height: 1.1; } .rims-page .rim-price .price-tag { font-size: 44px; line-height: 1; } .rims-page .rim-per { font-size: 14px; } .rims-page .rim-buy { display: flex; align-items: flex-end; justify-content: center; } .rims-page .rim-buy .tyre-qty { float: none; margin: 0 8px 0 0; text-align: left; } .rims-page .rim-buy .tyre-qty label { display: block; font-size: 12px; margin: 0; } /* (0,4,1): outranks Bootstrap's select.form-control:not([size]):not([multiple]) (0,3,1) */ .rims-page .rim-box .rim-buy select.tyre-qty-select { width: 64px; height: 30px; padding: 2px 6px; } .rims-page .rim-buy .buy-btn { width: 110px; } .rims-page .rim-box .wholesale-label { font-size: 12px; font-weight: 700; } /* ---------- detail page (.rim-detail) ---------- */ .rim-detail .rim-breadcrumb { margin: 12px 0 0; padding: 0; background: transparent; font-size: 14px; color: #fff; } .rim-detail .rim-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "\203A"; color: #fff; } .rim-detail .rim-breadcrumb a { color: #fff !important; } .rim-detail .rim-breadcrumb .breadcrumb-item.active { color: #fff; font-weight: 700; } .rim-detail .rim-full { margin-top: 12px; } .rim-detail .rim-body { padding: 24px; } .rim-detail .rim-detail-image { width: 100%; height: 360px; margin-bottom: 16px; border-radius: 8px; background-color: #fff; background-repeat: no-repeat; background-size: contain; background-position: 50%; } .rim-detail .rim-detail-image.rim-image-none { height: 120px; background: rgba(255, 255, 255, .06); border: 1px dashed rgba(255, 255, 255, .3); } .rim-detail .rim-specs-table { margin-bottom: 16px; background: transparent; color: #fff; } .rim-detail .rim-specs-table th, .rim-detail .rim-specs-table td { padding: 5px 8px; border-top: 1px solid rgba(255, 255, 255, .18); vertical-align: middle; } .rim-detail .rim-specs-table th { width: 44%; font-weight: 400; opacity: .8; white-space: nowrap; } .rim-detail .rim-specs-table td { font-weight: 700; } .rim-detail .rim-swatch { display: inline-block; width: 12px; height: 12px; margin-right: 5px; border: 1px solid #fff; border-radius: 50%; vertical-align: -1px; } .rim-detail .rim-colour-name { font-size: 12px; font-weight: 400; opacity: .8; } .rim-detail .rim-detail-buy { text-align: center; } .rim-detail .rim-availability { font-size: 13px; margin-bottom: 12px; } .rim-detail .rim-detail-price { margin: 8px 0 12px; font-size: 30px; font-weight: 700; line-height: 1.1; } .rim-detail .rim-per { font-size: 14px; font-weight: 400; } .rim-detail .rim-buy-form label { display: block; margin-bottom: 4px; } .rim-detail .rim-detail-qty { width: 80px; margin: 0 auto 12px; } /* custom.css fixes .buy-btn at 120px; the buy box is 98px wide at 768px */ .rim-detail .rim-buy-form .buy-btn { width: 100%; max-width: 120px; margin: 0 auto; } .rim-detail .rim-text { margin-top: 24px; } .rim-detail .rim-back-wrap { margin: 16px 0 24px; } .rim-detail .rim-back { color: #fff !important; font-size: 16px; text-decoration: underline; } /* ---------- widths ---------- */ /* >= 768px: the sidebar is always open (Bootstrap's .collapse would hide it) and the toggle is hidden */ @media (min-width: 768px) { .rims-page .rims-sidebar-collapse { display: block; } .rims-page .rims-filter-toggle { display: none; } } /* <= 1199px: the specs table headers may wrap (a 13-digit EAN next to "Κωδικός κατασκευαστή" needs the room) */ @media (max-width: 1199px) { .rim-detail .rim-specs-table th { white-space: normal; } } /* 768–991px (container 720px: sidebar 150px inside its border, results column 510px): the card becomes image | heading + strip with the availability / price / cart column as a full-width row underneath */ @media (min-width: 768px) and (max-width: 991px) { .rims-page .rims-sidebar .sidebar-ul-wrap { padding: 12px; } .rims-page .rim-facet-toggle { font-size: .95rem; } .rims-page .rim-box { grid-template-columns: 140px minmax(0, 1fr); grid-template-areas: "media main" "media specs" "side side"; } .rims-page .rim-side { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-around; margin-top: 4px; padding: 10px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .18); } .rims-page .rim-spec { min-width: 0; } .rim-detail .rim-detail-image { height: 260px; } } /* < 768px: front.css hides .side-bar-wrapper; the rims sidebar shows inside the collapse instead; the card stacks: image + heading on the first row, the spec strip and the cart row span the card */ @media (max-width: 767px) { .rims-page .rims-sidebar.side-bar-wrapper { display: block; margin-top: 0; } .rims-page .rim-box { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "media main" "specs specs" "side side"; grid-gap: 8px 12px; padding: 12px; } .rims-page .rim-box .result-image, .rims-page .rim-box .result-image .block { width: 96px; height: 96px; } .rims-page .rim-heading .result-brand { font-size: 22px; } .rims-page .rim-size { font-size: 18px; } .rims-page .rim-spec { min-width: 0; } .rims-page .rim-side { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 10px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .18); } .rims-page .rim-price .price-tag { font-size: 36px !important; } .rims-page .rim-buy-form { flex-basis: 100%; margin-top: 8px; } .rims-page .rim-sort { display: block; margin: 8px 0 0; } .rim-detail .rim-body { padding: 12px; } .rim-detail .rim-detail-image { height: 240px; } .rim-detail .rim-specs-table th { width: auto; } .rim-detail .rim-detail-buy { margin-top: 12px; } }