/** * Yodha Fuel — Shop page styles. * * Loaded only on WooCommerce's Shop page and product category/tag * archives (see inc/enqueue.php) — the classes here (.yf-shop*) exist * nowhere else in the theme, so this file has no reason to load * anywhere else. Every selector is namespaced (.yf-shop-…) specifically * so nothing here can collide with a Storefront class name, per the * lesson learned from the earlier .content-area incident on the * homepage (see the note on .yf-container in layout.css) — this file * never introduces a bare, generic class name. * * .yf-container (already Storefront-collision-safe — see layout.css) is * reused here for max-width centering on every block, exactly the same * way it's already used for the header, hero and every homepage section, * rather than duplicating an identical rule under a new name. * * A few selectors below intentionally target WooCommerce's OWN * generated classes (.woocommerce-result-count, .woocommerce-ordering, * .woocommerce-pagination, .page-numbers) — always scoped inside a * .yf-shop-… parent, never bare. That's correct, standard WooCommerce * theming practice: those elements are rendered by native WooCommerce * hooks (woocommerce_before_shop_loop / woocommerce_after_shop_loop) in * woocommerce/archive-product.php, completely unmodified — this file * only styles their appearance, it never touches their markup or logic. * * Mobile-first: base rules are the 375px default, breakpoints layer up * at 768 / 1024px, matching every other stylesheet in this theme. * * Shop Hero photo: assets/images/shop-hero.jpg. A static background * image (no slider JS — see the doc comment on .yf-shop-hero__media * below for why), referenced via a plain relative url() from this file, * not a PHP-templated path — swapping in a higher-resolution photo later * is a one-file replace, nothing here needs to change. */ /* ============================================================ SHOP HERO Full-bleed photo background (no .yf-container on the outer element — same full-width pattern already used by the homepage hero slider and Brand Banner) with a dark gradient overlay for text legibility. A fixed min-height per breakpoint (below) keeps the layout stable while the background image loads, exactly like the homepage hero slider. ============================================================ */ .yf-shop-hero { position: relative; overflow: hidden; min-height: 260px; display: flex; align-items: center; background-color: var(--color-bg-dark); color: var(--color-text-inverse); } /* The actual photo. A plain absolutely-positioned, cover-sized layer (not a CSS custom property/PHP-templated URL) since this is a single static image, not an admin-managed slide set — see the doc comment at the top of this file for how to swap in higher-resolution photography later: replace assets/images/shop-hero.jpg and nothing else changes. */ .yf-shop-hero__media { position: absolute; inset: 0; background-image: url('../images/shop-hero.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; } /* Dark gradient + subtle brand-orange accent — the same overlay formula already used on the homepage hero slider (.yf-hero-slide__overlay in home.css), reused here so both hero treatments feel like one system. */ .yf-shop-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(39, 47, 50, 0.8) 0%, rgba(39, 47, 50, 0.45) 45%, rgba(39, 47, 50, 0.82) 100%), linear-gradient(110deg, rgba(245, 83, 1, 0.2) 0%, rgba(245, 83, 1, 0) 42%); z-index: 1; } .yf-shop-hero__inner { position: relative; z-index: 2; width: 100%; padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); text-align: center; } .yf-shop-hero__title { color: var(--color-text-inverse); font-size: var(--fs-h1); text-transform: uppercase; letter-spacing: var(--ls-label); margin: 0 0 var(--space-xs); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); } .yf-shop-hero__subtitle { color: var(--color-text-inverse-muted); font-size: var(--fs-body); max-width: 48ch; margin: 0 auto; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } /* ============================================================ CATEGORY NAVIGATION A horizontally-scrollable row on narrow viewports (native CSS scrolling, no JS) that becomes a normal wrapping/centered row once there's room for it. ============================================================ */ .yf-shop-category-nav { background-color: var(--color-bg); border-bottom: var(--border-width) solid var(--color-border); } .yf-shop-category-nav__inner { padding-top: var(--space-sm); padding-bottom: var(--space-sm); } .yf-shop-category-nav__list { display: flex; align-items: center; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .yf-shop-category-nav__link { display: inline-flex; align-items: center; white-space: nowrap; padding: var(--space-2xs) var(--space-md); border-radius: var(--radius-full); border: var(--border-width) solid var(--color-border); color: var(--color-text); font-size: var(--fs-small); font-weight: var(--fw-semibold); letter-spacing: var(--ls-nav); transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .yf-shop-category-nav__link:hover, .yf-shop-category-nav__link:focus { border-color: var(--yodha-orange); color: var(--yodha-orange); } .yf-shop-category-nav__link.is-active { background-color: var(--yodha-orange); border-color: var(--yodha-orange); color: var(--white); } /* ============================================================ SHOP CONTENT WRAPPER ============================================================ */ .yf-shop { background-color: var(--color-bg); } /* Same fix as .yf-section > .yf-container in home.css: .yf-container's OWN vertical padding (layout.css) would otherwise stack with .yf-shop-toolbar's and .yf-shop-pagination's own top/bottom padding below, doubling the gap above the toolbar and below pagination. This keeps .yf-container's horizontal padding + max-width centering (still wanted) and leaves vertical rhythm entirely to the toolbar/pagination rules, which is more precise than the padding this container was designed to add. */ .yf-shop > .yf-container { padding-top: 0; padding-bottom: 0; } /* ============================================================ TOOLBAR — result count (native woocommerce_result_count) + sorting (native woocommerce_catalog_ordering), both rendered by the single woocommerce_before_shop_loop hook call in archive-product.php. ============================================================ */ .yf-shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-top: var(--space-lg); padding-bottom: var(--space-md); } .yf-shop-toolbar .woocommerce-result-count { margin: 0; color: var(--color-text-muted); font-size: var(--fs-small); order: 1; padding-left: 10px; padding-top: 12px; } .yf-shop-toolbar .woocommerce-ordering { margin: 0; order: 2; } .yf-shop-toolbar .woocommerce-ordering .orderby { height: var(--btn-height-md); padding: 0 var(--space-md); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-sm); background-color: var(--color-bg); color: var(--color-text); font-size: var(--fs-small); font-weight: var(--fw-medium); cursor: pointer; } .yf-shop-toolbar .woocommerce-ordering .orderby:hover, .yf-shop-toolbar .woocommerce-ordering .orderby:focus { border-color: var(--yodha-orange); } /* ============================================================ PAGINATION — native woocommerce_pagination() output (WordPress's own .page-numbers markup, wrapped by WooCommerce in