/* * Catania Calzature — catalogue: shop header, subcategory chips, filters (WooCommerce Product Filters), toolbar, * product grid (WooCommerce Product Collection), pagination. */ /* ---------- Shop header ---------- */ .cc-shop-head { margin: 4px 0 14px; } .cc-shop-head__top { display: grid; gap: 8px; } .cc-shop-head__name { display: flex; align-items: center; gap: 14px; min-width: 0; } /* The text may shrink below its longest word (descriptions pasted with non-breaking spaces, long brand names). */ .cc-shop-head__top > * { min-width: 0; } .cc-shop-head__title { min-width: 0; margin: 0; font-size: var(--wp--preset--font-size--xxl); font-weight: 400; overflow-wrap: anywhere; } /* Description: the first two lines, "Leggi di più" opens the whole text in place (all of it is in the page). */ .cc-shop-head__intro { margin: 0; color: var(--c-text); font-size: 15px; line-height: 1.55; overflow-wrap: break-word; } .cc-shop-head__desc > * { margin: 0 0 8px; } .cc-shop-head__desc > :last-child { margin-bottom: 0; } .cc-shop-head__desc :is(h2, h3, h4) { margin: 14px 0 6px; font-size: 16px; } /* Closed only when JavaScript runs (html.cc-js, set in ): the page arrives closed, so nothing moves. */ .cc-js .cc-shop-head__intro.is-collapsible:not(.is-open) .cc-shop-head__desc { max-height: 3.1em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent); mask-image: linear-gradient(to bottom, #000 45%, transparent); } .cc-shop-head__more { margin: 2px 0 0; padding: 0; border: 0; background: none; color: var(--c-ink); font: inherit; font-size: 12px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .cc-shop-head__more:hover { color: var(--c-primary-700); } html:not(.cc-js) .cc-shop-head__more { display: none; } .cc-shop-head__logo { flex: none; display: grid; place-items: center; width: 64px; height: 48px; padding: 6px; border: 1px solid var(--c-line); border-radius: 0; background: #fff; } @media (min-width: 1024px) { .cc-shop-head__logo { width: 88px; height: 64px; padding: 8px; } } .cc-shop-head__logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .cc-shop-head .cc-chips { margin-top: 14px; } /* Subcategories: chips with a small photo. One line that scrolls sideways on phones and tablets (edge to edge, the first chip aligned with the page), wrapped lines on computers. The chip of the page being shown is marked. */ .cc-subcats { display: flex; gap: 8px; margin: 16px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); overflow-x: auto; scroll-padding-inline: var(--gutter); scrollbar-width: none; list-style: none; } .cc-subcats::-webkit-scrollbar { display: none; } .cc-subcats > li { flex: none; } .cc-subcat { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px 0 4px; border: 1px solid var(--c-line); border-radius: 0; background: #fff; color: var(--c-ink); font-size: 13px; font-weight: 400; white-space: nowrap; text-decoration: none !important; transition: border-color .15s, background-color .15s; } .cc-subcat:hover { border-color: var(--c-ink); color: var(--c-ink); } .cc-subcat__img { display: grid; flex: none; place-items: center; width: 38px; height: 38px; overflow: hidden; background: #fff; } .cc-subcat__img img { width: 36px; height: 36px; object-fit: contain; } .cc-subcat__img--empty { background: var(--c-soft); color: var(--c-ink); font: 400 16px var(--f-head); } .cc-subcat.is-current { border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); color: var(--c-ink); } /* ---------- Layout ---------- */ .cc-shop__layout { display: block; } .cc-shop__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; margin: 0 0 14px; border-bottom: 1px solid var(--c-line); } .cc-shop__toolbar .woocommerce-result-count, .cc-shop__toolbar .wc-block-product-results-count { margin: 0; color: var(--c-muted); font-size: 13px; } .cc-shop__toolbar .woocommerce-ordering { margin: 0; } .cc-shop__toolbar select.orderby { width: auto; min-height: 40px; padding: 0 36px 0 12px; border-color: var(--c-line); border-radius: 0; background-color: transparent; font-size: 13px; font-weight: 500; } /* Nothing found (the grey box of patterns/no-*.php): no count and sorting bar. With no filter to offer (a search that matches nothing: WooCommerce hides the empty filter groups) the filters column goes too and the box is centred; with filters in use the column stays, to change them. */ .cc-shop__results:has(.wp-block-woocommerce-product-collection-no-results) .cc-shop__toolbar { display: none; } .cc-shop__layout:has(.wp-block-woocommerce-product-collection-no-results):not(:has(.cc-fg:not(.wc-block-product-filter--hidden))) { display: block !important; } .cc-shop__layout:has(.wp-block-woocommerce-product-collection-no-results):not(:has(.cc-fg:not(.wc-block-product-filter--hidden))) > .cc-shop__filters { display: none; } /* Filters: WooCommerce Product Filters. Phones and tablets: button + sheet from the bottom (WooCommerce's own overlay, extended up to 1023 px); desktop: sidebar. */ .cc-shop__filters { position: relative; } .cc-filters { --wc-product-filters-overlay-icon-size: 20px; --wc-product-filters-background-color: #fff; --wc-product-filters-text-color: var(--c-ink); --wc-product-filter-checkbox-list-option-element: #fff; --wc-product-filter-checkbox-list-option-element-border: var(--c-line-strong); --wc-product-filter-checkbox-list-option-element-selected: var(--c-primary); --wc-product-filter-checkbox-list-label-element: var(--c-ink); --wc-product-filter-price-slider: var(--c-primary); --wc-product-filter-price-slider-handle: #fff; --wc-product-filter-price-slider-handle-border: var(--c-primary); } /* Checkboxes like the native ones of the site: blue box with a white tick when chosen. */ .cc-filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input { width: 20px; height: 20px; border-width: 1.5px; border-radius: 0; } .cc-filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked { border-color: var(--c-primary); background: var(--c-primary); } .cc-filters .wc-block-product-filter-checkbox-list__input-wrapper::before { display: none; } .cc-filters .wc-block-product-filter-checkbox-list__mark { width: 20px; height: 20px; padding: 4px; color: #fff; } .cc-filters .wc-block-product-filters__open-overlay { gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--c-ink); border-radius: 0; background: #fff; color: var(--c-ink); font: 500 12px var(--f-body); letter-spacing: var(--track); text-transform: uppercase; cursor: pointer; } .cc-filters .wc-block-product-filters__open-overlay span { padding: 0; } /* Number of options chosen, on the "Filtra prodotti" button (site.js). */ .cc-filters .wc-block-product-filters__open-overlay[data-cc-count]::after { content: attr(data-cc-count); display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--c-primary); color: #fff; font: 700 11px/1 var(--f-body); } .cc-filters .wc-block-product-filters__overlay-header { flex-flow: row; align-items: center; justify-content: space-between; padding: 12px 12px 8px 20px; border-bottom: 1px solid var(--c-line); } .cc-filters__sheet-title { margin: 0; color: var(--c-ink); font: 400 22px var(--f-head); } .cc-filters .wc-block-product-filters__close-overlay { min-height: 40px; padding: 0 8px; border-radius: 0; font-family: var(--f-body); font-size: 14px; cursor: pointer; } /* WooCommerce gives some of its filter buttons a font of their own (Arial): the site font everywhere. */ .cc-filters .wc-block-product-filter-checkbox-list__show-more-button, .cc-filters .wc-block-product-filters__open-overlay, .cc-filters .wc-block-product-filters__apply { font-family: var(--f-body); } /* Groups: the heading opens and closes the group (state on the