/*
Theme Name: Callies
Theme URI: https://www.splust.com/
Author: Stephenson & Taylor
Version: 1.0.0
Requires at least: 6.8
Tested up to: 6.9
Text Domain: callies
*/

/* 
===========================================================
Global
===========================================================
*/

html {
  scroll-behavior: smooth;
}

html * {
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;

  &.noScroll {
    /* prevent the page from being scrolled while the mobile nav is open */
    overflow: hidden;
  }
}

/* Visually hidden, still read by screen readers. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 
===========================================================
Viewport Breakpoints
===========================================================
*/

/*
  NOTE: These custom properties are the single source of truth for breakpoints,
  but CSS variables CANNOT be used inside @media conditions (the spec resolves
  media queries before var() substitution). In @media rules, use the literal
  px value below and reference the token name in a comment, e.g.:

  @media (min-width: 1024px) { ... }  // --mediumVw

  Keep these literals in sync with the values here.

  --xxSmallVw   480px
  --xSmallVw    640px
  --smallVw     768px
  --mediumVw   1024px
  --largeVw    1280px
  --xLargeVw   1536px
  --xxLargeVw  1920px
*/

:root {
  --xxSmallVw: 480px;
  --xSmallVw: 640px;
  --smallVw: 768px;
  --mediumVw: 1024px;
  --largeVw: 1280px;
  --xLargeVw: 1536px;
  --xxLargeVw: 1920px;
}

/* 
===========================================================
Scaffolding
===========================================================
*/

.module {
  &.moduleBackgroundColorWhite { background-color: var(--white); }
  &.moduleBackgroundColorGrey { background-color: var(--grey); }

  &.moduleBorderTop { border-top: 2px solid var(--white);}
  &.moduleBorderBottom { border-bottom: 2px solid var(--white);}
}

:root {
  --innerWrapperMax: 1600px;
}

.innerWrapper {
  width: 100%;
  max-width: var(--innerWrapperMax);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;

  &.module {
    padding: min(7vw, 75px) min(5vw, 25px);

    &.modulePaddingNone { padding: 0 min(5vw, 50px); }
    &.modulePaddingTopOnly { padding: min(10vw, 100px) min(5vw, 50px) 0 min(5vw, 50px); }
    &.modulePaddingBottomOnly { padding: 0 min(5vw, 50px) min(10vw, 100px) min(5vw, 50px); }
  }
}

/* 
===========================================================
Arrangement
===========================================================
*/

:root {
  --arrangeFront: 3;
  --arrangeMiddle: 2;
  --arrangeBack: 1;
}

/* 
===========================================================
Transitions
===========================================================
*/

:root {
  --transitionLinearSlow: cubic-bezier(0.65,0.05,0.36,1) 0.5s;
  --transitionLinear: cubic-bezier(0.65,0.05,0.36,1) 0.25s;
  --transitionLinearFast: cubic-bezier(0.65,0.05,0.36,1) 0.15s;

  --transitionExpoSlow: cubic-bezier(0.65,0.05,0.36,1) 0.5s;
  --transitionExpo: cubic-bezier(0.65,0.05,0.36,1) 0.25s;
  --transitionExpoFast: cubic-bezier(0.65,0.05,0.36,1) 0.15s;
}

/* 
===========================================================
Colors
===========================================================
*/

:root {
  --white: #FFFFFF;
  --black: #000000;
  --accentBlack: #2C2C2C;
  --grey: #F6F6F6;
  --dGrey: #E7E7E7;
  --xdGrey: #111111;
  --yellow: #F3C918;
}

.colorWhite  { color: var(--white); }
.colorBlack  { color: var(--black); }
.colorGrey   { color: var(--grey); }
.colorYellow { color: var(--yellow); }

.bgWhite  { background-color: var(--white); }
.bgBlack  { background-color: var(--black); }
.bgGrey   { background-color: var(--grey); }
.bgYellow { background-color: var(--yellow); }

/* 
===========================================================
Responsive Font Sizes
===========================================================
*/

:root {
  --h1min: 35px; --h1max: 60px;
  --h2min: 30px; --h2max: 40px;
  --h3min: 25px; --h3max: 30px;
  --h4min: 20px; --h4max: 20px;
  --h5min: 18px; --h5max: 18px;
  --h6min: 16px; --h6max: 16px;
}

/* Responsive font sizing is based on a min viewport size of 500px and max viewport size of 1920px. */

h1 { font-size: clamp(var(--h1min), calc(26.20px + 1.76vw), var(--h1max)); }
h2 { font-size: clamp(var(--h2min), calc(26.48px + 0.70vw), var(--h2max)); }
h3 { font-size: clamp(var(--h3min), calc(23.24px + 0.35vw), var(--h3max)); }
h4 { font-size: var(--h4min); } /* min == max, no scaling */
h5 { font-size: var(--h5min); } /* min == max, no scaling */
h6 { font-size: var(--h6min); } /* min == max, no scaling */

/* 
===========================================================
Fonts
===========================================================
*/

:root {
  --fontMontserrat: 'Montserrat', sans-serif;
  --fontOpenSans: 'Open Sans', sans-serif;
}

.fontMontserrat { font-family: 'Montserrat', sans-serif; }
.fontOpenSans { font-family: 'Open Sans', sans-serif; }

h1, h2, h3, h4, h5, h6 {
  color: var(--holtBlue);
  font-family: 'Montserrat', sans-serif;
  line-height: 1em;
  text-transform: uppercase;
  font-style: italic;
  font-weight: 800;
  margin-top: 0;
  margin-bottom: 15px;
}

p {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.5em;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 15px;
}

.uppercase { text-transform: uppercase; }
.titlecase { text-transform: capitalize; }

.fontWeight100 { font-weight: 100; }
.fontWeight200 { font-weight: 200; }
.fontWeight300 { font-weight: 300; }
.fontWeight400 { font-weight: 400; }
.fontWeight500 { font-weight: 500; }
.fontWeight600 { font-weight: 600; }
.fontWeight700 { font-weight: 700; }
.fontWeight800 { font-weight: 800; }
.fontWeight900 { font-weight: 300; }

.h1FontSize { font-size: clamp(var(--h1min), calc(26.20px + 1.76vw), var(--h1max)); }
.h2FontSize { font-size: clamp(var(--h2min), calc(26.48px + 0.70vw), var(--h2max)); }
.h3FontSize { font-size: clamp(var(--h3min), calc(23.24px + 0.35vw), var(--h3max)); }
.h4FontSize { font-size: var(--h4min); } /* min == max, no scaling */
.h5FontSize { font-size: var(--h5min); } /* min == max, no scaling */
.h6FontSize { font-size: var(--h6min); } /* min == max, no scaling */

