/* ===========================
   Reset & Base
   =========================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ==================================================
   Force: On all product pages, disable fixed-first-view
   behavior on mobile so visual-left and visual-right
   always stack vertically and scroll normally.
   This overrides earlier incense3a-specific rules.
================================================== */
@media (max-width: 768px) {
  body.incense3a-page .visual-left,
  .product-page .visual-left {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    z-index: auto !important;
    display: block !important;
    padding-top: 0 !important;
    box-sizing: border-box !important;
  }

  body.incense3a-page .visual-left .img-frame,
  .product-page .visual-left .img-frame {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }

  body.incense3a-page .visual-left .img-frame img,
  .product-page .visual-left img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    object-fit: cover;
    object-position: center;
    display: block !important;
    max-width: 100% !important;
  }

  body.incense3a-page .visual-right,
  .product-page .visual-right {
    position: static !important;
    margin-top: 0 !important;
    background: transparent !important;
    padding: 4vw !important;
    border-radius: 0 !important;
    z-index: auto !important;
    min-height: auto !important;
  }
}

html,
body {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  background: #fff;
  font-family: "helvetica-neue-lt-pro-cond", "yu-gothic-pr6n", sans-serif;
  color: #707070; /* サイト全体の文字色 */
}

/* aタグも同じ色に統一 */
a {
  color: #707070;
  text-decoration: none;
}
a:hover {
  opacity: 0.7;
}

/* ===========================
   Wrapper & Main Visual
   =========================== */
.wrapper {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
}

.main-visual {
  width: 100%;
  max-width: 1920px;
  min-height: 56.25vw; /* 1920:1080 = 16:9の比率を維持 */
  max-height: 1080px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;

  /* 中央寄せ用 */
  display: flex;
  justify-content: center; /* 横方向中央 */
  align-items: center;     /* 縦方向中央 */
}

/* 1920px以上の画面では中央配置 */
@media (min-width: 1920px) {
  .wrapper {
    max-width: 1920px;
  }
  
  .main-visual {
    height: 1080px;
  }
}

/* スマホ・タブレット縦: flexを解除してabsolute配置を有効化 */
@media (max-width: 768px) {
  .main-visual {
    display: block; /* flexを解除 */
    min-height: auto; /* 高さを固定しない */
    height: auto;
    max-height: none;
    padding: 0;
    overflow: visible;
    /* コンテンツの高さに合わせて伸びる */
    padding-bottom: calc(76.59vw + 42vw + 62.09vw + 30.79vw + 32.06vw);
    /* block-container top + height + 間隔 + logo height + bottom margin */
  }
  
  /* Conceptページ: padding-bottomを解除 */
  .concept-page .main-visual {
    padding-bottom: 0;
  }
}

/* ===========================
   Block Container
   =========================== */
.block-container {
  display: grid;
  grid-template-columns: repeat(10, 3.54vw); /* 68/1920*100 */
  gap: 1.98vw; /* 38/1920*100 */
  justify-content: center;
}

@media (min-width: 1920px) {
  .block-container {
    grid-template-columns: repeat(10, 68px);
    gap: 38px;
  }
}

/* スマホ・タブレット縦: 横スクロール対応 */
@media (max-width: 768px) {
  .block-container {
    position: absolute;
    top: calc(76.59vw - 28.86vw); /* 追加で -14.43vw（合計 -28.86vw） */
    left: 0;
    right: 0;
    height: 44vw; /* 393pxの時165px = 165/393*100 */
    display: flex;
    flex-direction: row;
    gap: 9.16vw; /* 393pxの時36px = 36/393*100 */
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 9.16vw; /* 393pxの時36px = 36/393*100 */
    /* スクロールバーのスタイリング（細く薄く表示） */
    scrollbar-width: thin; /* Firefox: thin 表示 */
    scrollbar-color: rgba(0,0,0,0.18) rgba(0,0,0,0.06); /* thumb, track */
    -ms-overflow-style: auto; /* IE/Edge */
  }
  
  /* WebKit 系（Chrome/Safari/Edge）で横スクロールバーを細く薄く表示 */
  .block-container::-webkit-scrollbar {
    height: 4px; /* 横スクロールバーの太さ（細め） */
    background: transparent;
  }
  .block-container::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.06);
    border-radius: 4px;
  }
  .block-container::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18);
    border-radius: 4px;
  }
  .block-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.28);
  }
}

.block {
  position: relative;
  width: 3.54vw; /* 68/1920*100 */
  height: 10.625vw; /* 204/1920*100 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  text-decoration: none;
  color: #454545;
}

@media (min-width: 1920px) {
  .block {
    width: 68px;
    height: 204px;
  }
}

/* スマホ・タブレット縦: ブロックサイズ調整 */
@media (max-width: 768px) {
  .block {
    flex-shrink: 0;
    width: 13.74vw; /* 393pxの時54px = 54/393*100 */
    height: 42vw; /* コンテナの高さに合わせる */
  }
}

.block span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: max(10px, 0.677vw); /* 最小10px、基準13/1920*100 */
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

@media (min-width: 1920px) {
  .block span {
    font-size: 13px;
  }
}

/* スマホ対応：より大きなフォントサイズ */
@media (max-width: 768px) {
  .block span {
    font-size: 3.31vw; /* 393pxの時13px = 13/393*100 */
    line-height: 3.82vw; /* 393pxの時15px = 15/393*100 */
  }
}

.block::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background 0.3s ease;
  z-index: 1;
}

.block:hover::after { background: rgba(255, 255, 255, 0.5); }
.block:hover span { opacity: 1; }

