/* C⁴ shop styling aligned with the main website. Load after the child theme.
   Presentation only: WooCommerce product and checkout behavior is unchanged. */
:root {
  --c4-black: #050706;
  --c4-surface: #0a0d0b;
  --c4-panel: #111512;
  --c4-panel-raised: #172019;
  --c4-border: #3b433e;
  --c4-green: #7eea1e;
  --c4-green-strong: #49b80f;
  --c4-green-dark: #193c10;
  --c4-white: #eef2ef;
  --c4-muted: #9ca69f;
  --c4-radius: 12px;
  --c4-font: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  --c4-rounded: "Arial Rounded MT Bold", "Trebuchet MS", "Segoe UI", sans-serif;
}

body, .site, .site-content {
  background: var(--c4-black);
}

.site-header {
  padding-block: 0.75rem;
  background: var(--c4-black) !important;
  border-bottom-color: var(--c4-border);
}

.custom-logo-link img, .site-logo img, .wp-block-site-logo img {
  max-height: 72px !important;
  max-width: 72px !important;
}

.site-header .site-branding, .site-header .site-search {
  margin-bottom: 0.75rem;
}

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a,
.site-header-cart .cart-contents {
  padding-block: 0.85rem;
  font-family: var(--c4-font);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.woocommerce-products-header {
  padding-block: 1.5rem 2rem !important;
  text-align: left !important;
}

.woocommerce-products-header .page-title,
.entry-header .entry-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
}

.woocommerce-loop-product__title {
  font-family: var(--c4-font);
  font-weight: 700;
  letter-spacing: 0;
}

.button, button, input[type="button"], input[type="reset"],
input[type="submit"], .wp-element-button, .added_to_cart,
.widget a.button, .wc-block-components-button:not(.is-link) {
  min-height: 48px;
  padding: 0.8rem 1.25rem;
  border: 1px solid var(--c4-green) !important;
  border-radius: 999px !important;
  background: var(--c4-green) !important;
  color: #031006 !important;
  font-family: var(--c4-font);
  font-size: 0.86rem;
  font-weight: 700 !important;
  letter-spacing: 0.035em;
  line-height: 1.25;
  box-shadow: none !important;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.button:not(:disabled):hover, button:not(:disabled):hover,
input[type="submit"]:not(:disabled):hover, .wp-element-button:hover,
.added_to_cart:hover, .widget a.button:hover,
.wc-block-components-button:not(.is-link):not(:disabled):hover {
  border-color: #a1ff4f !important;
  background: #a1ff4f !important;
  color: #031006 !important;
}

.is-style-outline > .wp-block-button__link, .button.alt, button.menu-toggle {
  background: rgb(126 234 30 / 0.1) !important;
  color: var(--c4-green) !important;
}

.is-style-outline > .wp-block-button__link:hover, .button.alt:hover,
button.menu-toggle:hover {
  background: var(--c4-green) !important;
  color: #031006 !important;
}

/* Text actions keep their label and existing arrow vertically centred. */
a.button, button.button, .added_to_cart, .wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  vertical-align: middle;
  text-align: center;
}

/* Storefront strips notice-action padding; restore it without restyling icons. */
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error,
    .woocommerce-noreviews, p.no-comments) .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  height: auto;
  max-width: 100%;
  padding: 0.65rem 1rem;
  line-height: 1.25;
  white-space: normal;
  text-align: center;
  border-left-color: var(--c4-green) !important;
}

:is(.woocommerce-message, .woocommerce-info, .woocommerce-error,
    .woocommerce-noreviews, p.no-comments) .button.wc-forward::after {
  position: static;
  flex: 0 0 auto;
  margin: 0;
  line-height: 1;
}

/* Storefront's generated styles otherwise reintroduce purple focus outlines. */
a:focus, input:focus, textarea:focus, select:focus, button:focus,
*:focus-visible {
  outline-color: var(--c4-green) !important;
}

.button:focus-visible, button:focus-visible,
input[type="submit"]:focus-visible, .wc-block-components-button:focus-visible {
  outline: 2px solid var(--c4-white) !important;
  outline-offset: 4px !important;
}

.wc-block-components-quantity-selector button {
  min-height: 36px;
  padding: 0;
}

.woocommerce form.login, .woocommerce form.register,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-navigation {
  padding: clamp(1rem, 3vw, 1.5rem);
}

/* Storefront makes focused text fields light; keep every shop form readable.
   input-text also covers WooCommerce's password field when visibility toggles.
   Do not target checkboxes, radios, file inputs, buttons or payment iframes. */
.site :is(input.input-text, input[type="text"], input[type="email"],
    input[type="password"], input[type="tel"], input[type="url"],
    input[type="search"], input[type="number"], textarea, select),
.site .wpcf7 form :is(input[type="text"], input[type="email"], input[type="tel"],
    input[type="url"], input[type="number"], textarea).wpcf7-form-control:focus {
  color-scheme: dark;
  background-color: var(--c4-surface) !important;
  color: var(--c4-white) !important;
  -webkit-text-fill-color: var(--c4-white) !important;
  caret-color: var(--c4-white);
}