/* 
===========================================================
Images
===========================================================
*/

img {
  display: block;
  max-width: 100%;

  &.heightFull { height: 100%; }
  &.widthFull { width: 100%; }
  &.objectFitContain { object-fit: contain; }
  &.objectFitCover { object-fit: cover; }
  &.objectPositionTopLeft { object-position: top left; }
  &.objectPositionTopCenter { object-position: top center; }
  &.objectPositionTopRight { object-position: top right; }
  &.objectPositionCenterLeft { object-position: center left; }
  &.objectPositionCenterCenter { object-position: center center; }
  &.objectPositionCenterRight { object-position: center right; }
  &.objectPositionBottomLeft { object-position: bottom left; }
  &.objectPositionBottomCenter { object-position: bottom center; }
  &.objectPositionBottomRight { object-position: bottom right; }
}

/* 
===========================================================
Button Group
===========================================================
*/

.btnGroup {
  margin-top: 25px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;

  &.noMarginTop { margin-top: 0px; }
  &.extraMarginTop { margin-top: 35px; }
}

/* 
===========================================================
Callout
===========================================================
*/

.callout {
  display: block;
  margin: 25px 0 !important;
  padding: 35px;
}

/* 
===========================================================
Forms
===========================================================
*/

:root {
  --fieldBackground: var(--white);
  --fieldColor: var(--black);
  --fieldBorderColor: var(--black);
  --fieldPaddingY: 10px;
  --fieldPaddingX: 10px;
  --fieldArrowWidth: 14px;
  --fieldGapY: 25px;
  --fieldGapX: 2%;
  --fieldArrowBlack: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M13 1.00011C13 1.00011 8.5811 7.00006 7 7.00006C5.4188 7.00006 1 1.00006 1 1.00006' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --fieldArrowYellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M13 1.00011C13 1.00011 8.5811 7.00006 7 7.00006C5.4188 7.00006 1 1.00006 1 1.00006' stroke='%23F3C918' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --fieldArrow: var(--fieldArrowBlack);
}

form {
  font-family: var(--fontOpenSans);
  color: var(--fieldColor);

  fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
  }

  legend,
  label {
    display: block;
    font-family: var(--fontOpenSans);
    font-weight: 600;
    color: var(--fieldColor);
    margin-bottom: 5px;
  }

  input,
  textarea,
  select {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    max-width: 100%;
    padding: var(--fieldPaddingY) var(--fieldPaddingX);
    border: 2px solid var(--fieldBorderColor);
    border-radius: 0;
    background-color: var(--fieldBackground);
    color: var(--fieldColor);
    font-family: var(--fontOpenSans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;

    &::placeholder {
      color: var(--fieldColor);
      opacity: 1;
    }

    &:focus-visible {
      outline: 2px solid var(--yellow);
      outline-offset: 0;
    }

    &:disabled,
    &[readonly] {
      background-color: var(--dGrey);
      cursor: not-allowed;
    }
  }

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill,
  select:-webkit-autofill {
    -webkit-text-fill-color: var(--fieldColor);
    -webkit-box-shadow: 0 0 0 1000px var(--fieldBackground) inset;
  }

  textarea {
    display: block;
    min-height: 150px;
    resize: vertical;
  }

  select {
    width: auto;
    background-image: var(--fieldArrow);
    background-repeat: no-repeat;
    background-position: right var(--fieldPaddingX) center;
    padding-right: calc(var(--fieldPaddingX) * 2 + var(--fieldArrowWidth));
    text-overflow: ellipsis;
    cursor: pointer;
  }

  select.widthFull { width: 100%; }

  input[type="checkbox"],
  input[type="radio"] {
    -webkit-appearance: auto;
    appearance: auto;
    width: auto;
    padding: 0;
    accent-color: var(--yellow);
    cursor: pointer;
  }

  input[type="file"] {
    padding: calc(var(--fieldPaddingY) - 5px) var(--fieldPaddingX);
    cursor: pointer;
  }

  /* .btn is excluded so the shared button styling below is not outgunned by
     these (higher specificity) field selectors. */
  input[type="submit"]:not(.btn),
  button:not(.btn) {
    width: auto;
    cursor: pointer;
  }

  input[type="checkbox"] + label,
  input[type="radio"] + label {
    display: inline-block;
    font-weight: 400;
    margin: 0 0 0 7px;
  }
}

.formFieldsGrey form { --fieldBackground: var(--grey); }

.formFieldsArrowYellow form { --fieldArrow: var(--fieldArrowYellow); }

.formFieldsBordered form {
  input,
  textarea,
  select { border: 2px solid var(--black); }
}

/*
===========================================================
Gravity Forms
===========================================================
*/

.gform_wrapper.gform_wrapper.gravity-theme.gravity-theme {
  .gform_fields { gap: var(--fieldGapY) var(--fieldGapX); }

  input,
  textarea,
  select {
    -webkit-appearance: none;
    appearance: none;
    padding: var(--fieldPaddingY) var(--fieldPaddingX);
    border: 2px solid var(--fieldBorderColor);
    border-radius: 0;
    background-color: var(--fieldBackground);
    color: var(--fieldColor);
    font-family: var(--fontOpenSans);
    font-size: 16px;
    line-height: 1.5em;
  }

  select {
    width: auto;
    background-image: var(--fieldArrow);
    background-repeat: no-repeat;
    background-position: right var(--fieldPaddingX) center;
    padding-right: calc(var(--fieldPaddingX) * 2 + var(--fieldArrowWidth));
  }

  textarea { padding: var(--fieldPaddingY) var(--fieldPaddingX); }

  /* GF's blanket padding hits these too, collapsing the native control. */
  input[type="checkbox"],
  input[type="radio"] {
    -webkit-appearance: auto;
    appearance: auto;
    width: auto;
    padding: 0;
    accent-color: var(--yellow);
  }

  .gfield_label {
    font-family: var(--fontOpenSans);
    font-weight: 600;
    color: var(--fieldColor);
  }

  /* The submit button is rebuilt as a theme .btn in functions.php
     (gform_submit_button), so all that's left here is laying the footer out
     and keeping the ajax spinner beside it rather than under it. */
  .gform_footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    padding: 0;
    margin: var(--fieldGapY) 0 0;
  }

  .gform_footer .btn { width: auto; }

  .gform_ajax_spinner { margin: 0; }

  .gf_progressbar_blue {
    background: var(--black) !important;
  }

  .gf_progressbar_percentage.percentbar_blue {
      background-color: var(--yellow) !important;
      color: var(--black) !important;

      span {
        font-size: 16px;
        font-weight: 700;
      }
  }
}

