/* Base icon & positioning styles for AccessEase storefront button and skip links */

:root {
  --accessease-position-top: 20px;
  --accessease-position-right: 20px;
  --accessease-position-bottom: 20px;
  --accessease-position-left: 20px;
  --accessease-icon-fill-color: #007bff;
  --accessease-icon-stroke-color: #ffffff;
  --accessease-widget-bg: #ffffff;
  --accessease-widget-text: #000000;
  --accessease-widget-button-bg: #007bff;
  --accessease-widget-button-text: #ffffff;
  --accessease-widget-border-color: #e0e0e0;
}

.accessease-widget-bottomright {
  --accessease-icon-top: auto;
  --accessease-icon-right: var(--accessease-position-right);
  --accessease-icon-bottom: var(--accessease-position-bottom);
  --accessease-icon-left: auto;
  --accessease-icon-transform: none;
}

.accessease-widget-bottomleft {
  --accessease-icon-top: auto;
  --accessease-icon-right: auto;
  --accessease-icon-bottom: var(--accessease-position-bottom);
  --accessease-icon-left: var(--accessease-position-left);
  --accessease-icon-transform: none;
}

.accessease-widget-topright {
  --accessease-icon-top: var(--accessease-position-top);
  --accessease-icon-right: var(--accessease-position-right);
  --accessease-icon-bottom: auto;
  --accessease-icon-left: auto;
  --accessease-icon-transform: none;
}

.accessease-widget-topleft {
  --accessease-icon-top: var(--accessease-position-top);
  --accessease-icon-right: auto;
  --accessease-icon-bottom: auto;
  --accessease-icon-left: var(--accessease-position-left);
  --accessease-icon-transform: none;
}

.accessease-widget-centerleft {
  --accessease-icon-top: 50%;
  --accessease-icon-right: auto;
  --accessease-icon-bottom: auto;
  --accessease-icon-left: var(--accessease-position-left);
  --accessease-icon-transform: translateY(-50%);
}

.accessease-widget-centerright {
  --accessease-icon-top: 50%;
  --accessease-icon-right: var(--accessease-position-right);
  --accessease-icon-bottom: auto;
  --accessease-icon-left: auto;
  --accessease-icon-transform: translateY(-50%);
}

.accessease-widget-bottomright.accessease-widget-slide #accessease-widget,
.accessease-widget-topright.accessease-widget-slide #accessease-widget,
.accessease-widget-centerright.accessease-widget-slide #accessease-widget {
  transform: translateX(100%);
}

.accessease-widget-bottomright #accessease-widget,
.accessease-widget-topright #accessease-widget,
.accessease-widget-centerright #accessease-widget {
  bottom: 0px;
  right: 0px;
}

.accessease-widget-bottomleft.accessease-widget-slide #accessease-widget,
.accessease-widget-topleft.accessease-widget-slide #accessease-widget,
.accessease-widget-centerleft.accessease-widget-slide #accessease-widget {
  transform: translateX(-100%);
}

.accessease-widget-bottomleft #accessease-widget,
.accessease-widget-topleft #accessease-widget,
.accessease-widget-centerleft #accessease-widget {
  bottom: 0px;
  left: 0px;
  right: auto;
  top: auto;
}

.accessease-icon-wrapper {
  width: 100%;
  height: 100%;
}

#accessease-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed !important;
  top: var(--accessease-icon-top, auto);
  right: var(--accessease-icon-right, 20px);
  bottom: var(--accessease-icon-bottom, 20px);
  left: var(--accessease-icon-left, auto);
  z-index: 2147483645;
  transition: transform 0.3s ease, scale 0.3s ease;
  transform: var(--accessease-icon-transform, none);
  background: transparent;
  padding: 0px;
  margin: 0px;
  border: none;
  outline: none;
}

.accessease-icon {
  width: 50px;
  height: 50px;
}

.accessease-icon.accessease-icon-large {
  width: 60px;
  height: 60px;
}

.accessease-icon.accessease-icon-small {
  width: 35px;
  height: 35px;
}

.accessease-icon-fill {
  fill: var(--accessease-icon-fill-color);
}

.accessease-icon-stroke {
  fill: var(--accessease-icon-stroke-color);
}

.accessease-icon-wrapper,
.accessease-icon-main {
  stroke: none;
}

/* `scale` rather than `transform`, which would drop the vertical centring of
   the centre-left and centre-right positions while hovered. */
#accessease-icon:hover {
  scale: 1.1;
}

/* The launcher resets the theme's outline above, so it needs its own focus
   ring. Two colours keep it visible on light and dark backgrounds. */
#accessease-icon:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px #000000;
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  #accessease-icon,
  #accessease-widget {
    transition: none !important;
  }

  #accessease-icon:hover {
    scale: 1;
  }
}

.accessease-icon-main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56%;
  height: 56%;
}

.accessease-icon-main .accessease-icon-wrapper {
  stroke: none;
}

.accessease-icon-main.accessease-icon-main--default {
  width: 53%;
  height: 53%;
}

