/* =========================================================
   Power Core Accessories — Dark Ocean override
   Load AFTER the page's inline <style>.
   Preserves the original blue/ocean identity and only darkens it.
   ========================================================= */

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --acc-dark-ink: #f1f8ff;
  --acc-dark-muted: #b7c9dc;
  --acc-dark-muted-2: #8da4bc;

  --acc-dark-border: rgba(153, 214, 255, 0.24);
  --acc-dark-border-strong: rgba(94, 205, 238, 0.46);

  --acc-dark-glass:
    radial-gradient(
      circle at 10% 0%,
      rgba(179, 225, 255, 0.11),
      transparent 34%
    ),
    radial-gradient(
      circle at 92% 8%,
      rgba(28, 209, 232, 0.09),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(20, 61, 99, 0.84),
      rgba(6, 30, 58, 0.82) 56%,
      rgba(3, 17, 35, 0.88)
    );

  --acc-dark-shadow:
    0 24px 58px rgba(0, 6, 18, 0.52),
    0 0 32px rgba(23, 194, 225, 0.09),
    inset 0 1px 0 rgba(224, 247, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}

/* ===== Darker ocean background ===== */

html[data-theme="dark"] body.accessories-page {
  color: var(--acc-dark-ink) !important;
  background:
    radial-gradient(
      circle at 8% 7%,
      rgba(42, 111, 219, 0.28),
      transparent 25%
    ),
    radial-gradient(
      circle at 91% 10%,
      rgba(12, 197, 221, 0.22),
      transparent 24%
    ),
    radial-gradient(
      circle at 48% 62%,
      rgba(51, 96, 190, 0.14),
      transparent 34%
    ),
    radial-gradient(
      circle at 22% 88%,
      rgba(21, 183, 183, 0.10),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #07152e 0%,
      #0b3158 43%,
      #075f79 72%,
      #07364b 100%
    ) !important;

  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
}

html[data-theme="dark"] body.accessories-page::before {
  opacity: 1 !important;
  background:
    radial-gradient(
      circle at 15% 9%,
      rgba(43, 118, 237, 0.36),
      transparent 31%
    ),
    radial-gradient(
      circle at 86% 12%,
      rgba(16, 211, 229, 0.30),
      transparent 29%
    ),
    radial-gradient(
      circle at 50% 60%,
      rgba(76, 74, 195, 0.17),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #07152e 0%,
      #0a3a65 50%,
      #087c93 100%
    ) !important;

  filter: saturate(118%) brightness(0.68);
}

html[data-theme="dark"] body.accessories-page::after {
  opacity: 0.62;
  background:
    radial-gradient(
      circle at center,
      rgba(80, 239, 255, 0.26) 0%,
      rgba(45, 205, 232, 0.13) 25%,
      rgba(34, 145, 203, 0.07) 40%,
      transparent 64%
    ) !important;

  filter: blur(26px);
}

/* ===== Shared header ===== */

