/*
Theme Name: Workparts
Template: blocksy
Version: 0.1.21
Text Domain: workparts
*/

:root {
  /* Workparts: industrial navy, safety orange and calm steel grey. */
  --theme-palette-color-1: #102a43;
  --theme-palette-color-2: #f59e0b;
  --theme-palette-color-3: #506477;
  --theme-palette-color-4: #f7f9fc;
  --theme-palette-color-5: #ffffff;
  --theme-palette-color-6: #172b3a;
}

/* Persistent header search: it occupies Blocksy's existing search slot. */
.workparts-header-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: stretch;
  width: clamp(20rem, 25vw, 26rem);
  height: 2.55rem;
  overflow: hidden;
  border: 1px solid #b8c7d6;
  border-radius: .45rem;
  background: #fff;
}

/*
 * Keep the persistent part-number search available on every storefront page.
 * Category archives do not consistently run WooCommerce's archive hooks in
 * Blocksy, so relying only on the large catalogue search leaves visitors
 * without a search field while they are browsing an individual department.
 */

.workparts-header-search input[type="search"] {
  min-width: 0;
  border: 0;
  padding: .45rem .7rem;
  color: #102a43;
  font-size: .86rem;
}

.workparts-header-search input[type="search"]:focus {
  outline: 2px solid #f59e0b;
  outline-offset: -2px;
}

.workparts-header-search select {
  max-width: 8.4rem;
  border: 0;
  border-left: 1px solid #d9e2ec;
  border-radius: 0;
  padding: .45rem .45rem;
  background: #fff;
  color: #102a43;
  font-size: .78rem;
}

.workparts-header-search select:focus {
  position: relative;
  z-index: 1;
  outline: 2px solid #f59e0b;
  outline-offset: -2px;
}

.workparts-header-search button {
  border: 0;
  padding: .45rem .9rem;
  background: #f59e0b;
  color: #102a43;
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
}

.workparts-header-search button:hover,
.workparts-header-search button:focus-visible {
  background: #d97706;
  color: #fff;
}

/* Workparts uses the persistent field instead of Blocksy's full-screen modal. */
#search-modal {
  display: none !important;
}

@media (max-width: 999px) {
  .workparts-header-search {
    width: min(100%, 22rem);
  }

  /* Keep the same product search available below the compact mobile header. */
  .ct-header [data-device="mobile"] .workparts-mobile-header-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    width: min(calc(100% - 2rem), 30rem);
    height: 2.75rem;
    margin: .75rem auto .9rem;
  }
}

/* On wide screens the search sits in the physical middle of the header,
 * between the Workparts mark and the main navigation. */
@media (min-width: 1200px) {
  .ct-header [data-device="desktop"] [data-row="middle"] > .ct-container {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }

  .ct-header [data-device="desktop"] [data-row="middle"] > .ct-container > [data-column="start"] {
    grid-column: 1;
    grid-row: 1;
  }

  .ct-header [data-device="desktop"] [data-row="middle"] > .ct-container > .workparts-header-search {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;
  }

  .ct-header [data-device="desktop"] [data-row="middle"] > .ct-container > [data-column="end"] {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
}

/* Workparts storefront foundations. These rules are intentionally scoped to
 * WooCommerce and the Workparts landing page; they do not affect Corex or
 * any other WordPress installation. */
.workparts-home {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5.5rem) 1.25rem;
}

