/*
Theme Name: Black Cut Lab
Theme URI: https://github.com/caio-swdev/client-2026-rafael-black_cut_lab_imports-ecommerce
Description: Custom Storefront child theme for Black Cut Lab Imports. Catalog-first WooCommerce shop inspired by Kyte-style product lists.
Author: Caio (swdev)
Template: storefront
Version: f03847b
Text Domain: black-cut-lab
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   Design tokens — dark premium palette (v0.2.0)
   ============================================================ */
:root {
  --bcl-bg:            #0D0D0D;
  --bcl-bg-secondary:  #1A1A1A;
  --bcl-surface:       #161616;
  --bcl-header:        #000000;
  --bcl-text:          #F5F5F5;
  --bcl-muted:         #C0C0C0;
  --bcl-accent:        #D4AF37;
  --bcl-accent-strong: #B8962E;
  --bcl-border:        rgba(192, 192, 192, 0.12);
  --bcl-shadow:        0 2px 20px rgba(0, 0, 0, 0.5);
  --bcl-radius:        16px;
  --bcl-font:          'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ============================================================
   Global dark background
   ============================================================ */
html {
  background:
    radial-gradient(ellipse at -5% 40%, rgba(212, 175, 55, 0.22) 0%, transparent 50%),
    radial-gradient(ellipse at 105% 40%, rgba(0, 120, 255, 0.20) 0%, transparent 50%),
    #0D0D0D;
  background-attachment: fixed;
  min-height: 100%;
}

body {
  background: transparent !important;
  min-height: 100vh;
  color: var(--bcl-text) !important;
}

.site,
#page,
#content,
.site-content,
.content-area,
#primary,
.storefront-breadcrumb {
  background: transparent !important;
}

/* ============================================================
   Typography reset — Inter everywhere
   ============================================================ */
body,
button,
input,
select,
textarea,
.site-header,
.storefront-breadcrumb,
.woocommerce {
  font-family: var(--bcl-font) !important;
  color: var(--bcl-text);
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bcl-font);
  color: var(--bcl-text);
  font-weight: 600;
}

a { color: var(--bcl-accent); }
a:hover, a:focus { color: var(--bcl-accent-strong); }

input,
select,
textarea {
  background-color: var(--bcl-surface) !important;
  color: var(--bcl-text) !important;
  border-color: var(--bcl-border) !important;
}

/* ============================================================
   Header — fully transparent, gradient shows through
   ============================================================ */
.site-header {
  background: transparent !important;
  border-bottom: none !important;
  padding: 1rem 1.5rem;
}

/* Search area inside header */
.site-search,
.site-header .site-search {
  background: transparent !important;
}

.site-branding,
.site-header__title,
.site-header .site-title {
  text-align: center;
}

.site-title,
.site-title a {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--bcl-accent) !important;
  text-transform: none;
  letter-spacing: -0.01em;
}

.site-description {
  color: var(--bcl-muted);
  font-size: 0.875rem;
  text-align: center;
}

/* Site logo — constrain height in header */
.site-header .custom-logo,
.site-branding .custom-logo,
.custom-logo {
  max-height: 117px !important;
  width: auto !important;
  display: block;
  margin: 0 auto;
}

/* Storefront's primary nav — simplify */
.main-navigation ul li a {
  color: var(--bcl-text);
  font-weight: 400;
}
.main-navigation ul li a:hover { color: var(--bcl-accent); }

/* ============================================================
   Shop archive — list layout instead of grid
   ============================================================ */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: 100% !important;
  float: none !important;
  clear: both !important;
  margin: 0 !important;
  padding: 1rem 1.25rem !important;
  background: var(--bcl-surface) !important;
  border: 1px solid var(--bcl-border);
  border-radius: var(--bcl-radius);
  box-shadow: var(--bcl-shadow);
  display: grid !important;
  grid-template-columns: 140px 1fr auto;
  grid-template-rows: auto auto auto;
  column-gap: 1.5rem;
  row-gap: 0;
  align-items: center;
  text-align: left !important;
}

.woocommerce ul.products li.product > a:first-of-type {
  display: contents;
}

.woocommerce ul.products li.product a img {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: center;
  width: 100%;
  max-width: 140px;
  height: auto;
  max-height: 140px;
  object-fit: contain;
  margin: 0 !important;
  border-radius: 8px;
  background: #1E1E1E;
}

