/*
Theme Name: C⁴ Clock Storefront
Theme URI: https://c4clock.com/
Description: Dark C⁴ Clock shop theme based on WooCommerce Storefront.
Author: C⁴ Clock
Template: storefront
Version: 0.1.8
Text Domain: c4clock-storefront
*/

:root {
  --c4-black: #050705;
  --c4-surface: #0b0f0b;
  --c4-panel: #111711;
  --c4-panel-raised: #172017;
  --c4-border: #2c352c;
  --c4-green: #70f225;
  --c4-green-strong: #56d816;
  --c4-green-dark: #193c10;
  --c4-orange: #ff8a18;
  --c4-red: #ed3434;
  --c4-white: #f4f6f2;
  --c4-muted: #aab3a8;
  --c4-radius: 12px;
  --c4-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --c4-rounded: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", "Segoe UI", sans-serif;
}

/* Cart/header polish: keep the shop mark compact and remove the light
   mobile sticky-cart backing on the dark shop theme. */
.custom-logo-link img,
.site-logo img,
.wp-block-site-logo img {
  max-height: 140px !important;
  max-width: 140px !important;
  width: auto !important;
  height: auto !important;
}

@media (max-width: 768px) {
  .custom-logo-link img,
  .site-logo img,
  .wp-block-site-logo img {
    max-height: 96px !important;
    max-width: 96px !important;
  }
}