.workparts-hero {
  padding: clamp(2rem, 5vw, 4.5rem);
  border-radius: 1rem;
  background: linear-gradient(135deg, #102a43 0%, #183d60 100%);
  color: #fff;
}

.workparts-hero h1,
.workparts-hero p {
  color: inherit;
}

.workparts-hero h1 {
  margin: 0 0 .75rem;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.05;
}

.workparts-hero p {
  max-width: 44rem;
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.workparts-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.5rem;
}

.workparts-hero__facts span {
  padding: .5rem .75rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
}

.workparts-hero__action {
  display: inline-flex;
  align-items: center;
  min-height: 2.8rem;
  margin-top: 1.5rem;
  padding: .65rem 1rem;
  border-radius: .45rem;
  background: #f59e0b;
  color: #102a43;
  font-weight: 700;
  text-decoration: none;
}

.workparts-hero__action:hover,
.workparts-hero__action:focus-visible {
  background: #d97706;
  color: #fff;
}

.workparts-brand-coverage {
  margin-top: 2rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid #d9e2ec;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 42, 67, .06);
}

.workparts-brand-coverage h2,
.workparts-brand-coverage h3 {
  color: #102a43;
}

.workparts-brand-coverage h2 {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.workparts-brand-coverage__intro {
  margin: .55rem 0 1.5rem;
  color: #506477;
}

.workparts-brand-coverage__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.workparts-brand-coverage__groups section {
  padding: 1.2rem;
  border-radius: .75rem;
  background: #f7f9fc;
}

.workparts-brand-coverage h3 {
  margin: 0 0 .75rem;
  font-size: 1rem;
}

.workparts-brand-coverage ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workparts-brand-coverage li {
  padding: .4rem .6rem;
  border: 1px solid #c8d5e1;
  border-radius: 999px;
  background: #fff;
  color: #102a43;
  font-size: .88rem;
  font-weight: 600;
}

.workparts-brand-coverage__note {
  margin: 1.25rem 0 0;
  color: #506477;
  font-size: .9rem;
}

.workparts-departments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

/* WordPress may add empty paragraph wrappers between the two department
 * links. They become unintended grid cells and push the cards onto separate
 * rows, so omit them from the layout. */
.workparts-departments > p {
  display: none;
}

.workparts-department-card {
  display: flex;
  min-height: 15rem;
  padding: 2rem;
  border: 1px solid #d9e2ec;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 12px 30px rgba(16, 42, 67, .08);
  color: #102a43;
  flex-direction: column;
  justify-content: end;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Spare Parts uses the supplied tractor photo as a durable, theme-managed
 * WebP background. The navy overlay keeps the white label legible. */
.workparts-departments > .workparts-department-card:first-child {
  border-color: #102a43;
  background:
    linear-gradient(180deg, rgba(16, 42, 67, .08) 18%, rgba(16, 42, 67, .9) 100%),
    url('assets/spare-parts-tractor.webp') center / cover no-repeat;
  color: #fff;
}

.workparts-departments > .workparts-department-card:first-child h2,
.workparts-departments > .workparts-department-card:first-child p {
  color: inherit;
  position: relative;
  z-index: 1;
}

/* Heaters & Parts uses a composed WebP of the supplied heater components.
 * The navy gradient reserves a calm, high-contrast area for the card copy. */
.workparts-departments > a.workparts-department-card:nth-of-type(2) {
  border-color: #102a43;
  background:
    linear-gradient(180deg, rgba(16, 42, 67, .05) 14%, rgba(8, 25, 45, .92) 100%),
    url('assets/heaters-parts-collage.webp') center / cover no-repeat;
  color: #fff;
}

.workparts-departments > a.workparts-department-card:nth-of-type(2) h2,
.workparts-departments > a.workparts-department-card:nth-of-type(2) p {
  color: inherit;
  position: relative;
  z-index: 1;
}

.workparts-department-card:hover,
.workparts-department-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(16, 42, 67, .16);
}

.workparts-department-card h2 {
  margin: 0 0 .5rem;
  font-size: 1.7rem;
}

.workparts-department-card p {
  margin: 0;
  color: #506477;
}

/* Product cards: category listings, search results and related products use
 * the same visual structure. */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  margin: 0;
}

.woocommerce ul.products li.product {
  width: auto;
  margin: 0;
  padding: 1rem;
  border: 1px solid #d9e2ec;
  border-radius: .85rem;
  background: #fff;
  box-shadow: 0 8px 22px rgba(16, 42, 67, .06);
}

/* One stable image frame for every product card: catalogue, search and related products.
 * Supplier image proportions never control the height of a product card. */
.woocommerce ul.products li.product > figure {
  display: grid;
  width: 100%;
  height: auto !important;
  min-height: 0;
  margin: 0 0 1rem;
  padding: 0 !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.woocommerce ul.products li.product > figure > .ct-media-container {
  position: static !important;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.woocommerce ul.products li.product > figure > .ct-media-container::before {
  display: none !important;
  content: none !important;
}

.woocommerce ul.products li.product > figure > .ct-media-container > img {
  position: static !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  object-fit: contain !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  min-height: 3rem;
  margin: 0 0 .55rem;
  color: #102a43;
  font-size: 1rem;
  line-height: 1.45;
}

.woocommerce ul.products li.product .price {
  color: #102a43;
  font-weight: 700;
}

.woocommerce ul.products li.product .workparts-card-stock,
.woocommerce ul.products li.product .workparts-card-vat {
  margin: .25rem 0 0;
  font-size: .82rem;
  line-height: 1.35;
}

.woocommerce ul.products li.product .workparts-card-stock {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: #247544;
  font-weight: 600;
}

.woocommerce ul.products li.product .workparts-card-stock span {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: currentColor;
}

.woocommerce ul.products li.product .workparts-card-stock.is-out-of-stock {
  color: #8b3a3a;
}

.woocommerce ul.products li.product .workparts-card-vat {
  color: #506477;
}

.single-product .workparts-single-purchase-facts {
  margin: .8rem 0 1.35rem;
}

.single-product .workparts-single-purchase-facts .workparts-card-stock,
.single-product .workparts-single-purchase-facts .workparts-card-vat {
  margin: .22rem 0 0;
  font-size: .92rem;
  line-height: 1.4;
}

.single-product .workparts-single-purchase-facts .workparts-card-stock {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: #247544;
  font-weight: 600;
}

.single-product .workparts-single-purchase-facts .workparts-card-stock span {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: currentColor;
}

.single-product .workparts-single-purchase-facts .workparts-card-stock.is-out-of-stock {
  color: #8b3a3a;
}

.single-product .workparts-single-purchase-facts .workparts-card-vat {
  color: #506477;
}

.single-product .workparts-single-delivery {
  margin: .22rem 0 0;
  color: #506477;
  font-size: .92rem;
  line-height: 1.4;
}

.single-product .summary .stock:not(.workparts-card-stock) {
  display: none;
}

.single-product .workparts-single-vat {
  margin: .22rem 0 0;
  color: #506477;
  font-size: .92rem;
  line-height: 1.4;
}

.single-product .summary .price {
  margin-bottom: .22rem;
}

.woocommerce ul.products li.product .button {
  width: 100%;
  margin-top: .9rem;
  border-radius: .45rem;
  background: #102a43;
  color: #fff;
  text-align: center;
}

/* Spare-parts search stays inside the familiar Blocksy/Woo catalogue layout. */
.workparts-parts-search {
  max-width: 1180px;
  margin: 0 auto 2rem;
  padding: 0 1.25rem;
}

.workparts-parts-search form {
  padding: 1.25rem;
  border: 1px solid #d9e2ec;
  border-radius: .85rem;
  background: #fff;
  box-shadow: 0 8px 22px rgba(16, 42, 67, .06);
}

.workparts-parts-search label {
  display: block;
  margin-bottom: .6rem;
  color: #102a43;
  font-size: 1.15rem;
  font-weight: 700;
}

.workparts-parts-search-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, auto) auto;
  gap: .65rem;
}

.workparts-parts-search input,
.workparts-parts-search select,
.workparts-parts-search button {
  min-height: 2.8rem;
  border-radius: .45rem;
}

.workparts-parts-search input,
.workparts-parts-search select {
  border: 1px solid #b8c7d6;
  padding: .55rem .75rem;
  background: #fff;
  color: #102a43;
}

.workparts-parts-search button {
  border: 0;
  padding: .55rem 1.2rem;
  background: #f59e0b;
  color: #102a43;
  font-weight: 700;
}

.workparts-parts-search p {
  margin: .7rem 0 0;
  color: #506477;
  font-size: .9rem;
}

/* Product-category title bands should introduce the catalogue, not consume
 * the first screenful.  Scope this to Workparts Woo category archives so the
 * home page and individual product pages retain their existing spacing. */
body.tax-product_cat .hero-section {
  --theme-block-padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  min-height: 0 !important;
}

body.tax-product_cat .hero-section .entry-header {
  padding-top: clamp(1.75rem, 3vw, 2.5rem) !important;
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem) !important;
}

