@charset "UTF-8";
/*
Theme Name: Bassthreads Theme
Theme URI: https://www.chrisholder.me/
Version: 1.0.0
Author: Chris Holder <chrislholder@gmail.com>
Author URI: https://chrisholder.me/
Text Domain: WPCH
*/
:root {
  --color-black: #000;
  --color-ink: #1D1C1C;
  --color-ink-2: #1A1818;
  --color-gray: #F5F5F5;
  --color-dark-gray: #707070;
  --color-white: #fff;
  --color-purple: #7880FE;
  --color-purple-2: #6FC8FF;
  --color-highlight: var(--color-purple);
  --color-orange: var(--color-purple);
  --color-gradient: linear-gradient(180deg, #6FC8FF 0%, #7880FE 100%);
  /* Fonts */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Type scale (Figma) */
  --fs-display: clamp(3rem, 7vw, 6rem);
  --fs-h1: clamp(2.5rem, 5.5vw, 4rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  /* Site Settings */
  --site-header-height: 104px;
  --site-header-mobile-height: 84px;
  --site-adminbar-height: 32px;
  --site-adminbar-mobile-height: 46px;
  --site-padding: 4%;
  --site-max-width: 1200px;
  --site-line-height: 1.5;
  --site-border-radius: 0.5rem;
  --site-grid-gap: 2rem;
  /* Site Colors */
  --site-text-color: var(--color-ink);
  --site-overlay-color: var(--color-black);
  --site-header-color: var(--color-black);
  --site-footer-color: var(--color-black);
  --site-background-color: var(--color-white);
  --site-nav-hover-color: var(--color-purple);
  /* Buttons */
  --button-color: var(--color-ink);
  --button-hover: var(--color-gray);
  --button-important: var(--color-highlight);
  --button-border-radius: 0.5rem;
}

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

/* ---------- TYPOGRAPHY ---------- */
body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--site-line-height);
  color: var(--site-text-color);
  -webkit-font-smoothing: antialiased;
}
body ::selection {
  background: var(--color-highlight);
  color: var(--color-white);
}

p {
  line-height: var(--site-line-height);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 900;
  line-height: 1.05;
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1.1rem;
}

p + h1,
p + h2,
p + h3, ul + h1,
ul + h2,
ul + h3 {
  margin-top: 2rem;
}

ul {
  padding-left: 1rem;
}

li {
  line-height: var(--site-line-height);
  margin-bottom: 0.5rem;
}

.txt-center {
  text-align: center;
}

.txt-left {
  text-align: left;
}

.txt-right {
  text-align: right;
}

/* ---------- LINKS ---------- */
p a,
li a {
  color: var(--color-highlight);
}

/* Section eyebrow titles ( //Featured artists ) */
.section-title {
  font-size: var(--fs-h2);
  font-weight: 900;
}

/* ---------- BUTTONS ---------- */
.button, .nf-form-content input[type=button],
.nf-form-content input[type=submit],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button, button, input[type=submit] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto !important;
  padding: 1rem 1.75rem !important;
  margin-right: 0.75rem;
  font-family: var(--font-sans);
  font-size: 1.25rem !important;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border-radius: 999px !important;
  cursor: pointer;
  background: var(--color-purple);
  border: 2px solid var(--color-purple);
  color: var(--color-white);
  transition: all 333ms ease-in-out;
}
.button:hover, .nf-form-content input[type=button]:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover, button:hover, input[type=submit]:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-white);
}
.button, .nf-form-content input[type=button],
.nf-form-content input[type=submit],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button, button, input[type=submit] {
  /* Primary gradient pill (Figma BassThreads gradient) */
}
.button.button--gradient, .nf-form-content input.button--gradient[type=button],
.woocommerce #respond input.button--gradient#submit,
.woocommerce a.button--gradient.button,
.woocommerce button.button--gradient.button,
.woocommerce input.button--gradient.button, button.button--gradient, input[type=submit].button--gradient {
  background: linear-gradient(159deg, #6FC8FF 11%, #7880FE 104%);
  border-color: transparent;
  color: var(--color-white);
}
.button.button--gradient:hover, .nf-form-content input.button--gradient[type=button]:hover,
.woocommerce #respond input.button--gradient#submit:hover, button.button--gradient:hover, input[type=submit].button--gradient:hover {
  filter: brightness(0.95);
  background: linear-gradient(159deg, #6FC8FF 11%, #7880FE 104%);
}
.button, .nf-form-content input[type=button],
.nf-form-content input[type=submit],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button, button, input[type=submit] {
  /* Secondary / outline (Learn More) */
}
.button.secondary, .nf-form-content input.secondary[type=button],
.woocommerce #respond input.secondary#submit,
.woocommerce a.secondary.button,
.woocommerce button.secondary.button,
.woocommerce input.secondary.button, .button.outline, .nf-form-content input.outline[type=button],
.woocommerce #respond input.outline#submit,
.woocommerce a.outline.button,
.woocommerce button.outline.button,
.woocommerce input.outline.button, button.secondary, button.outline, input[type=submit].secondary, input[type=submit].outline {
  background: transparent;
  border: 2px solid var(--color-ink);
  color: var(--color-ink);
  font-weight: 500;
}
.button.secondary:hover, .nf-form-content input.secondary[type=button]:hover,
.woocommerce #respond input.secondary#submit:hover, .button.outline:hover, .nf-form-content input.outline[type=button]:hover,
.woocommerce #respond input.outline#submit:hover, button.secondary:hover, button.outline:hover, input[type=submit].secondary:hover, input[type=submit].outline:hover {
  background: var(--color-ink);
  color: var(--color-white);
}
.button, .nf-form-content input[type=button],
.nf-form-content input[type=submit],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button, button, input[type=submit] {
  /* Legacy alias kept so existing markup ( .button.orange ) still styles */
}
.button.orange, .nf-form-content input.orange[type=button],
.woocommerce #respond input.orange#submit,
.woocommerce a.orange.button,
.woocommerce button.orange.button,
.woocommerce input.orange.button, button.orange, input[type=submit].orange {
  background: var(--color-gradient);
  border: 2px solid transparent;
  color: var(--color-white);
}
.button.orange:hover, .nf-form-content input.orange[type=button]:hover,
.woocommerce #respond input.orange#submit:hover, button.orange:hover, input[type=submit].orange:hover {
  filter: hue-rotate(20deg);
}
.button:last-of-type, .nf-form-content input[type=button]:last-of-type,
.woocommerce #respond input#submit:last-of-type,
.woocommerce a.button:last-of-type,
.woocommerce button.button:last-of-type,
.woocommerce input.button:last-of-type, button:last-of-type, input[type=submit]:last-of-type {
  margin-right: 0;
}