/*
===========================================================
Buttons
===========================================================
*/

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 15px 25px;
  transition: all var(--transitionLinear);
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  text-transform: uppercase;
  font-weight: 600;

  /* .btn is worn by anchors (parts/button/button.php) and by <button>/submit
     elements (the Gravity Forms submit, dealerSearch, etc.). Buttons carry UA
     styling anchors don't — a native border, a 13px system font, centred text
     — so it is reset here and the two render identically. The transparent
     border keeps a bare .btn the same size as a .solid/.outlined one. */
  -webkit-appearance: none;
  appearance: none;
  width: auto;
  max-width: 100%;
  margin: 0;
  border: 2px solid transparent;
  border-radius: 0;
  background-color: transparent;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: center;
  cursor: pointer;

  &:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
  }

  &.solid {
    &.white {
      color: var(--black);
      background-color: var(--white);
      border: 2px solid var(--white);
    }

    &.black {
      color: var(--white);
      background-color: var(--black);
      border: 2px solid var(--black);
    }

    &.yellow {
      color: var(--black);
      background-color: var(--yellow);
      border: 2px solid var(--yellow);
    }

    &:hover {
      &.hoverWhite {
        color: var(--black);
        background-color: var(--white);
        border: 2px solid var(--white);
      }

      &.hoverBlack {
        color: var(--white);
        background-color: var(--black);
        border: 2px solid var(--black);
      }

      &.hoverYellow {
        color: var(--black);
        background-color: var(--yellow);
        border: 2px solid var(--yellow);
      }
    }
  }

  &.outlined {
    &.white {
      color: var(--white);
      background-color: transparent;
      border: 2px solid var(--white);
    }

    &.black {
      color: var(--black);
      background-color: transparent;
      border: 2px solid var(--black);
    }

    &.yellow {
      color: var(--yellow);
      background-color: transparent;
      border: 2px solid var(--yellow);
    }

    &:hover {
      &.hoverWhite {
        color: var(--black);
        background-color: var(--white);
        border: 2px solid var(--white);
      }

      &.hoverBlack {
        color: var(--white);
        background-color: var(--black);
        border: 2px solid var(--black);
      }

      &.hoverYellow {
        color: var(--black);
        background-color: var(--yellow);
        border: 2px solid var(--yellow);
      }
    }
  }

  .btn-text {
    display: block;
    position: relative;
    transition: all var(--transitionLinear);
    left: 0;
  }

  .arrows {
    display: inline-flex;
    align-items: center;

    .arrow {
      stroke: var(--arrowColor, var(--yellow));
      opacity: var(--arrowOpacity);
      transition: stroke var(--transitionLinear), opacity var(--transitionLinear);

      &.one { --arrowOpacity: 0.25; }
      &.two { --arrowOpacity: 0.5; }
      &.three { --arrowOpacity: 1; }
    }
  }

  &.arrowsYellow { --arrowColor: var(--yellow); }
  &.arrowsBlack { --arrowColor: var(--black); }
  &.arrowsWhite { --arrowColor: var(--white); }
  &.arrowsNone { .arrows { display: none; } }

  &:hover {
    &.arrowsHoverYellow { --arrowColor: var(--yellow); }
    &.arrowsHoverBlack { --arrowColor: var(--black); }
    &.arrowsHoverWhite { --arrowColor: var(--white); }
    &.arrowsHoverNone { .arrows { display: none; } }

    .arrow {
      animation: arrowFadeIn 0.5s ease-in-out both;

      &.two { animation-delay: 0.20s; }
      &.three { animation-delay: 0.30s; }
    }
  }
}

/* Smaller .btn for tight spots: table rows, toolbars. */
.btn.btnCompact {
  gap: 8px;
  padding: 8px 14px;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;

  .arrows svg { width: 20px; height: 12px; }
}

@keyframes arrowFadeIn {
  from { opacity: 0; }
  to { opacity: var(--arrowOpacity); }
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover .arrow { animation: none; }
}

/* 
===========================================================
Header
===========================================================
*/

.header {
  position: relative;
  z-index: calc(var(--arrangeFront) + 3);
  color: var(--white);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.35);

  .top,
  .bottom {
    display: flex;
    align-items: center;

    .innerWrapper {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 min(5vw, 25px);
    }
  }

  .top {
    background-color: var(--black);
    padding: min(5vw, 25px) 0;

    .left,
    .right {
      position: relative;
    }

    .left {
      display: flex;
      align-items: center;
      gap: 25px;

      .logo {
        img {
          max-width: 130px;
        }
      }

      .nav {
        display: none;

        @media(min-width: 1024px) {
          display: block;
        }

        ul {
          display: flex;
          align-items: center;
          gap: 25px;
          list-style: none;
          margin: 0;
          padding: 0;

          li {
            a {
              display: flex;
              align-items: center;
              gap: 10px;
              text-decoration: none;
              color: var(--white);
              transition: all var(--transitionExpoFast);

              &:hover {
                color: var(--yellow);
              }

              .menuItemLabel {
                font-family: var(--fontMontserrat);
                font-weight: 600;
                font-style: italic;
                text-transform: uppercase;
              }

              .menuItemArrow {
                position: relative;
                display: flex;
                transition: transform var(--transitionLinear);
              }

              &.navTrigger {
                cursor: pointer;

                &.isOpen .menuItemArrow {
                  transform: rotate(180deg);
                }
              }
            }
          }
        }
      }
    }

    .right {
      display: flex;
      align-items: center;
      gap: 25px;

      .hamburger,
      .search {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0;
        font: inherit;
        color: inherit;
        background: none;
        border: 0;
        cursor: pointer;

        @media(min-width: 1024px) {
          display: none;
        }
      }

      .dealerLogin,
      .cart {
        display: none;

        @media(min-width: 1024px) {
          display: flex;
          align-items: center;
          gap: 10px;
        }

        &:hover {
          cursor: pointer;
        }

        .icon {
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
        }
      }

      .dealerLogin {
        .label {
          font-family: var(--fontMontserrat);
          font-weight: 600;
          font-size: 15px;
          font-style: italic;
          text-transform: uppercase;
        }
      }

      .cart {
        color: inherit;
        text-decoration: none;

        .count {
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: var(--yellow);
          border: 1px solid var(--white);
          box-sizing: border-box;
          min-width: 1.75em;
          min-height: 1.75em;
          padding: 0 0.4em;
          border-radius: 999px;

          .number {
            display: block;
            color: var(--black);
            line-height: 1;
          }
        }
      }
    }
  }

  .bottom {
    background-color: var(--yellow);
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: all cubic-bezier(0.65,0.05,0.36,1) 0.5s;

    &.active { max-height: 900px; }

    @media(min-width: 1024px) {
      padding: min(5vw, 10px) 0;
      max-height: none;
    }

    .innerWrapper {
      padding-top: min(5vw, 25px);
      padding-bottom: min(5vw, 25px);

      @media(min-width: 1024px) {
        padding-top: 0;
        padding-bottom: 0;
      }

      .globalSearch {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;

        @media(min-width: 1024px) {
          flex-direction: row;
        }

        input,
        select {
          width: auto;
          font-weight: 500;
          border: 2px solid var(--black);
          padding: 10px;
          font-size: 14px;

          &::placeholder {
            color: var(--black);
            font-weight: 500;
          }

          &.searchTerm {
            flex-grow: 1;
            min-width: 0;
          }
        }

        select {
          flex-shrink: 0;
          padding-right: calc(10px * 2 + var(--fieldArrowWidth));
        }

        button,
        a.btn {
          border: 2px solid var(--black);
          padding: 10px;
          transition: all var(--transitionLinear);
          font-family: 'Montserrat', sans-serif;
          font-size: 14px;
          font-style: italic;
          text-transform: uppercase;
          font-weight: 500;

          @media(min-width: 1280px){
            padding: 10px 10px 10px 17px;
          }

          &.search,
          &.reset {
            justify-content: center;

            span {
              display: inline-block;

              @media(min-width: 1024px){
                display: none
              }

              @media(min-width: 1280px){
                display: inline-block;
              }
            }
          }

          &.search {
            color: var(--yellow);
            background-color: var(--black);
          }

          &.reset {
            color: var(--black);
            background-color: var(--yellow);
          }
        }
      }
    }
  }
}

