/*
Theme Name: Brewcoffee Shop
Theme URI: https://anantsites.com/brewcoffee-shop/
Template: eshop-elementor
Author: Anantsites
Author URI: https://anantsites.com
Description: Elevate your online store with Brewcoffee Shop, a sleek and highly customizable WordPress theme designed specifically for eCommerce businesses. Built with seamless integration with the Elementor page builder, this theme offers a user-friendly drag-and-drop interface, allowing you to create stunning, responsive layouts without any coding knowledge. Brewcoffee Shop is packed with advanced features like product quick view, AJAX-powered search, and smooth shopping cart integration, ensuring a top-notch shopping experience for your customers. Perfect for any online retailer, this theme is optimized for speed, SEO, and mobile performance, helping you boost your sales and online presence effortlessly.
Tags: one-column,two-columns,right-sidebar,flexible-header,custom-background,custom-header,custom-menu,editor-style,featured-images,footer-widgets,theme-options,threaded-comments,rtl-language-support,translation-ready,full-width-template,custom-logo,blog,news
Version: 0.2
Tested up to: 6.9
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl.htmlhtml
Text Domain: brewcoffee-shop
*/
.main_nav .esh-el-menu ul {
  flex-wrap: wrap;
}
.main_nav .esh-el-menu ul li a {
  display: block;
  width: 100%;
  font-weight: 500;
  color: #ffc200;
}
.esh-el-title {
  word-break: break-all;
}
.esh-el-title + p {
  word-break: break-all;
}
.esh-el-blog-post {
  overflow: hidden;
}

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Playfair+Display:wght@500;600;700&display=swap");

:root {
  --primary-dark: #1a1f2e;
  --primary-blue: #2d4a7c;
  --accent-gold: #c9a227;
  --accent-copper: #b87333;
  --text-primary: #1a1f2e;
  --text-secondary: #4a5568;
  --text-light: #718096;
  --bg-cream: #f8f6f1;
  --bg-white: #ffffff;
  --bg-light: #f0ede6;
  --border-subtle: #e2ddd3;
  --shadow-soft: rgba(26, 31, 46, 0.08);
  --shadow-medium: rgba(26, 31, 46, 0.12);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-primary);
  background-color: var(--bg-cream);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M15 30c0-2 1-3.5 2.5-4.5l5-3c1-.6 2.5-.6 3.5 0l5 3c1.5 1 2.5 2.5 2.5 4.5v2c0 .5-.5 1-1 1h-2v3c0 .5-.5 1-1 1h-10c-.5 0-1-.5-1-1v-3h-2c-.5 0-1-.5-1-1v-2zm4-6c0-.5.5-1 1-1h2c.5 0 1 .5 1 1s-.5 1-1 1h-2c-.5 0-1-.5-1-1zm8 0c0-.5.5-1 1-1h2c.5 0 1 .5 1 1s-.5 1-1 1h-2c-.5 0-1-.5-1-1z' fill='%232d4a7c' fill-opacity='0.03'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='12' fill='none' stroke='%23c9a227' stroke-width='1' stroke-opacity='0.04'/%3E%3Ccircle cx='40' cy='40' r='6' fill='%23c9a227' fill-opacity='0.03'/%3E%3Cpath d='M40 28v-8M40 60v-8M28 40h-8M60 40h-8' stroke='%23c9a227' stroke-width='1' stroke-opacity='0.03'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M20 50h60M50 35v30M35 42l30 16M35 58l30-16' stroke='%231a1f2e' stroke-width='0.5' stroke-opacity='0.025'/%3E%3C/svg%3E");
  background-position:
    0 0,
    30px 40px,
    60px 20px;
}

.wrapper {
  max-width: 100%;
  overflow-x: hidden;
}

.esh-el-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.esh-el-header {
  background: linear-gradient(
    135deg,
    var(--primary-dark) 0%,
    var(--primary-blue) 100%
  );
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 20px var(--shadow-medium);
  margin-bottom: 30px;
}

.esh-el-header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-block-start: 0;
  padding-block-end: 0;
}

.esh-el-header-logo .site-title {
  font-family: "Playfair Display", serif;
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}

.esh-el-header-logo .site-title a {
  color: var(--bg-cream);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.esh-el-header-logo .site-title a::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--accent-gold);
  transform: rotate(45deg);
}

.site-description {
  display: none;
}

.esh-el-header-menu ul {
  list-style: none;
  display: flex;
  gap: 8px;
}

