/*
Theme Name: Luxebony Hair
Theme URI: https://www.luxebonyhair.com/
Template: modern-store
Author: Thomas
Author URI: https://www.luxebonyhair.com/
Description: This is my theme
Tags: grid-layout,one-column,two-columns,three-columns,left-sidebar,custom-colors,custom-header,custom-logo,custom-menu,featured-images,flexible-header,full-width-template,rtl-language-support,sticky-post,theme-options,threaded-comments,translation-ready,blog,e-commerce,portfolio
Version: 1.26.1722134910
Updated: 2024-07-28 02:48:30

*/
.site-title a, .site-title a:visited{
	color: #61302b;
}

body {
  background-color: #f7f0ef;
}

.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product {
    border: 1px solid #efefef; /* Light gray border */
    border-radius: 10px; /* Adjust the radius for desired roundness */
    overflow: hidden; /* Ensures child elements like images don't overflow */
    transition: all 0.3s ease-in-out; /* Smooth hover effect */
	 background-color: #fff;
}

.woocommerce ul.products li.product:hover, 
.woocommerce-page ul.products li.product:hover {
    border-color: #cdcdcd; /* Changes border color on hover */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); /* Adds a subtle shadow */
}

.woocommerce ul.products li.product .woocommerce-loop-product__title{    
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.woocommerce div.product .product_title{
	font-size:16px;
}

.woocommerce div.product form.cart table{
	margin:0;
}

.woocommerce div.product p.price, .woocommerce div.product span.price{
	color: #61302b;
	font-weight: bold;
}

.dokan-product-meta{
    white-space: nowrap; /* Prevents text from wrapping */
    overflow: hidden; /* Hides overflow text */
    text-overflow: ellipsis; /* Adds "..." at the end of the line */
    display: block; /* Ensures it works properly */
    color:#999;
    font-size: 11px;
		padding-bottom: 10px;	
}

.widget {
    margin-bottom: 1em;
}

.widget-title {
	color: #61302b;
	font-size:1.125em;
    font-weight: bold;
    text-transform: none;
    letter-spacing: 0.03em;
    margin-bottom: 0.1em;
}

/* Split row: 左文右图，响应式 */
.split-row {
  display: flex;
  gap: 24px;                   /* 文图间距 */
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin: 20px 0;
}

/* 文本部分 */
.split-row .split-text {
  flex: 1 1 45%;               /* 占比：可修改为 60%/40% 等 */
  min-width: 260px;
}

/* 图片部分 */
.split-row .split-image {
  flex: 0 0 45%;               /* 图片固定占比 */
  max-width: 45%;
}
.split-row .split-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 4px;          /* 可选：圆角 */
}

/* 小屏幕（例如 < 768px）堆叠 */
@media (max-width: 767px) {
  .split-row {
    flex-direction: column;
  }
  .split-row .split-image,
  .split-row .split-text {
    max-width: 100%;
    flex-basis: auto;
  }
}


/* 外层容器：一行三列 */
.three-col-row{
  display: flex;
  gap: 24px;
  align-items: flex-start; /* 每列从上端对齐 */
  margin: 0 -8px; /* 可选：抵消内部 padding 使两侧对齐 */
  flex-wrap: nowrap; /* 在桌面保持一行三列 */
  padding: 8px 0;
  box-sizing: border-box;
}

/* 单列项：垂直排列内容 */
.three-col-item{
  flex: 1 1 0; /* 三列等分宽度 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px;
  box-sizing: border-box;
  min-width: 0; /* 解决文本溢出问题 */
  background: transparent; /* 可改成 #fff 或 card 背景 */
  align-items: center; 
  text-align:center;
}

/* 标题 */
.three-col-title{
  /*font-size: var(--three-col-title-size);*/
  margin: 0 0 10px;
  line-height: 1.2;
  color: inherit;
}

/* 小图：固定最大尺寸，保持纵向顺序 */
.three-col-thumb{
  width: 250px;
  height: auto;
  max-width: 100%;
  display: block;
  margin: 0 0 12px;
  object-fit: contain;
}

/* 文本 */
.three-col-text{
  /*color: var(--three-col-text-color);*/
  margin: 0;
  line-height: 1.5;
}

.three-col-row .three-col-item p, .three-col-row .three-col-item .alignnone{
    margin: 0.5em 0;
}

/* 响应式：平板（两列）与手机（单列） */
@media (max-width: 1000px){
  .three-col-row{
    flex-wrap: wrap;
  }
  .three-col-item{
    /* 两列布局：每列占 50%（减去间距） */
    flex: 0 0 calc(50% - 12px);
  }
}

@media (max-width: 600px){
  .three-col-row{
    gap: 16px;
  }
  .three-col-item{
    /* 手机单列：100% 宽度 */
    flex: 0 0 100%;
  }
  .three-col-thumb{
    /* 手机上图可小一些或居中显示 */
    /*width: 64px;*/
    margin-bottom: 10px;
  }
}

/* 可选：视觉微调（边框/hover） */
.three-col-item { transition: transform .15s ease, box-shadow .15s ease; }
.three-col-item:hover { transform: translateY(-3px); }
/* 若不想 hover 效果可删除上两行 */

#sp-ea-690.sp-easy-accordion>.sp-ea-single {
    background: none;
}

#sp-ea-690.sp-easy-accordion>.sp-ea-single>.ea-header a, #sp-ea-690.sp-easy-accordion>.sp-ea-single>.ea-header a .ea-expand-icon {
    color: #61302b;
}

.sp-easy-accordion .sp-ea-single .ea-header a {
    font-weight: 500;
}