/* Wrapper */
.button-wrapper {
  flex: 1;
  margin-top: 2rem;
  text-align: center;
}

/* ---------- Favorite Button ----------- */
.simplefavorite-button {
  opacity: 1 !important;
  font-size: 0.75rem;
}
.simplefavorite-button.active {
  opacity: 1 !important;
  background: var(--color-purple);
  border-color: var(--color-purple);
  color: var(--color-white);
}
.simplefavorite-button.active .sf-icon-star-full {
  margin-left: 0.25rem;
}
.simplefavorite-button.active:hover {
  border-color: var(--button-hover);
  background: var(--button-hover);
}

/* ---------- FORMS ---------- */
input[type=text],
input[type=email],
input[type=tel],
input[type=password],
textarea,
.nf-form-content input:not([type=button]):not([type=submit]),
.nf-form-content textarea {
  font-size: 16px;
  font-family: var(--font-sans);
  font-weight: normal;
  margin: 0;
  padding: 12px;
  background: white !important;
  color: var(--site-text-color) !important;
  border: 1px solid var(--color-gray) !important;
  border-radius: var(--site-border-radius) !important;
}

.nf-form-content input:not([type=button])::placeholder,
.nf-form-content textarea::placeholder {
  /* color: var(--site-text-color); */
}

/* ---------- MEDIA ---------- */
img {
  max-width: 100%;
}
img.alignright {
  float: right;
  margin: 1rem 0 1.5rem 2rem;
  max-width: 40%;
}
@media (max-width: 600px) {
  img.alignright {
    margin: 1rem 0;
    width: 100%;
    max-width: 100%;
  }
}
img.alignleft {
  float: left;
  margin: 1rem 2rem 1.5rem 0;
  max-width: 40%;
}
@media (max-width: 600px) {
  img.alignleft {
    margin: 1rem 0;
    width: 100%;
    max-width: 100%;
  }
}
img.aligncenter {
  width: 100%;
  margin: 1rem 0;
}

figure.wp-block-image {
  width: 100%;
  margin: 2rem 0;
  text-align: center;
}

.bkgd-image {
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}

/* ---------- HEADER ---------- */
#site-header {
  position: sticky;
  top: 0;
  flex: 100%;
  display: flex;
  align-items: center;
  min-height: var(--site-header-height);
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  background: var(--site-header-color);
  border-bottom: 4px solid var(--color-purple-2);
  z-index: 999;
  transition: 500ms all ease-in-out;
}
@media (max-width: 1112px) {
  #site-header {
    position: relative;
  }
}
body.admin-bar #site-header {
  top: var(--site-adminbar-height);
}
@media (max-width: 1112px) {
  body.admin-bar #site-header {
    top: 0;
  }
}
#site-header {
  /* Logo (dynamic, from ACF options) — centered like Figma */
}
#site-header h1#logo {
  margin: 0;
}
#site-header h1#logo a {
  color: var(--color-white);
  text-decoration: none;
}
#site-header a#logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
}
#site-header a#logo img {
  height: 60px;
  width: auto;
  aspect-ratio: 203/158;
}
@media (max-width: 1112px) {
  #site-header a#logo {
    position: static;
    transform: none;
    left: auto;
    top: auto;
  }
}

/* Navigation */
.menu-header-menu-container {
  margin-left: auto;
}
.menu-header-menu-container .menu {
  display: flex;
  align-items: center;
}
@media (max-width: 1112px) {
  .menu-header-menu-container {
    position: fixed;
    right: 0;
    top: -200vh;
    bottom: 0;
    height: 100vh;
    width: 100vw;
    padding-top: 4rem;
    background: var(--site-header-color);
    transition: 333ms all ease-in-out;
  }
  .menu-header-menu-container .menu {
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
  }
}

.menu li {
  display: inline-block;
  list-style: none;
  margin-left: 29px;
  margin-bottom: 0;
  line-height: 1;
}
@media (max-width: 1112px) {
  .menu li {
    display: block;
    flex: 100%;
    margin-left: 0;
    margin-bottom: 0;
    padding: 0.5rem 1rem;
    background: var(--site-header-color);
  }
}
.menu li a {
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: 333ms all ease-in-out;
}
.menu li a svg {
  width: 1.4rem;
  height: auto;
}
.menu li a svg path {
  fill: var(--color-white);
}
.menu li.menu-item-has-children > a:after {
  content: "▼";
  position: relative;
  top: -0.1rem;
  margin-left: 0.5rem;
  color: var(--color-white);
  font-size: 0.6rem;
  transition: 333ms all ease-in-out;
}
.menu li {
  /* Sub Menu */
}
.menu li .sub-menu {
  position: absolute;
  padding: 0.5rem 0 0;
  opacity: 0;
  transform: translateX(-1rem);
  pointer-events: none;
  transition: all 333ms ease-in-out;
}
@media (max-width: 1112px) {
  .menu li .sub-menu {
    position: relative;
    opacity: 1;
    pointer-events: all;
  }
}
.menu li .sub-menu li {
  display: block;
  margin-left: 0;
  margin-bottom: 0;
  padding: 0.5rem 1rem;
  background: var(--site-header-color);
  transition: all 500ms ease-in-out;
}
@media (max-width: 1112px) {
  .menu li .sub-menu li {
    padding-left: 3rem;
    padding-top: 0.25rem;
  }
}
.menu li {
  /* Menu Item as Button (e.g. Get Started) */
}
.menu li.button {
  border: none;
  background: none;
  padding: 0 !important;
  margin-left: 2.5rem;
}
.menu li.button a {
  display: inline-flex;
  padding: 0.75rem 1.5rem;
  color: var(--color-white) !important;
  background: var(--color-purple);
  border-radius: 999px !important;
}
.menu li.button a:hover {
  background: var(--color-ink);
}
@media (max-width: 1112px) {
  .menu li.button {
    flex: 3;
    text-align: center;
    margin: 1.5rem 1rem 1rem;
    padding: 0;
  }
}
.menu li.cart svg path {
  fill: var(--color-white);
}
.menu li.cart.current-menu-item svg path {
  fill: var(--site-nav-hover-color);
}
.menu li a:hover,
.menu li.current-menu-item > a,
.menu li.current_page_ancestor > a {
  color: var(--site-nav-hover-color);
}
.menu li a:hover:after,
.menu li.current-menu-item > a:after,
.menu li.current_page_ancestor > a:after {
  color: var(--site-nav-hover-color);
}
.menu li a:hover svg path,
.menu li.current-menu-item > a svg path,
.menu li.current_page_ancestor > a svg path {
  fill: var(--site-nav-hover-color);
}
.menu li.menu-item-has-children:hover .sub-menu {
  opacity: 1;
  pointer-events: all;
}