html[data-theme="dark"] body.accessories-page .glass-header {
  background:
    linear-gradient(
      180deg,
      rgba(9, 32, 58, 0.94),
      rgba(4, 21, 40, 0.90)
    ) !important;

  border-bottom-color: rgba(144, 208, 255, 0.17) !important;

  box-shadow:
    0 14px 34px rgba(0, 7, 20, 0.42),
    inset 0 -1px 0 rgba(133, 213, 255, 0.06) !important;

  backdrop-filter: blur(22px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
}

html[data-theme="dark"] body.accessories-page .nav a,
html[data-theme="dark"] body.accessories-page .logo-copy strong,
html[data-theme="dark"] body.accessories-page .logo-copy span {
  color: #edf7ff !important;
}

/* ===== Hero ===== */

html[data-theme="dark"] body.accessories-page .accessories-hero h1 {
  color: var(--acc-dark-ink) !important;
  text-shadow:
    0 0 26px rgba(52, 203, 234, 0.10) !important;
}

html[data-theme="dark"] body.accessories-page .accessories-hero .grad {
  background:
    linear-gradient(
      135deg,
      #39dcf0 0%,
      #1ba8df 48%,
      #66b6ff 100%
    ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;

  filter: drop-shadow(0 8px 20px rgba(24, 190, 225, 0.16));
}

html[data-theme="dark"] body.accessories-page .hero-sub {
  color: var(--acc-dark-muted) !important;
}

html[data-theme="dark"] body.accessories-page .hero-pills span {
  color: #d8e8f6 !important;

  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(183, 226, 255, 0.11),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(35, 83, 126, 0.76),
      rgba(9, 38, 72, 0.72)
    ) !important;

  border-color: rgba(155, 217, 255, 0.23) !important;

  box-shadow:
    0 9px 22px rgba(0, 7, 22, 0.31),
    0 0 16px rgba(38, 207, 231, 0.07),
    inset 0 1px 0 rgba(224, 247, 255, 0.12) !important;
}

/* ===== Compatibility bar ===== */

html[data-theme="dark"] body.accessories-page .filter-glass {
  color: var(--acc-dark-ink) !important;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(115, 111, 235, 0.18),
      transparent 42%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(20, 207, 226, 0.11),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(38, 65, 126, 0.82),
      rgba(12, 37, 75, 0.76)
    ) !important;

  border-color: rgba(168, 177, 255, 0.27) !important;

  box-shadow:
    0 18px 46px rgba(0, 7, 22, 0.42),
    0 0 28px rgba(51, 183, 223, 0.09),
    inset 0 1px 0 rgba(230, 242, 255, 0.13) !important;

  backdrop-filter: blur(24px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(145%) !important;
}

html[data-theme="dark"] body.accessories-page .filter-title {
  color: #f0f8ff !important;
}

html[data-theme="dark"] body.accessories-page .compat-filter-btn {
  color: #d6e6f5 !important;

  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(197, 231, 255, 0.09),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      rgba(37, 82, 124, 0.80),
      rgba(9, 37, 70, 0.78)
    ) !important;

  border-color: rgba(149, 213, 255, 0.21) !important;

  box-shadow:
    0 8px 20px rgba(0, 6, 18, 0.32),
    inset 0 1px 0 rgba(225, 246, 255, 0.10) !important;
}

html[data-theme="dark"] body.accessories-page .compat-filter-btn:hover {
  color: #ffffff !important;
  border-color: rgba(97, 213, 241, 0.46) !important;

  background:
    linear-gradient(
      145deg,
      rgba(48, 105, 153, 0.92),
      rgba(13, 53, 91, 0.90)
    ) !important;

  box-shadow:
    0 11px 27px rgba(0, 7, 22, 0.38),
    0 0 20px rgba(41, 202, 228, 0.12),
    inset 0 1px 0 rgba(230, 248, 255, 0.14) !important;
}

