/* =========================================================
   brand-override.css
   Loaded LAST — after bootstrap, the K714 theme and Astro's
   global.css. Only fixes that are specific to this build belong
   here. Everything else must come from the original theme files.

   Rules:
   1. never restyle a template block that already looks right
   2. keep the prefix .cc- for the consent UI, .prose for legal pages
      so Bootstrap cannot leak into them
   ========================================================= */

:root {
  --brand-900: #0f2b5b;
  --brand-700: #1d4670;
  --brand-500: #4ea8b1;
  --brand-300: #8fcdd3;
  --brand-100: #e8f1f2;
  --ink: #333333;
  --ink-soft: #666666;
  --ink-light: #999999;
  --muted: #969595;
  --line: #dfdfdf;
  --bg-alt: #f1f1f1;
  --bg-footer: #f4f6f8;
}

body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/* =========================================================
   1. Header
   The theme reserves 350px for the language switcher, which this
   project removes. Reclaim that width and let seven items share
   the bar evenly instead of the hard-coded five.
   ========================================================= */

.header .headbody a.logo {
  width: auto;
  flex: 0 0 auto;
}

.header .headbody a.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header .headbody a.logo svg,
.header .headbody a.logo img {
  height: 48px;
  width: auto;
  flex: 0 0 auto;
  display: block;
}

.header .headbody a.logo img {
  height: 52px;
  width: auto;
}

.footer-brand {
  margin-bottom: 10px;
}

.footer-brand img {
  width: 110px;
  height: auto;
  display: block;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo-text b {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--brand-900);
}

.logo-text i {
  margin-top: 3px;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--brand-500);
}

.header .nav {
  width: auto;
  flex: 1 1 auto;
  margin-left: 40px;
}

.header .nav .main-menu-list {
  justify-content: space-between;
}

.header .nav .main-menu-list > li {
  width: auto;
  flex: 0 1 auto;
  padding-inline: 12px;
}

/* The slides are finished artwork with the copy baked in, so no text layer is
   rendered over them. Bullets sit inside the image, above the contact strip
   that overlaps the bottom 60px. */

/* =========================================================
   1b. Section titles on photographic backgrounds
   The template hard-codes style="color:#fff" inline; we use a class.
   ========================================================= */

.product .main_title p b,
.jjfa .title b,
.lybg .main_title p b {
  color: #fff;
}

.product .main_title p b {
  font-size: 40px;
  text-transform: uppercase;
}

/* Category tabs: the theme's bright blue block became dark navy after the
   brand swap, which disappears on the dark factory photo. Use the accent
   colour for the block and white for the wipe, keeping the original
   "bright block + contrasting wipe" relationship. */
.product .slide-list li {
  background: var(--brand-500);
}

.product .slide-list li::before {
  background: #fff;
}

.product .slide-list li:hover a span,
.product .slide-list li:hover a {
  color: var(--brand-900);
}

/* The theme lifts the strip with position:relative but never closes the
   60px hole it leaves behind. */
.search {
  margin-bottom: -60px;
}

/* .search is also .wal, so the theme's background only spans 1200px and
   leaves white shoulders on wider viewports. Bleed the colour full width
   with a clipped shadow — a 100vw pseudo-element would overflow by the
   scrollbar width and inflate document.scrollWidth. */
.search {
  box-shadow: 0 0 0 100vmax var(--brand-900);
  clip-path: inset(0 -100vmax);
}

/* Links inside the strip inherit Bootstrap's blue, not the theme's white. */
.search .tel_left b,
.search .tel_left b a {
  color: #fff;
}

.search .tel_left b a:hover {
  color: var(--brand-300);
}

/* Pagination would sit behind the strip; lift it above. */
/* The contact strip is pulled up 60px and would otherwise eat the bottom of the
   artwork. Reserve that space in navy so the strip lands on it instead. */
#banner {
  padding-bottom: 60px;
  background: var(--brand-900);
}

@media (max-width: 990px) {
  #banner {
    padding-bottom: 0;
  }
}

#banner .swiper-pagination {
  bottom: 90px;
}

/* The artwork is a light-toned design, so the theme's plain white bullets
   disappear into it. Give them a navy core and a white ring. */
#banner .swiper-pagination-bullet {
  background: rgba(15, 43, 91, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.95);
  opacity: 1;
}

