/*
Theme Name: Vine Yard HTML Template
Author: Markhor Themes
Author URI: https://themeforest.net/user/htmlbeans
Version: 1
Description: Base theme for HTML5
Text Domain: base
Tags: one-column, two-columns, three-columns
Theme URI: http://www.htmlbeans.com/html/vineyard/
*/
/*------------------------------------------------------------------

1. import files / import files
2. Body / body
3. Btn Primary / .btn-primary
4. Header / .header
5. Heading / .heading
6. Heading2 / .heading2
7. Heading3 / .heading3
8. Heading4 / .heading4
9. Heading5 / .heading5
10. Heading6 / .heading6
11. Read More / .read-more
12. Pagination / .pagination
13. Wrapper / #wrapper
14. Header / #header
15. Cart Dropdown / .cart-dropdown
16. Cart Dropdown Active / .cart-dropdown-active
17. Cart Drop Active / .cart-drop-active
18. Nav Active / .nav-active
20. Search Active / .search-active
21. Setting Wrap / .setting-wrap
22. Widget Cart Wrap / .widget-cart-wrap
23. Logo / .logo
24. Nav / #nav
25. Search Holder / .search-holder
26. Main / #main
27. Main Holder / .main-holder
28. Banner / .banner
29. Breadcrumbs / .breadcrumbs
30. Filder List / .filter-list
31. Feature Sec / .feature-sec
32. Feature Col / .feature-col
33. Blog Sec / .blog-sec
34. Blog Col / .blog-col
35. Blog Detail / .blog-detail
36. Socail Network / .socail-network
37. About Sec / .about-sec
38. Tomatin Sec / .tomatin-sec
39. Small Product / .small-product
40. Event Sec / .event-sec
41. Shop Sec / .shop-sec
42. Shop Detail / .shop-detail
43. Content / #content
42. Comments Block / .comments-block
43. Comment Formarea / .comment-formarea
44. Sidebar / #sidebar
45. Widget / .widget
46. Portfolio Sec / .portfolio-sec
47. Portfolio Col / .portfolio-col
48. Portfolio Detail / .portfolio-detail
49. Compare Sec / .compare-sec
50. Contact Sec / .contact-sec
51. Team Sec / .team-sec
52. Team Col / .team-col
53. Error Sec / .error-sec
54. Popup Holder / .popup-holder
55. Popup1 / #popup1
56. Lightbox Demo / .lightbox-demo
57. Shopping Cart / .shopping-cart
58. Cart Table / .cart-table
59. Cart Widget / .cart-widget
60. Checout Sec / .checout-sec
61. Checkout Form / .checkout-form
62. Loader Holder / .loader-holder
63. Back Top / #back-top
64. Footer / #footer


-------------------------------------------------------------------*/
/*------------------------------------------------------------------
1. import files / import files
-------------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css?family=Cinzel:400,700,900|Josefin+Sans:300,300i,400,400i,600,700");

/* CSS Variables */
:root {
  --vt-ivory: #fbf7ef;
  --vt-champagne: #f3eadc;
  --vt-burgundy: #6f1023;
  --vt-burgundy-dark: #3d0711;
  --vt-gold: #c9963e;
  --vt-text: #1b1716;
  --vt-muted: #7a6f69;
  --vt-border: #eadfce;
}

h1,
h2,
h3 {
  font-family: Georgia, serif
}

#wrapper {
  position: relative;
  overflow: visible;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.clearfix:after,
#header:after,
#header .header-holder:after,
#header .nav-holder:after,
.setting-wrap:after {
  content: '';
  display: block;
  clear: both;
}

.blog-detail .footer .tags-list a,
.blog-detail .footer .social-network a,
.shop-detail .footer .size-list a,
.portfolio-col.v2 .wrap,
.portfolio-col.v3 .wrap,
.compare-sec .compare-table .size {
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.ellipsis {
  white-space: nowrap;
  /* 1 */
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  /* 2 */
  overflow: hidden;
}

/*------------------------------------------------------------------
2. Body / body
-------------------------------------------------------------------*/
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #fff;
  color: var(--vt-text);
  font-weight: 400;
}

a,
button {
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

a:hover,
a:focus,
a.active,
button:hover,
button:focus,
button.active {
  text-decoration: none;
  outline: none;
}

.overlay {
  position: relative;
  z-index: 1;
}

.overlay:before {
  position: absolute;
  content: "";
  z-index: -1;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0.8;
}

.bg-full {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-parallax {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.fontbase {
  font-family: "Philosopher", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.fontjosefin {
  font-family: "Josefin Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.fontpinyon {
  font-family: "Pinyon Script", cursive;
}

.fontcinzel {
  font-family: "Cinzel", serif;
}

.fwBold {
  font-weight: 700;
}

.fwNormal {
  font-weight: 400;
}

.fwLight {
  font-weight: 300;
}

.fwSemi {
  font-weight: 600;
}

.bg-light {
  background: #f4f6f9;
}

.bg-black {
  background: #000;
}

.bg-white {
  background: #fff;
}

.bg-grey {
  background: #252525;
}

/* .bg-gradient-red-white {
  background-image: linear-gradient(to bottom top, #8f0101, #ab012c77, #c00c15, #cd263463, #ffffff88);
} */

.txt-green {
  color: #82c14f;
}

.txt-orange {
  color: #ff6f6f;
}

.bdr {
  border: 1px solid #e5e5e5;
}

.bdr-bt {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.round {
  border-radius: 100%;
}

.md-round {
  border-radius: 3px;
}

.lg-round {
  border-radius: 45px;
}

.box-shadow {
  -webkit-box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.2);
}

.js-tab-hidden {
  display: block !important;
  left: -9999px !important;
  position: absolute !important;
  top: -9999px !important;
}

.p-label {
  font-size: 11px;
  line-height: 13px;
  color: #fff;
  padding: 6px 27px 6px 15px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.p-label:before {
  position: absolute;
  content: "";
  z-index: -1;
  left: auto;
  top: 0;
  bottom: auto;
  right: 0;
  width: 0;
  height: 0;
  z-index: 0;
  border-style: solid;
  border-width: 12px 12px 12px 0;
  border-color: transparent #fff transparent transparent;
}

.p-label.rightside {
  right: 0;
  background: #363636;
}

.p-label.rightside:before {
  left: 0;
  right: auto;
  border-width: 12px 0 12px 12px;
  border-color: transparent transparent transparent #fff;
}

/*------------------------------------------------------------------
3. Btn Primary / .btn-primary
-------------------------------------------------------------------*/
/* .btn-primary {
  font-size: 13px;
  line-height: 16px;
  color: #363636;
  display: inline-block;
  vertical-align: middle;
  padding: 11px 39px;
  border: 1px solid #363636;
  background: none;
  letter-spacing: 2.3px;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
} */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 5px;
  background: var(--vt-burgundy-dark, #3d0711);
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .03em;
  border: 1px solid var(--vt-burgundy)
}

.btn.secondary {
  background: #fff;
  color: var(--vt-burgundy);
  border-color: #fff
}

.btn.gold {
  background: var(--vt-gold);
  border-color: var(--vt-gold);
  color: #1b1008
}

.btn-row {
  display: flex;
  gap: 16px;
  margin-top: 26px;
  align-items: center;
  flex-direction: row
}

/* Mobile .btn-row rules consolidated into the Hero Section media query below,
   to avoid two conflicting @media (max-width: 650px) blocks overriding each other. */

/* .btn-primary:hover,
.btn-primary:focus,
.btn-primary.active {
  color: #fff;
}

.btn-primary.active {
  border-width: 1px;
  border-style: solid;
}

.btn-primary.active:hover {
  background: none;
} */

/*------------------------------------------------------------------
4. Header / .header
-------------------------------------------------------------------*/
.header {
  overflow: visible;
  font-size: 16px;
  line-height: 26px;
  color: #898989;
  padding-top: 3px;
}

.header .title {
  font-size: 53px;
  line-height: 40px;
  display: block;
  margin: 0 0 3px;
  letter-spacing: 4px;
}

.header .header-img {
  position: relative;
  max-width: 324px;
  margin: 0 auto;
}

.header .header-img:before,
.header .header-img:after {
  position: absolute;
  top: 50%;
  content: "";
  width: 101px;
  height: 1px;
  background: #dbdde0;
}

.header .header-img:before {
  left: 0;
}

.header .header-img:after {
  right: 0;
}

.header .header-img .img-responsive {
  max-width: 60px;
  margin: 0 auto;
}

/*------------------------------------------------------------------
5. Heading / .heading
-------------------------------------------------------------------*/
.heading {
  font-size: 36px;
  line-height: 40px;
  color: #363636;
  margin: 0 0 32px;
  letter-spacing: 7px;
}

.heading a {
  color: #363636;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

/*------------------------------------------------------------------
6. Heading2 / .heading2
-------------------------------------------------------------------*/
.heading2 {
  font-size: 18px;
  line-height: 36px;
  color: #363636;
  font-weight: 400;
  margin: 0 0 28px;
  letter-spacing: 1px;
  word-spacing: 4px;
}

.heading2 a {
  color: #363636;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

/*------------------------------------------------------------------
7. Heading3 / .heading3
-------------------------------------------------------------------*/
.heading3 {
  font-size: 14px;
  line-height: 18px;
  color: #898989;
  font-weight: 400;
  margin: 0 0 10px;
  letter-spacing: 3px;
}

.heading3 a {
  color: #898989;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

/*------------------------------------------------------------------
8. Heading4 / .heading4
-------------------------------------------------------------------*/
.heading4 {
  font-size: 22px;
  line-height: 25px;
  color: #a53e4c;
  margin: 0 0 13px;
  letter-spacing: 2px;
}

.heading4 a {
  color: #898989;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

/*------------------------------------------------------------------
9. Heading5 / .heading5
-------------------------------------------------------------------*/
.heading5 {
  font-size: 24px;
  line-height: 27px;
  color: #363636;
  font-weight: 400;
  margin: 0 0 54px;
  letter-spacing: 4px;
}

.heading5 a {
  color: #363636;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.heading5 .next {
  font-size: 30px;
  line-height: 35px;
}

/*------------------------------------------------------------------
10. Heading6 / .heading6
-------------------------------------------------------------------*/
.heading6 {
  font-size: 30px;
  line-height: 33px;
  color: #363636;
  font-weight: 400;
  margin: 0 0 54px;
  letter-spacing: 3px;
}

.heading6 a {
  color: #363636;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

/*------------------------------------------------------------------
11. Read More / .read-more
-------------------------------------------------------------------*/
.read-more {
  font-size: 13px;
  line-height: 15px;
  color: #898989;
  font-weight: 400;
  letter-spacing: 2px;
}

.read-more .fa {
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.read-more:hover .fa {
  margin: 0 0 0 5px;
}

.space {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 460px;
  z-index: -1;
}

/*------------------------------------------------------------------
12. Pagination / .pagination
-------------------------------------------------------------------*/
.pagination {
  overflow: hidden;
  margin: 0;
  padding: 10px 0 0;
}

.pagination li {
  display: inline-block;
  vertical-align: middle;
}

.pagination .active a {
  color: #fff;
}

.pagination a {
  width: 40px;
  height: 40px;
  color: #363636;
  padding: 8px 0 0;
  display: block;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.pagination a:hover {
  color: #fff;
}

/*------------------------------------------------------------------
13. Wrapper / #wrapper
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
14. Header / #header
-------------------------------------------------------------------*/
#header.v1 {
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  z-index: 5;
}

#header.v1 #nav ul>li>a {
  color: #000000;
}

#header.v1 #nav .dropdownmenu .dropdowncollist a {
  color: #898989;
}

#header.v1 #nav .dropdownmenu .dropdowncollist a:hover {
  background: none;
}

#header.v1 #nav .dropdown-menu a {
  color: #363636;
}

#header.wh-clr {
  margin: 0 0 25px;
}

#header.wh-clr .setting-wrap>li>a,
#header.wh-clr .widget-cart-wrap>li>a {
  color: #fff;
}

#header.wh-clr #nav>ul>li>a {
  color: #fff;
}

#header .header-holder {
  padding: 70px 10px 55px;
}

#header .v2 .setting-wrap {
  border-left: 1px solid #e5e5e5;
  margin: 0 0 0 39px;
}

#header .v2 .setting-wrap li {
  margin: 0 0 0 52px;
}

#header .v2 #nav {
  padding: 4px 0 0;
}

#header .v2 #nav ul li {
  margin: 0 0 0 70px;
}

#header .v2 #nav ul li:first-child {
  margin: 0;
}

#header .v2 .pagenav {
  float: right;
  width: calc(100% - 399px);
}

#header .v2 .pagenav #nav {
  float: left;
}

#header .nav-holder {
  border-top: #921111 dotted 1px;
  border-bottom: #921111 dotted 1px;
  padding: 30px 30px 20px 0px;
}

.nav-holder .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#header.sticky {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#header .sticky #nav {
  position: relative;
}

#header .sticky #nav:before {
  position: absolute;
  content: "";
  z-index: -1;
  left: -9999px;
  top: -100px;
  bottom: 0;
  right: -9999px;
  /* background: #000; */
}

#header .sticky .n-logo {
  width: 224px;
}

#header .cart-menu {
  font-size: 14px;
  line-height: 17px;
  width: 294px;
  overflow: hidden;
  padding: 19px 22px;
}

#header .cart-menu li {
  overflow: hidden;
  padding: 10px 0;
}

#header .cart-menu .img-holder {
  width: 28%;
  padding: 23px 8px 23px;
}

#header .cart-menu .align-left {
  width: 72%;
  position: relative;
  padding: 9px 0 0 19px;
}

#header .cart-menu .heading3 {
  margin: 0 0 19px;
}

#header .cart-menu .price {
  display: block;
  word-spacing: 4px;
  letter-spacing: 2px;
}

#header .cart-menu .close {
  line-height: 18px;
  color: #363636;
  position: absolute;
  right: 0;
  top: 12px;
}

#header .cart-menu .total-price {
  display: block;
  padding: 30px 0;
  margin: 10px 0 -2px;
  border-top-width: 1px;
  border-top-style: solid;
}

#header .cart-menu .total-price em {
  font-size: 18px;
  line-height: 14px;
  font-style: normal;
  letter-spacing: 4px;
}

#header .cart-menu .btn-primary {
  width: 100%;
  margin: 0 0 10px;
}

/*------------------------------------------------------------------
15. Cart Dropdown / .cart-dropdown
-------------------------------------------------------------------*/
.cart-dropdown {
  position: absolute;
  left: 5px;
  top: 46px;
  border-top-width: 1px;
  border-top-style: dashed;
  background: #fff;
  opacity: 0;
  visibility: hidden;
}

.cart-dropdown.right {
  left: auto;
  right: 0;
}

/*------------------------------------------------------------------
16. Cart Dropdown Active / .cart-dropdown-active
-------------------------------------------------------------------*/
.cart-dropdown-active .setting-wrap .cart-dropdown {
  opacity: 1;
  visibility: visible;
}

/*------------------------------------------------------------------
17. Cart Drop Active / .cart-drop-active
-------------------------------------------------------------------*/
.cart-drop-active .widget-cart-wrap .cart-dropdown {
  opacity: 1;
  visibility: visible;
}

/*------------------------------------------------------------------
18. Nav Active / .nav-active
-------------------------------------------------------------------*/
.nav-active #header .nav-holder {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

/*------------------------------------------------------------------
20. Search Active / .search-active
-------------------------------------------------------------------*/
.search-active .search-holder {
  display: block;
}

/*------------------------------------------------------------------
21. Setting Wrap / .setting-wrap
-------------------------------------------------------------------*/
.setting-wrap {
  line-height: 17px;
  color: #363636;
  margin: 0;
}

.setting-wrap>li {
  font-size: 24px;
  line-height: 27px;
  display: inline-block;
  vertical-align: top;
  position: relative;
  z-index: 1;
  margin: 0 20px 0 0;
}

.setting-wrap>li>a {
  color: #363636;
  display: block;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.setting-wrap .setting-drop {
  font-size: 14px;
  line-height: 17px;
  width: 170px;
  overflow: hidden;
  padding: 0 28px 21px;
  text-align: left;
}

.setting-wrap hr {
  margin: 0 -28px 25px;
}

.setting-wrap .account-list {
  color: #363636;
  overflow: hidden;
  margin: 0;
  padding: 25px 0 15px;
}

.setting-wrap .account-list li {
  display: block;
  margin: 0 0 13px;
}

.setting-wrap .account-list a {
  color: #363636;
  transtion: all 0.25s linear;
}

.setting-wrap .heading3 {
  color: #363636;
  margin: 0 0 13px;
}

.setting-wrap .currency-form {
  color: #363636;
  overflow: hidden;
  margin: 0 0 13px;
}

.setting-wrap .currency-form input[type="radio"] {
  position: fixed;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: -1;
}

.setting-wrap .currency-form label {
  display: block;
  margin: 0 0 13px;
}

.setting-wrap .currency-form label {
  padding-right: 5px;
}

.setting-wrap .currency-form .fake-input {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 1px solid #363636;
  vertical-align: middle;
  position: relative;
  margin: -2px 10px 0 0;
}

.setting-wrap .currency-form input[type=radio]+.fake-input {
  border-radius: 100%;
}

.setting-wrap .currency-form input[type="radio"]+.fake-input:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #363636;
  border-radius: 100%;
  opacity: 0;
}

.setting-wrap .currency-form input[type="radio"]:checked+.fake-input:before {
  opacity: 1;
}

.setting-wrap .currency-form input[type="radio"]:checked~.fake-label {
  font-weight: bold;
  color: #f00;
}

.setting-wrap .lang-list {
  overflow: hidden;
  margin: 0;
  padding: 5px 0 0;
}

.setting-wrap .lang-list li {
  display: inline-block;
  vertical-align: top;
  margin: 0 0 0 4px;
}

.setting-wrap .lang-list li:first-child {
  margin: 0;
}

.setting-wrap .lang-list a {
  display: block;
  transtion: all 0.25s linear;
}

/*------------------------------------------------------------------
22. Widget Cart Wrap / .widget-cart-wrap
-------------------------------------------------------------------*/
.widget-cart-wrap {
  color: #363636;
  margin: 0;
}

.widget-cart-wrap>li {
  font-size: 24px;
  line-height: 27px;
  display: inline-block;
  vertical-align: top;
  position: relative;
  z-index: 1;
  margin: 0 10px 0 34px;
}

.widget-cart-wrap>li>a {
  color: #363636;
  display: block;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.widget-cart-wrap .num {
  font-size: 12px;
  line-height: 14px;
  color: #fff;
  width: 16px;
  height: 16px;
  display: block;
  position: absolute;
  right: -10px;
  top: -10px;
  padding: 2px 0 0;
}


/*------------------------------------------------------------------
23. Logo / .logo
-------------------------------------------------------------------*/
.logo {
  width: 224px;
  margin: 0 auto;
}

/*------------------------------------------------------------------
24. Nav / #nav
-------------------------------------------------------------------*/
#nav {
  font-size: 18px;
  line-height: 18px;
  font-weight: 400;
  -webkit-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;

}

#nav>ul {
  margin: 0 auto;
}

#nav>ul>li {
  display: inline-block;
  vertical-align: top;
  margin: 0 0 0 50px;
}

#nav>ul>li:first-child {
  margin: 0;
}

#nav>ul>li.dropdown {
  position: relative;
}

#nav>ul>li.hover {
  z-index: 2;
}

#nav>ul>li.hover .dropdown-menu,
#nav>ul>li.hover .dropdownmenu {
  opacity: 1;
  visibility: visible;
}

#nav>ul>li.n-logo {
  width: 0;
}

#nav>ul>li>a {
  /* letter-spacing: 3px; */
  padding-bottom: 10px;
  color: #363636;
  display: block;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

#nav .dropdownmenu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  overflow: hidden;
  max-width: 1140px;
  z-index: 2;
  padding: 51px 27px 50px 66px;
  background-color: #fff;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

#nav .dropdownmenu .dropdowncol {
  width: 25%;
  float: left;
  padding: 0 40px 0 0;
}

#nav .dropdownmenu .heading3 {
  margin: 0 0 29px;
  padding: 0 0 13px;
  position: relative;
}

#nav .dropdownmenu .heading3:before {
  position: absolute;
  content: "";
  z-index: -1;
  left: 0;
  top: auto;
  bottom: 0;
  right: auto;
  width: 50px;
  height: 2px;
  border-bottom: 1px dashed #a53e4c;
  z-index: 0;
}

#nav .dropdownmenu .dropdowncollist {
  font-size: 14px;
  line-height: 16px;
  color: #898989;
  overflow: hidden;
  margin: 0;
}

#nav .dropdownmenu .dropdowncollist>li {
  display: block;
  margin: 0 0 32px;
}

#nav .dropdownmenu .dropdowncollist>li>a {
  color: #898989;
  letter-spacing: 0;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

#nav .dropdown-menu {
  font-size: 14px;
  line-height: 16px;
  position: absolute;
  left: 0;
  top: 100%;
  overflow: hidden;
  z-index: 2;
  color: #363636;
  overflow: hidden;
  margin: 0;
  padding: 23px 18px 13px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  border-radius: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

#nav .dropdown-menu>li {
  display: block;
  margin: 0 0 12px;
}

#nav .dropdown-menu>li:first-child {
  margin: 0 0 12px;
}

#nav .dropdown-menu>li>a {
  color: #363636;
  padding: 0;
  letter-spacing: 0;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

#nav .dropdown-menu>li>a:hover {
  background: none;
}

/*------------------------------------------------------------------
25. Search Holder / .search-holder
-------------------------------------------------------------------*/
.search-holder {
  width: 1169px;
  margin: 0 auto;
  display: none;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
  position: relative;
  z-index: 2;
}

.search-holder:before {
  position: absolute;
  content: "";
  z-index: -1;
  left: -9999px;
  top: -9999px;
  bottom: -9999px;
  right: -9999px;
  background: rgba(0, 0, 0, 0.7);
}

.search-holder .icon {
  font-size: 22px;
  line-height: 22px;
  color: #898989;
  position: absolute;
  top: 3px;
  right: 5px;
}

.search-holder .select-form {
  overflow: hidden;
  padding: 70px 199px;
  background: #fff;
}

.search-holder .select-form fieldset {
  position: relative;
}

.search-holder .select-form .jcf-select {
  width: 35.1%;
  height: 60px;
  float: left;
  border: none;
  margin: 0;
}

.search-holder .select-form .jcf-select .jcf-select-text {
  line-height: 18px;
  color: #fff;
  font-weight: 700;
  margin: 20px 35px 0 41px;
  letter-spacing: 3px;
}

.search-holder .select-form .jcf-select .jcf-select-opener {
  background: none;
}

.search-holder .select-form .jcf-select .jcf-select-opener:before {
  position: absolute;
  content: "";
  z-index: -1;
  left: auto;
  top: 21px;
  bottom: auto;
  right: 22px;
  content: "\f107";
  line-height: 16px;
  font-family: "FontAwesome";
  color: #fff;
  z-index: 0;
}

.search-holder .select-form .form-control {
  font-size: 14px;
  line-height: 18px;
  color: #b7b7b7;
  float: left;
  width: 64.9%;
  height: 60px;
  padding: 6px 46px 6px 26px;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
  background: none;
  border-left: none;
  letter-spacing: 2px;
}

.search-holder .select-form .form-control::-webkit-input-placeholder {
  color: #b7b7b7;
}

.search-holder .select-form .form-control::-moz-placeholder {
  opacity: 1;
  color: #b7b7b7;
}

.search-holder .select-form .form-control:-moz-placeholder {
  color: #b7b7b7;
}

.search-holder .select-form .form-control:-ms-input-placeholder {
  color: #b7b7b7;
}

.search-holder .select-form .form-control.placeholder {
  color: #b7b7b7;
}

.search-holder .select-form .sub-btn {
  font-size: 30px;
  line-height: 24px;
  color: #363636;
  position: absolute;
  right: 4px;
  top: 14px;
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
  background: none;
}

/*------------------------------------------------------------------
26. Main / #main
-------------------------------------------------------------------*/
#main {
  overflow: visible;
  flex: 1 0 auto;
}

/*------------------------------------------------------------------
27. Main Holder / .main-holder
-------------------------------------------------------------------*/
.main-slider {
  overflow: hidden;
  /* margin: 220px 0 0; */
}

.main-slider .slide {
  /* white-space: nowrap; */
  text-align: center;
}

.main-slider .slide:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  min-height: 950px;
}

.main-slider .slide>* {
  white-space: normal;
  display: inline-block;
  vertical-align: bottom;
  /* max-width: 99%; */
}

.main-slider .slide .b-logo {
  width: 315px;
  margin: 0 auto 65px;
  display: block;
  opacity: 0;
  -webkit-transform: translateY(-80px);
  -ms-transform: translateY(-80px);
  transform: translateY(-80px);
  -webkit-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

.main-slider .slide .btn-primary {
  opacity: 0;
  -webkit-transform: translateY(80px);
  -ms-transform: translateY(80px);
  transform: translateY(80px);
  -webkit-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

.main-slider .slick-active .b-logo,
.main-slider .slick-active .btn-primary {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.main-slider .slick-prev,
.main-slider .slick-next {
  width: 50px;
  height: 50px;
  text-indent: -9999px;
  position: absolute;
  top: 47.4%;
  z-index: 1;
  background: none;
  border: 1px dashed;
  border-color: rgba(225, 225, 225, 0.4);
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.main-slider .slick-prev:after,
.main-slider .slick-next:after {
  position: absolute;
  content: "";
  z-index: -1;
  left: 0;
  top: 0;
  bottom: auto;
  right: auto;
  text-indent: 0;
  font-size: 19px;
  line-height: 19px;
  color: #fff;
  letter-spacing: 4px;
  word-break: break-all;
  padding: 3px 0 0 5px;
  text-transform: uppercase;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.main-slider .slick-prev {
  left: 75px;
}

.main-slider .slick-prev:after {
  content: "prev";
}

.main-slider .slick-next {
  right: 75px;
}

.main-slider .slick-next:after {
  content: "next";
}

/*------------------------------------------------------------------
28. Banner / .banner
-------------------------------------------------------------------*/
.banner {
  margin: 0 75px 4px;
  z-index: 0;
  white-space: nowrap;
  text-align: center;
}

.banner:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  min-height: 476px;
}

.banner>* {
  white-space: normal;
  display: inline-block;
  vertical-align: middle;
  max-width: 99%;
}

.banner.overlay:before {
  background: rgba(0, 0, 0, 0.8);
}

.banner .heading {
  color: #fff;
  margin: 0 0 10px;
}

/*------------------------------------------------------------------
29. Breadcrumbs / .breadcrumbs
-------------------------------------------------------------------*/
.breadcrumbs {
  overflow: hidden;
  margin: 0;
  color: #fff;
  letter-spacing: 6px;
}

.breadcrumbs li {
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px 0 0;
}

.breadcrumbs a {
  display: block;
  color: #fff;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

/*------------------------------------------------------------------
30. Filder List / .filter-list
-------------------------------------------------------------------*/
.filter-list {
  overflow: hidden;
  margin: 0 0 54px;
  color: #363636;
  letter-spacing: 3px;
}

.filter-list li {
  display: inline-block;
  vertical-align: top;
  margin: 0 0 0 33px;
}

.filter-list li:first-child {
  margin: 0;
}

.filter-list a {
  color: #363636;
  display: block;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

/*------------------------------------------------------------------
31. Feature Sec / .feature-sec
-------------------------------------------------------------------*/
.feature-sec {
  padding-top: 96px;
  padding-bottom: 96px;
}

.feature-sec .header {
  margin: 0 0 54px;
}

.feature-sec .feature-col {
  margin: 0 0 65px;
}

.feature-sec .btn-primary {
  margin: 0 0 3px;
}

.feature-sec #feature-holder .grid-sizer {
  width: 25%;
}

/*------------------------------------------------------------------
32. Feature Col / .feature-col
-------------------------------------------------------------------*/
.feature-col {
  overflow: hidden;
  position: relative;
}

.feature-col:hover .txt-wrap {
  opacity: 0;
  visibility: hidden;
}

.feature-col:hover .img-holder:before {
  -webkit-animation: animate 1s linear forwards;
  animation: animate 1s linear forwards;
}

.feature-col:hover .img-holder:after {
  -webkit-animation: animate2 1s linear forwards;
  animation: animate2 1s linear forwards;
}

.feature-col:hover .social-network {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.feature-col.feature-col2:hover .txt-wrap {
  opacity: 1;
  visibility: visible;
}

.feature-col.feature-col2:hover .price {
  display: none;
}

.feature-col.feature-col2 .heading3 {
  margin: 0 0 15px;
}

.feature-col.feature-col2 .img-holder {
  width: 27.5%;
  padding: 16px 20px 18px;
  margin: 0 0 29px;
}

.feature-col.feature-col2 .txt-wrap {
  width: 72.5%;
  padding: 16px 0 0 25px;
}

.feature-col.feature-col2 .rating-list {
  padding: 0;
  margin: 0 0 27px;
}

.feature-col.feature-col2 .price {
  letter-spacing: 1px;
}

.feature-col.feature-col2 .social-network {
  left: 126px;
  bottom: 35px;
  padding: 0;
}

.feature-col.feature-col2 .social-network li {
  margin: 0 0 0 13px;
}

.feature-col .img-holder {
  width: 100%;
  padding: 40px 20px 32px;
  border: 1px solid #e5e5e5;
  margin: 0 0 26px;
  position: relative;
  z-index: 1;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.feature-col .img-holder:hover {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

}

.feature-col .img-holder:before,
.feature-col .img-holder:after {
  position: absolute;
  content: "";
  z-index: -1;
  left: -1px;
  top: -1px;
  bottom: auto;
  right: auto;
  width: 0;
  height: 0;
  background: transparent;
  border: 1px solid transparent;

}

.feature-col .img-holder img {
  display: inline-block;
  vertical-align: middle;
}

.feature-col .p-label {
  position: absolute;
  top: 23px;
  left: 0;
  padding: 7px 24px 4px 13px;
}

.feature-col .p-label.rightside {
  left: auto;
  padding: 7px 13px 4px 24px;
}

.feature-col .txt-wrap {
  overflow: hidden;
}

.feature-col .footer {
  overflow: hidden;
}

.feature-col .rating-list {
  font-size: 12px;
  line-height: 14px;
  color: #363636;
  font-weight: 400;
  overflow: hidden;
  margin: 0;
  padding: 4px 0 0;
}

.feature-col .rating-list li {
  float: left;
  margin: 0 2px 0 0;
}

.feature-col .rating-list a {
  color: #363636;
  display: block;
  /* -webkit-transition: all 0.25s linear; */
  /* -o-transition: all 0.25s linear; */
  /* transition: all 0.25s linear; */
}

.feature-col .price {
  font: 18px/22px 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 2px;
}

.feature-col .social-network {
  margin: 0;
  padding: 0px 0 0;
  left: 0;
  /* top: 40%; */
  bottom: 50%;
  opacity: 0;
  width: 100%;
  overflow: hidden;
  position: absolute;
  visibility: hidden;
  /* -webkit-transition: all 0.25s linear; */
  /* -o-transition: all 0.25s linear; */
  /* transition: all 0.25s linear; */
  /* -webkit-transform: translateY(100%); */
  /* -ms-transform: translateY(100%); */
  /* transform: translateY(100%); */
}

.feature-col .social-network li {
  float: left;
  margin: 0 0 0 23px;
}

.feature-col .social-network li:first-child {
  margin: 0;
}

.feature-col .social-network a {
  /* width: 50px; */
  /* height: 50px; */
  /* display: block; */
  color: #000;
  font-size: 20px;
  /* line-height: 50px; */
  /* border-radius: 50%; */
  border: 1px solid #e5e5e5;
  /* -webkit-transition: all 0.25s linear; */
  /* -o-transition: all 0.25s linear; */
  /* transition: all 0.25s linear; */
}

.feature-col .social-network a:hover {
  color: #fff;
  border: 1px solid;
  /* -webkit-transform: rotateZ(360deg); */
  /* -ms-transform: rotate(360deg); */
  /* transform: rotateZ(360deg); */
}

@-webkit-keyframes animate {
  0% {
    width: 0;
    height: 0;
    border-top-color: #a53e4c;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }

  50% {
    width: 100%;
    height: 0;
    border-top-color: #a53e4c;
    border-right-color: #a53e4c;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }

  100% {
    width: 100%;
    height: 100%;
    border-top-color: #a53e4c;
    border-right-color: #a53e4c;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
}

@keyframes animate {
  0% {
    width: 0;
    height: 0;
    border-top-color: #a53e4c;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }

  50% {
    width: 100%;
    height: 0;
    border-top-color: #a53e4c;
    border-right-color: #a53e4c;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }

  100% {
    width: 100%;
    height: 100%;
    border-top-color: #a53e4c;
    border-right-color: #a53e4c;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
}

@-webkit-keyframes animate2 {
  0% {
    width: 0;
    height: 0;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: #a53e4c;
  }

  50% {
    width: 0;
    height: 100%;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #a53e4c;
    border-left-color: #a53e4c;
  }

  100% {
    width: 100%;
    height: 100%;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #a53e4c;
    border-left-color: #a53e4c;
  }
}

@keyframes animate2 {
  0% {
    width: 0;
    height: 0;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: #a53e4c;
  }

  50% {
    width: 0;
    height: 100%;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #a53e4c;
    border-left-color: #a53e4c;
  }

  100% {
    width: 100%;
    height: 100%;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #a53e4c;
    border-left-color: #a53e4c;
  }
}

/*------------------------------------------------------------------
33. Blog Sec / .blog-sec
-------------------------------------------------------------------*/
.blog-sec {
  padding-top: 96px;
  padding-bottom: 70px;
}

.blog-sec .header {
  margin: 0 0 64px;
}

.blog-sec .blog-col {
  margin: 0 0 27px;
}

.blog-sec .item-col {
  width: 66.66%;
  float: left;
  padding: 0 15px;
}

.blog-sec .item-col.col2 {
  width: 33.33%;
  padding: 0 15px;
  float: left;
}

.grid-sizer {
  width: 33.33%;
}

/*------------------------------------------------------------------
34. Blog Col / .blog-col
-------------------------------------------------------------------*/
.blog-col {
  overflow: hidden;
}

.blog-col:hover .img-holder img {
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}

.blog-col.style2 .time {
  padding: 0 72px 0 0;
}

.blog-col.style2 .time .day {
  left: auto;
  right: -10px;
}

.blog-col.style2 .txt-holder {
  padding: 20px 0 0;
}

.blog-col.style3 {
  margin: 0 0 50px;
}

.blog-col.style3 .txt-holder {
  padding: 76px 0 0 49px;
}

.blog-col.style3 .time {
  margin: 0 0 34px;
}

.blog-col.style3 p {
  margin: 0 0 31px;
}

.blog-col.style4 .txt-holder {
  padding: 76px 49px 0 0;
}

.blog-col.style4 .time {
  margin: 0 0 34px;
  padding: 0 72px 0 0;
}

.blog-col.style4 .time .day {
  left: auto;
  right: -10px;
}

.blog-col.style4 .img-holder {
  text-align: right;
}

.blog-col.style4 .img-holder img {
  display: inline-block;
  vertical-align: top;
}

.blog-col.style4 p {
  margin: 0 0 31px;
}

.blog-col.style5 {
  margin: 0 0 50px;
}

.blog-col.style5 .img-holder {
  width: 54.2%;
}

.blog-col.style5 .txt-holder {
  padding: 60px 0 0 27px;
  width: 45.8%;
}

.blog-col.style5 .time {
  margin: 0 0 34px;
}

.blog-col.style5 p {
  margin: 0 0 31px;
}

.blog-col.style6 {
  margin: 0 0 23px;
}

.blog-col.style6.v2 .txt-holder {
  padding: 18px 0;
}

.blog-col.style6 .img-holder {
  width: 100%;
}

.blog-col.style6 .txt-holder {
  width: 100%;
  padding: 29px;
}

.blog-col.style6 .heading5 {
  line-height: 36px;
  letter-spacing: 5px;
  margin: 0 0 12px;
}

.blog-col.style6 .heading2 {
  letter-spacing: 3px;
  word-spacing: 3px;
  margin: 0 0 10px;
}

.blog-col .img-holder {
  width: 47.2%;
  float: left;
  overflow: hidden;
}

.blog-col .img-holder img {
  -webkit-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.blog-col .txt-holder {
  font-size: 14px;
  line-height: 26px;
  color: #898989;
  width: 52.8%;
  float: left;
  padding: 20px 20px 0 0;
  overflow: hidden;
}

.blog-col .time {
  font-size: 30px;
  line-height: 32px;
  font-weight: 400;
  display: block;
  position: relative;
  z-index: 1;
  letter-spacing: 6px;
  margin: 0 0 25px;
}

.blog-col .time .day {
  font-size: 72px;
  line-height: 80px;
  color: #dbdde0;
  font-weight: 700;
  position: absolute;
  left: 49px;
  top: -25px;
  z-index: -1;
  letter-spacing: 12px;
}

.blog-col .comment-nav {
  font-size: 12px;
  line-height: 17px;
  color: #b7b7b7;
  font-style: italic;
  letter-spacing: 2px;
  overflow: hidden;
  margin: 0 0 34px;
}

.blog-col .comment-nav li {
  display: inline-block;
  vertical-align: middle;
  margin: 0 3px;
}

.blog-col .comment-nav a {
  color: #b7b7b7;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

/*------------------------------------------------------------------
35. Blog Detail / .blog-detail
-------------------------------------------------------------------*/
.blog-detail {
  overflow: hidden;
}

.blog-detail.style2 .img-holder {
  margin: 0 0 32px;
}

.blog-detail.style2 .header {
  padding: 0;
}

.blog-detail.style2 .header .wrap {
  width: 76.1%;
}

.blog-detail.style2 p {
  margin: 0 0 21px;
}

.blog-detail.style2 .comments-block .commment-area .txt-holder {
  width: 88.8%;
  padding-top: 3px;
}

.blog-detail.style2 .comments-block .commment-onelevel .txt-holder {
  width: 87.7%;
}

.blog-detail.style2 .widget .img-holder {
  margin: 0;
}

.blog-detail .blog-holder {
  padding-left: 100px;
  padding-right: 100px;
}

.blog-detail .img-holder {
  width: 100%;
  margin: 0 0 39px;
}

.blog-detail .header {
  overflow: hidden;
  font-size: 14px;
  line-height: 26px;
  margin: 0;
}

.blog-detail .header .time {
  font-size: 30px;
  line-height: 35px;
  font-weight: 400;
  float: left;
  position: relative;
  z-index: 1;
  letter-spacing: 6px;
  padding: 68px 0 0;
  margin: 0 123px 0 0;
}

.blog-detail .header .time .day {
  font-size: 72px;
  line-height: 39px;
  color: #e5e5e5;
  font-weight: 700;
  position: absolute;
  left: 48px;
  bottom: 0;
  z-index: -1;
  letter-spacing: 16px;
}

.blog-detail .header .wrap {
  width: 79.2%;
  float: left;
}

.blog-detail .header .wrap .heading6 {
  margin: 0 0 16px;
}

.blog-detail .heading4 {
  color: #363636;
  margin: 0 0 19px;
}

.blog-detail p {
  margin: 0 0 27px;
}

.blog-detail .blockquote {
  font-size: 18px;
  line-height: 30px;
  overflow: hidden;
  border: 1px solid;
  padding: 22px 28px 23px 33px;
  color: #898989;
  margin: 0 0 37px;
}

.blog-detail .blockquote q {
  quotes: none;
  display: block;
  margin: 0 0 16px;
}

.blog-detail .blockquote cite {
  padding: 20px 0 0;
  display: block;
  font-size: 14px;
  line-height: 16px;
  font-style: normal;
  letter-spacing: 2.7px;
  position: relative;
  color: #252525;
}

.blog-detail .blockquote cite:before {
  position: absolute;
  content: "";
  z-index: -1;
  left: 0;
  top: 0;
  bottom: auto;
  right: auto;
  width: 31px;
  height: 2px;
  background: #252525;
}

.blog-detail .blockquote cite .fa {
  font-size: 58px;
  line-height: 62px;
  margin: -46px 0 0;
  color: rgba(229, 229, 229, 0.1);
}

.blog-detail .footer {
  border-bottom: 1px solid #e9e9e9;
  overflow: hidden;
  margin: 0 0 40px;
}

.blog-detail .footer .tags-list {
  font-size: 11px;
  line-height: 13px;
  overflow: hidden;
  margin: 0 0 21px;
  float: left;
}

.blog-detail .footer .tags-list li {
  float: left;
  margin: 0 11px 0 0;
}

.blog-detail .footer .tags-list a {
  padding: 7px 38px;
  color: #898989;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #e8e8e8;
  letter-spacing: 1px;
}

.blog-detail .footer .tags-list a:hover {
  color: #fff;
}

.blog-detail .footer .social-network {
  overflow: hidden;
  font-size: 14px;
  line-height: 16px;
  margin: 0;
  padding: 15px 0 0;
  float: right;
}

.blog-detail .footer .social-network li {
  margin: 0 0 0 29px;
}

.blog-detail .footer .social-network a {
  color: #b2b2b2;
  display: block;
}

/*------------------------------------------------------------------
36. Socail Network / .socail-network
-------------------------------------------------------------------*/
.social-network {
  line-height: 16px;
  color: #898989;
  overflow: hidden;
  margin: 0;
}

.social-network li {
  margin: 0 56px 0 0;
  float: left;
}

.social-network a {
  color: #898989;
  display: block;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

/*------------------------------------------------------------------
37. About Sec / .about-sec
-------------------------------------------------------------------*/
/* .aboutus-sec {
  padding: 96px 0;
} */

.aboutus-sec.v2 .image-block {
  margin: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.aboutus-sec.v2 .header {
  margin: 0 0 50px;
}

.aboutus-sec .image-block {
  overflow: hidden;
  /* margin: -199px 0 0; */
  -webkit-box-shadow: 0 0 10px 0 rgba(217, 217, 217, 0.5);
  box-shadow: 0 0 10px 0 rgba(217, 217, 217, 0.5);
}

.aboutus-sec .header {
  font: 14px/26px 'Philosopher', sans-serif;
  color: #898989;
  margin: 0 0 22px;
}

.aboutus-sec .header .header-img {
  margin: 0 auto 30px;
}

.aboutus-sec .heading {
  margin: 0 0 25px;
}

.aboutus-sec .signature-image {
  display: block;
  width: 110px;
  margin: 0 auto 63px;
}

.aboutus-sec .heading2 {
  color: #898989;
  margin: 0 0 15px;
  letter-spacing: 4px;
  font-style: italic;
}

.aboutus-sec .sub-title {
  font-size: 24px;
  line-height: 27px;
  color: #363636;
  display: block;
  font-weight: 700;
}

.aboutus-sec .l-bdr {
  border-left: 1px solid #dbdde0;
}

.aboutus-sec .social-network {
  font-size: 14px;
  line-height: 17px;
}

.aboutus-sec .social-network li {
  display: inline-block;
  vertical-align: middle;
  margin: 0 15px;
  float: none;
}

.feature-col .social-network a {
  /* width: 50px; */
  /* height: 50px; */
  /* display: block; */
  color: #000;
  font-size: 20px;
  /* line-height: 50px; */
  /* border-radius: 50%; */
  /* border: 1px solid #e5e5e5; */
  /* -webkit-transition: all 0.25s linear; */
  -o-transition: all 0.25s linear;
  /* transition: all 0.25s linear; */
}

.aboutus-sec .social-network a:before {
  position: absolute;
  content: "";
  z-index: -1;
  left: auto;
  top: 0;
  bottom: auto;
  right: 0;
  width: 100%;
  height: 100%;
  /* border-radius: 50%; */
  -webkit-transition: all 0.4s linear;
  -o-transition: all 0.4s linear;
  transition: all 0.4s linear;
  background-color: #363636;
}

.aboutus-sec .social-network a:hover {
  color: #363636;
}

.aboutus-sec .social-network a:hover:before {
  top: 100%;
  background-color: #fff;
}

.aboutus-sec .contact-holder {
  overflow: hidden;
  padding-top: 37px;
  padding-bottom: 24px;
}

/*------------------------------------------------------------------
38. Tomatin Sec / .tomatin-sec
-------------------------------------------------------------------*/
.tomatin-sec {
  overflow: hidden;
  min-height: 709px;
  padding: 96px 0;
  position: relative;
}

.tomatin-sec .header p {
  margin: 0 0 28px;
}

.tomatin-sec .header .header-img {
  margin: 0 auto 36px;
}

.tomatin-sec .heading {
  margin: 0 0 34px;
}

.tomatin-sec .btn-primary {
  padding: 11px 34px 12px;
}

.tomatin-sec .deal-slider {
  overflow: hidden;
  width: 371px;
  position: absolute;
  right: -285px;
  top: 6px;
  padding: 54px 0 0;
}

.tomatin-sec .deal-slider .img-holder img {
  margin: 0 auto;
}

.tomatin-sec .deal-slider .img-holder .p-label {
  font-size: 18px;
  line-height: 25px;
  float: right;
  padding: 7px 36px 8px 15px;
  letter-spacing: 4px;
  margin: -93px 90px 0 0;
}

.tomatin-sec .deal-slider .img-holder .p-label:before {
  border-width: 20px 20px 20px 0;
}

.tomatin-sec .deal-slider .slick-dots {
  overflow: hidden;
  list-style: none;
  padding: 72px 0 15px;
  margin: 0;
  text-align: center;
}

.tomatin-sec .deal-slider .slick-dots li {
  display: inline-block;
  vertical-align: middle;
  margin: 0 13px;
}

.tomatin-sec .deal-slider .slick-dots button {
  position: relative;
  text-indent: -9999px;
  padding: 0;
  border: none;
  width: 10px;
  height: 10px;
  border: 1px solid #b7b7b7;
  border-radius: 100%;
}

.tomatin-sec .deal-slider .slick-dots button:after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
}

.tomatin-sec .comming-timer {
  overflow: hidden;
  margin: 0 0 59px;
}

.tomatin-sec .comming-timer .countdown-section {
  display: inline-block;
  vertical-align: top;
  padding: 11px 13px 11px;
  border: 1px solid #dbdde0;
  border-radius: 5px;
  margin: 0 29px;
  width: 96px;
}

.tomatin-sec .comming-timer .countdown-period {
  font-size: 14px;
  line-height: 51px;
  color: #898989;
  margin: 0;
  display: block;
  font-family: "Josefin Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
}

.tomatin-sec .comming-timer .countdown-amount {
  font-size: 30px;
  line-height: 63px;
  font-family: "Cinzel", serif;
  font-weight: 700;
  color: #363636;
  margin: 0 auto;
  width: 40px;
  display: block;
  text-align: center;
  letter-spacing: 7px;
  border-bottom: 1px dashed;
}

/*------------------------------------------------------------------
39. Small Product / .small-product
-------------------------------------------------------------------*/
.small-product {
  padding-top: 96px;
  padding-bottom: 71px;
}

/*------------------------------------------------------------------
40. Event Sec / .event-sec
-------------------------------------------------------------------*/
.event-sec {
  overflow: hidden;
  padding: 96px 0;
}

.event-sec .header {
  margin: 0 0 62px;
}

.event-sec .header .header-img {
  opacity: 0.3;
}

.event-sec .header .header-img:after,
.event-sec .header .header-img:before {
  background: rgba(255, 255, 255, 0.3);
}

.event-sec .heading {
  margin: 0 0 34px;
  color: #fff;
}

.event-sec .event-holder {
  overflow: hidden;
  padding: 0 0 53px;
  margin: 0 0 5px;
  border-top: 1px dashed rgba(255, 255, 255, 0.3);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
}

.event-sec .event-holder .holder {
  overflow: hidden;
  padding: 51px 0 0;
  margin: 0 0 -9px;
}

.event-sec .event-holder .alignleft {
  width: 300px;
  overflow: hidden;
  padding: 28px 0 0;
  position: relative;
  z-index: 1;
  float: left;
}

.event-sec .event-holder .day-time {
  font-size: 18px;
  line-height: 22px;
  color: #b7b7b7;
  display: block;
  letter-spacing: 3px;
}

.event-sec .event-holder .time {
  font-size: 36px;
  line-height: 40px;
  font-weight: 400;
  display: block;
  position: relative;
  z-index: 1;
  letter-spacing: 6px;
  margin: 0 0 33px;
}

.event-sec .event-holder .time .day {
  font-size: 100px;
  line-height: 39px;
  color: rgba(255, 255, 255, 0.1);
  font-weight: 700;
  position: absolute;
  left: 39px;
  top: 0;
  z-index: -1;
  letter-spacing: 22px;
}

.event-sec .event-holder .price {
  font-size: 36px;
  line-height: 40px;
  letter-spacing: 4px;
  float: right;
  text-align: right;
  padding: 28px 0 0;
}

.event-sec .event-holder .price span {
  font-size: 14px;
  line-height: 18px;
  color: #b7b7b7;
  display: block;
  padding: 15px 0 0;
  letter-spacing: 0;
}

.event-sec .event-holder .txt-holder {
  font-size: 16px;
  line-height: 36px;
  font-family: "Josefin Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #b7b7b7;
  overflow: hidden;
  padding: 30px 117px;
}

.event-sec .event-holder .txt-holder .heading5 {
  color: #fff;
  margin: 0 0 7px;
  letter-spacing: 5px;
  word-spacing: 3px;
}

.event-sec .event-holder .txt-holder .heading5 a {
  color: #fff;
}

.event-sec .event-holder .txt-holder span {
  display: block;
  letter-spacing: 2px;
  word-spacing: 1px;
}

/*------------------------------------------------------------------
41. Shop Sec / .shop-sec
-------------------------------------------------------------------*/
.shop-sec {
  padding-top: 96px;
  padding-bottom: 70px;
}

.shop-sec .feature-col {
  margin: 0 0 64px;
}

/*------------------------------------------------------------------
42. Shop Detail / .shop-detail
-------------------------------------------------------------------*/
.shop-detail {
  overflow: hidden;
  padding-top: 100px;
}

.shop-detail.left-sidebar .product-slider {
  padding: 136px 180px 100px;
}

.shop-detail .slider {
  overflow: hidden;
  margin: 0 0 -2px;
}

.shop-detail .product-slider {
  overflow: hidden;
  width: 74.4%;
  float: left;
  padding: 136px 280px 100px;
  border: 1px solid #e5e5e5;
  margin: 0 0 44px;
  text-align: center;
}

.shop-detail .product-slider img {
  display: inline-block;
  vertical-align: middle;
}

.shop-detail .pagg-slider {
  width: 25.6%;
  float: left;
  margin: 0;
  padding: 0 0 0 30px;
}

.shop-detail .pagg-slider li {
  width: 100% !important;
  float: none;
  border: 1px solid #e5e5e5;
  margin: 0 0 45px;
  padding: 37px 50px 0px;
  text-align: center;
  position: relative;
  z-index: 1;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.shop-detail .pagg-slider li:before,
.shop-detail .pagg-slider li:after {
  position: absolute;
  content: "";
  z-index: -1;
  left: -1px;
  top: -1px;
  bottom: auto;
  right: auto;
  width: 0;
  height: 0;
  background: transparent;
  border: 1px solid transparent;
}

.shop-detail .pagg-slider li:hover:before {
  -webkit-animation: animate 1s linear forwards;
  animation: animate 1s linear forwards;
}

.shop-detail .pagg-slider li:hover:after {
  -webkit-animation: animate2 1s linear forwards;
  animation: animate2 1s linear forwards;
}

.shop-detail .pagg-slider li img {
  display: inline-block;
  vertical-align: middle;
}

.shop-detail .pagg-slider li:nth-child(2n) {
  padding: 40px 50px 31px;
}

.shop-detail .pagg-slider li:nth-child(3n) {
  padding: 0 27px 8px;
}

.shop-detail .pagg-slider .slick-track {
  width: 100% !important;
}

.shop-detail .heading5 {
  margin: 0 0 9px;
  letter-spacing: 5px;
}

.shop-detail .rating-list {
  margin: 0 0 19px;
  overflow: hidden;
}

.shop-detail .rating-list li {
  float: left;
}

.shop-detail .price {
  font-size: 24px;
  line-height: 27px;
  letter-spacing: 5px;
  margin: 0 0 26px;
  display: block;
}

/* .shop-detail p {
  margin: 0 0 29px;
} */

.shop-detail .footer {
  overflow: hidden;
  margin: 0 0 49px;
  border-bottom: 1px solid #e5e5e5;
}

.shop-detail .footer .f-holder {
  padding: 20px 0;
  border-top: 1px solid #e5e5e5;
  overflow: hidden;
}

.shop-detail .footer .color-list {
  overflow: hidden;
  margin: 0;
  float: left;
}

.shop-detail .footer .color-list li {
  display: inline-block;
  vertical-align: middle;
  margin: 0 26px 0 0;
}

.shop-detail .footer .color-list .heading3 {
  margin: 0 41px 0 0;
  letter-spacing: 0;
}

.shop-detail .footer .color-list a {
  width: 14px;
  height: 14px;
  display: block;
}

.shop-detail .footer .color-list a.red {
  background: #e54e5d;
}

.shop-detail .footer .color-list a.black {
  background: #000;
}

.shop-detail .footer .color-list a.blue {
  background: #60b3f3;
}

.shop-detail .footer .color-list a.green {
  background: #82c14f;
}

.shop-detail .footer .color-list a.yellow {
  background: #ff6f6f;
}

.shop-detail .footer .size-list {
  overflow: hidden;
  margin: 0;
  float: right;
}

.shop-detail .footer .size-list li {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 0 41px;
}

.shop-detail .footer .size-list .heading3 {
  margin: 0 -10px 0 0;
}

.shop-detail .footer .size-list a {
  font-size: 12px;
  line-height: 14px;
  width: 30px;
  height: 30px;
  display: block;
  text-align: center;
  color: #363636;
  background: #f4f6f9;
  margin: 0 auto;
  padding: 8px 0 0;
}

.shop-detail .footer .size-list a:hover {
  color: #fff;
}

.shop-detail .footer .tag-list {
  font-size: 12px;
  line-height: 14px;
  overflow: hidden;
  margin: -6px 0 0;
  float: left;
}

.shop-detail .footer .tag-list li {
  display: inline-block;
  vertical-align: middle;
  margin: 0 17px 0 0;
}

.shop-detail .footer .tag-list .title {
  font-size: 30px;
  line-height: 24px;
  color: #363636;
  margin: 0 28px 0 0;
}

.shop-detail .footer .tag-list a {
  display: block;
  color: #898989;
  letter-spacing: 2px;
}

.shop-detail .footer .social-network {
  overflow: hidden;
  margin: 0;
  float: right;
}

.shop-detail .footer .social-network li {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 0 37px;
}

.shop-detail .footer .social-network .heading3 {
  color: #363636;
  margin: 0 3px 0 0;
  letter-spacing: 0;
}

.shop-detail .footer .social-network a {
  display: block;
  color: #898989;
}

.shop-detail .holder {
  overflow: hidden;
  margin: 0 0 49px;
}

.shop-detail .jcf-number {
  overflow: hidden;
  height: 50px;
  float: left;
  margin: 0 45px 0 0;
}

.shop-detail .jcf-number input {
  font-size: 13px;
  line-height: 50px;
  text-align: center;
  padding: 0;
  width: 133px;
  border-color: #e5e5e5;
}

.shop-detail .jcf-number .jcf-btn-inc,
.shop-detail .jcf-number .jcf-btn-dec {
  background: none;
  top: 15px;
  font-size: 18px;
  line-height: 18px;
  text-indent: -9999px;
  width: 10px;
}

.shop-detail .jcf-number .jcf-btn-inc:before,
.shop-detail .jcf-number .jcf-btn-dec:before {
  top: 0;
  left: 0;
  background: none;
  border: none;
  font-family: 'FontAwesome';
  margin: 0;
  text-indent: 0;
}

.shop-detail .jcf-number .jcf-btn-dec {
  left: 15px;
}

.shop-detail .jcf-number .jcf-btn-dec:before {
  content: "\f104";
  display: block;
}

.shop-detail .jcf-number .jcf-btn-inc {
  right: 16px;
}

.shop-detail .jcf-number .jcf-btn-inc:before {
  content: "\f105";
  display: block;
}

.shop-detail .social-networks {
  margin: 0;
  float: left;
  overflow: hidden;
}

.shop-detail .social-networks li {
  float: left;
  margin: 0 0 0 25px;
}

.shop-detail .social-networks li:first-child {
  margin: 0;
}

.shop-detail .social-networks a {
  width: 50px;
  height: 50px;
  display: block;
  color: #000;
  font-size: 20px;
  line-height: 50px;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.shop-detail .social-networks a:hover {
  color: #fff;
  -webkit-transform: rotateZ(360deg);
  -ms-transform: rotate(360deg);
  transform: rotateZ(360deg);
}

.shop-detail .accordion {
  overflow: hidden;
  margin: 0;
  padding: 0 0 81px;
  border-bottom: 1px solid #e5e5e5;
}

.shop-detail .accordion li {
  border: 1px solid #e5e5e5;
  margin: 0 0 18px;
  padding: 14px 28px;
}

.shop-detail .accordion .active a {
  border-bottom: 1px solid #e5e5e5;
  padding: 0 0 17px;
}

.shop-detail .accordion a {
  display: block;
}

.shop-detail .accordion .heading3 {
  margin: 0;
  color: #363636;
}

.shop-detail .accordion strong {
  color: #363636;
}

.shop-detail .accordion .slide {
  padding: 11px 0 3px;
}

.shop-detail .accordion .slide p {
  margin: 0 0 1px;
}

/*------------------------------------------------------------------
43. Content / #content
-------------------------------------------------------------------*/
#content {
  padding: 0;
}

/* #content .jcf-select {
  width: 270px;
  height: 40px;
  border: 1px solid #f4f6f9;
  margin: 0 27px 60px 0;
} */
/* 
#content .jcf-select .jcf-select-text {
  font-size: 14px;
  line-height: 25px;
  margin: 6px 35px 0 20px;
} */

/* #content .jcf-select .jcf-select-opener {
  background: none;
} */

/* #content .jcf-select .jcf-select-opener:before {
  position: absolute;
  left: 0;
  top: 12px;
  content: "\f107";
  font-size: 12px;
  line-height: 14px;
  color: #363636;
  font-family: "FontAwesome";
} */

#content .viewFilterLinks {
  font-size: 22px;
  line-height: 30px;
  float: right;
}

#content .viewFilterLinks li {
  float: left;
  margin: 0 0 0 10px;
}

#content .viewFilterLinks .active a {
  color: #fff;
}

#content .viewFilterLinks a {
  width: 40px;
  height: 40px;
  color: #e5e5e5;
  padding: 10px 9px;
  border: 1px solid #f4f6f9;
  display: block;
}

#content .viewFilterLinks a:hover {
  color: #fff;
}

/*------------------------------------------------------------------
42. Comments Block / .comments-block
-------------------------------------------------------------------*/
.comments-block {
  overflow: hidden;
  padding: 0 0 9px;
  margin: 0 0 39px;
  border-bottom: 1px solid #e9e9e9;
}

.comments-block .heading2 {
  margin: 0 0 25px;
  letter-spacing: 3px;
}

.comments-block .commment-area {
  overflow: hidden;
  padding: 7px 0 0;
  margin: 0 0 37px;
}

.comments-block .commment-area .img {
  width: 68px;
  float: left;
  overflow: hidden;
  margin: 6px 28px 0 0;
}

.comments-block .commment-area .txt-holder {
  width: 90%;
  padding: 0 0 0 30px;
  float: left;
  position: relative;
}

.comments-block .commment-area .txt-holder:before {
  position: absolute;
  content: "";
  z-index: -1;
  left: 0;
  top: 0;
  bottom: auto;
  right: auto;
  width: 1px;
  height: 97px;
  background: #e9e9e9;
}

.comments-block .commment-area .header {
  margin: 0 0 9px;
}

.comments-block .commment-area .header .btn-primary {
  float: right;
  margin: 6px 0 0;
  padding: 11px 30px;
}

.comments-block .commment-area .comment-date {
  display: inline-block;
  vertical-align: middle;
}

.comments-block .commment-area .comment-date time {
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
  display: block;
  color: #b7b7b7;
  letter-spacing: 2.6px;
  margin: 0 0 7px;
}

.comments-block .commment-area p {
  margin: 0;
}

.comments-block .commment-onelevel {
  padding: 0 0 0 98px;
  overflow: hidden;
}

.comments-block .commment-onelevel .img {
  width: 68px;
  margin: 0 26px 0 0;
}

.comments-block .commment-onelevel .txt-holder {
  width: 89%;
  padding: 0 0 0 30px;
}

.comments-block .commment-onelevel .header {
  padding-top: 0;
}

/*------------------------------------------------------------------
43. Comment Formarea / .comment-formarea
-------------------------------------------------------------------*/
.comment-formarea {
  overflow: hidden;
  margin: 0 0 30px;
}

.comment-formarea .heading2 {
  letter-spacing: 3px;
}

.comment-formarea .commentform {
  overflow: hidden;
}

.comment-formarea .commentform .form-group {
  margin-bottom: 22px;
}

.comment-formarea .commentform .form-control {
  background: none;
  border: none;
  color: #898989;
  border-bottom: 1px solid #e5e5e5;
  -webkit-box-shadow: none;
  box-shadow: none;
  padding: 0 0 14px;
  height: auto;
}

.comment-formarea .commentform .form-control::-webkit-input-placeholder {
  color: #898989;
}

.comment-formarea .commentform .form-control::-moz-placeholder {
  opacity: 1;
  color: #898989;
}

.comment-formarea .commentform .form-control:-moz-placeholder {
  color: #898989;
}

.comment-formarea .commentform .form-control:-ms-input-placeholder {
  color: #898989;
}

.comment-formarea .commentform .form-control.placeholder {
  color: #898989;
}

.comment-formarea .commentform textarea {
  min-height: 79px;
  resize: none;
  margin: 0 0 38px;
}

.comment-formarea .commentform .btn-primary {
  margin: 0 0 0 15px;
  padding: 11px 34px;
  display: inline-block;
  vertical-align: middle;
}

.comment-formarea .commentform .btn-primary:hover {
  color: #363636;
  background: none;
}

/*------------------------------------------------------------------
44. Sidebar / #sidebar
-------------------------------------------------------------------*/
#sidebar {
  overflow: hidden;
}

/*------------------------------------------------------------------
45. Widget / .widget
-------------------------------------------------------------------*/
.widget {
  overflow: hidden;
  margin: 0 0 48px;
}

.widget.style2 .category-list {
  margin: 0 0 41px;
}

.widget.style2 .feature-list .img-holder {
  width: 70px;
  height: 93px;
  border: 1px solid #f0f1f2;
  margin: 4px 0 0;
  padding: 11px 0 0;
}

.widget.style2 .feature-list .img-holder img {
  margin: 0 auto;
}

.widget.style2 .feature-list time {
  font-size: 18px;
  line-height: 20px;
  color: #a53e4c;
  letter-spacing: 3.5px;
}

.widget.category-widget .heading2 {
  margin: 0;
}

.widget.size-widget .heading2 {
  margin: 0 0 14px;
}

.widget .heading2 {
  letter-spacing: 3.5px;
  position: relative;
  margin: 0 0 19px;
}

.widget .heading2:after {
  position: absolute;
  content: "";
  z-index: -1;
  left: auto;
  top: 50%;
  bottom: auto;
  right: 0;
  width: 100px;
  height: 1px;
  border: 1px dashed;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.widget .img-holder {
  margin: 0;
}

.widget .category-list {
  overflow: hidden;
  margin: 0;
  font-style: italic;
}

.widget .category-list li {
  padding: 13px 0 12px;
  border-bottom: 1px dashed #e5e5e5;
}

.widget .category-list a {
  color: #363636;
  display: block;
}

.widget .price-range {
  overflow: hidden;
}

.widget .price-range .progress {
  margin: 0 0 27px;
  display: block;
}

.widget .price-range .text {
  color: #363636;
  display: inline-block;
  vertical-align: middle;
}

.widget .price-range .text .price {
  letter-spacing: 3px;
  padding: 0 9px 0 6px;
}

.widget .price-range .btn-primary {
  padding: 11px 29px;
}

.widget .color-list {
  overflow: hidden;
  margin: -3px 0 -30px;
}

.widget .color-list li {
  overflow: hidden;
  margin: 0 0 22px;
  padding: 0 0 0 32px;
  position: relative;
}

.widget .color-list li:before {
  position: absolute;
  content: "";
  z-index: -1;
  left: 2px;
  top: 3px;
  bottom: auto;
  right: auto;
  width: 13px;
  height: 13px;
  background: red;
  border-radius: 50%;
}

.widget .color-list li.blue:before {
  background: blue;
}

.widget .color-list li.black:before {
  background: black;
}

.widget .color-list li.green:before {
  background: green;
}

.widget .color-list li.yellow:before {
  background: yellow;
}

.widget .color-list .heading3 {
  letter-spacing: 0;
}

.widget .color-list a {
  color: #363636;
  display: block;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.widget .color-list a:hover {
  color: #a53e4c;
}

.widget .size-list {
  font-size: 11px;
  line-height: 13px;
  overflow: hidden;
  margin: 0 0 12px;
}

.widget .size-list li {
  float: left;
  margin: 0 0 0 30px;
}

.widget .size-list li:first-child {
  margin: 0;
}

.widget .size-list a {
  width: 30px;
  height: 30px;
  color: #363636;
  background: #f4f6f9;
  display: block;
  border-radius: 100%;
  padding: 8px 0 0;
}

.widget .size-list a:hover {
  color: #fff;
}

.widget .feature-list {
  overflow: hidden;
}

.widget .feature-list.feature2 li:hover .img-holder img {
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}

.widget .feature-list.feature2 .img-holder {
  padding: 0;
  border: none;
  overflow: hidden;
}

.widget .feature-list.feature2 .img-holder img {
  -webkit-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.widget .feature-list.feature2 .heading3 {
  line-height: 24px;
  margin: 0 0 19px;
}

.widget .feature-list.feature2 .heading3 a {
  color: #363636;
}

.widget .feature-list li {
  overflow: hidden;
  margin: 0 0 19px;
}

.widget .feature-list li:hover .img-holder:before {
  -webkit-animation: animate 1s linear forwards;
  animation: animate 1s linear forwards;
}

.widget .feature-list li:hover .img-holder:after {
  -webkit-animation: animate2 1s linear forwards;
  animation: animate2 1s linear forwards;
}

.widget .feature-list .img-holder {
  width: 26%;
  padding: 12px 10px;
  text-align: center;
  border: 1px solid #e5e5e5;
  position: relative;
  z-index: 1;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.widget .feature-list .img-holder:before,
.widget .feature-list .img-holder:after {
  position: absolute;
  content: "";
  z-index: -1;
  left: -1px;
  top: -1px;
  bottom: auto;
  right: auto;
  width: 0;
  height: 0;
  background: transparent;
  border: 1px solid transparent;
}

.widget .feature-list .img-holder img {
  display: inline-block;
  vertical-align: middle;
}

.widget .feature-list .txt-holder {
  width: 74%;
  padding: 0 0 0 29px;
}

.widget .feature-list .txt-holder .heading3 {
  margin: 0 0 14px;
}

.widget .feature-list .txt-holder .heading2 {
  letter-spacing: 5px;
}

.widget .feature-list .txt-holder .heading2:after {
  display: none;
}

.widget .feature-list .rating-list {
  font-size: 12px;
  line-height: 14px;
  overflow: hidden;
  margin: 0 0 10px;
}

.widget .feature-list .rating-list li {
  float: left;
  margin: 0 2px 0 0;
}

.widget .feature-list .rating-list a {
  color: #363636;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.widget .feature-list .time {
  font-size: 12px;
  line-height: 14px;
  color: #b7b7b7;
  font-style: italic;
  letter-spacing: 2px;
  display: block;
}

/*------------------------------------------------------------------
46. Portfolio Sec / .portfolio-sec
-------------------------------------------------------------------*/
.portfolio-sec {
  padding-top: 96px;
  padding-bottom: 96px;
}

.portfolio-sec.style2 .item-col {

  float: left;
  padding: 0 15px;
}

.portfolio-sec.style2 .item-col.col2 {

  padding: 0 15px;
  float: left;
}

#feature-holder .col2 .portfolio-col {
  margin: 0 0 40px;
}

#feature-holder .portfolio-col {
  margin: 0 0 31px;
}

#feature-holder .portfolio-col.v2 .wrap {
  padding: 20px;
}

/*------------------------------------------------------------------
47. Portfolio Col / .portfolio-col
-------------------------------------------------------------------*/
.portfolio-col {
  overflow: hidden;
  margin: 0 0 59px;
  font-size: 12px;
  line-height: 16px;
  color: #b7b7b7;
}

.portfolio-col:hover .img-holder:before {
  -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0);
  transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0);
}

.portfolio-col:hover .img-holder img {
  opacity: 0.6;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

.portfolio-col.v2:hover .wrap {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.portfolio-col.v2 .wrap {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.8);
  padding: 21px 100px;
  margin: -160px 0 30px;
  -webkit-transform: translateY(300px);
  -ms-transform: translateY(300px);
  transform: translateY(300px);
}

.portfolio-col.v3 {
  position: relative;
}

.portfolio-col.v3:hover .img-holder:before {
  display: none;
}

.portfolio-col.v3:hover .wrap {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.portfolio-col.v3 .wrap {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.8);
  padding: 70px 0;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

.portfolio-col.v3 .content {
  overflow: hidden;
  margin: 0 0 35px;
}

.portfolio-col.v3 .social-network li {
  float: none;
  display: inline-block;
  vertical-align: middle;
}

.portfolio-col .img-holder {
  margin: 0 0 21px;
  position: relative;
}

.portfolio-col .img-holder:before {
  position: absolute;
  content: "";
  z-index: -1;
  left: 0;
  top: 0;
  bottom: auto;
  right: auto;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  -webkit-transition: -webkit-transform 0.6s;
  transition: -webkit-transform 0.6s;
  -o-transition: transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
  -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0);
  transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0);
}

.portfolio-col .img-holder img {
  opacity: 0.95;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, -webkit-transform 0.35s;
  -o-transition: opacity 0.35s, transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
  -webkit-transform: scale3d(1.05, 1.05, 1);
  transform: scale3d(1.05, 1.05, 1);
}

.portfolio-col .heading2 {
  margin: 0 0 5px;
  letter-spacing: 3px;
}

.portfolio-col p {
  margin: 0;
  letter-spacing: 2px;
}

.portfolio-col .social-network {
  margin: 0;
  overflow: hidden;
  padding: 4px 0 0;
}

.portfolio-col .social-network li {
  float: left;
  margin: 0 0 0 28px;
}

.portfolio-col .social-network li:first-child {
  margin: 0;
}

.portfolio-col .social-network a {
  width: 50px;
  height: 50px;
  display: block;
  color: #000;
  font-size: 20px;
  line-height: 50px;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.portfolio-col .social-network a:hover {
  color: #fff;
  -webkit-transform: rotateZ(360deg);
  -ms-transform: rotate(360deg);
  transform: rotateZ(360deg);
}

/*------------------------------------------------------------------
48. Portfolio Detail / .portfolio-detail
-------------------------------------------------------------------*/
.portfolio-detail {
  overflow: hidden;
  padding-top: 100px;
  padding-bottom: 100px;
}

.portfolio-detail .portfolio-slider {
  padding: 3px 0 0;
  overflow: hidden;
}

.portfolio-detail .portfolio-slider .slick-prev,
.portfolio-detail .portfolio-slider .slick-next {
  width: 50px;
  height: 50px;
  text-indent: -9999px;
  position: absolute;
  top: 50%;
  z-index: 1;
  background: none;
  border: 1px dashed;
  border-color: rgba(225, 225, 225, 0.4);
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.portfolio-detail .portfolio-slider .slick-prev:after,
.portfolio-detail .portfolio-slider .slick-next:after {
  position: absolute;
  content: "";
  z-index: -1;
  left: 0;
  top: 0;
  bottom: auto;
  right: auto;
  text-indent: 0;
  font-size: 19px;
  line-height: 19px;
  color: #fff;
  letter-spacing: 4px;
  word-break: break-all;
  padding: 3px 0 0 5px;
  text-transform: uppercase;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.portfolio-detail .portfolio-slider .slick-prev {
  left: 20px;
}

.portfolio-detail .portfolio-slider .slick-prev:after {
  content: "prev";
}

.portfolio-detail .portfolio-slider .slick-next {
  right: 20px;
}

.portfolio-detail .portfolio-slider .slick-next:after {
  content: "next";
}

.portfolio-detail .pagg-slider {
  padding: 22px 0 128px;
  margin: 0;
}

.portfolio-detail .pagg-slider li {
  float: left;
}

.portfolio-detail .pagg-slider li img {
  border: 1px solid;
}

.portfolio-detail .holder {
  overflow: hidden;
  color: #898989;
  line-height: 26px;
}

.portfolio-detail .holder .heading5 {
  letter-spacing: 2px;
  margin: 0 0 12px;
}

.portfolio-detail .holder p {
  margin: 0 0 55px;
}

.portfolio-detail .client-details {
  margin: 0;
  color: #898989;
  padding: 51px 0 0;
  letter-spacing: 1px;
  border-top: 1px solid #e5e5e5;
}

.portfolio-detail .client-details li {
  margin: 0 0 10px;
}

.portfolio-detail .client-details li strong {
  color: #363636;
}

.portfolio-detail .client-details .btn-primary {
  margin: 40px 0 0;
  padding: 11px 20px;
}

/*------------------------------------------------------------------
49. Compare Sec / .compare-sec
-------------------------------------------------------------------*/
.compare-sec {
  overflow: hidden;
  padding-top: 100px;
  padding-bottom: 100px;
}

.compare-sec .compare-table {
  overflow: hidden;
  border: 1px solid #e5e5e5;
}

.compare-sec .compare-table>tbody>tr>td,
.compare-sec .compare-table>tbody>tr>th {
  vertical-align: middle;
}

.compare-sec .compare-table tr {
  border-bottom: 1px solid #e5e5e5;
}

.compare-sec .compare-table th,
.compare-sec .compare-table td {
  overflow: hidden;
  border-left: 1px solid #e5e5e5;
  border-top: none;
}

.compare-sec .compare-table th:first-child,
.compare-sec .compare-table td:first-child {
  border: none;
}

.compare-sec .compare-table th {
  padding: 35px 15px 25px;
}

.compare-sec .compare-table td {
  padding: 16px 25px;
}

.compare-sec .compare-table .social-network {
  margin: 0;
}

.compare-sec .compare-table .social-network li {
  display: inline-block;
  vertical-align: middle;
  float: none;
  margin: 0 5px;
}

.compare-sec .compare-table .social-network a {
  width: 50px;
  height: 50px;
  border: 1px solid #e5e5e5;
  padding: 15px 0 0;
  display: block;
  color: #000;
  font-size: 20px;
  line-height: 22px;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.compare-sec .compare-table .social-network a:hover {
  color: #fff;
}

.compare-sec .compare-table .heading3 {
  width: 241px;
  display: block;
  margin: 0;
  color: #363636;
}

.compare-sec .compare-table .heading2 {
  letter-spacing: 3px;
  margin: 0;
}

.compare-sec .compare-table .title {
  font-size: 16px;
  line-height: 18px;
  display: block;
  color: #363636;
  letter-spacing: 3px;
}

.compare-sec .compare-table .rating-list {
  font-size: 12px;
  line-height: 14px;
  overflow: hidden;
  margin: 0;
}

.compare-sec .compare-table .rating-list li {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}

.compare-sec .compare-table .rating-list a {
  color: #363636;
}

.compare-sec .compare-table .size {
  font-size: 12px;
  line-height: 14px;
  width: 30px;
  height: 30px;
  display: block;
  background: #f4f6f9;
  margin: 0 auto;
  padding: 8px 0 0;
}

.compare-sec .compare-table .size:hover {
  color: #fff;
}

.compare-sec .compare-table .circle {
  width: 12px;
  height: 12px;
  display: block;
  background-color: #e54e5d;
  margin: 0 auto;
}

.compare-sec .compare-table .circle.blue {
  background: #60b3f3;
}

.compare-sec .compare-table .circle.black {
  background: #252525;
}

.compare-sec .compare-table p {
  margin: 0 0 16px;
  padding: 14px 0 10px;
}

.compare-sec .compare-table .wrap {
  overflow: hidden;
  width: 241px;
  margin: -6px 0 6px;
}

.compare-sec .compare-table .wrap .img-holder {
  width: 100px;
  height: 133px;
  margin: 0 auto 16px;
  padding: 14px 0;
  border: 1px solid #e5e5e5;
}

.compare-sec .compare-table .wrap .img-holder img {
  margin: 0 auto;
}

/*------------------------------------------------------------------
50. Contact Sec / .contact-sec
-------------------------------------------------------------------*/
.contact-sec {
  overflow: hidden;
}

.contact-sec .contact-list {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 3px;
  overflow: hidden;
  margin: 0 0 55px;
  color: #363636;
  border-bottom: 1px solid #e5e5e5;
}

.contact-sec .contact-list li {
  width: 33.33%;
  padding: 0 15px;
  float: left;
  margin: 0 0 26px;
}

.contact-sec .contact-list .fa {
  font-size: 26px;
  line-height: 28px;
  display: block;
  margin: 0 0 21px;
}

.contact-sec .contact-list a {
  color: #363636;
  display: block;
}

.contact-sec .header {
  margin: 0 0 55px;
}

.contact-sec .header .title {
  margin: 0 0 5px;
}

.contact-sec .header .heading {
  margin: 0 0 36px;
}

.contact-sec .header .header-img {
  margin: 0 auto 37px;
}

.contact-sec .header p {
  margin: 0 0 30px;
}

.contact-sec .heading2 {
  margin: -8px 0 20px;
  letter-spacing: 3px;
}

.contact-sec .social-network li {
  float: none;
  display: inline-block;
  vertical-align: middle;
}

.contact-sec .contact-form {
  overflow: hidden;
}

.contact-sec .contact-form .form-control {
  background: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid #e5e5e5;
  height: auto;
  padding: 0 0 13px;
  margin: 0 0 22px;
  color: #898989;
}

.contact-sec .contact-form .form-control::-webkit-input-placeholder {
  color: #898989;
}

.contact-sec .contact-form .form-control::-moz-placeholder {
  opacity: 1;
  color: #898989;
}

.contact-sec .contact-form .form-control:-moz-placeholder {
  color: #898989;
}

.contact-sec .contact-form .form-control:-ms-input-placeholder {
  color: #898989;
}

.contact-sec .contact-form .form-control.placeholder {
  color: #898989;
}

.contact-sec .contact-form textarea.form-control {
  min-height: 82px;
  resize: none;
}

.contact-sec .contact-form .btn-primary {
  margin: 38px 0 0;
  padding: 11px 29px;
  letter-spacing: 3px;
}

.contact-sec .contact-form .btn-primary:hover {
  background: none;
  color: #363636;
  border-color: #363636;
}

/*------------------------------------------------------------------
51. Team Sec / .team-sec
-------------------------------------------------------------------*/
.team-sec {
  overflow: hidden;
  padding-top: 5px;
  padding-bottom: 60px;
}

.team-sec .header {
  margin: 0 0 63px;
}

.team-sec .header .heading {
  margin: 0 0 30px;
}

/*------------------------------------------------------------------
52. Team Col / .team-col
-------------------------------------------------------------------*/
.team-col {
  position: relative;
  overflow: hidden;
}

.team-col:hover .social-icons {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.team-col .img-holder {
  width: 100%;
  position: relative;
  padding-right: 69px;
}

.team-col .social-icons {
  font-size: 18px;
  line-height: 20px;
  position: absolute;
  right: 20px;
  top: 0;
  overflow: hidden;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.team-col .social-icons li {
  margin: 0 0 10px;
}

.team-col .social-icons a {
  width: 40px;
  height: 40px;
  background: #7f7f7f;
  color: #fff;
  padding-top: 14px;
  display: block;
}

.team-col .txt-wrap {
  overflow: hidden;
  padding: 27px 28px;
}

.team-col .heading4 {
  letter-spacing: 4px;
  padding-bottom: 11px;
  position: relative;
  z-index: 1;
  color: #363636;
  margin: 0 0 22px;
}

.team-col .heading4:after {
  position: absolute;
  content: "";
  z-index: -1;
  left: 3px;
  top: auto;
  bottom: 0;
  right: auto;
  width: 39px;
  height: 2px;
  background: #a53e4c;
}

.team-col .desination {
  font-style: italic;
  font-size: 11px;
  line-height: 13px;
  color: #898989;
  letter-spacing: 2px;
  display: block;
}

/*------------------------------------------------------------------
53. Error Sec / .error-sec
-------------------------------------------------------------------*/
.error-sec {
  overflow: hidden;
  padding-top: 189px;
  padding-bottom: 96px;
  font-size: 18px;
  line-height: 30px;
  color: #898989;
}

.error-sec h2 {
  font-size: 30px;
  line-height: 36px;
  color: #363636;
  margin: 0 0 127px;
  letter-spacing: 6px;
  position: relative;
}

.error-sec h2:before {
  position: absolute;
  content: "";
  z-index: -1;
  left: 50%;
  top: 34px;
  bottom: auto;
  right: auto;
  content: "404";
  font-size: 400px;
  font-weight: 700;
  letter-spacing: 160px;
  -webkit-transform: translateX(-45%);
  -ms-transform: translateX(-45%);
  transform: translateX(-45%);
  color: #e9e9e9;
}

.error-sec p {
  letter-spacing: 3.4px;
  margin: 0 0 54px;
}

.error-sec .error-form {
  width: 570px;
  margin: 0 auto 52px;
  position: relative;
}

.error-sec .error-form .form-control {
  font-size: 14px;
  line-height: 17px;
  border: none;
  border-bottom: 1px solid #a53e4c;
  outline: none;
  color: #898989;
  padding: 3px 50px 17px 19px;
  background: none;
  letter-spacing: 3px;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.error-sec .error-form .form-control::-webkit-input-placeholder {
  color: #898989;
}

.error-sec .error-form .form-control::-moz-placeholder {
  opacity: 1;
  color: #898989;
}

.error-sec .error-form .form-control:-moz-placeholder {
  color: #898989;
}

.error-sec .error-form .form-control:-ms-input-placeholder {
  color: #898989;
}

.error-sec .error-form .form-control.placeholder {
  color: #898989;
}

.error-sec .error-form .sub-btn {
  font-size: 26px;
  line-height: 28px;
  position: absolute;
  right: 17px;
  top: -9px;
  background: none;
  border: none;
  color: #363636;
  padding: 0;
}

.error-sec .btn-holder {
  overflow: hidden;
}

.error-sec .btn-holder .btn-primary {
  padding: 11px 43px;
  margin: 0 30px 0 0;
}

/*------------------------------------------------------------------
54. Popup Holder / .popup-holder
-------------------------------------------------------------------*/
.popup-holder {
  position: relative;
  overflow: hidden;
  height: 0;
}

/*------------------------------------------------------------------
55. Popup1 / #popup1
-------------------------------------------------------------------*/
#popup1.lightbox-demo {
  width: 301px;
  padding: 26px 27px 22px;
}

/*------------------------------------------------------------------
56. Lightbox Demo / .lightbox-demo
-------------------------------------------------------------------*/
.lightbox-demo {
  padding: 10px 0 0;
  position: relative;
  background: #fff;
}

.lightbox-demo.newsletter-form {
  width: 602px;
}

.lightbox-demo.product {
  width: 1170px;
  padding: 40px;
  overflow-x: auto;
}

.lightbox-demo.product .heading5 {
  margin: 0 0 20px;
  letter-spacing: 5px;
}

.lightbox-demo.product form {
  overflow: hidden;
  margin: 0 0 40px;
}

.lightbox-demo .heading2 {
  margin: 0 0 13px;
  letter-spacing: 4px;
  word-spacing: 6px;
}

.lightbox-demo .heading5 {
  margin: 0 0 40px;
}

.lightbox-demo .img-holder {
  width: 100%;
  margin: 0 0 23px;
}

.lightbox-demo .txt {
  display: block;
  color: #898989;
  margin: 0 0 30px;
  letter-spacing: 2px;
}

.lightbox-demo .email-form {
  width: 350px;
  margin: 0 auto 30px;
  position: relative;
}

.lightbox-demo .email-form .form-control {
  background: none;
  border: none;
  border-bottom: 1px solid #000;
  padding: 10px 40px 4px 0;
  height: auto;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #898989;
}

.lightbox-demo .email-form .form-control::-webkit-input-placeholder {
  color: #898989;
}

.lightbox-demo .email-form .form-control::-moz-placeholder {
  opacity: 1;
  color: #898989;
}

.lightbox-demo .email-form .form-control:-moz-placeholder {
  color: #898989;
}

.lightbox-demo .email-form .form-control:-ms-input-placeholder {
  color: #898989;
}

.lightbox-demo .email-form .form-control.placeholder {
  color: #898989;
}

.lightbox-demo .email-form .fa {
  position: absolute;
  right: 0;
  top: 16px;
  padding: 0;
  background: none;
  border: none;
  color: #a53e4c;
}

.lightbox-demo .login-form {
  overflow: hidden;
  margin: 0 0 25px;
}

.lightbox-demo .login-form .form-group {
  margin: 0 0 44px;
  overflow: hidden;
}

.lightbox-demo .login-form .form-control {
  font-size: 18px;
  line-height: 20px;
  background: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid #dbdde0;
  padding: 6px 0 15px;
  height: auto;
  color: #898989;
}

.lightbox-demo .login-form .form-control::-webkit-input-placeholder {
  color: #898989;
}

.lightbox-demo .login-form .form-control::-moz-placeholder {
  opacity: 1;
  color: #898989;
}

.lightbox-demo .login-form .form-control:-moz-placeholder {
  color: #898989;
}

.lightbox-demo .login-form .form-control:-ms-input-placeholder {
  color: #898989;
}

.lightbox-demo .login-form .form-control.placeholder {
  color: #898989;
}

.lightbox-demo .login-form .btn-primary {
  padding: 11px 35px;
}

.lightbox-demo .wrap {
  overflow: hidden;
}

.lightbox-demo .wrap a {
  font-size: 12px;
  color: #898989;
}

.lightbox-demo .slider {
  width: 50%;
  float: left;
}

.lightbox-demo .txt-holder {
  width: 50%;
  float: left;
  padding: 80px 0 0 30px;
}

.lightbox-demo .product-slider {
  overflow: hidden;
  width: 74%;
  padding: 60px 120px;
  border: 1px solid #e5e5e5;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

.lightbox-demo .product-slider img {
  display: inline-block;
  vertical-align: middle;
}

.lightbox-demo .pagg-slider {
  width: 25%;
  margin: 0;
  padding: 0 30px 0 0;
  display: inline-block;
  vertical-align: top;
}

.lightbox-demo .pagg-slider li {
  width: 100% !important;
  float: none;
  border: 1px solid #e5e5e5;
  margin: 0 0 15px;
  padding: 20px 40px;
  text-align: center;
}

.lightbox-demo .pagg-slider li img {
  display: inline-block;
  vertical-align: middle;
}

.lightbox-demo .pagg-slider .slick-track {
  width: 100% !important;
}

.lightbox-demo .rating-list {
  margin: 0 0 25px;
  overflow: hidden;
}

.lightbox-demo .rating-list li {
  float: left;
}

.lightbox-demo .price {
  font-size: 24px;
  line-height: 27px;
  letter-spacing: 5px;
  margin: 0 0 40px;
  display: block;
}

.lightbox-demo .price del {
  font-size: 20px;
  line-height: 25px;
  margin: 0 15px 0 0;
}

.lightbox-demo p {
  margin: 0 0 29px;
}

.lightbox-demo .social-network {
  font-size: 16px;
  line-height: 20px;
  overflow: hidden;
  margin: 0;
}

.lightbox-demo .social-network li {
  display: inline-block;
  vertical-align: middle;
  margin: 0 20px 0 0;
}

.lightbox-demo .social-network a {
  display: block;
  color: #898989;
}

.lightbox-demo .jcf-number {
  overflow: hidden;
  height: 40px;
  float: left;
  margin: 0 45px 0 0;
}

.lightbox-demo .jcf-number input {
  font-size: 13px;
  line-height: 50px;
  text-align: center;
  padding: 0;
  width: 133px;
  color: #363636;
  background: none;
  border-color: #e5e5e5;
}

.lightbox-demo .jcf-number .jcf-btn-inc,
.lightbox-demo .jcf-number .jcf-btn-dec {
  background: none;
  top: 10px;
  font-size: 18px;
  line-height: 18px;
  text-indent: -9999px;
  width: 10px;
}

.lightbox-demo .jcf-number .jcf-btn-inc:before,
.lightbox-demo .jcf-number .jcf-btn-dec:before {
  top: 0;
  left: 0;
  background: none;
  border: none;
  font-family: 'FontAwesome';
  margin: 0;
  text-indent: 0;
}

.lightbox-demo .jcf-number .jcf-btn-dec {
  left: 15px;
}

.lightbox-demo .jcf-number .jcf-btn-dec:before {
  content: "\f104";
  display: block;
}

.lightbox-demo .jcf-number .jcf-btn-inc {
  right: 16px;
}

.lightbox-demo .jcf-number .jcf-btn-inc:before {
  content: "\f105";
  display: block;
}

/*------------------------------------------------------------------
Hero Section / .hero
-------------------------------------------------------------------*/
.hero {
  background: var(--hero-background) no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  aspect-ratio: 1280 / 512;
  min-height: 480px;
  display: flex;
  align-items: center;
  color: white;
  position: relative;
  overflow: hidden;
}



.hero::before {
  display: none;
}

.hero-content {
  max-width: 870px;
  position: relative;
  z-index: 2;
  padding-left: 100px;
}

.hero-content::before {
  content: '';
  position: absolute;
  top: -45px;
  bottom: -45px;
  left: -40px;
  right: -60px;
  background: radial-gradient(ellipse 75% 65% at 40% 50%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 252, 245, 0.88) 35%,
      rgba(255, 250, 240, 0.55) 60%,
      rgba(255, 255, 255, 0.18) 75%,
      transparent 92%);
  filter: blur(14px);
  pointer-events: none;
  z-index: -1;
  border-radius: 40px;
}

.eyebrow {
  color: #a87928;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
  margin-bottom: 12px;
  display: block;
}

.hero h1 {
  font-size: 60px;
  line-height: 1.05;
  margin: 18px 0;
  font-weight: 400;
  font-family: Georgia, 'Cinzel', serif;
  letter-spacing: -0.01em;
  color: #6f1023;
}

.hero p {
  font-size: 18px;
  line-height: 1.7;
  color: #382d27;
  margin: 20px 0;
}

.btn-row {
  display: flex;
  gap: 16px;
  margin-top: 26px;
  flex-wrap: wrap;
  align-items: center;
}

/*------------------------------------------------------------------
Page Hero Section (Wine Club, Collection, Journal, About, Contact)
-------------------------------------------------------------------*/
.page-hero-content,
.wineclub-hero-content {
  max-width: 820px;
  position: relative;
  z-index: 2;
  padding-left: 100px;
}

.page-hero-title,
.wineclub-title,
.hero .page-hero-title,
.hero .wineclub-title {
  font-family: Georgia, 'Cinzel', serif;
  font-size: 60px;
  font-weight: 800;
  color: #6f1023;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 16px 0;
  line-height: 1.08;
}

.page-hero-subtitle-wrap,
.wineclub-subtitle-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}

.page-hero-subtitle,
.wineclub-subtitle,
.hero .page-hero-subtitle {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 19px;
  font-weight: 700;
  color: #b89545;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 14px 0;
  text-align: center;
}

.page-hero-divider,
.wineclub-divider {
  width: 130px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #b89545 50%, transparent 100%);
  margin: 0 auto;
}

.page-hero-desc,
.wineclub-desc,
.hero .page-hero-desc,
.hero .wineclub-desc {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.65;
  color: #3a302a;
  max-width: 660px;
  margin: 0 0 36px 0;
}

.page-hero-badges,
.wineclub-badges {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.page-hero-badge-item,
.wineclub-badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 110px;
}

.page-hero-badge-circle,
.wineclub-badge-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #b89545;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vt-burgundy-dark, #4a0b16);
  margin-bottom: 14px;
  box-shadow: 0 6px 18px rgba(184, 149, 69, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-hero-badge-circle svg,
.wineclub-badge-circle svg {
  width: 38px;
  height: 38px;
}

.page-hero-badge-circle:hover,
.wineclub-badge-circle:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(184, 149, 69, 0.32);
}

.page-hero-badge-label,
.wineclub-badge-label {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.35;
  color: #3a302a;
  text-transform: uppercase;
}

@media (max-width: 1200px) {

  .page-hero-title,
  .wineclub-title,
  .hero .page-hero-title,
  .hero .wineclub-title {
    font-size: 64px;
  }

  .page-hero-subtitle,
  .wineclub-subtitle,
  .hero .page-hero-subtitle {
    font-size: 17px;
  }

  .page-hero-desc,
  .wineclub-desc,
  .hero .page-hero-desc {
    font-size: 20px;
  }

  .page-hero-badge-circle,
  .wineclub-badge-circle {
    width: 72px;
    height: 72px;
  }

  .page-hero-badge-circle svg,
  .wineclub-badge-circle svg {
    width: 34px;
    height: 34px;
  }

  .page-hero-badge-item,
  .wineclub-badge-item {
    width: 100px;
  }
}

@media (max-width: 1000px) {

  .page-hero-content,
  .wineclub-hero-content {
    padding-left: 50px;
  }

  .page-hero-title,
  .wineclub-title,
  .hero .page-hero-title,
  .hero .wineclub-title {
    font-size: 52px;
  }

  .page-hero-subtitle,
  .wineclub-subtitle,
  .hero .page-hero-subtitle {
    font-size: 15px;
  }

  .page-hero-desc,
  .wineclub-desc,
  .hero .page-hero-desc {
    font-size: 18px;
  }

  .page-hero-badges,
  .wineclub-badges {
    gap: 20px;
  }

  .page-hero-badge-item,
  .wineclub-badge-item {
    width: 90px;
  }

  .page-hero-badge-circle,
  .wineclub-badge-circle {
    width: 64px;
    height: 64px;
  }

  .page-hero-badge-circle svg,
  .wineclub-badge-circle svg {
    width: 30px;
    height: 30px;
  }

  .page-hero-badge-label,
  .wineclub-badge-label {
    font-size: 11px;
  }
}

@media (max-width: 650px) {

  .page-hero-content,
  .wineclub-hero-content {
    padding: 30px 20px;
  }

  .page-hero-title,
  .wineclub-title,
  .hero .page-hero-title,
  .hero .wineclub-title {
    font-size: 40px;
  }

  .page-hero-subtitle,
  .wineclub-subtitle,
  .hero .page-hero-subtitle {
    font-size: 13px;
    letter-spacing: 0.12em;
  }

  .page-hero-desc,
  .wineclub-desc,
  .hero .page-hero-desc {
    font-size: 16.5px;
  }

  .page-hero-badges,
  .wineclub-badges {
    flex-wrap: wrap;
    gap: 16px;
    justify-content: flex-start;
  }

  .page-hero-badge-item,
  .wineclub-badge-item {
    width: calc(50% - 12px);
    flex-direction: row;
    gap: 12px;
    text-align: left;
  }

  .page-hero-badge-circle,
  .wineclub-badge-circle {
    width: 58px;
    height: 58px;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .page-hero-badge-circle svg,
  .wineclub-badge-circle svg {
    width: 28px;
    height: 28px;
  }
}

/* .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 6px;
  background: var(--vt-burgundy-dark, #3d0711);
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.03em;
  border: 1px solid var(--vt-burgundy);
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
} */

.btn:hover,
.btn:active {
  background: var(--vt-burgundy-dark);
  border-color: var(--vt-burgundy-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.btn-secondary {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

.btn-secondary:hover,
.btn-secondary:active {
  background: var(--vt-ivory);
  border-color: var(--vt-ivory);
  color: var(--vt-burgundy-dark);
}

.btn.gold {
  background: var(--vt-gold);
  border-color: var(--vt-gold);
  color: #1b1008;
}

/* Responsive */
@media (max-width: 1000px) {
  .hero {
    aspect-ratio: auto;
    min-height: 500px;
    background-attachment: scroll;
  }

  .hero-content {
    padding-left: 50px;
  }

  .hero h1 {
    font-size: 48px;
  }

  .hero p {
    font-size: 16px;
  }

  .btn-row {
    gap: 12px;
  }
}

@media (max-width: 650px) {
  .hero {
    min-height: 420px;
    padding: 0;
  }

  .hero::before {
    display: none;
  }

  .hero-content::before {
    top: -20px;
    bottom: -20px;
    left: -15px;
    right: -15px;
    background: radial-gradient(ellipse 85% 75% at 50% 50%,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 252, 245, 0.88) 40%,
        rgba(255, 250, 240, 0.55) 70%,
        rgba(255, 255, 255, 0.18) 85%,
        transparent 100%);
    filter: blur(10px);
  }

  .hero-content {
    padding: 30px 20px;
  }

  .hero h1 {
    font-size: 36px;
    margin: 12px 0;
  }

  .hero p {
    font-size: 15px;
    line-height: 1.6;
  }

  .hero p br,
  .hero-content p br,
  .hero .desktop-br {
    display: none;
  }

  .hero .btn-row {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    align-items: stretch;
  }

  .hero .btn,
  .hero .btn-secondary {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 10px 8px;
    font-size: 10px;
    letter-spacing: 0.01em;
    width: calc(50% - 4px);
    white-space: normal;
    line-height: 1.3;
    text-align: center;
  }
}

@media (max-width: 526px) {
  .hero {
    min-height: auto;
    padding: 36px 0;
  }

  .hero-content {
    padding: 24px 16px;
    max-width: 100%;
  }

  .hero .eyebrow {
    font-size: 12px;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
  }

  .hero h1 {
    font-size: 28px;
    line-height: 1.15;
    margin: 10px 0;
  }

  .hero .page-hero-title,
  .hero .wineclub-title {
    font-size: 32px;
    line-height: 1.15;
  }

  .hero .page-hero-subtitle {
    font-size: 12px;
    letter-spacing: 0.1em;
  }

  .hero .page-hero-desc {
    font-size: 15px;
    line-height: 1.55;
  }

  .hero p {
    font-size: 14.5px;
    line-height: 1.6;
    margin: 14px 0 20px;
    word-break: normal;
    overflow-wrap: break-word;
  }

  .hero p br,
  .hero-content p br,
  .hero .desktop-br {
    display: none;
  }

  .hero .btn-row {
    gap: 8px;
    margin-top: 20px;
  }

  .hero .btn,
  .hero .btn-secondary {
    font-size: 10px;
    padding: 11px 8px;
    min-height: 44px;
  }
}

/*------------------------------------------------------------------
/*------------------------------------------------------------------
Trust Bar / .trust-bar
-------------------------------------------------------------------*/
.trust-bar {
  background: var(--vt-ivory, #faf8f5);
  border-bottom: 1px solid var(--vt-border, #e5e0d8);
  padding: 24px 0;
  width: 100%;
}

.trust-bar .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Flexbox distribution ensures balanced, clean columns */
.trust-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
}

.trust-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #4a3a32 !important;
  flex: 1 1 calc(25% - 20px) !important;
  /* 4 columns desktop */
  min-width: 200px !important;
  margin: 0 !important;
}

.trust-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.trust-content {
  display: flex;
  flex-direction: column;
}

.trust-item strong {
  display: block;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--vt-text, #2c221e);
  line-height: 1.2;
}

.trust-item p {
  margin: 2px 0 0 0 !important;
  font-size: 13px;
  line-height: 1.3;
  color: #6b584c;
}

/* -----------------------------------------
   TABLET & SMALL DESKTOP (Max-width: 991px)
----------------------------------------- */
@media (max-width: 991px) {
  .trust-item {
    flex: 1 1 calc(50% - 20px) !important;
    flex-direction: column;
    justify-content: center;
  }
}

/* -----------------------------------------
   MOBILE (Max-width: 576px)
----------------------------------------- */
@media (max-width: 576px) {
  .trust-bar {
    padding: 20px 0;
  }

  .trust-item {
    flex: 1 1 100% !important;
    flex-direction: column;
    justify-content: center;
  }

  .trust-grid {
    display: flex;
    justify-content: center;
  }
}

/*------------------------------------------------------------------
56. Section & Category Grid / .section
-------------------------------------------------------------------*/
.section {
  padding: 60px 0;
}

.section-title {
  text-align: center;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 40px;
  color: var(--vt-text);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.2;
}

/*------------------------------------------------------------------
56a. Category Grid / .category-grid
-------------------------------------------------------------------*/
.category-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Centers items, including the last row */
  gap: 20px;
}

.category-card {
  /* Set width so items stretch nicely like a grid */
  width: calc(20% - 16px);
  height: 240px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: #1b1716;
  background-size: cover;
  background-position: center;
  color: #fff;
  display: flex;
  align-items: flex-end;
  padding: 24px;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.category-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  z-index: 1;
}

.category-card h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  font-family: Georgia, serif;
}

/* Category Grid Responsive */
@media (max-width: 1200px) {
  .category-grid {
    gap: 18px;
  }

  .category-card {
    /* 4 columns */
    width: calc(25% - 14px);
  }
}

@media (max-width: 1000px) {
  .category-grid {
    gap: 18px;
  }

  .category-card {
    width: calc(50% - 9px);
  }
}

@media (max-width: 768px) {
  .category-grid {
    gap: 16px;
  }

  .category-card {
    /* 2 columns */
    width: calc(50% - 8px);
    height: 200px;
    padding: 18px;
  }

  .category-card h3 {
    font-size: 18px;
  }
}

@media (max-width: 650px) {
  .category-grid {
    gap: 14px;
  }

  .category-card {
    width: 100%;
    height: 180px;
    padding: 16px;
  }

  .category-card h3 {
    font-size: 16px;
  }

  .section-title {
    font-size: 26px;
    margin-bottom: 28px;
  }
}

/*------------------------------------------------------------------
57. Product Grid / .product-grid
-------------------------------------------------------------------*/
.product-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--vt-border, #eadfce);
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(27, 23, 22, 0.08);
  border-color: rgba(201, 150, 62, 0.4);
}

.product-image {
  position: relative;
  height: 220px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 20px 0;
}

.product-image-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.product-card-badge {
  position: absolute;
  top: 12px;
  left: 0;
  z-index: 2;
}

/* Wishlist heart */
.wishlist-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--vt-border, #eadfce);
  background: #fff;
  color: var(--vt-muted, #7a6f69);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.wishlist-btn:hover {
  color: var(--vt-burgundy, #6f1023);
  border-color: var(--vt-burgundy, #6f1023);
}

/* Body */
.product-body {
  padding: 14px 18px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.product-body h3 {
  font-family: Georgia, serif;
  font-size: 14.5px;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.3;
}

.product-body h3 a {
  color: var(--vt-text, #1b1716);
}

.subtext {
  font-size: 12px;
  color: var(--vt-muted, #7a6f69);
  margin-bottom: 8px;
}

.rating {
  color: var(--vt-gold, #c9963e);
  font-size: 12px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.rating-count {
  color: var(--vt-muted, #7a6f69);
  letter-spacing: normal;
  font-size: 12px;
  margin-left: 3px;
}

.price {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--vt-text, #1b1716);
  margin-bottom: 14px;
}

/* Add to Cart — outlined, not filled, permanently visible */
.product-grid .product-card .btn {
  margin-top: auto;
  width: 100%;
  min-height: 40px;
  background: transparent;
  border: 1px solid var(--vt-burgundy, #6f1023);
  color: var(--vt-burgundy, #6f1023);
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 14px;
  border-radius: 5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.product-grid .product-card .btn:hover {
  background: var(--vt-burgundy, #6f1023);
  color: #fff;
}

/* Best Sellers section title (unchanged from previous pass) */
.bestsellers-title {
  text-align: center;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vt-text, #1b1716);
  margin: 0 0 40px;
}

.bestsellers-section .product-grid {
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.bestsellers-section .viewall-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  border-radius: 60px;
  background: var(--vt-champagne, #f3eadc);
  border: 1px solid rgba(201, 150, 62, 0.3);
  color: var(--vt-burgundy, #6f1023);
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.25s ease;
}

.bestsellers-section .viewall-btn:hover {
  background: var(--vt-burgundy, #6f1023);
  border-color: var(--vt-burgundy, #6f1023);
  color: #fff;
}

/* Responsive */
@media (max-width: 1200px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .bestsellers-section .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 995px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .product-image {
    height: 190px;
  }
}

@media (max-width: 650px) {
  .bestsellers-section .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .bestsellers-title {
    font-size: 1.15rem;
    margin-bottom: 26px;
  }
}

@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

/*------------------------------------------------------------------
NewsLetter
---------------------------------------------------------------------*/
.wine-club-banner {
  background: linear-gradient(135deg, var(--vt-burgundy-dark), var(--vt-burgundy));
  color: white;
  border-radius: 12px;
  padding: 44px;
  text-align: center
}

.wine-club-banner .gold {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding: 13px 18px;
  border: 1px solid var(--vt-gold);
  border-radius: 5px;
  background: var(--vt-gold);
  color: #1b1008;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease,
    border-color 0.2s ease;
}

.viewall-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 34px;
  border-radius: 4px;
  background: var(--vt-champagne, #f3eadc);
  border: 1px solid rgba(201, 150, 62, 0.35);
  color: var(--vt-burgundy, #6f1023);
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.viewall-btn:hover {
  background: var(--vt-burgundy, #6f1023);
  border-color: var(--vt-burgundy, #6f1023);
  color: #fff;
}

/*------------------------------------------------------------------
58. Shopping Cart / .shopping-cart
-------------------------------------------------------------------*/
.shopping-cart {
  overflow: hidden;
  padding-top: 80px;
  padding-bottom: 50px;
}

.shopping-cart .table-responsive {
  margin: 0 0 43px;
}

.shopping-cart.left-sidebar .cart-table th,
.shopping-cart.left-sidebar .cart-table td {
  width: 128px;
}

.shopping-cart.left-sidebar .cart-table th:nth-child(2),
.shopping-cart.left-sidebar .cart-table td:nth-child(2) {
  width: 238px;
}

.shopping-cart.left-sidebar .cart-table th:nth-child(3),
.shopping-cart.left-sidebar .cart-table td:nth-child(3) {
  width: 115px;
}

.shopping-cart.left-sidebar .cart-table th:nth-child(4),
.shopping-cart.left-sidebar .cart-table td:nth-child(4) {
  width: 160px;
}

.shopping-cart.left-sidebar .cart-table th:nth-child(5),
.shopping-cart.left-sidebar .cart-table td:nth-child(5) {
  width: 129px;
}

.shopping-cart.left-sidebar .cart-table th {
  padding: 0 0 20px 19px;
  letter-spacing: 3px;
  line-height: 17px;
}

.shopping-cart.left-sidebar .cart-table th.wrap {
  padding: 3px 0 16px 10px;
}

.shopping-cart.left-sidebar .cart-table .price {
  font-size: 14px;
  letter-spacing: 2px;
}

.shopping-cart.left-sidebar .cart-table .jcf-number .jcf-btn-inc:before,
.shopping-cart.left-sidebar .cart-table .jcf-number .jcf-btn-dec:before {
  font-size: 14px;
  line-height: 16px;
}

.shopping-cart.left-sidebar .cart-table .color-code {
  margin: 0 60px 0 0;
}

/*------------------------------------------------------------------
58. Cart Table / .cart-table
-------------------------------------------------------------------*/
.cart-table {
  margin: 0 0 61px;
}

.cart-table thead tr {
  overflow: hidden;
  /* display: block; */
  border-bottom: 2px solid #363636;
}

.cart-table tbody tr {
  border-bottom: 1px solid #e5e5e5;
}

.cart-table th,
.cart-table td {
  width: 185px;
}

.cart-table th:nth-child(2),
.cart-table td:nth-child(2) {
  width: 408px;
}

.cart-table th:nth-child(3),
.cart-table td:nth-child(3) {
  width: 168px;
}

.cart-table th:nth-child(4),
.cart-table td:nth-child(4) {
  width: 202px;
}

.cart-table th:nth-child(5),
.cart-table td:nth-child(5) {
  width: 207px;
}

.cart-table th {
  /* padding: 7px 0 23px 20px; */
  /* float: left; */
  letter-spacing: 2px;
}

.cart-table th.wrap {
  padding: 7px 0 15px 22px;
}

/* .cart-table td {
  display: inline-block;
  vertical-align: middle;
  padding: 20px 0;
  margin: 0 0 0 -4px;
} */

.cart-table td:first-child {
  margin: 0;
}

.cart-table .fa-close {
  font-size: 16px;
  color: #363636;
  width: 29px;
  height: 29px;
  border: 1px solid #e5e5e5;
  padding-top: 6px;
  margin: -3px 0 0;
  float: right;
}

.cart-table .fa-close:hover {
  color: #fff;
}

.cart-table .product-img {
  width: 100px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  position: relative;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.cart-top-space {
  padding-top: 0 !important;
}

.cart-table .product-img img {
  display: inline-block;
  vertical-align: middle;
}

.cart-table .color-code {
  position: relative;
  letter-spacing: 3px;
  margin: 0 108px 0 0;
}

.cart-table .color-code:before {
  position: absolute;
  content: "";
  z-index: -1;
  left: auto;
  top: 6px;
  bottom: auto;
  right: -26px;
  width: 13px;
  height: 13px;
  background: yellow;
  border-radius: 50%;
}

.cart-table .size-code {
  letter-spacing: 3px;
}

.cart-table .size-code a {
  width: 30px;
  height: 30px;
  color: #fff;
  background: #a53e4c;
  display: inline-block;
  vertical-align: middle;
  border-radius: 100%;
  padding: 3px 0 0;
}

.cart-table h3 {
  font-size: 16px;
  line-height: 18px;
  color: #363636;
  letter-spacing: 3px;
  margin: 0 0 6px;
}

.cart-table h3 a {
  color: #363636;
}

.cart-table .content-holder .content {
  overflow: hidden;
}

.cart-table .jcf-number {
  overflow: hidden;
  height: 50px;
  float: left;
  margin: 0 45px 0 0;
}

.cart-table .jcf-number input {
  font-size: 13px;
  line-height: 50px;
  text-align: center;
  padding: 0;
  width: 133px;
  border-color: #e5e5e5;
}

.cart-table .jcf-number .jcf-btn-inc,
.cart-table .jcf-number .jcf-btn-dec {
  background: none;
  top: 15px;
  font-size: 18px;
  line-height: 18px;
  text-indent: -9999px;
  width: 10px;
}

.cart-table .jcf-number .jcf-btn-inc:before,
.cart-table .jcf-number .jcf-btn-dec:before {
  top: 0;
  left: 0;
  background: none;
  border: none;
  font-family: 'FontAwesome';
  margin: 0;
  text-indent: 0;
}

.cart-table .jcf-number .jcf-btn-dec {
  left: 15px;
}

.cart-table .jcf-number .jcf-btn-dec:before {
  content: "\f104";
  display: block;
}

.cart-table .jcf-number .jcf-btn-inc {
  right: 16px;
}

.cart-table .jcf-number .jcf-btn-inc:before {
  content: "\f105";
  display: block;
}

.cart-table .price {
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 4px;
}

/*------------------------------------------------------------------
59. Cart Widget / .cart-widget
-------------------------------------------------------------------*/
.cart-widget {
  margin: 0 0 30px;
  color: #363636;
}

.cart-widget .heading3 {
  color: #363636;
  padding-bottom: 26px;
  border-bottom: 2px solid #898989;
  margin: 0 0 21px;
}

.cart-widget p {
  margin: 0 0 24px;
}

.cart-widget .shipping-form .form-group {
  margin: 0 0 19px;
  overflow: hidden;
}

.cart-widget .shipping-form label {
  padding-top: 8px;
}

.cart-widget .shipping-form .jcf-select {
  width: 199px;
  height: 40px;
  border-color: #e5e5e5;
  margin: 0;
  float: right;
}

.cart-widget .shipping-form .jcf-select .jcf-select-text {
  margin: 8px 35px 0 27px;
  color: #898989;
}

.cart-widget .shipping-form .jcf-select .jcf-select-opener {
  background: none;
}

.cart-widget .shipping-form .jcf-select .jcf-select-opener:after {
  position: absolute;
  top: 50%;
  content: "\f078";
  z-index: 1;
  font-family: FontAwesome;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #898989;
  right: 13px;
  font-size: 11px;
}

.cart-widget .shipping-form .btn-primary {
  margin: 21px 0 0;
}

.cart-widget .subscribe-form {
  overflow: hidden;
}

.cart-widget .subscribe-form .form-control {
  width: 201px;
  border: none;
  border-bottom: 1px solid #e5e5e5;
  background: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  float: left;
  margin: 0 27px 0 0;
  height: auto;
  padding: 8px 0;
  color: #898989;
}

.cart-widget .subscribe-form .btn-primary {
  padding: 11px 26px;
}

.cart-widget .cart-totel {
  margin: 0 0 17px;
  color: #252525;
  padding: 3px 0 0;
  border-bottom: 1px solid #e5e5e5;
}

.cart-widget .cart-totel li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 51px;
  text-align: left;
  margin: 0 0 27px;
}

.cart-widget .cart-totel .heading2 {
  margin: 0;
  line-height: 24px;
  letter-spacing: 4px;
}

.cart-widget .cart-totel .product-name {
  flex: 1;
  margin-right: 10px;
  /* Add some space between the name and the price */
  word-break: break-word;
  /* Allow long words to break and wrap */
}

.cart-widget .txt {
  font-size: 12px;
  line-height: 22px;
  color: #707070;
  display: block;
  margin: 0 0 34px;
}

/*------------------------------------------------------------------
60. Checout Sec / .checout-sec
-------------------------------------------------------------------*/
.checout-sec {
  padding-top: 90px;
  padding-bottom: 90px;
}

.checout-sec .heading3 {
  padding: 0 0 26px;
  margin: 0 0 29px;
  border-bottom: 2px solid #363636;
}

.checout-sec .cart-totel {
  border: none;
}

.checout-sec .cart-totel li {
  padding: 0px 0 30px;
  margin: 0 0 29px;
  border-bottom: 1px solid #e5e5e5;
}

.checout-sec .cart-totel li.bdr-b {
  border-color: #363636;
}

.checout-sec .currency-form {
  color: #363636;
  overflow: hidden;
  margin: 0 0 13px;
}

.checout-sec .currency-form input[type="radio"] {
  position: fixed;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: -1;
}

.checout-sec .currency-form label {
  display: block;
  margin: 0 0 13px;
}

.checout-sec .currency-form label {
  padding-right: 5px;
}

.checout-sec .currency-form .fake-input {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 1px solid #363636;
  vertical-align: middle;
  position: relative;
  margin: -2px 10px 0 0;
}

.checout-sec .currency-form input[type=radio]+.fake-input {
  border-radius: 100%;
}

.checout-sec .currency-form input[type="radio"]+.fake-input:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #363636;
  border-radius: 100%;
  opacity: 0;
}

.checout-sec .currency-form input[type="radio"]:checked+.fake-input:before {
  opacity: 1;
}

.checout-sec .currency-form input[type="radio"]:checked~.fake-label {
  font-weight: bold;
  color: #f00;
}

.checout-sec .currency-form .btn-primary {
  width: 100%;
}

/*------------------------------------------------------------------
61. Checkout Form / .checkout-form
-------------------------------------------------------------------*/
.checkout-form {
  overflow: hidden;
}

.checkout-form .form-group {
  overflow: hidden;
  margin: 0 0 20px;
}

.checkout-form .form-group.wrap {
  margin: 0 0 4px;
}

.checkout-form .form-group.mar {
  padding-top: 0;
}

.checkout-form .form-group.wrap2 label {
  padding-top: 0;
  width: 100%;
}

.checkout-form label {
  width: 200px;
  float: left;
  padding-top: 16px;
  margin: 0;
  color: #363636;
}

.checkout-form .form-control {
  width: 570px;
  height: auto;
  float: left;
  background: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  color: #898989;
  padding: 0 0 4px;
  border-bottom: 1px solid #e5e5e5;
}

.checkout-form .form-control::-webkit-input-placeholder {
  color: #898989;
}

.checkout-form .form-control::-moz-placeholder {
  opacity: 1;
  color: #898989;
}

.checkout-form .form-control:-moz-placeholder {
  color: #898989;
}

.checkout-form .form-control:-ms-input-placeholder {
  color: #898989;
}

.checkout-form .form-control.placeholder {
  color: #898989;
}

.checkout-form .jcf-select {
  width: 570px;
  height: 29px;
  float: left;
  color: #898989;
  border: none;
  border-bottom: 1px solid #e5e5e5;
}

.checkout-form .jcf-select .jcf-select-text {
  margin: 0;
}

.checkout-form .jcf-select .jcf-select-opener {
  background: none;
}

.checkout-form .jcf-select .jcf-select-opener:after {
  position: absolute;
  content: "";
  z-index: -1;
  left: auto;
  top: 50%;
  bottom: auto;
  right: 7px;
  z-index: 1;
  content: "\f078";
  font-family: FontAwesome;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 10px;
}

.checkout-form .wrap {
  padding-top: 21px;
}

.checkout-form .wrap input {
  margin: 0 0 18px;
}

.checkout-form .wrap span {
  padding-left: 25px;
}

.checkout-form .wrap p {
  margin: 0;
}

.checkout-form textarea {
  width: 100%;
  max-height: 44px;
  resize: none;
}

/*------------------------------------------------------------------
62. Loader Holder / .loader-holder
-------------------------------------------------------------------*/
.loader-holder {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  position: fixed;
  background-color: rgba(255, 255, 255, 0.9);
}

.loader-holder .block {
  top: 50%;
  left: 50%;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/*------------------------------------------------------------------
63. Back Top / #back-top
-------------------------------------------------------------------*/
.back-to-top {
  font-size: 16px;
  line-height: 1;
  position: fixed !important;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #a53e4c;
  cursor: pointer;
  border: 1px solid #a53e4c;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(10px);
  -ms-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
  -o-transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
  border-radius: 50%;
}

#back-top.back-to-top.visible {
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: #fff;
  color: #a53e4c;
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 800px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 40px;
    height: 40px;
  }
}

/*------------------------------------------------------------------
64. Footer / #footer
-------------------------------------------------------------------*/
/* #footer {
  overflow: hidden;
}

#footer.v2 {
  overflow: hidden;
}

#footer.v2 .heading3 {
  color: #898989;
}

#footer.v2 .tags-list a {
  border-color: #e5e5e5;
}

#footer.v2 .footer-nav {
  border-color: #e5e5e5;
}

#footer.v2 .footer-aside {
  padding: 17px 30px 19px;
}

#footer.v3 {
  overflow: hidden;
}

#footer.v3 .heading3 {
  color: #898989;
}

#footer.v3 .tags-list a {
  border-color: #e5e5e5;
}

#footer.v3 .footer-nav {
  border-color: #e5e5e5;
}

#footer .footer-aside {
  padding: 17px 75px 19px;
}

#footer .mar-bt {
  margin-bottom: 43px;
}

#footer .social-network {
  float: left;
  padding: 6px 0 0;
}

#footer .payment-img {
  float: right;
}

#footer .footer-holder {
  overflow: hidden;
  padding: 0px 0 20px;
}

/* #footer .logo {
  margin: -10px 0 20px;
} */

/* #footer .heading3 {
  color: #3f0000;
  margin: 0 0 31px;
}

#footer .contact-list {
  line-height: 28px;
  color: #898989;
  overflow: hidden;
  margin: 0;
}

#footer .contact-list li {
  display: block;
  margin: 0 0 -2px;
}

#footer .contact-list a {
  color: #898989;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

#footer .f-nav {
  line-height: 16px;
  color: #898989;
  overflow: hidden;
  margin: 0;
}

#footer .f-nav li {
  display: block;
  margin: 0 0 20px;
}

#footer .f-nav a {
  color: #898989;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

#footer .tags-list {
  font-size: 12px;
  line-height: 14px;
  color: #898989;
  overflow: hidden;
  margin: 0;
  letter-spacing: 2px;
}

#footer .tags-list li {
  float: left;
  margin: 0 7px 10px 0;
}

#footer .tags-list a {
  color: #898989;
  padding: 7px 24px;
  display: block;
  border: 1px solid #292929;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

#footer .tags-list a:hover {
  color: #fff;
}

#footer .footer-nav {
  font-size: 12px;
  line-height: 14px;
  color: #898989;
  overflow: hidden;
  margin: 0 0 20px;
  padding: 0 0 20px;
  letter-spacing: 2px;
  border-bottom: 1px solid #292929;
}

#footer .footer-nav li {
  display: inline-block;
  vertical-align: middle;
  padding: 0 27px 0 22px;
  border-left: 1px solid #292929;
}

#footer .footer-nav li:first-child {
  border-left: 0;
}

#footer .footer-nav a {
  color: #898989;
  display: block;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

#footer .copyright {
  font-size: 12px;
  line-height: 14px;
  color: #898989;
  letter-spacing: 2px;
}

#footer .copyright p {
  margin: 0;
}

#footer .copyright a {
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

#footer .copyright a:hover {
  color: #fff;
} */

/* product  */

.product-name {
  font-size: 14px;
  line-height: 18px;
  color: #898989;
  font-weight: 400;
  margin: 0 0 10px;
  letter-spacing: 1px;
}

.product-name a {
  color: #898989;
  -webkit-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}


/* shop page  */
.listing-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 30px
}

.filters {
  border: 1px solid var(--vt-border);
  border-radius: 10px;
  padding: 22px;
  background: #fffdf8
}

.filters label {
  display: block;
  margin: 10px 0;
  color: #4e3c32
}

.filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.filters-header h3 {
  margin: 0
}

.filters-reset {
  font-size: 13px;
  font-weight: 700;
  color: var(--vt-burgundy);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap
}

.filters-reset:hover {
  color: var(--vt-burgundy-dark)
}

.product-image {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.product-image-img {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.product-card {
  position: relative;
}

.product-card-badge {
  position: absolute;
  top: 14px;
  left: 0;
  z-index: 2;
}

/* number_format prices can wrap oddly inside the tight card padding */
.product-body .price {
  margin-bottom: 10px;
}

.product-body h3 a {
  color: #1b1716;
}

/* 1. Style the JCF Custom Box & Add Dropdown Arrow */
.listing-layout .jcf-select {
  width: 200px !important;
  height: 32px !important;
  margin: 4px 0;
  border: 1px solid var(--vt-border);
  border-radius: 6px;
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  position: relative;
  background-color: #ffffff;

  /* Custom SVG Arrow */
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px auto;
}

/* 2. Style the Text Inside JCF */
.listing-layout .jcf-select .jcf-select-text {
  font-size: 12px !important;
  line-height: 30px !important;
  padding-left: 8px !important;
  padding-right: 25px !important;
  /* Space so text doesn't overlap the arrow */
  width: 100%;
  box-sizing: border-box;
}

/* 3. Hide default JCF arrow element to avoid duplicate icon conflicts */
.listing-layout .jcf-select .jcf-select-opener {
  display: none !important;
}

/* 4. Keep native select transparent and clickable */
.listing-layout select.input {
  opacity: 0 !important;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  z-index: 2;
  cursor: pointer;
}


.wine-club-banner h2 {
  color: #fff;
}



/* Nav bar  */
header {
  background: #fffdf8;
  border-bottom: 1px solid var(--vt-border);
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: 0;
  padding-bottom: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.header-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 18px 0;
  padding-left: 40px;
  padding-right: 40px;
}

header .container {
  padding: 0 4px;
}

/* override the old theme's .logo{width:224px;margin:0 auto} which was
   centering/sizing the logo wrapper and causing the oversized look */
.logo {
  width: auto;
  margin: 0;
}

.logo img {
  height: 60px;
  max-width: 190px;
  object-fit: contain;
  display: block;
}

.search {
  width: auto;
  max-width: 420px;
  flex: 0 1 380px;
  display: flex;
  border: 1px solid var(--vt-border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  flex-shrink: 1;
}

.search input {
  border: 0;
  outline: 0;
  padding: 13px 14px;
  flex: 1;
  min-width: 0;
}

.search button {
  border: 0;
  background: #fff;
  color: var(--vt-burgundy);
  padding: 0 15px;
  font-size: 16px;
  cursor: pointer;
}

.icons {
  display: flex;
  gap: 20px;
  align-items: center;
  font-size: 20px;
  flex-shrink: 0;

}

.icons a {
  color: var(--vt-text);
}

.cart-dot {
  background: var(--vt-burgundy);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  padding: 2px 6px;
  position: relative;
  left: -10px;
  top: -10px;
}

.icons .logout-link {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vt-burgundy);
  border: 1px solid var(--vt-burgundy);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.icons .logout-link:hover {
  background: var(--vt-burgundy);
  color: #fff;
}

/* Nav links live in the same row as the logo/search/icons.
   flex:1 lets the nav fill the middle and center its links. */
#nav.nav {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 2vw, 32px);
  border-top: none;
  padding: 0;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  line-height: normal;
}

#nav.nav a {
  position: relative;
  color: var(--vt-text);
  padding: 0 0 8px;
  letter-spacing: 0;
  font-family: Inter, system-ui;
  font-weight: 500;
  text-transform: capitalize;
  font-size: 15px;
}

#nav.nav a.active,
#nav.nav a:hover {
  color: var(--vt-burgundy);
}

#nav.nav a.active:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--vt-burgundy);
  border-radius: 2px;
}

@media (max-width: 1205px) {
  .nav-toggle {
    display: flex;
  }

  #nav.nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    background: #fff;
    border-top: 1px solid var(--vt-border);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    padding: 6px 0;
    z-index: 30;

    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease;
  }

  #nav.nav.nav-open {
    max-height: 500px;
    opacity: 1;
    visibility: visible;
  }

  #nav.nav a {
    position: relative;
    width: 100%;
    text-align: center;
    padding: 13px 4px;
    border-bottom: 1px solid #f1e7da;
    font-size: 13px;
    color: var(--vt-text);
  }

  #nav.nav a:last-child {
    border-bottom: none;
  }

  #nav.nav a.active,
  #nav.nav a:hover {
    color: var(--vt-burgundy);
  }

  #nav.nav a.active:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 24px;
    height: 2px;
    background: var(--vt-burgundy);
    border-radius: 2px;
    transform: translateX(-50%);
  }
}


@media (max-width: 1510px) {
  #nav.nav a {
    font-size: 13px;
    padding: 0 0 6px;
  }
}

.hero .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 5px;
  background: var(--vt-burgundy);
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .03em;
  border: 1px solid var(--vt-burgundy);
  text-decoration: none;
}


/* Product Page  */
/* Container Base Styling */
.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 28px;
}

.product-detail-section {
  padding: 40px 0 80px;
}

.product-breadcrumb {
  margin-bottom: 24px;
}

.product-breadcrumb a {
  color: var(--vt-muted, #7a6f69);
  text-decoration: none;
  font-size: 14px;
}

/* 2-Column Grid Layout for Desktop */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* Gallery Styling */
.gallery-column {
  min-width: 0;
}

.gallery-column .gallery-main {
  background: #fbf7ef;
  border: 1px solid #eadfce;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  overflow: hidden;
}

.gallery-column .gallery-main .slide+.slide {
  margin-top: 20px;
}

.gallery-column img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Product Info Styling */
.info-column {
  min-width: 0;
}

.info-column .eyebrow {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--vt-gold, #c9963e);
  margin-bottom: 8px;
}

.info-column .product-title {
  font-size: 32px;
  margin: 0 0 16px;
  color: var(--vt-burgundy-dark, #3d0711);
  font-family: Georgia, serif;
}

.info-column .price-tag {
  font-size: 28px;
  font-weight: 700;
  color: var(--vt-burgundy, #6f1023);
  margin-bottom: 24px;
}

/* Specs List */
.spec-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}

.spec-list li {
  padding: 8px 0;
  border-bottom: 1px dashed var(--vt-border, #eadfce);
  font-size: 14px;
  color: #4a403a;
}

.spec-list li span {
  font-weight: 600;
  color: #1b1716;
}

/* Cart Form */
.cart-form {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
}

.qty-input {
  width: 80px;
  padding: 12px;
  border: 1px solid var(--vt-border, #eadfce);
  border-radius: 4px;
  text-align: center;
  font-size: 16px;
}

/* Add to Cart Form Styling */
.cart-form {
  display: flex;
  align-items: center;
  gap: 40px;
  /* Adjust gap distance as needed */
}

.cart-form .btn-add-cart {
  background-color: var(--vt-burgundy);
  border-color: var(--vt-burgundy-dark, #3d0711);
  color: #fff;
}

.btn-add-cart {
  flex: 1;
  background: var(--vt-burgundy-dark, #3d0711);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.2s ease;
}

/* Shorten the Add to Cart button width and padding on desktop */
@media (min-width: 897px) {

  .btn-add-cart,
  .shop-detail .btn {
    width: auto !important;
    /* Prevents the button from expanding to 100% width */
    max-width: max-content;
    /* Keeps width fitted to the text */
    display: inline-flex;
    padding: 10px 20px;
    /* Adjust left/right padding to make it shorter */
  }
}

/* Accordions */
.product-accordions {
  border-top: 1px solid var(--vt-border, #eadfce);
}

/* Remove left and right borders on accordions */
.accordion-item,
.shop-detail .accordion li {
  border-top: 1px solid #e5e5e5;
  /* Keep top border */
  border-bottom: 1px solid #e5e5e5;
  /* Keep bottom border */
  border-left: none !important;
  /* Remove left border */
  border-right: none !important;
  /* Remove right border */
  border-radius: 0;
  /* Remove border radius if applicable */
}

.accordion-header {
  padding: 16px 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
}

.accordion-header::-webkit-details-marker {
  display: none;
}

.accordion-content {
  padding-bottom: 16px;
  color: var(--vt-muted, #7a6f69);
  font-size: 14px;
  line-height: 1.6;
}

/* Responsive Styles for Small Screens (Mobile / Tablet) */
@media (max-width: 768px) {
  .product-detail {
    grid-template-columns: 1fr;
    /* Switch to single column */
    gap: 24px;
  }

  .gallery-column {
    order: 1;
    /* Gallery on top */
  }

  .info-column {
    order: 2;
    /* Product details on bottom */
  }
}








@media (min-width: 1206px) and (max-width: 1449px) {
  .search {
    max-width: 320px;
    flex: 0 1 280px;
  }
}

@media (max-width: 359px) {
  .search {
    display: none;
  }
}

@media (min-width: 360px) and (max-width: 650px) {
  .header-main {
    padding-left: 20px;
    padding-right: 20px;
    gap: 10px;
  }

  .logo img {
    height: 50px;
    max-width: 160px;
  }

  .search {
    max-width: 100%;
    flex: 0 1 100%;
    width: 100%;
  }

  .icons {
    width: 100%;
  }
}

@media (max-width: 650px) {
  .header-main {
    flex-direction: column;
    gap: 14px;
  }
}

@media (max-width: 800px) {
  .listing-layout {
    grid-template-columns: 1fr;
  }

  .sort-select {
    width: 100%;
  }
}

html {
  height: 100%;
  overflow-x: hidden;
}

body {
  height: 100%;
  overflow-y: visible;
}

#wrapper {
  position: relative;
  overflow: visible;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#main {
  flex: 1;
}


/* Contact US */
.contact-section {
  padding: 20px 0;
}

.contact-section h1 {
  margin: 0 0 18px;
  font-family: Georgia, serif;
  font-size: 32px;
  line-height: 1.2;
}

.contact-section .form-card {
  background: #fff;
  border: 1px solid var(--vt-border);
  border-radius: 10px;
  padding: 24px;
}

.contact-section .input {
  display: block;
  width: 100%;
  padding: 13px;
  margin: 8px 0 16px;
  border: 1px solid var(--vt-border);
  border-radius: 6px;
  background: #fff;
  color: var(--vt-text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}

.contact-section .input:focus {
  border-color: var(--vt-gold);
}

.contact-section textarea.input {
  min-height: 100px;
  resize: vertical;
}

.contact-section .gdpr-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 8px 0 20px;
  color: var(--vt-muted);
  font-size: 13px;
  line-height: 1.5;
}

.contact-section .gdpr-field input {
  width: auto;
  margin: 3px 0 0;
  flex-shrink: 0;
}

.contact-section .gdpr-field label {
  margin: 0;
}

.contact-section .gdpr-field a {
  color: var(--vt-burgundy);
  text-decoration: underline;
}

.contact-section .btn {
  cursor: pointer;
  background: var(--vt-burgundy);
}


/* Wine Club */
.club-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 30px
}

.plan {
  background: #fff;
  color: var(--vt-text);
  border: 1px solid var(--vt-border);
  border-radius: 10px;
  padding: 30px;
  text-align: center;

  /* Hover animation */
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.plan:hover {
  transform: translateY(-8px);
  /* border-color: var(--vt-gold); */
  box-shadow: 0 12px 30px rgba(71, 63, 60, 0.15);
}

.plan.featured {
  border: 2px solid var(--vt-gold);
  transform: translateY(-10px)
}

.plan.featured:hover {
  transform: translateY(-12px);
  border-color: var(--vt-gold);
  box-shadow: 0 20px 45px rgba(201, 150, 62, 0.25);
}

.club-section {
  margin-top: 50px;
}

.club-section .btn {

  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding: 13px 18px;
  border: 1px solid var(--vt-burgundy, #6f1023);
  border-radius: 5px;
  background: var(--vt-burgundy, #6f1023);
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease,
    border-color 0.2s ease;
}

.club-section .gold {
  background: var(--vt-gold);
  border-color: var(--vt-gold);
  color: #1b1008
}


@media(max-width:1000px) {
  .club-plans {
    grid-template-columns: 1fr
  }

  ;
}


/* =========================================================
VINO-TASTING CART PAGE
UI ONLY - DOES NOT CHANGE CART LOGIC
========================================================= */


/* ---------------------------------------------------------
CART HEADER
--------------------------------------------------------- */

.vt-cart-header {
  background: #fff;
  padding: 55px 0 35px;
}

.vt-cart-header-inner {
  text-align: center;
}

.vt-cart-title {
  margin: 0;
  color: var(--vt-text, #1b1716);
  font-family: Georgia, serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vt-cart-breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  list-style: none;
  padding: 0;
  margin: 25px 0 0;

  color: var(--vt-text, #1b1716);
  font-size: 13px;
  letter-spacing: 0.18em;
}

.vt-cart-breadcrumbs li {
  margin: 0;
}

.vt-cart-breadcrumbs a {
  color: var(--vt-text, #1b1716);
  text-decoration: none;
}

.vt-cart-breadcrumbs a:hover {
  color: var(--vt-burgundy, #6f1023);
}


/* ---------------------------------------------------------
CART SECTION
--------------------------------------------------------- */

.vt-cart-section {
  padding: 25px 0 70px;
  background: #fff;
}

.vt-cart-section .container {
  max-width: 1280px;
}


/* ---------------------------------------------------------
MAIN CART LAYOUT
--------------------------------------------------------- */

.vt-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: start;
}


/* ---------------------------------------------------------
   CART TABLE
--------------------------------------------------------- */

.vt-cart-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.vt-cart-table {
  width: 100%;
  min-width: 760px;

  border-collapse: collapse;
  border-spacing: 0;

  background: #fff;
}


/* Table Header */

.vt-cart-table thead {
  border-bottom: 1px solid #d9d2ca;
}

.vt-cart-table th {
  padding: 0 16px 14px;

  color: var(--vt-text, #1b1716);

  font-family: Inter, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.vt-cart-table th:first-child {
  padding-left: 0;
}

.vt-cart-table th:last-child {
  padding-right: 0;
}


/* Table Rows */

.vt-cart-table tbody tr {
  border-bottom: 1px solid #e5dfd8;
}

.vt-cart-table td {
  padding: 14px 16px;
  vertical-align: middle;
}

.vt-cart-table td:first-child {
  padding-left: 0;
}

.vt-cart-table td:last-child {
  padding-right: 0;
}


/* ---------------------------------------------------------
   PRODUCT IMAGE
--------------------------------------------------------- */

.vt-cart-image-cell {
  width: 90px;
}

.vt-cart-product-image {
  width: 88px;
  height: 88px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #e2ddd6;
  background: #fff;
  overflow: hidden;
}

.vt-cart-product-image img {
  width: 100%;
  height: 100%;

  object-fit: contain;
  display: block;
}


/* ---------------------------------------------------------
   PRODUCT NAME
--------------------------------------------------------- */

.vt-cart-product-cell {
  min-width: 260px;
}

.vt-cart-product-name {
  display: inline-block;

  color: var(--vt-text, #1b1716);

  font-family: Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;

  letter-spacing: 0.08em;

  text-decoration: none;
}

.vt-cart-product-name:hover {
  color: var(--vt-burgundy, #6f1023);
}


/* ---------------------------------------------------------
   PRICE
--------------------------------------------------------- */

.vt-cart-price,
.vt-cart-total {
  color: var(--vt-burgundy, #6f1023);

  font-family: Georgia, serif;
  font-size: 16px;
  font-weight: 700;

  white-space: nowrap;
}

.vt-cart-price {
  min-width: 120px;
}

.vt-cart-total {
  min-width: 120px;
}


/* =========================================================
   CART QUANTITY
========================================================= */

.vt-cart-quantity-cell {
  min-width: 100px;
}

.vt-quantity-input {
  width: 70px;
  height: 40px;
  padding: 4px 6px;
  border: 1px solid #ddd8d2;
  background: #fff;
  color: var(--vt-text, #1b1716);
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  text-align: center;
  border-radius: 4px;
}


/* ---------------------------------------------------------
   REMOVE BUTTON
--------------------------------------------------------- */

.vt-cart-remove-cell {
  width: 45px;
  text-align: right;
}

.vt-cart-remove {
  width: 26px;
  height: 26px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 1px solid #ddd8d2;
  background: #f5f3f1;

  color: #2d2927;

  font-size: 18px;
  font-weight: 700;

  line-height: 1;

  cursor: pointer;
}

.vt-cart-remove:hover {
  border-color: var(--vt-burgundy, #6f1023);
  background: var(--vt-burgundy, #6f1023);
  color: #fff;
}


/* ---------------------------------------------------------
   EMPTY CART
--------------------------------------------------------- */

.vt-cart-empty {
  padding: 45px 20px !important;

  color: var(--vt-muted, #7a6f69);

  font-size: 15px;

  text-align: center !important;
}


/* ---------------------------------------------------------
   CART SUMMARY
--------------------------------------------------------- */

.vt-cart-summary {
  padding: 28px 22px 24px;

  border: 1px solid var(--vt-border, #eadfce);
  border-radius: 10px;

  background: #fff;
}

.vt-cart-summary-title {
  margin: 0 0 22px;

  color: var(--vt-text, #1b1716);

  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 700;
}


/* ---------------------------------------------------------
   SUMMARY ROWS
--------------------------------------------------------- */

.vt-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 16px;

  color: var(--vt-text, #1b1716);

  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
}

.vt-summary-row strong {
  color: var(--vt-text, #1b1716);
  font-weight: 500;
  white-space: nowrap;
}


/* ---------------------------------------------------------
   TOTAL
--------------------------------------------------------- */

.vt-summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-top: 12px;
  padding-top: 5px;

  color: var(--vt-text, #1b1716);

  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 700;
}

.vt-summary-total strong {
  color: var(--vt-text, #1b1716);
  white-space: nowrap;
}


/* ---------------------------------------------------------
   CHECKOUT BUTTON
--------------------------------------------------------- */

.vt-checkout-btn {
  width: 100%;

  min-height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 20px;
  padding: 13px 18px;

  border: 1px solid var(--vt-burgundy, #6f1023);
  border-radius: 5px;

  background: var(--vt-burgundy, #6f1023);
  color: #fff;

  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;

  letter-spacing: 0.03em;
  text-transform: uppercase;

  text-decoration: none;

  cursor: pointer;

  transition: background 0.2s ease,
    border-color 0.2s ease;
}

.vt-checkout-btn:hover {
  background: var(--vt-burgundy-dark, #3d0711);
  border-color: var(--vt-burgundy-dark, #3d0711);
  color: #fff;
}

.vt-checkout-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}


/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 1000px) {

  .vt-cart-layout {
    grid-template-columns: 1fr;
  }

  .vt-cart-summary {
    max-width: 500px;
    width: 100%;
    margin-left: auto;
  }

}


@media (max-width: 700px) {

  .vt-cart-header {
    padding: 40px 0 25px;
  }

  .vt-cart-title {
    font-size: 27px;
  }

  .vt-cart-section {
    padding-top: 15px;
  }

  .vt-cart-layout {
    gap: 25px;
  }

  .vt-cart-summary {
    max-width: none;
  }

  /* --- stacked cart cards instead of horizontal-scroll table --- */

  .vt-cart-table-wrapper {
    overflow-x: visible;
  }

  .vt-cart-table {
    min-width: 0;
    width: 100%;
  }

  .vt-cart-table thead {
    display: none;
  }

  .vt-cart-table,
  .vt-cart-table tbody,
  .vt-cart-table tr,
  .vt-cart-table td {
    display: block;
    width: 100%;
  }

  .vt-cart-table tbody tr {
    position: relative;
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid #e5dfd8;
    border-radius: 8px;
  }

  .vt-cart-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border: none;
    border-bottom: 1px solid #f0ece7;
    text-align: right;
  }

  .vt-cart-table td:last-child {
    border-bottom: none;
  }

  .vt-cart-table td::before {
    content: attr(data-label);
    flex-shrink: 0;
    color: var(--vt-muted, #7a6f69);
    font-family: Inter, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
  }

  /* image cell: centered, no label, no border */
  .vt-cart-table .vt-cart-image-cell {
    justify-content: center;
    border-bottom: none;
    padding-bottom: 4px;
  }

  .vt-cart-table .vt-cart-image-cell::before {
    content: none;
  }

  .vt-cart-product-image {
    width: 100px;
    height: 100px;
  }

  .vt-cart-product-cell {
    min-width: 0;
  }

  .vt-cart-quantity-cell {
    min-width: 0;
  }

  .vt-quantity-input {
    margin-left: auto;
  }

  /* remove button pinned to top-right of the card */
  .vt-cart-table .vt-cart-remove-cell {
    position: absolute;
    top: 12px;
    right: 12px;
    width: auto;
    border-bottom: none;
    padding: 0;
  }

  .vt-cart-table .vt-cart-remove-cell::before {
    content: none;
  }
}


@media (max-width: 500px) {

  .vt-cart-header {
    padding: 30px 0 20px;
  }

  .vt-cart-title {
    font-size: 24px;
  }

  .vt-cart-breadcrumbs {
    margin-top: 18px;
    font-size: 12px;
  }

  .vt-cart-summary {
    padding: 22px 18px;
  }

  .vt-cart-summary-title {
    font-size: 20px;
  }

  .vt-summary-total {
    font-size: 20px;
  }

}







/* =========================================================
   VINO-TASTING CHECKOUT PAGE
   UI ONLY - DOES NOT CHANGE CHECKOUT LOGIC
========================================================= */


/* ---------------------------------------------------------
   CHECKOUT HEADER
--------------------------------------------------------- */

.vt-checkout-header {
  background: #fff;
  padding: 55px 0 35px;
}

.vt-checkout-header-inner {
  text-align: center;
}

.vt-checkout-title {
  margin: 0;
  color: var(--vt-text, #1b1716);
  font-family: Georgia, serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vt-checkout-breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  list-style: none;
  padding: 0;
  margin: 25px 0 0;

  color: var(--vt-text, #1b1716);
  font-size: 13px;
  letter-spacing: 0.18em;
}

.vt-checkout-breadcrumbs li {
  margin: 0;
}

.vt-checkout-breadcrumbs a {
  color: var(--vt-text, #1b1716);
  text-decoration: none;
}

.vt-checkout-breadcrumbs a:hover {
  color: var(--vt-burgundy, #6f1023);
}


/* ---------------------------------------------------------
   CHECKOUT SECTION
--------------------------------------------------------- */

.vt-checkout-section {
  padding: 25px 0 70px;
  background: #fff;
}

.vt-checkout-section .container {
  max-width: 1280px;
}


/* ---------------------------------------------------------
   MAIN CHECKOUT LAYOUT
--------------------------------------------------------- */

.vt-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 28px;
  align-items: start;
}


/* ---------------------------------------------------------
   BILLING FORM CARD
--------------------------------------------------------- */

.vt-checkout-form-card {
  padding: 30px 32px 34px;

  border: 1px solid var(--vt-border, #eadfce);
  border-radius: 10px;

  background: #fff;
}

.vt-checkout-form-title {
  margin: 0 0 26px;

  color: var(--vt-text, #1b1716);

  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;

  padding-bottom: 18px;
  border-bottom: 1px solid var(--vt-border, #eadfce);
}

.vt-checkout-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.vt-checkout-field {
  margin-bottom: 18px;
}

.vt-checkout-field:last-child {
  margin-bottom: 0;
}

.vt-checkout-label {
  display: block;
  margin: 0 0 8px;

  color: var(--vt-text, #1b1716);

  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vt-checkout-input,
.vt-checkout-select,
.vt-checkout-textarea {
  width: 100%;
  padding: 13px 14px;

  border: 1px solid var(--vt-border, #eadfce);
  border-radius: 6px;
  background: #fff;

  color: var(--vt-text, #1b1716);

  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;

  transition: border-color 0.2s ease;
}

.vt-checkout-input::placeholder,
.vt-checkout-textarea::placeholder {
  color: var(--vt-muted, #7a6f69);
}

.vt-checkout-input:focus,
.vt-checkout-select:focus,
.vt-checkout-textarea:focus {
  outline: none;
  border-color: var(--vt-burgundy, #6f1023);
}

.vt-checkout-select {
  appearance: auto;
  height: 46px;
}

.vt-checkout-textarea {
  min-height: 110px;
  resize: vertical;
}


/* ---------------------------------------------------------
   ORDER SUMMARY CARD
--------------------------------------------------------- */

.vt-checkout-summary {
  padding: 28px 22px 24px;

  border: 1px solid var(--vt-border, #eadfce);
  border-radius: 10px;

  background: #fff;
  justify-content: center;
}

.vt-checkout-summary-title {
  margin: 0 0 22px;

  color: var(--vt-text, #1b1716);

  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;

  padding-bottom: 18px;
  border-bottom: 1px solid var(--vt-border, #eadfce);
}

.vt-checkout-summary-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
}

.vt-checkout-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding: 12px 0;
  border-bottom: 1px solid #f0ece7;

  color: var(--vt-text, #1b1716);

  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
}

.vt-checkout-summary-row.vt-checkout-summary-total-row {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--vt-border, #eadfce);
  border-bottom: none;
}

.vt-checkout-summary-row strong,
.vt-checkout-summary-row .vt-checkout-summary-value {
  color: var(--vt-burgundy, #6f1023);

  font-family: Georgia, serif;
  font-weight: 700;
  white-space: nowrap;
}

.vt-checkout-summary-total-row strong,
.vt-checkout-summary-total-row .vt-checkout-summary-value {
  font-size: 20px;
}

.vt-checkout-summary-empty {
  padding: 30px 10px;

  color: var(--vt-muted, #7a6f69);

  font-size: 14px;
  text-align: center;
}


/* ---------------------------------------------------------
   PAYMENT ACTIONS
--------------------------------------------------------- */

.vt-checkout-actions {
  margin-top: 22px;
}

.vt-checkout-validation {
  display: block;
  margin: 0 0 14px;

  color: #b3261e;

  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  text-align: center;
}


/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 1000px) {

  .vt-checkout-layout {
    grid-template-columns: 1fr;
  }

  .vt-checkout-summary {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
  }

  .vt-checkout-payment-note {
    text-align: center;
  }

  .vt-checkout-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .vt-checkout-btn {
    width: auto;
    min-width: 220px;
    max-width: 320px;
  }

}


@media (max-width: 700px) {

  .vt-checkout-header {
    padding: 40px 0 25px;
  }

  .vt-checkout-title {
    font-size: 27px;
  }

  .vt-checkout-section {
    padding-top: 15px;
  }

  .vt-checkout-layout {
    gap: 25px;
  }

  .vt-checkout-form-card,
  .vt-checkout-summary {
    padding: 24px 20px 28px;
  }

}


@media (max-width: 500px) {

  .vt-checkout-header {
    padding: 30px 0 20px;
  }

  .vt-checkout-title {
    font-size: 24px;
  }

  .vt-checkout-breadcrumbs {
    margin-top: 18px;
    font-size: 12px;
  }

  .vt-checkout-form-card,
  .vt-checkout-summary {
    padding: 20px 16px 24px;
  }

  .vt-checkout-form-title,
  .vt-checkout-summary-title {
    font-size: 19px;
  }

}


/* ---------------------------------------------------------
   COUNTRY SELECT (jcf-select plugin enhancement)
   Scoped replacement for the old ".checkout-form .jcf-select"
   rule, which no longer applies now that the form uses
   .vt-checkout-field instead of .checkout-form.
--------------------------------------------------------- */

.vt-checkout-field .jcf-select {
  width: 100% !important;
  height: 46px !important;
  margin: 0;

  border: 1px solid var(--vt-border, #eadfce);
  border-radius: 6px;
  box-sizing: border-box;

  display: inline-flex !important;
  align-items: center;
  position: relative;

  background-color: #ffffff;
  /* Custom SVG Arrow */
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px auto;
}

.vt-checkout-field .jcf-select.jcf-focused,
.vt-checkout-field .jcf-select.jcf-drop-active {
  border-color: var(--vt-burgundy, #6f1023);
}

.vt-checkout-field .jcf-select .jcf-select-text {
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px !important;
  line-height: 44px !important;
  color: var(--vt-text, #1b1716);

  padding-left: 14px !important;
  padding-right: 32px !important;
  /* keep clear of the arrow */

  width: 100%;
  box-sizing: border-box;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vt-checkout-field .jcf-select .jcf-select-opener {
  display: none !important;
}


/* ---------------------------------------------------------
   AGE CONFIRMATION CHECKBOX
--------------------------------------------------------- */

.vt-checkout-checkbox-label {
  display: flex;
  align-items: center;
  gap: 9px;

  margin-top: 4px;

  color: var(--vt-text, #1b1716);

  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
}

.vt-checkout-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--vt-burgundy, #6f1023);
}


/* ---------------------------------------------------------
   PAYMENT METHODS NOTE
--------------------------------------------------------- */

.vt-checkout-payment-note {
  margin: 16px 0 0;

  color: var(--vt-muted, #7a6f69);

  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.6;
}


.account-section .btn {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding: 13px 18px;
  border: 1px solid var(--vt-burgundy, #6f1023);
  border-radius: 5px;
  background: var(--vt-burgundy, #6f1023);
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease,
    border-color 0.2s ease;
}

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


/* ------------------------------------------------------------
   Mobile Nav Toggle
------------------------------------------------------------ */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--vt-border);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  order: -1;
  /* sits before the account/wishlist/cart icons */
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--vt-text);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Fix navigation alignment between 959px and 992px */
@media screen and (max-width: 992px) and (min-width: 959px) {
  #nav {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  #nav>ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-left: 0;
    margin: 0 auto;
    gap: 8px 18px;
    /* Compact horizontal and vertical spacing */
  }

  #nav>ul>li {
    display: inline-flex;
    margin: 0 !important;
    /* Removes the rigid 50px left margin causing overflow */
  }

  #nav>ul>li>a {
    font-size: 14px;
    /* Slightly shrinks font size to fit seamlessly */
    padding-bottom: 4px;
    white-space: nowrap;
  }
}

@media (max-width: 1205px) {
  .nav-toggle {
    display: flex;
  }

  #nav.nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-top: 1px solid var(--vt-border);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    padding: 6px 0;
    z-index: 30;
  }

  #nav.nav.nav-open {
    display: flex;
  }

  #nav.nav a {
    width: 100%;
    padding: 13px 4px;
    border-bottom: 1px solid #f1e7da;
    font-size: 13px;
  }

  #nav.nav a:last-child {
    border-bottom: none;
  }
}



@media (max-width: 650px) {
  .icons {
    width: 100%;
    justify-content: space-between;
  }
}

#sort-select:focus,
.input:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--vt-border, #eadfce) !important;
  /* Reverts to default or desired border color */
}



.card-container-login .btn,
.register-submit-btn .btn,
.product-card .btn,
.info-column .btn {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding: 13px 18px;
  border: 1px solid var(--vt-burgundy, #6f1023);
  border-radius: 5px;
  background: var(--vt-burgundy, #6f1023);
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease,
    border-color 0.2s ease;
}

.contact-section .btn {
  width: 40%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding: 13px 18px;
  border: 1px solid var(--vt-burgundy, #6f1023);
  border-radius: 5px;
  background: var(--vt-burgundy, #6f1023);
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease,
    border-color 0.2s ease;
}

.hero .btn-row .btn-secondary {
  background: transparent;
  color: var(--vt-burgundy-dark, #3d0711);
  border: 1.5px solid var(--vt-burgundy-dark, #3d0711);
}

.hero .btn-row .btn-secondary:hover,
.hero .btn-row .btn-secondary:active {
  background: var(--vt-burgundy-dark, #3d0711);
  color: #ffffff;
  border-color: var(--vt-burgundy-dark, #3d0711);
}

.btn,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* Prevents border differences from shifting height */
}



/* =========================================================
   CONTACT INFORMATION
   ========================================================= */

.contact-sec {
  overflow: hidden;
  max-width: 1140px;
  margin: 0 auto;
}

/* -------------------------
   Contact Page Title
   ------------------------- */

.contact-sec>.row>h1 {
  width: 100%;
  margin: 0 0 28px;
  padding: 0 15px;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--vt-text, #1b1716);
  margin-top: 70px;
}


/* -------------------------
   Intro Text
   ------------------------- */

.contact-sec .header {
  width: 100%;
  margin: 0 0 0;
  padding: 0 28px;
  overflow: hidden;

  background: var(--vt-ivory, #fbf7ef);
  border-top: 1px solid var(--vt-border, #eadfce);
  border-bottom: 1px solid var(--vt-border, #eadfce);
}

.contact-sec .header p {
  max-width: 900px;
  margin: 0 auto;
  padding: 9px 0 10px;

  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0.1px;
  color: var(--vt-muted, #7a6f69);
}

/* -------------------------
   Contact Information Row
   ------------------------- */

.contact-sec .contact-us-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  width: 100%;
  margin: 0;
  padding: 0;

  border-bottom: 1px solid var(--vt-border, #eadfce);

}

/* Individual contact item */

.contact-sec .contact-us-details>li {
  width: auto;
  min-height: 120px;
  margin: 0;
  padding: 20px 25px 25px;
  float: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  border: 0;
}

/* Vertical separators */

.contact-sec .contact-us-details>li+li {
  border-left: 1px solid var(--vt-border, #eadfce);
}

/* -------------------------
   Icons
   ------------------------- */

.contact-sec .contact-us-details .fa {
  width: 30px;
  height: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 0 12px;

  font-size: 17px;
  line-height: 1;

  color: var(--vt-burgundy, #6f1023);
}

/* -------------------------
   Contact Links
   ------------------------- */

.contact-sec .contact-us-details a {
  display: block;

  font-family: Georgia, serif;
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;

  letter-spacing: 1.5px;
  color: var(--vt-text, #1b1716);

  text-decoration: none;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.contact-sec .contact-us-details a:hover {
  color: var(--vt-burgundy, #6f1023);
}

/* -------------------------
   Address
   ------------------------- */

.contact-sec .contact-us-details address {
  margin: 0;

  font-family: Georgia, serif;
  font-size: 13px;
  line-height: 20px;
  font-style: normal;
  font-weight: 700;

  letter-spacing: 1.5px;
  color: var(--vt-text, #1b1716);
}

/* -------------------------
   Phone / Email Hover
   ------------------------- */

.contact-sec .contact-us-details li:hover .fa {
  transform: translateY(-2px);
  color: var(--vt-gold, #c9963e);
}

.contact-sec .contact-us-details .fa {
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 767px) {

  .contact-sec>.row>h1 {
    font-size: 30px;
    margin-bottom: 22px;
    margin-left: 40px;
    padding: 0 20px;
  }

  .contact-sec .header {
    padding: 0 20px;
  }

  .contact-sec .header p {
    font-size: 12px;
    line-height: 19px;
    padding: 12px 0 13px;
  }

  .contact-sec .contact-us-details {
    grid-template-columns: 1fr;
  }

  .contact-sec .contact-us-details>li {
    min-height: auto;
    padding: 20px 15px;
  }

  .contact-sec .contact-us-details>li+li {
    border-left: 0;
    border-top: 1px solid var(--vt-border, #eadfce);
  }

  .contact-sec .contact-us-details .fa {
    margin-bottom: 9px;
  }

  .contact-sec .contact-us-details a,
  .contact-sec .contact-us-details address {
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 1.5px;
  }
}


/* --------------------------------
   About Section
--------------------------------- */

.wine-experience-section {
  position: relative;
  width: 100%;
  max-width: 100%;
  background-image:
    var(--wine-hotel);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 70px 0;
}


/* --------------------------------
   Wine Experience Cards
--------------------------------- */

.cus-card-01 {
  height: 100%;
  background-color: rgba(255, 255, 255, 0.20);
  background-image: none !important;
  opacity: 1 !important;
  border: 1px solid var(--vt-border, #eadfce);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(27, 23, 22, 0.06);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.cus-card-01:hover {
  transform: translateY(-4px);
  box-shadow:
    0 10px 24px rgba(27, 23, 22, 0.12);
  background-color: #fff;
}


/* --------------------------------
   Card Content
--------------------------------- */
.cus-card-01 .p-4 {
  padding: 32px !important;
}


/* --------------------------------
   Card Heading
--------------------------------- */
.cus-card-01 h2 {
  font-family: Georgia, "Times New Roman", serif;

  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--vt-burgundy, #6f1023);
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--vt-gold, #c9963e);
  display: inline-block;
}


/* --------------------------------
   Card Paragraph
--------------------------------- */
.cus-card-01 .para {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 14px;
  line-height: 24px;
  /* color: var(--vt-muted, #7a6f69); */
  color: var(--vt-text, #1b1716);
  margin: 0;
}


/* --------------------------------
   Mobile
--------------------------------- */
@media (max-width: 767px) {
  .section>.container>h1 {
    font-size: 28px;
  }

  .cus-card-01 .p-4 {
    padding: 24px !important;
  }

  .cus-card-01 h2 {
    font-size: 18px;
  }

}


/* =========================================================
   WINE CLUB - SECTION SPACING FIX (Mobile)
========================================================= */

/* Add gap between club plans and the wine club banner */
.club-section {
  margin-bottom: 30px;
}

/* Ensure proper spacing on mobile */
@media (max-width: 650px) {
  .club-section {
    margin-bottom: 40px;
  }

  .club-section .club-plans {
    margin-bottom: 10px;
  }

  /* Add extra space before the wine club banner */
  .wine-club-banner {
    margin-top: 10px;
  }
}

/* =========================================================
   CART - TABLET RESPONSIVE FIX
========================================================= */

/* Fix for tablet devices - ensure proper layout between 700px and 1024px */
@media (min-width: 701px) and (max-width: 1024px) {

  /* Adjust the cart layout grid */
  .vt-cart-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* Make cart summary full width on tablets */
  .vt-cart-summary {
    max-width: 100%;
    width: 100%;
    margin: 0;
  }

  /* Make table horizontally scrollable on tablets */
  .vt-cart-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Ensure the table doesn't overflow its container */
  .vt-cart-table {
    min-width: 650px;
    width: 100%;
  }

  /* Adjust table cells for better readability on tablets */
  .vt-cart-table th,
  .vt-cart-table td {
    padding: 12px 12px;
    font-size: 14px;
  }

  .vt-cart-product-cell {
    min-width: 180px;
  }

  .vt-cart-product-name {
    font-size: 14px;
  }

  .vt-cart-price,
  .vt-cart-total {
    font-size: 14px;
    min-width: 80px;
  }

  .vt-cart-quantity-cell {
    min-width: 80px;
  }

  .vt-quantity-input {
    width: 60px;
    height: 36px;
    font-size: 13px;
  }

  /* Fix the remove button alignment */
  .vt-cart-remove {
    width: 24px;
    height: 24px;
    font-size: 16px;
  }

  /* Cart header adjustments for tablets */
  .vt-cart-header {
    padding: 40px 0 25px;
  }

  .vt-cart-title {
    font-size: 28px;
  }

  /* Cart section padding */
  .vt-cart-section {
    padding: 20px 0 50px;
  }
}

/* Additional fix for iPad Mini specifically (768px) */
@media (min-width: 768px) and (max-width: 820px) {
  .vt-cart-table {
    min-width: 600px;
  }

  .vt-cart-table th,
  .vt-cart-table td {
    padding: 10px 8px;
    font-size: 13px;
  }

  .vt-cart-product-cell {
    min-width: 150px;
  }
}

/* Fix for the subtotal calculation bug - ensure values display correctly */
.vt-summary-row strong,
.vt-summary-total strong {
  font-weight: 700;
  color: var(--vt-burgundy, #6f1023);
}

/* Ensure the subtotal and total show correctly on all devices */
.vt-summary-row,
.vt-summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}


/* =========================================================
   FEATURED WINES - CAROUSEL / SLIDER
========================================================= */

.featured-wines-container {
  position: relative;
}

/* Single Row of 6 Product Cards for Best Sellers */
.featured-wines-section .section-title {
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--vt-text, #1b1716);
  text-align: center;
  margin-bottom: 28px;
}

.product-grid.featured-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-bottom: 30px;
  max-width: 100%;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.featured-grid-item {
  display: flex;
  flex-direction: column;
}

.featured-wines-section .product-card {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border: 1px solid var(--vt-border, #eadfce);
  border-radius: 6px;
  padding: 10px 10px 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.featured-wines-section .product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  border-color: #c9963e;
}

.featured-wines-section .product-image {
  height: 195px !important;
  padding: 15px 10px 0 !important;
  background: transparent !important;
}

.featured-wines-section .product-body {
  padding: 12px 6px 0 !important;
  text-align: center;
}

.featured-wines-section .product-body h3 {
  font-family: Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
  line-height: 1.3;
}

.featured-wines-section .product-body h3 a {
  color: #1b1716;
}

.featured-wines-section .subtext {
  font-size: 12px;
  color: var(--vt-muted, #7a6f69);
  margin-bottom: 6px;
}

.featured-wines-section .rating {
  font-size: 11.5px;
  color: var(--vt-gold, #c9963e);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.featured-wines-section .rating-count {
  color: var(--vt-muted, #7a6f69);
  font-size: 11.5px;
  font-family: Inter, system-ui, sans-serif;
}

.featured-wines-section .price {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--vt-text, #1b1716);
  margin-bottom: 0 !important;
}

/* Hide Add to Cart button on Best Sellers showcase to match design */
.featured-wines-section .product-card .btn {
  display: none !important;
}

.featured-mobile-dots {
  display: none;
}

/* =========================================================
   RESPONSIVE - BEST SELLERS (Horizontal Slider on smaller screens)
========================================================= */

@media (max-width: 1099px) {
  .featured-wines-container {
    overflow: hidden;
  }

  .product-grid.featured-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth;
    gap: 16px !important;
    padding: 8px 16px 20px !important;
    margin: 0 -16px !important;
    scrollbar-width: none;
  }

  .product-grid.featured-grid::-webkit-scrollbar {
    display: none;
  }

  .featured-grid-item {
    flex: 0 0 calc(33.333% - 11px) !important;
    min-width: 220px !important;
    max-width: 280px !important;
    scroll-snap-align: start !important;
  }

  .featured-mobile-dots {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
  }

  .featured-mobile-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d8d0c2;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .featured-mobile-dot.active {
    background: var(--vt-burgundy, #6f1023);
    width: 24px;
    border-radius: 4px;
  }
}

@media (max-width: 650px) {
  .featured-grid-item {
    flex: 0 0 78% !important;
    max-width: 290px !important;
    min-width: 230px !important;
    scroll-snap-align: center !important;
  }
}

.featured-wines-section .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding: 13px 18px;
  border: 1px solid var(--vt-burgundy, #6f1023);
  border-radius: 5px;
  background: var(--vt-burgundy, #6f1023);
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease,
    border-color 0.2s ease;
}

.featured-wines-section .btn:hover {
  background: var(--vt-burgundy-dark, #3d0711);
  border-color: var(--vt-burgundy-dark, #3d0711);
  color: #fff;
}

/* =========================================================
   FILTERS HEADER - SPACING FIX
========================================================= */

.filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Adds spacing between "Filter By" and "Reset" */
  margin-bottom: 20px;
  /* Adds spacing below the header */
  padding-bottom: 12px;
  /* Optional: adds padding below */
  border-bottom: 1px solid var(--vt-border, #eadfce);
  /* Optional: adds a subtle divider */
}

.filters-header h3 {
  margin: 0;
  /* Remove default margin */
  font-size: 16px;
  font-weight: 700;
  color: var(--vt-text, #1b1716);
}

.filters-reset {
  font-size: 13px;
  font-weight: 700;
  color: var(--vt-burgundy, #6f1023);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  padding: 4px 0;
  transition: color 0.2s ease;
}

.filters-reset:hover {
  color: var(--vt-burgundy-dark, #3d0711);
}


/* Page wrapper for consistent scrolling */
.page-wrapper {
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  padding: 20px 0 40px;
}

/* Make sure content expands properly */
.page-wrapper>* {
  flex: 1;
}

/* Cart page specific */
.vt-cart-section .page-wrapper {
  min-height: calc(100vh - 250px);
}

/* Account page specific */
.account-section .page-wrapper {
  min-height: calc(100vh - 250px);
}


/* =========================================================
   FIX: SCROLLING ISSUE ON PRODUCT LISTING PAGES (iPad)
========================================================= */

/* Ensure the wrapper and main allow full scrolling */
#wrapper {
  position: relative;
  overflow: visible !important;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#main {
  overflow: visible !important;
  flex: 1 0 auto;
}

/* Fix the page wrapper - don't restrict height on product pages */
.page-wrapper {
  min-height: auto !important;
  display: block !important;
  padding: 20px 0 40px;
  width: 100%;
  height: auto !important;
}

/* Ensure the section containing the product grid allows scrolling */
.section {
  overflow: visible !important;
  padding: 40px 0 60px;
  flex: 1;
}

.section .container {
  max-width: none;
  overflow: visible !important;
  height: auto !important;
}

/* Fix the listing layout */
.listing-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 30px;
  overflow: visible !important;
  height: auto !important;
}

/* Ensure the product grid doesn't get cut off */
.product-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  overflow: visible !important;
  height: auto !important;
}

/* Make sure the filters sidebar doesn't restrict height */
.filters {
  overflow: visible !important;
  height: auto !important;
}

/* Fix pagination positioning */
.product-grid+div {
  margin-top: 36px;
  overflow: visible !important;
}

/* iPad Pro specific fixes */
@media (min-width: 1024px) and (max-width: 1366px) {

  /* Fix the product grid for iPad Pro */
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  /* Ensure the page scrolls properly */
  .section {
    min-height: auto !important;
    padding-bottom: 80px;
  }

  /* Make sure the container doesn't restrict height */
  .section .container {
    min-height: auto !important;
    height: auto !important;
  }

  /* Fix the listing layout height */
  .listing-layout {
    height: auto !important;
    min-height: auto !important;
  }

  /* Ensure the product cards are fully visible */
  .product-card {
    height: auto !important;
    min-height: 350px;
  }

  .product-image {
    height: 250px;
  }
}

/* iPad Pro portrait specific */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .listing-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .filters {
    margin-bottom: 20px;
  }
}

/* iPad Pro landscape specific */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .listing-layout {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
  }
}

/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .listing-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .filters {
    margin-bottom: 20px;
  }

  .section {
    padding: 30px 0 50px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .product-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .listing-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .filters {
    margin-bottom: 16px;
  }

  .section {
    padding: 20px 0 40px;
  }

  .product-image {
    height: 200px;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Force overflow visible on all product page elements */
.section,
.section .container,
.listing-layout,
.listing-layout>div,
.product-grid,
.product-grid>*,
.filters,
.filters>* {
  overflow: visible !important;
}

/* Ensure the body and html allow scrolling */
html,
body {
  height: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* Prevent borders, padding, and media from creating narrow-screen overflow. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
iframe {
  max-width: 100%;
}

/* Fix for the main content area */
#main {
  overflow: visible !important;
  flex: 1 0 auto;
  min-height: auto !important;
}

/* =========================================================
   TOP BAR — announcement strip
========================================================= */

.vt-topbar {
  --vt-topbar-bg: #2a0810;
  --vt-topbar-bg-2: #1f060c;
  --vt-topbar-text: #d9c3b4;
  position: relative;
  background-color: var(--vt-topbar-bg);
  background-repeat: repeat;
  background-size: auto, auto, 60px 60px;
  border-bottom: 1px solid rgba(201, 150, 62, 0.25);
}

.vt-topbar-inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: 0.75rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.vt-topbar-messages {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.vt-topbar-msg {
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vt-topbar-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vt-topbar-msg:first-child {
  text-align: left;
}

.vt-topbar-msg:nth-child(2) {
  text-align: center;
}

.vt-topbar-msg:last-child {
  text-align: right;
}

.vt-topbar-close {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  padding: 0;
  width: 1.4rem;
  height: 1.4rem;
  line-height: 1;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--vt-topbar-text);
  opacity: 0.75;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vt-topbar-close:hover,
.vt-topbar-close:focus {
  opacity: 1;
  color: var(--vt-gold, #c9963e);
}

/* Tablet */
@media (max-width: 1024px) {
  .vt-topbar-inner {
    padding: 0.55rem 1.5rem;
  }

  .vt-topbar-msg:nth-child(3) {
    display: none;
  }
}

/* Mobile — show only the primary message */
@media (max-width: 650px) {
  .vt-topbar-messages {
    justify-content: flex-start;
  }

  .vt-topbar-msg:nth-child(2),
  .vt-topbar-msg:nth-child(3) {
    display: none;
  }

  .vt-topbar-inner {
    padding: 0.5rem 1.25rem;
  }
}


/* =========================================================
CLUB BANNER
========================================================= */
.club-banner-section {
  background:
    linear-gradient(135deg, rgba(20, 2, 5, 0.92), rgba(40, 6, 12, 0.88)),
    url('/images/banner/home-wineBanner.jpg') no-repeat center center / cover;
  padding: 44px 0;
}

.club-banner-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1.8fr 3.2fr;
  /* wider middle column for bigger cards, narrower image column */
  gap: 40px;
  align-items: center;
  /* aligns intro block with the card row */
}

.club-banner-intro {
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 10px;
  margin-right: 20px;
  /* extra breathing room between intro and plan cards */
}

.club-eyebrow {
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vt-gold, #c9963e);
  margin-bottom: 12px;
}

.club-banner-intro h2 {
  font-family: Georgia, serif;
  font-size: 5rem;
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 14px;
  color: #fff;
}

.club-banner-intro p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 22px;
  max-width: 260px;
}

.club-learn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border: 1px solid var(--vt-gold, #c9963e);
  border-radius: 4px;
  color: var(--vt-gold, #c9963e);
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  width: fit-content;
  transition: background 0.25s ease, color 0.25s ease;
}

.club-learn-more:hover {
  background: var(--vt-gold, #c9963e);
  color: #1b1008;
}

.club-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  /* Increased from 20px for better card separation */
}

.club-plan-card {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 26px 20px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  min-width: 0;
}

.club-plan-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
}

/* Popular card keeps its default lift, but hover behaves the same as every other card */
.club-plan-card.is-popular {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

/* Keep popular card elevated on hover, stacking on top of its default elevation */
.club-plan-card.is-popular:hover {
  transform: translateY(-12px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

.club-plan-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--vt-gold, #c9963e);
  color: #1b1008;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 0;
  border-radius: 8px 8px 0 0;
}

.club-plan-card.is-popular {
  padding-top: 44px;
}

.club-plan-name {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vt-text, #1b1716);
  margin: 0 0 8px;
}

.club-plan-price {
  font-family: Georgia, serif;
  font-size: 3rem;
  font-weight: 700;
  color: var(--vt-burgundy, #6f1023);
  margin-bottom: 16px;
}

.club-plan-price span {
  font-size: 12px;
  font-weight: 400;
  color: var(--vt-muted, #7a6f69);
}

.club-plan-features {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  text-align: left;
  flex-grow: 1;
}

.club-plan-features li {
  font-size: 12.5px;
  color: var(--vt-text, #1b1716);
  padding: 5px 0 5px 20px;
  position: relative;
}

.club-plan-features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--vt-gold, #c9963e);
  font-weight: 700;
}

.club-plan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  border: 1px solid var(--vt-burgundy, #6f1023);
  border-radius: 4px;
  color: var(--vt-burgundy, #6f1023);
  background: transparent;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}

.club-plan-btn:hover {
  background: var(--vt-burgundy, #6f1023);
  color: #fff;
}

.club-plan-btn.is-gold {
  background: var(--vt-gold, #c9963e);
  border-color: var(--vt-gold, #c9963e);
  color: #1b1008;
}

.club-plan-btn.is-gold:hover {
  background: var(--vt-burgundy-dark, #3d0711);
  border-color: var(--vt-burgundy-dark, #3d0711);
  color: #fff;
}

@media (max-width: 1100px) {
  .club-banner-inner {
    grid-template-columns: 1fr;
    gap: 30px;
    /* Reduced gap for mobile */
  }

  .club-plans {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 700px) {
  .club-plans {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .club-plan-card.is-popular {
    transform: none;
  }

  .club-plan-card.is-popular:hover {
    transform: translateY(-8px);
  }
}


/* =========================================================
   JOURNAL
========================================================= */
.journal-section {
  padding: 56px 0;
  background: var(--vt-ivory, #fbf7ef);
}

.journal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 36px;
}

.journal-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vt-text, #1b1716);
  margin: 0;
  line-height: 1.2;
}

.journal-viewall {
  position: absolute;
  right: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vt-gold, #c9963e);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.journal-viewall i {
  font-style: normal;
  transition: transform 0.25s ease;
}

.journal-viewall:hover i {
  transform: translateX(3px);
}

.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.journal-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  /* keep this — image fills card height edge-to-edge */
  border: 1px solid var(--vt-border, #eadfce);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 180px;
  /* NEW: fixes the overall card height — this is what shrinks the image */
}

.journal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(27, 23, 22, 0.08);
}

.journal-card-image {
  flex: 0 0 46%;
  /* was 40% — widened so the image reads landscape, not square */
  height: 100%;
  /* stretches to the new shorter card height */
  background-size: cover;
  background-position: center;
  background-color: #e9e0d3;
}

.journal-card-body {
  flex: 1;
  min-width: 0;
  padding: 18px 20px 18px;
  /* your existing padding is fine — left as-is */
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  /* prevents excerpt from pushing the fixed-height card taller */
}

.journal-card-category {
  display: block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vt-gold, #c9963e);
  margin-bottom: 8px;
}

.journal-card-title {
  font-family: Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--vt-text, #1b1716);
  margin: 0 0 8px;
}

.journal-card-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.6;
  color: var(--vt-muted, #7a6f69);
  margin: 0 0 12px;
}

.journal-card-readmore {
  font-family: Inter, system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--vt-burgundy, #6f1023);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.journal-card-readmore i {
  font-style: normal;
  transition: transform 0.25s ease;
}

.journal-card:hover .journal-card-readmore i {
  transform: translateX(3px);
}

/* =========================================================
   JOURNAL — RESPONSIVE
========================================================= */

/* Large tablets / small desktops: 2 columns */
@media (max-width: 1199px) {
  .journal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablets: 1 column, but keep image+body side-by-side row layout */
@media (max-width: 900px) {
  .journal-grid {
    grid-template-columns: 1fr;
  }

  .journal-header {
    flex-direction: column;
    gap: 10px;
  }

  .journal-viewall {
    position: static;
  }

  .journal-card {
    flex-direction: row;
    height: 160px;
  }

  .journal-card-image {
    flex: 0 0 35%;
  }
}

/* Small tablets / large phones: stack image on top, body below */
@media (max-width: 640px) {
  .journal-card {
    flex-direction: column;
    height: auto;
  }

  .journal-card-image {
    flex: 0 0 200px;
    height: 200px;
    width: 100%;
  }

  .journal-card-body {
    flex: 1 1 auto;
    justify-content: flex-start;
  }

  .journal-card-title {
    font-size: 1.25rem;
  }

  .journal-card-excerpt {
    -webkit-line-clamp: 2;
  }
}

/* Phones: tighten spacing and type */
@media (max-width: 480px) {
  .journal-card {
    height: auto;
  }

  .journal-card-image {
    flex: 0 0 170px;
    height: 170px;
    width: 100%;
  }

  .journal-card-body {
    flex: 1 1 auto;
    justify-content: flex-start;
    padding: 14px 16px 16px;
  }

  .journal-card-title {
    font-size: 1.25rem;
  }

  .journal-card-excerpt {
    font-size: 12.5px;
  }

  .journal-title {
    font-size: 1.6rem;
    letter-spacing: 0.08em;
  }
}

/* =========================================================
   TRUST BADGES — icon-only additions
   (layout rules already exist as .trust-bar / .trust-grid / .trust-item)
========================================================= */
/* Trust Badges - Full Width Centering */
.trustband {
  background: var(--vt-ivory, #fbf7ef);
  border-top: 1px solid var(--vt-border, #eadfce);
  border-bottom: 1px solid var(--vt-border, #eadfce);
  padding: 26px 0;
  width: 100%;
}

.trustband-grid {
  --trustband-gap: 36px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  /* Centers items horizontally */
  align-items: center;
  gap: 20px var(--trustband-gap);
}

.trustband-item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 auto;
  /* Don't force grow, use content width */
  padding: 8px 12px;
  position: relative;
  white-space: nowrap;
}

/* Vertical dividers between items */
.trustband-item+.trustband-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--trustband-gap) / 2);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 40px;
  background: var(--vt-border, #eadfce);
}

.trustband-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--vt-gold, #c9963e);
}

.trustband-icon svg {
  width: 40px;
  height: 40px;
}

.trustband-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.4px solid var(--vt-gold, #c9963e);
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.trustband-text strong {
  display: block;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vt-text, #1b1716);
  line-height: 1.3;
  white-space: nowrap;
}

.trustband-text p {
  margin: 3px 0 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  color: var(--vt-muted, #7a6f69);
  line-height: 1.3;
  white-space: nowrap;
}

/* Medium Desktop adjustment (992px to 1200px) */
@media (max-width: 1200px) and (min-width: 992px) {
  .trustband-grid {
    --trustband-gap: 20px;
    padding: 0 10px;
  }

  .trustband-item {
    padding: 6px 8px;
    gap: 8px;
  }

  .trustband-text strong {
    font-size: 12px;
  }

  .trustband-text p {
    font-size: 11px;
  }

  .trustband-icon svg,
  .trustband-icon-badge {
    width: 32px;
    height: 32px;
  }
}

/* Responsive - Tablet (below 992px down to 576px) */
@media (max-width: 991.98px) {
  .trustband-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 32px !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    justify-content: center !important;
  }

  .trustband-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 4px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Remove dividers on tablet */
  .trustband-item+.trustband-item::before {
    display: none !important;
  }

  .trustband-text {
    min-width: 0;
  }

  .trustband-text strong {
    font-size: 12.5px !important;
    white-space: normal !important;
  }

  .trustband-text p {
    font-size: 11.5px !important;
    white-space: normal !important;
  }
}

/* Responsive - Mobile (575px and below) */
@media (max-width: 575.98px) {
  .trustband {
    padding: 22px 0 !important;
  }

  .trustband-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 0 16px !important;
    max-width: 100% !important;
  }

  .trustband-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding: 4px 0 !important;
    width: 100% !important;
    max-width: 300px !important;
    box-sizing: border-box !important;
  }

  .trustband-item+.trustband-item::before {
    display: none !important;
  }

  .trustband-icon svg,
  .trustband-icon-badge {
    width: 36px !important;
    height: 36px !important;
  }

  .trustband-text {
    text-align: left !important;
    min-width: 0;
  }

  .trustband-text strong {
    font-size: 12.5px !important;
    white-space: normal !important;
  }

  .trustband-text p {
    font-size: 11.5px !important;
    white-space: normal !important;
  }
}

/* =========================================================
   TESTIMONIALS
========================================================= */

.testimonials-section {
  padding: 56px 0 64px;
  background: var(--vt-ivory, #fbf7ef);
}

.testimonials-title {
  text-align: center;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vt-text, #1b1716);
  margin: 0 0 40px;
  line-height: 1.2;
}

.testimonials-slider-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 90px;
  position: relative;
}

/* Testimonials container */
.testimonials-grid-wrapper {
  position: static;
  width: 100%;
}

/* Testimonials */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  width: 100%;
  transition: opacity 0.3s ease;
}

.testimonial-card {
  text-align: center;
  padding: 0 10px;
}

.testimonial-stars {
  color: var(--vt-gold, #c9963e);
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.testimonial-quote {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.7;
  color: var(--vt-text, #1b1716);
  margin: 0 0 12px;
}

.testimonial-name {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--vt-muted, #7a6f69);
}


/* =========================================================
   TESTIMONIAL ARROWS
========================================================= */

.testimonial-arrow {
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 2px solid var(--vt-gold, #c9963e) !important;
  border-radius: 50%;
  color: var(--vt-text, #1b1716);
  cursor: pointer;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  opacity: 1 !important;
  visibility: visible !important;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

/* Left arrow */
.testimonial-arrow.prev,
.slider-arrow.prev,
.testimonial-arrow[id$="Prev"],
#prevTestimonial {
  left: 15px;
  right: auto !important;
}

/* Right arrow */
.testimonial-arrow.next,
.slider-arrow.next,
.testimonial-arrow[id$="Next"],
#nextTestimonial {
  right: 15px;
  left: auto !important;
}

/* Hover */
.testimonial-arrow:hover {
  background: var(--vt-gold, #c9963e) !important;
  color: #fff;
  border-color: var(--vt-gold, #c9963e) !important;

  transform: translateY(-50%) scale(1.05);
}

/* Active */
.testimonial-arrow:active {
  transform: translateY(-50%) scale(0.95);
}

.testimonial-arrow svg {
  width: 20px;
  height: 20px;
  display: block;
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 901px) and (max-width: 1100px) {

  .testimonials-slider-wrapper {
    padding: 0 70px;
  }

  .testimonial-arrow {
    width: 38px !important;
    height: 38px !important;
  }

  .testimonial-arrow.prev,
  .slider-arrow.prev {
    left: 10px;
    right: auto !important;
  }

  .testimonial-arrow.next,
  .slider-arrow.next {
    right: 10px;
    left: auto !important;
  }

  .testimonial-arrow svg {
    width: 16px;
    height: 16px;
  }

  .testimonials-grid {
    gap: 25px;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

  .testimonials-slider-wrapper {
    padding: 0 52px;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .testimonial-arrow {
    width: 34px !important;
    height: 34px !important;
  }

  .testimonial-arrow.prev,
  .slider-arrow.prev {
    left: 6px;
    right: auto !important;
  }

  .testimonial-arrow.next,
  .slider-arrow.next {
    right: 6px;
    left: auto !important;
  }

  .testimonial-arrow svg {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 480px) {

  .testimonials-slider-wrapper {
    padding: 0 44px;
  }

  .testimonial-arrow {
    width: 30px !important;
    height: 30px !important;
  }

  .testimonial-arrow.prev,
  .slider-arrow.prev {
    left: 4px;
    right: auto !important;
  }

  .testimonial-arrow.next,
  .slider-arrow.next {
    right: 4px;
    left: auto !important;
  }

  .testimonial-arrow svg {
    width: 12px;
    height: 12px;
  }
}

/* =========================================================
   TESTIMONIALS - SINGLE CARD ON MOBILE (below 580px)
========================================================= */

@media (max-width: 580px) {
  .testimonials-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .testimonial-card {
    padding: 0 8px !important;
  }

  .testimonials-slider-wrapper {
    padding: 0 44px !important;
  }

  .testimonial-arrow {
    width: 30px !important;
    height: 30px !important;
  }

  .testimonial-arrow.prev,
  .slider-arrow.prev {
    left: 4px;
    right: auto !important;
  }

  .testimonial-arrow.next,
  .slider-arrow.next {
    right: 4px;
    left: auto !important;
  }

  .testimonial-arrow svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Hide dots on mobile for cleaner look */
  .slider-dots {
    display: none !important;
  }

  .testimonial-quote {
    font-size: 13px !important;
  }

  .testimonials-title {
    font-size: 1.6rem !important;
  }
}


/* =========================================================
   SHOP PAGE REDESIGN — append this file's contents into your
   existing style.css (it relies on the --vt-* variables already
   defined there in :root).
========================================================= */

/* ---- Breadcrumb ---- */
.shop-breadcrumb {
  font-size: 13px;
  color: var(--vt-muted);
  margin: 24px 0 18px;
}

.shop-breadcrumb a {
  color: var(--vt-muted);
  text-decoration: none;
}

.shop-breadcrumb a:hover {
  color: var(--vt-burgundy);
}

.shop-breadcrumb .sep {
  margin: 0 6px;
  color: var(--vt-border);
}

/* ---- Shop header ---- */
.shop-header {
  margin-bottom: 30px;
}

.shop-header h1 {
  font-size: 6rem;
  font-weight: 500;
  margin: 0 0 10px;
  color: var(--vt-text, #1b1716);
  line-height: 1.2;
}

.shop-header .divider {
  width: 64px;
  height: 2px;
  background: var(--vt-gold);
  margin: 0 0 16px;
  position: relative;
}

.shop-header .divider::before {
  content: "";
  position: absolute;
  left: 76px;
  top: -3px;
  width: 8px;
  height: 8px;
  border: 1px solid var(--vt-gold);
  border-radius: 50%;
}

.shop-header p {
  color: var(--vt-muted);
  margin: 0;
  font-size: 15px;
  max-width: 640px;
}

/* ---- Collapsible filter groups (<details>/<summary>) ---- */
.filter-group {
  border-bottom: 1px solid var(--vt-border);
  padding: 14px 0;
}

.filter-group summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vt-text);
}

.filter-group summary::-webkit-details-marker {
  display: none;
}

.filter-group summary::after {
  content: "+";
  font-weight: 400;
  font-size: 16px;
  color: var(--vt-muted);
}

.filter-group[open] summary::after {
  content: "\2013";
  /* – */
}

.filter-group .filter-group-body {
  padding-top: 12px;
}

.filter-group label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0;
  color: #4e3c32;
  font-size: 13px;
  cursor: pointer;
}

.filter-group label .count {
  color: var(--vt-muted);
  font-size: 12px;
}

.filter-group input[type="checkbox"] {
  accent-color: var(--vt-burgundy);
  width: 15px;
  height: 15px;
  margin-right: 8px;
}

/* Faked filter sections (Country / Grape / Vintage / Availability):
   same layout, visually toned down, non-functional. */
.filter-group--fake summary {
  color: var(--vt-muted);
}

.filter-group--fake .filter-empty {
  color: var(--vt-muted);
  font-size: 12px;
  font-style: italic;
  padding-top: 2px;
  margin: 0;
}

.filter-group--fake label {
  color: var(--vt-muted);
  cursor: not-allowed;
}

.filter-group--fake input {
  cursor: not-allowed;
  accent-color: var(--vt-muted);
}

.filters-clear-all {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 20px;
  padding: 12px;
  border: 1px solid var(--vt-burgundy);
  border-radius: 4px;
  color: var(--vt-burgundy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.filters-clear-all:hover {
  background: var(--vt-burgundy);
  color: #fff;
}


/* =========================================================
   SHOP PAGE - JCF PRICE RANGE SLIDER FULL WIDTH FIX
   Targets the JCF-enhanced slider elements
========================================================= */

/* =========================================================
   SHOP PAGE - JCF PRICE RANGE SLIDER (DYNAMIC & CLEAN)
========================================================= */

/* Force the JCF range wrapper to full width */
.filters .jcf-range {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  touch-action: pan-y;
  height: 30px !important;
  position: relative !important;
  background: transparent !important;
  /* REMOVES GREY BORDER */
  border: none !important;
  box-shadow: none !important;
}

.filters .jcf-range-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  position: relative !important;
  height: 100% !important;
  background: transparent !important;
  border: none !important;
}

.filters .jcf-range-display-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  background: transparent !important;
}

/* The track is the actual slider bar */
.filters .jcf-range-track {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  height: 6px !important;
  /* FIX: The gradient is now set by JavaScript based on the thumb position */
  background: linear-gradient(to right, var(--vt-burgundy) var(--fill, 0%), var(--vt-border) var(--fill, 0%)) !important;
  border-radius: 3px !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

/* The handle (thumb) positioning */
.filters .jcf-range-handle {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: var(--vt-burgundy, #6f1023) !important;
  cursor: pointer !important;
  border: 3px solid #fff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  z-index: 2 !important;
  margin-left: -10px !important;
}

/* Hide the original range input */
.filters .jcf-range .jcf-hidden {
  display: none !important;
}

/* Responsive - below 1025px */
@media (max-width: 1025px) {
  .listing-layout {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .listing-layout .filters {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px !important;
    box-sizing: border-box !important;
  }

  .filters .jcf-range,
  .filters .jcf-range-wrapper,
  .filters .jcf-range-track {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Additional tablet support */
@media (max-width: 768px) {

  .filters .jcf-range,
  .filters .jcf-range-wrapper,
  .filters .jcf-range-track {
    width: 100% !important;
    max-width: 100% !important;
  }
}



/* Container */
.slider-container {
  padding: 15px 0;
  /* Add breathing room */
}

/* Header */
.header {
  font-weight: bold;
}

/* The Slider Track */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  border-radius: 5px;
  /* Dynamic background based on value (e.g. 100% in this case) */
  background: linear-gradient(to right, #800020 0%, #800020 100%, #e0e0e0 100%, #e0e0e0 100%);
}

input[type=range]::-webkit-slider-thumb {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #800020;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6px;
  /* Adjust to center on the track */
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Price Labels */
.labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  /* Push labels away from the track */
  font-size: 14px;
}

/* =========================================================
   PRICE RANGE SLIDER - FULL UI FIX (FORCED)
========================================================= */

/* Force the price filter container */
/* The range input container */
.filters .price-filter {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The range input itself */
input[type=range].filter-range {
  width: 100%;
  margin: 0;
  padding: 0;
  /* Remove any default line-height or vertical-align */
  vertical-align: middle;
}

/* Track - make sure it's centered */
input[type=range].filter-range::-webkit-slider-runnable-track {
  width: 100% !important;
  height: 6px !important;
  cursor: pointer !important;
  border-radius: 5px !important;
  background: var(--vt-border) !important;
  /* Remove the gradient - it's wrong for a single thumb slider */
}

/* Thumb - center it precisely */
input[type=range].filter-range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 20px !important;
  width: 20px !important;
  border-radius: 50% !important;
  background: var(--vt-burgundy) !important;
  cursor: pointer !important;
  /* CRITICAL: (20px thumb - 6px track) / 2 = 7px offset */
  margin-top: -9px !important;
  border: 3px solid #fff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Price Labels */
.filters .price-min-max {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  font-size: 13px !important;
  color: var(--vt-muted) !important;
  margin-top: 8px !important;
  padding: 0 !important;
  font-weight: 600 !important;
}

/* Firefox support */
input[type=range].filter-range::-moz-range-track {
  width: 100% !important;
  height: 6px !important;
  cursor: pointer !important;
  border-radius: 5px !important;
  background: var(--vt-border) !important;
}

input[type=range].filter-range::-moz-range-progress {
  background: var(--vt-burgundy) !important;
  height: 6px !important;
  border-radius: 5px !important;
}

input[type=range].filter-range::-moz-range-thumb {
  height: 20px !important;
  width: 20px !important;
  border: 3px solid #fff !important;
  border-radius: 50% !important;
  background: var(--vt-burgundy) !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

/* Specific styling for the selected value label */
.filters .price-min-max #price-range-value {
  color: var(--vt-burgundy) !important;
  font-weight: 700 !important;
}

/* The visible track bar */
input[type=range].filter-range::-webkit-slider-runnable-track {
  width: 100% !important;
  height: 6px !important;
  cursor: pointer !important;
  border-radius: 5px !important;
  background: linear-gradient(to right, var(--vt-burgundy) 0%, var(--vt-burgundy) 100%, var(--vt-border) 100%, var(--vt-border) 100%) !important;
}

/* The Knob (Thumb) - FIX VERTICAL CENTERING */
input[type=range].filter-range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 20px !important;
  width: 20px !important;
  border-radius: 50% !important;
  background: var(--vt-burgundy) !important;
  cursor: pointer !important;
  /* FIX: (20px thumb - 6px track) / 2 = 7px. 
       We need to offset by 7px to center, but since the thumb has a 3px border,
       we subtract the border width: 7px - 3px = 4px is NOT quite right.
       The exact value needs to be: (thumb_height - track_height) / 2 
       = (20 - 6) / 2 = 7px.
       BUT with a 3px border on each side, the total visual thumb is 20px + 6px = 26px.
       So the offset should be: (26 - 6) / 2 = 10px.
       However, the actual thumb element is 20px, and the border is drawn outside that.
       The correct margin-top = (20px - 6px) / 2 = 7px - border (3px) = 4px.
       Let's use -7px which is the standard value, and adjust if needed.
    */
  margin-top: -7px !important;
  border: 3px solid #fff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Firefox support - fix the thumb too */
input[type=range].filter-range::-moz-range-thumb {
  height: 20px !important;
  width: 20px !important;
  border: 3px solid #fff !important;
  border-radius: 50% !important;
  background: var(--vt-burgundy) !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}


/* ---- Toolbar ---- */
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.shop-toolbar .results-count {
  font-size: 13px;
  color: var(--vt-muted);
}

.shop-toolbar .toolbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.view-toggle {
  display: flex;
  gap: 6px;
}

.view-toggle button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--vt-border);
  background: #fff;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--vt-muted);
  padding: 0;
}

.view-toggle button.active {
  border-color: var(--vt-burgundy);
  color: var(--vt-burgundy);
  background: var(--vt-champagne);
}

/* Cosmetic list view (toggled client-side; resets to grid on reload) */
.product-grid.is-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.product-grid.is-list .product-card {
  flex-direction: row;
  align-items: stretch;
}

.product-grid.is-list .product-image {
  width: 160px;
  height: 160px;
  flex-shrink: 0;
}

.product-grid.is-list .product-body {
  text-align: left;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  flex-grow: 1;
}

.product-grid.is-list .product-body .btn {
  width: auto;
  margin-top: 0;
  margin-left: auto;
}

@media (max-width: 650px) {
  .product-grid.is-list .product-card {
    flex-direction: column;
  }

  .product-grid.is-list .product-image {
    width: 100%;
    height: 200px;
  }

  .product-grid.is-list .product-body {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .product-grid.is-list .product-body .btn {
    margin-left: 0;
  }
}

.listing-layout .filters {
  height: 100% !important;
  align-self: stretch !important;
  box-sizing: border-box;
}

/* ---- Wine Club Banner (3-column horizontal layout) ---- */
.wine-club-banner--strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 40px 50px;
  background: black;
  border-radius: 12px;
  color: white;
  position: relative;
  overflow: hidden;
}

/* Decorative elements */
.wine-club-banner--strip::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -10%;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  pointer-events: none;
}

.wine-club-banner--strip::after {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -5%;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  pointer-events: none;
}

/* === CLUB BADGE (Left) === */
.club-badge {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  padding-right: 30px;
}

/* Vertical line after club-badge */
.club-badge::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 70px;
  background: rgba(255, 255, 255, 0.2);
}

.club-seal {
  width: 65px;
  height: 65px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--vt-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vt-gold);
  background: rgba(201, 150, 62, 0.08);
}

.club-seal svg {
  width: 60px;
  height: 60px;
}

.wine-club-banner--strip .club-badge h2 {
  margin: 0;
  font-family: Georgia, 'Cinzel', serif;
  font-size: 2rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  font-weight: 200;
}

/* === CLUB COPY (Center) === */
/* =========================================================
WINE CLUB BANNER - WIDER VERSION
   ========================================================= */

/* Make the club section wider inside the container */
.club-section-wider {
  margin: 50px 0 30px;
  padding: 0;
  width: 100%;
}

/* Override container constraints to make banner wider */
.club-section-wider .wine-club-banner--wider {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 40px 50px;
  background: linear-gradient(135deg, #2a0a10, #4a121c);
  border-radius: 12px;
  color: white;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

/* Decorative elements */
.club-section-wider .wine-club-banner--wider::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -10%;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  pointer-events: none;
}

.club-section-wider .wine-club-banner--wider::after {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -5%;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  pointer-events: none;
}

/* === CLUB BADGE (Left) === */
.club-section-wider .club-badge {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  padding-right: 30px;
}

/* Vertical line after club-badge */
.club-section-wider .club-badge::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 70px;
  background: rgba(255, 255, 255, 0.2);
}

.club-section-wider .club-seal {
  width: 65px;
  height: 65px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--vt-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vt-gold);
  background: rgba(201, 150, 62, 0.08);
}

.club-section-wider .club-seal svg {
  width: 60px;
  height: 60px;
}

.club-section-wider .club-badge h2 {
  margin: 0;
  font-family: Georgia, 'Cinzel', serif;
  font-size: 2rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  font-weight: 200;
}

/* === CLUB COPY (Center) - LEFT ALIGNED === */
.club-section-wider .club-copy--left {
  flex: 1 1 380px;
  min-width: 200px;
  text-align: left;
  /* LEFT ALIGNED */
  position: relative;
  z-index: 1;
  padding: 0 30px;
}

/* Vertical line after club-copy */
.club-section-wider .club-copy--left::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 70px;
  background: rgba(255, 255, 255, 0.2);
}

.club-section-wider .club-copy--left p {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 17px;
  line-height: 1.6;
  font-family: Georgia, 'Cinzel', serif;
  text-align: left;
  /* LEFT ALIGNED */
}

.club-section-wider .club-copy--left .gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 28px;
  border: 1px solid var(--vt-gold);
  border-radius: 5px;
  background: var(--vt-gold);
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  /* Button stays left-aligned with text */
  align-self: flex-start;
}

.club-section-wider .club-copy--left .gold:hover {
  background: #d4a84a;
  border-color: #d4a84a;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201, 150, 62, 0.35);
}

/* === CLUB PERKS (Right) === */
.club-section-wider .club-perks {
  display: flex;
  gap: 30px;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  padding-left: 30px;
}

.club-section-wider .perk {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  min-width: 80px;
}

.club-section-wider .perk i {
  font-size: 25px;
  color: var(--vt-gold);
  stroke: var(--vt-gold);
}

.club-section-wider .perk span {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 100;
  letter-spacing: 0.02em;
  font-family: Georgia, 'Cinzel', serif;
}

.club-section-wider .perk span br {
  display: block;
}

/* =========================================================
   RESPONSIVE - WIDER BANNER
   ========================================================= */

/* 1200px - 1100px: Slight reduction */
@media (max-width: 1200px) {
  .club-section-wider .wine-club-banner--wider {
    padding: 35px 40px;
    gap: 25px;
  }

  .club-section-wider .club-badge {
    padding-right: 25px;
  }

  .club-section-wider .club-copy--left {
    padding: 0 25px;
  }

  .club-section-wider .club-perks {
    padding-left: 25px;
    gap: 25px;
  }

  .club-section-wider .club-seal {
    width: 60px;
    height: 60px;
  }

  .club-section-wider .club-seal svg {
    width: 50px;
    height: 50px;
  }

  .club-section-wider .club-badge h2 {
    font-size: 1.8rem;
  }

  .club-section-wider .perk i {
    font-size: 22px;
  }
}

/* 1100px - 994px: Tablet landscape */
@media (max-width: 1100px) {
  .club-section-wider .wine-club-banner--wider {
    padding: 30px 32px;
    gap: 20px;
  }

  .club-section-wider .club-badge {
    padding-right: 20px;
    gap: 14px;
  }

  .club-section-wider .club-badge::after {
    height: 55px;
  }

  .club-section-wider .club-copy--left {
    padding: 0 20px;
  }

  .club-section-wider .club-copy--left::after {
    height: 55px;
  }

  .club-section-wider .club-perks {
    padding-left: 20px;
    gap: 20px;
  }

  .club-section-wider .perk {
    min-width: 65px;
  }

  .club-section-wider .perk i {
    font-size: 20px;
  }

  .club-section-wider .perk span {
    font-size: 10px;
  }

  .club-section-wider .club-badge h2 {
    font-size: 1.4rem;
  }

  .club-section-wider .club-seal {
    width: 50px;
    height: 50px;
  }

  .club-section-wider .club-seal svg {
    width: 40px;
    height: 40px;
  }

  .club-section-wider .club-copy--left p {
    font-size: 13px;
  }

  .club-section-wider .club-copy--left .gold {
    padding: 8px 18px;
    font-size: 11px;
    min-height: 38px;
  }
}

/* 994px - 860px: Tablet portrait */
@media (max-width: 994px) and (min-width: 861px) {
  .club-section-wider .wine-club-banner--wider {
    padding: 24px 20px;
    gap: 15px;
    border-radius: 10px;
    flex-wrap: nowrap;
  }

  .club-section-wider .club-badge {
    padding-right: 15px;
    gap: 10px;
    flex: 0 0 auto;
  }

  .club-section-wider .club-badge::after {
    height: 45px;
  }

  .club-section-wider .club-seal {
    width: 42px;
    height: 42px;
    border-width: 1.5px;
  }

  .club-section-wider .club-seal svg {
    width: 30px;
    height: 30px;
  }

  .club-section-wider .club-badge h2 {
    font-size: 0.95rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }

  .club-section-wider .club-copy--left {
    padding: 0 15px;
    flex: 1 1 200px;
    min-width: 140px;
  }

  .club-section-wider .club-copy--left::after {
    height: 45px;
  }

  .club-section-wider .club-copy--left p {
    font-size: 11px;
    line-height: 1.4;
    margin: 0 0 8px;
  }

  .club-section-wider .club-copy--left .gold {
    padding: 6px 14px;
    font-size: 9px;
    min-height: 30px;
    letter-spacing: 0.04em;
    border-width: 1px;
  }

  .club-section-wider .club-perks {
    padding-left: 15px;
    gap: 12px;
    flex: 0 0 auto;
  }

  .club-section-wider .perk {
    min-width: 45px;
    gap: 4px;
  }

  .club-section-wider .perk i {
    font-size: 18px;
  }

  .club-section-wider .perk span {
    font-size: 8px;
    line-height: 1.2;
    letter-spacing: 0.01em;
  }

  /* Hide decorative circles on tablet */
  .club-section-wider .wine-club-banner--wider::before,
  .club-section-wider .wine-club-banner--wider::after {
    display: none;
  }
}

/* 860px and below: Mobile - stack vertically */
@media (max-width: 860px) {
  .club-section-wider .wine-club-banner--wider {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
    gap: 20px;
  }

  /* Remove all vertical lines on mobile */
  .club-section-wider .club-badge::after,
  .club-section-wider .club-copy--left::after {
    display: none;
  }

  .club-section-wider .club-badge {
    flex-direction: column;
    gap: 12px;
    padding-right: 0;
  }

  .club-section-wider .club-badge h2 {
    white-space: normal;
    font-size: 1.8rem;
  }

  .club-section-wider .club-seal {
    width: 60px;
    height: 60px;
  }

  .club-section-wider .club-seal svg {
    width: 50px;
    height: 50px;
  }

  /* Center the club-copy on mobile */
  .club-section-wider .club-copy--left {
    flex: none;
    width: 100%;
    padding: 0;
    text-align: center;
    /* Center on mobile */
  }

  .club-section-wider .club-copy--left p {
    text-align: center;
    /* Center on mobile */
    font-size: 15px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .club-section-wider .club-copy--left .gold {
    align-self: center;
    /* Center button on mobile */
    padding: 10px 28px;
    font-size: 12px;
    min-height: 42px;
  }

  .club-section-wider .club-perks {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 30px;
    width: 100%;
    padding-left: 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .club-section-wider .perk {
    flex: 0 0 calc(33.33% - 20px);
    min-width: 70px;
  }

  .club-section-wider .perk i {
    font-size: 28px;
  }

  .club-section-wider .perk span {
    font-size: 12px;
  }

  /* Restore decorative circles on mobile */
  .club-section-wider .wine-club-banner--wider::before,
  .club-section-wider .wine-club-banner--wider::after {
    display: block;
  }
}

/* Small mobile */
@media (max-width: 500px) {
  .club-section-wider .wine-club-banner--wider {
    padding: 24px 16px;
  }

  .club-section-wider .club-seal {
    width: 48px;
    height: 48px;
  }

  .club-section-wider .club-seal svg {
    width: 35px;
    height: 35px;
  }

  .club-section-wider .club-badge h2 {
    font-size: 1.4rem;
  }

  .club-section-wider .club-copy--left p {
    font-size: 13px;
  }

  .club-section-wider .club-copy--left .gold {
    width: 100%;
    padding: 11px 16px;
    font-size: 11px;
  }

  .club-section-wider .club-perks {
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
  }

  .club-section-wider .perk {
    flex: none;
    flex-direction: row;
    gap: 14px;
    justify-content: center;
    min-width: 0;
    width: 100%;
  }

  .club-section-wider .perk span {
    font-size: 12px;
    text-align: left;
  }

  .club-section-wider .perk span br {
    display: inline;
  }

  .club-section-wider .perk i {
    font-size: 22px;
    flex-shrink: 0;
  }
}

/* ---- Numbered pagination ---- */
.vt-shop-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}

.vt-shop-pagination li {
  margin: 0;
}

.vt-shop-pagination a,
.vt-shop-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid var(--vt-border);
  color: var(--vt-text);
  text-decoration: none;
  font-size: 13px;
}

.vt-shop-pagination .active span {
  background: var(--vt-burgundy-dark);
  border-color: var(--vt-burgundy-dark);
  color: #fff;
}

.vt-shop-pagination .disabled span {
  color: var(--vt-border);
  cursor: not-allowed;
  border-color: transparent;
}

.vt-shop-pagination a:hover {
  border-color: var(--vt-burgundy);
  color: var(--vt-burgundy);
}


/* =========================================================
WINE CLUB PLANS
========================================================= */

.club-plans-section {
  padding: 60px 0 80px;
  background: #fff;
}

.club-plans-section .section-title {
  text-align: center;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vt-text, #1b1716);
  margin: 0 0 45px;
  line-height: 1.2;
}

.club-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1140px;
  margin: 0 auto;
}

.plan-card {
  background: #fff;
  border: 1px solid var(--vt-border, #eadfce);
  border-radius: 12px;
  padding: 35px 30px 40px;
  text-align: center;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.plan-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(27, 23, 22, 0.10);
  border-color: rgba(201, 150, 62, 0.3);
}

/* Featured Plan */
.plan-card.featured {
  border-color: var(--vt-gold, #c9963e);
  transform: translateY(-6px);
  box-shadow: 0 8px 25px rgba(201, 150, 62, 0.15);
}

.plan-card.featured:hover {
  transform: translateY(-10px);
  box-shadow: 0 16px 40px rgba(201, 150, 62, 0.25);
}

/* Most Popular Ribbon */
.plan-ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: var(--vt-gold, #c9963e);
  color: #1b1008;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 24px;
  border-radius: 0 0 8px 8px;
  margin-bottom: 10px;
}

/* Plan Header */
.plan-header {
  margin-bottom: 20px;
}

.plan-name {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vt-text, #1b1716);
  margin: 0 0 6px;
}

.plan-subtitle {
  font-family: Georgia, serif;
  font-size: 14px;
  color: var(--vt-muted, #7a6f69);
  font-style: italic;
  margin: 0;
}

/* Plan Price */
.plan-price {
  margin: 0 0 24px;
  padding: 16px 0;
  border-top: 1px solid var(--vt-border, #eadfce);
  border-bottom: 1px solid var(--vt-border, #eadfce);
}

.plan-price .currency {
  font-family: Inter, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--vt-text, #1b1716);
  vertical-align: top;
  margin-right: 2px;
}

.plan-price .amount {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--vt-burgundy, #6f1023);
  line-height: 1;
}

.plan-price .period {
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--vt-muted, #7a6f69);
  margin-left: 4px;
}

/* Plan Features */
.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  text-align: left;
}

.plan-features li {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  color: var(--vt-text, #1b1716);
  padding: 6px 0 6px 28px;
  position: relative;
  line-height: 1.5;
}

.plan-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--vt-gold, #c9963e);
  font-weight: 700;
  font-size: 14px;
}

/* Plan Button */
.plan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 24px;
  /* border: 1px solid var(--vt-burgundy, #6f1023); */
  border-radius: 6px;
  background: var(--vt-burgundy, #6f1023);
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
}

.plan-btn:hover {
  background: transparent;
  color: var(--vt-burgundy, #6f1023);
  border: 1px solid var(--vt-burgundy, #6f1023);
}

.plan-btn.gold {
  background: var(--vt-gold, #c9963e);
  border-color: var(--vt-gold, #c9963e);
  color: #fff;
}

.plan-btn.gold:hover {
  background: #d4a84a;
  border-color: #d4a84a;
  color: #1b1008;
}

/* =========================================================
   RESPONSIVE - WINE CLUB PLANS
========================================================= */

/* Tablet Landscape */
@media (max-width: 1100px) {
  .club-plans-grid {
    gap: 24px;
    padding: 0 20px;
  }

  .plan-name {
    font-size: 1.5rem;
  }

  .plan-price .amount {
    font-size: 2.8rem;
  }
}

/* Tablet Portrait */
@media (max-width: 900px) {
  .club-plans-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 600px;
  }

  .plan-card.featured {
    transform: none;
  }

  .plan-card.featured:hover {
    transform: translateY(-6px);
  }

  .club-plans-section .section-title {
    font-size: 2rem;
    margin-bottom: 35px;
  }
}

/* Mobile */
@media (max-width: 650px) {
  .club-plans-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    gap: 20px;
  }

  .club-plans-section {
    padding: 40px 0 60px;
  }

  .club-plans-section .section-title {
    font-size: 1.6rem;
    margin-bottom: 28px;
  }

  .plan-card {
    padding: 28px 20px 32px;
  }

  .plan-name {
    font-size: 1.3rem;
  }

  .plan-price .amount {
    font-size: 2.4rem;
  }

  .plan-features li {
    font-size: 12px;
    padding: 5px 0 5px 24px;
  }

  .plan-btn {
    min-height: 44px;
    font-size: 11px;
  }

  .plan-ribbon {
    font-size: 9px;
    padding: 5px 18px;
  }
}

/* Small Mobile */
@media (max-width: 400px) {
  .plan-card {
    padding: 22px 16px 28px;
  }

  .plan-price .amount {
    font-size: 2rem;
  }

  .plan-features li {
    font-size: 11px;
  }
}

/* Plan Icons */
.plan-icon {
  margin-bottom: 12px;
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.plan-icon .icon-wrapper {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid var(--vt-gold, #c9963e);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  background: rgba(201, 150, 62, 0.05);
}

.plan-icon i {
  font-size: 30px;
  color: var(--vt-gold, #c9963e);
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
}

.plan-card:hover .icon-wrapper {
  border-color: var(--vt-burgundy, #6f1023);
  background: rgba(201, 150, 62, 0.12);
  transform: scale(1.05);
}

.plan-card:hover .plan-icon i {
  transform: scale(1.1);
  color: var(--vt-burgundy, #6f1023);
}

/* Featured plan icon - slightly larger and brighter */
.plan-card.featured .icon-wrapper {
  width: 80px;
  height: 80px;
  border-color: var(--vt-gold, #c9963e);
  background: rgba(201, 150, 62, 0.1);
  box-shadow: 0 0 20px rgba(201, 150, 62, 0.15);
}

.plan-card.featured .plan-icon i {
  font-size: 34px;
  color: var(--vt-gold, #c9963e);
}

.plan-card.featured:hover .icon-wrapper {
  border-color: #b8860b;
  background: rgba(201, 150, 62, 0.2);
  box-shadow: 0 0 30px rgba(201, 150, 62, 0.25);
}

.plan-card.featured:hover .plan-icon i {
  color: #b8860b;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .plan-icon .icon-wrapper {
    width: 60px;
    height: 60px;
  }

  .plan-icon i {
    font-size: 26px;
  }

  .plan-card.featured .icon-wrapper {
    width: 70px;
    height: 70px;
  }

  .plan-card.featured .plan-icon i {
    font-size: 30px;
  }
}

@media (max-width: 650px) {
  .plan-icon .icon-wrapper {
    width: 56px;
    height: 56px;
  }

  .plan-icon i {
    font-size: 24px;
  }

  .plan-card.featured .icon-wrapper {
    width: 64px;
    height: 64px;
  }

  .plan-card.featured .plan-icon i {
    font-size: 28px;
  }
}

@media (max-width: 400px) {
  .plan-icon .icon-wrapper {
    width: 50px;
    height: 50px;
  }

  .plan-icon i {
    font-size: 20px;
  }

  .plan-card.featured .icon-wrapper {
    width: 56px;
    height: 56px;
  }

  .plan-card.featured .plan-icon i {
    font-size: 24px;
  }
}

.experience-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 5px;
  margin-bottom: 40px;
}

.experience-divider span {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--vt-gold, #c9963e);
  opacity: 0.6;
}

.experience-divider i {
  font-style: normal;
  color: var(--vt-gold, #c9963e);
  font-size: 0.7rem;
}


/* =========================================================
WINE CLUB BENEFITS - 3 COLUMN LAYOUT
========================================================= */

.club-benefits-section {
  padding: 70px 0 10px;
}

.benefits-layout {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 1.2fr;
  gap: 50px;
  align-items: start;
}

/* =========================================================
COLUMN 1: MEMBER BENEFITS
========================================================= */

.benefits-header {
  margin-bottom: 30px;
}

.benefits-eyebrow {
  display: block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vt-gold, #c9963e);
  margin-bottom: 6px;
}

.benefits-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--vt-text, #1b1716);
  margin: 0;
  line-height: 1.2;
}

.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 8px;
  /* background: #fff;
    border: 1px solid var(--vt-border, #eadfce);
    border-radius: 10px; */
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.benefit-item:hover {
  transform: translateX(4px);
  /* box-shadow: 0 4px 16px rgba(27, 23, 22, 0.06);
    border-color: rgba(201, 150, 62, 0.3); */
}

.benefit-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--vt-gold, #c9963e);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 150, 62, 0.06);
  transition: all 0.3s ease;
}

.benefit-item:hover .benefit-icon {
  border-color: var(--vt-burgundy, #6f1023);
  background: rgba(201, 150, 62, 0.12);
}

.benefit-icon i {
  font-size: 18px;
  color: var(--vt-gold, #c9963e);
  transition: color 0.3s ease;
}

.benefit-item:hover .benefit-icon i {
  color: var(--vt-burgundy, #6f1023);
}

.benefit-content {
  flex: 1;
}

.benefit-name {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--vt-text, #1b1716);
  margin: 0 0 4px;
}

.benefit-description {
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--vt-muted, #7a6f69);
  margin: 0;
}

/* =========================================================
COLUMN 2: HOW IT WORKS
========================================================= */

.how-column {
  padding: 0 20px;
  border-left: 1px solid var(--vt-border, #eadfce);
  border-right: 1px solid var(--vt-border, #eadfce);
}

.how-header {
  margin-bottom: 30px;
}

.how-eyebrow {
  display: block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vt-gold, #c9963e);
  margin-bottom: 6px;
}

.how-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--vt-text, #1b1716);
  margin: 0;
  line-height: 1.2;
}

.steps-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.step-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.step-number {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--vt-burgundy, #6f1023);
  color: #fff;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background 0.3s ease;
}

.step-item:hover .step-number {
  transform: scale(1.08);
  background: var(--vt-gold, #c9963e);
}

.step-content {
  flex: 1;
  padding-top: 4px;
}

.step-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--vt-text, #1b1716);
  margin: 0 0 4px;
}

.step-description {
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--vt-muted, #7a6f69);
  margin: 0;
}

.explore-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 24px;
  margin-top: 28px;
  background: var(--vt-burgundy, #6f1023);
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid var(--vt-burgundy, #6f1023);
  transition: all 0.3s ease;
}

.explore-btn:hover {
  /* background: var(--vt-burgundy-dark, #3d0711); */
  color: #fff;
  border-color: var(--vt-burgundy-dark, #3d0711);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(111, 16, 35, 0.25);
}


.gift-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Gift Column with Background */
.gift-column {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px 16px 16px 16px;
  overflow: hidden;
  color: #fff;
  min-height: 280px;
  flex-shrink: 0;
}

/* Dark overlay for better text readability */
.gift-column::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(0, 0, 0, 0.75) 0%,
      rgba(0, 0, 0, 0.4) 50%,
      rgba(0, 0, 0, 0.65) 100%);
  border-radius: 16px 16px 0 0;
  z-index: 1;
}

.gift-overlay {
  position: relative;
  z-index: 2;
  padding: 35px 30px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 280px;
}

.gift-header {
  margin-bottom: 12px;
}

.gift-eyebrow {
  display: block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vt-gold, #c9963e);
  margin-bottom: 4px;
}

.gift-title {
  font-family: Georgia, serif;
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

.gift-description {
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 18px;
}

.gift-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 28px;
  background: var(--vt-gold, #c9963e);
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid var(--vt-gold, #c9963e);
  transition: all 0.3s ease;
  align-self: flex-start;
}

.gift-btn:hover {
  background: #d4a84a;
  border-color: #d4a84a;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(201, 150, 62, 0.35);
}

.gift-btn i {
  font-size: 14px;
  transition: transform 0.3s ease;
}

.gift-btn:hover i {
  transform: translateX(4px);
}

/* =========================================================
   GIFT FEATURES - Below gift column (within same column)
========================================================= */

.gift-features {
  list-style: none;
  padding: 0 20px 20px;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  flex: 1;
  align-content: flex-start;
}

.gift-feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 10px;
  border-radius: 8px;
  transition: background 0.3s ease, transform 0.3s ease;
}

.gift-feature-item:hover {
  background: var(--vt-ivory, #fbf7ef);
  transform: translateY(-2px);
}

.gift-feature-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(201, 150, 62, 0.1);
  border: 2px solid var(--vt-gold, #c9963e);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.gift-feature-item:hover .gift-feature-icon {
  background: rgba(201, 150, 62, 0.2);
  border-color: var(--vt-burgundy, #6f1023);
}

.gift-feature-icon i {
  font-size: 16px;
  color: var(--vt-gold, #c9963e);
  transition: color 0.3s ease;
}

.gift-feature-item:hover .gift-feature-icon i {
  color: var(--vt-burgundy, #6f1023);
}

.gift-feature-content {
  flex: 1;
}

.gift-feature-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--vt-text, #1b1716);
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.gift-feature-des {
  font-family: Georgia, serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--vt-text, #1b1716);
  letter-spacing: 0.02em;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {
  .benefits-layout {
    gap: 30px;
  }

  .benefits-title,
  .how-title,
  .gift-title {
    font-size: 1.8rem;
  }

  .gift-features {
    gap: 10px;
    padding: 14px 16px 16px;
  }

  .gift-feature-icon {
    width: 36px;
    height: 36px;
  }

  .gift-feature-icon i {
    font-size: 14px;
  }

  .gift-feature-title {
    font-size: 0.8rem;
  }
}

@media (max-width: 992px) {
  .benefits-layout {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .how-column {
    border-left: none;
    border-right: none;
    padding: 0;
  }

  .gift-wrapper {
    grid-column: span 2;
  }

  .benefits-title,
  .how-title,
  .gift-title {
    font-size: 2rem;
  }

  .gift-overlay {
    padding: 30px 24px 24px;
    min-height: 250px;
  }

  .gift-column {
    min-height: 250px;
  }

  .gift-features {
    grid-template-columns: repeat(3, 1fr);
    padding: 16px 20px 18px;
  }
}

@media (max-width: 768px) {
  .club-benefits-section {
    padding: 50px 0 60px;
  }

  .benefits-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .gift-wrapper {
    grid-column: span 1;
  }

  .gift-column {
    border-radius: 16px 16px 0 0;
    min-height: 230px;
  }

  .gift-column::before {
    border-radius: 16px 16px 0 0;
  }

  .gift-overlay {
    min-height: 230px;
    padding: 28px 20px 20px;
  }

  .gift-features {
    grid-template-columns: repeat(3, 1fr);
    border-radius: 0 0 16px 16px;
    padding: 14px 16px 16px;
    gap: 10px;
  }

  .benefits-title,
  .how-title,
  .gift-title {
    font-size: 1.8rem;
  }

  .benefit-item {
    padding: 14px 16px;
  }

  .benefit-icon {
    width: 40px;
    height: 40px;
  }

  .benefit-icon i {
    font-size: 16px;
  }

  .step-number {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .gift-btn {
    width: 100%;
    justify-content: center;
  }

  .gift-feature-item {
    flex-direction: column;
    text-align: center;
    padding: 6px 4px;
    gap: 6px;
  }

  .gift-feature-icon {
    width: 32px;
    height: 32px;
  }

  .gift-feature-icon i {
    font-size: 13px;
  }

  .gift-feature-title {
    font-size: 0.9rem;
  }

  .gift-feature-des {
    font-size: 0.75rem;
  }
}

@media (max-width: 500px) {
  .gift-features {
    grid-template-columns: repeat(3, 1fr);
    padding: 12px 12px 14px;
    gap: 4px;
  }

  .gift-feature-item {
    padding: 4px 2px;
  }

  .gift-feature-icon {
    width: 28px;
    height: 28px;
  }

  .gift-feature-icon i {
    font-size: 11px;
  }

  .gift-feature-title {
    font-size: 1rem;
  }

  .gift-feature-des {
    font-size: 0.8rem;
  }

  .benefits-title,
  .how-title,
  .gift-title {
    font-size: 1.5rem;
  }

  .benefit-name,
  .step-title {
    font-size: 1.15rem;
  }

  .benefit-description,
  .step-description {
    font-size: 12px;
  }

  .benefit-item {
    padding: 12px 14px;
  }

  .gift-overlay {
    padding: 20px 16px 16px;
    min-height: 220px;
  }

  .gift-column {
    min-height: 220px;
  }

  .gift-btn {
    padding: 10px 16px;
    font-size: 11px;
  }

  .gift-description {
    font-size: 13px;
  }
}


/* =========================================================
   TESTIMONIALS + FAQ SECTION (2-Column Layout)
========================================================= */

.testimonials-faq-section {
  padding: 70px 0 80px;
  background: var(--vt-ivory, #fbf7ef);
}

.testimonials-faq-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

/* =========================================================
   COLUMN 1: TESTIMONIALS (1 Card at a time)
========================================================= */

.testimonials-column {
  position: relative;
}

.testimonials-header {
  margin-bottom: 30px;
}

.testimonials-eyebrow {
  display: block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vt-gold, #c9963e);
  margin-bottom: 6px;
}

.tfaq-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--vt-text, #1b1716);
  margin: 0;
  line-height: 1.2;
}

.tfaq-slider-wrapper {
  position: relative;
}

.tfaq-grid-wrapper {
  position: relative;
  overflow: hidden;
  padding: 0;
  /* full width card — arrows no longer live inside this padding */
}

.tfaq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  transition: opacity 0.3s ease;
}

.tfaq-grid .tfaq-card {
  text-align: left;
  padding: 40px 45px;
  background: #fff;
  border: 1px solid var(--vt-border, #eadfce);
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

.tfaq-grid .tfaq-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(27, 23, 22, 0.08);
}

.tfaq-grid .tfaq-stars {
  color: var(--vt-gold, #c9963e);
  letter-spacing: 2px;
  margin-bottom: 14px;
  font-size: 20px;
}

.tfaq-grid .tfaq-quote {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.7;
  color: var(--vt-text, #1b1716);
  margin: 0 0 14px;
  flex: 1;
}

.tfaq-grid .tfaq-name {
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--vt-muted, #7a6f69);
}

/* Arrow row, below the card */
.testimonial-nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

.testimonials-column .tfaq-arrow {
  position: static !important;
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 2px solid var(--vt-gold, #c9963e) !important;
  border-radius: 50%;
  color: var(--vt-text, #1b1716);
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  opacity: 0.85;
}

.testimonials-column .tfaq-arrow:hover {
  background: var(--vt-gold, #c9963e) !important;
  color: #fff;
  border-color: var(--vt-gold, #c9963e) !important;
  /* transform: scale(1.05);
    opacity: 1; */
}

.tfaq-arrow svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* =========================================================
   COLUMN 2: FAQ
========================================================= */

.faq-column {
  padding-left: 10px;
}

.faq-header {
  margin-bottom: 30px;
}

.faq-eyebrow {
  display: block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vt-gold, #c9963e);
  margin-bottom: 6px;
}

.faq-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--vt-text, #1b1716);
  margin: 0;
  line-height: 1.2;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: #fff;
  border: 1px solid var(--vt-border, #eadfce);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.faq-item:hover {
  border-color: rgba(201, 150, 62, 0.3);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--vt-text, #1b1716);
  text-align: left;
  gap: 16px;
  transition: color 0.3s ease;
}

.faq-question:hover {
  color: var(--vt-burgundy, #6f1023);
}

.faq-question span:first-child {
  flex: 1;
}

.faq-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--vt-gold, #c9963e);
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  transition: all 0.3s ease;
}

.faq-question[aria-expanded="true"] .faq-icon {
  background: var(--vt-burgundy, #6f1023);
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 20px;
  transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
}

.faq-answer p {
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--vt-muted, #7a6f69);
  margin: 0 0 16px 0;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {
  .testimonials-faq-layout {
    gap: 40px;
  }

  .tfaq-title,
  .faq-title {
    font-size: 1.8rem;
  }

  .tfaq-grid .tfaq-card {
    padding: 28px 24px;
    min-height: 160px;
  }

  .tfaq-grid .tfaq-quote {
    font-size: 15px;
  }

  .testimonials-column .tfaq-arrow {
    width: 34px !important;
    height: 34px !important;
  }
}

@media (max-width: 992px) {
  .testimonials-faq-layout {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .faq-column {
    padding-left: 0;
  }

  .testimonials-column .tfaq-arrow {
    width: 34px !important;
    height: 34px !important;
  }

  .tfaq-grid .tfaq-card {
    padding: 24px 24px;
    min-height: 140px;
  }

  .tfaq-title,
  .faq-title {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .testimonials-faq-section {
    padding: 50px 0 60px;
  }

  .tfaq-grid .tfaq-card {
    padding: 20px 20px;
    min-height: 120px;
  }

  .tfaq-grid .tfaq-stars {
    font-size: 16px;
  }

  .tfaq-grid .tfaq-quote {
    font-size: 14px;
  }

  .tfaq-title,
  .faq-title {
    font-size: 1.8rem;
  }

  .faq-question {
    padding: 14px 16px;
    font-size: 13px;
  }

  .faq-answer {
    padding: 0 16px;
  }

  .faq-answer p {
    font-size: 13px;
  }

  .testimonials-header,
  .faq-header {
    margin-bottom: 24px;
  }

  .testimonials-column .tfaq-arrow {
    width: 30px !important;
    height: 30px !important;
  }

  .testimonials-column .tfaq-arrow svg {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 500px) {

  .tfaq-title,
  .faq-title {
    font-size: 1.5rem;
  }

  .tfaq-grid .tfaq-card {
    padding: 16px 16px;
    min-height: 100px;
  }

  .tfaq-grid .tfaq-stars {
    font-size: 14px;
  }

  .tfaq-grid .tfaq-quote {
    font-size: 13px;
  }

  .faq-question {
    padding: 12px 14px;
    font-size: 13px;
  }

  .faq-answer {
    padding: 0 14px;
  }

  .faq-answer p {
    font-size: 12px;
  }

  .faq-icon {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }

  .testimonials-column .tfaq-arrow {
    width: 28px !important;
    height: 28px !important;
  }

  .testimonials-column .tfaq-arrow svg {
    width: 12px;
    height: 12px;
  }
}


/* =========================================================
   STAY IN THE KNOW - Newsletter Section
========================================================= */

.stay-know-section {
  padding: 22px 0;
  background: var(--vt-burgundy-dark, #3d0711);
  border-top: none;
  border-bottom: 1px solid var(--vt-gold, #c9963e);
}

.stay-know-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  text-align: left;
}

/* =========================================================
   ICON WITH DECORATIVE BORDER
========================================================= */

.stay-know-icon-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.stay-know-icon-border i {
  font-size: 35px;
  color: var(--vt-gold, #c9963e);
  transition: all 0.3s ease;
}



/* =========================================================
   TITLE
========================================================= */

.stay-know-title {
  flex-shrink: 0;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vt-cream, #f4ece0);
  margin: 0;
  white-space: nowrap;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.stay-know-description {
  flex: 1;
  min-width: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(244, 236, 224, 0.7);
  margin: 0;
  max-width: none;
}

/* =========================================================
   FORM
========================================================= */

.stay-know-form {
  flex-shrink: 0;
  max-width: 380px;
  width: 100%;
  margin: 0;
}

.stay-know-form-group {
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.3s ease;
}

.stay-know-form-group:focus-within {
  box-shadow: 0 0 0 3px rgba(201, 150, 62, 0.25);
}

.stay-know-form-group input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: none;
  background: transparent;
  color: var(--vt-text, #1b1716);
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  outline: none;
}

.stay-know-form-group input[type="email"]::placeholder {
  color: var(--vt-muted, #7a6f69);
}

.stay-know-form-group button {
  padding: 11px 24px;
  background: var(--vt-gold, #c9963e);
  color: #fff;
  border: none;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s ease, transform 0.2s ease;
}

.stay-know-form-group button:hover {
  background: #dcae5c;
}

.stay-know-form-group button:active {
  transform: scale(0.96);
}

.stay-know-error,
.stay-know-success {
  display: none;
  font-size: 12.5px;
  line-height: 1.5;
  margin-top: 8px;
  border-radius: 4px;
  padding: 6px 12px;
  font-family: Inter, system-ui, sans-serif;
  text-align: left;
}

.stay-know-error {
  color: #ff7675;
  background: rgba(255, 100, 100, 0.12);
  border: 1px solid rgba(255, 100, 100, 0.3);
}

.stay-know-success {
  color: #70e0a5;
  background: rgba(112, 224, 165, 0.12);
  border: 1px solid rgba(112, 224, 165, 0.3);
}

/* =========================================================
   RESPONSIVE
========================================================= */

/* Tablet — wrap into two rows: icon+title+desc on top, form below */
@media (max-width: 992px) {
  .stay-know-wrapper {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .stay-know-description {
    flex-basis: 100%;
    order: 4;
    margin-top: 4px;
  }

  .stay-know-form {
    flex-basis: 100%;
    order: 5;
    max-width: 100%;
    margin-top: 12px;
  }
}

/* Mobile — stack everything, center it */
@media (max-width: 600px) {
  .stay-know-section {
    padding: 28px 0;
  }

  .stay-know-wrapper {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }

  .stay-know-title {
    white-space: normal;
  }

  .stay-know-description {
    order: 0;
    text-align: center;
  }

  .stay-know-form {
    order: 0;
  }

  .stay-know-form-group {
    flex-direction: column;
    border-radius: 6px;
  }

  .stay-know-form-group input[type="email"] {
    padding: 13px 16px;
    border-bottom: 1px solid var(--vt-border, #eadfce);
    font-size: 14px;
  }

  .stay-know-form-group button {
    padding: 13px 16px;
    font-size: 12px;
    width: 100%;
  }

  .stay-know-error {
    padding: 0 12px;
  }
}

/* =========================================================
   TESTIMONIAL CARD — boxed variant (used by testimonial-slider
   component when boxed=true, e.g. the FAQ page's left column)
========================================================= */

.testimonial-card--boxed {
  text-align: left;
  background: #fff;
  border: 1px solid var(--vt-border, #eadfce);
  border-radius: 12px;
  padding: 40px 45px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card--boxed:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(27, 23, 22, 0.08);
}

.testimonial-card--boxed .testimonial-quote {
  font-size: 18px;
}

/* FAQ left column's own heading (kept separate from the shared
   .testimonials-title used by the plain/home slider, since this
   one is left-aligned and a different size) */
.faq-col-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--vt-text, #1b1716);
  margin: 0;
  line-height: 1.2;
}

@media (max-width: 992px) {
  .faq-col-title {
    font-size: 2rem;
  }

  .testimonial-card--boxed {
    padding: 28px 32px;
    min-height: 160px;
  }
}

@media (max-width: 768px) {
  .faq-col-title {
    font-size: 1.8rem;
  }

  .testimonial-card--boxed {
    padding: 22px 24px;
    min-height: 140px;
  }

  .testimonial-card--boxed .testimonial-quote {
    font-size: 15px;
  }
}

@media (max-width: 500px) {
  .faq-col-title {
    font-size: 1.5rem;
  }

  .testimonial-card--boxed {
    padding: 18px 18px;
    min-height: 120px;
  }

  .testimonial-card--boxed .testimonial-quote {
    font-size: 14px;
  }
}

/* Compact three-card layout for the Wine Club testimonials only. */
.testimonials-faq-section .testimonials-slider-wrapper {
  max-width: none;
  padding: 0 46px;
  position: relative;
}

.testimonials-faq-section .testimonial-arrow {
  width: 36px !important;
  height: 36px !important;
}

.testimonials-faq-section .testimonial-arrow svg {
  width: 16px;
  height: 16px;
}

.testimonials-faq-section .testimonial-arrow.prev,
.testimonials-faq-section .slider-arrow.prev,
.testimonials-faq-section .testimonial-arrow[id$="Prev"] {
  left: 0 !important;
  right: auto !important;
}

.testimonials-faq-section .testimonial-arrow.next,
.testimonials-faq-section .slider-arrow.next,
.testimonials-faq-section .testimonial-arrow[id$="Next"] {
  right: 0 !important;
  left: auto !important;
}

.testimonials-faq-section .testimonials-grid {
  gap: 12px;
}

.testimonials-faq-section .testimonial-card--boxed {
  padding: 22px 12px;
  min-height: 0;
}

.testimonials-faq-section .testimonial-stars {
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 8px;
  text-align: center;
}

.testimonials-faq-section .testimonial-quote,
.testimonials-faq-section .testimonial-card--boxed .testimonial-quote {
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 8px;
  text-align: center;
}

.testimonials-faq-section .testimonial-name {
  font-size: 11px;
  text-align: center;
}

@media (min-width: 581px) {
  .testimonials-faq-section .testimonials-grid {
    gap: 14px;
  }
}

@media (max-width: 580px) {
  .testimonials-faq-section .testimonials-grid {
    gap: 12px !important;
  }
}


/* =========================================================
   SOURCING WITH PURPOSE
========================================================= */

.purpose-section {
  padding: 20px 0;
  background: #fff;
}

.purpose-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.purpose-image-col {
  width: 100%;
}

.purpose-img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  /* border-radius: 4px; */
  display: block;
}

.purpose-content-col {
  padding-left: 60px;
  padding-right: max(28px, calc((100vw - 1280px) / 2));
}

.purpose-eyebrow {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vt-gold);
  margin-bottom: 10px;
}

.purpose-title {
  font-family: serif;
  font-size: 3.5rem;
  font-weight: 500;
  color: var(--vt-text);
  margin: 0 0 18px;
  line-height: 1.2;
}

.purpose-desc {
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--vt-muted);
  max-width: 520px;
  margin: 0 0 32px;
}

.purpose-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.purpose-feature {
  text-align: center;
  padding-left: 24px;
  border-left: 1px solid var(--vt-border);
}

.purpose-feature:first-child {
  padding-left: 0;
  border-left: none;
}

.purpose-feature i {
  font-size: 35px;
  color: var(--vt-gold);
  margin-bottom: 14px;
  display: inline-block;
}

.purpose-feature h3 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vt-text);
  margin: 0 0 8px;
}

.purpose-feature p {
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--vt-muted);
  margin: 0;
}

@media (max-width: 992px) {
  .purpose-row {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .purpose-image-col,
  .purpose-content-col {
    flex: 0 0 100%;
    width: 100%;
  }

  .purpose-content-col {
    padding-left: 28px;
    padding-right: 28px;
  }

  .purpose-img {
    height: 330px;
  }

  .purpose-desc {
    max-width: none;
  }
}

@media (max-width: 600px) {
  .purpose-section {
    padding: 40px 0;
  }

  .purpose-title {
    font-size: 1.8rem;
  }

  .purpose-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 14px;
  }

  .purpose-img {
    height: 215px;
  }

  .purpose-feature:nth-child(2n+1) {
    padding-left: 0;
    border-left: none;
  }
}


/* =========================================================
   ITALY & FRANCE SECTION
========================================================= */

.italy-france-section {
  background: var(--vt-ivory);
}

.if-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1fr 1.1fr 1.2fr;
  align-items: stretch;
  min-height: 280px;
  gap: 2px;
}

.if-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 32px;
}

.if-eyebrow {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vt-gold);
  margin-bottom: 8px;
}

.if-title {
  font-family: serif;
  font-size: 3.5rem;
  color: var(--vt-text);
  font-weight: 500;
  margin: 0 0 14px;
  line-height: 1.2;
}

.if-desc {
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--vt-muted);
  margin: 0 0 22px;
}

.if-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border: 1px solid var(--vt-text);
  border-radius: 3px;
  color: var(--vt-text);
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.25s ease, color 0.25s ease;
}

.if-btn:hover {
  background: var(--vt-text);
  color: #fff;
}

.if-img-col {
  overflow: hidden;
}

.if-img-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.if-img-col2 {
  overflow: hidden;
  height: 100%;
  padding: 35px 24px 35px 0;
  /* creates the "boxed" look with ivory showing around it */
  box-sizing: border-box;
}

.if-img-col2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

.if-center-col {
  background-image: var(--if-center-bg);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
}

.if-center-col:before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.if-center-text {
  position: relative;
  z-index: 1;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  line-height: 1.6;
  margin: 0;
}

.if-center-text span {
  color: var(--vt-gold);
}

@media (max-width: 992px) {
  .if-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }

  .if-img-col:nth-child(2) {
    order: 1;
  }

  .if-text-col:nth-child(1) {
    order: 2;
  }

  .if-center-col {
    order: 3;
    grid-column: span 2;
    min-height: 200px;
  }

  .if-text-col:nth-child(4) {
    order: 4;
  }

  .if-img-col2:last-child {
    order: 5;
  }
}

@media (max-width: 651px) {
  .if-row {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .if-img-col,
  .if-img-col2 {
    width: 100%;
    height: auto;
    padding: 0;
    overflow: hidden;
  }

  .if-img-col img,
  .if-img-col2 img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    object-position: center 40%;
    display: block;
  }

  .if-center-col {
    min-height: 180px;
  }

  .if-text-col {
    padding: 32px 24px;
    text-align: center;
    align-items: center;
  }

  .if-btn {
    align-self: center;
  }
}

@media (max-width: 526px) {

  .if-img-col img,
  .if-img-col2 img {
    height: 210px;
  }

  .if-text-col {
    padding: 26px 16px;
    text-align: center;
    align-items: center;
  }



  .if-title {
    font-size: 2.5rem;
  }
}


/* =========================================================
   QUALITY VALUES SECTION
========================================================= */

.qv-section {
  background: #fff;
  margin-top: 10px;
  padding-top: 20px;
}

.qv-row {
  display: grid;
  grid-template-columns: 1fr 0.75fr 1fr 0.9fr 1fr;
  align-items: stretch;
  min-height: 280px;
}

.qv-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 32px;
}

.qv-eyebrow {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vt-gold);
  margin-bottom: 12px;
}

.qv-desc {
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--vt-muted);
  margin: 0 0 18px;
}

.qv-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.qv-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  color: var(--vt-text);
  margin-bottom: 10px;
}

.qv-checklist li i {
  color: var(--vt-gold);
  font-size: 14px;
  margin-top: 2px;
}

.qv-img-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
}

.qv-img-col img {
  max-width: 350px;
  height: 260px;
  object-fit: cover;
  display: block;
}


.qv-values-col {
  background: var(--vt-champagne);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.qv-value {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 16px;
}

.qv-value:first-of-type {
  margin-top: 0;
}

.qv-value i {
  color: var(--vt-gold);
  font-size: 24px;
  margin-top: 2px;
  flex-shrink: 0;
}

.qv-value h3 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--vt-text);
  margin: 0 0 4px;
}

.qv-value p {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--vt-muted);
  margin: 0;
}

@media (max-width: 1200px) {
  .qv-img-col img {
    max-width: 260px;
    height: 230px;
  }
}

@media (max-width: 992px) {
  .qv-img-col img {
    max-width: 310px;
    height: 280px;
  }

  .qv-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .qv-values-col {
    grid-column: span 2;
  }
}

@media (max-width: 650px) {
  .qv-row {
    display: flex;
    flex-direction: column;
  }

  .qv-img-col img {
    max-width: 100%;
    width: 100%;
    height: 260px;
  }

  .qv-text-col,
  .qv-values-col {
    padding: 28px 24px;
  }
}

.qv-row>.qv-text-col:nth-child(3) {
  padding-right: 12px;
}

.qv-row>.qv-img-col:nth-child(4) {
  padding-left: 8px;
}

@media (max-width: 992px) {

  /* Row becomes a 2-column grid here, so nth-child pairing
       still holds but padding matters less — leave as-is or
       tighten slightly if needed */
  .qv-row>.qv-text-col:nth-child(3) {
    padding-right: 32px;
  }

  .qv-row>.qv-img-col:nth-child(4) {
    padding-left: 20px;
  }
}

@media (max-width: 650px) {

  /* Row stacks into a single column on mobile, so left/right
       padding no longer creates a horizontal gap — reset to the
       normal .qv-text-col / .qv-img-col padding */
  .qv-row>.qv-text-col:nth-child(3),
  .qv-row>.qv-img-col:nth-child(4) {
    padding: 28px 24px;
  }
}


/* =========================================================
   OUR JOURNEY SECTION
========================================================= */

.journey-section {
  padding: 30px 0;
  background: var(--vt-ivory);
  border-top: 1px solid var(--vt-border);
  border-bottom: 1px solid var(--vt-border);
}

.journey-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 50px;
}

.journey-heading h2 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vt-text);
  line-height: 1.2;
  margin: 0;
}

.journey-heading-line {
  width: 60px;
  height: 1px;
  background: var(--vt-gold);
  position: relative;
}

.journey-heading-line:before {
  content: '\2726';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--vt-gold);
  font-size: 10px;
  background: var(--vt-ivory);
  padding: 0 6px;
}

.journey-row {
  display: flex;
  align-items: flex-start;
}

.journey-item {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 25px;
  text-align: left;
  padding: 0 10px;
  position: relative;
}

.journey-item:not(:last-child):after {
  content: '\2192';
  position: absolute;
  top: 10px;
  right: 0;
  color: var(--vt-gold);
  font-size: 14px;
}

.journey-icon {
  flex-shrink: 0;
  width: 26px;
  text-align: center;
}

.journey-icon i {
  color: var(--vt-gold);
  font-size: 35px;
}

.journey-year {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--vt-gold);
  margin-bottom: 6px;
}

.journey-item h3 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vt-text);
  margin: 0 0 10px;
}

.journey-item p {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: var(--vt-muted);
  margin: 0;
}

@media (max-width: 992px) {
  .journey-row {
    flex-wrap: wrap;
    row-gap: 30px;
  }

  .journey-item {
    flex: 0 0 50%;
  }

  .journey-item:nth-child(2n):after {
    display: none;
  }
}

@media (max-width: 600px) {
  .journey-item {
    flex: 0 0 100%;
  }

  .journey-item:after {
    display: none;
  }

  .journey-heading-line {
    width: 30px;
  }

  .journey-year {
    font-size: 15px;
  }

  .journey-item h3 {
    font-size: 14px;
  }

  .journey-item p {
    font-size: 14px;
    line-height: 1.7;
  }
}


/* =========================================================
   EXPLORE SECTION
========================================================= */

.explore-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  min-height: 160px;
}

.explore-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.explore-panel--light {
  background: var(--vt-ivory);
}

.explore-panel--dark {
  grid-template-columns: 1fr;
  position: relative;
  background-image: var(--explore-bg);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  padding-right: 2px;
}

.explore-panel--dark:before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(59, 10, 18, 0.92) 0%, rgba(59, 10, 18, 0.55) 70%, rgba(59, 10, 18, 0.25) 100%);
}

.explore-panel--dark .explore-text-col {
  position: relative;
  z-index: 1;
  max-width: 460px;
}

.explore-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 32px;
}

.explore-eyebrow {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vt-gold);
  margin-bottom: 8px;
}

.explore-title {
  font-family: Georgia, serif;
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 8px;
  color: var(--vt-text);
}

.explore-panel--dark .explore-title {
  color: #fff;
}

.explore-desc {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--vt-muted);
  margin: 0;
}

.explore-panel--dark .explore-desc {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 16px;
}

.explore-btn-row {
  display: flex;
  gap: 14px;
}

.explore-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 3px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.explore-btn--solid {
  background: var(--vt-burgundy-light, #7a1f2b);
  color: #fff;
  border: 1px solid var(--vt-burgundy-light, #7a1f2b);
}

.explore-btn--solid:hover {
  background: #fff;
  color: var(--vt-burgundy);
  border-color: #fff;
}

.explore-btn--outline {
  background: transparent;
  color: var(--vt-gold);
  border: 1px solid var(--vt-gold);
}

.explore-btn--outline:hover {
  background: var(--vt-gold);
  color: var(--vt-burgundy);
}

.explore-img-col {
  overflow: hidden;
}

.explore-img-col img {
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: cover;
  display: block;
}

@media (max-width: 992px) {
  .explore-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .explore-panel {
    grid-template-columns: 1fr;
  }

  .explore-img-col img {
    min-height: 170px;
  }

  .explore-text-col {
    padding: 20px 24px;
  }

  .explore-title {
    font-size: 1.5rem;
  }
}


.hero-features {
  display: flex;
  gap: 40px;
  margin-top: 28px;
}

.hero-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.hero-feature i {
  color: var(--vt-gold);
  font-size: 40px;
  margin-top: 2px;
}

.hero-feature-text h4 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vt-gold);
  margin: 0 0 4px;
}

.hero-feature-text p {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

@media (max-width: 600px) {
  .hero-features {
    flex-direction: column;
    gap: 18px;
  }
}


/* =========================================================
   MESSAGE SECTION
========================================================= */

.message-section {
  padding: 80px 0;
  background: var(--vt-ivory);
}

.message-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 40px;
  align-items: start;
}

.message-heading {
  text-align: center;
  margin-bottom: 28px;
}

.message-heading h2 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vt-text);
  margin: 0 0 10px;
}

.message-heading-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.message-heading-divider:before,
.message-heading-divider:after {
  content: '';
  width: 30px;
  height: 1px;
  background: var(--vt-gold);
}

.message-heading-divider span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--vt-gold);
  display: inline-block;
}

.message-heading p {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  color: var(--vt-muted);
  margin: 14px 0 0;
}

.contact-form-card {
  background: #fff;
  border: 1px solid var(--vt-border);
  border-radius: 6px;
  padding: 15px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 6px;
}

.form-group--full {
  grid-column: 1 / -1;
}

.form-group label {
  display: block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vt-text);
  margin-bottom: 8px;
}

.form-group label span {
  color: var(--vt-burgundy);
}

.form-group label em {
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  color: var(--vt-muted);
}

.form-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--vt-border);
  border-radius: 4px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--vt-text);
  background: #fff;
}

.form-input::placeholder {
  color: var(--vt-muted);
}

/* 1. Style the JCF Custom Box to match standard form inputs */
.message-col .jcf-select {
  width: 100% !important;
  height: 50px !important;
  /* Matched to .form-input height */
  margin: 0 !important;
  /* Matched to .form-input margin */
  border: 1px solid var(--vt-border) !important;
  border-radius: 4px !important;
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  position: relative;
  background-color: #ffffff;
  background-image: none !important;
  /* Removes conflicting background arrow */
}

/* 2. Style the Text Inside JCF to match form-input font */
.message-col .jcf-select .jcf-select-text {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 13.5px !important;
  /* Matched to .form-input font-size */
  color: var(--vt-text) !important;
  line-height: 43px !important;
  /* Matched to .form-input height */
  padding: 0 14px !important;
  /* Matched to .form-input padding */
  width: 100%;
  box-sizing: border-box;
}

/* 3. Style the JCF arrow (opener) to match the other inputs */
.message-col .jcf-select .jcf-select-opener {
  display: block !important;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23b8935a' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 3;
}

/* 4. Keep native select transparent and clickable */
.message-col select.form-input {
  opacity: 0 !important;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  z-index: 4;
  cursor: pointer;
}

textarea.form-input {
  resize: vertical;
  min-height: 120px;
}

.btn-send-message {
  display: block;
  width: auto;
  min-width: 260px;
  margin: 0 auto;
  padding: 16px 40px;
  background: var(--vt-burgundy);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease;
}

.btn-send-message:hover {
  background: var(--vt-burgundy-light, #7a1f2b);
}

.info-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--vt-border);
  border-radius: 6px;
  padding: 22px;
  margin-bottom: 16px;
}

.info-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--vt-gold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-icon i {
  color: var(--vt-gold);
  font-size: 25px;
}

.info-text h3 {
  font-family: Georgia, serif;
  font-size: 15px;
  color: var(--vt-text);
  margin: 0 0 4px;
}

.info-text p {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--vt-muted);
  margin: 0 0 6px;
}

.info-text a {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--vt-burgundy);
  text-decoration: none;
}

.order-support-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  background: #fff;
  border: 1px solid var(--vt-border);
  border-radius: 6px;
  padding: 22px;
}

.order-support-text h3 {
  font-family: serif;
  ;
  font-size: 1.8rem;
  color: var(--vt-text);
  margin: 0 0 12px;
}

.order-support-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.order-support-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--vt-text);
  margin-bottom: 8px;
}

.order-support-list li i {
  color: var(--vt-gold);
  font-size: 11px;
}

.btn-order-support {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid var(--vt-gold);
  border-radius: 4px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--vt-text);
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}

.btn-order-support:hover {
  background: var(--vt-gold);
  color: #fff;
}

.order-support-icon img {
  width: 150px;
  height: auto;
  display: block;
  opacity: 0.85;
}

@media (max-width: 992px) {
  .message-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .contact-form-card {
    padding: 24px;
  }
}

.form-group select.form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23b8935a' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 36px;
  cursor: pointer;
}


/* =========================================================
   SHIPPING & RETURN INFO SECTION
========================================================= */

.shipping-return-section {
  padding: 36px 0;
  background: var(--vt-ivory);
  border-top: 1px solid var(--vt-border);
}

.sr-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}

.sr-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 0 1 420px;
}

.sr-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--vt-gold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sr-icon i {
  color: var(--vt-gold);
  font-size: 24px;
}

.sr-text h3 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vt-text);
  margin: 0 0 6px;
}

.sr-text p {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--vt-muted);
  margin: 0 0 8px;
}

.sr-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--vt-burgundy);
  text-decoration: none;
}

.sr-link i {
  font-size: 10px;
  transition: transform 0.2s ease;
}

.sr-link:hover i {
  transform: translateX(3px);
}

.sr-divider {
  width: 1px;
  align-self: stretch;
  background: var(--vt-border);
}

@media (max-width: 768px) {
  .sr-row {
    flex-direction: column;
    gap: 28px;
  }

  .sr-divider {
    width: 60%;
    height: 1px;
  }
}


/* =========================================================
   FAQ + MAP SECTION
========================================================= */

.faq-map-section {
  padding: 70px 0;

}

.faq-map-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}

.faq-header,
.map-header {
  text-align: center;
  margin-bottom: 24px;
}

.faq-title,
.map-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vt-text);
  margin: 0 0 10px;
}

.btn-view-all-faqs {
  display: block;
  text-align: center;
  margin-top: 20px;
  padding: 14px;
  border: 1px solid var(--vt-burgundy);
  border-radius: 4px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vt-burgundy);
  text-decoration: none;
  transition: border-color 0.25s ease;
}

.btn-view-all-faqs:hover {
  border-color: var(--vt-gold);
}

.map-card {
  background: #fff;
  border: 1px solid var(--vt-border);
  border-radius: 6px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 24px;
  align-items: stretch;
}

.map-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.map-info-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.map-info-row i {
  color: var(--vt-gold);
  font-size: 20px;
  margin-top: 3px;
}

.map-info-row h4 {
  font-family: Georgia, serif;
  font-size: 14px;
  color: var(--vt-text);
  margin: 0 0 4px;
}

.map-info-row p {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--vt-muted);
  margin: 0;
}

.map-holder {
  min-height: 220px;
  border-radius: 4px;
  overflow: hidden;
}

.map-holder iframe {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 992px) {
  .faq-map-layout {
    grid-template-columns: 1fr;
  }

  .map-card {
    grid-template-columns: 1fr;
  }

  .map-holder {
    min-height: 260px;
  }
}


/* =========================================================
   CONTACT BAR SECTION
========================================================= */

.contact-bar-section {
  background: var(--vt-burgundy-dark);
  padding: 26px 0;
  border-bottom: 1px solid var(--vt-gold);
}

.contact-bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.contact-bar-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

.contact-bar-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--vt-gold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-bar-icon i {
  color: var(--vt-gold);
  font-size: 24px;
}

.contact-bar-text h3 {
  font-family: serif;
  font-size: 20px;
  font-weight: 200;
  color: #fff;
  margin: 0 0 4px;
}

.contact-bar-text p {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.contact-bar-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  border: 1px solid var(--vt-gold);
  border-radius: 3px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vt-gold);
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}

.contact-bar-btn:hover {
  background: var(--vt-gold);
  color: var(--vt-burgundy);
}

@media (max-width: 650px) {
  .contact-bar-row {
    flex-direction: column;
    text-align: center;
  }

  .contact-bar-left {
    flex-direction: column;
    text-align: center;
  }

  .contact-bar-btn {
    width: 100%;
  }
}


/* =========================================================
   PRODUCT DETAIL PAGE
========================================================= */

/* Keep the gallery compact while the product page remains two-column. */
@media (min-width: 769px) and (max-width: 1420px) {
  .gallery-layout {
    align-items: flex-start;
  }

  .gallery-main {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 2.2vw, 30px);
  }

  .gallery-main img {
    width: 100%;
    height: 100%;
    max-height: none;
  }
}

@media (min-width: 769px) and (max-width: 1000px) {
  .product-detail {
    gap: 24px;
  }

  .thumb-item {
    width: 88px;
    height: 88px;
  }

  .gallery-layout {
    gap: 12px;
  }
}

.product-detail-section {
  padding: 40px 0 90px;
}

.product-breadcrumb {
  margin-bottom: 28px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
}

.product-breadcrumb a {
  color: var(--vt-muted, #7a6f69);
  text-decoration: none;
}

.product-breadcrumb a:hover {
  color: var(--vt-burgundy);
}

.product-breadcrumb span {
  color: var(--vt-muted, #7a6f69);
  margin: 0 6px;
}

.product-breadcrumb span:last-child {
  color: var(--vt-text);
  font-weight: 600;
}

.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

/* ---------- Gallery ---------- */
.gallery-column {
  min-width: 0;
  position: sticky;
  top: 100px;
}

.gallery-layout {
  display: flex;
  gap: 16px;
}

.gallery-thumbs-vertical {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.thumb-item {
  width: 116px;
  height: 116px;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--vt-border, #eadfce);
  border-radius: 6px;
  cursor: pointer;
}

.thumb-item.active,
.thumb-item:hover {
  border-color: var(--vt-gold, #c9963e);
}

.thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.gallery-main {
  position: relative;
  flex: 1;
  background: #f8f8f8;
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  overflow: hidden;
}

.gallery-main img {
  max-width: 100%;
  max-height: 520px;
  object-fit: contain;
  transition: transform 0.35s ease;
}

.gallery-main:hover img {
  transform: scale(1.04);
}

.gallery-zoom {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--vt-border, #eadfce);
  cursor: pointer;
  color: var(--vt-text);
  z-index: 2;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(27, 23, 22, 0.12);
}

.gallery-zoom:hover,
.gallery-zoom:focus {
  background: var(--vt-burgundy, #6f1023);
  border-color: var(--vt-burgundy, #6f1023);
  color: #fff;
}

/* ---------- Info Column ---------- */
.info-column {
  min-width: 0;
}

.info-column .eyebrow {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--vt-gold, #c9963e);
  margin-bottom: 10px;
}

.info-column .product-title {
  font-size: 3.5rem;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--vt-burgundy-dark, #3d0711);
  font-family: serif;
  line-height: 1.2;
}

.product-subtitle {
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  color: var(--vt-muted, #7a6f69);
  margin: 0 0 14px;
}

.rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.product-card .rating {
  justify-content: center;
}

.rating .stars {
  color: var(--vt-gold, #c9963e);
  font-size: 15px;
  letter-spacing: 2px;
}

.rating-count {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--vt-muted, #7a6f69);
  margin-left: 6px;
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;

}

.price-tag {
  font-size: 28px;
  color: var(--vt-burgundy, #6f1023);
  font-family: Inter, system-ui, sans-serif;
}

.member-price {
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--vt-burgundy, #6f1023);
  margin: 0 0 14px;
}

.stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 20px;
}

.stock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.stock-badge.in-stock {
  color: #2e7d4f;
}

.stock-badge.in-stock .stock-dot {
  background: #2e7d4f;
}

.stock-badge.out-of-stock {
  color: var(--vt-burgundy, #6f1023);
}

.stock-badge.out-of-stock .stock-dot {
  background: var(--vt-burgundy, #6f1023);
}

.short-desc {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--vt-muted, #7a6f69);
  margin: 0 0 26px;
}

/* Spec icon row */
.spec-icon-row {
  display: flex;
  list-style: none;
  padding: 18px 0;
  margin: 0 0 30px;
  border-top: 1px solid var(--vt-border, #eadfce);
  border-bottom: 1px solid var(--vt-border, #eadfce);
}

.spec-icon-row li {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-right: 1px solid var(--vt-border, #eadfce);
}

.spec-icon-row li:last-child {
  border-right: none;
}

.spec-icon-row i {
  color: var(--vt-gold, #c9963e);
  font-size: 25px;
  margin-bottom: 4px;
}

.spec-icon-row .spec-value {
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  color: var(--vt-muted, #7a6f69);
}

.spec-icon-row .spec-label {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--vt-text);
}

/* Cart form */
.cart-form {
  display: block;
}


.qty-label {
  display: block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--vt-text);
  margin-bottom: 8px;
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--vt-border, #eadfce);
  border-radius: 5px;
  overflow: hidden;
}

.qty-btn {
  width: 38px;
  height: 46px;
  background: #fbf7ef;
  border: none;
  font-size: 16px;
  color: var(--vt-text);
  cursor: pointer;
}

.qty-btn:hover {
  background: var(--vt-gold, #c9963e);
  color: #fff;
}

.qty-input {
  width: 50px;
  height: 46px;
  border: none;
  border-left: 1px solid var(--vt-border, #eadfce);
  border-right: 1px solid var(--vt-border, #eadfce);
  text-align: center;
  font-size: 15px;
  -moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.action-btn-row {
  display: flex;
  gap: 14px;
  margin-bottom: 30px;
}

.btn-add-cart {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  background: var(--vt-burgundy-dark, #3d0711);
  color: #fff;
  border: none;
  border-radius: 5px;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-add-cart:hover {
  background: var(--vt-burgundy, #6f1023);
}

.btn-wishlist {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  background: #fff;
  color: var(--vt-gold, #c9963e);
  border: 1px solid var(--vt-gold, #c9963e);
  border-radius: 5px;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-wishlist:hover {
  background: #fbf7ef;
  color: var(--vt-gold, #c9963e);
}

.btn-wishlist.active {
  background: #fff;
  color: #b13030;
  border-color: #b13030;
}

.btn-wishlist.active:hover {
  background: #fff5f5;
  color: #922222;
  border-color: #922222;
}

.btn-wishlist.active i {
  color: #b13030;
}

.btn-wishlist.active:hover i {
  color: #922222;
}

/* Trust badges */
.trust-badges {
  display: flex;
  list-style: none;
  padding: 20px 0 0;
  margin: 0;
  border-top: 1px solid var(--vt-border, #eadfce);
  gap: 20px;
}

.trust-badges li {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.trust-badges i {
  color: var(--vt-gold, #c9963e);
  font-size: 30px;
  margin-top: 2px;
}

.trust-badges h5 {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--vt-text);
  margin: 0 0 2px;
}

.trust-badges p {
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  color: var(--vt-muted, #7a6f69);
  margin: 0;
}

/* ===== Responsive: Below 769px ===== */
@media (max-width: 768px) {
  .trust-badges {
    flex-direction: column;
    gap: 16px;
    padding: 16px 0 0;
  }

  .trust-badges li {
    flex: none;
    width: 100%;
    align-items: center;
    text-align: center;
    flex-direction: column;
    gap: 6px;
  }

  .trust-badges i {
    font-size: 28px;
    margin-top: 0;
  }

  .trust-badges h5 {
    font-size: 13px;
    text-align: center;
  }

  .trust-badges p {
    font-size: 12px;
    text-align: center;
  }

  .trust-badges li>div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

/* ---------- Quick info row ---------- */
.quick-info-band {
  /* break out of .shop-container to span the full viewport */
  width: 100vw;
  margin: 40px 0 40px calc(50% - 50vw);
  background: var(--vt-ivory, #fbf7ef);
  border-top: 1px solid var(--vt-border, #eadfce);
  border-bottom: 1px solid var(--vt-border, #eadfce);
  /* same side padding as .shop-container so content lines up with the page */
  padding: 0 50px;
  box-sizing: border-box;
}

.quick-info-row {
  display: flex;
  justify-content: space-between;
  gap: 26px;
  max-width: 1500px;
  /* 1600 - 2*50 padding, matches .shop-container */
  margin: 0 auto;
  padding: 30px 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.quick-info-item {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
}

.quick-info-icon {
  color: var(--vt-gold, #c9963e);
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 3px;
}

.quick-info-body {
  display: flex;
  flex-direction: column;
}

.quick-info-item h5 {
  font-family: Georgia, serif;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vt-text);
  margin: 0 0 10px;
}

.quick-info-item p {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--vt-muted, #7a6f69);
  margin: 0 0 8px;
}

.quick-info-link {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--vt-burgundy, #6f1023);
  text-decoration: none;
}

/* ---------- Tabs ---------- */
.product-tabs {
  margin-bottom: 60px;
}

.tab-nav {
  display: flex;
  gap: 34px;
  border-bottom: 1px solid var(--vt-border, #eadfce);
  margin-bottom: 28px;
}

.tab-btn {
  background: none;
  border: none;
  padding: 0 0 14px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vt-muted, #7a6f69);
  cursor: pointer;
  position: relative;
}

.tab-btn.active {
  color: var(--vt-burgundy, #6f1023);
}

.tab-btn.active:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--vt-burgundy, #6f1023);
}

.tab-panel {
  display: none;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--vt-muted, #7a6f69);
}

.tab-panel.active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.tab-panel#tab-reviews.active,
.tab-panel#tab-shipping.active {
  display: block;
}

.details-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.details-list li {
  margin-bottom: 12px;
}

.details-list strong {
  color: var(--vt-text);
}

.tab-placeholder {
  font-style: italic;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  .quick-info-band {
    padding: 0 30px;
  }

  .quick-info-row {
    flex-wrap: wrap;
    padding: 24px 0;
  }

  .quick-info-item {
    flex: 0 0 45%;
  }
}


@media (max-width: 768px) {
  .product-detail {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .quick-info-item {
    flex: 0 0 45%;
  }

  .gallery-column {
    position: static;
  }

  .gallery-layout {
    flex-direction: column-reverse;
  }

  .gallery-thumbs-vertical {
    flex-direction: row;
    overflow-x: auto;
  }

  .thumb-item {
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
  }

  .spec-icon-row {
    flex-wrap: wrap;
    gap: 16px;
  }

  .spec-icon-row li {
    flex: 0 0 45%;
    border-right: none;
  }

  .action-btn-row {
    flex-direction: column;
  }

  .trust-badges {
    flex-direction: column;
  }

  .tab-nav {
    overflow-x: auto;
    gap: 20px;
  }

  .tab-panel.active {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .quick-info-band {
    padding: 0 16px;
  }

  .quick-info-row {
    flex-direction: column;
    gap: 22px;
  }

  .quick-info-item {
    flex: 1 1 100%;
  }
}

/* ---------- Related Products (carousel) ---------- */
.related-products-section {
  padding: 60px 0 90px;
  border-top: 1px solid var(--vt-border, #eadfce);
  margin-top: 20px;
}

/* ---------- Header ---------- */
.related-products-header {
  text-align: center;
  margin-bottom: 34px;
}

.related-products-header h2 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vt-text, #1b1716);
  margin: 0;
  line-height: 1.2;
}

.rp-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
}

.rp-divider::before,
.rp-divider::after {
  content: '';
  width: 46px;
  height: 1px;
  background: var(--vt-border, #eadfce);
}

.rp-divider span {
  width: 6px;
  height: 6px;
  margin: 0 12px;
  background: var(--vt-gold, #c9963e);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* ---------- Viewport + edge-mounted arrows ---------- */
.related-products-viewport {
  position: relative;
  /* no overflow:hidden here — arrows sit outside the track and must not be clipped */
}

.rp-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--vt-border, #eadfce);
  background: #fff;
  color: var(--vt-muted, #7a6f69);
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(27, 23, 22, 0.06);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.rp-arrow-left {
  left: -20px;
}

.rp-arrow-right {
  right: -20px;
}

.rp-arrow:hover {
  background: var(--vt-burgundy, #6f1023);
  border-color: var(--vt-burgundy, #6f1023);
  color: #fff;
}

.rp-arrow:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* ---------- Track (scroll-snap row of cards) ---------- */
.related-products-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * 20px) / 5);
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.related-products-track::-webkit-scrollbar {
  display: none;
}

.related-products-track .product-card {
  scroll-snap-align: start;
  width: 100%;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .related-products-track {
    grid-auto-columns: calc((100% - 3 * 16px) / 4);
  }
}

@media (max-width: 992px) {
  .related-products-track {
    grid-auto-columns: calc((100% - 2 * 16px) / 3);
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .related-products-track {
    grid-auto-columns: calc((100% - 16px) / 2);
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .related-products-track {
    grid-auto-columns: 100%;
    gap: 0;
    scroll-snap-type: x mandatory;
  }

  .related-products-track .product-card {
    scroll-snap-align: center;
  }

  .rp-arrow-left {
    left: -8px;
  }

  .rp-arrow-right {
    right: -8px;
  }
}

.shop-container {
  box-sizing: border-box;
  max-width: 1600px;
  margin: 0 auto;
  padding-right: 50px;
  padding-left: 50px;
}

@media (max-width: 992px) {
  .shop-container {
    padding-right: 30px;
    padding-left: 30px;
  }
}

@media (max-width: 576px) {
  .shop-container {
    padding-right: 16px;
    padding-left: 16px;
  }
}






/* =========================================================
   COLLECTION PAGE - COLLECTION GRID (Image-based)
========================================================= */

.collection-grid-section {
  padding: 70px 0 80px;
  background: #fff;
}

/* ---------- Shop By Collection heading override (scoped only to this section) ---------- */
.collection-grid-section .section-title {
  text-align: left;
  margin: 0 0 24px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--vt-text);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.2;
}

@media (max-width: 650px) {
  .collection-grid-section .section-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.collection-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--vt-border, #eadfce);
  border-radius: 10px;
  text-decoration: none;
  color: var(--vt-text, #1b1716);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.collection-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(27, 23, 22, 0.08);
  border-color: rgba(201, 150, 62, 0.3);
}

.collection-image-wrapper {
  width: 100%;
  height: 160px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--vt-ivory, #fbf7ef);
}

.collection-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.collection-card:hover .collection-card-image {
  transform: scale(1.05);
}

.collection-card h3 {
  font-family: Georgia, serif;
  font-size: 1.7rem;
  font-weight: 700;
  margin: 16px 24px 6px 24px;
  color: var(--vt-text, #1b1716);
}

.collection-card p {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--vt-muted, #7a6f69);
  margin: 0 24px 14px 24px;
  flex-grow: 1;
}

.collection-link {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vt-gold, #c9963e);
  margin: 0 24px 24px 24px;
  transition: color 0.3s ease;
}

.collection-link i {
  transition: transform 0.3s ease;
  font-size: 11px;
}

.collection-card:hover .collection-link {
  color: var(--vt-burgundy, #6f1023);
}

.collection-card:hover .collection-link i {
  transform: translateX(4px);
}

/* =========================================================
   AUTUMN BANNER
========================================================= */

.autumn-banner-section {
  padding: 20px 0 60px;
  background: #fff;
}

.autumn-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 50px 60px;
  border-radius: 14px;
  color: #fff;
  position: relative;
  overflow: hidden;
  min-height: 280px;
  background:
    linear-gradient(135deg, rgba(27, 23, 22, 0.85) 0%, rgba(59, 7, 17, 0.75) 60%, rgba(27, 23, 22, 0.60) 100%),
    var(--autumn-bg) no-repeat center center;
  background-size: cover;
}

.autumn-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.autumn-banner::after {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -5%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.autumn-banner-content {
  position: relative;
  z-index: 1;
  max-width: 55%;
}

.autumn-eyebrow {
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vt-gold, #c9963e);
  margin-bottom: 8px;
}

.autumn-banner-content h2 {
  font-family: Georgia, serif;
  font-size: 3rem;
  font-weight: 400;
  margin: 0 0 12px;
  color: #fff;
}

.autumn-banner-content p {
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 24px;
}

.autumn-banner-content .btn {
  min-height: 44px;
  padding: 12px 32px;
  border: 1px solid var(--vt-burgundy, #6f1023);
  border-radius: 5px;
  background: var(--vt-burgundy, #6f1023);
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.autumn-banner-content .btn:hover {
  background: #d4a84a;
  border: 1px solid var(--vt-gold, #c9963e);
  color: #1b1008;
  transform: translateY(-2px);
}

.autumn-banner-decoration {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 30px;
  opacity: 0.6;
}

.autumn-banner-decoration i {
  font-size: 40px;
  color: rgba(255, 255, 255, 0.3);
}

.autumn-banner-decoration i:nth-child(2) {
  font-size: 50px;
  color: var(--vt-gold, #c9963e);
  opacity: 0.4;
}

/* =========================================================
   REGION SECTION - No Overlay, Collection Card Style
========================================================= */

.region-section {
  padding: 20px 0 70px;
  background: var(--vt-ivory, #fbf7ef);
}

.region-section .section-title {
  text-align: left;
  margin: 0 0 24px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--vt-text);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.2;
}

@media (max-width: 650px) {
  .region-section .section-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }
}

.region-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}

.region-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--vt-border, #eadfce);
  border-radius: 10px;
  text-decoration: none;
  color: var(--vt-text, #1b1716);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.region-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(27, 23, 22, 0.08);
  border-color: rgba(201, 150, 62, 0.3);
}

.region-image-wrapper {
  width: 100%;
  height: 160px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--vt-ivory, #fbf7ef);
}

.region-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.region-card:hover .region-card-image {
  transform: scale(1.05);
}

.region-card h3 {
  font-family: Georgia, serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 16px 24px 4px 24px;
  color: var(--vt-text, #1b1716);
}

.region-card .region-country {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--vt-gold, #c9963e);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 24px 20px 24px;
}

/* =========================================================
   RESPONSIVE - COLLECTIONS PAGE
========================================================= */

@media (max-width: 1100px) {
  .collection-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .region-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 992px) {
  .autumn-banner {
    flex-direction: column;
    text-align: center;
    padding: 40px 30px;
    min-height: 240px;
  }

  .autumn-banner-content {
    max-width: 100%;
  }

  .autumn-banner-content .btn {
    margin: 0 auto;
  }

  .autumn-banner-decoration {
    margin-top: 24px;
  }
}

@media (max-width: 768px) {
  .collection-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .collection-card h3 {
    font-size: 1.2rem;
    margin: 14px 18px 4px 18px;
  }

  .collection-card p {
    margin: 0 18px 12px 18px;
    font-size: 12px;
  }

  .collection-link {
    margin: 0 18px 18px 18px;
    font-size: 11px;
  }

  .collection-image-wrapper {
    height: 140px;
  }

  .autumn-banner-content h2 {
    font-size: 2.2rem;
  }

  .autumn-banner-decoration {
    gap: 20px;
  }

  .autumn-banner-decoration i {
    font-size: 30px;
  }

  .autumn-banner-decoration i:nth-child(2) {
    font-size: 38px;
  }

  .region-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .region-image-wrapper {
    height: 140px;
  }

  .region-card h3 {
    font-size: 1.2rem;
    margin: 14px 18px 4px 18px;
  }

  .region-card .region-country {
    font-size: 11px;
    margin: 0 18px 16px 18px;
  }
}

@media (max-width: 650px) {
  .collection-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .collection-card h3 {
    font-size: 1rem;
    margin: 12px 14px 4px 14px;
  }

  .collection-card p {
    font-size: 12px;
    margin: 0 14px 10px 14px;
  }

  .collection-link {
    font-size: 10px;
    margin: 0 14px 16px 14px;
  }

  .collection-image-wrapper {
    height: 120px;
  }

  .region-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .region-card {
    height: 160px;
  }

  .region-overlay h3 {
    font-size: 1.4rem;
  }

  .autumn-banner {
    padding: 30px 20px;
    min-height: 200px;
    border-radius: 10px;
  }

  .autumn-banner-content h2 {
    font-size: 1.8rem;
  }

  .autumn-banner-content p {
    font-size: 13px;
  }

  .autumn-banner-decoration {
    gap: 20px;
  }

  .autumn-banner-decoration i {
    font-size: 30px;
  }

  .autumn-banner-decoration i:nth-child(2) {
    font-size: 38px;
  }
}

@media (max-width: 480px) {
  .collection-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .collection-card h3 {
    font-size: 0.85rem;
    margin: 10px 10px 4px 10px;
  }

  .collection-card p {
    font-size: 11px;
    margin: 0 10px 8px 10px;
  }

  .collection-link {
    font-size: 9px;
    margin: 0 10px 14px 10px;
  }

  .collection-image-wrapper {
    height: 100px;
  }

  .region-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .region-image-wrapper {
    height: 100px;
  }

  .region-card {
    border-radius: 8px;
  }

  .region-card h3 {
    font-size: 0.85rem;
    margin: 10px 12px 2px 12px;
  }

  .region-card .region-country {
    font-size: 9px;
    margin: 0 12px 12px 12px;
  }

  .autumn-banner {
    padding: 24px 16px;
    min-height: 180px;
    border-radius: 8px;
  }

  .autumn-banner-content h2 {
    font-size: 1.5rem;
  }

  .autumn-banner-content p {
    font-size: 12px;
    margin-bottom: 18px;
  }

  .autumn-banner-content .btn {
    padding: 10px 20px;
    font-size: 10px;
    min-height: 38px;
  }

  .autumn-banner-decoration {
    gap: 14px;
  }

  .autumn-banner-decoration i {
    font-size: 24px;
  }

  .autumn-banner-decoration i:nth-child(2) {
    font-size: 30px;
  }

  .autumn-eyebrow {
    font-size: 10px;
  }
}


/* =========================================================
   FIX: LIST VIEW ON MOBILE (BELOW 651px)
   ========================================================= */

/* Ensure list view maintains proper layout on mobile */
@media (max-width: 650px) {

  /* Override the default grid to keep list view as a column */
  .product-grid.is-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Keep cards as rows on mobile for list view */
  .product-grid.is-list .product-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    min-height: 160px !important;
    padding: 12px !important;
    gap: 16px !important;
  }

  /* Image container in list view - fixed width on left */
  .product-grid.is-list .product-image {
    width: 120px !important;
    height: 120px !important;
    flex-shrink: 0 !important;
    padding: 8px !important;
    margin: 0 !important;
  }

  .product-grid.is-list .product-image-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* Body container - takes remaining space */
  .product-grid.is-list .product-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
    padding: 4px 0 !important;
    flex: 1 !important;
    gap: 4px !important;
  }

  /* Badge positioning fix for list view on mobile */
  .product-grid.is-list .product-card-badge {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 5 !important;
  }

  /* Ensure the card has relative positioning for badge */
  .product-grid.is-list .product-card {
    position: relative !important;
  }

  /* Star rating alignment in list view */
  .product-grid.is-list .product-body .rating {
    justify-content: flex-start !important;
    margin-bottom: 4px !important;
  }

  /* Price alignment */
  .product-grid.is-list .product-body .price {
    margin-bottom: 8px !important;
    font-size: 16px !important;
  }

  /* Add to Cart button - auto width, not full */
  .product-grid.is-list .product-body .btn {
    width: auto !important;
    min-width: 120px !important;
    padding: 8px 16px !important;
    font-size: 10px !important;
    margin-top: 4px !important;
  }

  /* Product title */
  .product-grid.is-list .product-body h3 {
    font-size: 14px !important;
    margin: 0 !important;
  }

  .product-grid.is-list .product-body .subtext {
    font-size: 11px !important;
    margin-bottom: 2px !important;
  }
}

/* Even smaller screens */
@media (max-width: 480px) {
  .product-grid.is-list .product-image {
    width: 90px !important;
    height: 90px !important;
  }

  .product-grid.is-list .product-body .btn {
    min-width: 80px !important;
    font-size: 9px !important;
    padding: 6px 12px !important;
  }

  .product-grid.is-list .product-body h3 {
    font-size: 12px !important;
  }
}



/* =========================================================
   LIST VIEW - PRODUCT CARD LAYOUT (FIXED)
   Matches the structure shown in image 3
========================================================= */

/* List view container - switches from grid to flex column */
.product-grid.is-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Each product card in list view - horizontal layout */
.product-grid.is-list .product-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  padding: 12px !important;
  gap: 20px !important;
  min-height: 180px !important;
  border-radius: 10px !important;
  background: #fff !important;
  border: 1px solid var(--vt-border, #eadfce) !important;
  position: relative !important;
}

/* Hover effect for list view cards */
.product-grid.is-list .product-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(27, 23, 22, 0.08) !important;
  border-color: rgba(201, 150, 62, 0.3) !important;
}

/* =========================================================
   IMAGE SECTION (Left side - fixed width)
========================================================= */

.product-grid.is-list .product-image {
  width: 160px !important;
  height: 160px !important;
  flex-shrink: 0 !important;
  padding: 12px !important;
  background: #fbf7ef !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

.product-grid.is-list .product-image-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Badge on image */
.product-grid.is-list .product-card-badge {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 5 !important;
}

.product-grid.is-list .product-card-badge .p-label {
  font-size: 10px !important;
  padding: 4px 16px 4px 10px !important;
  background: var(--vt-burgundy, #6f1023) !important;
  color: #fff !important;
  border-radius: 3px !important;
}

/* =========================================================
   BODY SECTION (Center - flexible content)
========================================================= */

.product-grid.is-list .product-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  padding: 8px 0 !important;
  flex: 1 !important;
  gap: 4px !important;
  min-width: 0 !important;
}

/* Product title */
.product-grid.is-list .product-body h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 0 2px 0 !important;
  font-family: Georgia, serif !important;
  color: var(--vt-text, #1b1716) !important;
}

.product-grid.is-list .product-body h3 a {
  color: var(--vt-text, #1b1716) !important;
  text-decoration: none !important;
}

.product-grid.is-list .product-body h3 a:hover {
  color: var(--vt-burgundy, #6f1023) !important;
}

/* Subtext (region) */
.product-grid.is-list .product-body .subtext {
  font-size: 13px !important;
  color: var(--vt-muted, #7a6f69) !important;
  margin: 0 0 4px 0 !important;
  font-family: Inter, system-ui, sans-serif !important;
}

/* Rating stars */
.product-grid.is-list .product-body .rating {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 2px 0 4px 0 !important;
  justify-content: flex-start !important;
}

.product-grid.is-list .product-body .rating .stars {
  color: var(--vt-gold, #c9963e) !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
}

.product-grid.is-list .product-body .rating .rating-count {
  font-size: 12px !important;
  color: var(--vt-muted, #7a6f69) !important;
  margin-left: 2px !important;
}

/* Price */
.product-grid.is-list .product-body .price {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--vt-burgundy, #6f1023) !important;
  font-family: Georgia, serif !important;
  margin: 2px 0 6px 0 !important;
}

/* =========================================================
   BUTTON SECTION (Right side - aligned to end)
========================================================= */

.product-grid.is-list .product-body .btn {
  width: auto !important;
  min-width: 140px !important;
  padding: 10px 24px !important;
  margin-top: auto !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: 1px solid var(--vt-burgundy, #6f1023) !important;
  color: var(--vt-burgundy, #6f1023) !important;
  transition: background 0.2s ease, color 0.2s ease !important;
  cursor: pointer !important;
}

.product-grid.is-list .product-body .btn:hover {
  background: var(--vt-burgundy, #6f1023) !important;
  color: #fff !important;
}

/* =========================================================
   RESPONSIVE - LIST VIEW
========================================================= */

/* Tablet */
@media (max-width: 768px) {
  .product-grid.is-list .product-image {
    width: 130px !important;
    height: 130px !important;
    padding: 10px !important;
  }

  .product-grid.is-list .product-body h3 {
    font-size: 16px !important;
  }

  .product-grid.is-list .product-body .price {
    font-size: 18px !important;
  }

  .product-grid.is-list .product-body .btn {
    min-width: 110px !important;
    padding: 8px 18px !important;
    font-size: 11px !important;
  }
}

/* Mobile (below 651px) */
@media (max-width: 650px) {
  .product-grid.is-list .product-card {
    flex-direction: row !important;
    padding: 10px !important;
    gap: 14px !important;
    min-height: 150px !important;
  }

  .product-grid.is-list .product-image {
    width: 110px !important;
    height: 110px !important;
    padding: 8px !important;
  }

  .product-grid.is-list .product-body h3 {
    font-size: 14px !important;
  }

  .product-grid.is-list .product-body .subtext {
    font-size: 11px !important;
  }

  .product-grid.is-list .product-body .rating .stars {
    font-size: 12px !important;
  }

  .product-grid.is-list .product-body .price {
    font-size: 16px !important;
  }

  .product-grid.is-list .product-body .btn {
    min-width: 90px !important;
    padding: 6px 14px !important;
    font-size: 10px !important;
  }

  .product-grid.is-list .product-body .rating .rating-count {
    font-size: 10px !important;
  }
}

/* Small mobile (below 480px) */
@media (max-width: 480px) {
  .product-grid.is-list .product-card {
    flex-direction: row !important;
    padding: 8px !important;
    gap: 10px !important;
    min-height: 130px !important;
  }

  .product-grid.is-list .product-image {
    width: 85px !important;
    height: 85px !important;
    padding: 6px !important;
  }

  .product-grid.is-list .product-body h3 {
    font-size: 12px !important;
  }

  .product-grid.is-list .product-body .subtext {
    font-size: 10px !important;
  }

  .product-grid.is-list .product-body .rating .stars {
    font-size: 10px !important;
    letter-spacing: 1px !important;
  }

  .product-grid.is-list .product-body .price {
    font-size: 14px !important;
  }

  .product-grid.is-list .product-body .btn {
    min-width: 70px !important;
    padding: 5px 10px !important;
    font-size: 9px !important;
    letter-spacing: 0.03em !important;
  }

  .product-grid.is-list .product-body .rating .rating-count {
    font-size: 9px !important;
  }

  .product-grid.is-list .product-card-badge .p-label {
    font-size: 8px !important;
    padding: 2px 12px 2px 8px !important;
  }
}

/* =========================================================
   EXTREMELY SMALL (below 380px)
========================================================= */

@media (max-width: 380px) {
  .product-grid.is-list .product-card {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 12px !important;
    gap: 8px !important;
    min-height: auto !important;
  }

  .product-grid.is-list .product-image {
    width: 120px !important;
    height: 120px !important;
  }

  .product-grid.is-list .product-body {
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .product-grid.is-list .product-body .rating {
    justify-content: center !important;
  }

  .product-grid.is-list .product-body .btn {
    width: 100% !important;
    min-width: unset !important;
  }
}

/* =========================================================
   EXTREMELY SMALL (below 380px)
   Keep list view as horizontal row even on very small screens
========================================================= */

@media (max-width: 380px) {

  /* =========================================================
       GRID VIEW - Stays as column (1 per row) on very small screens
    ========================================================= */
  .product-grid:not(.is-list) {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* =========================================================
       LIST VIEW - Maintain horizontal layout even on very small screens
    ========================================================= */
  .product-grid.is-list .product-card {
    flex-direction: row !important;
    align-items: stretch !important;
    text-align: left !important;
    padding: 10px !important;
    gap: 10px !important;
    min-height: 130px !important;
  }

  .product-grid.is-list .product-image {
    width: 85px !important;
    height: 85px !important;
    flex-shrink: 0 !important;
    padding: 6px !important;
    margin: 0 !important;
    border-radius: 6px !important;
  }

  .product-grid.is-list .product-image-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .product-grid.is-list .product-body {
    align-items: flex-start !important;
    text-align: left !important;
    width: auto !important;
    flex: 1 !important;
    padding: 4px 0 !important;
    gap: 2px !important;
    justify-content: center !important;
  }

  .product-grid.is-list .product-body h3 {
    font-size: 12px !important;
    margin: 0 !important;
    line-height: 1.3 !important;
  }

  .product-grid.is-list .product-body .subtext {
    font-size: 10px !important;
    margin: 0 !important;
  }

  .product-grid.is-list .product-body .rating {
    justify-content: flex-start !important;
    margin: 1px 0 2px 0 !important;
    gap: 4px !important;
  }

  .product-grid.is-list .product-body .rating .stars {
    font-size: 10px !important;
    letter-spacing: 1px !important;
  }

  .product-grid.is-list .product-body .rating .rating-count {
    font-size: 9px !important;
  }

  .product-grid.is-list .product-body .price {
    font-size: 14px !important;
    margin: 1px 0 3px 0 !important;
  }

  .product-grid.is-list .product-body .btn {
    width: auto !important;
    min-width: 60px !important;
    padding: 4px 10px !important;
    font-size: 8px !important;
    letter-spacing: 0.03em !important;
    min-height: 28px !important;
    border-radius: 4px !important;
    margin-top: 2px !important;
  }

  .product-grid.is-list .product-card-badge {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    z-index: 5 !important;
  }

  .product-grid.is-list .product-card-badge .p-label {
    font-size: 7px !important;
    padding: 2px 10px 2px 6px !important;
    border-radius: 2px !important;
  }

  .product-grid.is-list .product-card-badge .p-label:before {
    border-width: 8px 8px 8px 0 !important;
  }

  /* Wishlist heart on very small screens */
  .product-grid.is-list .wishlist-btn {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
    top: 6px !important;
    right: 6px !important;
  }
}

/* =========================================================
   EXTRA EXTRA SMALL (below 320px) - Keep horizontal but tighter
========================================================= */

@media (max-width: 320px) {
  .product-grid.is-list .product-card {
    padding: 8px !important;
    gap: 8px !important;
    min-height: 110px !important;
  }

  .product-grid.is-list .product-image {
    width: 70px !important;
    height: 70px !important;
    padding: 4px !important;
  }

  .product-grid.is-list .product-body h3 {
    font-size: 10px !important;
  }

  .product-grid.is-list .product-body .subtext {
    font-size: 9px !important;
  }

  .product-grid.is-list .product-body .rating .stars {
    font-size: 8px !important;
    letter-spacing: 0.5px !important;
  }

  .product-grid.is-list .product-body .rating .rating-count {
    font-size: 7px !important;
  }

  .product-grid.is-list .product-body .price {
    font-size: 12px !important;
  }

  .product-grid.is-list .product-body .btn {
    min-width: 50px !important;
    padding: 3px 8px !important;
    font-size: 7px !important;
    min-height: 24px !important;
  }

  .product-grid.is-list .product-card-badge .p-label {
    font-size: 6px !important;
    padding: 1px 8px 1px 5px !important;
  }
}

/* =========================================================
   FIX: Remove JCF wrapper from quantity stepper
========================================================= */

/* Hide JCF generated buttons and wrapper */
.qty-stepper .jcf-number {
  display: inline-flex !important;
  align-items: center !important;
  height: 46px !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  position: relative !important;
}

/* Hide the JCF inc/dec buttons completely */
.qty-stepper .jcf-btn-inc,
.qty-stepper .jcf-btn-dec {
  display: none !important;
}

/* Make the actual input visible and styled properly */
.qty-stepper .jcf-number .jcf-real-element {
  display: block !important;
  width: 50px !important;
  height: 46px !important;
  border: none !important;
  border-left: 1px solid var(--vt-border, #eadfce) !important;
  border-right: 1px solid var(--vt-border, #eadfce) !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--vt-text, #1b1716) !important;
  background: #fff !important;
  padding: 0 4px !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.qty-stepper .jcf-number .jcf-real-element::-webkit-outer-spin-button,
.qty-stepper .jcf-number .jcf-real-element::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Style the custom buttons */
.qty-stepper .qty-btn {
  width: 38px !important;
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fbf7ef !important;
  border: none !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--vt-text, #1b1716) !important;
  cursor: pointer !important;
  transition: background 0.2s ease, color 0.2s ease !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.qty-stepper .qty-btn:hover {
  background: var(--vt-gold, #c9963e) !important;
  color: #fff !important;
}

.qty-stepper .qty-btn:active {
  transform: scale(0.92);
}

/* Style the stepper container */
.qty-stepper {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid var(--vt-border, #eadfce) !important;
  border-radius: 5px !important;
  overflow: hidden !important;
  background: #fff !important;
  height: 46px !important;
}


/* =========================================================
   FIX: QUANTITY + ACTION BUTTONS HORIZONTAL ALIGNMENT
========================================================= */

.cart-form-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: nowrap;
}

.qty-block {
  flex: 0 0 auto;
}

.action-btn-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  margin-bottom: 0 !important;
  align-self: flex-end;
  flex-wrap: nowrap;
}

.btn-add-cart,
.btn-wishlist {
  height: 48px;
  flex: 1;
}


/* Below 896px: Stack the quantity above the buttons */
@media (max-width: 896px) {
  .cart-form {
    width: 100%;
  }

  .cart-form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: 100%;
  }

  /* Keep quantity stepper left-aligned or centered */
  .qty-block {
    width: 100%;
    margin-bottom: 8px;
  }

  /* Ensure the inner cart-form-row itself allows full width */
  .cart-form .cart-form-row {
    width: 100%;
  }
}

/* 415px to 769px: Place the 2 buttons on the same line, horizontally aligned with reduced width */
@media (min-width: 415px) and (max-width: 769px) {
  .action-btn-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
    align-self: stretch !important;
    flex-wrap: nowrap !important;
  }

  .btn-add-cart,
  .btn-wishlist {
    flex: 1 1 0 !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    height: 48px !important;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
    gap: 8px !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .btn-wishlist.active {
    font-size: 11px !important;
    letter-spacing: 0.02em !important;
    padding: 0 6px !important;
  }
}

/* Below 415px: Stack buttons vertically, taking full width */
@media (max-width: 414.98px) {
  .action-btn-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
    align-self: stretch !important;
  }

  .btn-add-cart,
  .btn-wishlist {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: 48px !important;
    flex: none !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 0 16px !important;
  }
}


.search input {
  border: 0;
  outline: 0;
  padding: 13px 14px;
  flex: 1;
  min-width: 0;
  font-weight: 400;
  /* ensure the typed text itself isn't bold */
}

.search input::placeholder {
  font-weight: 300;
  color: var(--vt-muted, #7a6f69);
  opacity: 1;
  /* Firefox dims placeholder opacity by default */
}

.search input::value {
  font-weight: 300;
  color: var(--vt-muted, #7a6f69);
  opacity: 1;
  /* Firefox dims placeholder opacity by default */
}


/* =========================================================
   JOURNAL PAGE — CATEGORY TABS
========================================================= */

.journal-tabs-section {
  padding: 36px 0 0;
  background: #fff;
}

.journal-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px;
  border-bottom: 1px solid var(--vt-border, #eadfce);
  padding-bottom: 18px;
}

.journal-tab {
  font-family: Inter, system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vt-muted, #7a6f69);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  padding-bottom: 4px;
}

.journal-tab:hover {
  color: var(--vt-burgundy, #6f1023);
}

.journal-tab.active {
  color: var(--vt-text, #1b1716);
}

.journal-tab.active:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -19px;
  height: 2px;
  background: var(--vt-burgundy, #6f1023);
}

/* =========================================================
   JOURNAL PAGE — FEATURED STORY
========================================================= */

.featured-story-section {
  padding: 56px 0 20px;
  background: #fff;
}

.featured-story {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

.featured-story-image-wrapper {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: var(--vt-ivory, #fbf7ef);
}

.featured-story-image {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.featured-story-image-wrapper:hover .featured-story-image {
  transform: scale(1.03);
}

.featured-story-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.featured-story-label {
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vt-gold, #c9963e);
  margin-bottom: 14px;
}

.featured-story-title {
  font-family: serif;
  font-size: 4.5rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--vt-text, #1b1716);
  margin: 0 0 18px;
}

.featured-story-colon {
  color: var(--vt-text, #1b1716);
}

.featured-story-subtitle {
  display: inline-block;
  margin-top: 4px;
}

.featured-story-excerpt {
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.75;
  color: var(--vt-muted, #7a6f69);
  margin: 0 0 8px;
  max-width: 480px;
}

.featured-story-content .btn-row {
  margin-top: 18px;
  margin-bottom: 22px;
}

.featured-story-meta {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--vt-muted, #7a6f69);
  display: flex;
  align-items: center;
  gap: 10px;
}

.featured-story-meta .dot {
  color: var(--vt-gold, #c9963e);
}

/* =========================================================
   JOURNAL — FEATURED STORY: Desktop Design (> 992px)
   Matches customer design: portrait image card (380px)
   and reduced elegant title width and sizing.
========================================================= */
@media (min-width: 993px) {
  .featured-story {
    grid-template-columns: 380px 1fr;
    gap: 56px;
    align-items: center;
  }

  .featured-story-image-wrapper {
    width: 380px;
    max-width: 100%;
    aspect-ratio: 6 / 5;
  }

  .featured-story-image {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }

  .featured-story-title {
    font-size: clamp(2.5rem, 3.2vw, 3.75rem);
    /* grows with the screen */
    font-weight: 600;
    line-height: 1.2;
    max-width: 650px;
    /* was 500px */
  }

  .featured-story-excerpt {
    font-size: clamp(14px, 1vw, 17px);
    max-width: 620px;
  }

}

/* =========================================================
   JOURNAL PAGE — LATEST ARTICLES
========================================================= */

.latest-articles-section {
  padding: 50px 0 70px;
  background: #fff;
}

.latest-articles-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vt-text, #1b1716);
  margin: 0 0 28px;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.article-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--vt-border, #eadfce);
  border-radius: 10px;
  text-decoration: none;
  color: var(--vt-text, #1b1716);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.article-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(27, 23, 22, 0.08);
  border-color: rgba(201, 150, 62, 0.3);
}

.article-card-image-wrapper {
  width: 100%;
  aspect-ratio: 8 / 5;
  /* ~1.6:1 — matches the design crop */
  height: auto;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--vt-ivory, #fbf7ef);
}

.article-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.article-card:hover .article-card-image {
  transform: scale(1.06);
}

.article-card-body {
  display: flex;
  flex-direction: column;
}

.article-card-category {
  font-family: Inter, system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vt-gold, #c9963e);
  margin: 16px 24px 6px 24px;
}

.article-card-title {
  font-family: Georgia, serif;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--vt-text, #1b1716);
  transition: color 0.25s ease;
  margin: 0 24px 14px 24px;
}

.article-card:hover .article-card-title {
  color: var(--vt-burgundy, #6f1023);
}

.article-card-meta {
  font-family: Inter, system-ui, sans-serif;
  font-size: 11.5px;
  color: var(--vt-muted, #7a6f69);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 24px 8px 24px;
}

.article-card-meta .dot {
  color: var(--vt-gold, #c9963e);
}

.load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}

.load-more-btn {
  font-family: Inter, system-ui, sans-serif;
  cursor: pointer;
}

/* =========================================================
   JOURNAL PAGE — RESPONSIVE
========================================================= */

@media (max-width: 992px) {
  .featured-story {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .featured-story-title {
    font-size: 2.25rem;
    max-width: 100%;
  }

  .featured-story-excerpt {
    max-width: none;
  }

  .article-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .journal-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    gap: 22px;
    padding-bottom: 14px;
  }

  .journal-tab.active:after {
    bottom: -15px;
  }

  .featured-story-title {
    font-size: 1.7rem;
  }
}

@media (max-width: 576px) {
  .article-grid {
    grid-template-columns: 1fr;
  }

  .article-card-image-wrapper {
    aspect-ratio: 8 / 5;
  }
}


.read-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  background: var(--vt-burgundy, #6f1023);
  border: 1px solid var(--vt-burgundy, #6f1023);
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.25s ease;
}

.read-btn:hover {
  background: var(--vt-champagne, #f3eadc);
  border-color: rgba(201, 150, 62, 0.3);
  color: var(--vt-burgundy, #6f1023);
}

/* =========================================================
   JOURNAL PAGE — NEWSLETTER ("Stay Inspired")
========================================================= */

.journal-newsletter-section {
  padding: 0 0 70px;
  background: #fff;
}

.journal-newsletter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: var(--vt-burgundy-dark, #3d0711);
  border-radius: 10px;
  padding: 34px 44px;
}

.journal-newsletter-content {
  flex: 1;
  min-width: 0;
}

.journal-newsletter-title {
  font-family: serif;
  font-size: 2.5rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px;
}

.journal-newsletter-text {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 480px;
}

.journal-newsletter-form {
  flex-shrink: 0;
  width: 100%;
  max-width: 420px;
}

.journal-newsletter-form-group {
  display: flex;
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.3s ease;
}

.journal-newsletter-form-group:focus-within {
  box-shadow: 0 0 0 3px rgba(201, 150, 62, 0.35);
}

/* =========================================================
   ARTICLE PAGE — EXPLORE WINES SECTION
   ========================================================= */

.explore-wines-section {
  padding: 40px 0;
  background: #f7f5f1;
}

.explore-wines-title {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--vt-text, #1b1716);
  margin: 0 0 20px;
}

.explore-wines-carousel {
  overflow: hidden;
}

.explore-wines-track {
  display: flex;
  gap: 20px;
  transition: transform 0.35s ease;
  align-items: stretch;
}

.explore-wines-slide {
  flex: 0 0 calc((100% - 40px) / 3);
  /* 3 visible, 2 gaps of 20px */
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.explore-wines-slide .product-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.explore-wines-slide .product-card .product-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.explore-wines-slide .product-card .product-body .btn {
  margin-top: auto !important;
}

.explore-wines-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.explore-wines-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d8d0c2;
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background 0.2s ease;
}

.explore-wines-dot.active {
  background: var(--vt-burgundy, #6f1023);
}

@media (max-width: 992px) {
  .explore-wines-slide {
    flex: 0 0 calc((100% - 20px) / 2);
    /* 2 visible on tablet */
  }
}

@media (max-width: 600px) {
  .explore-wines-slide {
    flex: 0 0 100%;
    /* 1 visible on mobile */
  }
}

/* =========================================================
   ARTICLE PAGE — SHARE ARTICLE SECTION
   ========================================================= */

.share-article-section {
  padding: 30px 0;
  border-top: 1px solid var(--vt-border, #eadfce);
  border-bottom: 1px solid var(--vt-border, #eadfce);
}

.share-article-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.share-article-title {
  font-family: Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--vt-text, #1b1716);
  margin: 0;
}

.share-article-icons {
  display: flex;
  align-items: center;
  gap: 22px;
}

.share-article-icons a {
  color: var(--vt-text, #1b1716);
  font-size: 15px;
  transition: color 0.2s ease;
}

.share-article-icons a:hover {
  color: var(--vt-burgundy, #6f1023);
}

/* =========================================================
   ARTICLE PAGE — RELATED ARTICLES SECTION
   ========================================================= */

.related-articles-section {
  padding: 40px 0;
}

.related-articles-title {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--vt-text, #1b1716);
  margin: 0 0 20px;
}

.related-articles-section .article-grid {
  /* reuses .article-grid / .article-card from Journal page */
  margin-top: 0;
}

@media (max-width: 992px) {
  .related-articles-section .article-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .related-articles-section .article-grid {
    grid-template-columns: 1fr;
  }
}

.journal-newsletter-form-group input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 14px 18px;
  border: none;
  background: transparent;
  color: var(--vt-text, #1b1716);
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  outline: none;
}

.journal-newsletter-form-group input[type="email"]::placeholder {
  color: var(--vt-muted, #7a6f69);
}

.journal-newsletter-form-group button {
  padding: 14px 28px;
  background: var(--vt-burgundy-dark, #3d0711);
  color: #fff;
  border: 1px solid #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s ease;
}

.journal-newsletter-form-group button:hover {
  background: var(--vt-gold, #c9963e);
}

.journal-newsletter-error,
.journal-newsletter-success {
  display: none;
  font-size: 12.5px;
  line-height: 1.5;
  margin-top: 8px;
  border-radius: 4px;
  padding: 6px 12px;
  font-family: Inter, system-ui, sans-serif;
  text-align: left;
}

.journal-newsletter-error {
  color: #ff9999;
  background: rgba(255, 100, 100, 0.12);
  border: 1px solid rgba(255, 100, 100, 0.3);
}

.journal-newsletter-success {
  color: #70e0a5;
  background: rgba(112, 224, 165, 0.12);
  border: 1px solid rgba(112, 224, 165, 0.3);
}

/* =========================================================
   JOURNAL PAGE — NEWSLETTER — RESPONSIVE
========================================================= */

@media (max-width: 768px) {
  .journal-newsletter {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: 28px 24px;
  }

  .journal-newsletter-text {
    max-width: none;
  }

  .journal-newsletter-form {
    max-width: none;
  }
}

/* =========================================================
   ARTICLE DETAIL PAGE
========================================================= */

.article-breadcrumb {
  padding: 18px 0;
  background: var(--vt-ivory, #fbf7ef);
  border-bottom: 1px solid var(--vt-border, #eadfce);
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  color: var(--vt-muted, #7a6f69);
}

.article-breadcrumb .shop-container {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  white-space: nowrap;
}

.article-breadcrumb a {
  color: var(--vt-burgundy, #6f1023);
  text-decoration: none;
  font-weight: 700;
}

.article-breadcrumb a:hover {
  color: var(--vt-gold, #c9963e);
}

.article-breadcrumb span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.article-breadcrumb .sep {
  color: var(--vt-gold, #c9963e);
}

.article-hero {
  width: 100%;
  background: #eee7dc;
}

.article-hero-image {
  display: block;
  width: 100%;
  height: clamp(280px, 42vw, 560px);
  object-fit: cover;
}

.article-header {
  padding: 54px 0 42px;
  background: #fff;
  text-align: left;
}

.article-header-container {
  max-width: 1600px;
}

.article-hero-category {
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vt-burgundy, #6f1023);
}

.article-header h1 {
  font-family: serif;
  font-size: 3.5rem;
  font-weight: semi-bold;
  line-height: 1.18;
  margin: 16px 0 22px;
  color: var(--vt-text, #1b1716);
  max-width: 820px;
}

.article-hero-meta {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  color: var(--vt-muted, #7a6f69);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.article-hero-meta .dot {
  color: var(--vt-gold, #c9963e);
}

.article-body-section {
  padding: 18px 0 60px;
  background: #fff;
}

.article-body-container {
  max-width: 1600px;
}

.article-body-content {
  font-family: serif;
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--vt-text, #1b1716);
}

.article-body-content .article-text {
  width: 75%;

}

.article-body-content .article-text p,
.article-body-content>p {
  margin: 0 0 5px;
  font-size: 1.75rem;
  font-weight: 100;
}

.article-body-content .article-text h1,
.article-body-content .article-text h2,
.article-body-content .article-text h3,
.article-body-content .article-text h4 {
  font-family: serif;
  margin: 2px 0 2px;
  line-height: 1.35;
}

.article-body-content .article-text> :first-child {
  margin-top: 0;
}

.article-body-content .article-text h2 {
  font-size: 3rem;
  font-style: bold;
}

.article-body-content .article-text h3,
.article-body-content>h3 {
  font-size: 2.5rem;
  font-style: bold;
  margin-bottom: 0;
}

.article-body-content .article-text ul,
.article-body-content>ul {
  margin: 8px 0 20px;
  padding-left: 32px;
  font-size: 1.75rem;
  line-height: 1.45;
  list-style-type: disc;
  list-style-position: outside;
}

.article-body-content .article-text ol,
.article-body-content>ol {
  margin: 8px 0 20px;
  padding-left: 32px;
  font-size: 1.75rem;
  line-height: 1.45;
  list-style-type: decimal;
  list-style-position: outside;
}

.article-body-content .article-text li,
.article-body-content>ul li,
.article-body-content>ol li {
  margin-bottom: 4px;
}

.article-body-content .article-text blockquote {
  border-left: 3px solid var(--vt-gold, #c9963e);
  padding-left: 20px;

  margin: 24px 0;
  font-size: 2rem;
}

.article-body-content .article-image {
  width: 100%;
  margin: 30px 0 34px;
}

.article-body-content .article-image img {
  max-width: 100%;
  width: 100%;
  height: clamp(240px, 28vw, 440px);
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.article-body-content .article-image figcaption {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--vt-muted, #7a6f69);
  text-align: center;
  margin-top: 10px;
}

.article-body-content .article-table-wrapper {
  width: 70%;
  overflow-x: auto;
  margin: 32px auto;
}

.article-body-content .article-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
}

.article-body-content .article-table th,
.article-body-content .article-table td {
  border: 1px solid var(--vt-border, #eadfce);
  padding: 12px 14px;
  text-align: left;
}

.article-body-content .article-table th {
  background: var(--vt-ivory, #fbf7ef);
  font-weight: 700;
  color: var(--vt-burgundy, #6f1023);
}

.article-body-content .article-quote {
  width: 100%;
  margin: 42px 0;
  padding: 26px 30px;
  border-radius: 2px;
  box-sizing: border-box;
}

.article-body-content .article-quote blockquote {
  font-size: 1.15rem;
  line-height: 1.7;
  border: none;
  padding: 0;
  margin: 0;
  font-style: italic;
}

.article-body-content .article-quote footer {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 14px;
  text-align: left;
}

.article-body-content .quote-primary {
  border-left: 4px solid #7367f0;
  background: #f0eeff;
}

.article-body-content .quote-success {
  border-left: 4px solid #28a745;
  background: #e6f6ea;
}

.article-body-content .quote-warning {
  border-left: 4px solid #f1a622;
  background: #fff4e5;
}

.article-body-content .quote-danger {
  border-left: 4px solid #ea5455;
  background: #fde3e4;
}

.article-back-section {
  padding: 0 0 70px;
  background: #fff;
}

.article-back-section a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--vt-burgundy, #6f1023);
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.article-back-section a:hover {
  color: var(--vt-gold, #c9963e);
}

@media (max-width: 768px) {
  .article-hero {
    min-height: 0;
  }

  .article-header {
    padding: 40px 0 28px;
  }

  .article-header h1 {
    font-size: 1.9rem;
  }

  .article-body-section {
    padding: 10px 0 40px;
  }

  .article-body-content {
    font-size: 1rem;
  }

  .article-body-content .article-text,
  .article-body-content .article-table-wrapper {
    width: 100%;
  }
}

/* Keep product card actions aligned across shop, related, explore wines, wishlist, and account grids. */
.product-grid .product-card,
.related-products-track .product-card,
.mini-product-grid .product-card,
.explore-wines-slide .product-card,
.wishlist-page .product-card {
  height: 100%;
}

.product-grid .product-card .product-body,
.related-products-track .product-card .product-body,
.mini-product-grid .product-card .product-body,
.explore-wines-slide .product-card .product-body,
.wishlist-page .product-card .product-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.wishlist-page .row {
  display: flex;
  flex-wrap: wrap;
}

.wishlist-page .row>[class*="col-"] {
  display: flex;
  flex-direction: column;
}

.product-grid .product-card .product-body .btn,
.related-products-track .product-card .product-body .btn,
.mini-product-grid .product-card .product-body .btn {
  width: 100%;
  min-height: 40px;
  height: 40px;
  max-height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: auto;
  box-sizing: border-box;
  flex-shrink: 0;
}

.explore-wines-slide .product-card .product-body .btn,
.wishlist-page .product-card .product-body .btn {
  margin-top: auto !important;
}


.article-header {
  text-align: left;
}

.article-hero-meta {
  display: flex;
  justify-content: flex-start;
  /* This forces flex items to the left */
  align-items: center;
}


/* ---------- Collection & Region cards: square image ---------- */
.collection-image-wrapper,
.region-image-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--vt-ivory, #fbf7ef);
}

.collection-card-image,
.region-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.collection-card:hover .collection-card-image,
.region-card:hover .region-card-image {
  transform: scale(1.05);
}

/* Tighter text block under the square image, matching the target */
.collection-card h3 {
  font-size: 1.3rem;
  margin: 14px 18px 4px 18px;
}

.collection-card p {
  font-size: 12.5px;
  margin: 0 18px 10px 18px;
}

.collection-link {
  margin: 0 18px 18px 18px;
}

.region-card h3 {
  font-size: 1.2rem;
  margin: 14px 18px 3px 18px;
}

.region-card .region-country {
  margin: 0 18px 16px 18px;
}


@media (max-width: 992px),
(max-width: 768px),
(max-width: 650px),
(max-width: 480px) {

  .collection-image-wrapper,
  .region-image-wrapper {
    height: auto;
    aspect-ratio: 1 / 1;
  }
}


/* =========================================================
   REGION SECTION - Center Text Below Image
========================================================= */

/* Center all content inside the region card */
.region-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* This centers the h3 and span horizontally */
  text-align: center;
  /* Ensures text inside those elements is centered */
}

/* Remove the fixed left margins so centering works cleanly */
.region-card h3 {
  margin: 14px 18px 3px 18px;
  /* Keep existing top/bottom/side spacing */
}

.region-card .region-country {
  margin: 0 18px 16px 18px;
  /* Keep existing spacing */
}

/* Optional: If you want the card content to be centered but keep the card itself
   left-aligned in the grid, the above is sufficient. If the entire card should be
   centered within its grid cell, ensure the grid item itself is centered: */
.region-grid {
  /* Existing grid properties remain */
  justify-items: center;
  /* This centers each card within its grid cell */
}


/* =========================================================
   FIX: Region Card Text Not Showing on Mobile (below 651px)
========================================================= */

@media (max-width: 650px) {

  /* Remove the fixed height that was cutting off the text */
  .region-card {
    height: auto !important;
    min-height: auto !important;
  }

  /* Ensure the image wrapper doesn't consume all vertical space */
  .region-image-wrapper {
    aspect-ratio: 1 / 1;
    height: auto;
    flex-shrink: 0;
  }

  /* Make sure the h3 and country text are visible and centered */
  .region-card h3 {
    display: block !important;
    font-size: 0.9rem !important;
    margin: 10px 12px 2px 12px !important;
    color: var(--vt-text, #1b1716) !important;
    line-height: 1.3 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .region-card .region-country {
    display: block !important;
    font-size: 9px !important;
    margin: 0 12px 10px 12px !important;
    color: var(--vt-gold, #c9963e) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* =========================================================
   FIX: Increase Font Sizes on Mobile for Collection & Region Cards
========================================================= */

/* Tablet (768px and below) */
@media (max-width: 768px) {

  /* Collection Cards */
  .collection-card h3 {
    font-size: 1.3rem !important;
    margin: 14px 18px 6px 18px !important;
    line-height: 1.3 !important;
  }

  .collection-card p {
    font-size: 13px !important;
    margin: 0 18px 12px 18px !important;
    line-height: 1.5 !important;
  }

  .collection-link {
    font-size: 12px !important;
    margin: 0 18px 18px 18px !important;
  }

  /* Region Cards */
  .region-card h3 {
    font-size: 1.2rem !important;
    margin: 14px 18px 4px 18px !important;
    line-height: 1.3 !important;
  }

  .region-card .region-country {
    font-size: 12px !important;
    margin: 0 18px 16px 18px !important;
    letter-spacing: 0.08em !important;
  }
}

/* Mobile (650px and below) */
@media (max-width: 650px) {

  /* Collection Cards */
  .collection-card h3 {
    font-size: 1.35rem !important;
    margin: 12px 14px 5px 14px !important;
    line-height: 1.3 !important;
  }

  .collection-card p {
    font-size: 14.5px !important;
    margin: 0 14px 10px 14px !important;
    line-height: 1.5 !important;
  }

  .collection-link {
    font-size: 12.5px !important;
    margin: 0 14px 16px 14px !important;
  }

  /* Region Cards */
  .region-card h3 {
    font-size: 1.25rem !important;
    margin: 12px 12px 3px 12px !important;
    line-height: 1.3 !important;
  }

  .region-card .region-country {
    font-size: 12.5px !important;
    margin: 0 12px 12px 12px !important;
    letter-spacing: 0.08em !important;
  }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {

  /* Collection Cards */
  .collection-card h3 {
    font-size: 1.2rem !important;
    margin: 10px 12px 4px 12px !important;
    line-height: 1.3 !important;
  }

  .collection-card p {
    font-size: 14px !important;
    margin: 0 12px 8px 12px !important;
    line-height: 1.4 !important;
  }

  .collection-link {
    font-size: 12px !important;
    margin: 0 12px 14px 12px !important;
  }

  /* Region Cards */
  .region-card h3 {
    font-size: 1.1rem !important;
    margin: 10px 12px 2px 12px !important;
    line-height: 1.3 !important;
  }

  .region-card .region-country {
    font-size: 12px !important;
    margin: 0 12px 10px 12px !important;
    letter-spacing: 0.06em !important;
  }
}

/* Extra Small Mobile (380px and below) */
@media (max-width: 380px) {

  /* Collection Cards */
  .collection-card h3 {
    font-size: 1.1rem !important;
    margin: 8px 10px 3px 10px !important;
  }

  .collection-card p {
    font-size: 13px !important;
    margin: 0 10px 6px 10px !important;
  }

  .collection-link {
    font-size: 11px !important;
    margin: 0 10px 12px 10px !important;
  }

  /* Region Cards */
  .region-card h3 {
    font-size: 1rem !important;
    margin: 8px 10px 2px 10px !important;
  }

  .region-card .region-country {
    font-size: 11px !important;
    margin: 0 10px 8px 10px !important;
  }
}

/* Final mobile override: keep region names and countries visible below 651px. */
@media (max-width: 650px) {
  .region-card {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .region-card h3,
  .region-card .region-country {
    display: block !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .region-card h3 {
    color: var(--vt-text, #1b1716) !important;
  }

  .region-card .region-country {
    color: var(--vt-gold, #c9963e) !important;
  }

}


/* =========================================================
   FAQ + MAP SECTION - FIXES
========================================================= */

/* 1. Make the map column stretch to the same height as the FAQ column */
.faq-map-layout {
  align-items: stretch;
  /* Ensures both columns are equal height */
}

.map-column {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.map-card {
  flex: 1;
  /* Fills the remaining height of the column */
  display: flex;
  flex-direction: row;
  /* Side-by-side info and map */
  align-items: stretch;
}

/* Ensure the map iframe stretches to fill the available height */
.map-holder {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.map-holder iframe {
  flex: 1;
  min-height: 100%;
}

/* 2. "View All FAQs" Button - Decrease width and align left */
.btn-view-all-faqs {
  display: inline-block;
  /* Prevents it from stretching full width */
  width: auto;
  /* Shrinks to fit content */
  min-width: 200px;
  /* Optional: gives it a decent minimum size */
  align-self: flex-start;
  /* Aligns it to the left in a flex container */
  margin-top: 20px;
  padding: 14px 140px;
  /* ... keep your existing border, font, and color styles ... */
}

/* 3. Responsive adjustments for screens 993px and below */
@media (max-width: 993px) {

  /* Stack the FAQ and Map columns vertically */
  .faq-map-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Center the "View All FAQs" button on smaller screens */
  .btn-view-all-faqs {
    display: block;
    /* Allow centering with margin auto */
    margin: 20px auto 0;
    /* Center horizontally */
    width: 100%;
    max-width: 300px;
    /* Prevent it from becoming too wide */
    text-align: center;
  }

  /* Ensure the map card stacks its info and map properly on mobile */
  .map-card {
    flex-direction: column;
  }

  .map-holder {
    min-height: 300px;
    /* Give the map a reasonable height on mobile */
  }
}


/* =========================================================
   FAQ + MAP SECTION - EDGE-TO-EDGE MAP FIX
========================================================= */

/* 1. Remove padding from the card so the map can touch the edges */
.map-card {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--vt-border);
  border-radius: 6px;
  padding: 0;
  /* Changed from 24px to 0 */
  gap: 0;
  /* Changed from 24px to 0 */
  overflow: hidden;
  /* Ensures the map doesn't spill out of the rounded corners */
}

/* 2. Add padding ONLY to the left info column */
.map-info {
  flex: 0 0 220px;
  /* Adjust width as needed */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 30px;
  /* This creates the white space around the text */
}

/* 3. Remove border-radius so the map sits flush against the box edges */
.map-holder {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 0;
  /* Removed the 4px radius */
  overflow: hidden;
}

/* 4. Force the iframe to fill the entire space */
.map-holder iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: block;
  border: 0;
}

/* Responsive adjustments for screens 993px and below */
@media (max-width: 993px) {
  .map-card {
    flex-direction: column;
    padding: 0;
    gap: 0;
  }

  .map-info {
    flex: 0 0 auto;
    width: 100%;
    padding: 24px;
    /* Keep padding on mobile for the info section */
  }

  .map-holder {
    min-height: 300px;
    width: 100%;
    border-radius: 0;
  }
}

/* =========================================================
   "VIEW ALL FAQS" BUTTON - CONSOLIDATED FIX
========================================================= */

/* Base style (desktop) — shrinks to content and aligns left */
.btn-view-all-faqs {
  display: inline-block;
  width: auto;
  min-width: 200px;
  align-self: flex-start;
  /* Aligns left inside flex column */
  margin-top: 20px;
  padding: 14px 30px;
  /* Was 14px 140px — that was the bug */
  border: 1px solid var(--vt-burgundy);
  border-radius: 4px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vt-burgundy);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  /* Prevents "VIEW / ALL / FAQS" wrapping */
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.btn-view-all-faqs:hover {
  background: var(--vt-burgundy);
  border-color: var(--vt-burgundy);
  color: #fff;
}

/* --- Responsive: 993px and below --- */
@media (max-width: 993px) {

  /* Stack the FAQ and Map columns vertically */
  .faq-map-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Center the button and give it a sensible width */
  .btn-view-all-faqs {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 20px auto 0;
    /* Centers horizontally */
    padding: 14px 24px;
    /* Normal padding — no more stretching */
  }

  /* Stack the map card vertically on mobile */
  .map-card {
    flex-direction: column;
    padding: 0;
    gap: 0;
  }

  .map-info {
    flex: 0 0 auto;
    width: 100%;
    padding: 24px;
  }

  .map-holder {
    min-height: 300px;
    width: 100%;
    border-radius: 0;
  }
}


/* =========================================================
   SHIPPING & RETURN INFO SECTION - TABLET & MOBILE FIX
   (Screens 769px and below)
========================================================= */

@media (max-width: 769px) {

  /* 1. Ensure the row stacks vertically and centers its items */
  .sr-row {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    /* Reduce the gap from 28px for tighter spacing */
  }

  /* 2. Reset the flex-basis so items don't stretch vertically */
  .sr-item {
    flex: 0 0 auto;
    /* Prevents the item from growing/shrinking to fill space */
    width: 100%;
    max-width: 500px;
    /* Keeps the text block from getting too wide */
    margin-bottom: 0;
  }

  /* 3. Fix the divider to act as a proper horizontal line */
  .sr-divider {
    width: 60%;
    height: 1px;
    margin: 0 auto;
    /* Centers the divider */
    background: var(--vt-border);
    align-self: center;
    /* Overrides any stretch behavior */
  }

  /* 4. Ensure the text block inside the item is properly aligned */
  .sr-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
}

/* Specific fix for very small mobile screens if needed */
@media (max-width: 576px) {
  .sr-item {
    flex-direction: column;
    /* Stack icon above text on very small screens */
    align-items: center;
    text-align: center;
  }

  .sr-text {
    align-items: center;
    text-align: center;
  }

  .sr-link {
    justify-content: center;
  }
}

/* Wine Club "Manage Membership" button — sized to fit the
   narrow (40%) wine-club-badge column instead of using the
   generic full-width .btn padding/letter-spacing, which
   overflows and gets clipped by .account-card's overflow:hidden */
.wine-club-badge .btn.gold {
  width: 100%;
  max-width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.13em;
  white-space: normal;
  /* allow wrap instead of clipping */
  word-break: break-word;
  text-align: center;
  box-sizing: border-box;
  font-weight: 500;
}

@media (max-width: 768px) {
  .wine-club-badge .btn.gold {
    font-size: 12px;
    padding: 12px 16px;
    letter-spacing: 0.02em;
  }
}

.get-touch-btn {
  display: block;
  width: auto;
  min-width: 260px;
  margin: 0 auto;
  padding: 16px 40px;
  background: var(--vt-burgundy);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease;
}

.get-touch-btn:hover {
  color: #fff;
  background: var(--vt-burgundy-light, #7a1f2b);
}