/* ----------- Mobile Menu ----------- */
#menu-toggle {
  display: none;
}
@media (max-width: 1112px) {
  #menu-toggle:checked ~ .menu-header-menu-container {
    top: 0;
  }
  #menu-toggle:checked ~ #menu-close {
    top: 1rem;
  }
}

#menu-close {
  position: absolute;
  top: -200vh;
  right: 1rem;
  color: var(--color-white);
  font-size: 1.8rem;
  z-index: 99;
  cursor: pointer;
  transition: 333ms all ease-in-out;
}

.menu-button-container {
  display: none;
  margin-left: auto;
}
@media (max-width: 1112px) {
  .menu-button-container {
    display: block;
  }
}

.menu-button {
  color: var(--color-white);
  font-size: 3rem;
  cursor: pointer;
  transition: 333ms all ease-in-out;
}

.menu-button:hover {
  color: var(--site-nav-hover-color);
}

/* ---------- FOOTER (Figma Footer Navigation) ---------- */
footer {
  flex: 100%;
  background: var(--site-footer-color);
  border-top: 6px solid var(--color-purple-2);
  color: var(--color-white);
  padding: 49px clamp(1.5rem, 10vw, 149px);
}
footer .footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  max-width: 441px;
}
@media (max-width: 600px) {
  footer .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
}
footer .footer-brand a#logo {
  display: inline-block;
}
footer .footer-brand a#logo img {
  width: 203px;
  max-width: 45vw;
  height: auto;
}
footer .footer-nav ul, footer .footer-nav .menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
footer .footer-nav li {
  display: block;
  margin: 0 0 8px;
}
footer .footer-nav li:last-child {
  margin-bottom: 0;
}
footer .footer-nav li a {
  color: var(--color-white);
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  text-decoration: none;
  transition: 333ms all ease-in-out;
}
footer .footer-nav li a:hover {
  color: var(--color-purple-2);
}

.woocommerce-shop .product {
  width: 30.75% !important;
}
@media (max-width: 800px) {
  .woocommerce-shop .product {
    width: 47% !important;
  }
}
@media (max-width: 600px) {
  .woocommerce-shop .product {
    width: 100% !important;
  }
}
.woocommerce-shop .product:nth-child(3n) {
  margin-right: 0 !important;
}
.woocommerce-shop .product img {
  background: var(--color-gray);
}
.woocommerce-shop .product h2 {
  padding: 0 !important;
  margin: 2rem 0 0 !important;
  color: var(--color-black);
  font-size: 2.2rem !important;
  line-height: 1.2;
}
.woocommerce-shop .product .price {
  margin-bottom: 0 !important;
  color: var(--color-dark-gray) !important;
  font-size: 1.4rem !important;
}
.woocommerce-shop .product .button, .woocommerce-shop .product .nf-form-content input[type=button], .nf-form-content .woocommerce-shop .product input[type=button], .woocommerce-shop .nf-form-content .product input[type=button],
.woocommerce-shop .product .nf-form-content input[type=submit],
.nf-form-content .woocommerce-shop .product input[type=submit],
.woocommerce-shop .nf-form-content .product input[type=submit],
.woocommerce-shop .product .woocommerce #respond input#submit,
.woocommerce #respond .woocommerce-shop .product input#submit,
.woocommerce-shop .woocommerce #respond .product input#submit {
  width: 100%;
  background: var(--color-gradient);
  color: white;
  padding: 1.25rem !important;
}
.woocommerce-shop .product .button:hover, .woocommerce-shop .product .nf-form-content input[type=button]:hover, .nf-form-content .woocommerce-shop .product input[type=button]:hover, .woocommerce-shop .nf-form-content .product input[type=button]:hover,
.woocommerce-shop .product .nf-form-content input[type=submit]:hover,
.nf-form-content .woocommerce-shop .product input[type=submit]:hover,
.woocommerce-shop .nf-form-content .product input[type=submit]:hover,
.woocommerce-shop .product .woocommerce #respond input#submit:hover,
.woocommerce #respond .woocommerce-shop .product input#submit:hover,
.woocommerce-shop .woocommerce #respond .product input#submit:hover {
  background: var(--color-gradient);
  filter: hue-rotate(140deg);
}
.woocommerce-shop .product .added_to_cart {
  display: block;
  text-align: center;
  width: 50%;
  margin: 1rem auto 0;
  padding: 0.5rem 1rem !important;
  border-radius: var(--button-border-radius);
  color: var(--color-white);
  background: var(--color-orange);
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 600;
}

