/* ==========================================================
   INKCREDIBLE TATTOO — GLOBAL FINAL CSS
   Full width • rectangular images • dark readable buttons
   restrained green • readable menus • refined social icons
   ========================================================== */


/* ----------------------------------------------------------
   1. BRAND VARIABLES
   ---------------------------------------------------------- */

:root {
  --ink-black: #050505;
  --ink-background: #090909;
  --ink-surface: #111111;
  --ink-surface-light: #181818;
  --ink-surface-raised: #202020;
  --ink-button: #1c1c1c;
  --ink-button-hover: #292929;

  --ink-white: #ffffff;
  --ink-text: #eeeeee;
  --ink-muted: #bcbcbc;
  --ink-subtle: #8f8f8f;

  --ink-green: #8dc63f;
  --ink-green-light: #a5d85c;
  --ink-green-dark: #669627;

  --ink-border: rgba(255, 255, 255, 0.14);
  --ink-border-hover: rgba(255, 255, 255, 0.32);
  --ink-green-border: rgba(141, 198, 63, 0.42);

  --ink-radius-small: 8px;
  --ink-radius: 14px;
  --ink-radius-large: 20px;

  --ink-shadow: 0 22px 55px rgba(0, 0, 0, 0.42);
  --ink-card-shadow: 0 14px 35px rgba(0, 0, 0, 0.32);

  /* Replace Elementor pink defaults */
  --e-global-color-primary: #8dc63f !important;
  --e-global-color-secondary: #ffffff !important;
  --e-global-color-text: #eeeeee !important;
  --e-global-color-accent: #8dc63f !important;

  --e-a-color-primary: #8dc63f !important;
  --e-a-color-primary-bold: #669627 !important;
}


/* ----------------------------------------------------------
   2. GLOBAL RESET
   ---------------------------------------------------------- */

html {
  width: 100%;
  min-height: 100%;

  margin: 0 !important;
  padding: 0 !important;

  scroll-behavior: smooth;

  background: var(--ink-black) !important;
}

body {
  width: 100%;
  min-width: 320px;
  min-height: 100vh;

  margin: 0 !important;
  padding: 0 !important;

  overflow-x: hidden;

  color: var(--ink-text);

  background:
    linear-gradient(
      180deg,
      #050505 0%,
      #0b0b0b 50%,
      #050505 100%
    ) !important;

  background-color: var(--ink-background) !important;

  font-family:
    "Segoe UI",
    Tahoma,
    Geneva,
    Verdana,
    sans-serif;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
iframe,
svg {
  max-width: 100%;
}

img {
  height: auto;
}


/* ----------------------------------------------------------
   3. MAKE WORDPRESS PAGES FULL WIDTH
   ---------------------------------------------------------- */

#page,
.site,
#content,
.site-content,
.content-area,
#primary,
.site-main,
main,
article,
.hentry,
.entry-content,
.page-content {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--ink-text);

  border: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}

.site-main,
.content-area,
.site-content {
  float: none !important;
}

.page-header,
.entry-header {
  display: none !important;
}


/* ----------------------------------------------------------
   4. MAKE ELEMENTOR FULL WIDTH
   ---------------------------------------------------------- */

.elementor,
.elementor-inner,
.elementor-section-wrap,
.elementor-location-single,
.elementor-location-page {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
}

.elementor-section,
.elementor-section.elementor-section-boxed,
.elementor-section.elementor-section-full_width {
  width: 100% !important;
  max-width: none !important;
}

.elementor-section >
.elementor-container,
.elementor-section.elementor-section-boxed >
.elementor-container,
.elementor-section.elementor-section-full_width >
.elementor-container {
  width: 100% !important;
  max-width: none !important;

  margin-right: auto !important;
  margin-left: auto !important;
}

.e-con,
.e-con-inner,
.e-con-boxed,
.e-con-boxed > .e-con-inner {
  width: 100% !important;
  max-width: none !important;
}

.elementor-widget-html,
.elementor-widget-html >
.elementor-widget-container {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
}

.entry-content > *:first-child,
.elementor > *:first-child {
  margin-top: 0 !important;
}

.entry-content > *:last-child,
.elementor > *:last-child {
  margin-bottom: 0 !important;
}


/* ----------------------------------------------------------
   5. CUSTOM PAGE WRAPPERS
   ---------------------------------------------------------- */

