/** Shopify CDN: Minification failed Line 28:0 All "@import" rules must come first **/ /* ============================================= COLLECTION PAGE — EQUESTRIAN BRAND STYLES Navy + Gold + White | Clean Serif ============================================= */ :root { --brand-navy: #0f1f3d; --brand-gold: #c9971c; --brand-gold-hover: #a87d16; --brand-white: #ffffff; --brand-offwhite: #f8f7f4; --brand-text: #1a1a1a; --brand-text-muted: #6b6b6b; --brand-border-light: #ececec; --font-serif: 'Playfair Display', 'Georgia', serif; --font-body: 'EB Garamond', 'Garamond', Georgia, serif; --font-size-base: 1.5rem; --font-size-sm: 1.3rem; --font-size-xs: 1.2rem; } /* Load fonts — paste this in your theme.liquid instead if preferred */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=EB+Garamond:wght@400;500&display=swap'); /* ============================================= PAGE BACKGROUND ============================================= */ body, .collection, .collection-wrapper, .grid-container, .products-grid { background-color: var(--brand-white) !important; } /* ============================================= COLLECTION TOP BAR ============================================= */ .collection-top { padding-block: 2rem; border-bottom: none; background-color: var(--brand-white); } .collection-top__container { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; } @media (min-width: 576px) { .collection-top__container { gap: 3.2rem; } } .collection-top__container-left, .collection-top__container-right { display: flex; align-items: center; gap: 1.2rem; } @media (min-width: 1200px) { .collection-top__container-left, .collection-top__container-right { gap: 1.6rem; } } /* Collection title / subtitle */ .collection-top .subtitle, .collection__title { font-family: var(--font-serif); font-weight: 500; font-size: var(--font-size-base); color: var(--brand-text); letter-spacing: 0.02em; } /* ============================================= LAYOUT TOGGLER ============================================= */ .collection-top__layout-toggler { display: none; align-items: center; gap: 0.8rem; } @media screen and (min-width: 750px) { .collection-top__layout-toggler { display: flex; } } .collection-top__layout-toggler-buttons { display: flex; align-items: center; gap: 0.6rem; } .collection-top__layout-toggler-button { color: var(--brand-text-muted); transition: opacity 0.2s ease, transform 0.2s ease; } .collection-top__layout-toggler-button:not(.active-layout):hover { opacity: 0.5; transform: scale(0.9); } .collection-top__layout-toggler-button.active-layout { color: var(--brand-navy); pointer-events: none; } .collection-top__layout-toggler-button svg { width: 20px; height: 20px; } /* ============================================= FILTER / FACET BUTTON ============================================= */ .collection-top .facets-button-show { display: flex; align-items: center; gap: 0.5rem; color: var(--brand-text); font-family: var(--font-body); font-size: var(--font-size-sm); letter-spacing: 0.04em; text-transform: uppercase; background: none; border: 0.1rem solid var(--brand-navy); padding: 0.6rem 1.2rem; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .collection-top .facets-button-show:hover { background-color: var(--brand-navy); color: var(--brand-white); } .collection-top .facets-button-show .show-label, .collection-top .facets-button-show .hide-label { display: block; } .collection-top .facets-button-show .show-label.hidden, .collection-top .facets-button-show .hide-label.hidden { display: none; } @media (max-width: 414px) { .collection-top .facets-button-show .button__label { display: none; } } .collection-top .facets-button-show__counter { display: flex; align-items: center; justify-content: center; min-width: 1.8rem; height: 1.8rem; color: var(--brand-white); background-color: var(--brand-gold); border-radius: 2px; padding: 0.3rem; font-size: var(--font-size-xs); line-height: 1; font-variant-numeric: slashed-zero; font-family: var(--font-body); } /* ============================================= GRID CONTAINER — NO BORDERS ============================================= */ .grid-container { border-bottom: none; overflow: hidden; background-color: var(--brand-white); } /* ============================================= PRODUCT LIST — GAP LAYOUT, NO BORDERS ============================================= */ .collection-product-list { display: grid; list-style: none; padding: 2.4rem 0; margin: 0; gap: 3.2rem 2.4rem; background-color: var(--brand-white); } /* Blanket border removal */ .collection-product-list .collection-product-card { height: 100%; width: 100%; border: none !important; background-color: var(--brand-white); } .collection-product-list .collection-product-card .product-card { min-height: 100%; } /* ============================================= PRODUCT CARD TYPOGRAPHY & BUTTONS ============================================= */ /* Product title */ .product-card__title, .card__heading, .full-unstyled-link { font-family: var(--font-serif); font-weight: 400; font-size: var(--font-size-base); color: var(--brand-text); letter-spacing: 0.01em; line-height: 1.4; } /* Price */ .price, .price__regular, .price-item, .product-card__price { font-family: var(--font-body); font-size: var(--font-size-sm); color: var(--brand-text-muted); letter-spacing: 0.02em; } /* Add to cart / primary buttons */ .btn, .button, [type="button"], [type="submit"], .product-form__submit, .card__footer .button { font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; background-color: var(--brand-navy); color: var(--brand-white); border: none; padding: 0.9rem 2rem; cursor: pointer; transition: background-color 0.2s ease; border-radius: 0; /* sharp corners — more tailored/equestrian */ } .btn:hover, .button:hover, .product-form__submit:hover, .card__footer .button:hover { background-color: var(--brand-gold); color: var(--brand-white); } /* Secondary / outline buttons */ .button--secondary, .btn--secondary { background-color: transparent; color: var(--brand-navy); border: 0.1rem solid var(--brand-navy); } .button--secondary:hover, .btn--secondary:hover { background-color: var(--brand-navy); color: var(--brand-white); } /* Sort dropdown */ .collection-top select, .facets__sort select { font-family: var(--font-body); font-size: var(--font-size-sm); color: var(--brand-text); border: 0.1rem solid var(--brand-border-light); background-color: var(--brand-white); padding: 0.6rem 1.2rem; letter-spacing: 0.02em; appearance: auto; } /* ============================================= GRID BREAKPOINTS — LARGE CARDS ============================================= */ .products-grid[data-catalog-card-size=large] .collection-product-list { grid-template-columns: 1fr; } @media screen and (min-width: 576px) { .products-grid[data-catalog-card-size=large] .collection-product-list { grid-template-columns: repeat(2, 1fr); } .products-grid[data-catalog-card-size=large] .collection-product-list .collection-product-promo-img-promo { grid-column: 1 / span 2; } } @media screen and (min-width: 990px) { .products-grid[data-catalog-card-size=large] .collection-product-list { grid-template-columns: repeat(3, 1fr); } .products-grid[data-catalog-card-size=large] .collection-product-list .collection-product-promo-img-promo { grid-column: 1 / span 3; } } @media screen and (min-width: 1200px) { .products-grid[data-catalog-card-size=large] .collection-product-list { grid-template-columns: repeat(4, 1fr); } .products-grid[data-catalog-card-size=large] .collection-product-list .collection-product-promo-img-promo { grid-column: 1 / span 4; } } /* ============================================= GRID BREAKPOINTS — SMALL CARDS ============================================= */ .products-grid[data-catalog-card-size=small] .collection-product-list { grid-template-columns: repeat(1, 1fr); } @media screen and (min-width: 576px) { .products-grid[data-catalog-card-size=small] .collection-product-list { grid-template-columns: repeat(2, 1fr); } } @media screen and (min-width: 750px) { .products-grid[data-catalog-card-size=small] .collection-product-list { grid-template-columns: repeat(3, 1fr); } } @media screen and (min-width: 990px) { .products-grid[data-catalog-card-size=small] .collection-product-list { grid-template-columns: repeat(4, 1fr); } } @media screen and (min-width: 1200px) { .products-grid[data-catalog-card-size=small] .collection-product-list { grid-template-columns: repeat(5, 1fr); } } @media screen and (min-width: 1536px) { .products-grid[data-catalog-card-size=small] .collection-product-list { grid-template-columns: repeat(6, 1fr); } } /* ============================================= FIXED COLUMN COUNTS ============================================= */ @media screen and (min-width: 576px) { .collection-product-list--2, .collection-product-list--3, .collection-product-list--4, .collection-product-list--5, .collection-product-list--6 { grid-template-columns: repeat(2, 1fr); } } @media screen and (min-width: 990px) { .collection-product-list--3, .collection-product-list--4, .collection-product-list--5, .collection-product-list--6 { grid-template-columns: repeat(3, 1fr); } } @media screen and (min-width: 1200px) { .collection-product-list--4, .collection-product-list--5, .collection-product-list--6 { grid-template-columns: repeat(4, 1fr); } } @media screen and (min-width: 1360px) { .collection-product-list--5, .collection-product-list--6 { grid-template-columns: repeat(5, 1fr); } } @media screen and (min-width: 1536px) { .collection-product-list--6 { grid-template-columns: repeat(6, 1fr); } } /* ============================================= COLLECTION WRAPPER ============================================= */ .collection-wrapper { position: relative; display: flex; flex-direction: column; padding-block: 3.2rem; background-color: var(--brand-white); } .collection { position: relative; background-color: var(--brand-white); } .collection:not(:has(.pagination-block)) .grid-container { border-bottom: none; } .collection--empty .title-wrapper { padding-top: 10rem; padding-bottom: 10rem; margin: 0; font-family: var(--font-serif); color: var(--brand-text-muted); } /* ============================================= IMAGE HOVER ============================================= */ .collection-product-list img.img-scale { transition: transform 0.3s ease; } @media screen and (min-width: 750px) { .collection-product-list .collections-grid__card:hover img.img-scale { transform: scale(1.03); } } /* ============================================= PROMO ITEMS ============================================= */ .collection-product-list .collection-product-promo__overlay { width: 100vw; height: 100%; object-fit: cover; top: 0; left: 50%; transform: translate(-50%); position: absolute; background: rgb(var(--color-overlay)); z-index: 1; } .collection-product-list .collection-product-promo-text { position: relative; z-index: 2; padding: 3.2rem 0; background-color: transparent; font-family: var(--font-serif); } /* ============================================= LOADING STATE ============================================= */ .collection-product { position: relative; } .collection-product .loading-overlay { inset: 0; z-index: 6; display: none; width: 100%; padding: 0 5rem; background-color: rgba(255, 255, 255, 0.75); } .collection-product.loading > .loading-overlay { display: block; } .collection-product.loading > .loading-overlay .loading-overlay__spinner { top: 12rem; } /* ============================================= DARK MODE (minimal — keeps white in light mode) ============================================= */ @media (prefers-color-scheme: dark) { [data-scheme=auto] .collection-top__layout-toggler-button { color: rgba(var(--color-foreground), 0.4); } [data-scheme=auto] .collection-top__layout-toggler-button.active-layout { color: rgba(var(--color-foreground), 1); } } [data-scheme=dark] .collection-top__layout-toggler-button { color: rgba(var(--color-foreground), 0.4); } [data-scheme=dark] .collection-top__layout-toggler-button.active-layout { color: rgba(var(--color-foreground), 1); } /* ============================================= PAGE-WIDE SIDE PADDING — FIXED Only applied to outer containers, not the grid itself ============================================= */ .collection-top, .collection-top__container, .page-width, .container { padding-inline: 2rem; box-sizing: border-box; } /* Grid and its container get NO side padding — they inherit from parent */ .grid-container, .collection-product-list { padding-inline: 0; box-sizing: border-box; } .grid-container { padding-inline: 24px; } @media screen and (min-width: 576px) { .collection-top, .collection-top__container, .page-width, .container { padding-inline: 3.2rem; } .grid-container { padding-inline: 4px; } } @media screen and (min-width: 990px) { .collection-top, .collection-top__container, .page-width, .container { padding-inline: 5.6rem; } .grid-container { padding-inline: 12px; } } @media screen and (min-width: 1200px) { .collection-top, .collection-top__container, .page-width, .container { padding-inline: 8rem; } } @media screen and (min-width: 1536px) { .collection-top, .collection-top__container, .page-width, .container { padding-inline: 10rem; } } .grid-container { padding-inline: 24px; }