.esh-el-header-menu a {
  color: rgba(248, 246, 241, 0.85);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  transition: all 0.25s ease;
  background: rgba(255, 255, 255, 0.05);
}

.esh-el-header-menu a:hover,
.esh-el-header-menu .current_page_item a {
  color: var(--accent-gold);
  background: rgba(201, 162, 39, 0.1);
}

.clearfix {
  clear: both;
}

h1.wp-block-heading {
  font-family: "Playfair Display", serif;
  font-size: 38px;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 20px;
  letter-spacing: -0.5px;
  line-height: 1.25;
}

h2.wp-block-heading {
  font-family: "Playfair Display", serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--primary-dark);
  margin: 45px 0 22px;
  position: relative;
  padding-bottom: 12px;
}

h2.wp-block-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--accent-gold) 0%,
    var(--accent-copper) 100%
  );
}

h3.wp-block-heading {
  font-family: "Playfair Display", serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--primary-dark);
  margin: 0 0 6px;
}

p {
  margin-bottom: 18px;
  color: var(--text-secondary);
}

.has-text-align-center {
  text-align: center;
}

.sep {
  font-size: 14px;
  color: var(--accent-gold);
  letter-spacing: 8px;
  margin: 35px 0;
  opacity: 0.7;
}

.our-ranking {
  background: linear-gradient(135deg, var(--bg-white) 0%, var(--bg-light) 100%);
  padding: 20px 24px;
  margin: 25px 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-secondary);
  box-shadow: 0 2px 12px var(--shadow-soft);
  position: relative;
}

.our-ranking::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--accent-gold) 0%,
    var(--accent-copper) 50%,
    var(--primary-blue) 100%
  );
}

.our-ranking strong {
  color: var(--primary-dark);
  font-weight: 600;
}

figure.wp-block-table {
  margin: 30px 0;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-white);
  box-shadow: 0 4px 20px var(--shadow-soft);
}

table thead tr th {
  background: linear-gradient(
    135deg,
    var(--primary-dark) 0%,
    var(--primary-blue) 100%
  );
}

table thead th {
  color: var(--bg-cream);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 14px 16px;
}

table tbody tr {
  transition: background 0.2s ease;
}

table tbody tr:nth-child(odd) {
  background: var(--bg-light);
}

table tbody tr:nth-child(even) {
  background: var(--bg-white);
}

table tbody tr:hover {
  background: rgba(201, 162, 39, 0.08);
}

table tbody td {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--text-secondary);
}

table tbody td strong {
  color: var(--primary-dark);
  font-weight: 600;
}

.title-info {
  background: linear-gradient(
    135deg,
    var(--primary-dark) 0%,
    var(--primary-blue) 100%
  );
  padding: 18px 24px;
  margin: 40px 0 0;
  align-items: center;
  gap: 20px;
  position: relative;
  overflow: hidden;
}

.title-info::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 70px;
  height: 45px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 50'%3E%3Cpath d='M10 30h55v7c0 2-2 4-4 4H14c-2 0-4-2-4-4v-7z' fill='%23b87333'/%3E%3Cpath d='M14 16l6-9c2-2.5 4-4 7-4h21c3 0 5 1.5 7 4l6 9H14z' fill='%23d4956a'/%3E%3Cpath d='M10 18h55c3.5 0 6 2.5 6 6v6H4v-6c0-3.5 2.5-6 6-6z' fill='%23b87333'/%3E%3Ccircle cx='22' cy='38' r='7' fill='%231a1f2e'/%3E%3Ccircle cx='22' cy='38' r='3.5' fill='%23718096'/%3E%3Ccircle cx='53' cy='38' r='7' fill='%231a1f2e'/%3E%3Ccircle cx='53' cy='38' r='3.5' fill='%23718096'/%3E%3Crect x='22' y='9' width='14' height='9' rx='1' fill='%2387CEEB' fill-opacity='0.5'/%3E%3Crect x='39' y='9' width='14' height='9' rx='1' fill='%2387CEEB' fill-opacity='0.5'/%3E%3Cpath d='M66 24h8c1.5 0 2.5 1 2.5 2v4c0 1-1 1.5-2 1.5h-8.5v-7.5z' fill='%23d4956a'/%3E%3Ccircle cx='74' cy='28' r='2' fill='%23ff4444'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.85;
  z-index: 1;
}

