/*
 * Ducky 6 Man custom theme styles
 * This file will not be overwritten by theme updates.
*/

/* ---------- Base ambience ---------- */
body {
  background-color: rgb(var(--cl-background));
  position: relative;
}

/* Dark vignette so content stays readable over any hero/background image
   set via Shop Settings -> Background Image */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,0,0,0) 0%, rgba(5,6,8,0.55) 55%, rgba(5,6,8,0.92) 100%),
    linear-gradient(to bottom, rgba(5,6,8,0.55) 0%, rgba(5,6,8,0.75) 100%);
}

/* ---------- Header / nav pills ---------- */
header nav a,
header nav button {
  transition: transform 0.2s ease, background-color 0.2s ease;
  background-color: rgba(255,255,255,0.12) !important;
  border-color: transparent !important;
  backdrop-filter: blur(6px);
  color: #ffffff !important;
}

header nav a:hover,
header nav button:hover {
  transform: scale(1.06);
  background-color: rgba(255,255,255,0.2) !important;
}

/* Home navigation pill */
header nav a[data-nav-link="Home"]:not(.home-pill-snazzy-blue) {
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
}
header nav a[data-nav-link="Home"]:not(.home-pill-snazzy-blue):hover {
  background-color: #dc2626 !important;
}

/* Header logos: remove the previous blue glow */
header img[alt] {
  filter: none;
  transition: transform 0.3s ease;
}
header a:hover img[alt] {
  filter: none;
  transform: translateY(-2px);
}

/* ---------- Product / group cards ---------- */
.bg-card {
  background-color: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(6px);
  border-radius: 0.75rem !important;
  border-color: transparent !important;
  overflow: hidden;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

a.bg-card:hover,
.bg-card:hover {
  transform: translateY(-4px);
  background-color: rgba(255,255,255,0.2) !important;
  border-color: transparent !important;
}

/* Product image reveal on hover */
.bg-card img {
  border-radius: 0.6rem !important;
  transition: transform 0.4s ease;
}
.bg-card:hover img {
  transform: scale(1.05);
}

/* Footer text area of each card (price / stock / name) — bright white
   text over the translucent, see-through card background */
.bg-card .px-5.pb-4 {
  background-color: rgba(0,0,0,0.2);
  padding-top: 0.75rem;
  border-radius: 0 0 0.75rem 0.75rem;
}

.bg-card .px-5.pb-4 h3,
.bg-card .px-5.pb-4 p,
.bg-card .px-5.pb-4 p span:not(.text-accent-500) {
  color: rgba(255,255,255,0.95) !important;
}

/* Diagonal white swoosh sweeping across product cards on hover
   (not the nav pills — they get a zoom effect instead, see above) */
.bg-card::before {
  content: "";
  position: absolute;
  inset: 0;
  left: -85%;
  width: 55%;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.4) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 2;
  transition: left 0.65s ease;
}
.bg-card:hover::before {
  left: 135%;
}

/* Nav pills never get the swoosh, only the zoom above */
header nav a::before,
header nav button::before {
  content: none !important;
}

/* No swoosh on the product page's image/description or variant boxes */
.product-page-no-swoosh::before {
  content: none !important;
}

/* Dark grey background for the product page boxes specifically */
.product-page-no-swoosh {
  background-color: rgba(45,45,45,0.9) !important;
  --cl-t-primary: 255,255,255;
}
.product-page-no-swoosh:hover {
  background-color: rgba(50,50,50,0.95) !important;
}

/* "NEW" / promo badges */
.badges > div {
  background-color: #ff0d0d !important;
}

/* Section title bullet dot, like the one next to "Ducky 6 Man Store" */
.components h2::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 10px;
  margin-bottom: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
}

/* Strikethrough / sale price styling */
.line-through {
  color: #ff5050 !important;
  opacity: 0.85;
}

/* ---------- Ember / spark particles (uses the theme's built-in
   snow system — set Snow Color in theme settings to an ember tone) ---------- */