#banner .swiper-pagination-bullet-active {
  background: var(--brand-500);
  border-color: #fff;
}

/* Same problem for the white arrow PNGs: they need a scrim to read against
   the pale background. */
#banner .swiper-button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(15, 43, 91, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

#banner .swiper-button:hover {
  background: rgba(15, 43, 91, 0.72);
}

#banner .swiper-button img {
  width: 14px;
  height: auto;
}

#banner .swiper-button {
  z-index: 20;
}

/* The active bullet inherited the primary colour, which is now the same navy
   as the banner — it vanished. Use the accent instead. */
#banner .swiper-pagination-bullet-active {
  background-color: var(--brand-500);
}

/* Placeholder tag clashes with the strip once the slide is overlapped. */
.banner-photo__tag {
  display: none;
}

/* Let the hero CTA size to its label instead of wrapping at 130px. */
#banner .banner-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 130px;
  padding: 0 22px;
  white-space: nowrap;
}

/* =========================================================
   1d. Solutions block
   The theme's active-tab artwork (activebg1.png, 200×780) stretches to the
   full height of .jjfa_tit, which paints a tall column behind the first tab.
   Keep the tab bar at its natural height and mark the active tab with the
   accent colour instead.
   ========================================================= */

/* Rebuilt as three stacked bands: title → image → tabs.
   The theme absolutely positions the title and the tab bar over the image,
   which collides now that the panel holds a 4:3 product shot instead of a
   wide banner. */
/* The photo used to fill the whole block, so the section had no background of
   its own. Now that the image is boxed, the band needs its own dark ground or
   the white title disappears. */