.title-info::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%) scaleX(-1);
  width: 80px;
  height: 50px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 45'%3E%3Cpath d='M12 28h46v6c0 2-1.5 3-3.5 3h-39c-2 0-3.5-1-3.5-3v-6z' fill='%23c9a227'/%3E%3Cpath d='M15 15l5-8c1.5-2 3.5-3 6-3h18c2.5 0 4.5 1 6 3l5 8H15z' fill='%23e8d171'/%3E%3Cpath d='M12 17h46c3 0 5 2 5 5v6H7v-6c0-3 2-5 5-5z' fill='%23c9a227'/%3E%3Ccircle cx='20' cy='34' r='6' fill='%231a1f2e'/%3E%3Ccircle cx='20' cy='34' r='3' fill='%23718096'/%3E%3Ccircle cx='50' cy='34' r='6' fill='%231a1f2e'/%3E%3Ccircle cx='50' cy='34' r='3' fill='%23718096'/%3E%3Crect x='22' y='10' width='12' height='8' rx='1' fill='%2387CEEB' fill-opacity='0.6'/%3E%3Crect x='36' y='10' width='12' height='8' rx='1' fill='%2387CEEB' fill-opacity='0.6'/%3E%3Cpath d='M58 22h6c1 0 2 0.5 2 1.5v3c0 0.5-0.5 1-1 1h-7v-5.5z' fill='%23e8d171'/%3E%3Ccircle cx='64' cy='25' r='1.5' fill='%23ff6b6b'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.7;
  z-index: 1;
}

.title-info2 {
  background: var(--bg-white);
  padding: 18px 24px;
  margin: 40px 0 0;
  align-items: center;
  gap: 20px;
  box-shadow: 0 4px 16px var(--shadow-soft);
  position: relative;
}

.title-info2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--accent-gold) 0%,
    var(--accent-copper) 100%
  );
}

.title-info h3.wp-block-heading {
  position: relative;
  z-index: 2;
  color: var(--bg-cream);
  margin: 0 0 4px;
}

.title-info2 h3.wp-block-heading {
  color: var(--primary-dark);
  margin: 0 0 4px;
}

.title-info p,
.title-info2 p {
  margin: 0;
}

.title-info .wp-block-column:first-child p {
  position: relative;
  z-index: 2;
  color: rgba(248, 246, 241, 0.75);
  font-size: 14px;
}

.title-info2 .wp-block-column:first-child p {
  color: var(--text-secondary);
  font-size: 14px;
}

.title-info .wp-block-column:first-child strong {
  color: #eab200;
}

.title-info2 .wp-block-column:first-child strong {
  color: var(--accent-copper);
}

.title-info .wp-block-column:last-child,
.title-info2 .wp-block-column:last-child {
  text-align: right;
}

.title-info .wp-block-column:last-child p:first-child {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent-gold);
  line-height: 1;
}

.title-info2 .wp-block-column:last-child p:first-child {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary-blue);
  line-height: 1;
}

.title-info .wp-block-column:last-child p:last-child {
  font-size: 13px;
  color: rgba(248, 246, 241, 0.6);
}

.title-info2 .wp-block-column:last-child p:last-child {
  font-size: 13px;
  color: var(--text-light);
}

.desc-info {
  background: var(--bg-white);
  padding: 20px 24px;
  margin: 0 0 20px;
  box-shadow: 0 4px 16px var(--shadow-soft);
  gap: 30px;
}

.desc-info2 {
  background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-cream) 100%);
  padding: 20px 24px;
  margin: 0 0 20px;
  gap: 30px;
  border-bottom: 2px solid var(--border-subtle);
}

.desc-info ul,
.desc-info2 ul {
  list-style: none;
  margin: 0;
}

.desc-info li,
.desc-info2 li {
  padding: 6px 0;
  font-size: 14px;
  color: var(--text-secondary);
  display: flex;
  gap: 6px;
}

.desc-info li strong {
  color: var(--text-primary);
  font-weight: 600;
  min-width: 90px;
}

.desc-info2 li strong {
  color: var(--accent-copper);
  font-weight: 600;
  min-width: 90px;
}

blockquote.wp-block-quote {
  background: var(--bg-white);
  padding: 24px 28px;
  margin: 25px 0;
  position: relative;
  box-shadow: 0 2px 12px var(--shadow-soft);
}

