/*
 * Custom style goes here.
 * A template should always ship with an empty custom.css
 */
/* MAGA CAMBIOS PAGINA LOGIN*/
.authentication-page {
  padding: 20px 0;
}

.authentication-page .row {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.authentication-page .login-form,
.authentication-page .register-form {
  background: #f8f8f8;
  padding: 30px;
  border-radius: 5px;
  height: 100%;
}

.authentication-page h3 {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 600;
}

.register-form .no-account {
  text-align: center;
}

.register-form .btn-primary {
  margin-top: 15px;
  width: 100%;
  padding: 12px;
}

@media (max-width: 768px) {
  .authentication-page .row {
    flex-direction: column;
  }
}



.small-category-title img {
    max-height: 90px;
} /* no funciona...Jin */

.product-swatches .swatches-list>li.selected>span.color .check-circle {
    width: 90px;
    height: 90px;
} /* tama?o de imagen combinacion de color ..Jin */

.product-swatches .swatches-list>li.selected>span.color {
    width: 90px;
    height: 90px;
} /* tama?o de imagen combinacion de color ..Jin */

.product-swatches .swatches-list>li>span.color {
    width: 80px;
    height: 80px;
} /* tama?o de imagen combinacion de color ..Jin */

.anav-top .acategory-content .category-title img {
    max-height: 60px;
    width: auto;
    margin: 8px 5px 8px -5px;
}

.anav-top .acategory-content .category-title a {
    display: flex;
    align-items: center;
    width: fit-content;
    width: -moz-fit-content;
    padding: 0 0 0 30px;
    /* max-width: 100%; */
}


.main-product-details .product-add-to-cart .inline-style .add-to-cart {
    width: 100%;
    
}

.product-quantity {
    flex-wrap: nowrap;
}




.product-attributes img[Attributes Style] {
  width: 60px !important;
  height: 60px !important;
}



/* 2025.12.21 Jin — Login & Register Page Customization */

/* 卡片样式：登录 + 注册 */
.authentication-page .login-form,
.authentication-page .register-form {
    background: #ffffff;
    padding: 30px;
    border-radius: 5px;
    height: 100%;
}

/* 桌面端：左右布局 */
.authentication-page .row {
    display: flex;
    gap: 30px;
    flex-wrap: nowrap;
}

/* 输入框 + MOSTRAR 按钮改为上下布局 */
.input-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* MOSTRAR 按钮样式 */
.input-group .input-group-btn > .btn {
    width: 100%;
    height: auto;
    margin-top: 8px;
    border-radius: 5px;
}

/* 输入框拉满宽度 */
.input-group input {
    width: 100% !important;
    flex: 1 1 auto !important;
}

/* ? 移动端响应式：自动上下排列 */
@media (max-width: 768px) {
    .authentication-page .row {
        flex-direction: column;
        gap: 10px;
    }

    .authentication-page .login-form,
    .authentication-page .register-form {
        width: 100%;
    }
}


/* ? Campo de registo de Recargo equivalencia */
/* 默认警告提示框风格 */
#uniform-recargo label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    background: #fff3cd !important;              /* 浅黄色背景 */
    border-left: 5px solid #ffffff !important;   /* 红色强调条 */
    padding: 14px 16px !important;
    border-radius: 6px !important;

    color: #856404 !important;
    font-weight: 900 !important;
    font-size: 1.2em !important;                 /* 字体放大一倍 */
    line-height: 1.3 !important;

    box-shadow: 0 0 0 rgba(0,0,0,0) !important;  /* 初始无阴影 */
    transition: all 0.25s ease !important;
}

/* 加入 ?? 图标 */
#uniform-recargo label::before {
    content: "\26A0"; /* ? 的 Unicode */
    font-size: 1.4em;
    display: inline-block;
}

/* hover 效果：更亮背景 + 深色边条 + 轻微阴影 */
#uniform-recargo label:hover {
    background: #ffe8a1 !important;
    border-left-color: #ffffff !important;
    color: #6d4c00 !important;

    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important; /* 现代轻阴影 */
    cursor: pointer !important;
}




