:root {
  --brand-red: #E5001A;
  --brand-red-dark: #8f0010;
  --brand-black: #0C0C0C;
  /*
     The hero image is 1920x600px (verified actual file dimensions),
     an aspect ratio of 600/1920 = 31.25%. Using this as a percentage
     padding-top keeps the box the same shape as the image at every
     viewport width, so background-size:cover never has to crop the
     sides or top/bottom to fill a mismatched box. Fixed pixel heights
     per breakpoint (the old approach) caused exactly that: at some
     widths the box became too tall relative to its width, forcing
     the image to crop off the left "U" logo.
  */
  --home-hero-height: 31.25%;
}

/* =====================================================
   BUTTONS - SITE-WIDE (pressed effect)
===================================================== */

.button,
a.button,
button.button,
input[type="submit"].button {
  background-color: var(--brand-red) !important;
  color: #ffffff !important;
  border: 1px solid var(--brand-red) !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 0 var(--brand-red-dark) !important;
  transition: all 0.15s ease-in-out !important;
}

.button:hover,
a.button:hover,
button.button:hover,
input[type="submit"].button:hover {
  background-color: var(--brand-red) !important;
  color: #ffffff !important;
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 var(--brand-red-dark) !important;
}

.button *,
.button:hover *,
a.button *,
a.button:hover * {
  color: #ffffff !important;
}

/* =====================================================
   NAV UTILITY BUTTONS (flat, no press effect)
===================================================== */

.navbar-end .button,
.navbar-end a.button,
#main-nav .navbar-end .button,
#main-nav .navbar-end a.button,
#miniHeader .navbar-end .button,
#miniHeader .navbar-end a.button,
#navrow .navbar-end .button,
#navrow .navbar-end a.button {
  background-color: var(--brand-red) !important;
  color: #ffffff !important;
  border: 1px solid var(--brand-red) !important;
  box-shadow: none !important;
  transform: none !important;
}

.navbar-end .button:hover,
.navbar-end a.button:hover,
#main-nav .navbar-end .button:hover,
#main-nav .navbar-end a.button:hover,
#miniHeader .navbar-end .button:hover,
#miniHeader .navbar-end a.button:hover,
#navrow .navbar-end .button:hover,
#navrow .navbar-end a.button:hover {
  background-color: #ff102a !important;
  border-color: #ff102a !important;
  color: #ffffff !important;
  transform: none !important;
}

.navbar-end .button:active,
.navbar-end a.button:active,
.navbar-end .button:focus,
.navbar-end a.button:focus,
#main-nav .navbar-end .button:active,
#main-nav .navbar-end a.button:active,
#main-nav .navbar-end .button:focus,
#main-nav .navbar-end a.button:focus,
#miniHeader .navbar-end .button:active,
#miniHeader .navbar-end a.button:active,
#miniHeader .navbar-end .button:focus,
#miniHeader .navbar-end a.button:focus,
#navrow .navbar-end .button:active,
#navrow .navbar-end a.button:active,
#navrow .navbar-end .button:focus,
#navrow .navbar-end a.button:focus {
  background-color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

/* =====================================================
   NAV
===================================================== */

#main-nav {
  background-color: var(--brand-black) !important;
  position: relative !important;
  overflow: visible !important;
}

#main-nav .navbar-item,
#main-nav .navbar-link {
  color: #ffffff !important;
  background-color: transparent !important;
}

/* White text on hover (no longer turns red) */
#main-nav .navbar-item:hover,
#main-nav .navbar-link:hover {
  color: #ffffff !important;
  background-color: transparent !important;
}

/* Active/current nav item stays white */
#main-nav .navbar-item.is-active,
#main-nav a.navbar-item.is-active {
  color: #ffffff !important;
  background-color: transparent !important;
}

/* White underline on hover/active - ONLY Home/Products (navbar-start), not the logo, not My Account/Cart/basket */
/* Uses ::before (not ::after) so it doesn't collide with Bulma's own ::after dropdown arrow */
#main-nav .navbar-start .navbar-item,
#main-nav .navbar-start .navbar-link {
  position: relative !important;
}