/* Workparts catalogue navigation: compact, readable and scoped to the
 * WooCommerce sidebar that Blocksy renders on shop/category archives. */
.workparts-category-sidebar {
  padding: 1.35rem;
  border: 1px solid #d9e2ec;
  border-radius: .85rem;
  background: #fff;
  box-shadow: 0 8px 22px rgba(16, 42, 67, .06);
}

.workparts-category-sidebar h2 {
  margin: 0 0 1rem;
  color: #102a43;
  font-size: 1.45rem;
}

.workparts-category-sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.workparts-category-sidebar ul ul {
  margin: .5rem 0 .25rem .5rem;
  padding-left: .9rem;
  border-left: 2px solid #d9e2ec;
}

.workparts-category-sidebar li {
  margin: 0 0 .5rem;
}

.workparts-category-sidebar a {
  color: #506477;
  font-size: .94rem;
  line-height: 1.45;
  text-decoration: none;
}

.workparts-category-sidebar a:hover,
.workparts-category-sidebar a:focus-visible,
.workparts-category-sidebar .current-cat > a {
  color: #102a43;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #f59e0b;
  text-underline-offset: .2em;
}

.workparts-category-sidebar .count {
  color: #78909f;
  font-variant-numeric: tabular-nums;
}

/* On phones Blocksy removes the WooCommerce sidebar. Keep the same scoped
 * category tree available above the catalogue as a compact disclosure. */