/* 
===========================================================
Footer
===========================================================
*/

.footer {
  position: relative;
  color: var(--white);
  background-color: var(--black);
  padding: min(5vw, 50px);

  @media(min-width: 1280px) {
  padding: 0 min(5vw, 50px);
  }

  .innerWrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 35px;

    @media(min-width: 1280px) {
      flex-direction: row;
    }

    .verticalDivider {
      width: 2px;
      background-color: var(--accentBlack);
      display: none;

      @media(min-width: 1280px) {
        display: block;
      }
    }

    .left,
    .center,
    .right {
      @media(min-width: 1280px) {
        padding: min(5vw, 50px) 0;
      }
    }

    .left {
      .logo {
        img {
          max-width: 250px;
        }
      }

      .locations {
        border-top: 2px solid var(--white);
        border-bottom: 2px solid var(--white);
        padding: 15px 0;
        margin: 15px 0;

        ul {
          display: flex;
          flex-direction: column;
          gap: 10px;
          list-style: none;
          padding: 0;
          margin: 0;

          li {
            white-space: wrap;
            font-size: 15px;

            @media(min-width: 768px) {
              white-space: nowrap;
            }

          .locationName {
            color: var(--yellow);
              font-family: var(--fontMontserrat);
              font-weight: 600;
              text-transform: uppercase;
              font-style: italic;
          }

          .locationLink {
            white-space: nowrap;
            text-decoration: none;
            color: var(--white);
            }
          }
        }
      }

      .legal {
        position: relative;
      }
    }

    .center {
      display: flex;
      flex-direction: column;
      gap: 35px;

      .contactQuickLinks {
        ul {
          display: flex;
          flex-direction: column;
          gap: 10px;
          list-style: none;
          padding: 0;
          margin: 0;

          li {
            display: flex;
            gap: 7px;
            align-items: center;
            font-size: 15px;

            .label {
              color: var(--yellow);
              font-family: var(--fontMontserrat);
              font-weight: 600;
              text-transform: uppercase;
              font-style: italic;
            }

            .link {
              white-space: nowrap;
              text-decoration: none;
              color: var(--white);
              transition: all var(--transitionExpoFast);

              &:hover {
                color: var(--yellow);
              }
            }
          }
        }
      }

      .socialPlatforms {
        ul {
          display: flex;
          gap: 15px;
          list-style: none;
          margin: 0;
          padding: 0;

          li {
            img {
              position: relative;
              top: 0;
              transition: all var(--transitionExpoFast);
            }

            &:hover {
              img {
                top: -5px;
              }
            }
          }
        }
      }
    }

    .right {
      display: flex;
      flex-direction: column;
      gap: 35px;

      @media(min-width: 768px) {
        flex-direction: row;
        flex-wrap: wrap;
      }

      .menuGroup {
        .title {
          color: var(--yellow);
          font-family: var(--fontMontserrat);
          font-weight: 600;
          text-transform: uppercase;
          font-style: italic;
          border-bottom: 2px solid var(--yellow);
          margin: 0 0 10px 0;
          padding-bottom: 10px;
        }

        ul {
          display: flex;
          flex-direction: column;
          gap: 5px;
          list-style: none;
          padding: 0;
          margin: 0;

          li {
            a {
              color: var(--white);
              font-size: 15px;
              transition: all var(--transitionExpoFast);
              padding-left: 0px;
              padding-right: 5px;
              text-decoration: none;

              &:hover {
                padding-left: 5px;
                padding-right: 0px;
                color: var(--yellow);
              }
            }
          }
        }
      }
    }
  }
}

/* 
===========================================================
Product (List)
===========================================================
*/

