/* ========================================================= THINK ABOUT BOOKS PRODUCT CATEGORY HERO - BUILD 1 ========================================================= */ /* * Main hero */ body.tax-product_cat .tab-category-hero { --tab-category-hero-image: none; position: relative; width: 100%; min-height: 430px; margin: 0 0 42px; overflow: hidden; background: #edf7fa; isolation: isolate; } /* * Photograph */ body.tax-product_cat .tab-category-hero__image { position: absolute; inset: 0; z-index: 0; background-image: var(--tab-category-hero-image); background-repeat: no-repeat; background-size: cover; background-position: center center; } body.tax-product_cat .tab-category-hero--left .tab-category-hero__image { background-position: left center; } body.tax-product_cat .tab-category-hero--center .tab-category-hero__image { background-position: center center; } body.tax-product_cat .tab-category-hero--right .tab-category-hero__image { background-position: right center; } /* * Critical readability wash. * * Strong light area on left. * Smoothly disappears into photograph. * Photograph remains clearly visible on right. */ body.tax-product_cat .tab-category-hero__wash { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 90deg, rgba(247,252,253,0.99) 0%, rgba(247,252,253,0.98) 24%, rgba(241,249,251,0.94) 36%, rgba(235,246,249,0.78) 48%, rgba(226,241,246,0.46) 59%, rgba(215,235,241,0.16) 70%, rgba(215,235,241,0.00) 79% ); } /* * Same horizontal rail used throughout TAB. */ body.tax-product_cat .tab-category-hero__rail { position: relative; z-index: 2; width: 88%; max-width: 1600px; min-height: 430px; margin: 0 auto; display: flex; align-items: center; box-sizing: border-box; } /* * Text area */ body.tax-product_cat .tab-category-hero__content { width: min(650px, 48%); padding: 56px 0 58px; box-sizing: border-box; } body.tax-product_cat .tab-category-hero__eyebrow { margin: 0 0 18px; color: #168eaa; font-size: 17px; line-height: 1.2; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } body.tax-product_cat .tab-category-hero__title { max-width: 620px; margin: 0 0 22px !important; padding: 0 !important; color: #08254c !important; font-family: Georgia, "Times New Roman", serif; font-size: clamp( 44px, 4.2vw, 68px ) !important; line-height: .98 !important; font-weight: 700 !important; letter-spacing: -.035em; } body.tax-product_cat .tab-category-hero__description { max-width: 610px; color: #203c58; font-size: 19px; line-height: 1.65; font-weight: 500; } body.tax-product_cat .tab-category-hero__description p { margin: 0; } /* * Prevent normal WooCommerce category description from * creating a duplicate text block when TAB hero is active. * * Only hide the standard description when our hero exists. */ body.tax-product_cat .term-description:has( ~ .tab-category-hero ) { display: none; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1199px) { body.tax-product_cat .tab-category-hero__rail { width: calc( 100% - 40px ); } body.tax-product_cat .tab-category-hero__content { width: 55%; } body.tax-product_cat .tab-category-hero__wash { background: linear-gradient( 90deg, rgba(247,252,253,.99) 0%, rgba(247,252,253,.97) 32%, rgba(238,248,250,.86) 48%, rgba(226,241,246,.48) 65%, rgba(215,235,241,0) 84% ); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { body.tax-product_cat .tab-category-hero { min-height: 520px; margin-bottom: 28px; } body.tax-product_cat .tab-category-hero__image { background-position: center center !important; } body.tax-product_cat .tab-category-hero__wash { background: linear-gradient( 180deg, rgba(247,252,253,.99) 0%, rgba(247,252,253,.97) 44%, rgba(239,248,250,.82) 63%, rgba(225,240,245,.35) 78%, rgba(215,235,241,0) 100% ); } body.tax-product_cat .tab-category-hero__rail { width: calc( 100% - 28px ); min-height: 520px; align-items: flex-start; } body.tax-product_cat .tab-category-hero__content { width: 100%; padding: 42px 0 220px; } body.tax-product_cat .tab-category-hero__eyebrow { font-size: 14px; margin-bottom: 14px; } body.tax-product_cat .tab-category-hero__title { max-width: 100%; font-size: 42px !important; line-height: 1.02 !important; } body.tax-product_cat .tab-category-hero__description { max-width: 100%; font-size: 16px; line-height: 1.55; } } /* ========================================================= CATEGORY HERO BUILD 1.1 CLEAN TAB category structure: HEADER TAB HERO CATEGORY CONTENT Remove XStore page heading + breadcrumb when TAB hero exists. ========================================================= */ /* * XStore normally outputs its category title and breadcrumb * inside the page-heading region. * * A TAB-enabled category already has its title inside the * custom hero, so the entire legacy heading is redundant. */ body.tax-product_cat:has(.tab-category-hero) .page-heading { display: none !important; } /* * Defensive selectors for XStore variations. */ body.tax-product_cat:has(.tab-category-hero) .page-heading.bc-type-default, body.tax-product_cat:has(.tab-category-hero) .page-heading.bc-type-left, body.tax-product_cat:has(.tab-category-hero) .page-heading.bc-type-left2, body.tax-product_cat:has(.tab-category-hero) .page-heading.bc-type-center { display: none !important; } /* * Remove any standalone XStore/WooCommerce breadcrumb that * may exist outside the page-heading container. */ body.tax-product_cat:has(.tab-category-hero) .woocommerce-breadcrumb { display: none !important; } /* * Hero now flows directly into category content. */ body.tax-product_cat .tab-category-hero { margin-bottom: 0 !important; }