.workparts-mobile-category-navigation {
  display: none;
}

@media (max-width: 999px) {
  .workparts-mobile-category-navigation {
    display: block;
    width: min(100%, 38rem);
    margin: 0 0 1.25rem;
    border: 1px solid #d9e2ec;
    border-radius: .7rem;
    background: #fff;
    overflow: hidden;
  }

  .workparts-mobile-category-navigation > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.1rem;
    padding: .75rem 1rem;
    color: #102a43;
    font-weight: 700;
    cursor: pointer;
  }

  .workparts-mobile-category-navigation > summary::after {
    content: '+';
    font-size: 1.35rem;
    line-height: 1;
  }

  .workparts-mobile-category-navigation[open] > summary {
    border-bottom: 1px solid #d9e2ec;
  }

  .workparts-mobile-category-navigation[open] > summary::after {
    content: '−';
  }

  .workparts-mobile-category-navigation .workparts-category-sidebar {
    padding: 1rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .workparts-mobile-category-navigation .workparts-category-sidebar h2 {
    display: none;
  }
}

@media (max-width: 700px) {
  .workparts-parts-search-controls {
    grid-template-columns: 1fr;
  }
}

/* Product detail page. */
.single-product div.product {
  max-width: 1180px;
  margin: 0 auto;
}

.single-product div.product .product_title {
  color: #102a43;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.16;
}

/* The source images are commonly landscape. Keep the complete product visible
 * in the main gallery instead of cropping it to Blocksy's tall portrait frame. */
.single-product .woocommerce-product-gallery .ct-product-gallery-container figure.ct-media-container {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  background: #fff;
}

.single-product .woocommerce-product-gallery .ct-product-gallery-container figure.ct-media-container > img:not(.zoomImg) {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center;
}

.single-product div.product .price {
  color: #102a43;
  font-size: 1.45rem;
  font-weight: 700;
}

.single-product div.product .single_add_to_cart_button {
  border-radius: .45rem;
  background: #f59e0b;
  color: #102a43;
  font-weight: 700;
}

@media (max-width: 640px) {
  .workparts-departments {
    grid-template-columns: 1fr;
  }

  .workparts-brand-coverage__groups {
    grid-template-columns: 1fr;
  }
}

/* The native Blocksy footer only contains its default theme credit. Replace
 * it visually with the store's own contact and legal-information footer. */
#footer.ct-footer {
  display: none;
}

.workparts-company-footer {
  margin-top: 3rem;
  background: #102a43;
  color: #f7f9fc;
}

.workparts-company-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, .55fr);
  gap: 2.5rem;
  width: min(1180px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 2.75rem 0 2.25rem;
}

.workparts-company-footer h2 {
  margin: 0 0 .85rem;
  color: #fff;
  font-size: 1.1rem;
}

.workparts-company-footer p {
  margin: .35rem 0;
}

.workparts-company-footer__company {
  color: #fff;
  font-weight: 700;
}

.workparts-company-footer a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: .16em;
}

.workparts-company-footer a:hover,
.workparts-company-footer a:focus-visible {
  color: #f59e0b;
}

.workparts-company-footer__links {
  display: grid;
  align-content: start;
  gap: .35rem;
}

.workparts-company-footer__copyright {
  border-top: 1px solid rgba(255, 255, 255, .22);
  color: #d9e2ec;
  font-size: .9rem;
  text-align: center;
  padding: 1.1rem 1.5rem;
}