/* 用户登录框的EMAIL改到上面 --JIN 2026.1.6 */
/* 让 Email 和 Contrase?a 的 label 显示在输入框上方 */
#login-form .form-group.row.email label,
#login-form .form-group.row.password label {
  position: relative;
  top: 0;
  left: 0;
  width: 100% !important;
  margin-bottom: 1px;
  text-align: left;
}

/* 让输入框占满整行 */
#login-form .form-group.row.email .col-lg-6,
#login-form .form-group.row.password .col-lg-6 {
  width: 100% !important;
  max-width: 100% !important;
}

/* 隐藏右侧的 form-control-comment 空白列 */
#login-form .form-group.row.email .form-control-comment,
#login-form .form-group.row.password .form-control-comment {
  display: none;
}

/* 让 form-group 不再是三列布局 */
#login-form .form-group.row.email,
#login-form .form-group.row.password {
  display: block;
}

/* 标签颜色 */
#login-form .form-group label {
  color: #ff7a00;
  font-weight: 600;
}

/* 输入框边框 */
#login-form input.form-control {
  border: 1px solid #ff7a00;
  border-radius: 6px;
  padding: 10px 12px;
}

/* 聚焦时更亮 */
#login-form input.form-control:focus {
  border-color: #ff5500;
  box-shadow: 0 0 0 2px rgba(255,85,0,0.2);
}

/* 登录按钮更有层次 */
#login-form button {
  border-radius: 6px;
  font-size: 16px;
  padding: 12px;
  font-weight: 600;
}


/* 让登录表单内部的 row 居中排列 */
#login-form .row {
  justify-content: center !important;
}

/* 覆盖登录表单内部的 col-lg-6，让它恢复 100% 宽度 */
#login-form .col-lg-6 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* background MOSTRAR contrase?a */
.input-group .input-group-btn>.btn {
    background: #e3e3e3;
    color: #7b7b7b;
    
}



/* 2026.1.10 MISMA SERIE 选框大小 */
.bordobollino {
    width: 90px;
    height: 90px;
    float: left;
    cursor: pointer;
}

/* 选中状态的边框颜色改成主题色 */
#bollinitabs .bollinoselected,
.bollinoselected {
    border: 2px solid #f78200 !important;
    box-shadow: 0 0 6px rgba(0,0,0,0.15);
    border-radius: 8px;
}

.selectedtriangle {
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    right: 0;
    border-bottom: 10px solid #f78200;
    border-left: 10px solid transparent;
}





/* 2026.1.10 botton de comprar 选框大小 */

/* 1. 设置父容器为 Flex 布局并居中 */
.product-add-to-cart .input-group.bootstrap-touchspin {
    display: flex !important;
    flex-direction: row;
    align-items: stretch;
    max-width: 160px; /* 可以根据需要调整总宽度 */
}



/* 2. 让按钮的包装容器“失效”，使内部按钮直接参与 Flex 排序 */
.product-add-to-cart .input-group-btn-vertical, 
.product-add-to-cart .input-group-btn {
    display: contents !important;

}


/* 3. 通过 order 属性精准控制顺序 */
/* 减号排在第 1 位 */
.product-add-to-cart .bootstrap-touchspin-down {
    order: 1 !important;
    border-radius: 4px 0 0 4px !important; /* 左圆角 */
}

/* 输入框排在第 2 位（中间） */
.product-add-to-cart .bootstrap-touchspin .form-control {
    order: 2 !important;
    text-align: center;
    border-left: none !important;
    border-right: none !important;
    height: 100% !important;
    margin: 0 !important;
}


/* 加号排在第 3 位 */
.product-add-to-cart .bootstrap-touchspin-up {
    order: 3 !important;
    border-radius: 0 4px 4px 0 !important; /* 右圆角 */

}

/* 4. 统一按钮样式 */

.product-add-to-cart .btn-touchspin {
    /* padding: 5px 15px !important; */
    background-color: #f8f8f8;
    border: 1px solid #ccc !important;

}

.input-group .input-group-btn>.btn {
    margin-top: 0px;
}




/* 1. 设置外层容器为横向排列 */