blockquote.wp-block-quote::before {
  content: '"';
  position: absolute;
  top: 10px;
  left: 18px;
  font-family: "Playfair Display", serif;
  font-size: 60px;
  color: var(--accent-gold);
  opacity: 0.3;
  line-height: 1;
}

blockquote.wp-block-quote p {
  font-style: italic;
  color: var(--text-secondary);
  font-size: 15px;
  margin: 0;
  padding-left: 30px;
}

blockquote.wp-block-quote p em {
  color: var(--text-primary);
}

.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
}

.wp-block-column {
  flex: 1;
  min-width: 250px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 4px 20px var(--shadow-medium);
}

figure {
  margin: 25px 0;
}

figcaption {
  font-size: 13px;
  color: var(--text-light);
  text-align: center;
  margin-top: 10px;
  font-style: italic;
}

#rank-math-faq {
  background: var(--bg-white);
  padding: 30px;
  margin: 30px 0;
  box-shadow: 0 4px 20px var(--shadow-soft);
}

.rank-math-list-item {
  padding: 18px 0;
}

.rank-math-list-item:not(:last-child) {
  border-bottom: 1px solid var(--border-subtle);
}

.rank-math-question {
  font-family: "Playfair Display", serif;
  font-size: 17px;
  color: var(--primary-dark);
  margin-bottom: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
}

.rank-math-question::before {
  content: "◆";
  color: var(--accent-gold);
  font-size: 10px;
}

.rank-math-answer p {
  margin: 0;
  font-size: 15px;
  padding-left: 22px;
}

.esh-el-footer {
  background: linear-gradient(
    135deg,
    var(--primary-dark) 0%,
    var(--primary-blue) 100%
  );
  padding: 25px 0;
  margin-top: 40px;
}

.esh-el-footer .copyright {
  color: rgba(248, 246, 241, 0.6);
  font-size: 13px;
  text-align: center;
}

a {
  color: var(--primary-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--accent-gold);
}

strong {
  font-weight: 600;
}

em {
  font-style: italic;
}

@media (max-width: 768px) {
  .esh-el-container {
    padding: 0 10px;
  }
  .esh-el-header-main {
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
  }

  .esh-el-header-logo {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
  }

  .esh-el-header-logo::after {
    content: "☰";
    color: var(--bg-cream);
    font-size: 24px;
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s ease;
  }

  .esh-el-header-logo.menu-open::after {
    content: "✕";
  }

  .esh-el-header-logo:hover::after {
    color: var(--accent-gold);
  }

  .esh-el-site-branding {
    width: calc(100% - 50px);
  }

  .esh-el-header-menu {
    position: absolute;
    top: 100%;
    left: -20px;
    right: -20px;
    background: linear-gradient(
      135deg,
      var(--primary-dark) 0%,
      var(--primary-blue) 100%
    );
    max-height: 0;
    overflow: hidden;
    transition:
      max-height 0.35s ease,
      padding 0.35s ease;
    padding: 0 20px;
    box-shadow: 0 8px 20px var(--shadow-medium);
  }

  .esh-el-header-menu.active {
    max-height: 400px;
    padding: 15px 20px 20px;
  }

  .esh-el-header-menu .esh-el-menu ul {
    flex-direction: column;
    gap: 0;
  }

  .esh-el-header-menu .esh-el-menu ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .esh-el-header-menu .esh-el-menu ul li:last-child {
    border-bottom: none;
  }

  .esh-el-header-menu a {
    display: block;
    padding: 14px 0;
    background: transparent;
    font-size: 15px;
  }

  .esh-el-header-menu a:hover,
  .esh-el-header-menu .current_page_item a {
    background: transparent;
  }

  h1.wp-block-heading {
    font-size: 28px;
  }

  h2.wp-block-heading {
    font-size: 22px;
  }

  .mtr-table tr:nth-child(2n + 1) td, .mtr-table tr:nth-child(2n + 1) td strong {
    color: #fff;
  }

  .title-info,
  .title-info2 {
    padding: 16px 18px;
  }

  .title-info .wp-block-column:last-child,
  .title-info2 .wp-block-column:last-child {
    text-align: left;
    margin-top: 10px;
  }

  .desc-info,
  .desc-info2 {
    padding: 16px 18px;
  }

  table thead th,
  table tbody td {
    padding: 10px 12px;
    font-size: 12px;
  }

  blockquote.wp-block-quote {
    padding: 20px;
  }

  blockquote.wp-block-quote::before {
    font-size: 40px;
    left: 12px;
  }
}