/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0.5
*/

/*
=========================================================
YURADOLL - Alovio Product Options ONLY
仅针对 Alovio / APO 选项插件
不修改 WooCommerce 商品标题、价格、购物车、Meta、Tabs、
规格表、评论、商品列表等全局样式
=========================================================
*/

/* =========================================================
   02. Alovio Option 总体
   ========================================================= */

.single-product .apo-options {
  margin-top: 18px !important;
}

/*
非常重要：
插件自身 .apo-field 有时会带黑色边框。
这里完全清除，避免“外黑框 + 内浅灰框”。
*/
.single-product .apo-options .apo-field {
  margin: 0 0 16px !important;
  padding: 0 !important;

  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}


/*
Alovio Option 无外边框版

本区块仅处理选项插件本身：
- 不使用 fieldset 原生边框
- 不使用 inset box-shadow
- 不使用 ::before 模拟边框
- 每个选项区块通过留白和标题层级进行区分
*/
.single-product .apo-options .apo-fieldset {
  position: relative !important;

  margin: 0 !important;
  padding: 0 0 14px !important;

  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  overflow: visible !important;
}

/* 彻底取消模拟外框 */
.single-product .apo-options .apo-fieldset::before {
  content: none !important;
  display: none !important;
}

/* 恢复正常内容层级，不再为模拟边框设置 z-index */
.single-product .apo-options .apo-fieldset > * {
  position: static !important;
  z-index: auto !important;
}


/* =========================================================
   03. 清除插件内部多余套娃边框
   ========================================================= */

.single-product .apo-fieldset .apo-swatches,
.single-product .apo-fieldset .apo-options-list,
.single-product .apo-fieldset .apo-radio-group,
.single-product .apo-fieldset .apo-checkbox-group,
.single-product .apo-fieldset .apo-button-group,
.single-product .apo-fieldset [class*="options-wrap"],
.single-product .apo-fieldset [class*="option-wrap"],
.single-product .apo-fieldset [class*="field-wrap"],
.single-product .apo-fieldset [class*="choices"],
.single-product .apo-fieldset [class*="choice-wrap"] {
  border: 0 !important;
  outline: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}


/* =========================================================
   04. Option 标题
   ========================================================= */

.single-product .apo-field__label,
.single-product .apo-fieldset > legend {
  width: auto !important;

  margin: 0 0 10px !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;

  gap: 6px !important;

  border: 0 !important;
  outline: 0 !important;

  background: transparent !important;

  color: #1C1B1B !important;

  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;

  box-shadow: none !important;
}

.single-product .apo-field__label-text {
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;

  color: #1C1B1B !important;
}


/* 必填 * */
.single-product .apo-field__label .required,
.single-product .apo-field__label-text .required,
.single-product .apo-fieldset legend .required {
  color: #9A263D !important;
  font-weight: 700 !important;
}


/* =========================================================
   05. Tooltip / ? 提示按钮
   ========================================================= */

/*
兼容 Alovio 不同字段可能使用的不同 Class。
*/
.single-product .apo-options .apo-tooltip,
.single-product .apo-options .apo-tooltip-trigger,
.single-product .apo-options .apo-help,
.single-product .apo-options .apo-help-icon,
.single-product .apo-options .apo-info,
.single-product .apo-options .apo-info-icon,
.single-product .apo-options [class*="tooltip-icon"],
.single-product .apo-options [class*="tooltip-trigger"],
.single-product .apo-options [class*="help-icon"],
.single-product .apo-options [class*="info-icon"],
.single-product .apo-options button[aria-label*="help" i],
.single-product .apo-options button[aria-label*="info" i] {
  width: 21px !important;
  height: 21px !important;

  min-width: 21px !important;
  min-height: 21px !important;

  margin: 0 1px !important;
  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1.5px solid #9A263D !important;
  outline: 0 !important;
  border-radius: 50% !important;

  background: #FFFFFF !important;

  color: #9A263D !important;

  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;

  box-shadow: none !important;

  opacity: 1 !important;

  cursor: help !important;
}

