/* Serjacko site skin for the Gutenify Bold theme + WooCommerce blocks.
   Colours: Volt, Chalk, Onyx, Ash, Graphite. Type: Space Grotesk 600 (headlines, never below 18px),
   Inter (body, UI), JetBrains Mono (labels, data, numerals). */

/* ---------- Theme tokens → brand ---------- */
html body {
  --sj-volt: #FAEF03;
  --sj-chalk: #F5F5F0;
  --sj-onyx: #060605;
  --sj-ash: #141410;
  --sj-ash-2: #1B1B15;
  --sj-graphite: #9C9C92;
  --sj-line: rgba(245, 245, 240, .10);
  --sj-line-volt: rgba(250, 239, 3, .30);
  --sj-head: "Space Grotesk", system-ui, sans-serif;
  --sj-body: "Inter", system-ui, sans-serif;
  --sj-mono: "JetBrains Mono", ui-monospace, monospace;

  --wp--preset--color--background: var(--sj-onyx);
  --wp--preset--color--background-secondary: var(--sj-ash);
  --wp--preset--color--foreground: var(--sj-chalk);
  --wp--preset--color--body-text: var(--sj-chalk);
  --wp--preset--color--primary: var(--sj-volt);
  --wp--preset--color--secondary: var(--sj-volt);
  --wp--preset--color--tertiary: var(--sj-graphite);
  --wp--preset--color--text-link: var(--sj-onyx);
  --wp--preset--color--border: var(--sj-line);
  --wp--preset--color--input-field: var(--sj-ash-2);
  --wp--preset--color--white: var(--sj-chalk);
  --wp--preset--font-family--helvetica-neue: var(--sj-body);
  --wp--preset--gradient--vertical-primary-to-background: linear-gradient(0deg, var(--sj-onyx) 0%, rgba(6, 6, 5, .55) 100%);
  --wp--preset--gradient--vertical-primary-to-background-two: linear-gradient(0deg, var(--sj-onyx) 0%, rgba(6, 6, 5, .55) 100%);
  --wp--preset--gradient--vertical-primary-to-background-three: linear-gradient(0deg, var(--sj-onyx) 0%, rgba(6, 6, 5, .55) 100%);

  background: var(--sj-onyx) !important;
  color: var(--sj-chalk);
  font-family: var(--sj-body) !important;
  -webkit-font-smoothing: antialiased;
}
body .has-background-background-color { background-color: var(--sj-onyx) !important; }
body .has-background-secondary-background-color { background-color: var(--sj-ash) !important; }

/* ---------- Type ---------- */
/* .sjh (home page) and .sj-footer set their own type */
body :is(h1, h2, h3, h4, h5, h6):not(.sjh *, .sj-footer *),
body .wp-block-post-title,
body .wp-block-query-title {
  font-family: var(--sj-head) !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
  color: var(--sj-chalk);
}
body h1:not(.sjh *), body .wp-block-query-title { font-size: clamp(36px, 5vw, 56px) !important; line-height: 1.05 !important; }
body .entry-content h2, body .woocommerce-Tabs-panel h2 { font-size: clamp(26px, 3vw, 32px) !important; line-height: 1.2; }
body :where(h1, h2, h3, h4) strong { font-weight: 600; }
body .entry-content :where(p, li) { color: rgba(245, 245, 240, .82); line-height: 1.65; }
body .entry-content strong { font-weight: 600; color: var(--sj-chalk); }
body .entry-content a:where(:not(.wp-element-button)) { color: var(--sj-volt); text-underline-offset: 3px; }
body .entry-content img { border-radius: 10px; }
body ::selection { background: var(--sj-volt); color: var(--sj-onyx); }

/* ---------- Header ---------- */
.wp-site-blocks > header,
body > header.wp-block-template-part,
.wp-site-blocks > .wp-block-group > .alignfull.has-background:has(.wp-block-site-logo) {
  border-bottom: 1px solid var(--sj-line);
}
.wp-site-blocks > header > .wp-block-group,
.wp-site-blocks > header .has-background { background: var(--sj-onyx) !important; }
.sj-logo { display: flex; align-items: center; }
.sj-logo a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.sj-logo .sj-emblem { width: 38px; height: 38px; }
.sj-logo .sj-wordmark { width: 128px; height: auto; }