#snow {
  opacity: 0.55;
}

/* ---------- Section headings ---------- */
h1, h2, h3 {
  letter-spacing: -0.01em;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(88,101,242,0.4); border-radius: 999px; }

/* ---------- Cart page: remove-item button hover ---------- */
.cart-remove-btn:hover {
  color: #ffffff !important;
  background-color: #ef4444 !important;
}

/* ---------- No swoosh sweep on the cart page's item list and order summary boxes ---------- */
.cart-box-no-swoosh::before {
  content: none !important;
}

/* ---------- Cart item card: remove default bg-card hover lift/zoom, add a subtle glow instead ---------- */
.cart-item-card {
  transition: box-shadow 0.25s ease-in-out;
}
.cart-item-card:hover {
  box-shadow: 0 0 18px rgba(120,160,255,0.35);
}
.cart-item-card img {
  transition: none !important;
}
.cart-item-card:hover img {
  transform: none !important;
}

/* ---------- Checkout button hover animation ---------- */
.checkout-btn:hover:enabled {
  transform: scale(1.02);
  filter: brightness(1.1);
}

/* ---------- Product card "View Details" hover overlay (product pages) ---------- */
a.group:hover .product-card-view-details {
  opacity: 1;
}

/* ---------- Legal pages: clause number badges + heading style ---------- */
.editor .e-text-code {
  background-color: #2a3a52;
  border: 1px solid #4a7ab0;
  border-radius: 0.4rem;
  color: #d5e6f7;
  padding: 0.15rem 0.5rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
}

.editor .e-heading-h3,
.editor .e-heading-h2 {
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(var(--cl-t-primary), 1);
}

/* ---------- Legal page tab pills (Terms of Service / Refund Policy): hover + active states ---------- */
.legal-tab-pill {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  box-shadow: none;
}
.legal-tab-pill:hover {
  transform: scale(1.06);
  box-shadow: 0 0 14px rgba(56,189,248,0.55), 0 0 6px rgba(56,189,248,0.45);
}
.legal-tab-pill-active {
  box-shadow: 0 0 20px rgba(56,189,248,0.85), 0 0 8px rgba(56,189,248,0.7);
}
.legal-tab-pill-active:hover {
  box-shadow: 0 0 28px rgba(56,189,248,1), 0 0 12px rgba(56,189,248,0.9);
}

/* ---------- Full-screen, centered storefront landing page ---------- */
/* Only the shop homepage uses these selectors; product and checkout layouts are unchanged. */
.site-app--home {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100svh;
  padding: 20px 24px !important;
}

.site-app--home > div:first-child {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

.site-app--home > div:first-child > div {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

.site-app--home .hero-home {
  display: flex;
  flex: 1 0 auto;
  width: 100%;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  isolation: isolate;
}

.site-app--home .hero-home::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(5, 6, 8, .32), rgba(5, 6, 8, .67) 80%),
              linear-gradient(180deg, rgba(5, 6, 8, .22), rgba(5, 6, 8, .45));
}

.hero-home__main {
  display: flex;
  width: min(100%, 950px);
  margin: auto;
  padding: 42px 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(26px, 4.2vh, 40px);
}

.hero-home__identity {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 14px;
  animation: home-fade-up .65s ease-out both;
}

.hero-home__logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(8px, 2.5vh, 20px);
  border-radius: 20px;
}

.hero-home__logo {
  display: block;
  width: clamp(165px, 22vw, 295px);
  height: clamp(165px, 22vw, 295px);
  object-fit: contain;
  filter: none;
  animation: home-logo-float 7s ease-in-out infinite;
}

.hero-home__logo-link:hover .hero-home__logo {
  filter: none;
}