.productsList {
  .productListHero {
    position: relative;

    .innerWrapper {
      flex-direction: row;
      align-items: stretch;
      max-width: none;
      padding: 0;

      .left { width: 25%; }
      .right { width: calc(75% + 1px); }

      .left {
        position: relative;
        display: flex;
        justify-content: flex-end;
        align-items: stretch;
        padding: 0;

        .slice {
          position: relative;
          z-index: var(--arrangeFront);
          width: 2.5vw;
          --slant: 2.5vw;
          clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
          background-color: var(--yellow);
        }

        .overlay {
          position: absolute;
          z-index: var(--arrangeMiddle);
          background: linear-gradient(270deg, var(--Black, rgba(0, 0, 0, 0.75)) 0%, rgba(0, 0, 0, 0.00) 100%);
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }

        img {
          position: absolute;
          z-index: var(--arrangeBack);
          top: 0;
          left:0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .right {
        --blockPadding: min(7vw, 75px);
        --gutter: min(5vw, 25px);
        padding: var(--blockPadding) var(--gutter) var(--blockPadding) var(--blockPadding);
        background-color: var(--yellow);

        .content {
          max-width: none;

          h1 {
            font-size: clamp(var(--h2min), calc(26.48px + 0.70vw), var(--h2max));
          }

          .currentFilters {
            display: flex;
            align-items: center;
            gap: 10px;

            .filter {
              display: flex;
              align-items: center;
              border: 2px solid var(--black);
              padding: 5px 7px 5px 12px;

              .filterName {
                font-weight: 600;
                text-transform: uppercase;
                font-family: var(--fontMontserrat);
                font-style: italic;
              }
            }
          }
        }
      }
    }
  }

  .productsListViewControls {
    display: flex;
    justify-content: center;
    background-color: var(--grey);

    .innerContent {
      display: flex;
      justify-content: space-between;
      width: 100%;
      max-width: var(--innerWrapperMax);
      padding: 0 min(5vw, 25px);

      .left,
      .right {
        p {
          margin: 0;
        }
      }

      .left {
        display: flex;
        align-items: center;
      }

      .right {
        display: flex;
        gap: 15px;

        .sortBy {
          display: flex;
          align-items: center;

          .currentSort {
            font-weight: 700;
          }
        }

        .viewType {
          display: flex;
          gap: 5px;

          .type {
            padding: 10px;
            background: none;
            border: 0;
            border-bottom: 3px solid transparent;
            border-radius: 0;
            color: inherit;
            transition: var(--transitionExpo);

            &:hover {
              cursor: pointer;
              border-bottom: 3px solid var(--xdGrey);
            }

            &.grid,
            &.list {
              transition: var(--transitionExpo);

              &.active {
                border-bottom: 3px solid var(--yellow);
              }

              svg {
                display: block;
              }
            }
          }
        }
      }
    }
  }

  .productsListContent {
    padding: min(7vw, 75px) min(5vw, 25px);

    .products {
      width: 100%;
      padding: 0 min(5vw, 25px);

      &.gridView {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        column-gap: 2.5vw;
        row-gap: 2.5vw;

        @media (min-width: 640px) { grid-template-columns: repeat(2, 1fr); }
        @media (min-width: 1024px) { grid-template-columns: repeat(3, 1fr); }
        @media (min-width: 1280px) { grid-template-columns: repeat(4, 1fr); }
      }

      &.listView {
        display: flex;
        flex-direction: column;
        gap: 25px;

        @media (min-width: 640px) {
          .product {
            flex-direction: row;
            text-align: left;
            gap: 25px;

            .productThumbnail {
              flex: 0 0 150px;
            }

            .productName {
              flex: 1 1 auto;
              margin: 0;
            }

            .productButtons {
              flex-direction: column;
              flex: 0 0 auto;
              flex-wrap: nowrap;
              width: auto;
              margin-top: 0;
              padding-top: 0;
              gap: 10px;

              .btn {
                width: auto;
              }
            }
          }
        }
      }
    }

    .product {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 0;
      text-align: center;
      padding: 25px;
      border: 2px solid var(--dGrey);

      .productThumbnail {
        width: 100%;
        aspect-ratio: 1 / 1;
        background-color: var(--grey);

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .productName {
        margin: 25px 0;
        font-size: var(--h4min);
        font-family: var(--fontOpenSans);
        font-weight: 700;
        font-style: normal;
        text-transform: none;
      }

      .productButtons {
        justify-content: stretch;
        gap: 10px;
        margin-top: auto;
        padding-top: 20px;
        width: 100%;

        .btn {
          width: 100%;
          justify-content: space-between;
        }

        .availableForPurchaseDisclaimer {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          gap: 10px;
          padding: 7px 10px;
          background-color: var(--black);
          width: 100%;

          .icon,
          .label {
            display: block;
          }

          .icon {
            height: 20px;
            width: 20px;

            svg {
              display: block;
            }
          }

          .label {
            font-size: 14px;
            color: var(--white);
          }
        }
      }
    }
  }
}

/* Catalog view additions: filters, cards, pagination (catalog-archive.php). */
.productsList {
  transition: opacity var(--transitionLinear);

  &.isLoading {
    opacity: 0.5;
    pointer-events: none;
  }

  .productListHero .innerWrapper .right .content .currentFilters {
    flex-wrap: wrap;
    list-style: none;
    margin: 15px 0 0;
    padding: 0;

    li { margin: 0; }

    .filter {
      gap: 6px;
      color: var(--black);
      text-decoration: none;
      transition: background-color var(--transitionLinear);

      &:hover,
      &:focus-visible {
        background-color: var(--black);
        color: var(--yellow);

        svg path { stroke: var(--yellow); }
      }
    }

    .clearFilters {
      color: var(--black);
      font-weight: 700;
      text-underline-offset: 3px;
    }
  }

  .productsListViewControls .innerContent {
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 5px;
    padding-bottom: 5px;

    .right .sortBy {
      gap: 8px;

      label {
        margin: 0;
        font-weight: 400;
      }

      select {
        -webkit-appearance: none;
        appearance: none;
        border: 0;
        background: transparent var(--fieldArrowBlack) no-repeat right center;
        padding: 5px calc(var(--fieldArrowWidth) + 8px) 5px 0;
        font-family: var(--fontOpenSans);
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;

        &:focus-visible { outline: 2px solid var(--yellow); }
      }
    }
  }

  /* Filter panel */
  .catalogFiltersPanel {
    border-bottom: 2px solid var(--dGrey);

    summary {
      display: flex;
      align-items: center;
      gap: 10px;
      max-width: var(--innerWrapperMax);
      margin: 0 auto;
      padding: 15px min(5vw, 25px);
      list-style: none;
      cursor: pointer;
      font-family: var(--fontMontserrat);
      font-style: italic;
      font-weight: 800;
      text-transform: uppercase;

      &::-webkit-details-marker { display: none; }

      &:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }

      .summaryCount {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.6em;
        height: 1.6em;
        padding: 0 0.4em;
        border-radius: 999px;
        background-color: var(--yellow);
        font-style: normal;
        font-size: 13px;
      }

      svg { transition: transform var(--transitionLinear); }
    }

    &[open] summary svg { transform: rotate(180deg); }

    .innerContent {
      max-width: var(--innerWrapperMax);
      margin: 0 auto;
      padding: 0 min(5vw, 25px) 25px;
    }

    .filterGroups {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 25px;
    }

    .filterGroup {
      min-width: 0;
      margin: 0;
      padding: 0;
      border: 0;

      legend {
        margin-bottom: 10px;
        padding: 0;
        font-family: var(--fontMontserrat);
        font-style: italic;
        font-weight: 800;
        text-transform: uppercase;

        .unit { font-style: normal; font-weight: 600; }
      }
    }

    .filterValues {
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-height: 230px;
      overflow-y: auto;
    }

    .filterOption {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      font-weight: 400;
      cursor: pointer;

      input {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--black);
      }

      .count { color: #555; }

      &:has(input:disabled) {
        opacity: 0.45;
        cursor: default;
      }
    }

    .filterRange {
      display: flex;
      align-items: flex-end;
      gap: 8px;

      label {
        flex: 1;
        margin: 0;
        font-weight: 600;
        font-size: 13px;
      }

      input {
        width: 100%;
        margin-top: 4px;
        padding: 8px;
        border: 2px solid var(--black);
        border-radius: 0;
        font-size: 16px;

        &:focus-visible { outline: 2px solid var(--yellow); outline-offset: 0; }

        /* Placeholders show the lowest/highest available, not a chosen value. */
        &::placeholder { color: #8a8a8a; opacity: 1; }
      }

      .rangeDash { padding-bottom: 10px; }
    }

    .filterActions {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-top: 25px;

      .clearRefine {
        color: var(--black);
        font-weight: 700;
        text-underline-offset: 3px;
      }
    }
  }

  /* Cards */
  .productsListContent .product {
    .productThumbnail { display: block; }

    .productName {
      margin-bottom: 10px;

      a {
        color: inherit;
        text-decoration: none;

        &:hover,
        &:focus-visible { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; }
      }
    }

    .productMeta {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 8px;
      min-height: 24px;
      font-size: 14px;

      .badge {
        padding: 2px 8px;
        background-color: var(--yellow);
        font-family: var(--fontMontserrat);
        font-style: italic;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
      }

      .sizesMatched { color: #555; }
    }
  }

  .productsListContent .products.listView .product .productMeta {
    justify-content: flex-start;
  }

  /* Pagination and empty state */
  .catalogPagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: min(7vw, 50px);

    a,
    span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      height: 44px;
      padding: 0 12px;
      border: 2px solid var(--black);
      color: var(--black);
      font-weight: 700;
      text-decoration: none;
    }

    a:hover,
    a:focus-visible { background-color: var(--yellow); border-color: var(--yellow); }

    .current { background-color: var(--black); color: var(--yellow); }
  }

  .noResults {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
  }
}

/* Sizes toolbar: purchase toggle and filtered sizes (product-single.php). */
.singleProduct {
  .isFilteredOut { display: none !important; }

  .sizeToolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    margin-bottom: min(5vw, 25px);
    scroll-margin-top: 25px;

    p { margin: 0; }

    .sizeFilterChips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;

      &[hidden] { display: none; }

      li {
        padding: 2px 8px;
        border: 2px solid var(--black);
        font-family: var(--fontMontserrat);
        font-style: italic;
        font-weight: 600;
        font-size: 13px;
        text-transform: uppercase;
      }
    }

    .sizeToggle,
    .showAllSizes {
      margin-left: auto;

      &[hidden] { display: none; }

      /* Long label: full width and wrapping on phones. */
      @media (max-width: 639px) { /* below --xSmallVw */
        justify-content: center;
        width: 100%;
        margin-left: 0;
        white-space: normal;
      }
    }
  }
}

