:root {
  --primary-color: #f9a8a8;
  --secondary-color: #d07474;
  --text-color: #1e1e1e;
  --white-color: #fff;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 40px;
  --spacing-section: 86px;

  --grid-row-gap: 32px;
  --grid-column-gap: 24px;

  --text-xxs: 12px;
  --text-xs: clamp(
    14px,
    0.31vw + 13.39px,
    16px
  ); /* 14-16px fluid (375-1340px) */
  --text-md: clamp(
    16px,
    0.41vw + 14.5px,
    20px
  ); /* 16-20px fluid (375-1340px) */
  --text-lg: clamp(
    18px,
    0.62vw + 15.67px,
    24px
  ); /* 18-24px fluid (375-1340px) */
  --text-xl: clamp(
    20px,
    0.83vw + 16.89px,
    28px
  ); /* 20-28px fluid (375-1340px) */

  --heading-xxs: clamp(18px, 0.62vw + 16.69px, 24px); /* 18-24px (375-1340px) */
  --heading-xs: clamp(20px, 0.83vw + 16.89px, 28px); /* 20-28px (375-1340px) */
  --heading-sm: clamp(24px, 0.83vw + 20.89px, 32px); /* 24-32px (375-1340px) */
  --heading-md: clamp(28px, 0.83vw + 24.89px, 36px); /* 28-36px (375-1340px) */
  --heading-lg: clamp(32px, 0.83vw + 28.89px, 40px); /* 32-40px (375-1340px) */
  --heading-xl: clamp(32px, 1.24vw + 27.35px, 44px); /* 32-44px (375-1340px) */
  --heading-xxl: clamp(32px, 1.66vw + 25.78px, 48px); /* 32-48px (375-1340px) */

  /* Button Variables */
  --btn-primary-bg: #f9a8a8;
  --btn-primary-border: #ffbcbc;
  --btn-primary-shadow: #d07474;
  --btn-primary-text: #fff;

  /* Button Sizes - Large */
  --btn-lg-height: 54px;
  --btn-lg-padding: 12px 24px;
  --btn-lg-border: 4px;
  --btn-lg-font-size: var(--text-lg);
  --btn-lg-shadow-y: 4px;
  --btn-lg-text-shadow-y: 3px;

  /* Button Sizes - Small */
  --btn-sm-height: 42px;
  --btn-sm-padding: 12px 24px;
  --btn-sm-border: 3px;
  --btn-sm-font-size: var(--text-xs);
  --btn-sm-shadow-y: 4px;
  --btn-sm-text-shadow-y: 3px;

  /* Text Button Variables */
  --btn-text-color: #1e0700;
  --btn-text-hover-color: #1e0700;
  --btn-text-lg-padding: 12px 24px;
  --btn-text-sm-padding: 12px 24px;
  --btn-text-lg-font-size: var(--text-lg);
  --btn-text-sm-font-size: var(--text-xs);
}

@media (max-width: 768px) {
  :root {
    --spacing-section: 40px;
    --spacing-md: 8px;
    --spacing-xl: 24px;
    --spacing-xxl: 32px;

    --grid-row-gap: 20px;
    --grid-column-gap: 12px;
  }
}

.page-content {
  margin-bottom: 0;
}

/* Base Button Styles */
body .elementor-element.primary-btn a.elementor-button,
a.primary-btn,
button.alt:not(.button-2),
button.button-2,
a.button,
button[type="submit"] {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  border: var(--btn-lg-border) solid var(--btn-primary-border) !important;
  box-shadow: 0px var(--btn-lg-shadow-y) 0px 0px var(--btn-primary-shadow) !important;
  font-weight: 700 !important;
  line-height: normal;
  text-decoration: none;
  transition: all 0.2s ease;
}

body .elementor-element.primary-btn a.elementor-button,
a.primary-btn,
button.alt:not(.button-2),
button[type="submit"] {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  text-shadow: 0px var(--btn-lg-text-shadow-y) 0px var(--btn-primary-shadow);
}

/* Large Button (默认) */
body .elementor-element.primary-btn a.elementor-button,
a.primary-btn {
  height: var(--btn-lg-height);
  padding: var(--btn-lg-padding);
  font-size: var(--btn-lg-font-size);
}