.woocommerce-cart .wc-block-cart__submit-container {
  background: var(--c4-black, #050705) !important;
  box-shadow: none !important;
}

.woocommerce-cart .wc-block-cart__submit-container::before {
  box-shadow: none !important;
}

/* Keep Storefront's header mini-cart and adjacent-product tabs on-brand. */
.site-header-cart .widget_shopping_cart,
.site-header-cart .widget_shopping_cart .woocommerce-mini-cart,
.site-header-cart .widget_shopping_cart .total,
.site-header-cart .widget_shopping_cart .buttons {
  background: var(--c4-panel) !important;
  border-color: var(--c4-border) !important;
  color: var(--c4-white) !important;
}

.site-header-cart .widget_shopping_cart .woocommerce-mini-cart-item,
.site-header-cart .widget_shopping_cart .woocommerce-mini-cart__total {
  border-color: var(--c4-border) !important;
}

.site-header-cart .widget_shopping_cart .woocommerce-mini-cart-item > a:not(.remove),
.site-header-cart .widget_shopping_cart .woocommerce-mini-cart-item .quantity {
  color: var(--c4-white) !important;
}

.storefront-product-pagination a {
  background: var(--c4-panel) !important;
  border: 1px solid var(--c4-border) !important;
  color: var(--c4-green) !important;
}

.storefront-product-pagination a:hover {
  background: var(--c4-panel-raised) !important;
  color: var(--c4-green) !important;
}

.storefront-product-pagination .storefront-product-pagination__title {
  color: var(--c4-green) !important;
}

.storefront-product-pagination img.woocommerce-placeholder {
  background: var(--c4-panel-raised) !important;
  filter: brightness(0.32);
}

html {
  background: var(--c4-black);
  color-scheme: dark;
  overflow-x: hidden;
}

body,
.site,
.site-content,
.woocommerce-coming-soon-banner-container {
  background:
    radial-gradient(circle at 12% 0%, rgba(112, 242, 37, 0.09), transparent 32rem),
    linear-gradient(180deg, #080b08 0%, var(--c4-black) 34rem);
  color: var(--c4-white);
  font-family: var(--c4-font);
}

body,
.wp-site-blocks,
.wp-block-woocommerce-coming-soon,
.woocommerce-coming-soon-banner-container {
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;
  width: 100%;
}

body,
button,
input,
select,
textarea {
  font-family: var(--c4-font);
}

h1,
h2,
h3,
h4,
h5,
h6,
.site-title,
.main-navigation,
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-element-button,
.woocommerce-loop-product__title {
  font-family: var(--c4-rounded);
  letter-spacing: -0.015em;
}

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.page-title,
.woocommerce-loop-product__title {
  color: var(--c4-white);
}

p,
li,
address,
.site-info,
.product_meta,
.woocommerce-breadcrumb {
  color: var(--c4-muted);
}

a {
  color: var(--c4-green);
  text-decoration-color: rgba(112, 242, 37, 0.45);
}

a:focus,
a:hover {
  color: var(--c4-green);
  text-decoration-color: var(--c4-green);
}

::selection {
  background: var(--c4-green);
  color: #071006;
}

.site-header,
.woocommerce-coming-soon-header {
  background: rgba(5, 7, 5, 0.94) !important;
  border-bottom: 1px solid var(--c4-border);
  color: var(--c4-white);
}

.site-header {
  padding-block: 1rem;
}

.custom-logo-link img,
.site-logo img,
.wp-block-site-logo img {
  display: block;
  height: auto;
  max-height: 56px;
  max-width: 56px;
  width: auto;
}

.site-branding .site-title a,
.wp-block-site-title a {
  color: var(--c4-white) !important;
  font-family: var(--c4-rounded);
  font-weight: 800;
  text-decoration: none;
}

.site-branding .site-description {
  color: var(--c4-muted);
}

.main-navigation ul li a,
.site-header-cart .cart-contents {
  color: var(--c4-white);
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.site-header-cart .cart-contents:hover {
  color: var(--c4-green);
}

.main-navigation ul ul,
.site-header-cart .widget_shopping_cart,
.site-header-cart .product_list_widget {
  background: var(--c4-panel);
  border: 1px solid var(--c4-border);
}

.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-element-button,
.added_to_cart,
.widget a.button,
.wc-block-components-button {
  background: var(--c4-green) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: #071006 !important;
  font-weight: 800 !important;
  padding: 0.8em 1.25em;
  text-decoration: none !important;
  text-shadow: none !important;
  transform: none !important;
}

.button:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.wp-element-button:hover,
.added_to_cart:hover,
.widget a.button:hover,
.wc-block-components-button:hover {
  background: var(--c4-green) !important;
  color: #071006 !important;
  filter: none;
  transform: none !important;
}

.is-style-outline > .wp-block-button__link,
.button.alt {
  background: transparent !important;
  border: 1px solid var(--c4-green) !important;
  color: var(--c4-green) !important;
}

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

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select,
.select2-container .select2-selection {
  background: #090d09;
  border: 1px solid var(--c4-border);
  border-radius: 9px;
  box-shadow: none;
  color: var(--c4-white);
}

input:focus,
textarea:focus,
select:focus,
.select2-container--focus .select2-selection {
  border-color: var(--c4-green);
  box-shadow: 0 0 0 2px rgba(112, 242, 37, 0.16);
  outline: none;
}

.wpcf7 form input.wpcf7-form-control:focus,
.wpcf7 form textarea.wpcf7-form-control:focus {
  background-color: #fff !important;
  border-color: var(--c4-green) !important;
  box-shadow: 0 0 0 3px rgba(112, 242, 37, 0.2) !important;
  caret-color: #071006;
  color: #071006 !important;
}

.wpcf7 form input.wpcf7-form-control:focus::placeholder,
.wpcf7 form textarea.wpcf7-form-control:focus::placeholder {
  color: #606a60;
  opacity: 1;
}

.woocommerce ul.products li.product,
.wc-block-grid__product,
.woocommerce-cart-form,
.cart_totals,
.woocommerce-checkout-review-order,
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce form.login,
.woocommerce form.register {
  background: var(--c4-panel);
  border: 1px solid var(--c4-border);
  border-radius: var(--c4-radius);
}

.woocommerce ul.products li.product,
.wc-block-grid__product {
  padding: 1rem;
}

.woocommerce ul.products li.product img,
.wc-block-grid__product-image img {
  border-radius: 8px;
}

.price,
.woocommerce-Price-amount,
.stock.in-stock {
  color: var(--c4-green) !important;
}

.woocommerce-info,
.woocommerce-message,
.woocommerce-noreviews,
p.no-comments {
  background: var(--c4-green-dark);
  border-left: 4px solid var(--c4-green);
  color: var(--c4-white);
}

.woocommerce-error {
  background: #401010;
  border-left: 4px solid var(--c4-red);
  color: var(--c4-white);
}

table,
table:not(.has-background) th,
table:not(.has-background) td {
  background: var(--c4-panel);
  border-color: var(--c4-border);
  color: var(--c4-white);
}

.site-footer {
  background: #030503;
  border-top: 1px solid var(--c4-border);
  color: var(--c4-muted);
}

.woocommerce-coming-soon-banner-container {
  min-height: 100vh;
}

.woocommerce-coming-soon-header {
  box-sizing: border-box;
  margin-inline: 0 !important;
  max-width: none !important;
  padding-inline: clamp(1rem, 4vw, 4rem) !important;
  width: 100% !important;
}

.woocommerce-coming-soon-header > .wp-block-group {
  box-sizing: border-box;
  margin-inline: auto !important;
  max-width: 80rem !important;
  width: 100% !important;
}

.woocommerce-coming-soon-header-logo-title {
  gap: 1rem;
}

.woocommerce-coming-soon-banner {
  color: var(--c4-white) !important;
  font-family: var(--c4-rounded) !important;
  font-size: clamp(2.3rem, 7vw, 5.75rem) !important;
  font-weight: 800;
  line-height: 1.02;
  margin-inline: auto !important;
  max-width: min(12ch, calc(100vw - 2rem)) !important;
  text-wrap: balance;
  width: auto !important;
}

.woocommerce-coming-soon-powered-by-woo {
  display: none !important;
}

a:focus,
input:focus,
textarea:focus,
button:focus {
  outline: 2px solid var(--c4-green);
  outline-offset: 3px;
}

*:focus-visible {
  outline: 2px solid var(--c4-green);
  outline-offset: 3px;
}

.site-header-cart .cart-contents:focus,
.site-header-cart .cart-contents:focus-visible {
  outline: 2px solid var(--c4-green) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  .custom-logo-link img,
  .site-logo img,
  .wp-block-site-logo img {
    max-height: 46px;
    max-width: 46px;
  }

  .woocommerce-coming-soon-header {
    padding-inline: 1rem !important;
  }

  .woocommerce-coming-soon-header > .wp-block-group {
    gap: 0.75rem;
  }

  .woocommerce-coming-soon-header-logo-title {
    flex: 1 1 auto;
    min-width: 0;
  }

  .woocommerce-coming-soon-header-login {
    flex: 0 0 auto;
  }

  .woocommerce-coming-soon-header-login .wp-block-button__link {
    padding: 0.65rem 0.9rem !important;
  }

  .wp-block-site-title {
    font-size: clamp(1rem, 5vw, 1.35rem) !important;
    white-space: nowrap;
  }

  .woocommerce-coming-soon-banner {
    font-size: clamp(2rem, 12vw, 3.25rem) !important;
    line-height: 1.08;
  }
}