.ink-page,
.ink-home,
.ink-artist-page,
.ink-gallery-page,
.ink-style-page,
.ink-blog-page,
.ink-faq-page,
.ink-contact-page,
.ink-first-guide {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--ink-text);

  border: 0 !important;
  border-radius: 0 !important;

  background:
    linear-gradient(
      180deg,
      #070707,
      #0c0c0c
    ) !important;

  box-shadow: none !important;
}

.ink-page section,
.ink-home section,
.ink-artist-page section,
.ink-gallery-page section,
.ink-style-page section,
.ink-blog-page section,
.ink-faq-page section,
.ink-contact-page section,
.ink-first-guide section {
  width: 100%;
  scroll-margin-top: 120px;
}

.ink-container {
  width: min(calc(100% - 48px), 1280px);
  max-width: 1280px;

  margin-right: auto;
  margin-left: auto;
}

.ink-reading-width {
  width: min(calc(100% - 48px), 850px);
  max-width: 850px;

  margin-right: auto;
  margin-left: auto;
}


/* ----------------------------------------------------------
   6. TYPOGRAPHY
   ---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ink-white);

  line-height: 1.15;
  text-wrap: balance;
}

p,
li {
  color: var(--ink-muted);
  line-height: 1.7;
  text-wrap: pretty;
}

strong {
  color: var(--ink-white);
}

.ink-green,
.ink-accent,
.ink-eyebrow {
  color: var(--ink-green) !important;
}

a {
  color: var(--ink-green);

  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

a:hover,
a:focus {
  color: var(--ink-green-light);
}


/* ----------------------------------------------------------
   7. GLOBAL HEADER
   ---------------------------------------------------------- */

.site-header,
#masthead,
.elementor-location-header {
  position: relative;
  z-index: 9999;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;

  color: var(--ink-white);

  border-bottom: 1px solid var(--ink-border);

  background:
    rgba(7, 7, 7, 0.97) !important;

  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.24);

  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.site-header .header-inner,
.elementor-location-header >
.elementor-element {
  width: 100% !important;
  max-width: none !important;
}

.site-header img,
.elementor-location-header img {
  max-height: 110px;
  object-fit: contain;
}


/* ----------------------------------------------------------
   8. DESKTOP MENU
   ---------------------------------------------------------- */

.site-header a,
.main-navigation a,
#site-navigation a,
.elementor-nav-menu--main
.elementor-item {
  color: #eeeeee !important;
  text-decoration: none !important;

  background:
    transparent !important;
}

.main-navigation a:hover,
.main-navigation a:focus-visible,
#site-navigation a:hover,
#site-navigation a:focus-visible,
.elementor-nav-menu--main
.elementor-item:hover,
.elementor-nav-menu--main
.elementor-item:focus-visible {
  color: #ffffff !important;

  background:
    rgba(255, 255, 255, 0.08) !important;
}

.current-menu-item > a,
.current_page_item > a,
.current-menu-ancestor > a,
.elementor-nav-menu--main
.elementor-item-active {
  color: #ffffff !important;

  background:
    rgba(255, 255, 255, 0.055) !important;

  box-shadow:
    inset 0 -2px 0 var(--ink-green);
}

.elementor-nav-menu--main
.elementor-item::before,
.elementor-nav-menu--main
.elementor-item::after {
  height: 2px !important;

  background:
    var(--ink-green) !important;
}


/* ----------------------------------------------------------
   9. DROPDOWN AND MOBILE MENU
   ---------------------------------------------------------- */

.sub-menu,
.elementor-nav-menu--dropdown {
  overflow: hidden;

  color: var(--ink-white);

  border: 1px solid var(--ink-border) !important;
  border-radius: var(--ink-radius-small);

  background:
    #101010 !important;

  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.48);
}

.sub-menu a,
.elementor-nav-menu--dropdown a {
  color: #eeeeee !important;

  border: 0 !important;

  background:
    #101010 !important;
}

.sub-menu a:hover,
.sub-menu a:focus-visible,
.elementor-nav-menu--dropdown a:hover,
.elementor-nav-menu--dropdown a:focus-visible {
  color: #ffffff !important;

  background:
    #252525 !important;
}

.sub-menu .current-menu-item > a,
.elementor-nav-menu--dropdown
.elementor-item-active {
  color: var(--ink-green-light) !important;

  background:
    #1b1b1b !important;

  box-shadow: none;
}

