/* Portman — icon controls: accent laser traces the control outline on hover/focus */

/* Chrome tokens live in portman-tokens.css (--portman-icon-control-*). */

/* Laser-outlined controls (gallery arrows, close buttons, quantity,
   PhotoSwipe, header icons…). Nested so this selector list is written
   once — the resting look, the conic-gradient laser sweep, its hover
   trigger and the reduced-motion opt-out all live under the same block
   instead of being copy-pasted per rule. */
:is(
    .indicators .button,
    .indicators--small .button,
    .button.button--close,
    .button.button--secondary:is([is='previous-button'], [is='next-button']),
    button.quick-view__button.button--secondary,
    .product__gallery button:is([is='media-lightbox-button'], [is='media-hover-button']),
    .product__gallery-container button:is([is='media-lightbox-button'], [is='media-hover-button']),
    .header__buttons > :is(a, button, shopify-account),
    .quantity__button,
    button.pswp__button,
    :is(.product__preview, .product__media-list) button.play-button,
    :is(video-media, model-media) button.play-button.button--close,
    .portman-floating-rail__top,
    .portman-sticky-pill__btn
  ) {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: var(--portman-icon-control-bg) !important;
  color: rgb(255 255 255) !important;
  box-shadow: inset 0 0 0 1px var(--portman-icon-control-line) !important;
  transition:
    color 0.28s ease,
    box-shadow 0.28s ease,
    opacity 0.28s ease;

  &::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 2px;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    background: conic-gradient(
      from 0deg,
      transparent 0deg 248deg,
      rgb(var(--portman-accent-rgb) / 0.2) 262deg,
      rgb(var(--portman-accent-rgb)) 276deg,
      rgb(255 228 214) 283deg,
      rgb(var(--portman-accent-rgb)) 290deg,
      transparent 304deg,
      transparent 360deg
    ) !important;
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
    transform: rotate(0deg);
  }

  @media screen and (pointer: fine) {
    &:hover:not(:disabled),
    &:focus-visible:not(:disabled) {
      color: rgb(var(--portman-accent-rgb)) !important;
      box-shadow: inset 0 0 0 2px rgb(var(--portman-accent-rgb) / 0.92) !important;
    }

    &:hover:not(:disabled)::before,
    &:focus-visible:not(:disabled)::before {
      animation: portman-laser-trace var(--portman-laser-duration) ease-out forwards;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    &::before {
      animation: none !important;
    }
  }
}

:is(
    .indicators .button,
    .indicators--small .button,
    .button.button--close,
    .button.button--secondary:is([is='previous-button'], [is='next-button']),
    button.quick-view__button.button--secondary,
    .product__gallery button:is([is='media-lightbox-button'], [is='media-hover-button']),
    .product__gallery-container button:is([is='media-lightbox-button'], [is='media-hover-button']),
    .quantity__button,
    button.pswp__button,
    :is(.product__preview, .product__media-list) button.play-button,
    :is(video-media, model-media) button.play-button.button--close,
    .portman-floating-rail__top,
    .portman-sticky-pill__btn
  )
  :is(.btn-text, .icon, svg, .portman-sticky-pill__label, .portman-sticky-pill__icon) {
  position: relative;
  z-index: 5;
}

@keyframes portman-laser-trace {
  0% {
    opacity: 1;
    transform: rotate(0deg);
  }

  88% {
    opacity: 1;
    transform: rotate(360deg);
  }

  100% {
    opacity: 0;
    transform: rotate(360deg);
  }
}

/* Same laser host list, but only the four controls that get a solid
   dark pill fill (instead of the shared translucent background) plus a
   hard color/background swap on hover — gallery arrows, close buttons,
   quick view. Search / account / cart keep their own pill below. */
