/* ==========================================================================
   Our Products Page Styles
   Source: Figma node 949:1617 + components 949:1268, 949:1305, 949:1330,
           949:1360, 949:1384.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page Banner — base (shared with other inner pages)
   -------------------------------------------------------------------------- */
.cetools-page-banner {
  position: relative;
  background-color: #142F6C;
  min-height: 100vh;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-synthesis: none;
}

.cetools-page-banner__brand {
  font-family: "Semplicita", sans-serif;
  font-size: 23.63px;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 3.54px;
  padding: 10px;
  margin: 0;
}

.cetools-page-banner__title {
  font-family: "Semplicita", sans-serif;
  font-size: 25.84px;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 5.43px;
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

/* Vertical divider extending from banner into content (Line 12 in Figma) */
.cetools-page-banner::after {
  content: "";
  position: absolute;
  bottom: -67.5px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 135px;
  background-color: #DADADA;
}

/* --------------------------------------------------------------------------
   Banner — image variant (shared by About + Products)
   Figma: Frame 1597881908 has TWO fills:
     fill[0] SOLID #132F6B @ alpha 1   (bottom)
     fill[1] IMAGE @ opacity 0.30      (top, scaleMode FILL)
   CSS reproduction: solid blue from .cetools-page-banner base + bg image
   on a stacked layer at opacity 0.3.
   -------------------------------------------------------------------------- */
.cetools-page-banner--image {
  overflow: hidden;
}

.cetools-page-banner--image .cetools-page-banner__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.30;
  z-index: 0;
}

.cetools-page-banner--image .cetools-page-banner__brand,
.cetools-page-banner--image .cetools-page-banner__heading {
  position: relative;
  z-index: 1;
}

/* Per-page banner image (modifier classes set on the <section>) */
.cetools-page-banner--products .cetools-page-banner__bg {
  background-image: url("../images/products/banner-bg.jpg");
}

.cetools-page-banner--about .cetools-page-banner__bg {
  background-image: url("../images/about/compressed/banner-bg.webp");
}

.cetools-page-banner__heading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
}

.cetools-page-banner__heading .cetools-page-banner__title {
  flex: 0 0 auto;
  padding: 0;
}

.cetools-page-banner__subtitle {
  /* Identical to .cetools-team-card__role per Figma — Semplicità Medium 12/16. */
  font-family: "Semplicita", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #FFFFFF;
  letter-spacing: 1.32px;
  line-height: 16px;
  text-transform: capitalize;
  text-align: center;
  margin: 0;
  max-width: 480px;
}

/* --------------------------------------------------------------------------
   Products Page Body — wrapper with single 1px left divider line
   Figma: Frame 1597881915 (1795×950) has individualStrokeWeights left=1
   only, color #B5B5B5. Same on inner items frame, overlapping at same x.
   -------------------------------------------------------------------------- */
.cetools-products-page {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  border-left: 1px solid #B5B5B5;
}

/* --------------------------------------------------------------------------
   Intro paragraph
   Figma Frame 1597881909 (1795×290): padding T120 / R565 / B30 / L525.
   Inner content text: 705 wide × 140 tall (= 5 lines @ 28 lh).
   Palatino Linotype 400 / 20 / lh 28 / ls 0 / #272727 / textAlign LEFT.
   -------------------------------------------------------------------------- */
.cetools-products-page__intro {
  padding: 120px 565px 30px 525px;
}

.cetools-products-page__intro-text {
  font-family: "Palatino Linotype", Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  color: #272727;
  line-height: 28px;
  letter-spacing: 0;
  margin: 0;
  max-width: 705px;
  text-align: left;
}

/* --------------------------------------------------------------------------
   Products list section (accordion)
   Figma items section: padding T120 / R565 / B120 / L525.
   Items wrapper Frame 1597881954 = 705 wide.
   -------------------------------------------------------------------------- */
.cetools-products-page__list {
  padding: 120px 565px 120px 525px;
}

.cetools-products-accordion {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 705px;
}

/* --------------------------------------------------------------------------
   Accordion item
   Figma component default state: 1045×84 (resized to 705 in page).
   Padding 30 / 20 / 30 / 20. Stroke #B5B5B5 weight 1 align INSIDE.
   - Hand Tools (first): individualStrokeWeights top=1, bottom=1
   - Lighting / Storage / PPE / Seasonal: bottom=1 only
   -------------------------------------------------------------------------- */
.cetools-products-accordion__item {
  border-bottom: 1px solid #B5B5B5;
  /* Padding lives on the header so the full 84px collapsed-state box
     (top border → bottom border) is the click target. */
}