/* theme button */
button.alt:not(.button-2),
button.button-2,
a.button {
  height: var(--btn-lg-height) !important;
  padding: var(--btn-lg-padding);
  font-size: var(--btn-lg-font-size) !important;
}

a.primary-btn.small.button-light {
  background: #fff;
  color: var(--primary-color);
  text-shadow: none;
}

button.button-2 {
  background: #fff;
  color: var(--secondary-color);
  text-shadow: none;
}

button[type="submit"] {
  height: 44px;
  padding: 12px 24px;
  font-size: 16px;
}

/* Small Button */
body .elementor-element.primary-btn.small a.elementor-button,
a.primary-btn.small {
  height: var(--btn-sm-height);
  padding: var(--btn-sm-padding);
  font-size: var(--btn-sm-font-size);
  border-width: var(--btn-sm-border);
  box-shadow: 0px var(--btn-sm-shadow-y) 0px 0px var(--btn-primary-shadow);
  text-shadow: 0px var(--btn-sm-text-shadow-y) 0px var(--btn-primary-shadow);
}

/* Hover Effects */
body .elementor-element.primary-btn a.elementor-button:hover,
a.primary-btn:hover,
button.alt:not(.button-2):hover,
a.button:hover {
  transform: translateY(2px);
  box-shadow: 0px calc(var(--btn-lg-shadow-y) - 2px) 0px 0px
    var(--btn-primary-shadow) !important;
  color: var(--btn-primary-text);
}

button:hover {
  transform: translateY(2px) !important;
  box-shadow: 0px calc(var(--btn-lg-shadow-y) - 2px) 0px 0px
    var(--btn-primary-shadow) !important;
}

body .elementor-element.primary-btn.small a.elementor-button:hover,
a.primary-btn.small:hover {
  box-shadow: 0px calc(var(--btn-sm-shadow-y) - 2px) 0px 0px
    var(--btn-primary-shadow);
}

/* Active/Pressed State */
body .elementor-element.primary-btn a.elementor-button:active,
a.primary-btn:active button:active,
a.button:active {
  transform: translateY(4px);
  box-shadow: none !important;
}

/* Text Button Styles */
.text-btn a,
a.text-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--btn-text-color);
  font-family: Satoshi;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* Large Text Button (默认) */
.text-btn a,
a.text-btn {
  padding: var(--btn-text-lg-padding);
  font-size: var(--btn-text-lg-font-size);
}

/* Small Text Button */
.text-btn.small a,
a.text-btn.small {
  padding: var(--btn-text-sm-padding);
  font-size: var(--btn-text-sm-font-size);
}

/* Hover Effects */
.text-btn a:hover,
a.text-btn:hover {
  color: var(--btn-text-hover-color);
}

/* Active/Pressed State */
.text-btn a:active,
a.text-btn:active {
  opacity: 0.8;
}

/* quantity */

div.quantity .decrease:before,
div.quantity .decrease:hover:before {
  color: var(--secondary-color);
}

div.quantity .increase:before,
div.quantity .increase:hover:before {
  color: #fff;
}

div.quantity .increase {
  background: var(--primary-color) !important;
}

div.quantity .decrease {
  background: #fff !important;
}

div.quantity button {
  border-radius: 50px;
}

.entry-product-quantity-wrapper div.quantity button {
  width: 56px;
  height: 56px;
  border: 4px solid var(--btn-primary-border);
  box-shadow: 0px 4px 0px 0px var(--btn-primary-shadow);
}

.product-quantity-wrap div.quantity button,
.product-quantity div.quantity button {
  width: 30px;
  height: 30px;
  border: 2px solid var(--btn-primary-border);
  box-shadow: 0px 2px 0px 0px var(--btn-primary-shadow);
}

.product-quantity-wrap div.quantity button,
.product-quantity div.quantity button:hover {
  transform: translateY(2px) !important;
  box-shadow: 0px 1px 0px 0px var(--btn-primary-shadow) !important;
}

.page-title-bar .heading span {
  font-size: var(--heading-xxl);
}

.minimog-grid {
  gap: var(--grid-row-gap) var(--grid-column-gap);
}

button.show-password-input {
  display: none;
}