/* Middle column: title + category label + price stacked tight (matches Kyte reference) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  line-height: 1.3;
  margin: 0.15rem 0 !important;
}

.woocommerce ul.products li.product .bcl-product-category {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  line-height: 1.3;
  margin: 0;
}

.woocommerce ul.products li.product .price {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  line-height: 1.3;
  margin: 0 !important;
}

/* Right column: add-to-cart button spans full height */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  grid-column: 3;
  grid-row: 1 / span 3;
  align-self: center;
  justify-self: end;
  width: auto !important;
  min-width: 110px;
  margin: 0 !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: var(--bcl-text) !important;
  padding: 0 !important;
  margin: 0 0 0.25rem 0 !important;
  text-transform: none !important;
}

.woocommerce ul.products li.product .price {
  color: var(--bcl-accent) !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin: 0.5rem 0 0.75rem 0 !important;
}

/* Category label above title — inject via functions.php woocommerce_shop_loop_item_title hook */
.woocommerce ul.products li.product .bcl-product-category {
  font-size: 0.75rem;
  color: var(--bcl-muted);
  text-transform: none;
  letter-spacing: 0;
  display: block;
  margin-bottom: 0.25rem;
}

/* Generic buttons — transparent with silver border */
.woocommerce ul.products li.product .button,
.woocommerce a.button {
  background-color: transparent !important;
  color: var(--bcl-muted) !important;
  border: 1px solid var(--bcl-border) !important;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-weight: 500;
  font-size: 0.875rem;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover {
  background-color: transparent !important;
  border-color: var(--bcl-accent) !important;
  color: var(--bcl-accent) !important;
}

/* WhatsApp CTA — stays green */
.woocommerce ul.products li.product .bcl-whatsapp-btn,
.bcl-whatsapp-btn {
  background-color: #25D366 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.bcl-whatsapp-btn:hover {
  background-color: #1ebe5c !important;
  color: #fff !important;
}

/* ============================================================
   Sidebar — dark surface, slightly elevated from background
   ============================================================ */
#secondary.widget-area {
  background: #1E1E1E !important;
  border: 1px solid rgba(192, 192, 192, 0.2);
  border-radius: var(--bcl-radius);
  box-shadow: var(--bcl-shadow);
  padding: 1.25rem 1rem;
  margin: 15px 0;
}

.widget-area .widget {
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin-bottom: 1.5rem;
}

.widget-area .widget h2.widget-title,
.widget-area .widget .widget-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bcl-muted);
  text-transform: none;
  letter-spacing: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--bcl-border);
  margin-bottom: 0.75rem;
}

.widget-area ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.widget-area ul li {
  border: none;
  padding: 0.35rem 0;
  font-size: 0.9375rem;
  list-style: none;
}

.widget-area ul li::marker,
.widget-area ul li::before {
  content: none;
  display: none;
}

.widget-area ul li a,
.widget_product_categories ul li a,
.cat-item a,
#secondary a {
  color: #00BFFF !important;
  text-decoration: none;
}

.widget-area ul li a:hover,
.widget_product_categories ul li a:hover,
.cat-item a:hover,
#secondary a:hover {
  color: #33CFFF !important;
}

/* Active category indicator */
.widget-area ul li.current-cat a,
.widget-area ul li.current-cat > a {
  color: #33CFFF !important;
  font-weight: 500;
}

/* ============================================================
   Search bar
   ============================================================ */
.woocommerce-product-search input[type="search"],
.search-field {
  border-radius: 8px;
  border: 1px solid var(--bcl-border);
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  background: var(--bcl-surface) !important;
  color: var(--bcl-text) !important;
}

.woocommerce-product-search input[type="search"]::placeholder,
.search-field::placeholder {
  color: var(--bcl-muted);
}

/* ============================================================
   Remove Storefront's loud hover-lift on products
   ============================================================ */
.woocommerce ul.products li.product:hover {
  transform: none !important;
  box-shadow: 0 0 24px rgba(212, 175, 55, 0.12) !important;
  border-color: rgba(192, 192, 192, 0.25) !important;
}

/* ============================================================
   Breadcrumb hidden — cleaner reference-like archive
   ============================================================ */
.woocommerce .woocommerce-breadcrumb {
  display: none;
}

/* Sort widget inside the sidebar */
.widget.bcl-sort-widget select {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--bcl-border);
  border-radius: 8px;
  font-size: 0.9375rem;
  color: var(--bcl-text);
  background: var(--bcl-bg-secondary);
}