.cetools-products-accordion__item:first-child {
  border-top: 1px solid #B5B5B5;
}

/* --------------------------------------------------------------------------
   Accordion header (title + chevron, space-between)
   Figma Frame 1597881950: 1005×24 HORIZONTAL space-between, items center.
   Title text: Semplicità 500 / 24 / lh 24.21 / ls 0 / #000000.
   Icon frame: 14×14 containing a 13×7 chevron vector.

   Padding 30/20/30/20 in the COLLAPSED state — gives the button a 84px
   clickable hit area matching Figma's component height (30 + 24 + 30 = 84).
   When the panel is open, the bottom 30 collapses to 0 so the gap between
   the title row and the sublist resolves to exactly 20 (= panel-inner's
   top padding, matching Figma's component itemSpacing).
   -------------------------------------------------------------------------- */
.cetools-products-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 30px 20px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cetools-products-accordion__header[aria-expanded="true"] {
  padding-bottom: 0;
}

.cetools-products-accordion__header:focus-visible {
  outline: 2px solid #132F6B;
  outline-offset: 4px;
}

.cetools-products-accordion__title {
  font-family: "Semplicita", sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #000000;
  line-height: 24.216px;       /* Figma exact lineHeightPx */
  letter-spacing: 0;
  display: block;
}

.cetools-products-accordion__icon {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  transition: transform 0.3s ease;
}

.cetools-products-accordion__icon svg {
  display: block;
  width: 14px;
  height: 14px;
}

.cetools-products-accordion__header[aria-expanded="true"] .cetools-products-accordion__icon {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Accordion panel (sublist)
   Figma Frame 1597881964 expanded state contains the sub-categories list.
   Item gap from title row to panel = 20 (component itemSpacing).
   Sublist inner gap = 10.
   Sub item text: Palatino Linotype 400 / 19 / lh 28 / ls 0 / #272727.
   -------------------------------------------------------------------------- */
.cetools-products-accordion__panel {
  overflow: hidden;
  height: 0;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * Panel-inner pad: top 20 = Figma itemSpacing between title row and sublist;
 * bottom 30 = Figma component padding-bottom (the bottom 30px of the item
 * lives below the sublist, NOT below the title row).
 */
.cetools-products-accordion__panel-inner {
  padding: 20px 20px 30px 20px;
}

.cetools-products-accordion__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cetools-products-accordion__subitem {
  font-family: "Palatino Linotype", Georgia, serif;
  font-size: 19px;
  font-weight: 400;
  color: #272727;
  line-height: 28px;
  letter-spacing: 0;
  margin: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1600px) {
  .cetools-products-page__intro {
    padding: 90px 240px 30px 240px;
  }
  .cetools-products-page__list {
    padding: 90px 240px 90px 240px;
  }
}

@media (max-width: 1200px) {
  .cetools-products-page__intro {
    padding: 80px 120px 30px 120px;
  }
  .cetools-products-page__list {
    padding: 80px 120px 80px 120px;
  }
}

@media (max-width: 1024px) {
  /* Inner-page banners are too tall on tablet; cap at 40vh. */
  .cetools-inner-page .cetools-page-banner {
    min-height: 40vh;
  }

  .cetools-products-page__intro {
    padding: 60px 50px 30px 50px;
  }
  .cetools-products-page__list {
    padding: 60px 50px 60px 50px;
  }
  .cetools-products-page__intro-text {
    max-width: none;
  }
  .cetools-products-accordion {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .cetools-products-page__intro {
    padding: 50px 20px 24px 20px;
  }
  .cetools-products-page__list {
    padding: 0 20px 50px 20px;
  }
  .cetools-products-page__intro-text {
    font-size: 16px;
    line-height: 26px;
  }
  .cetools-products-accordion__header {
    padding: 22px 16px;
  }
  .cetools-products-accordion__header[aria-expanded="true"] {
    padding-bottom: 0;
  }
  .cetools-products-accordion__panel-inner {
    padding: 16px 16px 22px 16px;
  }
  .cetools-products-accordion__title {
    font-size: 20px;
  }
  .cetools-products-accordion__subitem {
    font-size: 16px;
    line-height: 24px;
  }

  .cetools-inner-page .cetools-page-banner {
    min-height: 50vh;            /* mobile inner-page banner */
  }
  .cetools-page-banner__brand {
    font-size: 18px;
  }
  .cetools-page-banner__title {
    font-size: 20px;
  }
  .cetools-page-banner::after {
    display: none;
  }
}