/*
 Theme Name: Astra Child - Ben Thanh
 Template: astra
 Description: Child theme for Ben Thanh Kitchen
 Version: 1.0.0
 Author: Integraah
*/

/* === BTK Fonts — Self-hosted === */

@font-face {
  font-family: "DM Serif Display";
  src: url("./fonts/dm-serif-display-v17-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* DM Sans v17 is a variable font — one file covers 400, 500, 600 */
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/dm-sans-v17-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* === BTK Typography === */

/* ── Body ─────────────────────────────────────────── */
body,
.site-content {
  font-family: "DM Sans", sans-serif;
  color: #f0ebe0;
}

/* ── Headings ─────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "DM Serif Display", serif !important;
  color: #c8ad7f !important;
  font-weight: 400;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Hero heading — white, Playfair Display set in Elementor */
#hero-banner h1 {
  color: #ffffff !important;
  font-family: "Playfair Display", serif !important;
  font-style: italic !important;
}

/* ── Elementor section/widget headings ────────────── */
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
h2.elementor-heading-title {
  font-family: "DM Serif Display", serif !important;
  color: #c8ad7f !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-size: 1.8rem !important;
}

/* === BTK Section Spacing === */

/* ── Breathing room between product sections ──────── */
.elementor-section,
.elementor-element .elementor-widget-woocommerce-products,
.elementor-element .elementor-widget-heading {
  margin-bottom: 12px !important;
}

.elementor-section {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

/* === BTK Card Redesign === */

/* ── Card container ───────────────────────────────── */
.woocommerce ul.products li.product {
  background-color: #2a2a2a;
  border: 1px solid #3d3d3d;
  border-radius: 12px;
  padding: 16px;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  overflow: hidden;
}

/* ── Card hover ───────────────────────────────────── */
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  border-color: rgba(232, 82, 26, 0.4);
}

/* ── Product image ────────────────────────────────── */
.woocommerce ul.products li.product a img {
  border-radius: 8px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ── Product title ────────────────────────────────── */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: "DM Sans", sans-serif;
  color: #f0ebe0;
  font-size: 0.95rem;
  font-weight: 500;
  margin-top: 10px;
  min-height: 2.4em;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Price ────────────────────────────────────────── */
.woocommerce ul.products li.product .price {
  font-family: "DM Sans", sans-serif;
  color: #e8521a;
  font-weight: 600;
}

/* ── Add to Cart button ───────────────────────────── */
/* ── Add to Cart button ───────────────────────────── */
.woocommerce ul.products li.product .button {
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: #e8521a;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 0.85rem;
  width: 100%;
  text-align: center;
  margin-top: 8px;
  opacity: 1;
  transform: none;
}

/* ── Add to Cart button hover ─────────────────────── */
.woocommerce ul.products li.product .button:hover {
  background: #d44715;
}

/* ── Hide Astra's on-card icon overlay button ─────── */
.woocommerce ul.products li.product .ast-on-card-button {
  display: none !important;
}

/* ── Responsive grid ──────────────────────────────── */

/* Tablet: 2 columns */
@media (max-width: 921px) {
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products.columns-5,
  .woocommerce ul.products.columns-3 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
  }

  .woocommerce ul.products.columns-4 li.product,
  .woocommerce ul.products.columns-5 li.product,
  .woocommerce ul.products.columns-3 li.product {
    width: calc(50% - 8px) !important;
    flex: 0 0 calc(50% - 8px) !important;
    margin: 0 !important;
  }
}

/* Phone: 2 columns */
@media (max-width: 544px) {
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products.columns-5,
  .woocommerce ul.products.columns-3 {
    gap: 12px !important;
  }

  .woocommerce ul.products.columns-4 li.product,
  .woocommerce ul.products.columns-5 li.product,
  .woocommerce ul.products.columns-3 li.product {
    width: calc(50% - 6px) !important;
    flex: 0 0 calc(50% - 6px) !important;
  }
}

/* === BTK Section Rhythm === */

/* Footer top border */
footer.site-footer,
.site-footer,
.elementor-location-footer {
  border-top: 1px solid #3d3d3d !important;
}

/* Footer link hover */
footer.site-footer a:hover,
.site-footer a:hover {
  color: #e8521a !important;
}

/* === BTK Micro-interactions === */

/* VIEW ALL button base */
.elementor-widget-button .elementor-button,
a.view-all-btn {
  transition: all 0.3s ease !important;
}

/* VIEW ALL button hover */
.elementor-widget-button .elementor-button:hover {
  background-color: #e8521a !important;
  color: #ffffff !important;
  border-color: #e8521a !important;
  transform: translateY(-2px);
}

/* Nav link hover */
.main-navigation a,
.ast-header-sections-navigation a,
.ast-builder-menu a {
  transition: color 0.3s ease !important;
}

.main-navigation a:hover,
.ast-header-sections-navigation a:hover,
.ast-builder-menu a:hover {
  color: #e8521a !important;
}

/* Cart icon hover */
.ast-cart-menu-wrap a,
.ast-header-woo-cart a {
  transition: color 0.3s ease !important;
}

.ast-cart-menu-wrap a:hover,
.ast-header-woo-cart a:hover {
  color: #e8521a !important;
}

/* Footer social icon hover */
.ast-footer-social-icons a {
  transition:
    color 0.3s ease,
    transform 0.3s ease !important;
}

.ast-footer-social-icons a:hover {
  color: #e8521a !important;
  transform: translateY(-2px);
}

/* Add to Cart subtle press on click */
.woocommerce ul.products li.product .button:active {
  transform: scale(0.97);
}

/* === Full Menu Page Styling === */

/* Menu section container */
.btk-menu-section {
  padding: 30px 0 10px 0 !important;
  margin: 0 !important;
}

/* Menu page section headings - match homepage */
.btk-menu-heading {
  font-family: "DM Serif Display", serif !important;
  color: #c8ad7f !important;
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  line-height: 1.25em !important;
  margin: 30px 0 16px 0 !important;
}

/* Tighten the product grid inside menu sections */
.btk-menu-section .woocommerce ul.products {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Reduce gap between cards */
.btk-menu-section .woocommerce ul.products li.product {
  margin-bottom: 16px !important;
}

/* Remove extra spacing WooCommerce adds after each section */
.btk-menu-section .woocommerce {
  margin-bottom: 0 !important;
}

/* Add subtle divider between sections */
.btk-menu-section + .btk-menu-section {
  border-top: none !important;
}

/* Menu page section divider */
.btk-menu-divider {
  text-align: center !important;
  padding: 10px 0 20px 0 !important;
}

.btk-menu-divider span {
  display: inline-block !important;
  width: 60px !important;
  height: 2px !important;
  background: rgba(200, 173, 127, 0.4) !important;
  border-radius: 1px !important;
}