html[data-theme="dark"] body.accessories-page .compat-filter-btn.active {
  color: #ffffff !important;
  border-color: rgba(126, 231, 255, 0.18) !important;

  background:
    linear-gradient(
      135deg,
      rgba(38, 121, 235, 0.98),
      rgba(12, 198, 216, 0.96)
    ) !important;

  box-shadow:
    0 14px 30px rgba(11, 123, 208, 0.29),
    0 0 24px rgba(36, 214, 235, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

/* ===== Product cards ===== */

html[data-theme="dark"] body.accessories-page .card {
  color: var(--acc-dark-ink) !important;
  background: var(--acc-dark-glass) !important;
  border-color: var(--acc-dark-border) !important;
  box-shadow: var(--acc-dark-shadow) !important;

  backdrop-filter: blur(26px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(145%) !important;
}

html[data-theme="dark"] body.accessories-page .card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background:
    linear-gradient(
      125deg,
      rgba(221, 245, 255, 0.14),
      transparent 18%,
      transparent 60%,
      rgba(56, 214, 236, 0.06)
    ),
    radial-gradient(
      circle at 10% 6%,
      rgba(205, 239, 255, 0.10),
      transparent 23%
    );
}

/*
   Layout must be identical in light and dark modes.
   These geometry rules are intentionally NOT scoped to data-theme.
   This prevents View Transitions and global .badge/.bookmark rules
   from moving the card controls into the flex flow during a switch.
*/
body.accessories-page .card {
  isolation: isolate;
  overflow: hidden;
}

html[data-theme="dark"] body.accessories-page .card::before {
  z-index: 0;
}

body.accessories-page .card > .image-wrapper,
body.accessories-page .card > h2,
body.accessories-page .card > p,
body.accessories-page .card > .price,
body.accessories-page .card > .read-more,
body.accessories-page .card > .quick-data,
body.accessories-page .card > .buy-btn {
  position: relative;
  z-index: 1;
  min-width: 0;
}

body.accessories-page .card > .badge {
  position: absolute !important;
  inset: 20px auto auto 20px !important;
  z-index: 3 !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: auto !important;

  width: max-content !important;
  min-width: 0 !important;
  max-width: calc(100% - 76px) !important;
  height: auto !important;
  margin: 0 !important;

  flex: 0 0 auto !important;
  white-space: nowrap;
}

body.accessories-page .card > .bookmark {
  position: absolute !important;
  inset: 20px 20px auto auto !important;
  z-index: 3 !important;

  display: block !important;
  align-self: auto !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;

  flex: 0 0 auto !important;
}

/* Keep the action area pinned to the bottom of every equal-height card. */
body.accessories-page .card > .price {
  margin-top: auto !important;
}

body.accessories-page .card > .read-more,
body.accessories-page .card > .buy-btn {
  flex: 0 0 auto;
}

html[data-theme="dark"] body.accessories-page .card:hover {
  border-color: var(--acc-dark-border-strong) !important;

  box-shadow:
    0 32px 72px rgba(0, 5, 18, 0.62),
    0 0 40px rgba(25, 212, 236, 0.19),
    inset 0 1px 0 rgba(231, 249, 255, 0.17) !important;
}

html[data-theme="dark"] body.accessories-page .image-wrapper {
  background:
    radial-gradient(
      circle at 50% 44%,
      rgba(55, 132, 183, 0.23),
      rgba(7, 26, 50, 0.06) 58%,
      transparent 78%
    ) !important;
}

html[data-theme="dark"] body.accessories-page .image-wrapper img {
  filter:
    brightness(0.94)
    contrast(1.07)
    saturate(1.05)
    drop-shadow(0 20px 30px rgba(0, 0, 0, 0.48)) !important;
}

html[data-theme="dark"] body.accessories-page .card h2,
html[data-theme="dark"] body.accessories-page .price {
  color: #f2f8ff !important;
}

html[data-theme="dark"] body.accessories-page .card p {
  color: var(--acc-dark-muted) !important;
  opacity: 1 !important;
}

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

html[data-theme="dark"] body.accessories-page .read-more {
  color: #d9e8f6 !important;

  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(191, 229, 255, 0.10),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      rgba(42, 92, 137, 0.80),
      rgba(10, 39, 74, 0.80)
    ) !important;

  border-color: rgba(157, 218, 255, 0.23) !important;

  box-shadow:
    0 9px 22px rgba(0, 6, 18, 0.33),
    0 0 16px rgba(37, 201, 228, 0.08),
    inset 0 1px 0 rgba(226, 247, 255, 0.12) !important;
}

html[data-theme="dark"] body.accessories-page .read-more:hover {
  color: #ffffff !important;

  background:
    linear-gradient(
      145deg,
      rgba(55, 118, 166, 0.94),
      rgba(15, 55, 94, 0.92)
    ) !important;

  border-color: rgba(103, 218, 245, 0.48) !important;

  box-shadow:
    0 13px 30px rgba(0, 7, 22, 0.40),
    0 0 24px rgba(37, 207, 232, 0.15),
    inset 0 1px 0 rgba(237, 251, 255, 0.16) !important;
}

html[data-theme="dark"] body.accessories-page .buy-btn {
  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      rgba(37, 112, 239, 0.98),
      rgba(12, 200, 218, 0.97)
    ) !important;

  border-color: rgba(170, 235, 255, 0.25) !important;

  box-shadow:
    0 14px 30px rgba(9, 119, 205, 0.30),
    0 0 24px rgba(30, 208, 232, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

html[data-theme="dark"] body.accessories-page .buy-btn:hover {
  box-shadow:
    0 20px 40px rgba(6, 114, 201, 0.37),
    0 0 34px rgba(30, 218, 240, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.31) !important;
}

/* ===== Quick View ===== */

html[data-theme="dark"] body.accessories-page .modal {
  background: rgba(1, 7, 17, 0.73) !important;
  backdrop-filter: blur(14px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
}

html[data-theme="dark"] body.accessories-page .dialog {
  color: var(--acc-dark-ink) !important;

  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(178, 225, 255, 0.11),
      transparent 34%
    ),
    radial-gradient(
      circle at 92% 8%,
      rgba(31, 204, 229, 0.08),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(20, 61, 99, 0.96),
      rgba(5, 28, 55, 0.96)
    ) !important;

  border-color: rgba(155, 216, 255, 0.24) !important;

  box-shadow:
    0 34px 94px rgba(0, 3, 12, 0.74),
    0 0 34px rgba(28, 195, 227, 0.10),
    inset 0 1px 0 rgba(225, 247, 255, 0.13) !important;
}

html[data-theme="dark"] body.accessories-page .dialog-top {
  color: #f2f8ff !important;

  background:
    linear-gradient(
      180deg,
      rgba(37, 81, 123, 0.72),
      rgba(10, 37, 69, 0.56)
    ) !important;

  border-bottom-color: rgba(153, 216, 255, 0.16) !important;
}

html[data-theme="dark"] body.accessories-page .dialog-top button {
  color: #e6f1fb !important;

  background:
    linear-gradient(
      145deg,
      rgba(48, 101, 146, 0.86),
      rgba(12, 45, 80, 0.84)
    ) !important;

  border-color: rgba(155, 218, 255, 0.22) !important;
}

html[data-theme="dark"] body.accessories-page .dialog-body {
  background: rgba(2, 18, 38, 0.28) !important;
}

html[data-theme="dark"] body.accessories-page .dialog-media,
html[data-theme="dark"] body.accessories-page .dialog-info {
  color: var(--acc-dark-ink) !important;

  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(184, 226, 255, 0.08),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(30, 70, 111, 0.79),
      rgba(8, 33, 65, 0.78)
    ) !important;

  border-color: rgba(151, 214, 255, 0.19) !important;

  box-shadow:
    0 16px 38px rgba(0, 6, 18, 0.39),
    inset 0 1px 0 rgba(225, 247, 255, 0.10) !important;
}

html[data-theme="dark"] body.accessories-page .dialog-info h3 {
  color: #f1f8ff !important;
}

html[data-theme="dark"] body.accessories-page .dialog-info p,
html[data-theme="dark"] body.accessories-page .dialog-info ul {
  color: var(--acc-dark-muted) !important;
}

html[data-theme="dark"] body.accessories-page .dialog-info #mList li {
  background:
    linear-gradient(
      rgba(153, 215, 255, 0.13),
      rgba(153, 215, 255, 0.13)
    ) bottom / 100% 1px no-repeat !important;
}