.site :is(input.input-text, input[type="text"], input[type="email"],
    input[type="password"], input[type="tel"], input[type="url"],
    input[type="search"], input[type="number"], textarea, select):focus {
  border-color: var(--c4-green) !important;
  outline: 2px solid var(--c4-green) !important;
  outline-offset: 2px;
}

/* Chromium/Safari autofill paints over background-color: cover that inset
   while retaining native autofill, password saving and a visible focus ring. */
.site input:is(:-webkit-autofill, :autofill) {
  -webkit-box-shadow: 0 0 0 1000px var(--c4-surface) inset !important;
  box-shadow: 0 0 0 1000px var(--c4-surface) inset !important;
  -webkit-text-fill-color: var(--c4-white) !important;
  caret-color: var(--c4-white);
}

.site :is(input, textarea)::placeholder,
.site .wpcf7 form :is(input, textarea).wpcf7-form-control:focus::placeholder {
  color: var(--c4-muted);
  -webkit-text-fill-color: var(--c4-muted);
  opacity: 1;
}

/* Keep Storefront's light password fieldset inside the account dark palette. */
.woocommerce-account .woocommerce-EditAccountForm fieldset {
  min-width: 0;
  margin: 1.5rem 0;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--c4-border);
  border-radius: var(--c4-radius);
  background: var(--c4-panel);
  color: var(--c4-white);
}

.woocommerce-account .woocommerce-EditAccountForm fieldset legend {
  padding: 0 0.5rem;
  background: var(--c4-panel);
  color: var(--c4-white);
  font-weight: 700;
}

.woocommerce-account .woocommerce-EditAccountForm fieldset label {
  color: var(--c4-white);
}

.woocommerce-account .woocommerce-MyAccount-content mark {
  background: transparent;
  color: var(--c4-white);
}

.c4-account-licence {
  min-width: 0;
  margin-block: 1.25rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--c4-border);
  border-radius: var(--c4-radius);
  background: var(--c4-panel);
}

.c4-account-licence h3 { font-size: 1.25rem; color: var(--c4-white); }
.c4-licence-details { margin: 0 0 1.25rem; }
.c4-licence-details dt { color: var(--c4-muted); font-size: 0.85rem; }
.c4-licence-details dd { margin: 0 0 0.75rem; color: var(--c4-white); overflow-wrap: anywhere; }
.c4-licence-actions, .c4-licence-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.c4-licence-actions .button { max-width: 100%; white-space: normal; }

.woocommerce button.show-password-input,
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: var(--c4-panel-raised) !important;
  border: 1px solid var(--c4-border) !important;
  color: var(--c4-white) !important;
}

.woocommerce button.show-password-input:hover,
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
  background: var(--c4-green-dark) !important;
  border-color: var(--c4-green) !important;
  color: var(--c4-white) !important;
}

.button:disabled, button:disabled, input[type="submit"]:disabled,
.wc-block-components-button:disabled {
  opacity: 0.55;
}

.site-footer a:not(.button):not(.components-button) {
  color: var(--c4-muted);
}

.site-footer a:not(.button):hover {
  color: var(--c4-green);
}

.storefront-handheld-footer-bar,
.storefront-handheld-footer-bar ul li > a,
.storefront-handheld-footer-bar ul li.search .site-search,
.storefront-sticky-add-to-cart {
  background: var(--c4-panel) !important;
  border-color: var(--c4-border) !important;
  color: var(--c4-white) !important;
}

.site-footer .storefront-handheld-footer-bar a:not(.button):not(.components-button),
.storefront-sticky-add-to-cart a:not(.button) {
  color: var(--c4-white);
}

.woocommerce table.shop_table th, .woocommerce table.shop_table td,
#order_review, #payment .payment_methods > li:not(.woocommerce-notice),
#payment .payment_methods > li .payment_box, #payment .place-order {
  background: var(--c4-panel) !important;
  color: var(--c4-white);
  border-color: var(--c4-border);
}

@media (max-width: 767px) {
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error,
      .woocommerce-noreviews, p.no-comments) .button {
    float: none;
    display: flex;
    width: fit-content;
    margin: 0 0 0.75rem;
  }

  .custom-logo-link img, .site-logo img, .wp-block-site-logo img {
    max-height: 48px !important;
    max-width: 48px !important;
  }

  .woocommerce-products-header {
    padding-block: 1rem 1.5rem !important;
  }

  button.menu-toggle {
    min-height: 44px;
    padding: 0.65rem 1rem;
  }

  button.menu-toggle::before, button.menu-toggle::after,
  button.menu-toggle span::before {
    background-color: var(--c4-green);
  }

  button.menu-toggle:hover::before, button.menu-toggle:hover::after,
  button.menu-toggle:hover span::before {
    background-color: #031006;
  }

  .main-navigation .handheld-navigation ul li a {
    padding-block: 0.75rem;
    font-family: var(--c4-font);
    color: var(--c4-white);
  }
}

@media (prefers-reduced-motion: reduce) {
  .button, button, .wc-block-components-button {
    transition: none;
  }
}