/* ── Catalyst Designs — styles ──────────────────────────────────────── */

:root {
  --cd-bg:        #2e383d;
  --cd-surface:   #232d31;
  --cd-raised:    #3a4549;
  --cd-border:    #3d4d52;
  --cd-accent:    #0dd7c2;
  --cd-accent-dk: #1e817b;
  --cd-text:      #e0e6e8;
  --cd-muted:     #7a8589;
}

/* ── Base ── */
body { background: var(--cd-bg); color: var(--cd-text); }

/* ── Product cards ── */
.woocommerce ul.products li.product {
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
  padding: 1.25rem;
  transition: border-color 0.2s, transform 0.2s;
}
.woocommerce ul.products li.product:hover {
  border-color: var(--cd-accent);
  transform: translateY(-2px);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--cd-text);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
}
.woocommerce ul.products li.product .price { color: var(--cd-accent); font-weight: 700; }
.woocommerce ul.products li.product .price del { color: var(--cd-muted); }
.woocommerce ul.products li.product .button {
  background: transparent;
  border: 1px solid var(--cd-accent);
  color: var(--cd-accent);
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  transition: background 0.2s, color 0.2s;
}
.woocommerce ul.products li.product .button:hover {
  background: var(--cd-accent);
  color: var(--cd-bg);
}

/* ── Single product ── */
.woocommerce div.product .product_title { color: var(--cd-text); font-family: 'Space Grotesk', sans-serif; }
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--cd-accent); font-size: 1.5rem; font-weight: 700; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--cd-muted); }

/* ── Add to cart button ── */
.woocommerce .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button {
  background: var(--cd-accent) !important;
  color: var(--cd-bg) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.85rem 2rem !important;
  transition: background 0.2s !important;
}
.woocommerce .single_add_to_cart_button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--cd-accent-dk) !important;
  color: var(--cd-text) !important;
}

/* ── Tabs ── */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  background: transparent;
  border-bottom: 1px solid var(--cd-border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent; border: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: var(--cd-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--cd-accent); }
.woocommerce div.product .woocommerce-tabs .panel {
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
  padding: 2rem;
  margin-top: 0;
  color: var(--cd-text);
}

/* ── Cart & Checkout ── */
.woocommerce table.shop_table {
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
  color: var(--cd-text);
}
.woocommerce table.shop_table th {
  color: var(--cd-muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--cd-border);
}
.woocommerce table.shop_table td { border-top: 1px solid var(--cd-border); }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
  padding: 1.5rem;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  background: var(--cd-raised);
  border: 1px solid var(--cd-border);
  color: var(--cd-text);
  border-radius: 0;
  padding: 0.65rem 0.875rem;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--cd-accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(13, 215, 194, 0.2);
}
.woocommerce form .form-row label {
  color: var(--cd-muted);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Notices ── */
.woocommerce-message, .woocommerce-info {
  background: var(--cd-surface);
  border-top: 3px solid var(--cd-accent);
  color: var(--cd-text);
}
.woocommerce-error {
  background: var(--cd-surface);
  border-top: 3px solid #ff4444;
  color: var(--cd-text);
}

/* ── My Account ── */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
  padding: 1rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  color: var(--cd-muted);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { color: var(--cd-accent); }

/* ── Product images ── */
.woocommerce div.product div.images img,
.woocommerce ul.products li.product a img {
  background: var(--cd-surface);
  border: 1px solid var(--cd-border);
}

/* ── Rating stars ── */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before { color: var(--cd-accent); }


/* ── Mobile & Responsive ────────────────────────────────────────────── */

/* Viewport meta is handled by WordPress core */

/* iOS doesn't support background-attachment: fixed — switch to scroll */

/* Header: tighten up on small screens */
@media (max-width: 600px) {
  /* Keep logo + name on one line, smaller */
  .wp-block-site-logo img {
    width: 40px !important;
    height: auto !important;
  }
  .wp-block-site-title {
    font-size: 0.85rem !important;
    white-space: nowrap;
  }
  .wp-block-site-tagline {
    font-size: 0.6rem !important;
    letter-spacing: 0.1em !important;
  }
  /* Reduce hero heading on mobile */
  h1 {
    font-size: clamp(1.6rem, 7vw, 2.5rem) !important;
  }
  /* Stack buttons vertically */
  .wp-block-buttons {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .wp-block-button {
    width: 100%;
  }
  .wp-block-button__link {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
  /* Reduce padding on content sections */
  .wp-block-group.alignfull {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* Tablet adjustments */
@media (max-width: 900px) {
  /* Two-column about sections stack to single */
  .wp-block-group .wp-block-group[style*="flex"] {
    flex-direction: column !important;
  }
}

/* ── Performance: lazy loading & image sizing ───────────────────────── */
img {
  max-width: 100%;
  height: auto;
}

/* Prevent layout shift from WooCommerce product images */
.woocommerce ul.products li.product a img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  width: 100%;
}

/* ── Accessibility ──────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid #0dd7c2;
  outline-offset: 3px;
}
a:focus-visible {
  outline: 2px solid #0dd7c2;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── WooCommerce mobile fixes ───────────────────────────────────────── */
@media (max-width: 600px) {
  .woocommerce ul.products[class*=columns-] li.product {
    width: 100% !important;
    float: none !important;
    margin: 0 0 1.5rem !important;
  }
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary {
    float: none !important;
    width: 100% !important;
  }
  .woocommerce .woocommerce-ordering {
    display: none; /* hide sort dropdown when only 1 product */
  }
}

/* ── Homepage fixed background (works on iOS + all browsers) ────────── */
body.home {
  position: relative;
}
body.home::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/wp-content/uploads/2026/06/IMG_0486.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: -1;
}
body.home .wp-block-group.alignfull {
  background-color: rgba(46, 56, 61, 0.82) !important;
}
body.home .wp-block-group.alignfull:first-of-type {
  background-color: rgba(46, 56, 61, 0.65) !important;
}
body.home .wp-block-group.alignfull:last-of-type {
  background-color: rgba(35, 45, 49, 0.88) !important;
}

/* ── Header: ensure solid background sits above fixed pseudo-element ── */
.wp-block-template-part[class*="header"],
header,
.wp-site-blocks > header,
.wp-block-group:has(.wp-block-site-logo) {
  position: relative;
  z-index: 10;
  background-color: #2e383d !important;
}

/* ── Header mobile: prevent logo+name from being cut off ─────────────  */
@media (max-width: 600px) {
  /* Shrink the logo+name group to fit on one line */
  .wp-block-site-logo {
    display: block !important;
    flex-shrink: 0;
  }
  .wp-block-site-logo img {
    width: 36px !important;
    height: 36px !important;
  }
  .wp-block-site-title a {
    font-size: 0.78rem !important;
    white-space: nowrap !important;
  }
  .wp-block-site-tagline {
    font-size: 0.55rem !important;
    white-space: nowrap !important;
  }
  /* Ensure the nav hamburger doesn't push content off screen */
  .wp-block-navigation__responsive-container-open {
    display: flex !important;
    flex-shrink: 0;
  }
}