.woocommerce #primary {
  width: calc(100% - var(--site-padding) * 2);
  margin: 2rem auto;
  padding-bottom: 5rem;
  max-width: 1200px;
}
@media (max-width: 600px) {
  .woocommerce #primary {
    width: calc(95% - var(--site-padding) * 2);
  }
}
.woocommerce #sidebar {
  display: none;
}
.woocommerce {
  /* Product listing grid (Figma Item Card) */
}
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}
@media (max-width: 1112px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 800px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
.woocommerce ul.products li.product:before {
  content: none !important;
}
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-top-color: var(--color-orange);
}
.woocommerce .woocommerce-error:before,
.woocommerce .woocommerce-info:before,
.woocommerce .woocommerce-message:before {
  top: auto;
  color: var(--color-orange);
}
@media (max-width: 600px) {
  .woocommerce .woocommerce-error,
  .woocommerce .woocommerce-info,
  .woocommerce .woocommerce-message {
    flex-wrap: wrap;
  }
  .woocommerce .woocommerce-error:before,
  .woocommerce .woocommerce-info:before,
  .woocommerce .woocommerce-message:before {
    align-self: baseline;
  }
}
.woocommerce .woocommerce-error .button, .woocommerce .woocommerce-error .nf-form-content input[type=button], .nf-form-content .woocommerce .woocommerce-error input[type=button],
.woocommerce .woocommerce-error .nf-form-content input[type=submit],
.nf-form-content .woocommerce .woocommerce-error input[type=submit],
.woocommerce .woocommerce-error #respond input#submit,
.woocommerce #respond .woocommerce-error input#submit,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-info .nf-form-content input[type=button],
.nf-form-content .woocommerce .woocommerce-info input[type=button],
.woocommerce .woocommerce-info .nf-form-content input[type=submit],
.nf-form-content .woocommerce .woocommerce-info input[type=submit],
.woocommerce .woocommerce-info #respond input#submit,
.woocommerce #respond .woocommerce-info input#submit,
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-message .nf-form-content input[type=button],
.nf-form-content .woocommerce .woocommerce-message input[type=button],
.woocommerce .woocommerce-message .nf-form-content input[type=submit],
.nf-form-content .woocommerce .woocommerce-message input[type=submit],
.woocommerce .woocommerce-message #respond input#submit,
.woocommerce #respond .woocommerce-message input#submit {
  order: 2;
  margin-left: auto;
  background: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-white);
}
@media (max-width: 600px) {
  .woocommerce .woocommerce-error .button, .woocommerce .woocommerce-error .nf-form-content input[type=button], .nf-form-content .woocommerce .woocommerce-error input[type=button],
  .woocommerce .woocommerce-error .nf-form-content input[type=submit],
  .nf-form-content .woocommerce .woocommerce-error input[type=submit],
  .woocommerce .woocommerce-error #respond input#submit,
  .woocommerce #respond .woocommerce-error input#submit,
  .woocommerce .woocommerce-info .button,
  .woocommerce .woocommerce-info .nf-form-content input[type=button],
  .nf-form-content .woocommerce .woocommerce-info input[type=button],
  .woocommerce .woocommerce-info .nf-form-content input[type=submit],
  .nf-form-content .woocommerce .woocommerce-info input[type=submit],
  .woocommerce .woocommerce-info #respond input#submit,
  .woocommerce #respond .woocommerce-info input#submit,
  .woocommerce .woocommerce-message .button,
  .woocommerce .woocommerce-message .nf-form-content input[type=button],
  .nf-form-content .woocommerce .woocommerce-message input[type=button],
  .woocommerce .woocommerce-message .nf-form-content input[type=submit],
  .nf-form-content .woocommerce .woocommerce-message input[type=submit],
  .woocommerce .woocommerce-message #respond input#submit,
  .woocommerce #respond .woocommerce-message input#submit {
    width: 100%;
    margin-top: 1rem;
  }
}
.woocommerce-shop .woocommerce-breadcrumb,
.woocommerce-shop .woocommerce-products-header,
.woocommerce-shop .woocommerce-result-count {
  display: none;
}
.woocommerce-shop .woocommerce-ordering {
  width: 100%;
  padding: 2rem 0;
  text-align: center;
}
.woocommerce-shop .woocommerce-ordering select {
  appearance: none;
  padding: 1rem 3rem;
  text-align-last: center;
  border: none;
  border-bottom: 1px solid var(--color-black);
  border-radius: 0;
}
.woocommerce-shop .woocommerce-ordering select:active, .woocommerce-shop .woocommerce-ordering select:focus {
  outline: none;
}
.woocommerce.single-product {
  /* Breadcrumb: "ARTIST Shop / Product Name" */
}
.woocommerce.single-product .woocommerce-breadcrumb {
  margin: 0 0 2.5rem;
  padding: 0;
  font-size: 14px;
  line-height: 1.4;
  color: #757575;
}
.woocommerce.single-product .woocommerce-breadcrumb a {
  color: #757575;
  text-decoration: none;
}
.woocommerce.single-product .woocommerce-breadcrumb a:hover {
  color: var(--color-purple);
}
.woocommerce.single-product .woocommerce-tabs {
  display: none;
}
.woocommerce.single-product {
  /* 2-column: image left, summary right (Figma gap 32) */
}
.woocommerce.single-product .product-main {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
@media (max-width: 800px) {
  .woocommerce.single-product .product-main {
    flex-direction: column;
    gap: 2rem;
  }
}
.woocommerce.single-product .product {
  display: block;
}
.woocommerce.single-product .product .bt-single-image {
  flex: 1 1 0;
  min-width: 0;
  background: #F5F5F5;
  border-radius: 8px;
  overflow: hidden;
}
.woocommerce.single-product .product .bt-single-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: 672/549;
  padding: 2.5rem;
}
.woocommerce.single-product .product {
  /* ----- Summary column ----- */
}
.woocommerce.single-product .product .product_title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--color-ink);
}
.woocommerce.single-product .product {
  /* Category tag pill (Figma "T-Shirt") */
}
.woocommerce.single-product .product .bt-product-tag {
  display: inline-block;
  margin: 16px 0 0;
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid #D9D9D9;
  border-radius: 8px;
}
.woocommerce.single-product .product .price {
  margin: 16px 0 0;
  font-family: var(--font-sans);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-ink);
}
.woocommerce.single-product .product .price .woocommerce-Price-currencySymbol {
  font-size: 24px;
  vertical-align: super;
  font-weight: 700;
}
.woocommerce.single-product .product .price del {
  color: #757575;
  font-weight: 400;
  margin-right: 0.5rem;
}
.woocommerce.single-product .product .price ins {
  text-decoration: none;
}
.woocommerce.single-product .product .woocommerce-product-details__short-description {
  margin: 16px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #757575;
}
.woocommerce.single-product .product .woocommerce-product-details__short-description p {
  margin: 0;
}
.woocommerce.single-product .product {
  /* ----- Fields: size + quantity row (Figma gap 24) ----- */
}
.woocommerce.single-product .product form.cart {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  row-gap: 24px;
  align-items: end;
  margin: 24px 0 0;
}
.woocommerce.single-product .product form.cart:not(.variations_form) .quantity {
  grid-column: 1/-1;
}
.woocommerce.single-product .product form.cart .variations {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  margin: 0;
  border: none;
  display: block;
}
.woocommerce.single-product .product form.cart .variations table, .woocommerce.single-product .product form.cart .variations tbody, .woocommerce.single-product .product form.cart .variations tr, .woocommerce.single-product .product form.cart .variations th, .woocommerce.single-product .product form.cart .variations td {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
}
.woocommerce.single-product .product form.cart .variations .label {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  color: var(--color-ink);
}
.woocommerce.single-product .product form.cart .variations .label label {
  font-weight: 400;
}
.woocommerce.single-product .product form.cart .variations .value {
  position: relative;
  line-height: 0;
}
.woocommerce.single-product .product form.cart .variations .value:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--color-ink);
  border-bottom: 2px solid var(--color-ink);
  transform: rotate(45deg);
  pointer-events: none;
}
.woocommerce.single-product .product form.cart .variations .value select {
  appearance: none;
  width: 100%;
  margin: 0;
  padding: 16px;
  background: var(--color-white);
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1;
  color: var(--color-ink);
}
.woocommerce.single-product .product form.cart .variations .value select:focus {
  outline: none;
  border-color: var(--color-purple);
}
.woocommerce.single-product .product form.cart .variations .value .reset_variations {
  display: none !important;
}
.woocommerce.single-product .product form.cart .single_variation_wrap,
.woocommerce.single-product .product form.cart .woocommerce-variation-add-to-cart {
  display: contents !important;
}
.woocommerce.single-product .product form.cart .woocommerce-variation,
.woocommerce.single-product .product form.cart .woocommerce-variation-availability,
.woocommerce.single-product .product form.cart .woocommerce-variation-price,
.woocommerce.single-product .product form.cart .reset_variations_alert {
  display: none !important;
}
.woocommerce.single-product .product form.cart button.qty {
  display: none !important;
}
.woocommerce.single-product .product form.cart .quantity {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  position: relative;
}
.woocommerce.single-product .product form.cart .quantity:before {
  content: "Quantity";
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-ink);
}
.woocommerce.single-product .product form.cart .quantity input {
  appearance: none;
  width: 100%;
  padding: 16px;
  background: var(--color-white);
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1;
  color: var(--color-ink);
}
.woocommerce.single-product .product form.cart .quantity input::-webkit-inner-spin-button, .woocommerce.single-product .product form.cart .quantity input::-webkit-outer-spin-button {
  appearance: none;
}
.woocommerce.single-product .product form.cart .quantity input:focus {
  outline: none;
  border-color: var(--color-purple);
}
.woocommerce.single-product .product form.cart .single_add_to_cart_button {
  grid-column: 1/-1;
  width: 100%;
  padding: 16px 32px;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  color: var(--color-white) !important;
  background: var(--color-gradient);
  border: none;
  border-radius: 61px;
  cursor: pointer;
  transition: 333ms all ease-in-out;
}
.woocommerce.single-product .product form.cart .single_add_to_cart_button:hover {
  background: var(--color-gradient);
  filter: hue-rotate(140deg);
}
.woocommerce.single-product .product .product_meta {
  display: none;
}
.woocommerce.single-product .product .product-accordion {
  margin: 24px 0 0;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  overflow: hidden;
}
.woocommerce.single-product .product .product-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
}
.woocommerce.single-product .product .product-accordion__chevron {
  flex-shrink: 0;
  color: var(--color-ink);
  transition: 300ms transform ease-in-out;
}
.woocommerce.single-product .product .product-accordion__body {
  display: none;
  padding: 0 20px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #757575;
}
.woocommerce.single-product .product .product-accordion__body h2 {
  display: none;
}
.woocommerce.single-product .product .product-accordion__body p {
  margin: 0 0 0.5rem;
}
.woocommerce.single-product .product .product-accordion__body ul {
  margin: 0;
  padding-left: 1.2rem;
}
.woocommerce.single-product .product .product-accordion.is-open .product-accordion__body {
  display: block;
}
.woocommerce.single-product .product .product-accordion.is-open .product-accordion__chevron {
  transform: rotate(180deg);
}
.woocommerce.single-product .related.products {
  clear: both;
  margin-top: 5rem;
}
.woocommerce.single-product .related.products > h2 {
  margin: 0 0 35px;
  padding-bottom: 16px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-ink);
}
.woocommerce-cart .component.wysiwyg .section-wrap {
  max-width: 900px;
}
.woocommerce-cart .woocommerce-cart-form .quantity input {
  padding: 0.5rem 0.75rem;
  width: 5rem;
  background: var(--color-gray);
  border: none;
  border-radius: var(--button-border-radius);
  overflow: hidden;
}
.woocommerce-cart .woocommerce-cart-form .quantity input::-webkit-inner-spin-button, .woocommerce-cart .woocommerce-cart-form .quantity input::-webkit-outer-spin-button {
  appearance: none;
}
.woocommerce-cart .woocommerce-cart-form .quantity input + div {
  display: none;
}
.woocommerce-cart .coupon #coupon_code {
  width: 12rem;
  padding: 1rem;
}
@media (max-width: 600px) {
  .woocommerce-cart .coupon #coupon_code {
    width: 10rem;
  }
}
.woocommerce-cart .actions button {
  background: var(--color-gray);
  padding: 1.12rem 1rem !important;
}
.woocommerce-cart .cart_totals {
  width: 100% !important;
}
.woocommerce-cart .cart_totals h2 {
  margin-bottom: 1rem;
  font-size: 2rem;
}
.woocommerce-cart .cart_totals .cart-subtotal td,
.woocommerce-cart .cart_totals .order-total td {
  text-align: right;
}
.woocommerce-cart .cart_totals .checkout-button {
  background: var(--color-gradient);
  padding: 1rem !important;
}
.woocommerce-cart .cart_totals .checkout-button:hover {
  background: var(--color-gradient);
  filter: hue-rotate(140deg);
}
.woocommerce-checkout .component.wysiwyg .section-wrap {
  max-width: 900px;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle {
  display: none;
}
.woocommerce-checkout #customer_details .col-1 {
  width: 100%;
}
.woocommerce-checkout #customer_details .col-2 {
  width: 100%;
  margin: 3rem 0;
}
.woocommerce-checkout #customer_details .woocommerce-billing-fields h3 {
  margin-bottom: 1rem;
}
.woocommerce-checkout #customer_details .selection > span {
  height: 3rem;
}
.woocommerce-checkout #customer_details .selection > span span:first-of-type {
  padding-top: 0.6rem;
  padding-left: 1rem;
}
.woocommerce-checkout #customer_details .selection > span span:last-of-type {
  top: 0.6rem;
  right: 1rem;
}
.woocommerce-checkout #order_comments_field label {
  margin-bottom: 1rem;
}
.woocommerce-checkout #order_review_heading {
  margin-bottom: 1rem;
}
.woocommerce-checkout #payment {
  background: #f5f5f5;
}
.woocommerce-checkout #payment label {
  color: var(--color-black);
}
.woocommerce-checkout #payment > label {
  display: none;
}
.woocommerce-checkout #payment div.payment_box {
  background: none;
  padding: 0;
  color: var(--color-black);
}
.woocommerce-checkout #payment div.payment_box:before {
  content: none;
}
.woocommerce-checkout #payment div.payment_box .form-row {
  padding: 0;
}
.woocommerce-checkout #payment div.payment_box .wc-stripe-elements-field {
  padding: 1rem;
}
.woocommerce-checkout #payment div.payment_box fieldset {
  padding: 0;
  border: none;
}
.woocommerce-checkout #place_order {
  width: 100%;
  padding: 1rem !important;
  border: none;
  background: var(--color-gradient);
}
.woocommerce-checkout #place_order:hover {
  background: var(--color-gradient);
  filter: hue-rotate(140deg);
}
.woocommerce-checkout .woocommerce-order .woocommerce-notice {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}
.woocommerce-checkout .woocommerce-order .woocommerce-order-details__title,
.woocommerce-checkout .woocommerce-order .woocommerce-column__title {
  margin-bottom: 1rem;
}