body .wp-block-navigation { font-family: var(--sj-mono) !important; }
body .wp-block-navigation .wp-block-navigation-item__content {
  font: 500 12px/1 var(--sj-mono) !important;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--sj-chalk) !important;
  transition: color .2s;
}
body .wp-block-navigation .wp-block-navigation-item__content:hover,
body .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { color: var(--sj-volt) !important; }
body .wp-block-navigation .wp-block-navigation__submenu-icon { color: var(--sj-graphite); }
body .wp-block-navigation .wp-block-navigation__submenu-container {
  background: var(--sj-ash-2) !important;
  border: 1px solid var(--sj-line) !important;
  border-radius: 10px; padding: 8px 0 !important; min-width: 200px !important;
}
body .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 12px 18px !important; }
body .wp-block-navigation__responsive-container.is-menu-open { background: var(--sj-onyx) !important; }
body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 16px !important; }
body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { background: transparent !important; border: 0 !important; }
body .wp-block-navigation__responsive-container-open,
body .wp-block-navigation__responsive-container-close { color: var(--sj-chalk); }

/* ---------- Page title banner (cover) ---------- */
body .wp-block-cover.alignfull {
  min-height: clamp(240px, 30vw, 360px) !important;
  background: var(--sj-volt);
  border-bottom: 1px solid var(--sj-line);
}
body .wp-block-cover.alignfull .wp-block-cover__image-background {
  mix-blend-mode: luminosity; opacity: .55; filter: contrast(1.1);
}
body .wp-block-cover.alignfull .wp-block-cover__background {
  background: linear-gradient(90deg, var(--sj-onyx) 0%, rgba(6, 6, 5, .92) 45%, rgba(6, 6, 5, .7) 100%) !important;
  opacity: 1 !important;
}
body .wp-block-cover.alignfull::after { /* tech grid */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(245, 245, 240, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 245, 240, .05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 20%, #000 100%);
}
body .wp-block-cover.alignfull .wp-block-cover__inner-container { z-index: 2; }
body .wp-block-cover.alignfull h1 {
  text-align: left !important;
  color: var(--sj-chalk) !important;
  font-size: clamp(40px, 6vw, 72px) !important;
}
body .wp-block-cover.alignfull h1::before {
  content: ""; display: block; width: 48px; height: 3px; margin-bottom: 22px; background: var(--sj-volt);
}

/* ---------- Buttons ---------- */
body :is(.wp-block-button__link, .wp-element-button, .button, button.single_add_to_cart_button, .wc-block-components-button:not(.is-link), .wp-block-query-pagination-next, .wp-block-query-pagination-previous) {
  background: var(--sj-volt) !important;
  color: var(--sj-onyx) !important;
  border: 0 !important;
  border-radius: 8px !important;
  font: 600 15px/1 var(--sj-body) !important;
  letter-spacing: 0 !important; text-transform: none !important;
  padding: 16px 24px !important;
  box-shadow: none !important;
  transition: background .2s, transform .2s;
}
body :is(.wp-block-button__link, .wp-element-button, .button, .wc-block-components-button:not(.is-link)):hover {
  background: var(--sj-chalk) !important; transform: translateY(-1px);
}
body .is-style-outline .wp-block-button__link {
  background: transparent !important; color: var(--sj-chalk) !important;
  border: 1px solid rgba(245, 245, 240, .3) !important;
}

/* ---------- Forms ---------- */
body :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], textarea, select),
body .wc-block-components-text-input input,
body .wc-block-components-combobox .components-combobox-control__input,
body .wc-blocks-components-select select {
  background: var(--sj-ash-2) !important;
  color: var(--sj-chalk) !important;
  border: 1px solid var(--sj-line) !important;
  border-radius: 8px !important;
  font-family: var(--sj-body) !important;
}
body :is(input, textarea, select):focus { outline: 2px solid var(--sj-volt) !important; outline-offset: 1px; border-color: transparent !important; }
body .wc-block-components-text-input label,
body .wc-blocks-components-select label { color: var(--sj-graphite) !important; }
body select.orderby { padding: 10px 14px; font: 500 12px/1 var(--sj-mono) !important; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- WooCommerce: catalogue ---------- */
body .woocommerce-breadcrumb,
body .wc-block-breadcrumbs {
  font: 500 12px/1.4 var(--sj-mono) !important;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--sj-graphite) !important;
}
body .woocommerce-breadcrumb a { color: var(--sj-chalk) !important; text-decoration: none; }
body .woocommerce-breadcrumb a:hover { color: var(--sj-volt) !important; }
body .woocommerce-result-count { font: 500 12px/1 var(--sj-mono) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--sj-graphite) !important; }

