/* 酉鬼啤酒主題樣式 - Main CSS */

/* 主要顏色變數 */
:root {
  --primary-color: #d9b300;
  --secondary-color: #000000;
  --text-color: #333333;
  --background-color: #ffffff;
}

/* 主要顏色樣式 */
.ProductList-categoryMenu ul li:hover>a.primary-color-hover,
.ProductList-categoryMenu .List-item a.primary-color-hover:hover,
.ProductList-categoryMenu .second-layer-content:hover>a.Label,
.ProductReview-container a.primary-color-hover:hover,
.ProductReview-container .List-item a.primary-color-hover:hover,
.variation-label:hover,
.variation-label.variation-label--selected,
.product-item .price:not(.price-crossed),
.product-item .price-sale,
.product-info .price-regular:not(.price-crossed),
.product-info .price-sale,
.addon-promotions-container .addon-promotion-item .price-sale,
.quick-cart-body .product-link>a,
.quick-cart-mobile-header .product-link>a,
.ProductDetail-product-info .price-box>.price:not(.price-crossed),
.modal.QuickCart-modal .out-of-stock *,
.addon-product-info .out-of-stock,
.Label-price.is-sale,
.PromotionPage-container .info-box .btn-add-to-promotion-cart .fa,
.PromotionInfo .show-term-button:hover,
.MemberCenter .PromotionInfo .show-term-button:hover,
.amazon-wishlist-block .buy-at-amazon-button:hover,
.amazon-wishlist-block .buy-at-amazon-button.is-active,
.amazon-wishlist-block .buy-at-amazon-button a:hover,
.amazon-wishlist-block .buy-at-amazon-button a.is-active,
.member-center-coupon-nav .active,
.ProductList-select category-filter-button .advance-filter-button:active,
.category-advance-filter .filter-data .filter-item label:hover,
.category-advance-filter .filter-item-title .expend-toggle:hover,
.facebook-banner .fa-times,
.facebook-banner .wording,
sl-list-page-wishlist-button .plp-wishlist-button .fa-heart,
.text-primary-color,
.text-primary-color a,
.text-primary-color a:hover,
.variation-open-button {
  color: #d9b300
}

.ProductList-select category-filter-button .advance-filter-button:active svg {
  fill: #d9b300
}

/* 背景顏色樣式 */
.sl-goto-top,
.navigation-menu .scroll-left:not(.scroll-disable):hover,
.navigation-menu .scroll-right:not(.scroll-disable):hover,
.NavigationBar-nestedList .sub-prev:not(.sub-disable):hover span,
.NavigationBar-nestedList .sub-next:not(.sub-disable):hover span,
.cart-chkt-btn,
.member-price-tag,
.product-customized-labels,
.sl-goto-top:hover,
.coupon-card-image,
.category-advance-filter .filter-item-title .expend-toggle:hover .advance-filter-icon.close-icon:before,
.category-advance-filter .filter-item-title .expend-toggle:hover .advance-filter-icon.open-icon::before,
.category-advance-filter .filter-item-title .expend-toggle:hover .advance-filter-icon.open-icon::after,
.product-detail-button-container.has-buy-now-button.has-spb-button.ui-scrollfix-sticky-mode button.ui-scrollfix-sticky-bottom:first-of-type {
  background: #d9b300
}

.CartPanel-toggleButton .Cart-count.primary-color,
.ProductDetail-product-info .btn-custom:not(.btn-buy-now),
.member-price-tag,
.product-customized-labels,
.Back-in-stock-addItem-block .btn:not(.is-active),
.member-profile-save,
.product-review-block .btn-primary,
.btn-color-primary,
.member-profile-save:hover,
.product-review-block .btn-primary:hover,
.btn-color-primary:hover,
.pagination>li.active,
.pagination>li.active a,
.btn-cart-fixed,
.basic-popover-desktop .body .action-button,
.basic-popover-mobile,
.basic-popover-mobile .member-referral-link,
#get-welcome-member-referral-credits .body .continue,
.category-advance-filter .apply-button,
.member-center-profile__submit-button,
.member-center-profile__retry-button,
.member-center-profile__member-referral-modal-button,
.member-center-profile__email-verification-modal-button,
.member-center-profile__submit-button:hover,
.member-center-profile__retry-button:hover,
.member-center-profile__member-referral-modal-button:hover,
.member-center-profile__email-verification-modal-button:hover {
  background-color: #d9b300
}