/* 1〜10番目の色 */
.block:nth-child(1) { background: #F2F2F0; }
.block:nth-child(2) { background: #FFD127; }
.block:nth-child(3) { background: #025237; }
.block:nth-child(4) { background: #8FD0E1; }
.block:nth-child(5) { background: #003288; }
.block:nth-child(6) { background: #EEA2B5; }
.block:nth-child(7) { background: #CC0110; }
.block:nth-child(8) { background: #E43C00; }
.block:nth-child(9) { background: #C8C1BE; }
.block:nth-child(10) { background: #473F3C; }

/* ===========================
   共通固定要素
   =========================== */
.back-link {
  position: absolute;
  top: 6.46vw; /* 124/1920*100 */
  left: 8.07vw; /* 155/1920*100 */
  font-size: 0.729vw; /* align with all-products h1 base */
  color: #707070;
  text-decoration: none;
  z-index: 10;
}

@media (min-width: 1920px) {
  .back-link {
    top: 124px;
    left: 155px;
    font-size: 14px;
  }
}

/* スマホ・タブレット縦: .back-linkの調整 */
@media (max-width: 768px) {
  .back-link {
    top: 12.72vw; /* 393pxの時50px = 50/393*100 */
    left: 8.14vw; /* 393pxの時32px = 32/393*100 */
    font-size: 3.31vw; /* 393pxの時13px = 13/393*100 */
    line-height: 3.82vw; /* 393pxの時15px = 15/393*100 */
  }
  
  /* Conceptページ専用: .back-linkの位置調整 */
  .concept-page .back-link {
    top: 12.72vw; /* 393pxの時50px = 50/393*100 */
    left: 8.14vw; /* 393pxの時32px = 32/393*100 */
  }
}

.brand-logo {
  position: absolute;
  right: 7.92vw; /* 152/1920*100 */
  bottom: 5.52vw; /* 106/1920*100 */
  z-index: 10;
}

@media (min-width: 1920px) {
  .brand-logo {
    right: 152px;
    bottom: 106px;
  }
}

/* スマホ・タブレット縦: Index pageのみ .block-containerの下に配置 */
@media (max-width: 768px) {
  body:not(.all-products-page):not(.product-page):not(.concept-page):not(.company-page):not(.image-page) .brand-logo {
    position: absolute; /* absolute配置を維持 */
    /* .block-containerのtop(76.59vw) + height(42vw) + 間隔(244/393*100) */
    top: calc(76.59vw + 42vw + 62.09vw - 43.29vw); /* さらに -14.43vw（合計 -43.29vw） */
    left: 50%; /* 左端を中央に */
    transform: translateX(-50%); /* 中央配置 */
    right: auto;
    bottom: auto;
    /* 下部余白: 126/393*100 = 32.06vw をmargin-bottomで確保 */
    margin-bottom: 32.06vw;
  }
}

.brand-logo img {
  width: 9.48vw; /* 182/1920*100 */
  height: auto;
  display: block;
}

@media (min-width: 1920px) {
  .brand-logo img {
    width: 182px;
  }
}

@media (max-width: 768px) {
  .brand-logo img {
    width: 34.86vw; /* 393pxの時137px = 137/393*100 */
    display: inline-block; /* 中央配置を有効にするため */
  }
}

/* ===========================
   共通ユーティリティ
   =========================== */
.image-crop img,
.image-swap img.default,
.image-swap img.hover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.caption {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-block:hover .caption {
  opacity: 1;
}

.spec-list {
  display: grid;
  grid-template-columns: max-content auto;
  row-gap: 0.417vw; /* 8/1920*100 */
  column-gap: 2.08vw; /* 40/1920*100 */
}

@media (min-width: 1920px) {
  .spec-list {
    row-gap: 8px;
    column-gap: 40px;
  }
}

.visual-content {
  position: absolute;
  top: 11.61vw; /* 223/1920*100 */
  left: 50%;
  transform: translateX(-50%); /* 横方向中央寄せ */
  text-align: center;
  width: 100%;      /* 必要なら幅を指定 */
}

@media (min-width: 1920px) {
  .visual-content {
    top: 223px;
  }
}

/* スマホ: .visual-contentの調整 */
@media (max-width: 768px) {
  .visual-content {
    position: static; /* absoluteを解除 */
    transform: none; /* transformを解除 */
    left: auto;
  }
  
  /* Conceptページ専用: h1の上余白 */
  .concept-page .visual-content {
    padding-top: 37.91vw; /* 393pxの時149px = 149/393*100 */
  }
}

.visual-content h1 {
  font-size: 0.729vw; /* 14/1920*100 */
}

@media (min-width: 1920px) {
  .visual-content h1 {
    font-size: 14px;
  }
}

/* スマホ: h1の調整 */
@media (max-width: 768px) {
  .visual-content h1 {
    font-size: 3.56vw; /* 393pxの時14px = 14/393*100 */
    letter-spacing: 0.089vw; /* 393pxの時0.35px = 0.35/393*100 */
    line-height: 4.07vw; /* 393pxの時16px = 16/393*100 */
    margin-bottom: 22.14vw; /* 393pxの時87px = 87/393*100 */
  }
}

/* ===========================
   Concept Page
   =========================== */
.concept-page .visual-content p {
  margin-top: 5.47vw; /* 105/1920*100 */
  font-size: 0.677vw; /* 13/1920*100 */
  line-height: 1.667vw; /* 32/1920*100 */
}

@media (min-width: 1920px) {
  .concept-page .visual-content p {
    margin-top: 105px;
    font-size: 13px;
    line-height: 32px;
  }
}

/* スマホ: Conceptページのpタグ調整 */
@media (max-width: 768px) {
  .concept-page .visual-content p {
    margin-top: 0; /* h1のmargin-bottomで調整済み */
    font-size: 3.05vw; /* 393pxの時12px = 12/393*100 */
    line-height: 8.14vw; /* 393pxの時32px = 32/393*100 */
  }
}

/* ===========================
   Image Page
   =========================== */
.image-page .concept-images {
  display: flex;
  justify-content: center;
  gap: 2.08vw; /* 40/1920*100 */
  margin-top: 4.17vw; /* 80/1920*100 */
  flex-wrap: nowrap;
  /* 折り返さない */
}

@media (min-width: 1920px) {
  .image-page .concept-images {
    gap: 40px;
    margin-top: 80px;
  }
}

.image-page .image-swap {
  position: relative;
  width: 23.49vw; /* 451/1920*100 */
  height: 23.54vw; /* 452/1920*100 */
  overflow: hidden;
}

@media (min-width: 1920px) {
  .image-page .image-swap {
    width: 451px;
    height: 452px;
  }
}

.image-page .image-swap img.default,
.image-page .image-swap img.hover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.3s ease;
}

.image-page .image-swap img.hover {
  opacity: 0;
}

.image-page .image-swap:hover img.default {
  opacity: 0;
}

.image-page .image-swap:hover img.hover {
  opacity: 1;
}

/* ===========================
   All Products Page
   =========================== */

/* All Productsページだけ中央寄せを解除 */
.all-products-page .main-visual {
  display: block;
  /* flexを解除して通常のブロックレイアウトに */
}

.all-products-page .main-visual h1 {
  margin-top: 6.46vw; /* 124/1920*100 */
  font-size: 0.729vw; /* 14/1920*100 */
  text-align: center;
}

@media (min-width: 1920px) {
  .all-products-page .main-visual h1 {
    margin-top: 124px;
    font-size: 14px;
  }
}

/* スマホ・タブレット縦: h1の調整 */
@media (max-width: 768px) {
  .all-products-page .main-visual h1 {
    padding-top: 37.91vw; /* 393pxの時149px = 149/393*100 */
    margin-top: 0;
    margin-bottom: 21.37vw; /* 393pxの時84px = 84/393*100 */
    font-size: 3.56vw; /* 393pxの時14px = 14/393*100 */
    letter-spacing: 0.089vw; /* 393pxの時0.35px = 0.35/393*100 */
    line-height: 4.07vw; /* 393pxの時16px = 16/393*100 */
  }
}

/* 1行目:大きい画像を中央寄せ */
.all-products-page .concept-row.large-image {
  display: flex;
  justify-content: center;
}

.all-products-page .large-image .image-crop {
  width: 25.68vw; /* 493/1920*100 */
  height: 12.92vw; /* 248/1920*100 */
  overflow: hidden;
}

@media (min-width: 1920px) {
  .all-products-page .large-image .image-crop {
    width: 493px;
    height: 248px;
  }
}

/* スマホ・タブレット縦: .large-imageの調整 */
@media (max-width: 768px) {
  .all-products-page .large-image .image-crop {
    width: 81.42vw; /* 393pxの時320px = 320/393*100 */
    height: 32.82vw; /* 393pxの時129px = 129/393*100 */
  }
  
  .all-products-page .large-image .image-crop img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠いっぱいに表示し、はみ出す部分をトリミング */
    object-position: center; /* 中央を基準にトリミング */
  }
}

/* 2行目・3行目:6枚横並び */
.all-products-page .concept-row:not(.large-image) {
  display: grid;
  grid-template-columns: repeat(6, 12.03vw); /* 231/1920*100 */
  gap: 1.04vw; /* 20/1920*100 */
  justify-content: center;
}

@media (min-width: 1920px) {
  .all-products-page .concept-row:not(.large-image) {
    grid-template-columns: repeat(6, 231px);
    gap: 20px;
  }
}

.all-products-page .concept-row:not(.large-image) .image-crop {
  width: 11.51vw; /* 221/1920*100 */
  height: 11.51vw; /* 221/1920*100 */
  overflow: hidden;
}

@media (min-width: 1920px) {
  .all-products-page .concept-row:not(.large-image) .image-crop {
    width: 221px;
    height: 221px;
  }
}

.all-products-page .caption {
  font-size: 0.625vw; /* 12/1920*100 */
  text-align: center;
  /* 中央寄せ */
  display: block;
  width: 100%;
}

@media (min-width: 1920px) {
  .all-products-page .caption {
    font-size: 12px;
  }
}

/* スマホ: captionの調整 */
@media (max-width: 768px) {
  .all-products-page .caption {
    font-size: 3.31vw; /* 393pxの時13px = 13/393*100 */
    line-height: 3.82vw; /* 393pxの時15px = 15/393*100 */
  }
}

/* main-visual 全体 */
.product-page .main-visual {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 1920px;
  height: 56.25vw; /* 1920:1080の比率を維持 (1080/1920*100) */
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  padding-top: 2.34vw; /* 45/1920*100 */
}

@media (min-width: 1920px) {
  .product-page .main-visual {
    width: 1920px;
    height: 1080px;
    padding-top: 45px;
  }
}

/* 左側画像エリア */
.product-page .visual-left {
  width: 48vw; /* slightly narrower to reduce left gutter */
  padding-left: 6vw; /* reduced left padding for better balance */
  height: 100%;
  overflow-y: scroll; /* 常にスクロールバー表示 */
  overflow-x: hidden;
  box-sizing: border-box;
}

@media (min-width: 1920px) {
  .product-page .visual-left {
    width: 974px;
    padding-left: 237px;
  }
}

.product-page .visual-left img {
  width: 38.39vw; /* 737/1920*100 */
  height: auto;
  display: block;
  margin-bottom: 1.5vw; /* reduced gap between images on various widths */
}

@media (min-width: 1920px) {
  .product-page .visual-left img {
    width: 737px;
    margin-bottom: 40px;
  }
}

/* デスクトップ: .movable-imageを非表示(画像は.visual-left内で表示) */
.product-page .movable-image {
  display: none;
}

/* PCサイズでは.movable-imageを非表示に */
@media (min-width: 769px) {
  .product-page .movable-image {
    display: none;
  }
}

/* 左側画像エリア(3colors A 専用) */
body.incense3a-page .visual-left img {
  width: 26.30vw; /* 505/1920*100 */
  height: 26.30vw; /* 505/1920*100 */
  object-fit: cover;     /* 枠いっぱいに表示し、はみ出す部分をトリミング */
  object-position: center; /* 中央を基準にトリミング */
  display: block;
  margin: 0 auto;   /* 中央寄せ＋下に余白 */
}

@media (min-width: 1920px) {
  body.incense3a-page .visual-left img {
    width: 505px;
    height: 505px;
  }
}

/* 右側タブエリア */
.product-page .visual-right {
  width: 52vw; /* complement to left width */
  padding-top: 7vw; /* reduced top padding */
  padding-left: 4vw; /* reduced left padding */
  height: 100%;
  box-sizing: border-box;
}

@media (min-width: 1920px) {
  .product-page .visual-right {
    width: 946px;
    padding-top: 179px;
    padding-left: 159px;
  }
}

/* 商品名と価格 */
.product-page .product-info .product-name {
  font-size: 0.781vw; /* 15/1920*100 */
  line-height: 1.042vw; /* 20/1920*100 */
  margin-bottom: 1.302vw; /* 25/1920*100 */
}

@media (min-width: 1920px) {
  .product-page .product-info .product-name {
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 25px;
  }
}

.product-page .product-info .product-price {
  font-size: 1.042vw; /* 20/1920*100 */
  line-height: 1.25vw; /* 24/1920*100 */
  margin-bottom: 1.667vw; /* 32/1920*100 */
}

@media (min-width: 1920px) {
  .product-page .product-info .product-price {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 32px;
  }
}

/* タブ全体 */
.product-page .goods-detail-tabs {
  width: 18.75vw; /* 360/1920*100 */
  margin: 0;
  position: relative;
}

@media (min-width: 1920px) {
  .product-page .goods-detail-tabs {
    width: 360px;
  }
}

/* カートエリア - PCサイズ */
.product-page .cart-area {
  margin-top: 2.40vw; /* 46/1920*100 */
  width: 9.22vw; /* 177/1920*100 */
  height: 1.46vw; /* 28/1920*100 */
}

@media (min-width: 1920px) {
  .product-page .cart-area {
    margin-top: 46px;
    width: 177px;
    height: 28px;
  }
}

/* タブボタン */
.product-page .tab-buttons {
  display: flex;
  justify-content: flex-start;
  position: relative;
}

.product-page .tab-buttons h2.tab-btn {
  font-size: 0.677vw; /* 13/1920*100 */
  line-height: 1.198vw; /* 23/1920*100 */
  cursor: pointer;
  text-align: left;
  margin-right: 1.771vw; /* 34/1920*100 */
  position: relative;
}

@media (min-width: 1920px) {
  .product-page .tab-buttons h2.tab-btn {
    font-size: 13px;
    line-height: 23px;
    margin-right: 34px;
  }
}

.product-page .tab-buttons h2.tab-btn:last-child {
  margin-right: 0;
}

/* 選択中タブの下線 */
.product-page .tab-buttons h2.tab-btn.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.104vw; /* -2/1920*100 */
  width: 100%;
  height: 0.104vw; /* 2/1920*100 */
  background: #707070;
}

@media (min-width: 1920px) {
  .product-page .tab-buttons h2.tab-btn.active::after {
    bottom: -2px;
    height: 2px;
  }
}

/* タブコンテンツ */
.product-page .tab-content {
  margin-top: 0.990vw; /* 19/1920*100 */
  font-size: 0.625vw; /* 12/1920*100 */
  line-height: 1.042vw; /* 20/1920*100 */
  text-align: left;
  padding: 0;
}

@media (min-width: 1920px) {
  .product-page .tab-content {
    margin-top: 19px;
    font-size: 12px;
    line-height: 20px;
  }
}

.product-page .goods-detail-contents {
  letter-spacing: .05em;
  display: none;
}

.product-page .goods-detail-contents.active {
  display: block;
}

/* スペック表風レイアウト */
.product-page .spec-list {
  display: grid;
  grid-template-columns: max-content auto;
  /* ← ラベルは内容に応じて幅を決定 */
  row-gap: 0.417vw; /* 8/1920*100 */
  column-gap: 0.625vw; /* 12/1920*100 */
  /* ラベルと値の隙間 */
  margin: 1.042vw 0 2.083vw; /* 20/1920*100, 40/1920*100 */
}

/* Shop-bag line: default left, but center on small screens */
.product-page .goods-detail-contents .shop-bag {
  margin-top: 1.04vw; /* small gap from spec-list */
  margin-bottom: 0.5vw;
  text-align: left;
  font-size: 0.625vw;
}

@media (max-width: 768px) {
  .product-page .goods-detail-contents .shop-bag {
    text-align: center;
    font-size: 3.05vw; /* match mobile typographic scale */
    margin-top: 4vw;
    margin-bottom: 2vw;
  }
}

@media (min-width: 1920px) {
  .product-page .spec-list {
    row-gap: 8px;
    column-gap: 12px;
    margin: 20px 0 40px;
  }
}

.product-page .spec-row {
  display: contents;
  /* 各行をグリッドに流し込む */
}

.product-page .spec-label {
  font-size: 0.625vw; /* 12/1920*100 */
  line-height: 1.042vw; /* 20/1920*100 */
  opacity: 0.75;
}

@media (min-width: 1920px) {
  .product-page .spec-label {
    font-size: 12px;
    line-height: 20px;
  }
}

.product-page .spec-value {
  font-size: 0.625vw; /* 12/1920*100 */
  line-height: 1.042vw; /* 20/1920*100 */
}

@media (min-width: 1920px) {
  .product-page .spec-value {
    font-size: 12px;
    line-height: 20px;
  }
}

/* カートボタン */
.product-page .add-to-cart {
  display: inline-block;
  width: 9.22vw; /* 177/1920*100 */
  font-size: 0.625vw; /* 12/1920*100 */
  line-height: 1.042vw; /* 20/1920*100 */
  background: #fff;
  font-family: "helvetica-neue-lt-pro-cond", "yu-gothic-pr6n", sans-serif;
  color: #707070; /* サイト全体の文字色 */
  border: 1px solid #707070;
  opacity: 1;
  cursor: pointer;
}

@media (min-width: 1920px) {
  .product-page .add-to-cart {
    width: 177px;
    font-size: 12px;
    line-height: 20px;
  }
}

/* Cartリンク */
.product-page .cart-link {
  position: absolute;
  top: 6.46vw; /* 124/1920*100 */
  /* back-link と同じ高さ */
  right: 8.07vw; /* 155/1920*100 */
  /* 画面右からの距離 */
  font-size: 0.729vw; /* align with all-products h1 base */
  text-decoration: none;
  z-index: 11;
}

@media (min-width: 1920px) {
  .product-page .cart-link {
    top: 124px;
    right: 155px;
    font-size: 14px;
  }
}

/* スマホ・タブレット縦: .cart-linkの調整 */
@media (max-width: 768px) {
  .product-page .cart-link {
    top: 12.72vw; /* 393pxの時50px = 50/393*100 */
    right: 7.89vw; /* 393pxの時31px = 31/393*100 */
    font-size: 3.31vw; /* 393pxの時13px = 13/393*100 */
    line-height: 3.82vw; /* 393pxの時15px = 15/393*100 */
    z-index: 11;
  }
}

/* ===========================
   Company Page
   =========================== */
.company-page .visual-content h1 {
  font-size: 0.729vw; /* 14/1920*100 */
  line-height: 0.833vw; /* 16/1920*100 */
  letter-spacing: 0.018vw; /* 0.35/1920*100 */
  margin-bottom: 3.906vw; /* 75/1920*100 */
  text-align: center;
}

@media (min-width: 1920px) {
  .company-page .visual-content h1 {
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.35px;
    margin-bottom: 75px;
  }
}

/* Companyページ専用:会社情報を中央配置 */
.company-page .company-info {
  font-size: 0.677vw; /* 13/1920*100 */
  line-height: 1.198vw; /* 23/1920*100 */
  margin-bottom: 3.229vw; /* 62/1920*100 */

  display: grid;
  grid-template-columns: max-content auto;
  row-gap: 0.417vw; /* 8/1920*100 */
  column-gap: 2.08vw; /* 40/1920*100 */

  text-align: left;

  /* ここから追加 */
  justify-content: center; /* グリッド全体を中央寄せ */
}

@media (min-width: 1920px) {
  .company-page .company-info {
    font-size: 13px;
    line-height: 23px;
    margin-bottom: 62px;
    row-gap: 8px;
    column-gap: 40px;
  }
}

.company-page .legal-info {
  font-size: 0.521vw; /* 10/1920*100 */
  line-height: 0.833vw; /* 16/1920*100 */
  text-align: center;
}

@media (min-width: 1920px) {
  .company-page .legal-info {
    font-size: 10px;
    line-height: 16px;
  }
}

/* PCサイズ: 販売価格テキストは1行で表示 */
.company-page .legal-info .sales-price-line1,
.company-page .legal-info .sales-price-line2 {
  display: inline; /* PCでは改行しない */
}

/* ===========================
   Tablet & Mobile Responsive
   =========================== */

/* iPad縦向き・スマホ (768px以下) */
@media (max-width: 768px) {
  /* .main-visualと.block-containerのスタイルは上部で定義済み */

  /* All Products Page - スマホ対応 */
  .all-products-page .main-visual {
    padding-bottom: 0; /* 高さを固定しない */
  }
  
  .all-products-page .back-link {
    top: 12.72vw; /* 393pxの時50px = 50/393*100 */
    left: 8.14vw; /* 393pxの時32px = 32/393*100 */
    /* font-size intentionally inherited/kept in .back-link rules */
  }
  
  .all-products-page .brand-logo {
    position: static; /* absolute解除 */
    transform: none;
    margin-top: 30.28vw; /* 393pxの時119px = 119/393*100 */
    margin-bottom: 32.06vw; /* 393pxの時126px = 126/393*100 */
    margin-left: auto;
    margin-right: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    text-align: center; /* 中央配置 */
  }
  
  .all-products-page .brand-logo img {
    width: 34.86vw; /* 393pxの時137px = 137/393*100 */
    display: inline-block !important; /* 中央配置のため */
  }
  
  .all-products-page .concept-row:not(.large-image) {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 0 20px;
  }

  .all-products-page .concept-row:not(.large-image) .image-crop {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
  }

  .all-products-page .concept-row:not(.large-image) .image-crop img {
    position: absolute;
    top: 0;
    left: 0;
  }

  /* Image Page - スマホ対応 */
  .image-page .back-link {
    top: 12.72vw; /* 393pxの時50px = 50/393*100 */
    left: 8.14vw; /* 393pxの時32px = 32/393*100 */
    font-size: 3.56vw; /* align with all-products h1 mobile */
    line-height: 4.07vw;
  }
  
  .image-page .main-visual {
    padding-bottom: 0; /* padding-bottomを解除 */
  }
  
  .image-page .visual-content {
    top: auto; /* topをリセット */
    padding-top: 37.91vw; /* 393pxの時149px = 149/393*100 */
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }
  
  .image-page .visual-content h1 {
    font-size: 3.56vw; /* 393pxの時14px = 14/393*100 */
    letter-spacing: 0.089vw; /* 393pxの時0.35px = 0.35/393*100 */
    line-height: 4.07vw; /* 393pxの時16px = 16/393*100 */
    margin-bottom: 21.37vw; /* 393pxの時84px = 84/393*100 */
  }
  
  .image-page .concept-images {
    flex-direction: column;
    gap: 5.09vw; /* 393pxの時20px = 20/393*100 */
    margin-top: 0; /* h1のmargin-bottomで調整済み */
    padding: 0 5.09vw; /* 393pxの時20px = 20/393*100 */
  }
  
  /* スマホサイズ: 画像の並び順変更 */
  .image-page .concept-images .image-c {
    order: 1;
  }
  
  .image-page .concept-images .image-s {
    order: 2;
  }
  
  .image-page .concept-images .image-03 {
    order: 3;
  }

  .image-page .image-swap {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
  }
  
  .image-page .brand-logo {
    position: static; /* absoluteを解除 */
    margin-top: 34.61vw; /* 393pxの時136px = 136/393*100 */
    margin-bottom: 37.40vw; /* 393pxの時147px = 147/393*100 */
    text-align: center; /* 中央配置 */
  }
  
  .image-page .brand-logo img {
    display: inline-block !important; /* 中央配置のため */
  }

  /* Product Page - スマホ対応 */
  .product-page .main-visual {
    display: flex;
    flex-direction: column;
    padding-top: 80px;
    padding-bottom: 0; /* padding-bottomをリセット */
    min-height: auto; /* 高さを固定しない */
    max-height: none; /* 最大高さ制限を解除 */
    height: auto; /* 高さを自動に */
    overflow: visible; /* overflowをvisibleに変更 */
    align-items: stretch; /* 子要素を横幅いっぱいに */
  }

  .product-page .visual-left {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 40px;
    order: 1; /* 1番目 */
    position: static; /* positionをリセット */
    height: auto; /* heightをリセット */
    overflow: visible; /* overflowをリセット */
  }

  .product-page .visual-left img {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 20px;
    display: block;
  }

  /* スマホサイズ: .desktop-onlyクラスの画像を非表示 */
  .product-page .visual-left img.desktop-only {
    display: none;
  }

  .product-page .visual-right {
    width: 100%;
    padding-left: 8.40vw; /* 393pxの時33px = 33/393*100 */
    padding-right: 8.40vw; /* 393pxの時33px = 33/393*100 */
    order: 2; /* 2番目 */
    display: flex;
    flex-direction: column;
    position: static; /* positionをリセット */
    box-sizing: border-box;
    z-index: 1; /* .movable-imageより前面に */
  }

  /* スマホサイズ: .movable-imageを表示して3番目に配置 */
  .product-page .movable-image {
    /* 393px時に幅300pxになるvw換算 (300/393*100 = 76.34vw) */
    width: 76.34vw; /* 画面幅に応じて可変 */
    height: auto;
    margin: 4vw auto 0 auto;
    display: block;
    order: 3; /* 3番目 - .main-visual内での順序 */
    box-sizing: border-box;
  }

  body.incense3a-page .visual-left img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    max-width: 500px;
    margin: 0 auto 20px;
    display: block;
  }
  
  /* incense3a-pageでもdesktop-onlyは非表示 */
  body.incense3a-page .visual-left img.desktop-only {
    display: none;
  }

  .product-page .product-info .product-name {
    font-size: 3.82vw; /* 393pxの時15px = 15/393*100 */
    line-height: 5.09vw; /* 393pxの時20px = 20/393*100 */
    margin-bottom: 6.36vw; /* 393pxの時25px = 25/393*100 */
  }

  .product-page .product-info .product-price {
    font-size: 5.09vw; /* 393pxの時20px = 20/393*100 */
    line-height: 6.11vw; /* 393pxの時24px = 24/393*100 */
    margin-bottom: 8.14vw; /* 393pxの時32px = 32/393*100 */
  }

  .product-page .goods-detail-tabs {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .product-page .tab-buttons {
    display: flex;
    gap: 11.70vw; /* 393pxの時46px = 46/393*100 */
  }

  .product-page .tab-buttons h2.tab-btn {
    font-size: 3.31vw; /* 393pxの時13px = 13/393*100 */
    line-height: 7.38vw; /* 393pxの時29px = 29/393*100 */
  }

  .product-page .tab-content {
    font-size: 3.05vw; /* 393pxの時12px = 12/393*100 */
    line-height: 6.62vw; /* 393pxの時26px = 26/393*100 */
  }

  .product-page .tab-content .spec-label,
  .product-page .tab-content .spec-value {
    font-size: 3.05vw; /* 393pxの時12px = 12/393*100 */
    line-height: 6.62vw; /* 393pxの時26px = 26/393*100 */
  }
  
  /* スマホ: .spec-listの余白調整 */
  .product-page .spec-list {
    column-gap: 5.09vw; /* 393pxの時20px = 20/393*100 */
  }

  /* .cart-areaを別位置に移動 */
  .product-page .cart-area {
    order: 4; /* 4番目 */
    margin-top: 11.70vw; /* 393pxの時46px = 46/393*100 */
    width: 45.04vw; /* 393pxの時177px = 177/393*100 */
    height: 7.12vw; /* 393pxの時28px = 28/393*100 */
    margin-left: auto;
    margin-right: auto;
  }

  .product-page .cart-area .add-to-cart {
    width: 100%;
    height: 100%;
    font-size: 3.05vw; /* 393pxの時12px = 12/393*100 */
    line-height: 5.09vw; /* 393pxの時20px = 20/393*100 */
  }

  /* .brand-logoを最後に配置 */
  .product-page .brand-logo {
    position: static; /* absolute解除 */
    order: 5; /* 5番目 */
    padding-top: 27.48vw; /* 393pxの時108px = 108/393*100 */
    padding-bottom: 32.06vw; /* 393pxの時126px = 126/393*100 */
    text-align: center; /* 中央寄せ */
    background: #fff; /* 裏の visual-left が透けないよう白背景を付与 */
    width: 100%;
    box-sizing: border-box;
    z-index: 12; /* 前面に表示 */
  }

  .product-page .brand-logo img {
    width: 34.86vw; /* 393pxの時137px = 137/393*100 */
    height: auto; /* 高さを自動に - アスペクト比維持 */
    display: inline-block !important; /* inline-blockに変更 */
  }

  .product-page .back-link {
    top: 12.72vw; /* 393pxの時50px = 50/393*100 */
    left: 8.14vw; /* 393pxの時32px = 32/393*100 */
    font-size: 3.56vw; /* match all-products h1 mobile */
    line-height: 4.07vw;
  }

  .product-page .cart-link {
    top: 12.72vw; /* 393pxの時50px = 50/393*100 */
    right: 7.89vw; /* 393pxの時31px = 31/393*100 */
    font-size: 3.56vw; /* match all-products h1 mobile */
    line-height: 4.07vw;
  }

  /* 共通要素の調整 */
  .back-link {
    top: 20px;
    left: 20px;
  }
  
  /* Conceptページ専用: .back-linkのタイポグラフィ調整 */
  .concept-page .back-link {
    font-size: 3.56vw; /* match all-products h1 mobile */
    line-height: 4.07vw;
  }

  /* .brand-logoのスタイルは上部で定義済み */

  .visual-content {
    top: 80px;
    padding: 0 20px;
  }

  .visual-content h1 {
    font-size: 16px;
  }
  
  /* Conceptページ専用: スマホサイズの上書き */
  .concept-page .visual-content {
    top: auto; /* topをリセット */
    padding-top: 37.91vw; /* 393pxの時149px = 149/393*100 */
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }
  
  .concept-page .visual-content h1 {
    font-size: 3.56vw; /* 393pxの時14px = 14/393*100 */
    letter-spacing: 0.089vw; /* 393pxの時0.35px = 0.35/393*100 */
    line-height: 4.07vw; /* 393pxの時16px = 16/393*100 */
    margin-bottom: 22.14vw; /* 393pxの時87px = 87/393*100 */
  }

  .concept-page .visual-content p {
    margin-top: 0; /* h1のmargin-bottomで調整済み */
    font-size: 3.05vw; /* 393pxの時12px = 12/393*100 */
    line-height: 8.14vw; /* 393pxの時32px = 32/393*100 */
  }
  
  /* Conceptページ専用: .brand-logoの位置調整 */
  .concept-page .brand-logo {
    position: static; /* absoluteを解除 */
    margin-top: 41.22vw; /* 393pxの時162px = 162/393*100 */
    margin-bottom: 35.37vw; /* 393pxの時139px = 139/393*100 */
    text-align: center; /* 中央配置 */
  }
  
  .concept-page .brand-logo img {
    display: inline-block !important; /* 中央配置のため */
  }

  /* Companyページ専用: .back-linkの調整 */
  .company-page .back-link {
    top: 12.72vw; /* 393pxの時50px = 50/393*100 */
    left: 8.14vw; /* 393pxの時32px = 32/393*100 */
    font-size: 3.56vw; /* match all-products h1 mobile */
    line-height: 4.07vw;
  }
  
  /* Companyページ専用: .main-visualの調整 */
  .company-page .main-visual {
    padding-bottom: 0; /* Index pageのpadding-bottomを解除 */
  }
  
  /* Companyページ専用: .visual-contentの調整 */
  .company-page .visual-content {
    top: auto; /* topをリセット */
    padding-top: 37.91vw; /* 393pxの時149px = 149/393*100 */
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }

  .company-page .visual-content h1 {
    font-size: 3.56vw; /* 393pxの時14px = 14/393*100 */
    letter-spacing: 0.089vw; /* 393pxの時0.35px = 0.35/393*100 */
    line-height: 4.07vw; /* 393pxの時16px = 16/393*100 */
    margin-bottom: 18.58vw; /* 393pxの時73px = 73/393*100 */
  }

  .company-page .company-info {
    font-size: 3.05vw; /* 393pxの時12px = 12/393*100 */
    line-height: 5.09vw; /* 393pxの時20px = 20/393*100 */
    margin-bottom: 15.78vw; /* 393pxの時62px = 62/393*100 */
    column-gap: 5.09vw; /* 393pxの時20px = 20/393*100 */
  }

  .company-page .legal-info {
    font-size: 2.54vw; /* 393pxの時10px = 10/393*100 */
    line-height: 4.07vw; /* 393pxの時16px = 16/393*100 */
  }
  
  /* 「特定商取引法に基づく表記」のみフォントサイズ12px */
  .company-page .legal-info::first-line {
    font-size: 3.05vw; /* 393pxの時12px = 12/393*100 */
    line-height: 4.07vw; /* 393pxの時16px = 16/393*100 */
  }
  
  /* スマホのみ: 販売価格テキストを2行に分ける */
  .company-page .legal-info .sales-price-line1,
  .company-page .legal-info .sales-price-line2 {
    display: block; /* スマホでは改行 */
  }
  
  /* Companyページ専用: .brand-logoの位置調整 */
  .company-page .brand-logo {
    position: static; /* absoluteを解除 */
    margin-top: 38.42vw; /* 393pxの時151px = 151/393*100 */
    margin-bottom: 35.37vw; /* 393pxの時139px = 139/393*100 */
    text-align: center; /* 中央配置 */
  }
  
  .company-page .brand-logo img {
    display: inline-block !important; /* 中央配置のため */
  }
}

/* iPad横向き (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  /* iPad横向きはPC基準なので、vw単位がそのまま適用される */
  /* 必要に応じて微調整 */
}

/* ===========================
   Mobile: fix visual-left first view
   visual-right scrolls over visual-left
   =========================== */
@media (max-width: 768px) {
  /* main visual: allow page scrolling while left image remains fixed */
  .product-page .main-visual {
    padding-top: 0;
    height: auto;
  }

  /* モバイル: visual-left と visual-right を通常フローで縦に並べる（固定表示を無効化） */
  .product-page .visual-left {
    position: static; /* 固定を解除して文書フローに戻す */
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    overflow: visible;
    z-index: auto;
    display: block;
    box-sizing: border-box;
    padding-top: 0;
    min-height: 0;
  }

  /* 画像は通常のブロック画像として縦に並べる */
  .product-page .visual-left img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .product-page .visual-left img:first-child {
    margin-bottom: 5.60vw; /* firstとsecondの間を22px相当に */
  }

  /* 右側コンテンツは通常フローで続けて表示（上に重ならない） */
  .product-page .visual-right {
    position: static;
    z-index: auto;
    margin-top: 0;
    background: transparent;
    padding: 5vw;
    box-sizing: border-box;
    border-radius: 0;
    min-height: auto;
  }

  /* モバイルでは desktop-only な画像は非表示にする */
  .desktop-only { display: none !important; }

  /* モバイルで image-crop 内（または image-block 内）のタップによる caption 表示を無効化
     タッチ時に JS が inline style を入れても、author !important で上書きします。 */
  .image-block .caption,
  .image-crop + .caption,
  .product-page .image-block .caption,
  .all-products-page .image-block .caption {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* 強制上書き: より具体的なセレクタで確実に非表示にする */
  body.product-page img.desktop-only,
  body.incense3a-page img.desktop-only,
  .product-page .visual-left img.desktop-only {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* movable-image をモバイル向けに扱う（必要に応じて調整） */
  .product-page .movable-image {
    display: block;
    /* 393px時に300pxになるように調整 (300/393*100 = 76.34vw) */
    width: 76.34vw;
    height: auto;
    margin: 4vw auto 0 auto;
    position: relative;
  }

  /* カートエリア等の幅調整 */
  .product-page .cart-area { margin-top: 4vw; }
}

/* ==================================================
   Mobile: incense3a pages — show two images as full first-view
   Applies to pages with body.incense3a-page (irr_a_o, irr_c50_o)
   - two images stacked vertically, combined height 100vh (each 50vh)
   - no gaps, images width:100% and vertically center-cropped
   - visual-right positioned below the 100vh first view
================================================== */
@media (max-width: 768px) {
  body.incense3a-page .visual-left {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* first view full-screen */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    z-index: 1;
  }

  body.incense3a-page .visual-left .img-frame {
    width: 100%;
    height: 50vh; /* each image half of viewport */
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
  }

  body.incense3a-page .visual-left .img-frame img {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%; /* ensure no left/right cropping */
    height: auto;
    transform: translateY(-50%); /* vertical center */
    object-fit: cover;
    object-position: center center;
  }

  /* Ensure no extra gap between frames */
  body.incense3a-page .visual-left .img-frame.first { margin-bottom: 0; }

  /* visual-right should start below the 100vh first view */
  body.incense3a-page .visual-right {
    margin-top: 100vh;
  }
}

/* ==================================================
   Mobile narrow: <= 393px (specific adjustments)
   - Keep settings for >393px unchanged
   - Values below are computed from 393px baseline and
     scale with viewport width (vw)
================================================== */
@media (max-width: 393.98px) {
  /* 上部余白（first imageの上）: 164px -> 41.75vw */
  .product-page .visual-left {
    padding-top: 0; /* default: no extra top gap for most product pages */
  }

  /* first image: width 100%, height 190px -> 48.35vw, 縦中央トリミング */
  .product-page .visual-left img:first-child {
    width: 100%;
    height: 48.35vw; /* 190px相当 */
    object-fit: cover;
    object-position: center center;
    display: block;
    margin: 0 auto 5.60vw; /* 下の隙間 22px -> 5.60vw */
  }

  /* gap between first and second image already set via margin-bottom above */

  /* second image: width 100%, height 195px -> 49.62vw, 縦中央トリミング */
  .product-page .visual-left img:nth-of-type(2) {
    width: 100%;
    height: 49.62vw; /* 195px相当 */
    object-fit: cover;
    object-position: center center;
    display: block;
    margin: 0 auto;
  }

  /* If images are wrapped in .img-frame, use absolute centering to avoid left/right cropping
     and ensure width is always 100% while trimming vertically only. */
  .product-page .visual-left .img-frame {
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  .product-page .visual-left .img-frame.first {
    height: 48.35vw; /* 190px相当 */
    margin-bottom: 5.60vw; /* 22px相当 */
  }

  .product-page .visual-left .img-frame.second {
    height: 49.62vw; /* 195px相当 */
  }

  .product-page .visual-left .img-frame img {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%; /* keep full width to avoid left/right cropping */
    height: auto;
    transform: translateY(-50%); /* vertical center */
  }

  /* Ensure visual-left stays full viewport on narrow devices */
  .product-page .visual-left {
    height: 100vh; /* keep full-screen first view */
    box-sizing: border-box;
  }

  /* incense3a pages: add a top gap at <=393px (50px at 393px -> 12.72vw)
     and reduce the available height for the two image frames so they
     remain exactly stacked within the visible viewport. */
  body.incense3a-page .visual-left {
    /* padding-top removed as requested */
    height: 100vh;
    box-sizing: border-box;
  }

  body.incense3a-page .visual-left .img-frame {
    flex: 0 0 calc(50vh - 6.36vw); /* (100vh - 12.72vw)/2 = 50vh - 6.36vw */
    height: calc(50vh - 6.36vw);
  }

  /* incense3a-specific: ensure two frames each fill half the viewport
     and images fill their frame height to avoid overlap on very narrow screens */
  body.incense3a-page .visual-left {
    height: 100vh; /* ensure fixed full viewport container */
  }

  body.incense3a-page .visual-left .img-frame {
    height: 50vh; /* each frame half viewport */
    margin: 0;
    padding: 0;
  }

  body.incense3a-page .visual-left .img-frame img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;    /* let height control scaling */
    height: 100%;   /* fill the frame vertically */
    object-fit: cover;
    object-position: center center;
    display: block;
    max-width: none;
  }

  /* visual-right should remain offset below visual-left; keep previously computed extra gap */
  .product-page .visual-right {
    margin-top: calc(100vh + 20.10vw);
  }
}

/* ==================================================
   Tablet: 394px - 768px
   Force horizontal centering of absolute-positioned
   images that sit inside .img-frame to avoid
   left-alignment on mid-size devices.
   These rules are intentionally limited to >=394px
   so they don't conflict with the narrow <=393px rules.
================================================== */
@media (min-width: 394px) and (max-width: 768px) {
  /* incense3a pages only: make visual-left a fixed full-viewport stacked container
     so two frames can occupy the viewport without gaps. Do NOT affect generic
     product pages (like irr_10_o). */
  body.incense3a-page .visual-left {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
    z-index: 1;
  }

  /* Each frame takes half the viewport height with no gaps */
  body.incense3a-page .visual-left .img-frame {
    flex: 0 0 50vh;
    height: 50vh;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
  }

  /* Images fill their frame (height-first) and are centered horizontally */
  body.incense3a-page .visual-left .img-frame img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;   /* allow width to scale from height */
    height: 100%;  /* fill the frame vertically */
    object-fit: cover;
    object-position: center center;
    display: block;
    max-width: none;
  }

  /* Ensure visual-right starts below the fixed 100vh first view for incense3a pages */
  body.incense3a-page .visual-right {
    margin-top: calc(100vh + 20.10vw);
  }
}

/* ==================================================
   Mobile narrow: specific top-gap for irr_10_o
   - Apply only for screens <= 393.98px
   - Adds a scalable top gap equal to 164px at 393px baseline (41.75vw)
   - Does NOT apply for >= 394px
   - Uses a dedicated class `has-top-gap` on the .img-frame in irr_10_o.html
================================================== */
@media (max-width: 393.98px) {
  /* Add top gap to the frame itself so the image remains vertically centered inside its frame */
  .product-page .visual-left .img-frame.has-top-gap {
    margin-top: 41.75vw; /* 164px at 393px baseline, scales down on narrower screens */
    box-sizing: border-box;
  }
}