body .wc-block-breadcrumbs { margin-top: clamp(28px, 4vw, 48px) !important; }
body :is(.wc-block-product, .products-block-post-template > li) { text-align: left; }
body :is(.wc-block-product, .products-block-post-template > li) .wc-block-components-product-image {
  background: var(--sj-chalk);
  border-radius: 10px; overflow: hidden; margin-bottom: 14px !important;
  aspect-ratio: 1;
}
body :is(.wc-block-product, .products-block-post-template > li) .wc-block-components-product-image img {
  width: 100% !important; height: 100% !important; object-fit: contain !important;
  padding: 8%; mix-blend-mode: multiply;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
body :is(.wc-block-product, .products-block-post-template > li):hover .wc-block-components-product-image img { transform: scale(1.05); }
body :is(.wc-block-product, .products-block-post-template > li) .wp-block-post-title {
  text-align: left !important;
  font-size: 18px !important; line-height: 1.3 !important; margin: 0 0 6px !important;
}
body :is(.wc-block-product, .products-block-post-template > li) .wp-block-post-title a { color: var(--sj-chalk); text-decoration: none; transition: color .2s; }
body :is(.wc-block-product, .products-block-post-template > li):hover .wp-block-post-title a { color: var(--sj-volt); }
body .wc-block-components-product-price,
body .woocommerce-Price-amount {
  font-family: var(--sj-mono) !important; font-weight: 500 !important;
  font-variant-numeric: tabular-nums; color: var(--sj-volt) !important;
}
body .wc-block-components-product-sale-badge {
  background: var(--sj-volt) !important; color: var(--sj-onyx) !important; border: 0 !important;
  font: 500 11px/1 var(--sj-mono) !important; letter-spacing: .08em; text-transform: uppercase; border-radius: 6px !important;
}

body .wp-block-query-pagination { font-family: var(--sj-mono); gap: 8px; }
body .wp-block-query-pagination-numbers { background: transparent !important; display: flex; gap: 6px; }
body .wp-block-query-pagination .page-numbers {
  display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px;
  border: 1px solid var(--sj-line); border-radius: 8px;
  font: 500 14px/1 var(--sj-mono); color: var(--sj-chalk); text-decoration: none;
}
body .wp-block-query-pagination .page-numbers.current { background: var(--sj-volt); color: var(--sj-onyx); border-color: var(--sj-volt); }
body .wp-block-query-pagination a.page-numbers:hover { border-color: var(--sj-volt); color: var(--sj-volt); }

/* ---------- WooCommerce: single product ---------- */
body.single-product .woocommerce-product-gallery__image,
body.single-product .flex-control-thumbs li {
  background: var(--sj-chalk); border-radius: 10px; overflow: hidden;
}
body.single-product .woocommerce-product-gallery__image img { mix-blend-mode: multiply; }
body.single-product .flex-control-thumbs { display: flex; gap: 10px; margin-top: 10px !important; }
body.single-product .flex-control-thumbs li { width: calc(25% - 8px) !important; }
body.single-product .woocommerce-product-gallery__trigger { background: var(--sj-onyx) !important; border-radius: 8px !important; }
body.single-product .wp-block-columns .wp-block-post-title { font-size: clamp(32px, 4vw, 48px) !important; }
body.single-product .wp-block-woocommerce-product-price .wc-block-components-product-price { font-size: 26px !important; }
body.single-product .wp-block-post-terms {
  font: 500 12px/1.4 var(--sj-mono) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--sj-graphite);
}
body.single-product .wp-block-post-terms a { color: var(--sj-volt); text-decoration: none; }
body .woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--sj-line) !important; padding: 0 !important; }
body .woocommerce-tabs ul.tabs li { background: transparent !important; border: 0 !important; }
body .woocommerce-tabs ul.tabs li a {
  font: 500 12px/1 var(--sj-mono) !important; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sj-graphite) !important; padding: 16px 0 !important;
}
body .woocommerce-tabs ul.tabs li.active a { color: var(--sj-volt) !important; box-shadow: inset 0 -2px 0 var(--sj-volt); }
body .woocommerce-tabs .panel { color: rgba(245, 245, 240, .82); }
body .wp-block-woocommerce-related-products h2 { font-size: clamp(26px, 3vw, 32px) !important; }
body .quantity .qty { min-height: 50px; font-family: var(--sj-mono) !important; }