/* 邊框顏色樣式 */
.variation-label:hover,
.variation-label.variation-label--selected,
.cart-chkt-btn,
.member-profile-save,
.product-review-block .btn-primary,
.btn-color-primary,
.member-profile-save:hover,
.product-review-block .btn-primary:hover,
.btn-color-primary:hover,
.sl-goto-top:hover,
.btn-cart-fixed,
.product-available-info,
.basic-popover-desktop .body .action-button,
#get-welcome-member-referral-credits .body .continue,
.category-advance-filter .filter-data .filter-price-range input:focus,
.category-advance-filter .filter-data .filter-price-range input:hover,
.member-center-profile__submit-button,
.member-center-profile__retry-button,
.member-center-profile__member-referral-modal-button,
.member-center-profile__email-verification-modal-button,
.member-center-profile__submit-button:hover,
.member-center-profile__retry-button:hover,
.member-center-profile__member-referral-modal-button:hover,
.member-center-profile__email-verification-modal-button:hover {
  border-color: #d9b300
}

.checkout-coupon-list-card:hover>.checkout-coupon-list-card-body {
  border-color: #d9b300
}

.sl-goto-top:hover:before {
  border-top-color: #d9b300
}

.primary-border-color-after>:after,
.primary-border-color-after:not(.Grid-item-title):after,
.primary-border-color-after:not(.Grid-item-title) :after,
.primary-color-border-bottom,
.Grid-item-content p:last-child:after,
.Grid-item-content div:last-child:after,
.section-title:after,
.Tabset .Tab-label.active span:after {
  border-bottom-color: #d9b300
}

.sl-goto-top:hover:before,
.sl-goto-top:hover:after,
.promotion-wrap {
  border-left-color: #d9b300
}

.ProductList-categoryMenu .second-layer-content:hover>.icon-container .icon-angle-right {
  fill: #d9b300
}

.NavigationBar-mainMenu .List-item:hover>.Label.primary-color-hover {
  color: #d9b300 !important
}

.NavigationBar-mainMenu i.primary-color-hover:hover {
  color: #d9b300 !important
}

.post-categories-pannel__block-title::after {
  background-color: #d9b300
}

.post-categories-pannel__block-list a:hover {
  color: #d9b300
}

/* 響應式設計 */
@media (min-width: 768px) {
  .PostList .List-item.primary-color-hover a:hover .List-item-title {
    color: #d9b300
  }
}

@media (max-width: 767px) {
  .PostList .List-item.primary-color-hover a:active .List-item-title {
    color: #d9b300
  }
}

.ProductReview-container .List-item a.disabled {
  color: #d9b300 !important
}

.cart-chkt-btn:hover:not(.insufficient-point) {
  background: #d9b300 !important
}

.cart-chkt-btn:hover:not(.insufficient-point) .ladda-spinner div div div {
  background: #d9b300 !important
}

.customer-review-bar-color {
  background-color: rgba(0, 211, 149, 0.3) !important
}

/* Facebook 相關樣式 */
.facebook-quick-signup-success-page .title {
  color: #d9b300
}

.facebook-quick-signup-success-page .btn-facebook-redirect {
  background-color: #d9b300
}

.facebook-quick-signup-success-page .btn-facebook-redirect:hover {
  background-color: #d9b300;
  color: #fff;
  opacity: 0.8
}

.facebook-quick-signup-failure-page .title {
  color: #d9b300
}

.facebook-quick-signup-failure-page .btn-facebook-redirect {
  background-color: #d9b300
}

.facebook-quick-signup-failure-page .btn-facebook-redirect:hover {
  background-color: #d9b300;
  color: #fff;
  opacity: 0.8
}

/* 聯絡我們模態框 */
.contact-us-modal #btn-form-submit-modal {
  background-color: #d9b300 !important
}

.contact-us-modal #btn-form-submit-modal:hover {
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2)
}

/* 多結帳確認 */
.multi-checkout-confirm .multi-checkout-confirm__delivery_notice {
  color: #d9b300
}

.multi-checkout-confirm .multi-checkout-confirm__delivery_notice:before,
.multi-checkout-confirm .multi-checkout-confirm__delivery_notice:after {
  background-color: #d9b300
}