.single-product .apo-options .apo-tooltip:hover,
.single-product .apo-options .apo-tooltip-trigger:hover,
.single-product .apo-options .apo-help:hover,
.single-product .apo-options .apo-help-icon:hover,
.single-product .apo-options .apo-info:hover,
.single-product .apo-options .apo-info-icon:hover,
.single-product .apo-options [class*="tooltip-icon"]:hover,
.single-product .apo-options [class*="tooltip-trigger"]:hover,
.single-product .apo-options [class*="help-icon"]:hover,
.single-product .apo-options [class*="info-icon"]:hover {
  background: #9A263D !important;
  border-color: #9A263D !important;

  color: #FFFFFF !important;
}


/* =========================================================
   06. 加价 Price Pill
   ========================================================= */

.single-product .apo-price-pill {
  min-height: 20px !important;

  padding: 2px 8px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid #B7E8C9 !important;
  border-radius: 999px !important;

  background: #F2FFF6 !important;

  color: #16844A !important;

  font-size: 10px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;

  white-space: nowrap !important;

  box-shadow: none !important;
}


/* =========================================================
   07. Image Swatch 容器
   ========================================================= */

.single-product .apo-options .apo-swatches--image {
  display: flex !important;
  flex-wrap: wrap !important;

  gap: 11px !important;

  align-items: flex-start !important;

  border: 0 !important;
  outline: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}


/* 单个 Image Swatch */
.single-product .apo-options
.apo-swatches--image
.apo-swatch.apo-swatch--image {
  position: relative !important;

  width: 78px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  border: 0 !important;
  outline: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}


/* 图片 */
.single-product .apo-options
.apo-swatches--image
.apo-swatch__img {
  width: 70px !important;
  height: 70px !important;

  min-width: 70px !important;
  min-height: 70px !important;

  padding: 2px !important;

  object-fit: cover !important;

  background: #FFFFFF !important;

  border: 1px solid #DCD8D5 !important;
  border-radius: 4px !important;

  box-sizing: border-box !important;

  box-shadow: none !important;

  transition:
    border-color .15s ease,
    box-shadow .15s ease !important;
}


/* Image Swatch Hover */
@media (hover: hover) {
  .single-product .apo-options
  .apo-swatches--image
  .apo-swatch--image:hover
  .apo-swatch__img {
    border-color: #B98B96 !important;
  }
}


/* Image Swatch 选中 */
.single-product .apo-options
.apo-swatches--image
.apo-swatch--image
> input[type="radio"]:checked
+ .apo-swatch__img {
  border: 2px solid #9A263D !important;

  box-shadow:
    0 0 0 2px #FFFFFF,
    0 0 0 3px #F1DDE2 !important;
}


/* 隐藏 Image Swatch 原始 radio */
.single-product .apo-options
.apo-swatch--image
> input[type="radio"] {
  position: absolute !important;

  opacity: 0 !important;

  pointer-events: none !important;
}


/* Image Swatch 名称 */
.single-product .apo-options
.apo-swatches--image
.apo-swatch__label {
  width: 100% !important;

  margin-top: 6px !important;

  color: #514C4D !important;

  font-size: 11px !important;
  line-height: 1.35 !important;

  text-align: center !important;
}


/* =========================================================
   08. Image Swatch 放大镜
   ========================================================= */

.yura-swatch-zoom {
  position: absolute !important;

  top: 45px !important;
  right: 4px !important;

  width: 20px !important;
  height: 20px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid rgba(255,255,255,.85) !important;
  border-radius: 50% !important;

  background: rgba(28,27,27,.68) !important;

  color: #FFFFFF !important;

  font-size: 0 !important;
  line-height: 1 !important;

  cursor: zoom-in !important;

  z-index: 10 !important;

  box-shadow: 0 1px 3px rgba(0,0,0,.13) !important;

  opacity: 0 !important;

  transition:
    opacity .15s ease,
    background .15s ease !important;
}

.yura-swatch-zoom::before {
  content: "";

  width: 7px !important;
  height: 7px !important;

  border: 1.5px solid #FFFFFF !important;
  border-radius: 50% !important;

  box-sizing: border-box !important;
}

.yura-swatch-zoom::after {
  content: "";

  position: absolute !important;

  width: 5px !important;
  height: 1.5px !important;

  right: 2.5px !important;
  bottom: 3.5px !important;

  background: #FFFFFF !important;

  transform: rotate(45deg) !important;
}