/* Blocksy renders the WordPress page title. The two legal-page documents also
 * begin with the same H1, so hide only that duplicate document heading. */
body.page-id-50344 .entry-content > h1:first-child,
body.page-id-50345 .entry-content > h1:first-child {
  display: none;
}

@media (max-width: 640px) {
  .workparts-company-footer__inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    width: min(100% - 2.25rem, 1180px);
    padding: 2.25rem 0 1.85rem;
  }
}

 * Blocksy, so relying only on the large catalogue search leaves visitors
 * without a search field while they are browsing an individual department.
 */

.workparts-header-search input[type="search"] {
  min-width: 0;
  border: 0;
  padding: .45rem .7rem;
  color: #102a43;
  font-size: .86rem;
}

.workparts-header-search input[type="search"]:focus {
  outline: 2px solid #f59e0b;
  outline-offset: -2px;
}

.workparts-header-search select {
  max-width: 8.4rem;
  border: 0;
  border-left: 1px solid #d9e2ec;
  border-radius: 0;
  padding: .45rem .45rem;
  background: #fff;
  color: #102a43;
  font-size: .78rem;
}

.workparts-header-search select:focus {
  position: relative;
  z-index: 1;
  outline: 2px solid #f59e0b;
  outline-offset: -2px;
}

.workparts-header-search button {
  border: 0;
  padding: .45rem .9rem;
  background: #f59e0b;
  color: #102a43;
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
}

.workparts-header-search button:hover,
.workparts-header-search button:focus-visible {
  background: #d97706;
  color: #fff;
}

/* Workparts uses the persistent field instead of Blocksy's full-screen modal. */
#search-modal {
  display: none !important;
}

@media (max-width: 999px) {
  .workparts-header-search {
    width: min(100%, 22rem);
  }

  /* Keep the same product search available below the compact mobile header. */
  .ct-header [data-device="mobile"] .workparts-mobile-header-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    width: min(calc(100% - 2rem), 30rem);
    height: 2.75rem;
    margin: .75rem auto .9rem;
  }
}

/* On wide screens the search sits in the physical middle of the header,
 * between the Workparts mark and the main navigation. */
@media (min-width: 1200px) {
  .ct-header [data-device="desktop"] [data-row="middle"] > .ct-container {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }

  .ct-header [data-device="desktop"] [data-row="middle"] > .ct-container > [data-column="start"] {
    grid-column: 1;
    grid-row: 1;
  }

  .ct-header [data-device="desktop"] [data-row="middle"] > .ct-container > .workparts-header-search {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;
  }

  .ct-header [data-device="desktop"] [data-row="middle"] > .ct-container > [data-column="end"] {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
}

/* Workparts storefront foundations. These rules are intentionally scoped to
 * WooCommerce and the Workparts landing page; they do not affect Corex or
 * any other WordPress installation. */
.workparts-home {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5.5rem) 1.25rem;
}