.jjfa {
  padding: 50px 0 40px;
  background:
    radial-gradient(90% 80% at 15% 10%, rgba(78, 168, 177, 0.22) 0%, transparent 60%),
    linear-gradient(160deg, #0a1e40 0%, #0f2b5b 55%, #16375f 100%);
}

.jjfa .tit_box {
  position: static;
  top: auto;
  padding-bottom: 26px;
}

.jjfa .jjfa_body {
  position: relative;
}

.jjfa .jjfa_com {
  height: 480px;
  max-width: 720px;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.jjfa .jjfa_com ul,
.jjfa .jjfa_com ul li {
  height: 100%;
}

.jjfa .jjfa_com li img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.jjfa .jjfa_tit {
  position: static;
  bottom: auto;
  height: auto;
  margin-top: 0;
}

.jjfa .jjfa_tit ul {
  height: auto;
  align-items: stretch;
}

.jjfa .jjfa_tit ul li {
  height: auto;
}

.jjfa .jjfa_tit ul li a {
  padding: 22px 10px 18px;
}

.jjfa .jjfa_tit ul li.active {
  background: var(--brand-500);
}

.jjfa .title p {
  color: rgba(255, 255, 255, 0.72);
}

.jjfa .jjfa_tit ul li:hover {
  background: rgba(78, 168, 177, 0.55);
}

/* Decorative wave strip from the theme no longer fits the new stack. */
.jjfa-menb {
  display: none;
}

@media (max-width: 990px) {
  .jjfa .jjfa_com {
    height: 320px;
  }
}

/* =========================================================
   1e. Contact band
   The theme paints .lybg with bg.jpg, an office photo that turns almost
   white at this crop and hides the white form copy. Use the industrial
   backdrop instead and restore white text.
   ========================================================= */

/* 1g. Product band: the client's own factory, pre-darkened, replaces the
   template's night-refinery photo.
   The band is very tall, so `cover` alone would zoom the photo to a blurry
   crop. Pinning it to the viewport keeps a sane scale. */
.product {
  background-image: url(/images/factory-dark.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media (max-width: 990px) {
  .product {
    background-attachment: scroll;
  }
}

.lybg {
  background-image: linear-gradient(rgba(10, 30, 64, 0.55), rgba(10, 30, 64, 0.62)),
    url(/images/factory-dark.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

.lybg .ly_fl b {
  color: #fff;
}

.lybg .ly_fl p {
  color: rgba(255, 255, 255, 0.85);
}

/* The theme's advbg.jpg is a vivid royal-blue gradient that fights the navy
   brand. Keep the texture, knock it back with a brand tint. */
.adv_line {
  position: relative;
}

.adv_line::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 43, 91, 0.62);
}

.adv_line .wal {
  position: relative;
  z-index: 1;
}

/* =========================================================
   1c. Footer details the theme does not cover
   ========================================================= */

/* Footer as a site map: identity, twelve categories in two columns, contact
   details, enquiry CTA. The theme reserves 22/22/30/20 — give the catalogue
   column the extra room it needs. */
.footer-main .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-list1 {
  width: 20%;
}

.footer-list1--products {
  width: 33%;
}

.footer-list3 {
  width: 25%;
}

.footer-list4 {
  width: 20%;
}

/* Explicit two-column grid rather than column-count: the flow-based columns
   balance by height and break at unpredictable points, which is what made the
   list look uneven. */
.footer-cats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-cats li {
  min-width: 0;
}

.footer-cats a {
  display: block;
  font-size: 13px;
  line-height: 26px;
  letter-spacing: 0.2px;
  color: #969595;
}

.footer-cats a:hover {
  color: var(--brand-900);
}

@media (max-width: 990px) {
  .footer-list1,
  .footer-list1--products,
  .footer-list3,
  .footer-list4 {
    width: 100%;
  }
}

.footer-list4 > span {
  display: block;
  margin-bottom: 30px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1.36px;
  text-transform: uppercase;
  color: var(--ink);
}

.footer-cta {
  font-size: 14px;
  line-height: 26px;
  color: var(--muted);
  margin-bottom: 18px;
}

/* WeChat QR. The white padding is the quiet zone the code needs to be
   readable — do not remove it. */
.footer-qr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
}

.footer-qr > a {
  flex: 0 0 auto;
  display: block;
  width: 104px;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--line);
  transition: border-color 0.3s ease;
}

.footer-qr > a:hover {
  border-color: var(--brand-500);
}

.footer-qr img {
  display: block;
  width: 100%;
  height: auto;
}

.footer-qr__label {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

.footer-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 40px;
  border-radius: 5px;
  background: var(--brand-900);
  color: #fff;
  font-size: 14px;
  text-align: center;
  transition: background 0.3s ease;
}

.footer-more:hover {
  background: var(--brand-500);
  color: #fff;
}

.footer-copyright .main_box p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
}

.footer-copyright .main_box a {
  color: var(--muted);
}

.footer-copyright .main_box a:hover {
  color: var(--brand-900);
}

/* =========================================================
   4c. Contact shortcuts (no-form build)
   ========================================================= */

.contact-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.contact-row + .contact-row {
  margin-top: 12px;
}

.contact-row:hover {
  background: rgba(78, 168, 177, 0.18);
  border-color: var(--brand-500);
  color: #fff;
}

.contact-row i {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--brand-300);
  font-size: 15px;
}

.contact-row .contact-row__label {
  display: block;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.contact-row .contact-row__value {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.contact-hours {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
}

.cookie-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}

.cookie-btn:hover {
  color: var(--brand-900);
}

/* Filtered cards must actually disappear. */
.pro_list a[hidden],
.pro_res ul li[hidden] {
  display: none !important;
}

/* Product list cards: centre the button under each name. */
.pro_res .pr_btn {
  padding-bottom: 18px;
  text-align: center;
}

.pro_res .pr_btn a.btn_send {
  display: inline-block;
  background: var(--brand-900);
}

.pro_res .pr_btn a.btn_send:hover {
  background: var(--brand-500);
  color: #fff;
}

.pro_res ul li p.zi {
  color: var(--brand-900);
}

/* =========================================================
   1f. Inner-page shell — .inbanner / .innerrtitle / .ny_tab
   ========================================================= */

/* The theme's banner image is a full 1920×800 photo; on an inner page that
   is far too tall. Cap the band and crop. */
.inbanner {
  position: relative;
  height: 330px;
  overflow: hidden;
}

.inbanner > img {
  width: 100%;
  height: 330px;
  object-fit: cover;
}

/* The photo is already darkened at source; deepen it slightly so the white
   page title keeps its contrast. */
.inbanner .back_bg {
  background: rgba(10, 30, 64, 0.45);
}

/* Title layer: the theme draws its 5px bar at the viewport edge, which sits
   far from the text once the title is aligned to the container. */
.inbanner .txt {
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  transform: translateY(-50%);
  padding-left: 0;
  text-transform: none;
}

.inbanner .txt::before {
  display: none;
}

.inbanner .txt h1 {
  margin: 0;
  padding-left: 18px;
  border-left: 5px solid var(--brand-500);
  font-size: 40px;
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
}

.inbanner .txt p {
  margin: 14px 0 0;
  padding-left: 23px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.82);
}