@media (hover: hover) {
  .single-product
  .apo-swatch--image:hover
  .yura-swatch-zoom {
    opacity: .90 !important;
  }
}

@media (hover: none) {
  .yura-swatch-zoom {
    opacity: .82 !important;
  }
}

.yura-swatch-zoom:hover {
  background: #9A263D !important;
}


/* =========================================================
   09. Button Option
   最终统一版
   未选中：白底浅灰
   选中：YURA 红底白字
   不出现黑色内层 / 红色二层边框
   ========================================================= */

/*
先彻底清理 Button Option 外层。
*/
.single-product .apo-options .apo-opt,
.single-product .apo-options label.apo-opt,
.single-product .apo-options .apo-btnopt {
  outline: 0 !important;
  box-shadow: none !important;
}


/* 按钮 Label 本体 */
.single-product .apo-options label.apo-btnopt,
.single-product .apo-options .apo-btnopt {
  min-height: 38px !important;

  margin: 0 5px 6px 0 !important;
  padding: 8px 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid #D8D4D1 !important;
  outline: 0 !important;
  border-radius: 4px !important;

  background: #FFFFFF !important;

  color: #1C1B1B !important;

  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;

  box-shadow: none !important;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease !important;
}


/*
非常重要：
Alovio 可能会把真正的黑色背景画在 span 上。
这里彻底清除 span 自带背景/边框。
*/
.single-product .apo-options .apo-btnopt > span,
.single-product .apo-options .apo-btnopt input + span {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  color: inherit !important;

  box-shadow: none !important;
}


/* Button Option 隐藏原始 radio */
.single-product .apo-options .apo-btnopt > input[type="radio"],
.single-product .apo-options .apo-btnopt > input[type="checkbox"] {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  opacity: 0 !important;

  pointer-events: none !important;
}


/* 未选中 Hover */
@media (hover: hover) {
  .single-product .apo-options .apo-btnopt:hover {
    border-color: #B9B2AF !important;

    background: #FAF9F7 !important;

    color: #1C1B1B !important;

    box-shadow: none !important;
  }
}


/* 选中：只允许一层红色 */
.single-product .apo-options
.apo-btnopt:has(> input[type="radio"]:checked),

.single-product .apo-options
.apo-btnopt:has(> input[type="checkbox"]:checked) {
  border-color: #9A263D !important;

  background: #9A263D !important;

  color: #FFFFFF !important;

  outline: 0 !important;

  box-shadow: none !important;
}


/* Alovio 某些版本可能加 selected / active class */
.single-product .apo-options .apo-btnopt.selected,
.single-product .apo-options .apo-btnopt.is-selected,
.single-product .apo-options .apo-btnopt.active {
  border-color: #9A263D !important;

  background: #9A263D !important;

  color: #FFFFFF !important;

  outline: 0 !important;

  box-shadow: none !important;
}


/*
覆盖插件 input:checked + span 的黑色背景。
这是解决你截图“红外框 + 黑内层”的关键。
*/
.single-product .apo-options
.apo-btnopt > input[type="radio"]:checked + span,

.single-product .apo-options
.apo-btnopt > input[type="checkbox"]:checked + span {
  border: 0 !important;
  outline: 0 !important;

  background: transparent !important;

  color: #FFFFFF !important;

  box-shadow: none !important;
}


/* selected / active 内文字 */
.single-product .apo-options .apo-btnopt.selected span,
.single-product .apo-options .apo-btnopt.is-selected span,
.single-product .apo-options .apo-btnopt.active span {
  border: 0 !important;

  background: transparent !important;

  color: #FFFFFF !important;

  box-shadow: none !important;
}


/* =========================================================
   10. 普通 Radio / Checkbox
   ========================================================= */

.single-product .apo-options input[type="radio"],
.single-product .apo-options input[type="checkbox"] {
  accent-color: #9A263D !important;
}


/* =========================================================
   11. Select
   ========================================================= */

.single-product .apo-options select {
  width: 100% !important;

  min-height: 42px !important;

  margin: 0 !important;

  padding: 0 40px 0 12px !important;

  border: 1px solid #DDD9D6 !important;
  outline: 0 !important;
  border-radius: 4px !important;

  background-color: #FFFFFF !important;

  color: #1C1B1B !important;

  font-size: 13px !important;

  box-shadow: none !important;
}