/* ============ SERVICES PAGE (Figma 73:149) ============ */
.services-page {
  --services-col: 907px;
  flex: 1 0 100%;
  width: 100%;
}
.services-page .services-wrap {
  max-width: var(--services-col);
  margin: 0 auto;
}

/* Shared section shell — 96px vertical / 32px horizontal, 48px stack gap */
.services-intro,
.services-band {
  padding: 96px 32px;
}
.services-intro .services-wrap,
.services-band .services-wrap {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: stretch;
}
@media (max-width: 1112px) {
  .services-intro,
  .services-band {
    padding: 64px var(--site-padding);
  }
}

.services-intro {
  background: var(--color-white);
}

.services-band {
  background: var(--color-black);
}

/* Eyebrow title: //Services , //What We Do */
.services-eyebrow {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-ink);
}
.services-eyebrow h1, .services-eyebrow h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 36px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-ink);
}
.services-eyebrow--light {
  border-bottom-color: var(--color-white);
}
.services-eyebrow--light h1, .services-eyebrow--light h2 {
  color: var(--color-white);
}

/* Intro text rows: heading col + body col, centered to the 907 column */
.services-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.services-row__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.services-row__head h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 20px;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--color-ink);
}
.services-row__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.services-row__body p {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-ink);
}
@media (max-width: 800px) {
  .services-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* 1px section rule */
.services-rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-ink);
}

