/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Version: 1.0
*/

/* Product page main layout */
.single-product .wp-block-columns {
  align-items: flex-start;
}

/* Right configurator column fixed width */
.single-product .wp-block-column:last-child {
  flex: 0 0 480px !important;
  max-width: 480px;
}

/* Left gallery column takes remaining space */
.single-product .wp-block-column:first-child {
  flex: 1 1 auto !important;
}

/* Sticky product gallery */
.single-product .woocommerce-product-gallery,
.single-product .wp-block-woocommerce-product-image-gallery {
  position: sticky;
  top: 150px;
}

/* Product image/gallery 3:2 ratio */
.single-product .woocommerce-product-gallery img,
.single-product .wp-block-woocommerce-product-image-gallery img,
.single-product .wc-block-components-product-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 24px;
}

@media (max-width: 781px) {
  .single-product .wp-block-column:last-child {
    flex: 1 1 100% !important;
    max-width: 100%;
  }

  .single-product .woocommerce-product-gallery,
  .single-product .wp-block-woocommerce-product-image-gallery {
    position: static;
  }
}

/* Product page: Fourthwall-style layout */
.single-product main .wp-block-columns {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 480px;
  gap: 16px;
  align-items: start;
  max-width: none;
}

/* Left preview column */
.single-product main .wp-block-columns > .wp-block-column:first-child {
  width: 100%;
  min-width: 0;
}

/* Right configurator column */
.single-product main .wp-block-columns > .wp-block-column:last-child {
  width: 480px;
  max-width: 480px;
  min-width: 480px;
}

/* Hide default WooCommerce gallery if it appears */
.single-product .woocommerce-product-gallery {
  display: none !important;
}

/* Sticky preview panel */
.single-product main .wp-block-columns > .wp-block-column:first-child {
  position: sticky;
  top: 150px;
  height: calc(100vh - 170px);
  min-height: 560px;
  background: #d9d9d9;
  border-radius: 32px;
  overflow: hidden;
}

/* Preview image fills panel */
.single-product main .wp-block-columns > .wp-block-column:first-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Compact configurator stack */
.single-product main .wp-block-columns > .wp-block-column:last-child > * {
  margin-block-start: 0;
  margin-block-end: 18px;
}