.workparts-hero {
  padding: clamp(2rem, 5vw, 4.5rem);
  border-radius: 1rem;
  background: linear-gradient(135deg, #102a43 0%, #183d60 100%);
  color: #fff;
}

.workparts-hero h1,
.workparts-hero p {
  color: inherit;
}

.workparts-hero h1 {
  margin: 0 0 .75rem;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.05;
}

.workparts-hero p {
  max-width: 44rem;
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.workparts-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.5rem;
}

.workparts-hero__facts span {
  padding: .5rem .75rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
}

.workparts-hero__action {
  display: inline-flex;
  align-items: center;
  min-height: 2.8rem;
  margin-top: 1.5rem;
  padding: .65rem 1rem;
  border-radius: .45rem;
  background: #f59e0b;
  color: #102a43;
  font-weight: 700;
  text-decoration: none;
}

.workparts-hero__action:hover,
.workparts-hero__action:focus-visible {
  background: #d97706;
  color: #fff;
}

.workparts-brand-coverage {
  margin-top: 2rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid #d9e2ec;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 42, 67, .06);
}

.workparts-brand-coverage h2,
.workparts-brand-coverage h3 {
  color: #102a43;
}

.workparts-brand-coverage h2 {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.workparts-brand-coverage__intro {
  margin: .55rem 0 1.5rem;
  color: #506477;
}

.workparts-brand-coverage__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.workparts-brand-coverage__groups section {
  padding: 1.2rem;
  border-radius: .75rem;
  background: #f7f9fc;
}

.workparts-brand-coverage h3 {
  margin: 0 0 .75rem;
  font-size: 1rem;
}

.workparts-brand-coverage ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workparts-brand-coverage li {
  padding: .4rem .6rem;
  border: 1px solid #c8d5e1;
  border-radius: 999px;
  background: #fff;
  color: #102a43;
  font-size: .88rem;
  font-weight: 600;
}

.workparts-brand-coverage__note {
  margin: 1.25rem 0 0;
  color: #506477;
  font-size: .9rem;
}

.workparts-departments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

/* WordPress may add empty paragraph wrappers between the two department
 * links. They become unintended grid cells and push the cards onto separate
 * rows, so omit them from the layout. */
.workparts-departments > p {
  display: none;
}

.workparts-department-card {
  display: flex;
  min-height: 15rem;
  padding: 2rem;
  border: 1px solid #d9e2ec;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 12px 30px rgba(16, 42, 67, .08);
  color: #102a43;
  flex-direction: column;
  justify-content: end;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Spare Parts uses the supplied tractor photo as a durable, theme-managed
 * WebP background. The navy overlay keeps the white label legible. */
.workparts-departments > .workparts-department-card:first-child {
  border-color: #102a43;
  background:
    linear-gradient(180deg, rgba(16, 42, 67, .08) 18%, rgba(16, 42, 67, .9) 100%),
    url('assets/spare-parts-tractor.webp') center / cover no-repeat;
  color: #fff;
}

.workparts-departments > .workparts-department-card:first-child h2,
.workparts-departments > .workparts-department-card:first-child p {
  color: inherit;
  position: relative;
  z-index: 1;
}

/* Heaters & Parts uses a composed WebP of the supplied heater components.
 * The navy gradient reserves a calm, high-contrast area for the card copy. */
.workparts-departments > a.workparts-department-card:nth-of-type(2) {
  border-color: #102a43;
  background:
    linear-gradient(180deg, rgba(16, 42, 67, .05) 14%, rgba(8, 25, 45, .92) 100%),
    url('assets/heaters-parts-collage.webp') center / cover no-repeat;
  color: #fff;
}

.workparts-departments > a.workparts-department-card:nth-of-type(2) h2,
.workparts-departments > a.workparts-department-card:nth-of-type(2) p {
  color: inherit;
  position: relative;
  z-index: 1;
}

.workparts-department-card:hover,
.workparts-department-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(16, 42, 67, .16);
}

.workparts-department-card h2 {
  margin: 0 0 .5rem;
  font-size: 1.7rem;
}

.workparts-department-card p {
  margin: 0;
  color: #506477;
}

/* Product cards: category listings, search results and related products use
 * the same visual structure. */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  margin: 0;
}

.woocommerce ul.products li.product {
  width: auto;
  margin: 0;
  padding: 1rem;
  border: 1px solid #d9e2ec;
  border-radius: .85rem;
  background: #fff;
  box-shadow: 0 8px 22px rgba(16, 42, 67, .06);
}

.woocommerce ul.products li.product figure {
  aspect-ratio: 1 / 1;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.woocommerce ul.products li.product figure img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  margin: 0;
}

/* A supplier image can be much taller than it is wide. Keep related-product
 * cards aligned by making the image area an actual fixed square rather than
 * allowing that source image to expand its flex parent. */
.single-product .related.products li.product figure {
  position: relative;
  height: 0;
  min-height: 0;
  padding-bottom: 100%;
  overflow: hidden;
}

.single-product .related.products li.product figure > a {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.single-product .related.products li.product figure img {
  min-width: 0;
  min-height: 0;
  width: 100% !important;
  height: 100% !important;
  max-height: 100%;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  min-height: 3rem;
  margin: 0 0 .55rem;
  color: #102a43;
  font-size: 1rem;
  line-height: 1.45;
}

.woocommerce ul.products li.product .price {
  color: #102a43;
  font-weight: 700;
}

.woocommerce ul.products li.product .workparts-card-stock,
.woocommerce ul.products li.product .workparts-card-vat {
  margin: .25rem 0 0;
  font-size: .82rem;
  line-height: 1.35;
}

.woocommerce ul.products li.product .workparts-card-stock {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: #247544;
  font-weight: 600;
}

.woocommerce ul.products li.product .workparts-card-stock span {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: currentColor;
}

.woocommerce ul.products li.product .workparts-card-stock.is-out-of-stock {
  color: #8b3a3a;
}

.woocommerce ul.products li.product .workparts-card-vat {
  color: #506477;
}

.single-product .workparts-single-purchase-facts {
  margin: .8rem 0 1.35rem;
}

.single-product .workparts-single-purchase-facts .workparts-card-stock,
.single-product .workparts-single-purchase-facts .workparts-card-vat {
  margin: .22rem 0 0;
  font-size: .92rem;
  line-height: 1.4;
}

.single-product .workparts-single-purchase-facts .workparts-card-stock {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: #247544;
  font-weight: 600;
}

.single-product .workparts-single-purchase-facts .workparts-card-stock span {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: currentColor;
}

.single-product .workparts-single-purchase-facts .workparts-card-stock.is-out-of-stock {
  color: #8b3a3a;
}

.single-product .workparts-single-purchase-facts .workparts-card-vat {
  color: #506477;
}

.single-product .workparts-single-delivery {
  margin: .22rem 0 0;
  color: #506477;
  font-size: .92rem;
  line-height: 1.4;
}

.single-product .summary .stock:not(.workparts-card-stock) {
  display: none;
}

.single-product .workparts-single-vat {
  margin: .22rem 0 0;
  color: #506477;
  font-size: .92rem;
  line-height: 1.4;
}

.single-product .summary .price {
  margin-bottom: .22rem;
}

.woocommerce ul.products li.product .button {
  width: 100%;
  margin-top: .9rem;
  border-radius: .45rem;
  background: #102a43;
  color: #fff;
  text-align: center;
}

/* Spare-parts search stays inside the familiar Blocksy/Woo catalogue layout. */
.workparts-parts-search {
  max-width: 1180px;
  margin: 0 auto 2rem;
  padding: 0 1.25rem;
}

.workparts-parts-search form {
  padding: 1.25rem;
  border: 1px solid #d9e2ec;
  border-radius: .85rem;
  background: #fff;
  box-shadow: 0 8px 22px rgba(16, 42, 67, .06);
}

.workparts-parts-search label {
  display: block;
  margin-bottom: .6rem;
  color: #102a43;
  font-size: 1.15rem;
  font-weight: 700;
}

.workparts-parts-search-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, auto) auto;
  gap: .65rem;
}

