/*
Theme Name: Lightning Child
Theme URI: 
Template: lightning
Description: 
Author: 
Tags: 
Version: 0.6.0
*/

/* ===================================================
   0. 全体共通カラー変数
   =================================================== */
:root {
  --cart-btn-bg-color: #28a046;   /* クラップス共通グリーン */
  --cart-btn-text-color: #ffffff; /* 白文字 */
}

/* ===================================================
   1. タイトル帯 & 余白調整（EC系共通）
   =================================================== */
.woocommerce .page-header,
.woocommerce-page .page-header {
  display: none;
}

.woocommerce .site-body,
.woocommerce-page .site-body {
  padding-top: 2em;
}

/* ===================================================
   2. パンくずリスト制御
   =================================================== */
body.single-product #breadcrumb.breadcrumb {
  display: none;
}

.woocommerce:not(.single-product) #breadcrumb.breadcrumb,
.woocommerce-page:not(.single-product) #breadcrumb.breadcrumb {
  display: block;
  visibility: visible;
  opacity: 1;
  background: transparent;
  padding: 10px 0;
}

.custom-bottom-breadcrumb-wrap {
  display: block;
  clear: both;
  width: 100%;
  margin: 40px auto 20px;
  padding: 15px 0;
  border-top: 1px solid #e5e5e5;
  font-size: 13px;
  color: #666666;
}

.custom-bottom-breadcrumb-wrap a {
  color: #4b4b4b;
  text-decoration: underline;
}

.custom-bottom-breadcrumb-wrap a:hover {
  color: var(--cart-btn-bg-color);
  text-decoration: none;
}

/* ===================================================
   3. PCナビ：お買い物カゴボタン（992px以上）
   =================================================== */
@media screen and (min-width: 992px) {
  #site-header #global-nav ul.nav > li:last-child {
    display: inline-flex;
    align-items: center;
  }

  #site-header #global-nav ul.nav > li:last-child a {
    background-color: var(--cart-btn-bg-color);
    color: var(--cart-btn-text-color);
    border-radius: 4px;
    padding: 8px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    height: auto;
    margin: 0;
    transition: opacity 0.2s ease;
  }

  #site-header #global-nav ul.nav > li:last-child a:hover {
    opacity: 0.85;
    text-decoration: none;
  }

  #site-header #global-nav ul.nav > li:last-child a strong,
  #site-header #global-nav ul.nav > li:last-child a .global-nav-name {
    color: var(--cart-btn-text-color);
    line-height: 1;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
  }
}

/* ===================================================
   4. 商品一覧レイアウト（メイン80% / サイド17% ＆ 巨大化防止）
   =================================================== */