/* ===== What We Do: 2x2 service cards (dark) ===== */
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  row-gap: 48px;
}
@media (max-width: 800px) {
  .services-grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
}

.service-card {
  display: flex;
  flex-direction: column;
}
.service-card h3 {
  margin: 0 0 16px;
  padding-top: 8px;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 20px;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--color-white);
}
.service-card .services-rule {
  background: var(--color-white);
  margin-bottom: 32px;
}
.service-card p {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-white);
}

/* Get Started CTA */
.services-cta {
  display: flex;
  justify-content: center;
}
.services-cta .button, .services-cta .nf-form-content input[type=button], .nf-form-content .services-cta input[type=button],
.services-cta .nf-form-content input[type=submit],
.nf-form-content .services-cta input[type=submit],
.services-cta .woocommerce #respond input#submit,
.woocommerce #respond .services-cta input#submit,
.services-cta .woocommerce a.button,
.woocommerce .services-cta a.button,
.services-cta .woocommerce button.button,
.woocommerce .services-cta button.button,
.services-cta .woocommerce input.button,
.woocommerce .services-cta input.button {
  margin: 0;
}

/* ============ CONTACT PAGE (Figma 74:150) ============ */
.contact-page {
  --contact-col: 907px;
  flex: 1 0 100%;
  width: 100%;
  background: var(--color-white);
}
.contact-page .contact-wrap {
  max-width: var(--contact-col);
  margin: 0 auto;
}

/* 1px rule shared */
.contact-rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-ink);
}

/* ===== Title band ===== */
.contact-title {
  padding: 96px 32px 24px;
}
.contact-title .contact-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 1112px) {
  .contact-title {
    padding: 64px var(--site-padding) 24px;
  }
}

.contact-eyebrow {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 36px;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--color-ink);
}

/* ===== Body: info + form ===== */
.contact-body {
  padding: 64px 32px 128px;
}
.contact-body__inner {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 64px;
}
@media (max-width: 1112px) {
  .contact-body {
    padding: 48px var(--site-padding) 80px;
  }
  .contact-body__inner {
    flex-direction: column;
    gap: 48px;
  }
}

/* ----- Info column ----- */
.contact-info {
  flex: 0 0 345px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-info__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-info__head h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 20px;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--color-ink);
}
.contact-info__blurb {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-ink);
}
@media (max-width: 1112px) {
  .contact-info {
    flex-basis: auto;
    width: 100%;
  }
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding-top: 16px;
}
.contact-details__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contact-details dt {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-ink);
}
.contact-details dd {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-ink);
}
.contact-details dd a {
  color: inherit;
  text-decoration: none;
}
.contact-details dd a:hover {
  color: var(--color-purple);
}

/* ----- Form column ----- */
.contact-form-col {
  flex: 0 0 498px;
  padding-top: 16px;
}
@media (max-width: 1112px) {
  .contact-form-col {
    flex-basis: auto;
    width: 100%;
    padding-top: 0;
  }
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-form__row {
  display: flex;
  gap: 16px;
}
.contact-form__row .field--name {
  flex: 0 0 242px;
}
.contact-form__row .field--email {
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 600px) {
  .contact-form__row {
    flex-direction: column;
  }
  .contact-form__row .field--name {
    flex-basis: auto;
  }
}
.contact-form .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-form .field label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-ink);
}
.contact-form .field input[type=text],
.contact-form .field input[type=email],
.contact-form .field textarea {
  width: 100%;
  margin: 0 !important;
  padding: 16px 20px !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: var(--color-ink) !important;
  background: var(--color-white) !important;
  border: 1.5px solid var(--color-ink) !important;
  border-radius: 8px !important;
}
.contact-form .field input[type=text]::placeholder,
.contact-form .field input[type=email]::placeholder,
.contact-form .field textarea::placeholder {
  color: #9A9A9A;
}
.contact-form .field input[type=text]:focus,
.contact-form .field input[type=email]:focus,
.contact-form .field textarea:focus {
  outline: none;
  border-color: var(--color-purple) !important;
}
.contact-form .field input[type=text],
.contact-form .field input[type=email] {
  height: 56px;
}
.contact-form .field textarea {
  height: 200px;
  resize: vertical;
}

/* Honeypot — visually hidden, kept in flow off-screen */
.contact-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Send Message — gradient pill, hugs content (Figma) */
.contact-submit {
  align-self: flex-start;
  margin: 0 !important;
}

.contact-replytime {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.2;
  color: #6A6A6A;
}

/* Status notices */
.contact-notice {
  margin: 0 0 8px;
  padding: 14px 18px;
  font-size: 15px;
  border-radius: 8px;
}
.contact-notice--success {
  background: #EAF7EE;
  color: #1B6B33;
  border: 1px solid #B7E0C2;
}
.contact-notice--error {
  background: #FCEBEB;
  color: #9B2222;
  border: 1px solid #F0C2C2;
}