/* 
===========================================================
Product (Single)
===========================================================
*/

.singleProduct {
  &.overview,
  &.productGroups {
    position: relative;
    display: flex;
    justify-content: center;

    .innerContent {
      width: 100%;
      max-width: var(--innerWrapperMax);
      padding: min(7vw, 75px) min(5vw, 25px);
    }
  }

  &.overview {
    .innerContent {
      display: flex;
      flex-direction: row;
      gap: min(7vw, 100px);

      /* Phones: images above, name / description / features below. */
      @media (max-width: 767px) { /* below --smallVw */
        flex-direction: column;

        .left { flex-basis: auto; max-width: none; }
      }

      .left {
        display: flex;
        flex-direction: column;
        gap: 12px;
        flex: 0 1 500px;
        width: 100%;
        max-width: 500px;

        .selectedProductImage {
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          width: 100%;
          aspect-ratio: 1/1;
          padding: 4%;
          background-color: var(--white);
          border: 2px solid var(--dGrey);

          img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

        .productImages {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 12px;

          img {
            display: block;
            box-sizing: border-box;
            width: 100%;
            aspect-ratio: 1/1;
            padding: 18%;
            object-fit: contain;
            background-color: var(--white);
            border: 2px solid var(--dGrey);
            cursor: pointer;
            transition: border-color var(--transitionLinearFast);

            &.active {
              border-bottom: 5px solid var(--yellow);
            }
          }
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items:flex-start;
        gap: 25px;
        max-width: 700px;

        .productName {
          h1 {
            font-size: clamp(var(--h2min), calc(26.48px + 0.70vw), var(--h2max));
            font-weight: 800;
          }
        }

        .productDescriptionTitle {
          h2 {
            font-size: var(--h4min);
            font-weight: 700;
          }
        }

        .productDescriptionContent {
          width: 100%;
          max-width: 800px;
        }
      }
    }
  }

  /* Features accordion under the description: same look as the accordion module. */
  &.overview .productAccordion {
    width: 100%;
    max-width: 800px;
    margin-top: min(5vw, 25px);
    border: 2px solid var(--black);

    summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      padding: 20px 25px;
      background-color: var(--grey);
      list-style: none;
      cursor: pointer;
      font-family: var(--fontMontserrat);
      font-style: italic;
      font-weight: 700;
      font-size: 18px;
      text-transform: uppercase;

      &::-webkit-details-marker { display: none; }

      &:focus-visible {
        outline: 2px solid var(--yellow);
        outline-offset: -4px;
      }

      .titleArrow {
        display: inline-flex;
        transition: var(--transitionExpo);
      }
    }

    &[open] summary .titleArrow { transform: rotate(180deg); }

    .content {
      padding: 25px;

      > :last-child { margin-bottom: 0; }

      strong {
        font-family: var(--fontMontserrat);
        font-style: italic;
        font-weight: 800;
        text-transform: uppercase;
      }

      ul {
        margin: 0 0 15px;
        padding-left: 20px;

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

  &.productGroups {
    .innerContent {
      .productGroupsContent {
        width: 100%;
        /* max-width: 700px; */
        margin-bottom: min(5vw, 25px);
      }

      .productGroupsInnerWrapper {
        .productGroup {
          background-color: var(--grey);
          padding: min(7vw, 35px);
          margin-bottom: min(7vw, 35px);

          .productGroupDetails {
            margin-bottom: min(5vw, 25px);

            h2 { font-size: clamp(var(--h3min), calc(23.24px + 0.35vw), var(--h3max)); }
            h3 { font-size: var(--h4min); }
          }

          .product-table-wrap {
            overflow-x: auto;
            font-family: "Open Sans", Arial, sans-serif;
            margin-bottom: min(7vw, 35px);

            &:last-of-type {
              margin-bottom: 0;
            }

            .product-table {
              width: 100%;
              min-width: 760px;
              border-collapse: collapse;
              border: 2px solid #000;
              font-size: 18px;
              color: #000;

              thead th {
                background: #000;
                color: #fff;
                font-weight: 700;
                text-align: left;
                padding: 10px 15px;
                white-space: nowrap;
                vertical-align: bottom;

                /* Long spec names wrap instead of widening the column. The cap
                   sits on an inner span: browsers ignore max-width on cells. */
                &.col-spec {
                  white-space: normal;

                  .thLabel {
                    display: block;
                    max-width: 140px;
                    line-height: 1.25;
                  }
                }
              }

              tbody td {
                padding: 10px 15px;
                border-top: 2px solid #000;
                vertical-align: middle;
                white-space: nowrap;
              }

              tbody tr:nth-child(odd)  { background: #fff; }
              tbody tr:nth-child(even) { background: #f5f5f5; }

              /* Row a WooCommerce link landed on (#sku-…): scroll clear of the
                 top edge and flash yellow so the customer can find their part. */
              tbody tr[id] { scroll-margin-top: 25px; }

              tbody tr:target {
                animation: skuTargetFlash 2.5s ease-out 0.3s both;

                /* No flash: mark the row with a steady yellow edge instead. */
                @media (prefers-reduced-motion: reduce) {
                  animation: none;
                  box-shadow: inset 6px 0 0 var(--yellow);
                }
              }

              .col-price {
                text-align: right;
                width: 1%;
                font-variant-numeric: tabular-nums;
              }

              .col-cart {
                text-align: right;
                width: 1%;
              }


              .price {
                font-weight: 800;
                font-style: italic;
                font-size: 22px;
                vertical-align: middle;
              }

              /* Add to Cart and Contact Us share one width: the column's widest
                 button, and never less than the longer label needs, so they
                 line up across tables too. */
              .col-cart .btn {
                justify-content: space-between;
                width: 100%;
                min-width: 165px;
              }

              .addToCart {
                .cartIcon { flex-shrink: 0; }

                &.loading {
                  opacity: 0.5;
                  pointer-events: none;
                }
              }

              .added_to_cart {
                display: block;
                margin-top: 4px;
                font-size: 12px;
                font-weight: 600;
                text-transform: uppercase;
                white-space: nowrap;
                color: inherit;
              }
            }

            /* Mobile: each row becomes a card. SKU, price and cart on top, specs in a 2-up grid. */
            @media (max-width: 767px) { /* below --smallVw */
              overflow: visible;

              .product-table {
                display: block;
                min-width: 0;
                border: 0;
                font-size: 16px;

                thead {
                  position: absolute;
                  width: 1px;
                  height: 1px;
                  overflow: hidden;
                  clip-path: inset(50%);
                  white-space: nowrap;
                }

                tbody {
                  display: flex;
                  flex-direction: column;
                  gap: 15px;
                }

                tbody tr,
                tbody tr:nth-child(even) {
                  display: grid;
                  grid-template-columns: 1fr 1fr;
                  align-items: center;
                  padding: 0 15px 12px;
                  border: 2px solid #000;
                  background: #fff;
                }

                tbody td {
                  padding: 0;
                  border-top: 0;
                  white-space: normal;
                }

                /* Top line: SKU | price */
                .col-sku,
                .col-price {
                  grid-row: 1;
                  padding: 12px 0;
                  margin-bottom: 4px;
                  border-bottom: 2px solid #000;
                  align-self: stretch;
                  display: flex;
                  align-items: center;
                }

                .col-sku {
                  grid-column: 1;
                  font-weight: 700;
                }

                .col-price {
                  grid-column: 2;
                  justify-content: flex-end;
                  width: auto;
                }

                /* Last in the row, so it lands under the specs, full width. */
                .col-cart {
                  grid-column: 1 / -1;
                  display: flex;
                  flex-direction: column;
                  align-items: stretch;
                  gap: 6px;
                  width: auto;
                  margin-top: 14px;
                  text-align: center;

                  .btn {
                    justify-content: space-between;
                    width: 100%;
                    min-height: 44px;
                  }
                }

                /* Specs: label above value, two per row. Counted among .col-spec only, so column order doesn't matter. */
                .col-spec {
                  padding: 8px 10px 0 0;

                  &:nth-child(odd of .col-spec)  { grid-column: 1; }
                  &:nth-child(even of .col-spec) { grid-column: 2; }

                  &::before {
                    content: attr(data-label);
                    display: block;
                    font-size: 12px;
                    font-weight: 700;
                    text-transform: uppercase;
                    color: #555;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
/*
===========================================================
WooCommerce (Cart / Checkout / My Account)
===========================================================
*/

/*
  Rendered by woocommerce-page.php. The Cart and Checkout pages are WooCommerce
  blocks; My Account is the classic shortcode. Everything is scoped to .wooPage
  so it outranks WooCommerce's own block styles without !important.
*/

.wooPage {
  --wooBorder: 2px solid var(--black);
  --wooRule: 2px solid var(--dGrey);

  .innerWrapper {
    align-items: stretch;
  }

  .wooPageHeader {
    margin-bottom: min(5vw, 35px);
    padding-bottom: 15px;
    border-bottom: 4px solid var(--yellow);

    h1 { margin-bottom: 0; }
  }

  .wooPageContent {
    width: 100%;
    font-family: var(--fontOpenSans);
    color: var(--black);

    a:not(.wc-block-components-button):not(.button) {
      color: inherit;
      text-decoration-color: var(--yellow);
      text-decoration-thickness: 2px;
      text-underline-offset: 3px;
    }

    /* Section titles: Contact information, Shipping address, Order summary, Cart totals... */
    .wc-block-components-title.wc-block-components-title,
    .wc-block-components-checkout-step__title,
    .wc-block-cart__totals-title,
    .wc-block-components-checkout-order-summary__title-text {
      font-family: var(--fontMontserrat);
      font-style: italic;
      font-weight: 800;
      text-transform: uppercase;
    }

    .wc-block-cart-items__header,
    .wc-block-cart__totals-title {
      font-family: var(--fontMontserrat);
      font-style: italic;
      font-weight: 800;
      font-size: 14px;
      text-transform: uppercase;
    }

    .wc-block-cart-items,
    .wc-block-cart-items__row,
    .wc-block-cart-items__header,
    .wc-block-components-totals-wrapper,
    .wc-block-components-panel {
      border-color: var(--dGrey);
      border-width: 2px;
    }

    .wc-block-components-product-name {
      font-weight: 700;
      color: var(--black);
      text-decoration: none;
    }

    .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
    .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
      font-family: var(--fontMontserrat);
      font-style: italic;
      font-weight: 800;
      text-transform: uppercase;
    }

    /* "Available on backorder" and similar badges */
    .wc-block-components-product-badge {
      border: 0;
      border-radius: 0;
      background-color: var(--yellow);
      color: var(--black);
      font-weight: 700;
      font-size: 11px;
      text-transform: uppercase;
      padding: 2px 6px;
    }

    /* Order summary card */
    .wc-block-checkout__sidebar .wc-block-components-order-summary,
    .wc-block-checkout__sidebar.is-sticky,
    .wp-block-woocommerce-checkout-order-summary-block {
      border-radius: 0;
      border-color: var(--black);
      border-width: 2px;
    }

    .wc-block-components-order-summary-item__quantity {
      background-color: var(--black);
      border-color: var(--black);
      color: var(--yellow);
      box-shadow: none;
    }

    /* Fields: square, 2px black, yellow focus ring, same as the theme's forms */
    .wc-block-components-text-input input,
    .wc-block-components-text-input input[type],
    .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
    .wc-blocks-components-select .wc-blocks-components-select__select,
    .wc-block-components-textarea,
    .wc-block-components-quantity-selector,
    .wc-block-components-totals-coupon__input input {
      border: var(--wooBorder);
      border-radius: 0;
      background-color: var(--white);
      color: var(--black);
      font-family: var(--fontOpenSans);
    }

    .wc-block-components-text-input input:focus,
    .wc-block-components-text-input input[type]:focus,
    .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus,
    .wc-blocks-components-select .wc-blocks-components-select__select:focus,
    .wc-block-components-textarea:focus {
      border-color: var(--black);
      box-shadow: none;
      outline: 2px solid var(--yellow);
      outline-offset: 0;
    }

    .wc-block-components-text-input label,
    .wc-blocks-components-select .wc-blocks-components-select__label {
      color: #555;
    }

    .wc-block-components-quantity-selector {
      &::after { display: none; } /* WooCommerce draws its own rounded border here */

      input.wc-block-components-quantity-selector__input {
        font-weight: 700;
      }

      .wc-block-components-quantity-selector__button {
        color: var(--black);
        opacity: 1;

        &:hover,
        &:focus-visible {
          background-color: var(--yellow);
        }
      }
    }

    /* Checkboxes and radios */
    .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
      border: var(--wooBorder);
      border-radius: 0;

      &:checked {
        background-color: var(--yellow);
      }

      &:focus {
        outline: 2px solid var(--yellow);
        outline-offset: 2px;
      }
    }

    .wc-block-components-checkbox .wc-block-components-checkbox__mark {
      fill: var(--black);
    }

    .wc-block-components-radio-control__input {
      border: var(--wooBorder);

      &:checked::before {
        background-color: var(--black);
      }

      &:focus {
        outline: 2px solid var(--yellow);
        outline-offset: 2px;
      }
    }

    .wc-block-components-radio-control--highlight-checked {
      &::after,
      .wc-block-components-radio-control__option--checked-option-highlighted {
        border-radius: 0;
        box-shadow: inset 0 0 0 2px var(--black);
      }

      .wc-block-components-radio-control__option-checked,
      .wc-block-components-radio-control__option--checked-option-highlighted {
        background-color: var(--grey);
      }
    }

    /* Primary actions: Proceed to checkout, Place order, login/register, etc.
       Matches .btn.solid.yellow.hoverBlack. */
    .wc-block-components-button:not(.is-link),
    .wc-block-cart__submit-button,
    .wc-block-components-checkout-place-order-button,
    .woocommerce-button,
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 0;
      padding: 15px 25px;
      border: 2px solid var(--yellow);
      border-radius: 0;
      background-color: var(--yellow);
      color: var(--black);
      font-family: var(--fontMontserrat);
      font-style: italic;
      font-weight: 600;
      font-size: 16px;
      line-height: inherit;
      text-transform: uppercase;
      text-decoration: none;
      box-shadow: none;
      cursor: pointer;
      transition: all var(--transitionLinear);

      &:hover {
        background-color: var(--black);
        border-color: var(--black);
        color: var(--white);
      }

      &:focus-visible {
        outline: 2px solid var(--yellow);
        outline-offset: 2px;
        box-shadow: none;
      }

      &:disabled,
      &[aria-disabled="true"] {
        opacity: 0.5;
        cursor: not-allowed;
      }
    }

    /* Secondary actions (Apply coupon) read as outlined black */
    .wc-block-components-totals-coupon__button.wc-block-components-button:not(.is-link) {
      background-color: transparent;
      border-color: var(--black);

      &:hover {
        background-color: var(--black);
        color: var(--white);
      }
    }

    /* Notices */
    .wc-block-components-notice-banner,
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error {
      border-radius: 0;
      border-width: 2px;
      font-family: var(--fontOpenSans);
    }

    /* My Account (classic shortcode) */
    .woocommerce {
      h2 {
        font-size: clamp(var(--h3min), calc(23.24px + 0.35vw), var(--h3max));
      }

      .woocommerce-form-login,
      .woocommerce-form-register,
      .woocommerce-ResetPassword {
        max-width: 500px;
        margin: 0 0 min(7vw, 35px);
        padding: min(5vw, 35px);
        border: var(--wooBorder);
        border-radius: 0;
      }

      /* WooCommerce's own 1px rounded field style outranks the theme's form rules */
      form .input-text,
      form select {
        border: var(--wooBorder);
        border-radius: 0;
        padding: var(--fieldPaddingY) var(--fieldPaddingX);
        font-size: 16px;

        &:focus {
          outline: 2px solid var(--yellow);
          outline-offset: 0;
        }
      }

      .woocommerce-form-row,
      .form-row {
        margin: 0 0 var(--fieldGapY);
        padding: 0;
      }

      .woocommerce-form__label-for-checkbox {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-weight: 400;
      }

      .woocommerce-MyAccount-navigation ul {
        list-style: none;
        margin: 0 0 min(7vw, 35px);
        padding: 0;
        border: var(--wooBorder);

        li + li { border-top: var(--wooRule); }

        a {
          display: block;
          padding: 12px 15px;
          font-family: var(--fontMontserrat);
          font-style: italic;
          font-weight: 600;
          text-transform: uppercase;
          text-decoration: none;
        }

        .is-active a { background-color: var(--yellow); }
      }
    }
  }
}

@keyframes skuTargetFlash {
  from { background-color: var(--yellow); }
}