.single-product .apo-options select:focus {
  border-color: #9A263D !important;

  outline: 0 !important;

  box-shadow:
    0 0 0 2px rgba(154,38,61,.07) !important;
}


/* =========================================================
   12. Text / Number / Email / Tel / Textarea
   ========================================================= */

.single-product .apo-options input[type="text"],
.single-product .apo-options input[type="number"],
.single-product .apo-options input[type="email"],
.single-product .apo-options input[type="tel"],
.single-product .apo-options input[type="url"],
.single-product .apo-options textarea {
  width: 100% !important;

  border: 1px solid #DDD9D6 !important;
  outline: 0 !important;
  border-radius: 4px !important;

  background: #FFFFFF !important;

  color: #1C1B1B !important;

  font-size: 13px !important;

  box-shadow: none !important;
}

.single-product .apo-options input[type="text"],
.single-product .apo-options input[type="number"],
.single-product .apo-options input[type="email"],
.single-product .apo-options input[type="tel"],
.single-product .apo-options input[type="url"] {
  min-height: 42px !important;

  padding: 0 12px !important;
}

.single-product .apo-options textarea {
  min-height: 76px !important;

  padding: 10px 12px !important;

  resize: vertical !important;
}

.single-product .apo-options input:focus,
.single-product .apo-options textarea:focus {
  border-color: #9A263D !important;

  outline: 0 !important;

  box-shadow:
    0 0 0 2px rgba(154,38,61,.07) !important;
}


/* =========================================================
   13. Alovio Price Breakdown
   ========================================================= */

.single-product .apo-breakdown {
  margin-top: 14px !important;
  padding: 14px !important;

  border: 1px solid #E5E2E0 !important;
  border-radius: 4px !important;

  background: #FFFFFF !important;

  box-shadow: none !important;
}