.hero-home__title {
  margin: 0;
  font-size: clamp(2.15rem, 4vw, 3.3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.035em;
  color: #45ff64;
  text-shadow: 0 0 8px rgba(69, 255, 100, .78), 0 0 22px rgba(25, 255, 81, .61), 0 0 40px rgba(25, 230, 72, .38), 0 3px 16px rgba(0, 0, 0, .55);
}

.hero-home__description {
  margin: 0;
  max-width: 760px;
  color: rgba(255,255,255,.86);
  font-size: clamp(.95rem, 1.4vw, 1.12rem);
  line-height: 1.65;
  text-shadow: 0 2px 12px rgba(0,0,0,.75);
}

.hero-home__actions {
  display: flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  animation: home-fade-up .65s .12s ease-out both;
}

.hero-home nav a.hero-home__button {
  display: inline-flex;
  min-width: 145px;
  min-height: 50px;
  padding: 12px 22px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 9999px;
  background: rgba(255,255,255,.11) !important;
  box-shadow: 0 7px 22px rgba(0,0,0,.18);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  color: #fff !important;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
}

.hero-home nav a.hero-home__button--community {
  background: rgb(var(--cl-accent)) !important;
  border-color: transparent !important;
  box-shadow: 0 9px 22px rgba(var(--cl-accent), .28);
}

.hero-home nav a.hero-home__button:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.21) !important;
  box-shadow: 0 12px 25px rgba(0,0,0,.25);
}

.hero-home nav a.hero-home__button--community:hover {
  background: rgba(var(--cl-accent), .88) !important;
  box-shadow: 0 12px 30px rgba(var(--cl-accent), .42);
}

.hero-home a:focus-visible {
  outline: 3px solid white;
  outline-offset: 5px;
}

@keyframes home-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes home-logo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* Match the reference's subtle points of light rather than large flakes. */
#snow .snowflake {
  width: 3px !important;
  height: 3px !important;
  box-shadow: 0 0 5px rgba(var(--cl-snow), .4);
}

@media (max-width: 640px) {
  .site-app--home { padding: 20px 18px !important; }
  .hero-home__main { gap: 22px; padding: 28px 0; }
  .hero-home__identity { gap: 12px; }
  .hero-home__logo { width: clamp(135px, 42vw, 200px); height: clamp(135px, 42vw, 200px); }
  .hero-home__title { font-size: clamp(1.8rem, 7.5vw, 2.4rem); }
  .hero-home__description { font-size: .95rem; max-width: 36ch; }
  .hero-home__actions { flex-direction: column; gap: 12px; width: 100%; }
  .hero-home nav a.hero-home__button { width: min(100%, 290px); min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-home__identity, .hero-home__actions, .hero-home__logo {
    animation: none !important;
  }
  .hero-home nav a.hero-home__button { transition: none; }
  #snow { display: none; }
}

/* ---------- Auctions: centered amount card, matching the supplied reference ---------- */
.auction-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  margin: clamp(45px, 12vh, 170px) auto 32px;
  text-align: center;
}
.auction-header__logo-link { display: inline-flex; align-items: center; justify-content: center; }
.auction-header__logo { width: clamp(120px, 16vw, 150px); height: clamp(120px, 16vw, 150px); object-fit: contain; filter: none; }
.auction-header__title {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
}
.auction-header__navigation { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.auction-header__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
header nav a.auction-pill {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 104px;
  min-height: 43px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25) !important;
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
  line-height: 1.25;
  font-size: .94rem;
  text-decoration: none;
}
header nav a.auction-pill--discord { background: #5865f2 !important; border-color: #5865f2 !important; }
header nav a.auction-pill--secondary { min-width: 115px; }
.auction-page {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 4px 14px 100px;
}
.auction-panel {
  width: min(100%, 500px);
  padding: 26px 30px 24px;
  text-align: center;
  background: rgba(19,19,19,.96);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 22px;
  box-shadow: 0 15px 40px rgba(0,0,0,.2);
}
.auction-panel__title {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  line-height: 1.25;
  font-weight: 600;
  color: #f7f7f7;
  margin: 0 0 10px;
}
.auction-panel__intro { color: rgba(255,255,255,.75); font-size: .93rem; margin: 0 0 23px; }
.auction-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 0 auto 16px; }
.auction-presets__button {
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.19);
  border-radius: 999px;
  color: #f5f5f5;
  padding: 10px 13px;
  font-size: .87rem;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.auction-presets__button:hover { transform: translateY(-2px); background: rgba(255,255,255,.16); }