/* ===== Empty state and footer ===== */

html[data-theme="dark"] body.accessories-page .empty-filter-state {
  color: #f0f8ff !important;
  background: var(--acc-dark-glass) !important;
  border-color: var(--acc-dark-border) !important;
  box-shadow: var(--acc-dark-shadow) !important;
}

html[data-theme="dark"] body.accessories-page #site-footer,
html[data-theme="dark"] body.accessories-page #site-footer * {
  color: rgba(224, 240, 252, 0.91) !important;
}

html[data-theme="dark"] body.accessories-page .site-footer-social a {
  background:
    linear-gradient(
      145deg,
      rgba(39, 87, 129, 0.77),
      rgba(9, 36, 68, 0.74)
    ) !important;

  border-color: rgba(152, 215, 255, 0.22) !important;

  box-shadow:
    0 8px 20px rgba(0, 6, 18, 0.30),
    inset 0 1px 0 rgba(225, 247, 255, 0.10) !important;
}

/* ===== Theme transition compatibility =====

   Theme-dependent gradients are intentionally not animated here.
   /js/theme.js already uses the browser View Transitions API.
   Always-on background transitions caused the light snapshot to be
   captured before the dark styles had fully returned to light.
   ========================================================= */

/* ===== Mobile: keep background fixed ===== */

@media (max-width: 640px) {
  html[data-theme="dark"] body.accessories-page {
    background-attachment: fixed !important;
  }

  html[data-theme="dark"] body.accessories-page::before,
  html[data-theme="dark"] body.accessories-page::after {
    position: fixed !important;
  }

  html[data-theme="dark"] body.accessories-page .card {
    background:
      radial-gradient(
        circle at 12% 0%,
        rgba(181, 226, 255, 0.10),
        transparent 34%
      ),
      linear-gradient(
        145deg,
        rgba(20, 61, 99, 0.96),
        rgba(5, 28, 55, 0.95)
      ) !important;

    backdrop-filter: blur(18px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
  }

  html[data-theme="dark"] body.accessories-page .filter-glass {
    background:
      radial-gradient(
        circle at 0% 0%,
        rgba(112, 105, 232, 0.18),
        transparent 40%
      ),
      linear-gradient(
        145deg,
        rgba(37, 64, 124, 0.94),
        rgba(10, 35, 72, 0.92)
      ) !important;
  }
}

/* Prevent a small horizontal jump when color-scheme changes scrollbar styling. */
html {
  scrollbar-gutter: stable;
}

@media (max-width: 640px) {
  body.accessories-page .card > .badge {
    inset: 16px auto auto 16px !important;
    max-width: calc(100% - 64px) !important;
  }

  body.accessories-page .card > .bookmark {
    inset: 16px 16px auto auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.accessories-page::after {
    animation: none !important;
  }
}