Products

tag near the top of the file 5. Paste the entire contents of this file just above wrapped in tags like this: ============================================================ */ /* ── 1. global typography ─────────────────────────────────── */ :root { --font-heading-family: "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body-family: "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body-weight: 400; --font-heading-weight: 400; --font-body-style: normal; --font-heading-style: normal; --font-body-scale: 0.85; --font-heading-scale: 0.85; } body, input, textarea, select, button { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-size: 13px; font-weight: 400; } h1, h2, h3, h4, h5, h6 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; letter-spacing: 0.02em; } /* ── 2. header & wordmark ─────────────────────────────────── */ .header-wrapper { box-shadow: none; border-bottom: 0.5px solid #e8e8e8; } .header { padding: 14px 24px; align-items: center; } /* hide the pixelated logo image */ .header__heading-logo { display: none !important; } /* store name text becomes the wordmark */ .header__heading { font-size: 13px; font-weight: 400; margin: 0; line-height: 1; } .header__heading-link { font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0.03em; text-transform: lowercase; color: #000 !important; text-decoration: none; } /* nav items */ .header__menu-item, .header__menu-item span, .header__active-menu-item { font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0.06em !important; text-transform: lowercase !important; color: #888 !important; } /* subline echoing smartdumb.info */ .header-wrapper::after { content: "los angeles, ca ?!"; display: block; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 10px; color: #bbb; letter-spacing: 0.07em; padding: 6px 24px; border-top: 0.5px solid #e8e8e8; background: #fff; } /* hide announcement bar if present */ .announcement-bar, .shopify-section-announcement-bar { display: none; } /* ── 3. collection page — product grid ────────────────────── */ .collection__title, .collection .title, .section-header h1, .section-header .title { font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0.1em; text-transform: lowercase; color: #aaa; margin-bottom: 0 !important; padding: 12px 0; border-bottom: 0.5px solid #e8e8e8; } /* 3-column grid on desktop */ .collection .grid, .product-grid, .collection-list .grid { grid-template-columns: repeat(3, 1fr) !important; gap: 0 !important; } /* 2-column on tablet */ @media screen and (min-width: 750px) and (max-width: 989px) { .collection .grid, .product-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* 2-column on mobile */ @media screen and (max-width: 749px) { .collection .grid, .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0 !important; } } /* ── 4. product cards ─────────────────────────────────────── */ .card-wrapper { border-right: 0.5px solid #e8e8e8; border-bottom: 0.5px solid #e8e8e8; padding: 0; } .card-wrapper:nth-child(3n) { border-right: none; } .card, .card--standard, .card--media { border: none !important; border-radius: 0 !important; box-shadow: none !important; background: #fff; } .card__media, .card__media img, .media { border-radius: 0 !important; } .card__media img { object-fit: cover; transition: opacity 0.2s ease; } .card-wrapper:hover .card__media img { opacity: 0.88; } .card__content, .card__information { padding: 8px 10px 12px !important; } .card__inner { border-radius: 0 !important; } /* vendor / artist name */ .card__vendor, .caption-with-letter-spacing { font-size: 9px !important; font-weight: 400 !important; letter-spacing: 0.1em !important; text-transform: lowercase !important; color: #aaa !important; margin-bottom: 3px; display: block; } /* product title */ .card__heading, .card__heading a { font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0.01em; text-transform: lowercase; line-height: 1.35; color: #111 !important; text-decoration: none; margin-bottom: 5px; } .card__heading a:hover { opacity: 0.55; } /* price */ .price, .price__container { font-size: 10px !important; color: #666 !important; letter-spacing: 0.03em; } .price__regular, .price__sale, .price-item, .price-item--regular { font-size: 10px !important; font-weight: 400 !important; color: #666 !important; } .price--on-sale .price-item--regular { color: #bbb !important; text-decoration: line-through; } /* sold out / badge */ .badge, .badge--bottom-left, .badge--bottom-right { font-size: 9px !important; font-weight: 400 !important; letter-spacing: 0.08em; text-transform: lowercase; border-radius: 0 !important; padding: 2px 6px !important; } /* ── 5. quick-add button (reveal on hover) ────────────────── */ .quick-add, .card-wrapper .quick-add__submit { opacity: 0; transition: opacity 0.15s ease; font-size: 10px !important; font-weight: 400 !important; letter-spacing: 0.08em; text-transform: lowercase !important; border-radius: 0 !important; border: 0.5px solid #111 !important; background: #fff !important; color: #111 !important; } .card-wrapper:hover .quick-add, .card-wrapper:hover .quick-add__submit { opacity: 1; } /* ── 6. buttons (global) ──────────────────────────────────── */ .button, .btn, button.button, [type="button"], [type="submit"] { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0.1em; text-transform: lowercase !important; border-radius: 0 !important; } /* ── 7. product page ──────────────────────────────────────── */ .product__title, .product .title { font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0.02em; text-transform: lowercase; line-height: 1.3; } .product__vendor { font-size: 10px !important; color: #aaa !important; letter-spacing: 0.1em; text-transform: lowercase; margin-bottom: 6px; display: block; } .product__description, .product-description, .rte { font-size: 12px !important; line-height: 1.65; color: #333; } .product-form__submit, .product-form .button { font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0.1em; text-transform: lowercase !important; border-radius: 0 !important; background: #000 !important; color: #fff !important; border: none !important; padding: 12px 20px; } .product-form__submit:hover { background: #222 !important; } .product__media-item img, .product__media img { border-radius: 0 !important; } .product-form__input label, .product-form__input .form__label { font-size: 10px !important; letter-spacing: 0.08em; text-transform: lowercase; color: #888; } .quantity__input { font-size: 12px !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; border-radius: 0 !important; } .quantity__button { border-radius: 0 !important; } /* ── 8. cart ──────────────────────────────────────────────── */ .cart-count-bubble { font-size: 8px !important; background: #000 !important; color: #fff !important; } .cart__title, .cart-items__heading { font-size: 12px !important; font-weight: 400 !important; text-transform: lowercase; letter-spacing: 0.06em; } .totals__total-value { font-size: 13px !important; font-weight: 400 !important; } /* ── 9. search ────────────────────────────────────────────── */ .search__input { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 12px !important; border-radius: 0 !important; border: 0.5px solid #ddd !important; box-shadow: none !important; } .predictive-search__item-heading { font-size: 11px !important; font-weight: 400 !important; text-transform: lowercase; } /* ── 10. breadcrumbs ─────────────────────────────────────── */ nav.breadcrumb, .breadcrumb ol, .breadcrumb li, .breadcrumb a { font-size: 10px !important; color: #bbb !important; letter-spacing: 0.04em; text-transform: lowercase; text-decoration: none; } /* ── 11. footer ──────────────────────────────────────────── */ .footer { background: #fff !important; border-top: 0.5px solid #e8e8e8; padding-top: 16px; padding-bottom: 16px; } .footer-block__heading, .footer .h4, .footer h2, .footer h3 { font-size: 9px !important; font-weight: 400 !important; letter-spacing: 0.12em; text-transform: lowercase; color: #ccc !important; margin-bottom: 8px; } .footer__list-item a, .footer a, .footer__link { font-size: 10px !important; color: #aaa !important; text-decoration: none; letter-spacing: 0.04em; transition: color 0.12s; } .footer__list-item a:hover, .footer a:hover { color: #000 !important; } .footer__copyright, .copyright__content { font-size: 9px !important; color: #ccc !important; letter-spacing: 0.04em; } .footer .powered-by-link { font-size: 9px !important; color: #ddd !important; text-decoration: none; } /* ── 12. misc ─────────────────────────────────────────────── */ .localization-form__select, .disclosure__button, .select__select { border-radius: 0 !important; font-size: 11px !important; } .facets__summary, .facet-filters__sort .select__select { font-size: 10px !important; letter-spacing: 0.06em; text-transform: lowercase; } .pagination a, .pagination span { font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0.04em; border-radius: 0 !important; }