@media screen and (min-width: 992px) {
  body.post-type-archive-product:not(.search) .site-body-container,
  body.tax-product_cat .site-body-container,
  body.tax-product_tag .site-body-container {
    display: flex;
    justify-content: space-between;
    max-width: 1140px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  body.post-type-archive-product:not(.search) .main-section--col--two,
  body.tax-product_cat .main-section--col--two,
  body.tax-product_tag .main-section--col--two {
    flex: 0 0 80%;
    max-width: 80%;
    width: 80%;
  }

  body.post-type-archive-product:not(.search) .sub-section--col--two,
  body.tax-product_cat .sub-section--col--two,
  body.tax-product_tag .sub-section--col--two {
    flex: 0 0 17%;
    max-width: 17%;
    width: 17%;
  }

  body.post-type-archive-product .sub-section img,
  body.tax-product_cat .sub-section img,
  body.tax-product_tag .sub-section img {
    max-width: 100%;
    height: auto;
  }
}

/* ===================================================
   4-B. 検索結果画面：空サイドバーを消去し1カラム
   =================================================== */
body.search .site-body-container {
  max-width: 1140px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

body.search .sub-section,
body.search .sub-section--col--two {
  display: none !important;
  width: 0 !important;
  padding: 0;
  margin: 0;
}

body.search .main-section,
body.search .main-section--col--two {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* ===================================================
   5. スマホ用ナビ ＆ カートボタン制御（991px以下）
   =================================================== */
@media screen and (max-width: 991.98px) {
  #site-header #global-nav {
    display: none;
  }

  #vk-mobile-nav-menu-btn,
  .vk-mobile-nav-menu-btn {
    z-index: 100000;
    position: fixed;
    border: none;
    box-shadow: none;
    padding: 0.5rem;
  }

  .vk-mobile-nav-menu-btn .vk-mobile-nav-menu-btn-icon {
    font-size: 1.4rem;
    color: #333333;
  }

  .vk-mobile-nav-menu-btn .vk-mobile-nav-menu-btn-text {
    display: none;
  }

  #vk-mobile-nav.vk-mobile-nav {
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 60px;
    padding-bottom: 60px;
    box-sizing: border-box;
    z-index: 99999;
  }

  #vk-mobile-nav .vk-mobile-nav-menu-outer {
    position: relative;
    display: block;
    width: 100%;
    float: none;
    margin-bottom: 25px;
  }

  #vk-mobile-nav .vk-mobile-nav-menu-outer ul.menu {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    float: none;
  }

  #vk-mobile-nav .vk-mobile-nav-menu-outer ul.menu > li {
    display: block;
    width: 100%;
    float: none;
    box-sizing: border-box;
  }

  #vk-mobile-nav .vk-mobile-nav-menu-outer ul.menu > li:last-child a {
    background-color: var(--cart-btn-bg-color);
    color: var(--cart-btn-text-color);
    border-radius: 4px;
    padding: 10px 16px;
    display: block;
    text-align: center;
    margin: 15px 15px 5px;
    font-weight: bold;
  }
}

/* ===================================================
   6. WooCommerce 商品画像ギャラリー調整（ドット・番号リセット）
   =================================================== */
.woocommerce-product-gallery .flex-control-thumbs,
.woocommerce-product-gallery .flex-control-thumbs li,
.woocommerce-product-gallery ol.flex-control-nav,
.woocommerce-product-gallery ol.flex-control-nav li {
  list-style: none !important;
  list-style-type: none !important;
  counter-reset: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.woocommerce-product-gallery .flex-control-thumbs li::before,
.woocommerce-product-gallery .flex-control-thumbs li::after,
.woocommerce-product-gallery ol.flex-control-nav li::before,
.woocommerce-product-gallery ol.flex-control-nav li::after {
  display: none !important;
  content: none !important;
}

.woocommerce-product-gallery .flex-control-thumbs li a,
.woocommerce-product-gallery ol.flex-control-nav li a {
  font-size: 0 !important;
  color: transparent !important;
}

/* ===================================================
   7. テキストサイズ・行間・フッター装飾
   =================================================== */
.sub-section .price-filter-manual h3,
.sub-section .widget-title {
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: bold;
}

.sub-section .price-filter-manual ul li,
.sub-section .price-filter-manual ul li a {
  font-size: 13px;
  line-height: 1.8;
}

.sub-section .price-filter-manual .text-R a {
  font-size: 11px;
}

.site-body-bottom h2.wp-block-heading {
  font-size: 18px;
  margin-top: 30px;
  margin-bottom: 15px;
}

.site-body-bottom article.area01 h2.title01 {
  font-size: 16px;
  margin-bottom: 12px;
}

.site-body-bottom article.area01 h3.font01,
.site-body-bottom article.area01 h4.font01 {
  font-size: 14px;
  margin-top: 15px;
  margin-bottom: 6px;
}

.site-body-bottom article.area01 p,
.site-body-bottom article.area01 ul.list01 li {
  font-size: 12px;
  line-height: 1.7;
}

.site-footer-content h2.font01,
.site-footer-content h3.font01 {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 10px;
}

.site-footer-content ul.list01 li,
.site-footer-content ul.list01 li a {
  font-size: 12px;
  line-height: 1.8;
}

.site-footer-content address,
.site-footer-content #site-navi {
  font-size: 12px;
  line-height: 1.6;
}