/* ---------- COMPONENTS ---------- */
.component {
  display: flex;
  width: 100%;
  margin: 3rem 0;
}
.component-header {
  flex: 100%;
  margin-bottom: 3rem;
  text-align: center;
}
.component-header h2 {
  margin-bottom: 0.5rem;
  font-size: var(--fs-h2);
}
.component-header p {
  margin: 0;
  font-size: 110%;
}
.component .section-wrap {
  width: calc(100% - var(--site-padding) * 2);
  margin: 0 auto;
  max-width: 1200px;
}
@media (max-width: 600px) {
  .component .section-wrap {
    width: calc(95% - var(--site-padding) * 2);
  }
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  flex: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: calc(100% - var(--site-padding) * 2);
  max-width: 1376px;
  aspect-ratio: 1376/489;
  min-height: 26rem;
  margin: 1.5rem auto;
  overflow: hidden;
  border: 2px solid var(--color-purple-2);
  border-radius: 16px;
  background-color: var(--color-ink);
  background-size: cover;
  background-position: center;
}
@media (max-width: 600px) {
  .hero {
    min-height: 30rem;
  }
}
.hero .hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 22%, rgba(0, 0, 0, 0) 70%);
}
.hero .content-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(1.5rem, 4.4vw, 64px);
}
.hero .hero__eyebrow {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 8px;
  text-transform: uppercase;
  background: linear-gradient(178deg, #6FC8FF 11%, #7880FE 104%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .hero__title {
  max-width: 705px;
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: 0.955;
  color: var(--color-white);
}
.hero .hero__blurb {
  margin-top: 1rem;
  max-width: 40ch;
  font-size: 1.05rem;
  color: var(--color-white);
}
.hero .hero__icon {
  display: block;
  width: 48px;
  height: 48px;
  margin-top: 25px;
}
.hero .hero__icon path {
  stroke: var(--color-white);
}
.hero .hero__actions {
  margin-top: 1.5rem;
}

/* ---------- ARTIST PAGE HERO (banner + big name, Figma 9:395) ---------- */
.hero.artist-hero {
  align-items: center;
  justify-content: center;
}
.hero.artist-hero .hero__overlay {
  background: linear-gradient(120deg, rgba(82, 120, 255, 0.85) 0%, rgba(120, 80, 255, 0.85) 100%);
}
.hero.artist-hero .content-wrap {
  text-align: center;
  padding: clamp(1.5rem, 4vw, 64px);
}
.hero.artist-hero .hero__title {
  max-width: none;
  font-size: clamp(3rem, 12vw, 160px);
  line-height: 0.9;
  text-transform: uppercase;
  color: rgba(180, 205, 255, 0.9);
  mix-blend-mode: screen;
}

.component.columns .section-wrap {
  display: flex;
  gap: var(--site-grid-gap);
}
@media (max-width: 800px) {
  .component.columns .section-wrap {
    flex-wrap: wrap;
  }
}
.component.columns .column {
  width: 33%;
  padding: 4rem 2rem;
  background: var(--color-gradient);
  border-radius: var(--site-border-radius);
}
@media (max-width: 800px) {
  .component.columns .column {
    width: 100%;
    margin-bottom: 1rem;
  }
}
.component.columns .column h2, .component.columns .column p {
  color: var(--color-white);
  text-align: center;
}
.component.columns .column p {
  margin: 0.25rem 0 0;
}

/* ---------- FEATURED ARTISTS (shop_list) ---------- */
.component.shop-list {
  margin: 0;
  padding: clamp(4rem, 9vw, 140px) 0;
  background: var(--color-black);
  color: var(--color-white);
}
.component.shop-list .section-wrap {
  max-width: 902px;
}
.component.shop-list .component-header {
  margin-bottom: 35px;
  padding-bottom: 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-white);
}
.component.shop-list .component-header .section-title {
  color: var(--color-white);
  text-transform: uppercase;
}
.component.shop-list .artist-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 800px) {
  .component.shop-list .artist-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .component.shop-list .artist-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
.component.shop-list .artist-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 201/203;
  padding: 18% 14%;
  background: var(--color-black);
  border: 1px solid #454545;
  border-radius: 16px;
  text-decoration: none;
  transition: 333ms all ease-in-out;
}
.component.shop-list .artist-tile img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: 333ms transform ease-in-out;
}
.component.shop-list .artist-tile__name {
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-white);
}
.component.shop-list .artist-tile:hover {
  border-color: var(--color-purple);
  transform: translateY(-3px);
}
.component.shop-list .artist-tile:hover img {
  transform: scale(1.05);
}

/* ---------- PRODUCT GRIDS (Jerseys / Pashminas) ---------- */
.component.product-categories {
  margin: 4rem 0;
}
.component.product-categories .component-header {
  margin-bottom: 2rem;
  text-align: left;
}
.component.product-categories .component-header .section-title {
  color: var(--color-ink);
}
.component.product-categories .component-content {
  display: grid;
  gap: 1.5rem;
}
.component.product-categories .component-content.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.component.product-categories .component-content.cols-3 .product-tile {
  aspect-ratio: 279/250;
}
.component.product-categories .component-content.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.component.product-categories .component-content.cols-2 .product-tile {
  aspect-ratio: 435/197;
}
@media (max-width: 800px) {
  .component.product-categories .component-content.cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .component.product-categories .component-content.cols-3, .component.product-categories .component-content.cols-2 {
    grid-template-columns: 1fr;
  }
}
.component.product-categories .product-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-gray);
  background-size: cover;
  background-position: center;
  color: var(--color-ink);
  text-decoration: none;
  border-radius: var(--site-border-radius);
  transition: 333ms all ease-in-out;
}
.component.product-categories .product-tile:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  background: var(--color-gradient);
  transition: 333ms all ease-in-out;
}
.component.product-categories .product-tile.bkgd-image {
  color: var(--color-white);
}
.component.product-categories .product-tile h3 {
  position: relative;
  z-index: 2;
  font-size: 1.75rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}
.component.product-categories .product-tile.has-link {
  cursor: pointer;
}
.component.product-categories .product-tile.has-link:hover {
  color: var(--color-white);
  transform: translateY(-3px);
}
.component.product-categories .product-tile.has-link:hover:after {
  opacity: 0.85;
}