#checkout-object__section .checkout-object__info_cart-header {
  color: #d9b300
}

#checkout-object__section .checkout-object__info_cart-header .icon-basket {
  fill: #d9b300
}

/* 登入註冊頁面 */
#signup-login-page .solid-btn:not([disabled]) {
  color: #fff;
  background-color: #d9b300;
  border-color: #d9b300
}

#signup-login-page .solid-btn:not([disabled]):hover {
  color: #fff;
  background-color: #d9b300;
  border-color: #d9b300;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2)
}

#signup-login-page .solid-btn[data-loading] {
  background-color: #d9b300;
  border-color: #d9b300
}

#signup-login-page .outline-btn:not([disabled]) {
  color: #d9b300;
  border-color: #d9b300
}

#signup-login-page .outline-btn:not([disabled]):hover {
  color: #fff;
  background-color: #d9b300;
  border-color: #d9b300;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2)
}

#signup-login-page .outline-btn[data-loading] {
  color: #d9b300;
  border-color: #d9b300
}

.member-center-profile__submit-button:hover,
.member-center-profile__retry-button:hover,
.member-center-profile__member-referral-modal-button:hover,
.member-center-profile__email-verification-modal-button:hover {
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2)
}

/* 導航欄和頁腳樣式 */
.NavigationBar,
#Footer,
#Footer .footer-background {
  background: #000000
}

.Variation-border.selected {
  border: solid 1px #000000 !important
}

@media not all and (pointer: coarse) {
  .Variation-border:hover {
    border: solid 1px #000000 !important
  }
}

/* 首頁特定樣式 */
.hero-section {
  background: linear-gradient(135deg, #000000 0%, #333333 100%);
  color: #ffffff;
  padding: 80px 0;
  text-align: center;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #d9b300;
}

.hero-subtitle {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #ffffff;
}

.hero-description {
  font-size: 1.2rem;
  margin-bottom: 30px;
  line-height: 1.6;
}

.hero-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  padding: 12px 30px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  display: inline-block;
}

.btn-primary {
  background-color: #d9b300;
  color: #000000;
}

.btn-primary:hover {
  background-color: #b89400;
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.btn-secondary:hover {
  background-color: #ffffff;
  color: #000000;
}

.btn-outline {
  background-color: transparent;
  color: #d9b300;
  border: 2px solid #d9b300;
}

.btn-outline:hover {
  background-color: #d9b300;
  color: #000000;
}

.section-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 40px;
  color: #333333;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background-color: #d9b300;
}

.about-section {
  padding: 80px 0;
  background-color: #f8f8f8;
}

.about-text {
  font-size: 1.1rem;
  line-height: 1.8;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.products-section {
  padding: 80px 0;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.product-card {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-image {
  height: 200px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.product-info {
  padding: 20px;
  text-align: center;
}

.product-title {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333333;
}

.product-description {
  color: #666666;
  margin-bottom: 20px;
}

.features-section {
  padding: 80px 0;
  background-color: #f8f8f8;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.feature-item {
  text-align: center;
  padding: 30px 20px;
}

.feature-icon {
  font-size: 3rem;
  margin-bottom: 20px;
}

.feature-title {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333333;
}

.feature-description {
  color: #666666;
  line-height: 1.6;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }

  .hero-subtitle {
    font-size: 1.5rem;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .section-title {
    font-size: 2rem;
  }

  .products-grid {
    grid-template-columns: 1fr;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }
}

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn.shoplineapp.com/fonts/pt-sans/pt-sans-cyrillic-ext-normal-400.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
}

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn.shoplineapp.com/fonts/pt-sans/pt-sans-cyrillic-normal-400.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn.shoplineapp.com/fonts/pt-sans/pt-sans-latin-ext-normal-400.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn.shoplineapp.com/fonts/pt-sans/pt-sans-latin-normal-400.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://cdn.shoplineapp.com/fonts/pt-sans/pt-sans-cyrillic-ext-normal-700.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
}

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://cdn.shoplineapp.com/fonts/pt-sans/pt-sans-cyrillic-normal-700.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://cdn.shoplineapp.com/fonts/pt-sans/pt-sans-latin-ext-normal-700.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://cdn.shoplineapp.com/fonts/pt-sans/pt-sans-latin-normal-700.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}