.site-body-bottom,
.site-footer,
.site-footer-content,
.site-footer-copyright {
  display: block;
  clear: both;
}

footer .copySection p:nth-child(2),
.site-footer-copyright p:last-child {
  display: none;
}

#block-site-footer {
  max-width: 1140px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

#block-site-footer .row {
  margin-left: 0;
  margin-right: 0;
}

@media screen and (min-width: 769px) {
  .site-footer-content .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .site-footer-content .row > div:nth-child(1) {
    flex: 0 0 35%;
    max-width: 35%;
    margin-bottom: 30px;
  }

  .site-footer-content .row > div:nth-child(2) {
    flex: 0 0 62%;
    max-width: 62%;
    margin-bottom: 30px;
  }

  .site-footer-content .row > div:nth-child(3) {
    flex: 0 0 100%;
    max-width: 100%;
    clear: both;
    margin-top: 10px;
  }

  .site-footer-content .row > div:nth-child(n+4) {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .site-footer-content .row {
    display: flex;
    flex-direction: column;
  }

  .site-footer-content .row > div:nth-child(1),
  .site-footer-content .row > div:nth-child(2),
  .site-footer-content .row > div:nth-child(3) {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 25px;
  }

  .site-footer-content .row > div:nth-child(n+4) {
    display: none;
  }
}

#celebration table thead th {
  background-color: #e8d3f5;
  color: #4a154b;
  font-weight: bold;
}

#funeral table thead th {
  background-color: #333333;
  color: #ffffff;
  font-weight: bold;
}

#flower-variety table thead th {
  background-color: #9531e9;
  color: #ffffff;
  font-weight: bold;
}

/* ===================================================
   8. 汎用レスポンシブ・グリッド設定
   ================================================== */
.my-grid {
  display: grid;
  gap: 16px;
  width: 100%;
}

.pc-4_sp-2 { grid-template-columns: repeat(4, 1fr); }
.pc-5_sp-3 { grid-template-columns: repeat(5, 1fr); }
.pc-3_sp-1 { grid-template-columns: repeat(3, 1fr); }
.pc-4_sp-3 { grid-template-columns: repeat(4, 1fr); }

@media screen and (max-width: 768px) {
  .pc-4_sp-2 { grid-template-columns: repeat(2, 1fr); }
  .pc-5_sp-3 { grid-template-columns: repeat(3, 1fr); }
  .pc-3_sp-1 { grid-template-columns: repeat(1, 1fr); }
  .pc-4_sp-3 { grid-template-columns: repeat(3, 1fr); }
  .vk-campaign-text { padding-left: 40px; }
}

/* ===================================================
   9. ブログ・SNSシェアボタン・メタ情報制御
   =================================================== */
.woocommerce-Tabs-panel--description .veu_socialSet:not(:last-of-type) {
  display: none;
}

.entry-meta_items--author,
.entry-meta .author,
.entry-meta-item--author,
.entry-meta li:has(.fa-user),
.entry-meta li:has(.fa-user-pen),
.entry-meta_items--published,
.entry-meta .published,
.entry-meta-item--published,
.entry-meta li:has(.fa-calendar),
.entry-meta li:has(.fa-clock),
.entry-meta .fa-user,
.entry-meta .fa-user-pen,
.entry-meta .fa-calendar-days:first-child,
.entry-meta .fa-clock:first-child {
  display: none;
}

/* ===================================================
   10. 投稿ページ全体：サイドバー消去 ＆ 1カラム化
   =================================================== */
body.single-post .sub-section,
body.category .sub-section,
body.archive:not(.woocommerce) .sub-section {
  display: none;
  width: 0;
  margin: 0;
  padding: 0;
}

body.single-post .main-section,
body.category .main-section,
body.archive:not(.woocommerce) .main-section {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}