/* Breadcrumb bar */
.innerrtitle .inposition,
.innerrtitle .navpost {
  font-size: 13px;
  color: var(--ink-soft);
}

.innerrtitle .navpost a {
  color: var(--ink-soft);
}

.innerrtitle .navpost a:hover {
  color: var(--brand-900);
}

/* Secondary tab bar */
.ny_tab ul li a:hover,
.ny_tab ul li.aa {
  background: var(--brand-900);
}

.ny_tab ul li a:hover {
  color: #fff;
}

/* The theme hides the tab bar below 780px, which would strand sub-pages.
   Below that width the tabs become a three-column grid: thirteen labels fit
   in five rows, and nothing needs to be scrolled horizontally. */
@media (max-width: 780px) {
  .ny_tab,
  .ny_tab--many {
    display: block;
    overflow: visible;
    white-space: normal;
  }

  .ny_tab ul,
  .ny_tab--many ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    min-width: 0;
    background: var(--line);
    justify-content: initial;
  }

  .ny_tab ul li,
  .ny_tab--many ul li {
    flex: none;
    width: auto;
  }

  .ny_tab ul li a,
  .ny_tab--many ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 8px 6px;
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
  }
}

@media (max-width: 780px) {
  /* Long article titles push the breadcrumb past its fixed 50px bar. */
  .innerrtitle .navpost {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .inbanner {
    height: 240px;
  }

  /* Same `img { height: auto !important }` reset as the logo: without the
     override the photo collapses to its natural ratio and leaves a grey band. */
  .inbanner > img {
    height: 240px !important;
    object-fit: cover;
  }

  .inbanner .txt h1 {
    font-size: 26px;
  }

  .inbanner .txt p {
    display: none;
  }
}

/* =========================================================
   2. Mobile navigation
   The theme's drawer depends on jQuery; this build uses a plain
   toggle driven by nav-mobile.js.
   ========================================================= */

.nav-toggle-btn {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.nav-toggle-btn span {
  display: block;
  height: 2px;
  background: var(--brand-900);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle-btn[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle-btn[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle-btn[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 990px) {
  /* The overlap trick only works on the desktop banner; on phones the strip
     would sit on top of the section title. */
  .search {
    top: 0;
    margin-bottom: 0;
  }

  /* The theme hides the phone and email block on small screens. For an export
     site that is the one thing a buyer may want to tap, so bring it back. */
  .search .tel_left {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px 26px;
    width: 100%;
  }

  .search .tel_box:first-child {
    padding-right: 0;
  }

  .search .tel_box p {
    padding-bottom: 4px;
    font-size: 12px;
  }

  .search .tel_box b {
    font-size: 15px;
  }

  .search .search_right {
    width: 100%;
    margin-top: 12px;
  }

  /* The band is only ~127px tall at this width, so the bullets sit tight
     against the bottom edge and shrink to stay clear of the copy. */
  #banner .swiper-pagination {
    bottom: 6px;
  }

  #banner .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    margin: 0 3px;
  }

  /* Arrows are hover-only on desktop; touch devices get the bullets instead. */
  #banner .swiper-button {
    display: none;
  }

  .nav-toggle-btn {
    display: flex;
  }

  .header {
    height: auto;
    min-height: 70px;
  }

  .header .headbody {
    min-height: 70px;
    flex-wrap: nowrap;
  }

  /* The logo anchor stretches on narrow screens and pushes the hamburger
     past the viewport, which adds a horizontal scrollbar. */
  .header .headbody a.logo {
    flex: 0 0 auto;
    min-width: 0;
    max-width: calc(100% - 48px);
    overflow: hidden;
  }

  /* The theme's media.css ships `img { height: auto !important }` below 980px,
     which renders the logo at its native 258×160 and inflates the header.
     Same-importance override is the only way to win here. */
  .header .headbody a.logo svg,
  .header .headbody a.logo img {
    height: 46px !important;
    width: auto !important;
    max-width: none;
  }

  .header .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    margin-left: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 999;
    max-height: 78vh;
    overflow-y: auto;
  }

  .header .nav.is-open {
    display: block;
  }

  .header .nav .main-menu-list {
    display: block;
    height: auto;
  }

  .header .nav .main-menu-list > li {
    width: 100%;
    height: auto;
    line-height: 1.4;
    text-align: left;
    padding-inline: 0;
    border-bottom: 1px solid var(--line);
  }

  .header .nav .main-menu-list > li > a {
    padding: 14px 16px;
  }

  /* Touch devices keep :hover stuck once a parent item is tapped, which used
     to unfold all twelve categories on top of the rest of the menu. The
     drawer now links straight to /products/ and the category grid lives
     there. */
  .header .nav .main-menu-list > li > ul {
    display: none !important;
  }
}

/* =========================================================
   2b. Main navigation dropdown — 12 categories, three columns
   The theme renders a single 180%-wide blue column; with twelve series it
   would run off the viewport.
   ========================================================= */
/* The theme leaves .header without a stacking context, so the hero section
   below paints over the dropdown. */
.header {
  position: relative;
  z-index: 100;
}

@media (min-width: 991px) {
  .header .nav .main-menu-list > li > ul {
    width: 640px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    padding: 12px;
    box-shadow: 0 10px 24px rgba(15, 43, 91, 0.18);
  }

  .header .nav .main-menu-list > li:hover > ul {
    display: grid;
  }

  /* The theme sizes every list item as 1/5 of the bar with an 80px line
     height; dropdown entries need both reset or they overflow the panel. */
  .header .nav .main-menu-list > li > ul > li {
    width: 100%;
    height: auto;
    line-height: 1.4;
  }

  /* On the products page the parent item carries .active, and the theme's
     `.main-menu-list li.active a` outranks a plain descendant selector — so
     the active variant is repeated here to keep the dropdown text white. */
  .header .nav .main-menu-list > li > ul > li > a,
  .header .nav .main-menu-list > li.active > ul > li > a,
  .header .nav .main-menu-list > li:hover > ul > li > a,
  .header .nav .main-menu-list > li:hover ul li a {
    display: block;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    color: #fff;
  }

  .header .nav .main-menu-list > li > ul > li > a:hover,
  .header .nav .main-menu-list > li.active > ul > li > a:hover,
  .header .nav .main-menu-list > li > ul > li:hover > a {
    background: #fff;
    color: var(--brand-900);
  }
}

/* =========================================================
   3. Consent banner — isolated from Bootstrap
   ========================================================= */

.cc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  padding: 12px;
  background: rgba(7, 24, 42, 0.45);
}