:is(
    .indicators .button,
    .indicators--small .button,
    .button.button--close,
    .button.button--secondary:is([is='previous-button'], [is='next-button']),
    button.quick-view__button.button--secondary
  ) {
  &::after {
    display: none !important;
    content: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  .btn-fill {
    display: none !important;
  }

  @media screen and (pointer: fine) {
    .js [data-button-hover='standard'] &:hover:not([disabled]),
    .js [data-button-hover='standard'] &:focus-visible:not([disabled]) {
      color: rgb(var(--portman-accent-rgb)) !important;
      background-color: rgb(58 58 58 / 0.96) !important;
    }
  }
}

/* Header icon pills — solid button fill (not glass) so search / cart /
   account / menu stay readable on dimmer laptop panels. */
.header .header__buttons > :is(
    a.search-drawer-button,
    a.cart-drawer-button,
    button.menu-toggle-button,
    button.menu-drawer-button,
    shopify-account
  ) {
  background-color: rgb(var(--color-button-background)) !important;
}

/* Floating ATC pill + back-to-top — shared UI chrome grey. */
.portman-floating-rail__top,
.portman-sticky-pill__btn {
  background-color: rgb(var(--portman-ui-chrome-rgb, 96 96 96)) !important;
  color: rgb(var(--color-button-text, 255 255 255)) !important;
}

/* Gallery arrows: keep visible on hover (theme fades container in) */
.product__gallery-container .indicators .button,
.product--thumbnail .product__media-container .indicators .button {
  opacity: 1;
}

.slider .indicators .button[disabled] {
  opacity: 0.25 !important;
  pointer-events: none;
}

/* Lightbox / zoom controls — square radius from theme */
.product__gallery button:is([is='media-lightbox-button'], [is='media-hover-button']),
.product__gallery-container button:is([is='media-lightbox-button'], [is='media-hover-button']) {
  border-radius: var(--rounded-block, 0);
}

/* Play / close on media */
:is(.product__preview, .product__media-list) button.play-button,
:is(video-media, model-media) button.play-button.button--close {
  border-radius: var(--rounded-full);
}

/* PhotoSwipe */
button.pswp__button {
  border-radius: var(--rounded-full);
}

button.pswp__button .pswp__icn {
  filter: none;
}

.header__buttons > :is(a, button) .icon,
.header__buttons > :is(a, button) svg,
.header__buttons shopify-account .icon,
.header__buttons shopify-account svg {
  position: relative;
  z-index: 5;
}

.header__buttons > :is(a, button) .btn-text,
.header__buttons > :is(a, button) .btn-fill {
  position: relative;
  z-index: 5;
}

/* Header bar: round hit targets (laser orbit matches circle, not square) */
.header__buttons > :is(
    a.search-drawer-button,
    a.cart-drawer-button,
    button.menu-toggle-button,
    button.menu-drawer-button
  ) {
  border-radius: var(--rounded-full);
}

.header__buttons > shopify-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  border-radius: var(--rounded-full);
  overflow: visible;
  vertical-align: middle;
}

.header__buttons shopify-account magnet-element {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: transparent;
  pointer-events: none;
}

.header__buttons shopify-account magnet-element .icon,
.header__buttons shopify-account magnet-element svg {
  position: relative;
  z-index: 5;
  pointer-events: none;
  transition: color 0.28s ease;
}

@media screen and (pointer: fine) {
  /* Shadow part sets its own foreground — host :hover color does not reach
     the slotted account SVG (unlike search/cart <a> icons). */
  .header__buttons > shopify-account:hover::part(signed-out-avatar),
  .header__buttons > shopify-account:focus-visible::part(signed-out-avatar),
  .header__buttons > shopify-account:focus-within::part(signed-out-avatar) {
    color: rgb(var(--portman-accent-rgb)) !important;
  }

  .header__buttons > shopify-account:hover magnet-element :is(.icon, svg),
  .header__buttons > shopify-account:focus-visible magnet-element :is(.icon, svg),
  .header__buttons > shopify-account:focus-within magnet-element :is(.icon, svg) {
    color: rgb(var(--portman-accent-rgb)) !important;
  }

  /* Cart qty badge: bolder digit + header-bar outline on icon hover */
  .header__buttons a.cart-drawer-button:hover cart-count.count,
  .header__buttons a.cart-drawer-button:focus-visible cart-count.count {
    font-weight: 600;
    -webkit-text-stroke: 1.5px rgb(var(--color-background));
    paint-order: stroke fill;
  }
}

.header__buttons a.cart-drawer-button cart-count.count {
  position: absolute;
  z-index: 6;
  font-weight: 500;
  line-height: 1;
  transition:
    font-weight 0.22s ease,
    -webkit-text-stroke 0.22s ease;
}

@media screen and (pointer: fine) {
  .header__buttons a.cart-drawer-button cart-count.count {
    -webkit-text-stroke: 0 transparent;
  }
}

/* Quantity: smaller laser host */
.quantity__button {
  border-radius: var(--rounded-full);
}

/* Quick view (product card eye icon): round hit target, not a flat CTA */
button.quick-view__button.button--secondary {
  border-radius: var(--rounded-full);
}