.menu-toggle,
.elementor-menu-toggle {
  color: var(--ink-white) !important;

  border: 1px solid var(--ink-border-hover) !important;
  border-radius: var(--ink-radius-small) !important;

  background:
    #171717 !important;
}

.menu-toggle:hover,
.elementor-menu-toggle:hover {
  color: var(--ink-white) !important;

  border-color:
    var(--ink-green-border) !important;

  background:
    #242424 !important;
}


/* ----------------------------------------------------------
   10. ALL BUTTONS — DARK WITH WHITE TEXT
   ---------------------------------------------------------- */

.elementor-button,
.elementor-button-link,
.wp-element-button,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.ink-button,
[class*="button"],
[class*="btn"] {
  min-height: 44px;

  color: #ffffff !important;

  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;

  cursor: pointer;

  border:
    1px solid var(--ink-border-hover) !important;

  border-radius:
    999px !important;

  background:
    var(--ink-button) !important;

  box-shadow:
    0 9px 24px rgba(0, 0, 0, 0.22);

  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.elementor-button *,
.wp-element-button *,
button *,
.ink-button *,
[class*="button"] *,
[class*="btn"] * {
  color: #ffffff !important;
}

.elementor-button:hover,
.elementor-button:focus-visible,
.wp-element-button:hover,
.wp-element-button:focus-visible,
button:hover,
button:focus-visible,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.ink-button:hover,
.ink-button:focus-visible,
[class*="button"]:hover,
[class*="btn"]:hover {
  color: #ffffff !important;

  border-color:
    var(--ink-green-border) !important;

  background:
    var(--ink-button-hover) !important;

  transform: translateY(-2px);
}


/* Explicit green CTA only when intentionally assigned */

.ink-button-green {
  color: #071000 !important;

  border-color:
    var(--ink-green) !important;

  background:
    var(--ink-green) !important;
}

.ink-button-green * {
  color: #071000 !important;
}

.ink-button-green:hover {
  color: #050505 !important;

  border-color:
    var(--ink-green-light) !important;

  background:
    var(--ink-green-light) !important;
}


/* ----------------------------------------------------------
   11. PREVIOUS/NEXT ARTIST BUTTONS
   Fixes white navigation bars at gallery bottom
   ---------------------------------------------------------- */

.artist-navigation a,
.artist-nav a,
.ink-artist-nav a,
.gallery-navigation a,
.gallery-nav a,
.portfolio-navigation a,
[class*="artist-navigation"] a,
[class*="artist-nav"] a,
[class*="gallery-navigation"] a,
[class*="gallery-nav"] a,
[class*="portfolio-navigation"] a,
[class*="previous"] a,
[class*="next"] a {
  color: #ffffff !important;

  border:
    1px solid var(--ink-border-hover) !important;

  background:
    var(--ink-button) !important;

  box-shadow:
    0 9px 24px rgba(0, 0, 0, 0.22) !important;
}

.artist-navigation a *,
.artist-nav a *,
.ink-artist-nav a *,
.gallery-navigation a *,
.gallery-nav a *,
.portfolio-navigation a *,
[class*="artist-navigation"] a *,
[class*="artist-nav"] a *,
[class*="gallery-navigation"] a *,
[class*="gallery-nav"] a *,
[class*="portfolio-navigation"] a * {
  color: #ffffff !important;
}

.artist-navigation a:hover,
.artist-nav a:hover,
.ink-artist-nav a:hover,
.gallery-navigation a:hover,
.gallery-nav a:hover,
.portfolio-navigation a:hover,
[class*="artist-navigation"] a:hover,
[class*="artist-nav"] a:hover,
[class*="gallery-navigation"] a:hover,
[class*="gallery-nav"] a:hover,
[class*="portfolio-navigation"] a:hover {
  color: #ffffff !important;

  border-color:
    var(--ink-green-border) !important;

  background:
    var(--ink-button-hover) !important;
}


/* Previous/next arrows may remain green as a small accent */

.artist-navigation svg,
.artist-nav svg,
.ink-artist-nav svg,
.gallery-navigation svg,
.gallery-nav svg {
  color: var(--ink-green) !important;
  fill: var(--ink-green) !important;
}


/* ----------------------------------------------------------
   12. SOCIAL MEDIA BUTTONS
   ---------------------------------------------------------- */

.elementor-social-icons-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 10px;
}