#main-nav .navbar-start .navbar-item::before,
#main-nav .navbar-start .navbar-link::before {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0;
  height: 2px;
  background-color: #ffffff;
  transform: scaleX(0);
  transition: transform 0.15s ease-in-out;
}

#main-nav .navbar-start .navbar-item:hover::before,
#main-nav .navbar-start .navbar-link:hover::before,
#main-nav .navbar-start .navbar-item.is-active::before,
#main-nav .navbar-start a.navbar-item.is-active::before {
  transform: scaleX(1);
}

/* Hide the native Bulma dropdown-arrow chevron so it doesn't clash with the underline */
#main-nav .navbar-link::after {
  display: none !important;
  content: none !important;
  border: none !important;
}

/* =====================================================
   DROPDOWN MENUS
===================================================== */

#main-nav .navbar-dropdown {
  background-color: #ffffff !important;
  border-top: 2px solid var(--brand-red) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  padding: 0.5rem 0 !important;
  margin-top: 0 !important;
  min-width: 220px !important;
  pointer-events: all !important;
}

/* Invisible bridge on the nav item to fill gap and keep dropdown open */
#main-nav .navbar-item.has-dropdown {
  position: relative !important;
}

#main-nav .navbar-item.has-dropdown::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
}

#main-nav .navbar-dropdown .navbar-item,
#main-nav .navbar-dropdown a.navbar-item {
  display: block !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 0.875rem 1.5rem !important;
  line-height: 1.4 !important;
  color: var(--brand-black) !important;
  background-color: transparent !important;
  pointer-events: all !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

#main-nav .navbar-dropdown .navbar-item:hover,
#main-nav .navbar-dropdown a.navbar-item:hover {
  color: var(--brand-black) !important;
  background-color: transparent !important;
  text-decoration: underline !important;
}

/* =====================================================
   MOBILE BURGER
===================================================== */

@media (max-width: 1023px) {
  #main-nav .navbar-burger {
    display: flex !important;
    color: #ffffff !important;
  }

  #main-nav .navbar-menu {
    background-color: var(--brand-black) !important;
  }

  #main-nav .navbar-menu.is-active {
    display: block !important;
  }
}

/* =====================================================
   HEADER / LOGO ROW
===================================================== */

#logorow,
#toprow,
#menurow,
.navbar,
.navbar-brand {
  background-color: var(--brand-black) !important;
}

/* HEADER SPACER (product pages) */
.header-spacer,
.ict-header-spacer {
  background-color: var(--brand-black) !important;
}

/* TOP PAGE GAP FIX */
body > .container:first-child,
#contentrow,
.header-wrapper,
#header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =====================================================
   HOMEPAGE BANNERS
===================================================== */

