/* ============================================================= WBA SHOP — ARCHIVE (shop page + category/tag archives) Hero + anchor nav follow the HEADER/HERO CONSISTENCY RULE verbatim (58vh hero, 105deg overlay, radial glow at 78% 50%, sticky nav w/ 3px accent top border). Accent: red. ============================================================= */ /* ------------------------------------------------------------- BODY PADDING RESET WordPress puts .archive on for any archive page — incl. the Woo product archive. The theme's pages.css .archive rule (written for the blog listing wrapper) therefore pads the shop page's body and creates a white gap above the header. Reset it here; this file only enqueues on shop/product-tax archives, so the news archive keeps its padding. ------------------------------------------------------------- */ body.archive.woocommerce, body.archive.woocommerce-shop, body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag { padding: 0 !important; } /* ------------------------------------------------------------- HERO — 58vh, per consistency rule ------------------------------------------------------------- */ .shop-hero { position: relative; height: 58vh; min-height: 480px; display: flex; align-items: center; background-size: cover; background-position: center; background-color: var(--wba-dark); } .shop-hero__overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at 78% 50%, rgba(193, 39, 45, 0.32), transparent 55%), linear-gradient(105deg, rgba(26, 26, 26, 0.92) 0%, rgba(26, 26, 26, 0.72) 45%, rgba(26, 26, 26, 0.40) 100%); } .shop-hero__inner { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter-d); } .shop-hero__pill { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #fff; padding: 9px 18px; border: 1px solid rgba(193, 39, 45, 0.55); background: rgba(193, 39, 45, 0.18); border-radius: 100px; margin-bottom: 26px; } .shop-hero__title { margin: 0 0 20px; color: #fff; font-size: clamp(2.6rem, 6.5vw, 4.6rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.02; } .shop-hero__title em { font-weight: 300; font-style: italic; } .shop-hero__lede { max-width: 600px; margin: 0 0 36px; color: rgba(255, 255, 255, 0.82); font-size: 1rem; line-height: 1.75; } .shop-hero__ctas { display: flex; gap: 14px; } /* ------------------------------------------------------------- CATEGORY ANCHOR NAV — sticky, 3px red top border, cart pill pushed right with margin-left: auto (per consistency rule) ------------------------------------------------------------- */ .shop-catnav { position: sticky; top: 0; z-index: 40; background: #fff; border-top: 3px solid var(--wba-red); border-bottom: 1px solid var(--wba-border); } .shop-catnav__inner { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter-d); display: flex; align-items: center; gap: 26px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .shop-catnav__inner::-webkit-scrollbar { display: none; } .shop-catnav__link { position: relative; padding: 18px 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: lowercase; color: var(--wba-dark); text-decoration: none; white-space: nowrap; } .shop-catnav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--wba-red); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; } .shop-catnav__link:hover::after, .shop-catnav__link.is-active::after { transform: scaleX(1); } .shop-catnav__link.is-active { color: var(--wba-red); } .shop-catnav__cart { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; background: var(--wba-red); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: lowercase; text-decoration: none; border-radius: 4px; white-space: nowrap; transition: background 0.2s, transform 0.2s; } .shop-catnav__cart:hover { background: var(--wba-dark); transform: translateY(-2px); } .shop-catnav__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: #fff; color: var(--wba-red); border-radius: 100px; font-size: 0.62rem; } /* ------------------------------------------------------------- MAIN GRID SECTION ------------------------------------------------------------- */ .shop-main { background: #fff; padding: 88px 0; } .shop-main__inner { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter-d); } /* Toolbar: result count left, ordering right */ .shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 34px; } .woocommerce-result-count { margin: 0; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: lowercase; color: var(--wba-muted); } .woocommerce-ordering { margin: 0; } .woocommerce-ordering select { padding: 10px 34px 10px 14px; border: 1px solid var(--wba-border); border-radius: 4px; background: #fff; font-family: inherit; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: lowercase; color: var(--wba-dark); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231A1A1A' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; } .woocommerce-ordering select:focus { outline: none; border-color: var(--wba-dark); } /* Empty category state */ .shop-none { text-align: center; max-width: 520px; margin: 0 auto; padding: 40px 0; } .shop-none__title { margin: 14px 0 12px; font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; color: var(--wba-dark); } .shop-none__title em { font-weight: 300; font-style: italic; } .shop-none p { color: var(--wba-muted); line-height: 1.7; margin-bottom: 30px; } /* ------------------------------------------------------------- RESPONSIVE ------------------------------------------------------------- */ @media (max-width: 700px) { .shop-hero { min-height: 440px; } .shop-hero__inner { padding: 0 var(--gutter-m); } .shop-hero__ctas { flex-direction: column; } .shop-hero__ctas .shop-btn { width: 100%; box-sizing: border-box; } .shop-catnav__inner { padding: 0 var(--gutter-m); gap: 18px; } .shop-catnav__cart { margin-left: 0; } .shop-main { padding: 48px 0; } .shop-main__inner { padding: 0 var(--gutter-m); } .shop-toolbar { flex-direction: column; align-items: flex-start; } }