.cc[hidden] {
  display: none !important;
}

.cc * {
  box-sizing: border-box;
}

.cc .cc__panel {
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 18px 48px rgba(15, 43, 91, 0.18);
  padding: 18px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
}

.cc .cc__body {
  flex: 1 1 420px;
}

.cc .cc__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.cc .cc__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 78ch;
}

.cc .cc__text a {
  color: var(--brand-900);
  text-decoration: underline;
}

.cc .cc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cc .cc__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.cc .cc__btn:hover {
  border-color: var(--brand-900);
  color: var(--brand-900);
}

.cc .cc__btn--primary {
  background: var(--brand-900);
  border-color: var(--brand-900);
  color: #fff;
}

.cc .cc__btn--primary:hover {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
}

.cc .cc__prefs {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
}

.cc .cc__prefs[hidden] {
  display: none !important;
}

.cc .cc__pref {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
}

.cc .cc__pref strong {
  display: block;
  color: var(--ink);
}

.cc .cc__pref span {
  color: var(--muted);
}

.cc .cc__switch {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}

.cc .cc__switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.cc .cc__switch i {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.2s ease;
}

.cc .cc__switch i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}

.cc .cc__switch input:checked + i {
  background: var(--brand-500);
}

.cc .cc__switch input:checked + i::after {
  transform: translateX(18px);
}

/* =========================================================
   1h. Product imagery — show the whole pump, never crop it
   ========================================================= */

.pro_list a .pro_tu img,
.pro_res ul li .img img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff;
}