/* Collapse empty slots */
.banner.banners2,
.banner.banners3 {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.banner.banners1,
.banner.banners1 .row_container,
.banner.banners1 .flexslider,
.banner.banners1 .flex-viewport,
.banner.banners1 .slides {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.banner.banners1 .slides {
  transform: none !important;
}

.banner.banners1 .slides > li {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: var(--home-hero-height) 0 0 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}

.banner.banners1 .slides > li.clone {
  display: none !important;
}

.banner.banners1 .slides > li.section,
.banner.banners1 .slides > li.is-large,
.banner.banners1 .slides > li.is-medium {
  padding-top: var(--home-hero-height) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}

/* Keep the black welcome banner fully visible */
.banner.banners1 .slides > li > section,
.banner.banners1 section.has-background-primary,
.banner.banners1 section.has-background-default,
.banner.banners1 section.has-text-white {
  display: block !important;
  position: relative !important;
  clear: both !important;
  width: 100% !important;
  min-height: 230px !important;
  padding-top: 60px !important;
  padding-bottom: 60px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  z-index: 2 !important;
}

/* Remove old bottom red-line positioning from the full banner */
.banner.banners1::after {
  content: none !important;
  display: none !important;
}

/*
   Responsive black welcome banner (text section) sizing.

   The hero IMAGE itself no longer needs breakpoint overrides -
   --home-hero-height is now a percentage (31.25%, matching the
   image's real 1920x600 aspect ratio) so it scales correctly on
   its own at every width without cropping the logo. These media
   queries now only adjust the black text section below the image
   on small screens, where 60px of top/bottom padding is too much.
*/
@media (max-width: 480px) {
  .banner.banners1 .slides > li > section,
  .banner.banners1 section.has-background-primary,
  .banner.banners1 section.has-background-default,
  .banner.banners1 section.has-text-white {
    min-height: 210px !important;
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .banner.banners1 .slides > li > section,
  .banner.banners1 section.has-background-primary,
  .banner.banners1 section.has-background-default,
  .banner.banners1 section.has-text-white {
    min-height: 220px !important;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}

/* =====================================================
   HOMEPAGE FEATURED CATEGORIES
===================================================== */

#contentInner,
#contentInnerRow {
  display: block !important;
}

.homeFeaturedCategoriesWrapper {
  display: block !important;
  position: relative !important;
  clear: both !important;
  z-index: 1 !important;
  background: #ffffff !important;
  margin: 0 !important;
  padding: 45px 0 10px 0 !important;
  overflow: visible !important;
}

/*
   FIX: FEATURED CATEGORIES ENCROACHING ON WELCOME BANNER

   .homeFeaturedCategoriesWrapper > .row__container is a real wrapper
   in the live DOM (confirmed via DevTools) that this rewrite never
   addressed. It previously measured only ~450px tall (banner height)
   even though it has to fit the title row AND the full tile grid,
   which pushed the tiles up into the black welcome banner above.
   Forcing it to size to its actual content stops the overlap.
*/
.homeFeaturedCategoriesWrapper .row__container {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Featured Categories heading */
.homeFeaturedCategoriesWrapper .homeFeaturedCategoriesTitleRow_title,
#homeFeaturedCategoriesTitleRow,
.homeFeaturedCategoriesWrapper .bestsellers {
  display: block !important;
  position: relative !important;
  clear: both !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 0 35px 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.homeFeaturedCategoriesWrapper .homeFeaturedCategoriesTitleRow_title h3,
#homeFeaturedCategoriesTitleRow h3,
.homeFeaturedCategoriesWrapper .bestsellers h3 {
  display: block !important;
  color: var(--brand-black) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Keep category grid visible */
.homeFeaturedCategoriesWrapper .homePageCategories,
.homeFeaturedCategoriesWrapper .catfish-container,
.homeFeaturedCategoriesWrapper .listWrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  position: relative !important;
  clear: both !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Keep all category columns visible */
.homeFeaturedCategoriesWrapper .listItem {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  overflow: visible !important;
  text-align: center !important;
  margin-top: 0 !important;
  margin-bottom: 35px !important;
  transform: none !important;
}

/* Desktop: show categories at equal share */
@media (min-width: 1024px) {
  .homeFeaturedCategoriesWrapper .listWrapper > .listItem {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
    width: 33.333333% !important;
  }
}

/* Tablet: 2 per row */
@media (min-width: 769px) and (max-width: 1023px) {
  .homeFeaturedCategoriesWrapper .listWrapper > .listItem {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
}

/* Mobile: 1 per row */
@media (max-width: 768px) {
  .homeFeaturedCategoriesWrapper .listWrapper > .listItem {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Keep each category tile normal */
.homeFeaturedCategoriesWrapper .small-product-item,
.homeFeaturedCategoriesWrapper .category-item {
  display: block !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  text-align: center !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  transform: none !important;
}

/* Product title visible all the time */
.homeFeaturedCategoriesWrapper .product-title,
.homeFeaturedCategoriesWrapper .category-item .product-title,
.homeFeaturedCategoriesWrapper .small-product-item .product-title {
  display: block !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow: visible !important;
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
  text-align: center !important;
  transform: none !important;
  z-index: 2 !important;
}

/* Product title link styling */
.homeFeaturedCategoriesWrapper .product-title a,
.homeFeaturedCategoriesWrapper .category-item .product-title a,
.homeFeaturedCategoriesWrapper .small-product-item .product-title a {
  display: inline-block !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--brand-black) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  text-decoration: none !important;
  transform: none !important;
}

/* Keep picture area normal */
.homeFeaturedCategoriesWrapper .picture,
.homeFeaturedCategoriesWrapper .category-item .picture,
.homeFeaturedCategoriesWrapper .small-product-item .picture {
  display: block !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  transform: none !important;
  z-index: 1 !important;
}

/* Keep image link normal */
.homeFeaturedCategoriesWrapper .picture a,
.homeFeaturedCategoriesWrapper .picture a.image,
.homeFeaturedCategoriesWrapper .category-item .picture a,
.homeFeaturedCategoriesWrapper .small-product-item .picture a {
  display: block !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  transform: none !important;
}

/* Do not create fake pseudo titles */
.homeFeaturedCategoriesWrapper .picture a::before,
.homeFeaturedCategoriesWrapper .picture a.image::before {
  content: none !important;
  display: none !important;
}

/* Keep actual category images visible and normal size */
.homeFeaturedCategoriesWrapper .picture img,
.homeFeaturedCategoriesWrapper .category-item .picture img,
.homeFeaturedCategoriesWrapper .small-product-item .picture img {
  display: block !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  transform: none !important;
}

/* Hide hover-only detail bits */
.homeFeaturedCategoriesWrapper .category-price-from-description,
.homeFeaturedCategoriesWrapper .homepage-category-details-button {
  display: none !important;
}

/* =====================================================
   MISC
===================================================== */

/* RADIO BUTTON SELECTED STATE */
input[type="radio"]:checked + label.button {
  background-color: #ff3347 !important;
  border: 2px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 0 0 2px var(--brand-red) !important;
  transform: translateY(1px) !important;
}

/* CATEGORY PAGE HEADER BORDER */
.category-intro-wrapper {
  padding-bottom: 1.5rem !important;
}

.category-intro-wrapper {
  border-bottom: 3px solid var(--brand-red) !important;
  padding-bottom: 1.5rem !important;
} 

/* =====================================================
   PRODUCT LANDING PAGE - SECTION HEADERS + LAYOUT
===================================================== */

/* Red section headers (Covers, Inside Pages, Print Options) */
.arone-product-landing-page .name_Header .attributeHeader {
  margin-bottom: -0.75rem !important;
  color: var(--brand-red) !important;
  font-weight: 700 !important;
}

.arone-product-landing-page .name_Header .attribute-item {
  display: none !important;
}

/* Side-by-side Paper Weight + Paper Color for covers */
.arone-product-landing-page .name_Front_Cover_Weight,
.arone-product-landing-page .name_Front_Cover_Color,
.arone-product-landing-page .name_Back_Cover_Weight,
.arone-product-landing-page .name_Back_Cover_Color {
  display: inline-block !important;
  width: 48% !important;
  vertical-align: top !important;
  margin-right: 2% !important;
}

.arone-product-landing-page .name_Front_Cover_Color,
.arone-product-landing-page .name_Back_Cover_Color {
  margin-right: 0 !important;
}

/* =====================================================
   FEATURED CATEGORY HOVER EFFECTS
===================================================== */

/* Smooth transition for category title colour */
.homeFeaturedCategoriesWrapper .product-title a,
.homeFeaturedCategoriesWrapper .category-item .product-title a,
.homeFeaturedCategoriesWrapper .small-product-item .product-title a {
  transition: color 0.2s ease-in-out !important;
}

/* Title turns red when hovering the title itself */
.homeFeaturedCategoriesWrapper .product-title a:hover,
.homeFeaturedCategoriesWrapper .category-item .product-title a:hover,
.homeFeaturedCategoriesWrapper .small-product-item .product-title a:hover {
  color: var(--brand-red) !important;
}

/* Title also turns red when hovering anywhere on the category tile */
.homeFeaturedCategoriesWrapper .small-product-item:hover .product-title a,
.homeFeaturedCategoriesWrapper .category-item:hover .product-title a,
.homeFeaturedCategoriesWrapper .listItem:hover .product-title a {
  color: var(--brand-red) !important;
}

/* Keep image zoom tidy inside the image area */
.homeFeaturedCategoriesWrapper .picture,
.homeFeaturedCategoriesWrapper .category-item .picture,
.homeFeaturedCategoriesWrapper .small-product-item .picture {
  overflow: hidden !important;
}

/* Smooth zoom animation */
.homeFeaturedCategoriesWrapper .picture img,
.homeFeaturedCategoriesWrapper .category-item .picture img,
.homeFeaturedCategoriesWrapper .small-product-item .picture img {
  transition: transform 0.25s ease-in-out !important;
  transform-origin: center center !important;
}

/* Slight image zoom when hovering the image */
.homeFeaturedCategoriesWrapper .picture:hover img,
.homeFeaturedCategoriesWrapper .category-item .picture:hover img,
.homeFeaturedCategoriesWrapper .small-product-item .picture:hover img {
  transform: scale(1.06) !important;
}

/* Image also zooms when hovering anywhere on the category tile */
.homeFeaturedCategoriesWrapper .small-product-item:hover .picture img,
.homeFeaturedCategoriesWrapper .category-item:hover .picture img,
.homeFeaturedCategoriesWrapper .listItem:hover .picture img {
  transform: scale(1.06) !important;
}

/* =====================================================
   REDUCE EMPTY SPACE ABOVE FOOTER
===================================================== */

/* Reduce space after Featured Categories */
.homeFeaturedCategoriesWrapper {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Reduce bottom spacing on category tiles */
.homeFeaturedCategoriesWrapper .listItem {
  margin-bottom: 10px !important;
}

/* Remove the large empty section after Featured Categories */
.homeFeaturedCategoriesWrapper + section.section,
.homeFeaturedCategoriesWrapper + section.is-large,
.homeFeaturedCategoriesWrapper + section.has-vertical-padding {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Remove empty spacing from the after-main container area */
#AfterMainContainer,
.afterMainContainer-inner {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Pull footer up cleanly */
footer,
.catfish-footer {
  margin-top: 0 !important;
}

/* =====================================================
   FEATURED CATEGORIES - LARGER / BETTER SPACING
===================================================== */

/* Give the featured categories area more breathing room */
.homeFeaturedCategoriesWrapper .homePageCategories,
.homeFeaturedCategoriesWrapper .catfish-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* Centre the category row and spread the items out */
.homeFeaturedCategoriesWrapper .listWrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 60px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* Make each category tile wider so the title and image align properly */
.homeFeaturedCategoriesWrapper .listWrapper > .listItem {
  flex: 0 1 420px !important;
  max-width: 420px !important;
  width: 420px !important;
  text-align: center !important;
  margin: 0 0 10px 0 !important;
}

/* Make the inner category content fill the tile */
.homeFeaturedCategoriesWrapper .small-product-item,
.homeFeaturedCategoriesWrapper .category-item {
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  text-align: center !important;
  padding: 0 !important;
}

/* Keep titles centred above their matching image */
.homeFeaturedCategoriesWrapper .product-title {
  width: 100% !important;
  text-align: center !important;
  margin: 0 0 28px 0 !important;
  padding: 0 !important;
}

.homeFeaturedCategoriesWrapper .product-title a {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* Increase the image display size */
.homeFeaturedCategoriesWrapper .picture {
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.homeFeaturedCategoriesWrapper .picture a,
.homeFeaturedCategoriesWrapper .picture a.image {
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.homeFeaturedCategoriesWrapper .picture img {
  width: 100% !important;
  max-width: 420px !important;
  height: auto !important;
  margin: 0 auto !important;
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1023px) {
  .homeFeaturedCategoriesWrapper .listWrapper {
    gap: 40px !important;
  }

  .homeFeaturedCategoriesWrapper .listWrapper > .listItem {
    flex: 0 1 360px !important;
    max-width: 360px !important;
    width: 360px !important;
    margin: 0 0 10px 0 !important;
  }

  .homeFeaturedCategoriesWrapper .small-product-item,
  .homeFeaturedCategoriesWrapper .category-item,
  .homeFeaturedCategoriesWrapper .picture,
  .homeFeaturedCategoriesWrapper .picture a,
  .homeFeaturedCategoriesWrapper .picture a.image,
  .homeFeaturedCategoriesWrapper .picture img {
    max-width: 360px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .homeFeaturedCategoriesWrapper .listWrapper {
    gap: 35px !important;
  }

  .homeFeaturedCategoriesWrapper .listWrapper > .listItem {
    flex: 0 1 90% !important;
    max-width: 90% !important;
    width: 90% !important;
    margin: 0 0 10px 0 !important;
  }

  .homeFeaturedCategoriesWrapper .small-product-item,
  .homeFeaturedCategoriesWrapper .category-item,
  .homeFeaturedCategoriesWrapper .picture,
  .homeFeaturedCategoriesWrapper .picture a,
  .homeFeaturedCategoriesWrapper .picture a.image,
  .homeFeaturedCategoriesWrapper .picture img {
    max-width: 100% !important;
  }
}

.homeFeaturedCategoriesWrapper .picture::after {
  display: block !important;
  margin: 16px auto 0 auto !important;
  max-width: 380px !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #444444 !important;
  text-align: left !important;
  white-space: pre-line !important;
  transition: color 0.2s ease-in-out !important;
}

.homeFeaturedCategoriesWrapper .category-item::after {
  display: block !important;
  margin: 10px auto 0 auto !important;
  max-width: 380px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  color: #444444 !important;
  text-align: left !important;
  white-space: pre-line !important;
  transition: color 0.2s ease-in-out !important;
}

/* Tile 1: Black & White Print Products */
.homeFeaturedCategoriesWrapper .listWrapper > .listItem:nth-child(1) .picture::after {
  content: "Black and white is appropriate for most classroom materials, including:";
}

.homeFeaturedCategoriesWrapper .listWrapper > .listItem:nth-child(1) .category-item::after {
  content: "\2022  Worksheets\A\2022  Handouts\A\2022  Assessments and quizzes\A\2022  Reading materials\A\2022  Classroom activities\A\2022  Teacher reference documents";
}

/* Tile 2: Color Print Products */
.homeFeaturedCategoriesWrapper .listWrapper > .listItem:nth-child(2) .picture::after {
  content: "Because color printing carries a significantly higher cost than black-and-white printing, we ask staff to use professional judgment and select color when it meaningfully improves student learning, understanding, accuracy, accessibility, or the overall effectiveness of the material. Examples include:";
}

.homeFeaturedCategoriesWrapper .listWrapper > .listItem:nth-child(2) .category-item::after {
  content: "\2022  Maps and geography materials\A\2022  Charts, graphs, and data visualizations\A\2022  Scientific diagrams and illustrations\A\2022  Color-coded instructional resources\A\2022  Visual support for younger learners or students with specialized learning needs\A\2022  Art, photography, and design materials\A\2022  Reusable classroom reference materials where color is essential to the content\A\A We trust teachers to choose the option that best supports the instructional needs of their students while making thoughtful use of district resources.";
}

/* Hover - both blocks turn red, matching the rest of the tile */
.homeFeaturedCategoriesWrapper .small-product-item:hover .picture::after,
.homeFeaturedCategoriesWrapper .category-item:hover .picture::after,
.homeFeaturedCategoriesWrapper .listItem:hover .picture::after,
.homeFeaturedCategoriesWrapper .small-product-item:hover .category-item::after,
.homeFeaturedCategoriesWrapper .category-item:hover::after,
.homeFeaturedCategoriesWrapper .listItem:hover .category-item::after {
  color: var(--brand-red) !important;
}

/* =====================================================
   CHECKOUT - SHOW FIRST NAME AND LAST NAME ONLY
   Hides Company, address, country, state, ZIP and phone fields.
   Keeps the saved-address selector and Back/Continue buttons visible.
===================================================== */

#shipping-new-address-form .address-table-container tr:has(#ShippingNewAddress_Company),
#shipping-new-address-form .address-table-container tr:has(#ShippingNewAddress_Address1),
#shipping-new-address-form .address-table-container tr:has(#ShippingNewAddress_Address2),
#shipping-new-address-form .address-table-container tr:has(#ShippingNewAddress_City),
#shipping-new-address-form .address-table-container tr:has(#ShippingNewAddress_CountryId),
#shipping-new-address-form .address-table-container tr:has(#ShippingNewAddress_StateProvinceId),
#shipping-new-address-form .address-table-container tr:has(#ShippingNewAddress_ZipPostalCode),
#shipping-new-address-form .address-table-container tr:has(#ShippingNewAddress_PhoneNumber) {
  display: none !important;
}

/* =====================================================
   CHECKOUT - HIDE SHIPPING ADDRESS VALIDATION INFO PANEL
   Removes only the informational panel shown above the name fields.
===================================================== */

#co-shipping-form #validation_address_info {
  display: none !important;
}