.single-product .apo-breakdown ul {
  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

.single-product .apo-breakdown__row {
  padding: 5px 0 !important;

  border: 0 !important;

  color: #6F6A6B !important;

  font-size: 11px !important;
}

.single-product .apo-breakdown__row--total {
  margin-top: 6px !important;
  padding-top: 9px !important;

  border-top: 1px solid #E5E2E0 !important;

  color: #1C1B1B !important;

  font-size: 13px !important;
  font-weight: 700 !important;
}

/* =========================================================
   20. Image Swatch Lightbox
   ========================================================= */

.yura-swatch-lightbox {
  position: fixed !important;

  inset: 0 !important;

  display: none !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 32px !important;

  background: rgba(18,16,16,.86) !important;

  z-index: 9999999 !important;
}

.yura-swatch-lightbox.is-open {
  display: flex !important;
}

.yura-swatch-lightbox > img,
.yura-swatch-lightbox img {
  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width: min(90vw, 1000px) !important;
  max-height: 88vh !important;

  object-fit: contain !important;

  background: #FFFFFF !important;

  border-radius: 4px !important;

  box-shadow:
    0 20px 60px rgba(0,0,0,.30) !important;
}

.yura-swatch-lightbox__close {
  position: fixed !important;

  top: 22px !important;
  right: 26px !important;

  width: 40px !important;
  height: 40px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 50% !important;

  background: rgba(0,0,0,.30) !important;

  color: #FFFFFF !important;

  font-size: 25px !important;
  line-height: 1 !important;
  font-weight: 300 !important;

  cursor: pointer !important;

  z-index: 10000000 !important;

  box-shadow: none !important;
}

.yura-swatch-lightbox__close:hover {
  background: #9A263D !important;
}

/* =========================================================
   Responsive - Alovio ONLY
   ========================================================= */

@media only screen and (min-width: 850px) {

  .single-product .apo-options
  .apo-swatches--image
  .apo-swatch.apo-swatch--image {
    width: 80px !important;
  }

  .single-product .apo-options
  .apo-swatches--image
  .apo-swatch__img {
    width: 72px !important;
    height: 72px !important;

    min-width: 72px !important;
    min-height: 72px !important;
  }

  .yura-swatch-zoom {
    top: 47px !important;
  }

}

@media only screen and (max-width: 549px) {

  .single-product .apo-options .apo-field {
    margin-bottom: 10px !important;
  }

  .single-product .apo-options .apo-fieldset {
    padding: 0 0 12px !important;
  }

  .single-product .apo-field__label,
  .single-product .apo-field__label-text {
    font-size: 13px !important;
  }

  .single-product .apo-options
  .apo-swatches--image
  .apo-swatch.apo-swatch--image {
    width: 72px !important;
  }

  .single-product .apo-options
  .apo-swatches--image
  .apo-swatch__img {
    width: 64px !important;
    height: 64px !important;

    min-width: 64px !important;
    min-height: 64px !important;
  }

  .yura-swatch-zoom {
    top: 40px !important;
    right: 4px !important;

    width: 20px !important;
    height: 20px !important;

    opacity: .84 !important;
  }

  .single-product .apo-options label.apo-btnopt,
  .single-product .apo-options .apo-btnopt {
    min-height: 40px !important;
    padding: 9px 11px !important;
  }

  .yura-swatch-lightbox {
    padding: 16px !important;
  }

  .yura-swatch-lightbox > img,
  .yura-swatch-lightbox img {
    max-width: 94vw !important;
    max-height: 82vh !important;
  }

  .yura-swatch-lightbox__close {
    top: 14px !important;
    right: 14px !important;
  }

}

/* =========================================================
   24. Option 标题行统一
   标题 / ? 靠左，价格区间统一靠右
   ========================================================= */

.single-product .apo-field__label,
.single-product .apo-fieldset > legend {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;

  gap: 6px !important;

  width: 100% !important;
  max-width: 100% !important;

  margin-bottom: 10px !important;

  box-sizing: border-box !important;
}

/* 标题文字保持左侧，并允许过长标题适度收缩 */
.single-product .apo-field__label-text {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

/* ? 图标固定跟在标题旁边 */
.single-product .apo-field__label .apo-tooltip,
.single-product .apo-field__label .apo-tooltip-trigger,
.single-product .apo-field__label .apo-help,
.single-product .apo-field__label .apo-help-icon,
.single-product .apo-field__label .apo-info,
.single-product .apo-field__label .apo-info-icon,
.single-product .apo-field__label [class*="tooltip"],
.single-product .apo-field__label [class*="help"],
.single-product .apo-field__label [class*="info"] {
  flex: 0 0 auto !important;
}

/* 价格统一推到最右侧 */
.single-product .apo-field__label .apo-price-pill,
.single-product .apo-fieldset > legend .apo-price-pill {
  margin-left: auto !important;

  flex: 0 0 auto !important;

  white-space: nowrap !important;
}

/* 防止价格过长折行 */
.single-product .apo-price-pill {
  white-space: nowrap !important;
}

/* 手机端：标题仍保持一行；空间不足时优先保证价格完整 */
@media only screen and (max-width: 549px) {

  .single-product .apo-field__label,
  .single-product .apo-fieldset > legend {
    gap: 5px !important;
  }

  .single-product .apo-price-pill {
    font-size: 9.5px !important;
    padding: 2px 6px !important;
  }
}
/* =========================================================
   Alovio Price Breakdown
   强制价格明细独占一整行
   避免把 WooCommerce 数量框挤到右侧
   ========================================================= */

.single-product form.cart .apo-breakdown {
  width: 100% !important;
  max-width: 100% !important;

  flex: 0 0 100% !important;

  box-sizing: border-box !important;
}/* =========================================================
   Alovio 主区域占满商品信息栏
   仅修改 Alovio，不修改 WooCommerce 其他元素
   ========================================================= */

.single-product form.cart > .apo-options {
  width: 100% !important;
  max-width: 100% !important;

  flex: 0 0 100% !important;

  box-sizing: border-box !important;
}


/* Alovio 内部字段也统一使用完整宽度 */
.single-product .apo-options .apo-field,
.single-product .apo-options .apo-fieldset {
  width: 100% !important;
  max-width: 100% !important;

  box-sizing: border-box !important;
}


/* Alovio 价格明细同样独占整行 */
.single-product form.cart > .apo-breakdown {
  width: 100% !important;
  max-width: 100% !important;

  flex: 0 0 100% !important;

  box-sizing: border-box !important;
}
/* 商品详情页隐藏 Tag，其他 Meta 保留 */
.single-product .product_meta .tagged_as {
  display: none !important;
}