.component.contact {
  margin: 4rem 0;
}
.component.contact .contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 800px) {
  .component.contact .contact-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.component.contact .contact-info .section-title {
  margin-bottom: 1rem;
}
.component.contact .contact-info__blurb {
  font-size: 1.05rem;
  color: var(--color-ink);
  max-width: 40ch;
}
.component.contact .nf-form-cont .nf-form-fields-required {
  display: none;
}
.component.contact .nf-form-cont .nf-field-container {
  margin-bottom: 1.25rem;
}
.component.contact .nf-form-cont label {
  font-weight: 500;
}
.component.contact .nf-form-cont input:not([type=submit]),
.component.contact .nf-form-cont textarea,
.component.contact .nf-form-cont select {
  width: 100%;
  padding: 0.9rem 1rem;
  background: var(--color-gray);
  border: 1px solid transparent;
  border-radius: var(--site-border-radius);
  font-family: var(--font-sans);
}
.component.contact .nf-form-cont input:not([type=submit]):focus,
.component.contact .nf-form-cont textarea:focus,
.component.contact .nf-form-cont select:focus {
  outline: none;
  border-color: var(--color-purple);
}
.component.contact .nf-form-cont .submit-container {
  text-align: right;
}
.component.contact .nf-form-cont .submit-container input[type=submit] {
  min-width: 12rem;
  background: var(--color-purple) !important;
  border-radius: 999px !important;
  color: var(--color-white) !important;
  font-size: 1.1rem !important;
}
.component.contact .nf-form-cont .submit-container input[type=submit]:hover {
  background: var(--color-ink) !important;
}

.component.wysiwyg .section-wrap {
  max-width: 700px;
}

/* ---------- MERCH / SERVICES (Figma Frame 79) ---------- */
.component.services {
  flex-direction: column;
  align-items: center;
  gap: 64px;
  margin: 0;
  padding: 64px var(--site-padding);
  background: var(--color-gray);
}
.component.services .services__band {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: 1375px;
  aspect-ratio: 1375/437;
  min-height: 18rem;
  padding: 64px;
  overflow: hidden;
  border-radius: 16px;
  background-color: var(--color-ink);
  background-size: cover;
  background-position: center;
}
.component.services .services__band-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(82, 246, 255, 0.84) 8%, rgba(138, 106, 255, 0.84) 108%);
}
.component.services .services__band .services__title {
  position: relative;
  z-index: 1;
  max-width: 899px;
  font-size: clamp(2.5rem, 6.7vw, 96px);
  font-weight: 900;
  line-height: 0.955;
  text-transform: uppercase;
  color: var(--color-white);
}
.component.services .services__inner {
  width: 100%;
  max-width: 1375px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.component.services .services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 800px) {
  .component.services .services__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.component.services .service {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.component.services .service__heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-ink);
}
.component.services .service__bar {
  width: 65px;
  height: 11px;
  background: var(--color-purple);
}
.component.services .service__title {
  font-size: 36px;
  font-weight: 900;
  line-height: 0.885;
  text-transform: uppercase;
  color: var(--color-ink);
}
.component.services .service__desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-ink);
}
.component.services .services__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

/* ---------- PRODUCT GRID + ITEM CARD (Figma) ---------- */
.product-grid {
  display: grid;
  gap: 35px;
}
.product-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.product-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.product-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1112px) {
  .product-grid.cols-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 800px) {
  .product-grid.cols-3, .product-grid.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .product-grid.cols-2, .product-grid.cols-3, .product-grid.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .product-grid {
    gap: 1rem;
  }
}

.component.products {
  margin: 0;
  padding: 70px 0;
}
.component.products .section-wrap {
  max-width: 907px;
}
.component.products .component-header {
  margin-bottom: 35px;
  padding-bottom: 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-ink);
}
.component.products .component-header .section-title {
  text-transform: uppercase;
}

/* Plain image tiles (Figma homepage jerseys/pashminas) — no bg, no radius */
.product-image-tile {
  display: block;
  overflow: hidden;
}
.product-image-tile img {
  width: 100%;
  height: 100%;
  transition: 400ms transform ease-in-out;
}
.product-image-tile__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-gray);
}
.product-image-tile:hover img {
  transform: scale(1.04);
}

.cols-3 .product-image-tile {
  aspect-ratio: 279/250;
}
.cols-3 .product-image-tile img {
  object-fit: contain;
}

.cols-2 .product-image-tile {
  aspect-ratio: 435/197;
}
.cols-2 .product-image-tile img {
  object-fit: cover;
}

/* Custom tile variant — no link, date below, scale on hover, click opens lightbox */
.product-image-tile--custom {
  overflow: visible;
  cursor: default;
}
.product-image-tile--custom .product-image-tile__media {
  cursor: zoom-in;
  overflow: hidden;
  width: 100%;
}
.product-image-tile--custom .product-image-tile__media img {
  width: 100%;
  height: 100%;
  transition: 400ms transform ease-in-out;
}
.product-image-tile--custom:hover .product-image-tile__media img {
  transform: scale(1.04);
}

.product-image-tile__date {
  display: none;
}

.cols-3 .product-image-tile--custom .product-image-tile__media {
  aspect-ratio: 279/250;
}
.cols-3 .product-image-tile--custom .product-image-tile__media img {
  object-fit: contain;
}

.cols-2 .product-image-tile--custom .product-image-tile__media {
  aspect-ratio: 435/197;
}
.cols-2 .product-image-tile--custom .product-image-tile__media img {
  object-fit: cover;
}

/* Lightbox overlay */
#bt-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
}
#bt-lightbox.is-open {
  display: flex;
}
#bt-lightbox .bt-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  cursor: pointer;
}
#bt-lightbox .bt-lightbox__inner {
  position: relative;
  z-index: 1;
  max-width: min(90vw, 1200px);
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#bt-lightbox .bt-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
}
#bt-lightbox .bt-lightbox__close {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.85;
  border-radius: 50%;
  transition: opacity 200ms ease, background 200ms ease;
  z-index: 100000;
}
#bt-lightbox .bt-lightbox__close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.8);
}

body.bt-lightbox-active {
  overflow: hidden;
}

/* Beat WooCommerce default loop styles (woocommerce.css targets li.product a img) */
.woocommerce ul.products li.product .item-card__media-link img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.woocommerce ul.products li.product .item-card__add {
  width: 48px;
  height: 48px;
}
.woocommerce ul.products li.product .item-card__add svg {
  width: 24px !important;
  height: 24px !important;
}

/* ---------- ITEM CARD (Artist Page / shop) — Figma 108:187 ---------- */
.woocommerce ul.products li.product {
  display: flex;
}

.item-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 21px;
  padding: 24px;
  height: 100%;
  background: var(--color-white);
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  transition: 333ms box-shadow ease-in-out;
}
.item-card__media {
  position: relative;
  aspect-ratio: 272/320;
  overflow: hidden;
  background: var(--color-gray);
}
.item-card__media-link {
  display: block;
  width: 100%;
  height: 100%;
}
.item-card__media-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 400ms transform ease-in-out;
}
.item-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-gray);
}
.item-card:hover {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}
.item-card:hover .item-card__media-link img {
  transform: scale(1.04);
}
.item-card__add {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--color-black);
  border-radius: 50%;
  z-index: 2;
  transition: 333ms all ease-in-out;
}
.item-card__add img {
  width: 24px;
  height: 24px;
}
.item-card__add:hover {
  background: var(--color-purple);
}
.item-card__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.item-card__title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  min-height: 60px;
  text-transform: capitalize;
  color: var(--color-black);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.item-card__title:hover {
  color: var(--color-purple);
}
.item-card__category {
  font-size: 14px;
  font-weight: 400;
  color: #ACACAC;
}
.item-card__price {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-black);
}
.item-card__price del {
  color: #ACACAC;
  margin-right: 0.4rem;
}
.item-card__price ins {
  text-decoration: none;
}