/* Newsletter submit — solid dark disc + laser */
.newsletter-form .self-submit-button .button {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: var(--portman-icon-control-bg) !important;
  color: rgb(255 255 255) !important;
  box-shadow: inset 0 0 0 1px var(--portman-icon-control-line) !important;
  border-radius: var(--rounded-full);
  transition:
    color 0.28s ease,
    box-shadow 0.28s ease,
    opacity 0.28s ease;

  &::after {
    display: none !important;
    content: none !important;
  }

  &::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 2px;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    background: conic-gradient(
      from 0deg,
      transparent 0deg 248deg,
      rgb(var(--portman-accent-rgb) / 0.2) 262deg,
      rgb(var(--portman-accent-rgb)) 276deg,
      rgb(255 228 214) 283deg,
      rgb(var(--portman-accent-rgb)) 290deg,
      transparent 304deg,
      transparent 360deg
    ) !important;
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
    transform: rotate(0deg);
  }

  & :is(.btn-text, .icon, svg) {
    position: relative;
    z-index: 5;
  }

  @media screen and (pointer: fine) {
    &:hover:not(:disabled),
    &:focus-visible:not(:disabled) {
      color: rgb(var(--portman-accent-rgb)) !important;
      box-shadow: inset 0 0 0 2px rgb(var(--portman-accent-rgb) / 0.92) !important;
    }

    &:hover:not(:disabled)::before,
    &:focus-visible:not(:disabled)::before {
      animation: portman-laser-trace var(--portman-laser-duration) ease-out forwards;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    &::before {
      animation: none !important;
    }
  }
}

.newsletter-form .self-submit-button .button .btn-fill {
  display: none !important;
}

/* Social icons — frosted diffuser glass + laser on hover */
a.social_platform {
  --portman-diffuser-bg: rgb(255 255 255 / 0.08);
  --portman-diffuser-blur: 12px;
  position: relative;
  isolation: isolate;
  overflow: visible;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  border: none !important;
  border-radius: var(--rounded-full);
  color: rgb(255 255 255) !important;
  background-color: var(--portman-diffuser-bg) !important;
  backdrop-filter: blur(var(--portman-diffuser-blur)) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(var(--portman-diffuser-blur)) saturate(1.15) !important;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16) !important;
  transition:
    color 0.28s ease,
    box-shadow 0.28s ease,
    background-color 0.28s ease,
    backdrop-filter 0.28s ease;

  &::after {
    display: none !important;
    content: none !important;
  }

  &::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 2px;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    background: conic-gradient(
      from 0deg,
      transparent 0deg 248deg,
      rgb(var(--portman-accent-rgb) / 0.2) 262deg,
      rgb(var(--portman-accent-rgb)) 276deg,
      rgb(255 228 214) 283deg,
      rgb(var(--portman-accent-rgb)) 290deg,
      transparent 304deg,
      transparent 360deg
    ) !important;
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
    transform: rotate(0deg);
  }

  & :is(.btn-text, .icon, svg) {
    position: relative;
    z-index: 5;
  }

  @media screen and (pointer: fine) {
    &:hover:not(:disabled),
    &:focus-visible:not(:disabled) {
      color: rgb(var(--portman-accent-rgb)) !important;
      background-color: rgb(255 255 255 / 0.12) !important;
      box-shadow: inset 0 0 0 2px rgb(var(--portman-accent-rgb) / 0.92) !important;
    }

    &:hover:not(:disabled)::before,
    &:focus-visible:not(:disabled)::before {
      animation: portman-laser-trace var(--portman-laser-duration) ease-out forwards;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    &::before {
      animation: none !important;
    }
  }
}

/* Custom “close” cursor on drawer/modal overlays.
   Keep a fixed size + opacity (no width/height animation) so Chrome
   doesn’t thrash layout while following the pointer. */
.mouse-cursor {
  inset: auto !important;
  top: 0 !important;
  left: 0 !important;
  width: 3.25rem !important;
  height: 3.25rem !important;
  opacity: 0;
  visibility: hidden;
  background-color: rgb(58 58 58) !important;
  color: rgb(255 255 255) !important;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.14),
    0 2px 18px rgb(0 0 0 / 0.5);
  transform: translate3d(-100%, -100%, 0);
  transition: opacity 0.12s ease, visibility 0.12s ease, color 0.15s ease, box-shadow 0.15s ease !important;
  will-change: transform;
  contain: layout style;
}

.mouse-cursor .icon {
  width: 1.25rem !important;
  height: 1.25rem !important;
  transition: none !important;
}

.no-touch .mouse-cursor.active {
  width: 3.25rem !important;
  height: 3.25rem !important;
  opacity: 1;
  visibility: visible;
}

.no-touch .mouse-cursor.active .icon {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

/* No size grow on press — color only (avoids layout) */
.no-touch .mouse-cursor.active.pressed {
  width: 3.25rem !important;
  height: 3.25rem !important;
  background-color: rgb(72 72 72) !important;
  color: rgb(var(--portman-accent-rgb)) !important;
  box-shadow:
    inset 0 0 0 1px rgb(var(--portman-accent-rgb) / 0.45),
    0 4px 22px rgb(0 0 0 / 0.55);
}

.no-touch .mouse-cursor.active.pressed .icon {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

@media (prefers-reduced-motion: reduce) {
  .mouse-cursor {
    transition: none !important;
  }
}