.auction-presets__button--selected { border-color: #39e36d; background: rgba(37,208,85,.23); }
.auction-presets__button:focus-visible, .auction-form__submit:focus-visible, .auction-form__input-wrap:focus-within { outline: 2px solid #66ff92; outline-offset: 3px; }
.auction-form { width: min(100%, 268px); margin: 0 auto; }
.auction-form__label { display: block; text-align: left; font-size: .82rem; color: #bababa; margin-bottom: 7px; }
.auction-form__input-wrap {
  display: flex; align-items: center; gap: 10px;
  background: #090909; border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; height: 64px; padding: 0 14px;
}
.auction-form__currency { font-size: 1.25rem; font-weight: 600; color: #b9b9b9; }
.auction-form__input-wrap input {
  width: 100%; min-width: 0; color: white; font-size: 1.25rem; font-weight: 600;
  appearance: textfield; background: transparent; border: none; outline: none;
}
.auction-form__input-wrap input::placeholder { color: #7b7b7b; opacity: 1; }
.auction-form__input-wrap input::-webkit-inner-spin-button,
.auction-form__input-wrap input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Payment button: muted green until valid, then neon green with a gentle glow. */
.auction-form__submit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%; min-height: 52px; padding: 12px 14px;
  margin-top: 18px; border-radius: 999px;
  border: 1px solid rgba(138, 210, 155, .17);
  background: #315e40;
  color: #deefe1;
  font-size: .95rem; font-weight: 700;
  box-shadow: 0 3px 12px rgba(12, 55, 24, .16);
  transition: transform .25s ease, background-color .28s ease,
              box-shadow .28s ease, border-color .28s ease, color .28s ease;
}
.auction-form__submit--ready {
  background: #32d969;
  color: #071b0d;
  border-color: rgba(150, 255, 172, .5);
  box-shadow: 0 0 15px rgba(39, 237, 94, .36), 0 5px 20px rgba(0, 112, 43, .22);
}
.auction-form__submit:hover {
  transform: translateY(-2px);
  background: #427a53;
  box-shadow: 0 6px 20px rgba(12, 95, 35, .28);
}
.auction-form__submit--ready:hover {
  transform: translateY(-3px) scale(1.025);
  background: #52f580;
  box-shadow: 0 0 23px rgba(64, 255, 111, .5), 0 9px 26px rgba(0, 110, 47, .25);
}
.auction-form__submit:active {
  transform: translateY(0) scale(.985);
}
/* A small light sweep plays once each time the pointer enters the button. */
.auction-form__submit::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.2) 49%, transparent 66%);
  transform: translateX(-155%);
}
.auction-form__submit:hover::before {
  animation: auction-button-shimmer .78s ease-out both;
}
@keyframes auction-button-shimmer {
  from { transform: translateX(-155%); }
  to { transform: translateX(155%); }
}
.auction-form__summary { color: #ffffff; margin-top: 13px; margin-bottom: -2px; font-size: .95rem; font-weight: 700; }
.auction-form__message { color: #ffaaaa; margin-top: 14px; font-size: .84rem; line-height: 1.35; }
.auction-form__help { color: #adadad; margin-top: 14px; font-size: .78rem; line-height: 1.35; }
@media (max-width: 640px) {
  .auction-header { margin-top: 54px; gap: 19px; }
  .auction-header__row { gap: 9px; }
  header nav a.auction-pill { min-width: 93px; padding: 10px 14px; }
  .auction-page { padding: 8px 0 85px; }
  .auction-panel { padding: 25px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .auction-presets__button, .auction-form__submit { transition: none; }
  .auction-form__submit:hover::before { animation: none; }
  .auction-form__submit:hover, .auction-form__submit--ready:hover { transform: none; }
}