.product-add-to-cart .product-quantity {
    display: flex;
    flex-wrap: nowrap;     /* 强制不换行，保持在同一行 */
    align-items: flex-end; /* 使按钮和输入框底部对齐 */
    gap: 10px;             /* 两个元素之间的间距 */
    margin-bottom: 1rem;

}

/* 2. 调整数量选择器的宽度（固定宽度） */
.product-add-to-cart .qty {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    flex: 0 0 auto;        /* 保持原有大小，不伸缩 */

}

/* 3. 让购买按钮自动填充剩余空间（响应式关键） */
.product-add-to-cart .add {
    flex: 1 1 auto;        /* 自动填满右侧剩余空间 */
    margin-bottom: 0 !important;
}

/* 4. 调整按钮内部样式，确保高度一致 */
.product-add-to-cart .btn-primary.add-to-cart {

    height: 44px;          /* 建议根据你的 TouchSpin 高度进行微调 */
    width: 100%;           /* 按钮充满容器 */
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;   /* 防止按钮文字换行 */

}


/* 响应式调整：针对极小屏幕（如 320px 宽度的手机） */

@media (max-width: 480px) {
    .product-add-to-cart .product-quantity {
        gap: 5px;          /* 缩小间距 */
    }

.product-add-to-cart .qty {
        width: 120px;      /* 在手机端稍微收缩数量框宽度 */

    }

}

.product-add-to-cart .input-group.bootstrap-touchspin {
    max-width: 300px;
      
    }

 .product-quantity-touchspin .input-group .input-group-btn>.btn {

    width: 60px;

     }




/* 2026.1.10 JIN 产品列表编号标签样式 */  
/* 确保父容器是相对定位 */
.first-block {
    position: relative;
}


.product-reference-tag {
    position: absolute;
    bottom: 1px;   /* 距离图片底部 */
    left: 5px;     /* 距离图片左侧 */
    background: rgba(255, 255, 255, 0.7); /* 半透明白底，不遮挡图片细节 */
    color: #666;   /* 灰色文字 */
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 2px;
    z-index: 1;    /* 确保在图片之上 */
    pointer-events: none; /* 穿透点击，不影响点击图片跳转 */
}





/* 针对主页产品编号标签的微调 */
.product-info-overlay {
    position: absolute;
    bottom: 1px;      /* 增加底部间距，不再紧贴边缘 */
    left: 4px;        /* 增加左侧间距，往右挪一点 */
    right: 4px;
    display: flex;
    justify-content: flex-start;
    pointer-events: none;
    z-index: 2;
}

.overlay-ref {
    background: rgba(255, 255, 255, 0.85); /* 稍微增加一点背景不透明度 */
    color: #666;
    font-size: 10px;            /* 缩小字号，9px 或 10px 通常比较精致 */
    padding: 1px 2px;          /* 缩小内边距，让标签更小巧 */
    border-radius: 1px;        /* 减小圆角，使其更硬朗现代 */
    font-family: "Century Gothic", sans-serif;
    letter-spacing: 0.2px;     /* 增加一点字间距，提高可读性 */
}


/* 结束 2026.1.10 JIN 产品列表编号标签样式 */  











/* 2026.1.10 Jin 解决标题撑开高度的问题 */
.product-name {
    min-height: 44px; /* 根据你的字体大小调整，确保至少能容纳两行 */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制标题最多显示两行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
}

.product-name a {
    line-height: 1.4;
    display: block;
}


/* 2026.1.10 Jin 修改列表页产品标题 */
.product-name a {
    font-size: 13px;          /* 字体大小，可根据需要调整 */
    font-weight: 500;          /* 字体粗细: 400是常规, 600-700是加粗 */
    color: #333333;            /* 字体颜色 */
   /* font-family: "Century Gothic", AppleGothic, sans-serif; */ /* 换成你喜欢的字体 */
    text-transform: none;      /* 强制不显示为全大写 (如果是全大写可以加这行) */
    text-decoration: none;     /* 去掉下划线 */
}

/* 鼠标悬停时的颜色变化 */
.product-name a:hover {
    color: #ff6600;            /* 悬停时的颜色，建议和主题色一致 */
}