/* ===================== Breadcrumb ===================== */
.breadcrumb { 
    display: flex !important; 
    flex-direction: row !important; 
    flex-wrap: wrap !important;
    list-style: none !important; 
    margin: 0 !important; 
    padding: 10px 0 !important; 
    min-height: 40px !important; 
    align-items: center !important;
}

.breadcrumb-item { 
    display: inline-flex !important; 
    align-items: center !important; 
    white-space: nowrap !important;
}

/* ===================== Promotion Text ===================== */
.product_sku.qk-text--heading {
    min-height: 1.5rem !important;
    visibility: hidden;
    position: relative;
    display: block;
    margin-bottom: 10px;
}

.product_sku.qk-text--heading::before {
    visibility: visible;
    content: "🆓 全館單筆滿$2500元享免運優惠(限台灣本島宅配 + 線上支付)";
    color: #2f4a43;
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    display: block;
}

/* ===================== Keyword Link ===================== */
a[data-seo-link] {
  font-weight: 600;
  color: #2b2b2b;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
a[data-seo-link]:hover {
  border-bottom: 1px solid #2b2b2b;
}

/* ===================== Footer Social Icon ===================== */
.right-content.qk-display--flex .media .item.social_media ul li svg {
    width: 45px !important; 
    height: 45px !important; 
    display: block !important;
}
.right-content.qk-display--flex .media .item.social_media ul li {
    margin-right: 25px !important; 
    display: inline-block !important;
}

/* ===================== Product Photos ===================== */
.product_photos.qk-w--100 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important; 
    background-color: transparent !important;
    box-sizing: border-box !important;
    overflow: visible !important; 
    margin-bottom: 25px !important;
}
.product_photos .swiper-container,
.product_photos .swiper {
    width: 100% !important;
    max-width: calc(100% - 2px) !important; 
    margin: 0 auto !important;
}
.product_photos .swiper-slide img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}
.swiper-slide-active img {
    transition: none !important;
    opacity: 1 !important;
}

/* ===================== CKEditor ===================== */
.desc_body .ckeditor h2, 
.desc_body .ckeditor h3 {
    color: #2B2B2B !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
}
.desc_body .ckeditor h2 { font-size: 1.625rem !important; margin: 2.8rem 0 1.25rem 0 !important; }
.desc_body .ckeditor h3 { font-size: 1.5rem !important; margin: 2rem 0 0.875rem 0 !important; }
.desc_body .ckeditor p, 
.desc_body .ckeditor ul, 
.desc_body .ckeditor li {
    line-height: 1.6 !important;
    color: #2B2B2B !important;
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
}
.desc_body .ckeditor ul[style*="flex"],
.desc_body .ckeditor ul[style*="flex"] li {
    display: inline-block !important;
    margin: 0 8px 8px 0 !important;
    vertical-align: top !important;
}

/* ===================== Table ===================== */
.desc_body .ckeditor table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 1px solid #B1B1B1 !important;
    margin-bottom: 1.25rem !important;
}
.desc_body .ckeditor th, 
.desc_body .ckeditor td {
    padding: 10px !important;
    border: 1px solid #B1B1B1 !important;
    font-size: 0.95rem !important;
}
.desc_body .ckeditor td:first-child {
    font-weight: bold !important;
}

/* ===================== Images ===================== */
.desc_body .ckeditor img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 0.5rem !important;
    margin-top: 1.25rem;
}

/* ===================== Footer Layout ===================== */
.brand-footer-container {
    background-color: #fafafa !important;
    border-radius: 15px !important;
    border: 1.5px solid #ececec !important;
    padding: 0 20px 25px 20px !important;
    margin-top: 2.8rem !important;
}
.brand-footer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.footer-text-wrapper { flex: 3; min-width: 300px; order: 1; }
.footer-logos-wrapper { flex: 1; min-width: 280px; order: 2; }
.logos-desktop { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.logos-mobile { display: none; }
.logos-desktop img { width: 120px; height: 120px; object-fit: contain; }

/* ===================== Paging ===================== */
.paging.row { display: flex; justify-content: center; }
.paging.row,
.paging.row nav,
.paging.row .pagination,
.paging.row .pagination li,
.paging.row .pagination li span,
.paging.row .pagination li a {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* ===================== Recipe / Accordion ===================== */
.recipe-item, .accordion-item {
  margin-bottom: 0.75rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #f8f9fa;
  position: relative;
}
.recipe-item input[type="radio"],
.accordion-item input[type="radio"] {
  display: none;
}
.recipe-question, .accordion-question {
  position: relative;
  padding: 1.2rem 3rem 1.2rem 1.2rem;
  cursor: pointer;
  font-weight: 600;
  line-height: 1.4;
  background: #f8f9fa;
  transition: background 0.3s ease;
  display: block;
}
.recipe-question span.toggle,
.accordion-question span.toggle {
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  font-weight: bold;
  transition: transform 0.3s ease;
  pointer-events: none;
}
.recipe-answer, .accordion-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease, background 0.3s ease;
  padding: 0 1.2rem;
  background: transparent;
}
.recipe-item input[type="radio"]:checked ~ .recipe-question,
.accordion-item input[type="radio"]:checked ~ .accordion-question {
  background: #eef0f3;
}
.recipe-item input[type="radio"]:checked ~ .recipe-question span.toggle,
.accordion-item input[type="radio"]:checked ~ .accordion-question span.toggle {
  transform: translateY(-50%) rotate(180deg);
}
.recipe-item input[type="radio"]:checked ~ .recipe-answer,
.accordion-item input[type="radio"]:checked ~ .accordion-answer {
  max-height: 9999px;
  padding: 1.2rem 1.2rem 1.4rem 1.2rem;
  background: #fff;
}

/* ===================== Media Queries ===================== */
@media (max-width: 768px) {
    .breadcrumb-item:first-child,
    .breadcrumb-item:has(meta[content="1"]) { display: none !important; }

    .product_photos.qk-w--100 { margin-bottom: 10px !important; }
    .desc_body .ckeditor h2 { font-size: 1.375rem !important; margin-top: 2rem !important; }
    .desc_body .ckeditor h3 { font-size: 1.25rem !important; margin-top: 1.5rem !important; }
    .desc_body .ckeditor p, .desc_body .ckeditor li { font-size: 0.95rem !important; }
    .desc_body .ckeditor table { display: block !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    .desc_body .ckeditor td { min-width: 120px; white-space: normal; }
    .desc_body .ckeditor figure { font-size:0.95rem !important; }

    .logos-desktop { display: none !important; }
    .logos-mobile { display: flex !important; flex-direction: row !important; justify-content: center; gap: 15px; width: 100%; margin-top: 5px; }
    .logos-mobile img { width: 100px !important; height: 100px !important; object-fit: contain !important; flex: 0 0 100px !important; }

    .report-grid { gap: 8px !important; }
    .report-grid img { width: calc(50% - 8px) !important; }
    .footer-text-wrapper, .footer-logos-wrapper { flex: 1 1 100% !important; }
    .footer-text-wrapper { order: 1 !important; }
    .footer-logos-wrapper { order: 2 !important; }
}

@media (max-width: 400px) {
    .logos-mobile img { width: calc(33.33% - 10px) !important; height: 60px !important; }
    .brand-footer-grid { gap: 15px !important; }
    .report-grid { gap: 5px !important; }
    .report-grid img { max-width: calc(50% - 5px) !important; }
    .desc_body .ckeditor div[style*="flex:1"],
    .desc_body .ckeditor div[style*="flex:3"] { min-width: 100% !important; order: 1 !important; }
}

.hidden-dot { display: none !important; }