/* ===================================================
   11. カート・購入手続き画面：1カラム化
   =================================================== */
body.woocommerce-cart .sub-section,
body.woocommerce-checkout .sub-section {
  display: none;
  width: 0;
}

@media screen and (min-width: 992px) {
  body.woocommerce-cart .main-section,
  body.woocommerce-checkout .main-section {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
}

body.woocommerce-cart .wp-block-woocommerce-cart.alignwide,
body.woocommerce-checkout .wp-block-woocommerce-checkout.alignwide {
  max-width: 100%;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ===================================================
   12. トップページ：「人気の商品」直下の余白制御
   =================================================== */
body.home .entry-body > .veu_socialSet,
body.home .top-category-list-wrap {
  display: none;
}

body.home .main-section--margin-bottom--on,
body.home .site-body {
  margin-bottom: 0;
  padding-bottom: 0;
}

body.home .site-body-bottom {
  margin-top: 0;
  padding-top: 20px;
}

/* ===================================================
   13. 商品詳細：YayExtra オプション枠
   =================================================== */
.single-product .yayextra-option-set {
  background: transparent;
  border: none;
  padding: 0;
  margin: 20px 0 15px;
}

.single-product .yayextra-option-set .yayextra-option-field-wrap {
  background-color: #f7f7f7;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 16px;
  box-sizing: border-box;
}

.single-product .yayextra-option-set .yayextra-option-field-wrap[data-option-field-type="text"] {
  margin-top: -8px;
  border-top: 1px dashed #d5d5d5;
  border-radius: 0 0 6px 6px;
}

.single-product .yayextra-option-set .yayextra-option-field-name,
.single-product .yayextra-option-set .yayextra-option-field-name span {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #222222 !important;
  margin-bottom: 10px !important;
  display: block !important;
}

.single-product .yayextra-option-set .yayextra-option-field-wrap[data-option-field-type="radio"] > div:not(.yayextra-option-field-name) {
  margin-bottom: 6px;
}

.single-product .yayextra-option-set input.yayextra-text,
.single-product .yayextra-option-set textarea.yayextra-textarea {
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 8px 10px;
}

/* ===================================================
   14. WooCommerce：全ボタン 通常単色 ＆ ホバー微細グラデーション
   =================================================== */
.single-product .single_add_to_cart_button.button,
.woocommerce div.product form.cart .button,
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button,
.woocommerce-cart .wc-block-cart__submit-button,
.woocommerce-cart .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.button,
.woocommerce-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button,
.woocommerce-checkout #place_order,
.woocommerce-checkout button[type="submit"]#place_order {
  background: linear-gradient(180deg, #28a046 0%, #28a046 100%) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: bold !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background 0.2s ease !important;
}

.single-product .single_add_to_cart_button.button:hover,
.woocommerce div.product form.cart .button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .button:hover,
.woocommerce-cart .wc-block-cart__submit-button:hover,
.woocommerce-cart .checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.button:hover,
.woocommerce-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover,
.woocommerce-checkout #place_order:hover {
  background: linear-gradient(180deg, #2cb04d 0%, #259541 100%) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* ===================================================
   15. 検索結果（0件時含む）
   =================================================== */
.search .entry-body h1.page-title {
  font-size: 16px;
  font-weight: 600;
  color: #555555;
  margin: 10px 0 25px;
  padding: 0 0 10px;
  border-bottom: 1px solid #eeeeee;
  text-align: left;
}

.search-no-results .woocommerce-no-products-found {
  margin: 20px 0 40px;
}

.search-no-results .woocommerce-info {
  background-color: #fafafa !important;
  color: #444444 !important;
  border: 1px solid #e2e2e2 !important;
  border-left: 4px solid #28a046 !important;
  border-radius: 4px;
  padding: 16px 20px 16px 52px !important;
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  margin-bottom: 30px;
  position: relative !important;
}

.search-no-results .woocommerce-info::before {
  color: #28a046 !important;
  position: absolute !important;
  top: 15px !important;
  left: 20px !important;
  margin: 0 !important;
}

.no-results-btn-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 25px;
  flex-wrap: wrap;
}

.no-results-btn-group a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 4px;
  text-decoration: none !important;
  line-height: 1.4;
  box-sizing: border-box;
}

.no-results-btn-back {
  background-color: #ffffff;
  color: #555555 !important;
  border: 1px solid #d0d0d0;
  transition: all 0.2s ease;
}
.no-results-btn-back:hover {
  background-color: #f2f2f2;
  border-color: #aaaaaa;
  color: #222222 !important;
}

.no-results-btn-home {
  background: linear-gradient(180deg, #28a046 0%, #28a046 100%) !important;
  color: #ffffff !important;
  border: none !important;
  transition: background 0.2s ease !important;
}
.no-results-btn-home:hover {
  background: linear-gradient(180deg, #2cb04d 0%, #259541 100%) !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

@media screen and (max-width: 768px) {
  .no-results-btn-group {
    flex-direction: column;
    gap: 12px;
  }
  .no-results-btn-group a {
    width: 100%;
    max-width: 280px;
  }
}

/* ===================================================
   16. レビュー表示・星のゴールド化 ＆ 余白調整
   =================================================== */
.star-rating,
.star-rating span,
.star-rating::before,
.star-rating span::before,
.wc-block-grid__product-rating .star-rating,
.wc-block-grid__product-rating .star-rating span::before,
.woocommerce .star-rating span::before,
p.stars a,
p.stars a:hover,
p.stars a.active {
  color: #f5a623 !important;
}

.woocommerce #reviews ol.commentlist {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
  margin-left: 0 !important;
}

.cr-all-reviews-shortcode .woocommerce-review__verified {
  display: none;
}

#cr-show-more-all-reviews {
  font-size: 0;
}
#cr-show-more-all-reviews::after {
  content: "もっとレビューを見る";
  font-size: 14px;
}

.cr-all-reviews-shortcode .cr-total-rating-count,
.cr-all-reviews-shortcode .cr-ajax-search,
.cr-all-reviews-shortcode .cr-count-row {
  display: none !important;
}

/* ===================================================
   17. カート・決済画面のテキスト置換 ＆ 泣き顔アイコン完全消去
   =================================================== */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-size: 0 !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label::after {
  content: "合計" !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: inherit !important;
}

.wc-block-cart__empty-cart__title::before,
.wc-block-cart__empty-cart__title::after,
.with-empty-cart-icon::before,
.with-empty-cart-icon::after {
  display: none !important;
  content: none !important;
}

.wc-block-cart__empty-cart__title svg,
.with-empty-cart-icon svg,
.wp-block-woocommerce-empty-cart-block svg {
  display: none !important;
}

.wc-block-cart__empty-cart__title,
.with-empty-cart-icon {
  display: block !important;
  text-align: center !important;
  margin: 25px auto 20px auto !important;
  padding: 0 !important;
}

/* ===================================================
   18. 商品詳細画像ギャラリーのクリック・ドラッグ制御
   =================================================== */
.woocommerce-product-gallery__image a {
  pointer-events: none;
  cursor: crosshair;
}

.woocommerce-product-gallery__image {
  overflow: hidden;
}

.woocommerce-product-gallery img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ===================================================
   19. プライバシーポリシー画面
   =================================================== */
body.post-name-privacy-policy .veu_socialSet {
  display: none !important;
}

/* ===================================================
   20. 最近閲覧した商品
   =================================================== */
.wp-block-woocommerce-recently-viewed-products .wc-block-grid__products {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 10px 0 0 0 !important;
  list-style: none !important;
}

.wp-block-woocommerce-recently-viewed-products .wc-block-grid__product {
  flex: 0 0 calc(16.666% - 9px) !important;
  max-width: calc(16.666% - 9px) !important;
  width: calc(16.666% - 9px) !important;
  margin: 0 !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  border: 1px solid #eee;
  border-radius: 4px;
  background: #fff;
}

.wp-block-woocommerce-recently-viewed-products .wc-block-grid__product-image,
.wp-block-woocommerce-recently-viewed-products .wc-block-grid__product-image a {
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.wp-block-woocommerce-recently-viewed-products .wc-block-grid__product-image img {
  width: 65px !important;
  height: 65px !important;
  object-fit: cover !important;
  margin: 0 auto 6px auto !important;
  display: block !important;
}

.wp-block-woocommerce-recently-viewed-products .wc-block-grid__product-title {
  font-size: 11px !important;
  line-height: 1.3 !important;
  margin: 4px 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.wp-block-woocommerce-recently-viewed-products .wc-block-grid__product-title a {
  color: #333 !important;
  text-decoration: none !important;
}

.wp-block-woocommerce-recently-viewed-products .wc-block-grid__product-price {
  font-size: 11px !important;
  margin: 0 !important;
  color: #c53030 !important;
}

@media screen and (max-width: 767px) {
  .wp-block-woocommerce-recently-viewed-products .wc-block-grid__product {
    flex: 0 0 calc(33.333% - 7px) !important;
    max-width: calc(33.333% - 7px) !important;
    width: calc(33.333% - 7px) !important;
  }
}

aside.widget_recently_viewed_products {
  background-color: #ffffff !important;
  border: 1px solid #d5d9d9 !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  margin: 20px 0 !important;
  box-sizing: border-box !important;
}

aside.widget_recently_viewed_products .widget-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  margin: 0 0 14px 0 !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  width: 100% !important;
}

aside.widget_recently_viewed_products ul.product_list_widget {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  width: 100% !important;
}

aside.widget_recently_viewed_products ul.product_list_widget li {
  flex: 0 0 calc(16.666% - 14px) !important;
  max-width: calc(16.666% - 14px) !important;
  width: calc(16.666% - 14px) !important;
  box-sizing: border-box !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}

aside.widget_recently_viewed_products ul.product_list_widget li a {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  color: #333333 !important;
  transition: opacity 0.2s ease !important;
}

aside.widget_recently_viewed_products ul.product_list_widget li a:hover {
  opacity: 0.8 !important;
}

aside.widget_recently_viewed_products ul.product_list_widget li img {
  width: 100% !important;
  max-width: 140px !important;
  height: 140px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  margin: 0 auto 6px auto !important;
  display: block !important;
  float: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

aside.widget_recently_viewed_products ul.product_list_widget li .product-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  margin: 4px 0 3px 0 !important;
  color: #333333 !important;
  word-break: break-all !important;
}

aside.widget_recently_viewed_products ul.product_list_widget li .price,
aside.widget_recently_viewed_products ul.product_list_widget li .amount,
aside.widget_recently_viewed_products ul.product_list_widget li bdi {
  display: inline !important;
  visibility: visible !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #b12704 !important;
  line-height: 1.3 !important;
}

aside.widget_recently_viewed_products ul.product_list_widget li .woocommerce-Price-currencySymbol {
  display: inline !important;
  font-size: 11px !important;
  font-weight: normal !important;
  margin-right: 3px !important;
}

aside.widget_recently_viewed_products ul.product_list_widget li .woocommerce-price-suffix,
aside.widget_recently_viewed_products ul.product_list_widget li small {
  display: inline !important;
  visibility: visible !important;
  font-size: 9.5px !important;
  color: #777777 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.3px !important;
  font-weight: normal !important;
}

aside.widget_recently_viewed_products ul.product_list_widget li .star-rating {
  display: none !important;
}

@media screen and (max-width: 991px) {
  aside.widget_recently_viewed_products {
    padding: 12px 14px !important;
  }
  aside.widget_recently_viewed_products ul.product_list_widget {
    gap: 14px 8px !important;
  }
  aside.widget_recently_viewed_products ul.product_list_widget li {
    flex: 0 0 calc(33.333% - 6px) !important;
    max-width: calc(33.333% - 6px) !important;
    width: calc(33.333% - 6px) !important;
  }
  aside.widget_recently_viewed_products ul.product_list_widget li img {
    max-width: 100% !important;
    height: 100px !important;
  }
  aside.widget_recently_viewed_products ul.product_list_widget li .product-title {
    font-size: 10px !important;
  }
  aside.widget_recently_viewed_products ul.product_list_widget li .amount {
    font-size: 11px !important;
  }
  aside.widget_recently_viewed_products ul.product_list_widget li small {
    font-size: 8.5px !important;
  }
}

.site-header-logo img {
  width: auto;
}

/* ===================================================
   21. ページ全体の横はみ出し・横スクロール揺れ防止
   =================================================== */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* ===================================================
   22. 商品詳細：サムネイル選択中枠線（藤紫パープル）
   =================================================== */
.single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
  box-sizing: border-box !important;
  border: 3px solid #7b4397 !important;
  box-shadow: 0 0 0 1px #ffffff inset !important;
  opacity: 1 !important;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li img:not(.flex-active) {
  opacity: 0.65 !important;
  border: 1px solid #e0e0e0 !important;
  box-sizing: border-box !important;
}

/* ===================================================
   23. 全画面共通：サムネイルの横スクロールスライダー
   =================================================== */
.single-product .woocommerce-product-gallery .flex-control-thumbs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 10px 0 0 0 !important;
  padding: 6px 2px 10px 2px !important;
  box-sizing: border-box !important;
  gap: 8px !important;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li {
  flex: 0 0 65px !important;
  width: 65px !important;
  height: 65px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
  width: 65px !important;
  height: 65px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  display: block !important;
  cursor: pointer !important;
}

/* ===================================================
   24. PC・タブレット横（769px以上）：【最重要】2カラム強制固定
   WooCommerce・テーマの全競合スタイルを完全上書き
   =================================================== */
@media screen and (min-width: 769px) {
  /* 親コンテナをFlexboxにして左右並列に固定 */
  body.single-product div.product,
  .woocommerce div.product,
  .woocommerce-page div.product {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
  }

  /* 左カラム：画像ギャラリー（48%固定） */
  body.single-product div.product div.images,
  body.single-product div.product .woocommerce-product-gallery,
  .woocommerce div.product div.images,
  .woocommerce div.product .woocommerce-product-gallery,
  .woocommerce-page div.product div.images,
  .woocommerce-page div.product .woocommerce-product-gallery {
    flex: 0 0 48% !important;
    max-width: 48% !important;
    width: 48% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* 右カラム：商品情報（48%固定） */
  body.single-product div.product div.summary,
  body.single-product div.product .summary,
  .woocommerce div.product div.summary,
  .woocommerce div.product .summary,
  .woocommerce-page div.product div.summary,
  .woocommerce-page div.product .summary {
    flex: 0 0 48% !important;
    max-width: 48% !important;
    width: 48% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    clear: none !important;
  }

  /* 下部のタブや関連商品は全幅100%に折り返し */
  body.single-product div.product .woocommerce-tabs,
  body.single-product div.product .related.products {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-top: 40px !important;
    clear: both !important;
  }
}

/* ===================================================
   25. スマホ・タブレット縦（768px以下）：縦積み1カラム
   =================================================== */
@media screen and (max-width: 768px) {
  body.single-product div.product,
  .woocommerce div.product,
  .woocommerce-page div.product {
    display: block !important;
  }

  body.single-product div.product div.images,
  body.single-product div.product .woocommerce-product-gallery,
  body.single-product div.product div.summary,
  body.single-product div.product .summary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 0 20px 0 !important;
    box-sizing: border-box !important;
  }

  .single-product .woocommerce-product-gallery .flex-control-thumbs li {
    flex: 0 0 54px !important;
    width: 54px !important;
    height: 54px !important;
  }

  .single-product .woocommerce-product-gallery .flex-control-thumbs li img {
    width: 54px !important;
    height: 54px !important;
    border-radius: 3px !important;
  }

  /* 選択肢やバッジの突き抜け防止 */
  .single-product div.product form.cart table.variations {
    display: block !important;
    width: 100% !important;
  }
  .single-product div.product form.cart table.variations tbody,
  .single-product div.product form.cart table.variations tr,
  .single-product div.product form.cart table.variations td,
  .single-product div.product form.cart table.variations th {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }
  .single-product div.product form.cart table.variations select {
    width: 100% !important;
  }
  .single-product .claps-shipping-badge-top,
  .single-product .claps-shipping-box-bottom {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ===================================================
   商品詳細：サムネイル選択中枠線（藤紫パープル）
   =================================================== */
.single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
  box-sizing: border-box !important;
  border: 2px solid #7b4397 !important;
  opacity: 1 !important;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li img:not(.flex-active) {
  opacity: 0.5 !important;
  border: 1px solid #e0e0e0 !important;
  box-sizing: border-box !important;
}

/* ===================================================
   PC・タブレット横（769px以上）：2カラム強制制御
   画像が画面全体を埋め尽くすバグを完全解消
   =================================================== */
@media screen and (min-width: 769px) {
  /* 親枠：強制横並び */
  body.single-product div.product,
  .woocommerce div.product,
  .woocommerce-page div.product {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 左カラム：画像ギャラリーエリア（幅45%に制限） */
  body.single-product div.product div.images,
  body.single-product div.product .woocommerce-product-gallery {
    flex: 0 0 45% !important;
    max-width: 45% !important;
    width: 45% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* 画像が枠を突き破って巨大化するのを防ぐ */
  body.single-product div.product .woocommerce-product-gallery img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* 右カラム：商品情報・カートエリア（幅52%） */
  body.single-product div.product div.summary,
  body.single-product div.product .summary {
    flex: 0 0 52% !important;
    max-width: 52% !important;
    width: 52% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    clear: none !important;
  }

  /* PCサムネイル：横スクロールスライダー */
  .single-product .woocommerce-product-gallery .flex-control-thumbs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    margin: 10px 0 0 0 !important;
    padding: 6px 2px 10px 2px !important;
    gap: 8px !important;
    list-style: none !important;
  }

  .single-product .woocommerce-product-gallery .flex-control-thumbs li {
    flex: 0 0 65px !important;
    width: 65px !important;
    height: 65px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .single-product .woocommerce-product-gallery .flex-control-thumbs li img {
    width: 65px !important;
    height: 65px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    cursor: pointer !important;
  }

  /* 説明タブ・関連商品は全幅 */
  body.single-product div.product .woocommerce-tabs,
  body.single-product div.product .related.products {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-top: 40px !important;
    clear: both !important;
  }
}

/* ===================================================
   商品ギャラリー：サムネイル9列並び ＆ アクティブ枠線
   =================================================== */

/* 1. サムネイル一覧の配置（横スクロール解除・折り返し） */
.single-product .woocommerce-product-gallery .flex-control-thumbs {
  display: flex !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  margin: 10px 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  gap: 4px !important;            /* サムネイル同士の隙間 */
  box-sizing: border-box !important;
}

/* 2. 1行9個（隙間4px × 8箇所分を引いて9等分） */
.single-product .woocommerce-product-gallery .flex-control-thumbs li {
  flex: 0 0 calc((100% - (4px * 8)) / 9) !important;
  width: calc((100% - (4px * 8)) / 9) !important;
  max-width: calc((100% - (4px * 8)) / 9) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important; /* 正方形をキープ */
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
}

/* 3. サムネイル画像自体の表示 */
.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 2px !important;
  display: block !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  opacity: 0.55 !important;
  border: 1px solid #e0e0e0 !important;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

/* 4. 選択中（アクティブ）のサムネイルを藤紫色で囲む */
.single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
  opacity: 1 !important;
  border: 2px solid #7b4397 !important; /* 藤紫 */
}