.workparts-parts-search input,
.workparts-parts-search select,
.workparts-parts-search button {
  min-height: 2.8rem;
  border-radius: .45rem;
}

.workparts-parts-search input,
.workparts-parts-search select {
  border: 1px solid #b8c7d6;
  padding: .55rem .75rem;
  background: #fff;
  color: #102a43;
}

.workparts-parts-search button {
  border: 0;
  padding: .55rem 1.2rem;
  background: #f59e0b;
  color: #102a43;
  font-weight: 700;
}

.workparts-parts-search p {
  margin: .7rem 0 0;
  color: #506477;
  font-size: .9rem;
}

/* Product-category title bands should introduce the catalogue, not consume
 * the first screenful.  Scope this to Workparts Woo category archives so the
 * home page and individual product pages retain their existing spacing. */
body.tax-product_cat .hero-section {
  --theme-block-padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  min-height: 0 !important;
}

body.tax-product_cat .hero-section .entry-header {
  padding-top: clamp(1.75rem, 3vw, 2.5rem) !important;
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem) !important;
}

/* Workparts catalogue navigation: compact, readable and scoped to the
 * WooCommerce sidebar that Blocksy renders on shop/category archives. */
.workparts-category-sidebar {
  padding: 1.35rem;
  border: 1px solid #d9e2ec;
  border-radius: .85rem;
  background: #fff;
  box-shadow: 0 8px 22px rgba(16, 42, 67, .06);
}

.workparts-category-sidebar h2 {
  margin: 0 0 1rem;
  color: #102a43;
  font-size: 1.45rem;
}

.workparts-category-sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.workparts-category-sidebar ul ul {
  margin: .5rem 0 .25rem .5rem;
  padding-left: .9rem;
  border-left: 2px solid #d9e2ec;
}

.workparts-category-sidebar li {
  margin: 0 0 .5rem;
}

.workparts-category-sidebar a {
  color: #506477;
  font-size: .94rem;
  line-height: 1.45;
  text-decoration: none;
}