/* Mobile/tablet */
@media (max-width: 900px) {
  .single-product main .wp-block-columns {
    display: block !important;
  }

  .single-product main .wp-block-columns > .wp-block-column:last-child {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .single-product main .wp-block-columns > .wp-block-column:first-child {
    position: static;
    height: auto;
    min-height: 320px;
    margin-bottom: 24px;
  }

  .single-product main .wp-block-columns > .wp-block-column:first-child img {
    height: auto;
    aspect-ratio: 3 / 2;
  }
}
@font-face {
  font-family: 'Alumni Sans';
  src: url('assets/fonts/AlumniSans-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

html body,
html body * {
  font-family: 'Alumni Sans', Arial, sans-serif !important;
}
:root {

  /* Font */
  --font-primary: 'Alumni Sans', sans-serif;

  /* Sizes */
  --text-xs: 14px;
  --text-sm: 18px;
  --text-md: 24px;
  --text-lg: 36px;
  --text-xl: 56px;
  --text-2xl: 72px;

}
body {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
}

h1 {
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 0.9;
}

h2 {
  font-size: var(--text-lg);
  font-weight: 800;
}

label,
legend {
  font-size: var(--text-md);
  font-weight: 700;
  text-transform: uppercase;
}
/* labels */
.slaps-label {
    font-weight: 700 !important;
}
/* dropdown values */
#slaps-custom-configurator select {
    font-weight: 600;
}
.slaps-label {
  margin-bottom: 0 !important;
}
.slaps-button-group button span {
  font-weight: 400 !important;
}
/* Shape/material button rows become horizontal sliders */
.slaps-button-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

/* Each option keeps its button size */
.slaps-button-group button {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Optional: cleaner scrollbar */
.slaps-button-group::-webkit-scrollbar {
  height: 6px;
}

.slaps-button-group::-webkit-scrollbar-thumb {
  background: #aaa;
  border-radius: 999px;
}

.slaps-button-group::-webkit-scrollbar-track {
  background: transparent;
}
/* Square option buttons for future SVG icons */
.slaps-button-group button {
  width: 82px;
  height: 82px;
  min-width: 82px;
  padding: 10px;
  aspect-ratio: 1 / 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Make icon area larger/cleaner */
.slaps-button-group button > :first-child {
  font-size: 20px;
  line-height: 1;
}

/* Button text */
.slaps-button-group button span {
  font-size: 20px;
  line-height: 1;
  text-align: center;
}
/* Hide only the default product price block */
.single-product .wp-block-woocommerce-product-price {
  display: none !important;
}

/* Hide default WooCommerce quantity input */
.single-product form.cart .quantity {
  display: none !important;
}
/* Hide product short description/excerpt */
.single-product .wp-block-post-excerpt {
  display: none !important;
}
/* Remove blank space above announcement bar */
body,
.wp-site-blocks,
header.wp-block-template-part,
.slaps-storefront-chrome {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Announcement bar sticky */
.slaps-promo-strip {
  position: sticky;
  top: 0;
  z-index: 10000;
  overflow: hidden;
}

/* Animated announcement track */
.slaps-promo-strip__track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: slaps-marquee 24s linear infinite;
}

@keyframes slaps-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Remove extra spacing inside header area */
.slaps-page-nav {
  margin-top: 0 !important;
}
/* Remove top gap above header */
html,
body,
.wp-site-blocks,
header,
header.wp-block-template-part,
.slaps-storefront-chrome {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Make entire header area sticky */
.slaps-storefront-chrome {
  position: sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
}

/* Announcement bar */
.slaps-promo-strip {
  margin-top: 0 !important;
  position: relative;
  z-index: 2;
}

/* Main nav sits directly below announcement */
.slaps-page-nav {
  position: relative !important;
  top: auto !important;
  margin-top: 0 !important;
  z-index: 1;
}
/* Remove WordPress default block gap above header */
.wp-site-blocks > header,
.wp-site-blocks > header.wp-block-template-part,
header.wp-block-template-part > .wp-block-group:first-child,
.slaps-storefront-chrome {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}
/* Kill top spacing caused by WP block flow layout */
.wp-site-blocks > *:first-child {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}
/* Fix sticky header gap when logged into WordPress */
body.admin-bar .slaps-storefront-chrome {
  top: 0px !important;
}

/* Remove WordPress admin bar top offset */
html {
  margin-top: 0 !important;
}

/* Hide the WP admin bar space if needed */
#wpadminbar {
  display: none !important;
}
html {
  margin-top: 0 !important;
  padding-top: 0 !important;
  scroll-padding-top: 0 !important;
}

body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Pull the actual site up into that html gap */
.wp-site-blocks {
  position: relative;
  top: -19.2px;
}
body {
  overflow-x: hidden;
}
/* Product page main wrapper spacing */
.single-product main#wp--skip-link--target {
  margin-top: 0 !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}
/* Remove gap below/around product columns */
.single-product main .wp-block-columns {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
}
.single-product .wp-block-post-title {
    margin-bottom: 0 !important;
    margin-block-end: 0 !important;
}
#slaps-configurator-heading {
    font-weight: 500 !important;
}
.single-product .woocommerce-breadcrumb,
.single-product .woocommerce-breadcrumb a {
    font-size: 20px !important;
}
html body,
html body * {
  letter-spacing: 1px !important;
}
body {
  line-height: normal !important;
}
/* Selected option buttons: 10% darker green border */
#slaps-custom-configurator .slaps-button-group button.is-selected {
  border: 2px solid #7acc00 !important;
  background-color: var(--slaps-lime, #96d700) !important;
  box-sizing: border-box;
}

/* Selected / valid dropdowns */
#slaps-custom-configurator select.is-selected {
  border: 2px solid #7acc00 !important;
  background-color: var(--slaps-lime, #96d700) !important;
  box-sizing: border-box;
}
.slaps-button-group button.is-selected,
#slaps-custom-configurator select.is-selected {
    font-weight: 600 !important;
}
/* Selected button state */
#slaps-custom-configurator .slaps-button-group button.is-selected {
  background-color: var(--slaps-lime, #96d700) !important;
  border: 2px solid #7acc00 !important;
  outline: none !important;
  box-shadow: none !important;
}
/* Default inactive option buttons */
#slaps-custom-configurator .slaps-button-group button,
#slaps-custom-configurator .slaps-button-group button span {
  font-weight: 500 !important;
}

