/*
Theme Name: Ja Pottery Deco
Theme URI: https://www.japottery.com/
Description: Art deco x urban x chic child theme for Ja Pottery. Built on Storefront + WooCommerce.
Author: Ja Pottery
Template: storefront
Version: 1.0.0
Text Domain: ja-pottery-deco
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  --jp-ink: #1B1815;
  --jp-ink-light: #242019;
  --jp-hairline: #3A342C;
  --jp-hairline-soft: #4A4234;
  --jp-brass: #C9A24B;
  --jp-brass-hover: #D9B665;
  --jp-ivory: #F3ECDD;
  --jp-ivory-soft: #E8DCC4;
  --jp-warm-gray: #B9A888;
  --jp-terracotta: #A8552F;

  --jp-font-display: 'Bodoni Moda', Georgia, serif;
  --jp-font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

body {
  background-color: var(--jp-ink);
  color: var(--jp-ivory-soft);
  font-family: var(--jp-font-body);
}

a {
  color: var(--jp-ivory-soft);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--jp-brass);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--jp-font-display);
  color: var(--jp-ivory);
  font-weight: 500;
  letter-spacing: 0.3px;
}

.jp-hero-heading {
  font-style: italic;
  font-weight: 500;
}

/* Eyebrow / label style used for small uppercase text */
.jp-eyebrow {
  font-family: var(--jp-font-body);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--jp-brass);
}

/* ==========================================================================
   3. Header / navigation
   ========================================================================== */

.site-header {
  background-color: var(--jp-ink);
  border-bottom: 0.5px solid var(--jp-hairline);
}

.site-title,
.site-title a {
  font-family: var(--jp-font-body);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  color: var(--jp-ivory-soft);
}

.main-navigation ul li a {
  font-family: var(--jp-font-body);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--jp-warm-gray);
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
  color: var(--jp-brass);
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button {
  background-color: var(--jp-brass);
  color: var(--jp-ink);
  border: none;
  border-radius: 2px;
  font-family: var(--jp-font-body);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 11px;
  padding: 13px 28px;
  box-shadow: none;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--jp-brass-hover);
  color: var(--jp-ink);
}

/* Secondary / outline button variant: add class "jp-button-outline" in menus or widgets */
.jp-button-outline {
  background: transparent !important;
  color: var(--jp-ivory-soft) !important;
  border: 0.5px solid var(--jp-hairline-soft) !important;
}

/* ==========================================================================
   5. Deco divider (used via [jp_divider] shortcode, see functions.php)
   ========================================================================== */

.jp-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 140px;
  margin: 28px auto;
}

.jp-divider span {
  flex: 1;
  height: 1px;
  background-color: var(--jp-brass);
}

.jp-divider i {
  width: 8px;
  height: 8px;
  border: 1px solid var(--jp-brass);
  transform: rotate(45deg);
  display: block;
}

/* ==========================================================================
   6. Shop grid (WooCommerce archive / loop)
   ========================================================================== */

.woocommerce ul.products li.product {
  background-color: var(--jp-ink-light);
  border: 0.5px solid var(--jp-hairline);
  border-radius: 4px;
  padding: 20px 14px 24px;
  text-align: center;
}

.woocommerce ul.products li.product img {
  border-radius: 2px;
  margin-bottom: 14px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--jp-font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--jp-ivory-soft);
  margin-bottom: 4px;
}

.woocommerce ul.products li.product .price {
  font-family: var(--jp-font-body);
  color: var(--jp-brass);
  font-size: 13px;
}

.woocommerce ul.products li.product .price del {
  color: var(--jp-warm-gray);
}

/* Category filter pills, e.g. WooCommerce product-category widget or custom nav */
.jp-filter-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.jp-filter-pills a {
  font-family: var(--jp-font-body);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 2px;
  border: 0.5px solid var(--jp-hairline-soft);
  color: var(--jp-ivory-soft);
}

.jp-filter-pills a.active,
.jp-filter-pills a:hover {
  background-color: var(--jp-brass);
  color: var(--jp-ink);
  border-color: var(--jp-brass);
}

/* ==========================================================================
   7. Single product page
   ========================================================================== */

.woocommerce div.product div.images {
  background-color: var(--jp-ink-light);
  border: 0.5px solid var(--jp-hairline);
  border-radius: 4px;
  padding: 20px;
}

.woocommerce div.product .product_title {
  font-style: italic;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--jp-font-body);
  color: var(--jp-brass);
  font-size: 15px;
}

/* Variation swatch styling — targets the common "Variation Swatches for WooCommerce"
   plugin class names. Adjust selectors if you use a different swatches plugin. */
.variable-item {
  border-radius: 50% !important;
  border: 0.5px solid var(--jp-hairline-soft) !important;
}

.variable-item.selected,
.variable-item:hover {
  border: 2px solid var(--jp-ivory) !important;
}

/* Product tabs (Description / Additional information / Reviews) */
.woocommerce-tabs ul.tabs li {
  font-family: var(--jp-font-body);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--jp-warm-gray);
  border-bottom: 2px solid transparent;
  background: transparent;
}

.woocommerce-tabs ul.tabs li.active {
  color: var(--jp-brass);
  border-bottom-color: var(--jp-brass);
}

.woocommerce-tabs .panel {
  color: var(--jp-warm-gray);
  font-size: 13px;
  line-height: 1.7;
}

/* Related products heading */
.related.products > h2 {
  font-family: var(--jp-font-body);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--jp-warm-gray);
  font-style: normal;
}

/* ==========================================================================
   8. Footer
   ========================================================================== */

.site-footer,
#colophon {
  background-color: var(--jp-ink);
  border-top: 0.5px solid var(--jp-hairline);
  color: var(--jp-warm-gray);
}