/*
Theme Name:   Arabella
Description:  Tema minimalista em preto e branco da Arabella — moda feminina elegante casual. Child theme do Storefront (tema oficial do WooCommerce).
Author:       Leo
Template:     storefront
Version:      1.0.0
Text Domain:  arabella
*/

/* =========================================================
   1. VARIAVEIS E BASE — monocromatico elegante
   ========================================================= */
:root {
  --bg: #ffffff;
  --bg-alt: #f7f7f7;
  --border: #e6e6e6;
  --border-strong: #111111;
  --text: #111111;
  --text-muted: #8a8a8a;
  --black: #111111;
  --black-hover: #333333;
  --transition: all .25s ease;
}

body,
.storefront-breadcrumb,
.site-content {
  background-color: var(--bg);
  color: var(--text);
}

body {
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  letter-spacing: .02em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  color: var(--text);
  letter-spacing: .04em;
}

a { color: var(--text); transition: var(--transition); }
a:hover { color: var(--text-muted); }
p { color: var(--text); }

::selection { background: var(--black); color: #fff; }

/* =========================================================
   2. CABECALHO — preto, destaca a logo branca
   ========================================================= */
.site-header,
.storefront-handheld-footer-bar {
  background-color: #111111;
  border-bottom: none;
}

.site-header .custom-logo-link img,
.site-branding img {
  max-height: 64px;
  width: auto;
}

.site-branding h1 a,
.site-branding .site-title a {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #ffffff;
  font-weight: 500;
  letter-spacing: .08em;
}

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

.main-navigation ul li a,
.secondary-navigation ul.menu a {
  color: #ffffff;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 400;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
  color: #b5b5b5;
}

.storefront-primary-navigation,
.main-navigation ul.menu ul,
.main-navigation ul.nav-menu ul {
  background-color: #111111;
}

.main-navigation ul.menu ul li a { color: #fff; }

button.menu-toggle,
button.menu-toggle:hover {
  background: transparent;
  color: #fff;
  border: none;
}

.main-navigation ul.menu ul,
.main-navigation ul.nav-menu ul {
  background-color: var(--bg);
  border: 1px solid var(--border);
}

.storefront-primary-navigation,
.main-navigation ul.menu ul li a { background-color: transparent; }

.site-header .widget_search input[type="search"],
.site-header-cart .cart-contents { color: #ffffff; }

.site-header-cart .cart-contents .amount,
.site-header-cart .cart-contents .count { color: #b5b5b5; }

.site-header-cart .widget_shopping_cart {
  background-color: var(--bg);
  border: 1px solid var(--border);
}

/* =========================================================
   3. BOTOES — preto solido, sem arredondamento
   ========================================================= */
.button,
button,
input[type="button"],
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.wp-block-button__link {
  background-color: var(--black);
  color: #ffffff;
  border: 1px solid var(--black);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .74rem;
  font-weight: 400;
  padding: 1em 2.6em;
  transition: var(--transition);
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background-color: transparent;
  color: var(--black);
  border-color: var(--black);
}

.button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.single_add_to_cart_button {
  background-color: var(--black) !important;
  color: #fff !important;
  border: 1px solid var(--black) !important;
  border-radius: 0 !important;
}

.button.alt:hover,
.woocommerce a.button.alt:hover,
.single_add_to_cart_button:hover {
  background-color: transparent !important;
  color: var(--black) !important;
}

/* =========================================================
   4. VITRINE DE PRODUTOS — cards limpos, sem moldura
   ========================================================= */
ul.products li.product {
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0 0 1.4em;
  overflow: hidden;
  transition: var(--transition);
}

ul.products li.product img {
  background-color: var(--bg-alt);
  margin-bottom: 1.1em;
  transition: var(--transition);
}

ul.products li.product:hover img { opacity: .82; }

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2 {
  font-family: 'Jost', sans-serif;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 400;
  color: var(--text);
  text-align: center;
}

ul.products li.product .price {
  color: var(--text-muted);
  font-size: .9rem;
  font-weight: 300;
  text-align: center;
  display: block;
}

ul.products li.product .price ins { color: var(--text); text-decoration: none; }
ul.products li.product .price del { color: var(--text-muted); opacity: 1; }

ul.products li.product .button {
  display: table;
  margin: 1em auto 0;
  padding: .8em 2em;
}

/* Selo de promocao — quadrado preto */
.onsale,
.woocommerce span.onsale {
  background-color: var(--black);
  color: #fff;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .66rem;
  font-weight: 400;
  padding: .5em 1.1em;
  min-height: 0;
  line-height: 1.4;
}

.star-rating span,
.star-rating::before { color: var(--black); }

/* =========================================================
   5. PAGINA DE PRODUTO
   ========================================================= */
.single-product div.product .woocommerce-product-gallery {
  border: none;
  background-color: var(--bg-alt);
}

.single-product div.product .product_title {
  font-size: 2.1rem;
  font-weight: 500;
}

.single-product div.product p.price {
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: .06em;
}

.woocommerce-tabs ul.tabs li a {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .76rem;
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--text);
  border-bottom: 1px solid var(--black);
}

.woocommerce-tabs .panel { background-color: transparent; }

table th,
table td,
table.shop_attributes th,
table.shop_attributes td {
  background-color: transparent !important;
  border-color: var(--border) !important;
  color: var(--text);
}

table.variations select,
.woocommerce div.product form.cart .variations select {
  background-color: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  padding: .5em 1em;
}

.quantity .qty {
  background-color: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 0;
}

/* =========================================================
   6. CARRINHO E CHECKOUT
   ========================================================= */
.woocommerce-cart table.cart,
.woocommerce table.shop_table {
  border: 1px solid var(--border);
  border-radius: 0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td { border-color: var(--border); }

.cart_totals,
.woocommerce-checkout #order_review,
#customer_details .woocommerce-billing-fields,
.woocommerce form.checkout_coupon,
.woocommerce form.login {
  background-color: var(--bg-alt);
  border: none !important;
  border-radius: 0;
}

.woocommerce-checkout #payment {
  background-color: var(--bg-alt);
  border-radius: 0;
}

.woocommerce-checkout #payment div.payment_box {
  background-color: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--bg);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select,
.select2-container--default .select2-selection--single {
  background-color: var(--bg);
  color: var(--text);
  border: none;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  padding: .7em .2em;
  box-shadow: none;
  transition: var(--transition);
}

input:focus,
textarea:focus,
select:focus {
  border-bottom-color: var(--black);
  outline: none;
  box-shadow: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text); }

.select2-dropdown {
  background-color: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
}

label {
  color: var(--text-muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  background-color: var(--bg-alt);
  color: var(--text);
  border-top: 2px solid var(--black);
  border-radius: 0;
}

/* =========================================================
   7. RODAPE — preto, contraste com o corpo branco
   ========================================================= */
.site-footer {
  background-color: #111111;
  color: #9a9a9a;
  border-top: none;
}

.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6 { color: #ffffff; }

.site-footer a:not(.button) { color: #9a9a9a; }
.site-footer a:not(.button):hover { color: #ffffff; }

.site-info {
  border-top: 1px solid #2a2a2a;
  padding-top: 1.5em;
}

/* =========================================================
   8. HOMEPAGE E NAVEGACAO
   ========================================================= */
.storefront-product-section .section-title,
.page-template-template-homepage .site-main > h2 {
  text-align: center;
  font-size: 1.8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
}

.storefront-product-section .section-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--black);
  margin: .7em auto 0;
}

.page-template-template-homepage .site-main .columns-4 { margin-bottom: 3em; }

.storefront-breadcrumb {
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.4em;
  background: var(--bg);
}

.woocommerce-breadcrumb {
  color: var(--text-muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li { border: none; }

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  background-color: transparent;
  color: var(--text-muted);
  font-size: .85rem;
  letter-spacing: .1em;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background-color: transparent;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.storefront-handheld-footer-bar ul li > a { color: #ffffff; }

.widget { color: var(--text-muted); }

.widget .widget-title,
.widget .widgettitle {
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .85rem;
  font-weight: 400;
}

.widget_price_filter .ui-slider .ui-slider-range,
.widget_price_filter .ui-slider .ui-slider-handle { background-color: var(--black); }


/* =========================================================
   9. RODAPE — logo Arabella em destaque
   ========================================================= */
.footer-logo {
  text-align: center;
  padding: 2.2em 0 0;
}

.footer-logo img {
  max-width: 240px;
  height: auto;
  margin: 0 auto;
  display: block;
}

.footer-logo-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.2rem;
  color: #ffffff;
  letter-spacing: .06em;
  margin: 0;
}

.footer-tagline {
  text-align: center;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #9a9a9a;
  margin: .8em 0 0;
}


/* =========================================================
   10. RESPONSIVO — tablet e celular
   ========================================================= */

/* Tablet: 3 produtos por linha */
@media (min-width: 601px) and (max-width: 992px) {
  ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }
}

/* Celular */
@media (max-width: 600px) {

  /* Tipografia reduzida com proporcao */
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.4rem; }

  .single-product div.product .product_title { font-size: 1.5rem; }

  /* Cabecalho compacto e centralizado */
  .site-header {
    padding: 1em 0 0;
  }

  .site-branding {
    text-align: center;
    float: none;
    margin: 0 auto .5em;
  }

  .site-header .custom-logo-link img,
  .site-branding img {
    max-height: 42px;
    margin: 0 auto;
  }

  .site-search { margin-bottom: .5em; }

  button.menu-toggle {
    color: #fff;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .74rem;
  }

  /* Hero e secoes com menos respiro vertical */
  .page-template-template-homepage .site-main,
  .storefront-product-section { padding-top: 1.2em; }

  .storefront-product-section .section-title,
  .page-template-template-homepage .site-main > h2 {
    font-size: 1.3rem;
    letter-spacing: .12em;
  }

  /* Vitrine: 2 produtos por linha, sempre */
  ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }

  ul.products li.product .woocommerce-loop-product__title,
  ul.products li.product h2 {
    font-size: .74rem;
    letter-spacing: .1em;
  }

  ul.products li.product .price { font-size: .82rem; }

  ul.products li.product .button {
    display: block;
    width: 100%;
    text-align: center;
    padding: .9em 0;
  }

  /* Botoes principais em largura total (alvo de toque confortavel) */
  .single_add_to_cart_button,
  .woocommerce-cart .checkout-button,
  .woocommerce-checkout #place_order,
  form.cart .button {
    display: block;
    width: 100%;
    text-align: center;
    padding: 1.1em 0;
    font-size: .8rem;
  }

  /* Pagina de produto: galeria e resumo empilhados com folga */
  .single-product div.product .woocommerce-product-gallery,
  .single-product div.product .summary {
    width: 100%;
    float: none;
    margin-bottom: 1.6em;
  }

  .quantity .qty {
    min-height: 44px;
    width: 70px;
  }

  table.variations select {
    width: 100%;
    min-height: 44px;
  }

  /* Carrinho: tabela vira lista empilhada */
  .woocommerce-cart table.cart td.actions .coupon .input-text,
  .woocommerce-cart table.cart td.actions .coupon .button {
    width: 100%;
    margin-bottom: .6em;
  }

  /* Checkout: campos e resumo em coluna unica */
  #customer_details .col-1,
  #customer_details .col-2,
  .woocommerce-checkout #order_review,
  .woocommerce-checkout #order_review_heading {
    width: 100%;
    float: none;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  select {
    min-height: 44px;
    font-size: 16px; /* evita zoom automatico do iOS ao focar */
  }

  /* Rodape compacto */
  .footer-logo img { max-width: 170px; }
  .footer-logo-text { font-size: 1.7rem; }

  .footer-tagline {
    font-size: .66rem;
    letter-spacing: .16em;
  }

  .site-footer { text-align: center; }
}