/*
Theme Name: Evo Bikes – Swancircle
Theme URI: https://swancircle.co.za/
Author: Swancircle Studio
Author URI: https://swancircle.co.za/
Description: A clean Evo Bikes storefront layer for the independent Swancircle Base theme.
Version: 0.1.0
Template: swancircle-base
Text Domain: swancircle-evo-bikes
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/*
 * Evo Bikes visual system
 *
 * This layer deliberately avoids font size, weight, line-height and letter-spacing
 * rules so Elementor Site Settings remain the single typography control.
 */

:root {
  --sc-colour-ink: #191919;
  --sc-colour-paper: #f6f6f3;
  --sc-colour-white: #ffffff;
  --sc-colour-accent: #d7e030;
  --sc-wide: 1240px;
  --sc-gutter: clamp(20px, 4vw, 56px);
  --sc-radius: 4px;

  --evo-ink: var(--sc-colour-ink);
  --evo-paper: var(--sc-colour-paper);
  --evo-white: var(--sc-colour-white);
  --evo-accent: var(--sc-colour-accent);
  --evo-graphite: #2c3338;
  --evo-muted: #6f7477;
  --evo-border: #e4e5df;
  --evo-border-strong: #c9cbc4;
  --evo-shadow: 0 16px 40px rgba(25, 25, 25, 0.08);
  --evo-section-space: clamp(64px, 8vw, 120px);
  --evo-card-gap: clamp(16px, 2vw, 28px);
  --evo-transition: 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

body {
  background: var(--evo-white);
  color: var(--evo-ink);
}

::selection {
  background: var(--evo-accent);
  color: var(--evo-ink);
}

:focus-visible {
  outline-color: var(--evo-accent);
  outline-offset: 4px;
}

/* Predictable page rhythm. Add .evo-section to Elementor containers that need it. */
.evo-section {
  padding-block: var(--evo-section-space);
}

.evo-section--tight {
  padding-block: clamp(40px, 5vw, 72px);
}

.evo-surface {
  background: var(--evo-paper);
}

.evo-surface--dark {
  background: var(--evo-graphite);
  color: var(--evo-white);
}

.evo-container,
.woocommerce .site-main,
.woocommerce-page .site-main {
  width: min(100% - (2 * var(--sc-gutter)), var(--sc-wide));
  margin-inline: auto;
}

/* Header: quieter, more useful and visually separated from product content. */
.site-header,
.ts-header {
  border-bottom: 1px solid var(--evo-border);
  background: color-mix(in srgb, var(--evo-white) 94%, transparent);
  color: var(--evo-ink);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header {
  position: sticky;
  top: 0;
}

.admin-bar .site-header {
  top: 32px;
}

.site-header__inner {
  min-height: 76px;
}

.site-navigation a,
.ts-header a {
  transition: color var(--evo-transition), opacity var(--evo-transition);
}

.site-navigation a:hover,
.ts-header a:hover {
  color: var(--evo-ink);
  opacity: 0.62;
}

.site-navigation .current-menu-item > a {
  text-decoration-color: var(--evo-accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}

/* Buttons and form controls. */
:where(
  .button,
  button:not(.site-menu-toggle),
  input[type="button"],
  input[type="submit"],
  .elementor-button,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button
) {
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid var(--evo-accent);
  border-radius: var(--sc-radius);
  background: var(--evo-accent);
  color: var(--evo-ink);
  box-shadow: none;
  text-decoration: none;
  transition: background-color var(--evo-transition), border-color var(--evo-transition), color var(--evo-transition), transform var(--evo-transition);
}

:where(
  .button,
  button:not(.site-menu-toggle),
  input[type="button"],
  input[type="submit"],
  .elementor-button,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button
):hover {
  border-color: var(--evo-ink);
  background: var(--evo-ink);
  color: var(--evo-white);
  transform: translateY(-2px);
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 48px;
  border: 1px solid var(--evo-border-strong);
  border-radius: var(--sc-radius);
  background: var(--evo-white);
  color: var(--evo-ink);
  box-shadow: none;
  transition: border-color var(--evo-transition), box-shadow var(--evo-transition);
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  border-color: var(--evo-ink);
  box-shadow: 0 0 0 3px rgba(215, 224, 48, 0.42);
  outline: 0;
}

/* Product grids: consistent cards, image space and actions. */
:where(.woocommerce ul.products, .products) {
  gap: var(--evo-card-gap);
  margin-block: clamp(32px, 4vw, 56px);
}

:where(.woocommerce ul.products li.product, .products .product) {
  margin: 0;
  padding: clamp(14px, 1.5vw, 20px);
  border: 1px solid var(--evo-border);
  border-radius: var(--sc-radius);
  background: var(--evo-white);
  transition: border-color var(--evo-transition), box-shadow var(--evo-transition), transform var(--evo-transition);
}

:where(.woocommerce ul.products li.product, .products .product):hover {
  border-color: var(--evo-border-strong);
  box-shadow: var(--evo-shadow);
  transform: translateY(-4px);
}

:where(.woocommerce ul.products li.product, .products .product) :where(.product-wrapper, .product-content) {
  height: 100%;
}

:where(.woocommerce ul.products li.product, .products .product) img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: calc(var(--sc-radius) - 1px);
  background: var(--evo-paper);
}

:where(.woocommerce ul.products li.product, .products .product) :where(.product-name, .woocommerce-loop-product__title) {
  margin-top: 18px;
  color: var(--evo-ink);
  text-wrap: pretty;
}

:where(.woocommerce ul.products li.product, .products .product) .price {
  margin-top: 10px;
  color: var(--evo-ink);
}

:where(.woocommerce ul.products li.product, .products .product) del {
  color: var(--evo-muted);
  opacity: 1;
}

:where(.woocommerce ul.products li.product, .products .product) ins {
  color: var(--evo-ink);
  text-decoration: none;
}

:where(.woocommerce span.onsale, .product-label, .product .onsale) {
  min-width: auto;
  min-height: auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--evo-accent);
  color: var(--evo-ink);
}

/* Shop and product-page structure. */
.woocommerce .woocommerce-breadcrumb {
  margin-bottom: clamp(28px, 4vw, 52px);
  color: var(--evo-muted);
}

.woocommerce .woocommerce-ordering select {
  padding-inline: 14px 38px;
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
  margin-bottom: var(--evo-section-space);
}

.woocommerce div.product div.images img {
  border-radius: var(--sc-radius);
  background: var(--evo-paper);
}

.woocommerce div.product .summary .price {
  color: var(--evo-ink);
}

.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.woocommerce .quantity .qty {
  min-height: 48px;
  border-color: var(--evo-border-strong);
}

.woocommerce :where(.woocommerce-message, .woocommerce-info) {
  border-top-color: var(--evo-accent);
  background: var(--evo-paper);
}

.woocommerce :where(.woocommerce-message, .woocommerce-info)::before {
  color: var(--evo-ink);
}

/* Tables and checkout surfaces stay easy to scan. */
.woocommerce :where(table.shop_table, .cart_totals, .woocommerce-checkout-review-order) {
  border-color: var(--evo-border);
  border-radius: var(--sc-radius);
  background: var(--evo-white);
}

.woocommerce table.shop_table :where(th, td) {
  padding: 16px;
  border-color: var(--evo-border);
}

/* Footer: retain the live site's graphite cue with cleaner spacing. */
.site-footer,
.footer-container,
.footer-area {
  background: var(--evo-graphite);
  color: var(--evo-white);
}

.site-footer {
  padding-block: clamp(64px, 8vw, 112px) 28px;
}

.site-footer__grid {
  gap: clamp(32px, 5vw, 72px);
}

:where(.site-footer, .footer-container, .footer-area) a {
  color: inherit;
  transition: color var(--evo-transition), opacity var(--evo-transition);
}

:where(.site-footer, .footer-container, .footer-area) a:hover {
  color: var(--evo-accent);
  opacity: 1;
}

@media (max-width: 860px) {
  .admin-bar .site-header {
    top: 46px;
  }

  .site-header__inner {
    min-height: 68px;
  }

  .site-navigation {
    background: var(--evo-white);
  }

  :where(.woocommerce ul.products, .products) {
    gap: 14px;
  }
}

@media (max-width: 560px) {
  :root {
    --sc-gutter: 18px;
    --evo-section-space: 56px;
  }

  :where(.woocommerce ul.products li.product, .products .product) {
    padding: 12px;
  }

  .woocommerce div.product form.cart > * {
    width: 100%;
  }

  .woocommerce .quantity .qty {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.woocommerce ul.products li.product, .products .product):hover,
  :where(.button, button, .elementor-button):hover {
    transform: none;
  }
}