/* Selected option buttons */
#slaps-custom-configurator .slaps-button-group button.is-selected,
#slaps-custom-configurator .slaps-button-group button.is-selected span {
  font-weight: 650 !important;
}

/* Default inactive dropdowns */
#slaps-custom-configurator select {
  font-weight: 500 !important;
}
/* Selected button text/icon weight */
#slaps-custom-configurator .slaps-button-group button.is-selected,
#slaps-custom-configurator .slaps-button-group button.is-selected span {
  font-weight: 650 !important;
}
/* Default inactive dropdowns */
#slaps-custom-configurator select {
  font-weight: 500 !important;
}

/* Selected dropdowns */
#slaps-custom-configurator select.is-selected {
  font-weight: 650 !important;
}

/* Remove black click/focus border */
#slaps-custom-configurator .slaps-button-group button:focus,
#slaps-custom-configurator .slaps-button-group button:focus-visible,
#slaps-custom-configurator .slaps-button-group button:active {
  border-color: #7acc00 !important;
  outline: none !important;
  box-shadow: none !important;
}
#slaps-custom-configurator .slaps-button-group button span {
    font-size: 20px !important;
}
#slaps-custom-configurator select,
#slaps-custom-configurator select option {
  font-size: 22px !important;
}
#slaps-custom-configurator label[for="slaps-comment"] {
  font-size: 20px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
/* Order comment textarea */
#slaps-custom-configurator textarea#slaps-comment {
  font-size: 22px !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
}
#slaps-custom-configurator textarea#slaps-comment::placeholder {
  font-size: 22px !important;
  font-weight: 500 !important;
  color: #999999 !important;
  opacity: 1 !important;
  letter-spacing: 1px !important;
  font-family: 'Alumni Sans', Arial, sans-serif !important;
}
/* Selected dropdown arrow = darker green */
#slaps-custom-configurator select.is-selected {
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%237ACC00' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Inline configurator errors */
#slaps-error,
#slaps-file-error {
  margin: 12px 0 0;
  font-size: 18px;
  font-weight: 700;
  color: #ff2b2b;
  text-transform: uppercase;
  line-height: 1.1;
}

.slaps-label-error {
  color: #ff2b2b !important;
}

/* Error state: label only, keep normal field borders */
#slaps-custom-configurator .slaps-option.slaps-field-error,
#slaps-custom-configurator .slaps-button-group.slaps-field-error {
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Inputs/selects/textareas keep their normal border even when marked as error */
#slaps-custom-configurator select.slaps-field-error,
#slaps-custom-configurator input.slaps-field-error,
#slaps-custom-configurator textarea.slaps-field-error {
  border-color: var(--slaps-border, #ccc) !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Default dropdown state */
#slaps-custom-configurator select:not(.is-selected) {
  background-color: var(--slaps-field, #f3f3f3) !important;
  border-color: var(--slaps-border, #ccc) !important;
  color: #999999 !important;
}

/* Selected dropdown state */
#slaps-custom-configurator select.is-selected {
  background-color: var(--slaps-lime, #96d700) !important;
  border-color: #7acc00 !important;
  color: #000000 !important;
}