/* Shop title */
.woocommerce-products-header__title,
.page-title {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--bcl-muted) !important;
  margin-bottom: 1rem !important;
}

/* Hide the default sort dropdown that appears above the product loop
   — we render one in the sidebar via dynamic_sidebar_after instead. */
main .woocommerce-ordering,
main form.woocommerce-ordering,
#primary .woocommerce-ordering {
  display: none !important;
}

/* WooCommerce placeholder image — invert to dark */
img.woocommerce-placeholder {
  filter: invert(1) brightness(0.15);
}

/* ============================================================
   Footer — fully transparent, gradient shows through
   ============================================================ */
.site-footer {
  background: transparent !important;
  color: var(--bcl-muted) !important;
  border-top: none !important;
  padding: 2rem 1.5rem;
  font-size: 0.8125rem;
}
.site-footer a { color: var(--bcl-muted); }
.site-footer a:hover { color: var(--bcl-accent); }

/* Hide Storefront mobile footer bar + WooCommerce coming-soon banner */
.storefront-handheld-footer-bar,
#coming-soon-footer-banner {
  display: none !important;
}

/* ============================================================
   Category bottom drawer — hidden on desktop, shown on mobile
   ============================================================ */
.bcl-cat-bar,
.bcl-overlay,
.bcl-drawer {
  display: none;
}

@media (max-width: 768px) {
  /* Center logo on mobile */
  .site-header,
  .site-header .col-full {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }


  .site-branding {
    width: 100% !important;
  }

  /* Hide header search — replaced by inline search in bcl-cat-bar */
  .site-header .site-search,
  .site-header .widget_product_search {
    display: none !important;
  }

  /* Trigger button */
  .bcl-cat-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 1rem;
  }

  .bcl-search-form {
    position: relative;
    display: flex;
    align-items: center;
  }

  .bcl-search-icon {
    position: absolute;
    left: 12px;
    color: var(--bcl-muted);
    pointer-events: none;
  }

  .bcl-search-input {
    width: 100%;
    padding: 10px 14px 10px 40px !important;
    background: var(--bcl-surface) !important;
    color: var(--bcl-text) !important;
    border: 1px solid var(--bcl-border) !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
    outline: none;
    box-sizing: border-box;
  }

  .bcl-search-input::placeholder {
    color: var(--bcl-muted);
  }

  .bcl-cat-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bcl-accent);
  }

  .bcl-cat-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--bcl-surface);
    color: var(--bcl-text);
    border: 1px solid var(--bcl-border);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
  }

  /* Backdrop */
  .bcl-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
  }

  .bcl-overlay.is-open {
    opacity: 1;
    pointer-events: all;
  }

  /* Drawer */
  .bcl-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 70vh;
    background: var(--bcl-bg-secondary);
    border-radius: 16px 16px 0 0;
    z-index: 1000;
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }

  .bcl-drawer.is-open {
    transform: translateY(0);
  }

  .bcl-drawer__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    font-weight: 600;
    border-bottom: 1px solid var(--bcl-border);
    flex-shrink: 0;
  }

  .bcl-drawer__header button {
    background: none;
    border: none;
    color: var(--bcl-muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
  }

  .bcl-drawer__list {
    overflow-y: auto;
    padding: 0.5rem 0;
  }

  .bcl-drawer__item {
    display: block;
    padding: 0.875rem 1.25rem;
    color: var(--bcl-text);
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--bcl-border);
  }

  .bcl-drawer__item.is-active {
    color: var(--bcl-accent);
    font-weight: 600;
  }

  /* Hide sidebar */
  #secondary.widget-area {
    display: none !important;
  }

  /* Hide page title — drawer button already shows active selection */
  .woocommerce-products-header,
  .woocommerce-products-header__title,
  h1.page-title {
    display: none !important;
  }
}

/* ============================================================
   Mobile — keep 3-column layout, prevent button clipping
   ============================================================ */
@media (max-width: 480px) {
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product {
    grid-template-columns: 70px 1fr !important;
    column-gap: 0.75rem !important;
    padding: 0.75rem !important;
    overflow: hidden;
  }

  .woocommerce ul.products li.product a img {
    max-width: 70px !important;
    max-height: 70px !important;
  }

  .woocommerce ul.products li.product a.woocommerce-loop-product__link {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .woocommerce ul.products li.product .bcl-whatsapp-btn {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    padding: 0.5rem 0.6rem !important;
    font-size: 0.75rem !important;
    min-width: 0 !important;
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin-top: 0.5rem !important;
  }
}