.accessease-icon--solid .accessease-icon-main {
  width: 60%;
  height: 60%;
}

.accessease-icon--main-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Icon active check badge */
.accessease-active-check {
  display: none !important;
  position: absolute;
  right: -3px;
  top: 0px;
  width: 23px !important;
  height: 23px !important;
}

.accessease-icon-small .accessease-active-check {
  top: -4px !important;
  right: -4px !important;
  width: 20px !important;
  height: 20px !important;
}

.accessease-icon-large .accessease-active-check {
  right: 0;
  top: 2px;
}

.accessease-icon.accessease-active .accessease-active-check {
  display: flex !important;
}

.accessease-active-check svg {
  fill: var(--accessease-icon-fill-color) !important;
  stroke: var(--accessease-icon-stroke-color) !important;
}

#accessease-widget {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Loading animation state inside main launcher icon */
.accessease-main-icon--loading svg {
  display: none;
}

.accessease-main-icon--loading {
  width: 25px;
  aspect-ratio: 1;
  display: grid;
  color: var(--accessease-icon-stroke-color, currentColor);
  background: radial-gradient(
    farthest-side,
    currentColor calc(100% - 6px),
    #0000 calc(100% - 3px) 0
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    #0000 calc(100% - 6px),
    #000 calc(100% - 6px)
  );
  border-radius: 50%;
  animation: accesseaseanim 1s infinite linear;
}

.accessease-main-icon--loading::before,
.accessease-main-icon--loading::after {
  content: '';
  grid-area: 1/1;
  background:
    linear-gradient(currentColor 0 0) center,
    linear-gradient(currentColor 0 0) center;
  background-size:
    100% 5px,
    5px 100%;
  background-repeat: no-repeat;
}

.accessease-main-icon--loading::after {
  transform: rotate(45deg);
}

/* Loading animation state inside feature card icons */
.accessease-icon--loading svg {
  display: none;
}

.accessease-icon--loading {
  width: 25px;
  aspect-ratio: 1;
  display: grid;
  color: var(--accessease-widget-button-bg, #007bff);
  background: radial-gradient(
    farthest-side,
    currentColor calc(100% - 6px),
    #0000 calc(100% - 3px) 0
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    #0000 calc(100% - 6px),
    #000 calc(100% - 6px)
  );
  border-radius: 50%;
  animation: accesseaseanim 1s infinite linear;
}

.accessease-icon--loading::before,
.accessease-icon--loading::after {
  content: '';
  grid-area: 1/1;
  background:
    linear-gradient(currentColor 0 0) center,
    linear-gradient(currentColor 0 0) center;
  background-size:
    100% 5px,
    5px 100%;
  background-repeat: no-repeat;
}

.accessease-icon--loading::after {
  transform: rotate(45deg);
}

@keyframes accesseaseanim {
  100% {
    transform: rotate(1turn);
  }
}

.accessease-icon::before {
  content: '';
}

/* Skip link buttons */
#accessibility-skip-button {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

#accessibility-skip-button:focus {
  position: fixed;
  height: auto;
  width: auto;
  padding: 10px;
  top: 5px;
  left: 5px;
  z-index: 1001;
  background-color: black;
  color: white;
  padding: 10px;
  border-radius: 6px;
  clip-path: none;
  clip: auto;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.accessease-skip-button-icon {
  margin-left: 10px;
  border: 1px solid;
  padding: 3px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}

.accessez-skip-links-container {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 10000;
}

.accessez-skip-link {
  position: fixed !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  word-wrap: normal !important;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  font-family: system-ui, sans-serif;
  text-decoration: none;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1.4;
}

.accessez-skip-link:focus {
  clip: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 8px;
  padding: 12px 16px;
  left: 12px;
  top: 10px;
  outline-offset: 2px;
  position: relative !important;
}

.accessez-accessibility-skip-button {
  margin: 0px !important;
}


/* Cart controls match the product Add to Cart button (forest green). */
body:has(.c-header) #cart-icon-bubble .c-cart-count,
body:has(.c-header) #cart-icon-bubble .cart-count-bubble,
body:has(.c-header) [data-shc3-cart-count] {
  background: #173b2d !important;
  color: #fff !important;
}
body:has(.c-header) cart-drawer .drawer__footer .button,
body:has(.c-header) cart-drawer .drawer__footer .button--primary,
body:has(.c-header) #CartDrawer .drawer__footer .button,
body:has(.c-header) #CartDrawer .drawer__footer .button--primary,
body:has(.c-header) .cart-drawer .drawer__footer .button {
  background: #173b2d !important;
  border-color: #173b2d !important;
  color: #fff !important;
}
body:has(.c-header) cart-drawer .drawer__footer .button:hover,
body:has(.c-header) #CartDrawer .drawer__footer .button:hover,
body:has(.c-header) .cart-drawer .drawer__footer .button:hover {
  background: #234d3b !important;
  border-color: #234d3b !important;
}