/* The catalogue page carries 13 tabs (All + 12 series); one row cannot hold
   them at the theme's 18px font, so the bar wraps to two compact rows.
   Scoped to desktop: below 781px the tabs become a three-column grid, and
   these same-specificity rules would otherwise re-apply `nowrap` and push
   the labels out of their cells. */
@media (min-width: 781px) {
  .ny_tab--many ul {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .ny_tab--many ul li {
    flex: 0 1 auto;
  }

  .ny_tab--many ul li a {
    padding: 14px 16px;
    font-size: 14px;
    white-space: nowrap;
  }

  .ny_tab--many li::after {
    display: none;
  }
}

/* The theme points at an image that was never shipped with the template. */
.pro_txt p em {
  background-image: none;
  padding-left: 0;
}

/* =========================================================
   4. Legal pages — the theme has no prose component
   ========================================================= */

/* The four legal pages still wrap their content in a .section element; give it
   the theme's standard rhythm so they do not butt against the breadcrumb bar. */
.section {
  padding: 60px 0 80px;
}

/* Form panel on a light background (contact page). */
.ct-panel {
  background: #f6f6f6;
  padding: 30px;
}

/* =========================================================
   4b. News list — the theme floats the cards without clearing them
   ========================================================= */

.innewslist {
  padding-bottom: 50px;
  overflow: hidden;
}

.innewslist ul {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.innewslist li {
  float: none;
  display: flex;
  transition: box-shadow 0.3s ease;
}

.innewslist li > a {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Every card keeps the same height: the summary reserves three lines
   (28px × 3) and then grows to fill, pushing the bottom edge level. */
.innewslist .nconc {
  flex: 1 1 auto;
  min-height: 84px;
}

.innewslist li:hover {
  box-shadow: 0 0 24px rgba(15, 43, 91, 0.16);
}

.innewslist li:hover .ntitle {
  color: var(--brand-900);
}

/* time.png is not shipped in the template package. */
.innewslist .ptime {
  padding-left: 0;
  background: none !important;
}

/* Single column below 740px — equal heights no longer help, and the reserved
   summary height would only leave a gap. */
@media (max-width: 740px) {
  .innewslist .nconc {
    min-height: 0;
  }
}


.prose {
  max-width: 900px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-soft);
}

.prose h2 {
  margin: 38px 0 12px;
  padding-left: 12px;
  border-left: 5px solid var(--brand-500);
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink);
}

.prose h3 {
  margin: 24px 0 8px;
  font-size: 17px;
  color: var(--ink);
}

.prose p,
.prose ul,
.prose ol {
  margin-bottom: 16px;
}

.prose ul {
  padding-left: 20px;
  list-style: disc;
}

.prose li {
  margin-bottom: 6px;
}

.prose a {
  color: var(--brand-900);
  text-decoration: underline;
}

.prose table {
  width: 100%;
  margin-bottom: 24px;
  border-collapse: collapse;
  font-size: 14px;
}

.prose th,
.prose td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.prose th {
  background: var(--bg-alt);
  font-weight: 700;
  color: var(--ink);
}

.prose code {
  padding: 1px 5px;
  background: var(--bg-alt);
  font-size: 13px;
}

.note {
  margin-bottom: 24px;
  padding: 14px 18px;
  border-left: 3px solid var(--brand-500);
  background: var(--brand-100);
  font-size: 14px;
  color: var(--ink-soft);
}

/* =========================================================
   5. Inquiry form — consent row must survive the theme styles
   ========================================================= */

.inp-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 15px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.inp-consent input {
  margin-top: 3px;
  flex-shrink: 0;
}

.inp-consent a {
  color: var(--brand-900);
  text-decoration: underline;
}

.inp-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin-top: 12px;
  font-size: 14px;
  color: #fff;
}

.form-status[data-kind='ok'] {
  color: #b8f0c9;
}

.form-status[data-kind='error'] {
  color: #ffc9c0;
}

/* =========================================================
   6. Utilities carried over from the Astro scaffold
   ========================================================= */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 10px 18px;
  background: var(--brand-900);
  color: #fff;
}

.skip-link:focus {
  left: 0;
}

/* The theme ships a "friendly links" block that this project drops. */
.links {
  display: none !important;
}