.elementor-social-icon,
.social-icon,
.ink-social-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--ink-white) !important;

  border:
    1px solid var(--ink-border) !important;

  border-radius:
    var(--ink-radius-small) !important;

  background:
    #191919 !important;

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.22) !important;
}

.elementor-social-icon i,
.elementor-social-icon svg,
.social-icon i,
.social-icon svg,
.ink-social-link i,
.ink-social-link svg {
  color: var(--ink-white) !important;
  fill: var(--ink-white) !important;

  font-size: 19px;
}

.elementor-social-icon:hover,
.social-icon:hover,
.ink-social-link:hover {
  color: var(--ink-white) !important;

  border-color:
    var(--ink-green-border) !important;

  background:
    #282828 !important;

  transform: translateY(-2px);
}

.elementor-social-icon:hover i,
.elementor-social-icon:hover svg,
.social-icon:hover i,
.social-icon:hover svg,
.ink-social-link:hover i,
.ink-social-link:hover svg {
  color: var(--ink-green-light) !important;
  fill: var(--ink-green-light) !important;
}


/* Remove platform-specific blue, pink or red backgrounds */

.elementor-social-icon-facebook,
.elementor-social-icon-instagram,
.elementor-social-icon-tiktok,
.elementor-social-icon-youtube,
.elementor-social-icon-twitter,
.elementor-social-icon-x-twitter {
  background:
    #191919 !important;
}


/* ----------------------------------------------------------
   13. CARDS
   ---------------------------------------------------------- */