/* ---------- WooCommerce: cart, checkout, account, notices ---------- */
body :is(.wc-block-cart, .wc-block-checkout, .woocommerce-account .woocommerce) { color: var(--sj-chalk); }
body :is(.wc-block-cart, .wc-block-checkout) :is(.wc-block-components-panel, .wc-block-components-totals-wrapper, .wc-block-cart-items, .wc-block-cart-items td, .wc-block-cart-items th, .wc-block-components-checkout-step, .wc-block-components-order-summary-item) {
  border-color: var(--sj-line) !important;
}
body :is(.wc-block-cart, .wc-block-checkout) .wc-block-components-sidebar {
  background: var(--sj-ash-2); border: 1px solid var(--sj-line); border-radius: 10px; padding: 24px !important;
}
body .wc-block-components-title,
body .wc-block-components-checkout-step__title { font-family: var(--sj-head) !important; font-weight: 600 !important; }
body .wc-block-cart-items__header,
body .wc-block-components-totals-item__label { font-family: var(--sj-mono) !important; font-size: 12px !important; letter-spacing: .08em; text-transform: uppercase; color: var(--sj-graphite); }
body .wc-block-components-totals-item__value,
body .wc-block-components-formatted-money-amount { font-family: var(--sj-mono) !important; font-variant-numeric: tabular-nums; }
body .wc-block-components-product-name { color: var(--sj-chalk) !important; font-weight: 600; }
body .wc-block-components-quantity-selector { border-color: var(--sj-line) !important; border-radius: 8px !important; }
body .wc-block-components-quantity-selector input { background: transparent !important; border: 0 !important; }
body .wc-block-components-radio-control__option,
body .wc-block-components-checkbox label { color: var(--sj-chalk); }
body .wc-block-components-notice-banner,
body .woocommerce-message, body .woocommerce-info, body .woocommerce-error {
  background: var(--sj-ash-2) !important; color: var(--sj-chalk) !important;
  border: 1px solid var(--sj-line-volt) !important; border-radius: 10px !important;
}
body .wc-block-components-notice-banner > svg { background: var(--sj-volt) !important; fill: var(--sj-onyx) !important; }
body .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; border-top: 1px solid var(--sj-line); }
body .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--sj-line); }
body .woocommerce-MyAccount-navigation a { display: block; padding: 14px 0; font: 500 12px/1 var(--sj-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sj-chalk); text-decoration: none; }
body .woocommerce-MyAccount-navigation .is-active a { color: var(--sj-volt); }
body table.shop_table { border-color: var(--sj-line) !important; border-radius: 10px; }
body table.shop_table :is(th, td) { border-color: var(--sj-line) !important; }

/* ---------- Phone gutter (the theme lets shop and product content touch the screen edge) ---------- */
@media (max-width: 781px) {
  .wp-site-blocks > .alignwide,
  .wp-site-blocks :is(.wp-block-group, main) > .alignwide:not(.alignwide .alignwide),
  .wp-site-blocks .entry-content > :not(.alignfull) {
    padding-inline: 16px !important;
    box-sizing: border-box;
  }
}

/* ---------- Footer ---------- */
.sj-footer {
  background: var(--sj-onyx); color: var(--sj-chalk);
  border-top: 1px solid var(--sj-line);
  font: 400 15px/1.6 var(--sj-body);
  -webkit-font-smoothing: antialiased;
}
.sj-footer *, .sj-footer *::before { box-sizing: border-box; }
.sj-footer a { color: inherit; text-decoration: none; transition: color .2s; }
.sj-footer a:hover { color: var(--sj-volt); }
.sj-footer-in { width: min(1200px, 100% - 32px); margin-inline: auto; }
.sj-footer-top {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px;
  padding: clamp(56px, 7vw, 88px) 0 48px;
}
.sj-footer .sj-logo { margin-bottom: 22px; }
.sj-footer-tag { margin: 0 0 22px; font: 600 24px/1.2 var(--sj-head); letter-spacing: -.01em; }
.sj-footer-tag span { display: block; color: var(--sj-volt); }
.sj-footer-contact { margin: 0; font: 500 12px/1.9 var(--sj-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sj-graphite); }
.sj-footer-contact a { color: var(--sj-chalk); }
.sj-footer h2 {
  margin: 4px 0 18px !important;
  font: 500 12px/1 var(--sj-mono) !important; letter-spacing: .08em !important; text-transform: uppercase;
  color: var(--sj-volt) !important;
}
.sj-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sj-footer li { color: rgba(245, 245, 240, .78); }
.sj-footer-bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 22px 0 28px; border-top: 1px solid var(--sj-line);
  font: 500 11px/1.6 var(--sj-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sj-graphite);
}
@media (max-width: 900px) {
  .sj-footer-top { grid-template-columns: 1fr 1fr; }
  .sj-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .sj-footer-top { grid-template-columns: 1fr; gap: 32px; }
}