.workparts-category-sidebar a:hover,
.workparts-category-sidebar a:focus-visible,
.workparts-category-sidebar .current-cat > a {
  color: #102a43;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #f59e0b;
  text-underline-offset: .2em;
}

.workparts-category-sidebar .count {
  color: #78909f;
  font-variant-numeric: tabular-nums;
}

/* On phones Blocksy removes the WooCommerce sidebar. Keep the same scoped
 * category tree available above the catalogue as a compact disclosure. */
.workparts-mobile-category-navigation {
  display: none;
}

@media (max-width: 999px) {
  .workparts-mobile-category-navigation {
    display: block;
    width: min(100%, 38rem);
    margin: 0 0 1.25rem;
    border: 1px solid #d9e2ec;
    border-radius: .7rem;
    background: #fff;
    overflow: hidden;
  }

  .workparts-mobile-category-navigation > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.1rem;
    padding: .75rem 1rem;
    color: #102a43;
    font-weight: 700;
    cursor: pointer;
  }

  .workparts-mobile-category-navigation > summary::after {
    content: '+';
    font-size: 1.35rem;
    line-height: 1;
  }

  .workparts-mobile-category-navigation[open] > summary {
    border-bottom: 1px solid #d9e2ec;
  }

  .workparts-mobile-category-navigation[open] > summary::after {
    content: '−';
  }

  .workparts-mobile-category-navigation .workparts-category-sidebar {
    padding: 1rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .workparts-mobile-category-navigation .workparts-category-sidebar h2 {
    display: none;
  }
}

@media (max-width: 700px) {
  .workparts-parts-search-controls {
    grid-template-columns: 1fr;
  }
}

/* Product detail page. */
.single-product div.product {
  max-width: 1180px;
  margin: 0 auto;
}

.single-product div.product .product_title {
  color: #102a43;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.16;
}

/* The source images are commonly landscape. Keep the complete product visible
 * in the main gallery instead of cropping it to Blocksy's tall portrait frame. */
.single-product .woocommerce-product-gallery .ct-product-gallery-container figure.ct-media-container {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  background: #fff;
}

.single-product .woocommerce-product-gallery .ct-product-gallery-container figure.ct-media-container > img:not(.zoomImg) {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center;
}

.single-product div.product .price {
  color: #102a43;
  font-size: 1.45rem;
  font-weight: 700;
}

.single-product div.product .single_add_to_cart_button {
  border-radius: .45rem;
  background: #f59e0b;
  color: #102a43;
  font-weight: 700;
}

@media (max-width: 640px) {
  .workparts-departments {
    grid-template-columns: 1fr;
  }

  .workparts-brand-coverage__groups {
    grid-template-columns: 1fr;
  }
}

/* The native Blocksy footer only contains its default theme credit. Replace
 * it visually with the store's own contact and legal-information footer. */
#footer.ct-footer {
  display: none;
}

.workparts-company-footer {
  margin-top: 3rem;
  background: #102a43;
  color: #f7f9fc;
}

.workparts-company-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, .55fr);
  gap: 2.5rem;
  width: min(1180px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 2.75rem 0 2.25rem;
}

.workparts-company-footer h2 {
  margin: 0 0 .85rem;
  color: #fff;
  font-size: 1.1rem;
}

.workparts-company-footer p {
  margin: .35rem 0;
}

.workparts-company-footer__company {
  color: #fff;
  font-weight: 700;
}

.workparts-company-footer a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: .16em;
}

.workparts-company-footer a:hover,
.workparts-company-footer a:focus-visible {
  color: #f59e0b;
}

.workparts-company-footer__links {
  display: grid;
  align-content: start;
  gap: .35rem;
}

.workparts-company-footer__copyright {
  border-top: 1px solid rgba(255, 255, 255, .22);
  color: #d9e2ec;
  font-size: .9rem;
  text-align: center;
  padding: 1.1rem 1.5rem;
}

/* Blocksy renders the WordPress page title. The two legal-page documents also
 * begin with the same H1, so hide only that duplicate document heading. */
body.page-id-50344 .entry-content > h1:first-child,
body.page-id-50345 .entry-content > h1:first-child {
  display: none;
}

@media (max-width: 640px) {
  .workparts-company-footer__inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    width: min(100% - 2.25rem, 1180px);
    padding: 2.25rem 0 1.85rem;
  }
}