.ink-card,
.artist-card,
.style-card,
.gallery-card,
.blog-card,
.faq-card,
.contact-card,
.tattoo-card,
.ink-photo-card {
  overflow: hidden;

  color: var(--ink-text);

  border: 1px solid var(--ink-border);
  border-radius: var(--ink-radius);

  background:
    linear-gradient(
      145deg,
      #1b1b1b,
      #111111
    );

  box-shadow:
    var(--ink-card-shadow);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.ink-card:hover,
.artist-card:hover,
.style-card:hover,
.gallery-card:hover,
.blog-card:hover,
.faq-card:hover,
.contact-card:hover,
.tattoo-card:hover,
.ink-photo-card:hover {
  border-color:
    var(--ink-border-hover);

  box-shadow:
    0 21px 48px rgba(0, 0, 0, 0.42);

  transform: translateY(-3px);
}


/* ----------------------------------------------------------
   14. GALLERY GRID
   ---------------------------------------------------------- */

.ink-gallery-grid,
.artist-gallery,
.tattoo-grid,
.portfolio-grid,
.ink-photo-grid,
.artist-portfolio-grid,
[class*="gallery-grid"],
[class*="portfolio-grid"] {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 16px;
}


/* ----------------------------------------------------------
   15. AGGRESSIVE CIRCLE/OVAL REMOVAL
   Overrides both gallery image and wrapper radius rules
   ---------------------------------------------------------- */

/* Gallery wrappers */

.ink-artist-page [class*="gallery"] figure,
.ink-artist-page [class*="gallery"] picture,
.ink-artist-page [class*="gallery"] .image,
.ink-artist-page [class*="gallery"] [class*="photo"],
.ink-artist-page [class*="gallery"] [class*="image"],
.ink-gallery-page [class*="gallery"] figure,
.ink-gallery-page [class*="gallery"] picture,
.ink-gallery-page [class*="gallery"] .image,
.ink-gallery-page [class*="gallery"] [class*="photo"],
.ink-gallery-page [class*="gallery"] [class*="image"],
.ink-gallery-item,
.tattoo-gallery-item,
.artist-gallery-item,
.gallery-image,
.tattoo-image,
.artist-gallery-image,
.gallery-card figure,
.tattoo-card figure,
.ink-photo-card figure {
  overflow: hidden !important;

  border-radius:
    var(--ink-radius-small) !important;

  clip-path:
    inset(0 round var(--ink-radius-small)) !important;

  -webkit-clip-path:
    inset(0 round var(--ink-radius-small)) !important;
}


/* Gallery images */

.ink-artist-page [class*="gallery"] img,
.ink-gallery-page [class*="gallery"] img,
.ink-gallery-grid img,
.artist-gallery img,
.tattoo-grid img,
.portfolio-grid img,
.ink-photo-grid img,
.artist-portfolio-grid img,
[class*="gallery-grid"] img,
[class*="portfolio-grid"] img,
.gallery-card img,
.tattoo-card img,
.ink-photo-card img,
.ink-gallery-item img,
.tattoo-gallery-item img,
.artist-gallery-item img,
img[class*="gallery"],
img[class*="portfolio"],
img[class*="tattoo-photo"] {
  display: block !important;

  width: 100% !important;
  height: auto !important;

  aspect-ratio:
    4 / 5 !important;

  object-fit:
    cover !important;

  object-position:
    center !important;

  border:
    1px solid var(--ink-border) !important;

  border-radius:
    var(--ink-radius-small) !important;

  clip-path:
    inset(0 round var(--ink-radius-small)) !important;

  -webkit-clip-path:
    inset(0 round var(--ink-radius-small)) !important;

  background:
    var(--ink-surface) !important;

  box-shadow:
    none !important;

  outline:
    none !important;
}


/* Override inline border-radius declarations */

.ink-artist-page img[style*="border-radius"],
.ink-gallery-page img[style*="border-radius"],
.ink-gallery-page figure[style*="border-radius"],
.ink-artist-page figure[style*="border-radius"] {
  border-radius:
    var(--ink-radius-small) !important;

  clip-path:
    inset(0 round var(--ink-radius-small)) !important;

  -webkit-clip-path:
    inset(0 round var(--ink-radius-small)) !important;
}


/* Remove circular borders from pseudo-elements */

.ink-artist-page [class*="gallery"] *::before,
.ink-artist-page [class*="gallery"] *::after,
.ink-gallery-page [class*="gallery"] *::before,
.ink-gallery-page [class*="gallery"] *::after {
  border-radius:
    var(--ink-radius-small) !important;
}


/* Neutral gallery image hover */

.ink-artist-page [class*="gallery"] img:hover,
.ink-gallery-page [class*="gallery"] img:hover,
.ink-gallery-grid img:hover,
.artist-gallery img:hover,
.tattoo-grid img:hover,
.portfolio-grid img:hover {
  border-color:
    var(--ink-border-hover) !important;

  filter:
    saturate(1.04)
    contrast(1.03)
    brightness(1.02);

  transform: none !important;
}


/* ----------------------------------------------------------
   16. FORMS
   ---------------------------------------------------------- */

input:not([type="button"]):not([type="submit"]):not([type="reset"]),
textarea,
select {
  width: 100%;

  color: var(--ink-white) !important;

  border:
    1px solid var(--ink-border) !important;

  border-radius:
    var(--ink-radius-small) !important;

  background:
    #161616 !important;
}

input:not([type="button"]):not([type="submit"]):not([type="reset"]),
select {
  min-height: 48px;
}

textarea {
  min-height: 150px;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;

  border-color:
    var(--ink-green-border) !important;

  box-shadow:
    0 0 0 3px rgba(141, 198, 63, 0.09) !important;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color:
    var(--ink-green) !important;
}

label {
  color: var(--ink-text);
  font-weight: 700;
}

::placeholder {
  color: #858585;
  opacity: 1;
}

select option {
  color: var(--ink-white);
  background: #161616;
}


/* ----------------------------------------------------------
   17. FAQ ELEMENTS
   ---------------------------------------------------------- */

details {
  margin-bottom: 14px;

  color: var(--ink-text);

  border: 1px solid var(--ink-border);
  border-radius: var(--ink-radius-small);

  background: var(--ink-surface);
}

summary {
  position: relative;

  padding: 20px 54px 20px 20px;

  color: var(--ink-white);

  font-weight: 800;
  cursor: pointer;

  list-style: none;
}

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

summary::after {
  content: "+";

  position: absolute;
  top: 50%;
  right: 20px;

  color: var(--ink-green);

  font-size: 1.35rem;

  transform: translateY(-50%);
}

details[open] summary::after {
  content: "−";
}

details > *:not(summary) {
  margin: 0;
  padding: 0 20px 20px;
}


/* ----------------------------------------------------------
   18. VIDEO
   ---------------------------------------------------------- */

.ink-video,
.video-frame,
.media-frame {
  overflow: hidden;

  width: 100%;

  border: 1px solid var(--ink-border);
  border-radius: var(--ink-radius);

  background: #000000;

  box-shadow: var(--ink-shadow);
}

.ink-video video,
.ink-video iframe,
.video-frame video,
.video-frame iframe,
.media-frame video,
.media-frame iframe {
  display: block;

  width: 100%;
  aspect-ratio: 16 / 9;

  border: 0;

  object-fit: cover;
}


/* ----------------------------------------------------------
   19. FOOTER
   ---------------------------------------------------------- */

.site-footer,
#colophon,
.elementor-location-footer {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;

  color: var(--ink-muted);

  border-top:
    1px solid var(--ink-border);

  background:
    linear-gradient(
      180deg,
      #0c0c0c,
      #050505
    ) !important;
}

.site-footer a,
#colophon a,
.elementor-location-footer a {
  color: var(--ink-muted) !important;
  text-decoration: none;
}

.site-footer a:hover,
#colophon a:hover,
.elementor-location-footer a:hover {
  color: var(--ink-white) !important;
}


/* ----------------------------------------------------------
   20. ACCESSIBILITY
   ---------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline:
    3px solid rgba(141, 198, 63, 0.42) !important;

  outline-offset: 3px;
}

::selection {
  color: #071000;
  background: var(--ink-green);
}


/* ----------------------------------------------------------
   21. SCROLLBAR
   ---------------------------------------------------------- */

::-webkit-scrollbar {
  width: 11px;
}

::-webkit-scrollbar-track {
  background: #050505;
}

::-webkit-scrollbar-thumb {
  border: 3px solid #050505;
  border-radius: 999px;

  background: #555555;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ink-green-dark);
}


/* ----------------------------------------------------------
   22. TABLET
   ---------------------------------------------------------- */

@media (max-width: 1024px) {
  .ink-gallery-grid,
  .artist-gallery,
  .tattoo-grid,
  .portfolio-grid,
  .ink-photo-grid,
  .artist-portfolio-grid,
  [class*="gallery-grid"],
  [class*="portfolio-grid"] {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}


/* ----------------------------------------------------------
   23. MOBILE
   ---------------------------------------------------------- */

@media (max-width: 767px) {
  body {
    background:
      linear-gradient(
        180deg,
        #050505,
        #0b0b0b 55%,
        #050505
      ) !important;
  }

  .ink-container,
  .ink-reading-width {
    width:
      min(calc(100% - 32px), 1280px);
  }

  .ink-gallery-grid,
  .artist-gallery,
  .tattoo-grid,
  .portfolio-grid,
  .ink-photo-grid,
  .artist-portfolio-grid,
  [class*="gallery-grid"],
  [class*="portfolio-grid"] {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 10px;
  }

  .site-header img,
  .elementor-location-header img {
    max-height: 78px;
  }

  .ink-card:hover,
  .artist-card:hover,
  .style-card:hover,
  .gallery-card:hover,
  .blog-card:hover,
  .faq-card:hover,
  .contact-card:hover,
  .tattoo-card:hover,
  .ink-photo-card:hover {
    transform: none;
  }
}


/* ----------------------------------------------------------
   24. SMALL MOBILE
   ---------------------------------------------------------- */

@media (max-width: 480px) {
  .ink-gallery-grid,
  .artist-gallery,
  .tattoo-grid,
  .portfolio-grid,
  .ink-photo-grid,
  .artist-portfolio-grid,
  [class*="gallery-grid"],
  [class*="portfolio-grid"] {
    grid-template-columns: 1fr;
  }

  .ink-artist-page [class*="gallery"] img,
  .ink-gallery-page [class*="gallery"] img,
  .ink-gallery-grid img,
  .artist-gallery img,
  .tattoo-grid img,
  .portfolio-grid img {
    aspect-ratio: auto !important;
    max-height: 650px;
  }
}


/* ----------------------------------------------------------
   25. REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Keep style-page consultation text readable on the existing dark buttons. */
body .ink-style-page a.ink-style-button,
body .ink-color-page a.ink-color-button,
body .ink-anime-page a.ink-anime-button,
body .ink-japanese-page a.ink-japanese-button,
body .ink-portrait-page a.ink-portrait-button,
body .ink-blackwork-page a.ink-blackwork-button,
body .ink-large-page a.ink-large-button {
  color: #ffffff !important;
}