/* =========================================================
   納骨堂・永代供養ページ専用CSS
   構成: ① PC共通スタイル（セクション別） ② スマホ専用スタイル（まとめ）
   ========================================================= */

/* ============================================================
   ① PC共通スタイル
   ============================================================ */

/* ---------- パンくず ---------- */
.breadcrumb{
  padding:18px 0;
  font-size:12.5px;
  color:var(--ink-soft);
}
.breadcrumb a{
  color:var(--gold);
  border-bottom:1px solid transparent;
}
.breadcrumb a:hover{
  border-bottom-color:var(--gold);
}
.breadcrumb .sep{
  margin:0 8px;
  color:var(--gray);
}

/* ---------- ページ見出し帯 ---------- */
.page-hero{
  position:relative;
  overflow:hidden;
  background:var(--gray-deep);
  padding:300px 0;
  text-align:center;
}
.page-hero img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.45;
}
.page-hero .inner{
  position:relative;
  z-index:1;
}
.page-hero .eyebrow{
  justify-content:center;
  color:var(--gold-light);
}
.page-hero .eyebrow::before{
  background:var(--gold-light);
}
.page-hero h1{
  font-size:clamp(34px,5vw,52px);
  color:#fff;
  letter-spacing:0.1em;
  margin-top:14px;
}
.page-hero .inner{
  animation: heroFadeUp 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes heroFadeUp{
  0%{
    opacity:0;
    transform:translateY(50px) scale(0.9);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* ---------- 導入文 ---------- */
.page-intro {
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 32px 24px;
  text-align: center;
}
.page-intro-title {
  font-size: 42px;
  color: var(--gray-deep);
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}
.page-intro p {
  font-size: 18px;
  color: var(--ink);
  line-height: 2.1;
}


.page-intro-head.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}


/* ---------- 導入文 ポイントボックス ---------- */
.point-box{
  max-width:1120px;
  margin:36px auto 0;
  padding:0 32px;
  text-align:left;
}
.point-box-title{
  font-size:32px;
  color:var(--gray-deep);
  letter-spacing:0.06em;
  font-weight:700;
  margin-bottom:40px;
  text-align:center;
  margin-top:80px;
}
.js-anim-ready .point-box-title{
  opacity:0;
  transform:translateY(50px) scale(0.9);
  transition:
    opacity 1.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 1.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.point-box-title.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}
.point-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  justify-content:center;
}
.point-item{
  display:flex;
  justify-content:center;
}
.point-item{
  opacity:1;
  transform:none;
}

.point-circle{
  width:260px;
  height:260px;
  border-radius:50%;
  background:var(--gold);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:'Noto Serif JP',"Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:24px;
  line-height:1.4;
  padding:28px;
  font-weight:500;
}

/* ---------- ご供養プラン ---------- */
.plan-section{
  background:#4A473D;
}
.plan-section .eyebrow{
  color:var(--gold-light);
}
.plan-section .eyebrow::before{
  background:var(--gold-light);
}
.plan-section .page-section-head h2{
  color:#fff;
  font-size:clamp(28px,3.5vw,38px);
}
.plan-lead{
  margin-top:18px;
  font-size:18px;
  color:#C9C3B4;
  line-height:1.9;
}

.js-anim-ready .plan-section-head-title{
  opacity:0;
  transform:translateY(50px) scale(0.9);
  transition:
    opacity 1.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 1.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.plan-section-head-title.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* ---------- セクション共通見出し ---------- */
.page-section{
  padding:56px 0;
  margin-top:80px;
}
.page-section-head{
  max-width:640px;
  margin:0 auto 44px;
  text-align:center;
}
.js-anim-ready .page-section-head{
  opacity:1;
  transform:none;
}
.page-section-head.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}
.page-section-head .eyebrow{
  justify-content:center;
}
.page-section-head h2{
  font-size:clamp(24px,3vw,30px);
  color:var(--gray-deep);
  letter-spacing:0.08em;
  margin-top:12px;
}

/* ---------- プランタブ：にょきっと伸びる演出 ---------- */
.plan-tabs{
  margin-top:32px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:6px;
  position:relative;
  z-index:2;
}
.js-anim-ready .plan-tabs{
  opacity:1;
  transform:none;
}
.plan-tabs.is-visible{
  opacity:1;
  transform:scaleY(1);
}
.plan-tab-btn{
  padding:20px 32px;
  border:none;
  border-radius:12px 12px 0 0;
  background:#B5A97D;
  color:#3F3C36;
  font-size:16px;
  font-weight:700;
  letter-spacing:0.02em;
  line-height:1.4;
  white-space:nowrap;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, padding .2s ease;
  position:relative;
  z-index:1;
}

.plan-tab-btn:hover{
  background:#C7BC93;
  color:#3F3C36;
}
.plan-tab-btn.is-active{
  background:var(--white);
  color:var(--gray-deep);
  font-weight:700;
  padding-top:24px;
  z-index:3;
}
.plan-panel{
  display:none;
}
/* 屋外・屋内は常に両方表示し、クリックした方が上に来る仕様 */
#plan-outdoor,
#plan-indoor{
  display:block;
  border-radius:12px;
}
/* 2つのパネルの間に余白 */
#plan-outdoor + #plan-indoor,
#plan-indoor + #plan-outdoor{
  margin-top:40px;
}

a.plan-tab-btn{
  display:inline-block;
  text-decoration:none;
}

.plan-section .page-section-head{
  margin-bottom:0;
}

/* ---------- プランボタン(レガシー) ---------- */
.plan-nav{
  margin-top:32px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:16px;
}
.plan-nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 32px;
  border:1px solid var(--gold-light);
  border-radius:999px;
  color:#fff;
  font-size:15px;
  letter-spacing:0.04em;
  transition:background .2s ease, color .2s ease;
}
.plan-nav-btn:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--gray-deep);
}

/* ---------- ご供養プラン：個別プラン(屋外・屋内・共通ブロック) ---------- */
.feature-list{
  display:flex;
  flex-direction:column;
  gap:32px;
  text-align:left;
}
.plan-item{
 background:var(--white);
 margin-top:0;
 padding:56px 44px;
 max-width:1120px;
 margin-left:auto;
 margin-right:auto;
 text-align:center;
 position:relative;
 z-index:1;
}
.plan-item-intro{
  display:block;
}
.js-anim-ready .plan-item-intro-head{
  opacity:0;
  transform:translateY(50px) scale(0.9);
  transition:
    opacity 1.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 1.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.plan-item-intro-head.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

.plan-item h3{
  font-size:30px;
  color:var(--gray-deep);
  letter-spacing:0.06em;
  margin-bottom:20px;
}
.plan-item-subtitle{
  font-size:17px;
  color:var(--gold);
  font-weight:600;
  line-height:1.8;
  padding-bottom:22px;
  margin-bottom:22px;
  border-bottom:1px solid var(--line);
}
.plan-item-desc{
  font-size:17px;
  color:var(--ink);
  line-height:2;
  text-align:left;
}

.js-anim-ready .plan-item-desc{
  opacity:1;
  transform:none;
}

.plan-feature-title{
  margin-top:48px;
  margin-bottom:28px;
  font-size:21px;
  color:#fff;
  letter-spacing:0.06em;
  background:var(--gray-deep);
  display:inline-block;
  padding:14px 40px;
  border-radius:999px;
}

.js-anim-ready .plan-feature-title{
  opacity:0;
  transform:translateY(50px) scale(0.9);
  transition:
    opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.plan-feature-title.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

.feature-row{
  background:var(--white);
  padding:32px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}
.js-anim-ready .feature-row{
  opacity:0;
  transform:translateY(50px) scale(0.9);
  transition:
    opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.feature-row.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}
.feature-row:nth-child(even) .feature-row-photo{
  order:2;
}
.feature-row-photo{
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:2px;
}
.feature-row-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.feature-row-title{
  font-size:19px;
  color:var(--gray-deep);
  font-weight:700;
  margin-bottom:14px;
}
.feature-row-desc{
  font-size:15.5px;
  color:var(--ink);
  line-height:1.9;
}

/* ---------- 屋内納骨壇：メイン写真 ---------- */
.plan-item-photo-large{
  margin-top:40px;
  aspect-ratio:1592/1125;
  overflow:hidden;
  display:flex;
  justify-content:center;
}

.js-anim-ready .plan-item-photo-large{
  opacity:0;
  transform:translateY(50px) scale(0.9);
  transition:
    opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.plan-item-photo-large.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

.plan-item-photo-large img{
  width:95%;
  height:100%;
  object-fit:cover;
}

/* ---------- 屋内納骨壇：1人用/2人用 ---------- */
.indoor-type-card{
  margin-top:40px;
  background:var(--white);
  border:2px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.js-anim-ready .indoor-type-card{
  opacity:0;
  transform:translateY(50px) scale(0.9);
  transition:
    opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.indoor-type-card.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}
.indoor-type-photo{
  aspect-ratio:16/9;
  overflow:hidden;
  display:flex;
  justify-content:center;
}
.indoor-type-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.indoor-type-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  text-align:left;
}
.indoor-type-item{
  padding:32px;
  background:var(--beige);
}
.indoor-type-item:first-child{
  border-right:1px solid var(--line);
}
.indoor-type-title{
  font-size:22px;
  color:var(--gray-deep);
  letter-spacing:0.06em;
  margin-bottom:14px;
}
.indoor-type-desc{
  font-size:15.5px;
  color:var(--ink);
  line-height:1.9;
}
.indoor-type-note{
  display:block;
  background:var(--gray-deep);
  color:#fff;
  font-size:14px;
  line-height:1.8;
  text-align:center;
  padding:16px 24px;
}
.indoor-type-price{
  display:block;
  margin-top:8px;
  font-size:26px;
  color:var(--gold);
  font-weight:600;
}

/* ---------- 納骨堂料金表 ---------- */
.price-table-wrap{
  margin-top:56px;
}
.price-table-wrap{
  opacity:1;
  transform:none;
}

.price-table-title{
  font-size:24px;
  color:var(--gray-deep);
  letter-spacing:0.06em;
  text-align:center;
  margin-bottom:24px;
}
.price-table{
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:14.5px;
}
.price-table th,
.price-table td{
  padding:16px 18px;
  border:1px solid var(--line);
  vertical-align:middle;
}
.price-table thead th{
  background:var(--gray-deep);
  color:#fff;
  font-weight:600;
  font-size:13.5px;
  letter-spacing:0.02em;
}

.price-table thead th{
  background:var(--gray-deep);
  color:#fff;
  font-weight:600;
  font-size:13.5px;
  letter-spacing:0.02em;
  white-space:nowrap;
}

.price-table-note{
  display:block;
  font-size:11px;
  color:var(--gold-light);
  font-weight:400;
  margin-top:4px;
}
.price-table tbody tr:nth-child(even){
  background:var(--beige);
}
.price-table-type{
  font-weight:700;
  color:var(--gray-deep);
  background:var(--gold-soft) !important;
  text-align:center;
}
.price-table-price{
  font-weight:700;
  color:var(--gold);
  font-size:16px;
}
.price-table-price-na{
  font-size:13px;
  font-weight:500;
  color:var(--ink-soft);
}

/* ---------- 納骨堂料金表：スクロールヒント（スマホのみ表示） ---------- */
.price-table-scroll-hint{
  display:none;
}

/* ---------- お客様の声 ---------- */
.voice-section{
  background:var(--beige);
}
.voice-section-head{
  position:relative;
  max-width:320px;
  margin:0 auto 56px;
  background:var(--white);
  border-radius:50%;
  aspect-ratio:1/1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.js-anim-ready .voice-section-head{
  opacity:0;
  transform:translateY(50px) scale(0.9);
  transition:
    opacity 1.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 1.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.voice-section-head.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

.voice-section-head::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-28px;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:20px solid transparent;
  border-right:20px solid transparent;
  border-top:28px solid var(--white);
}
.voice-section-en{
  font-size:16px;
  color:var(--gold);
  letter-spacing:0.08em;
  margin-bottom:10px;
}
.voice-section-head h2{
  font-size:28px;
  color:var(--gray-deep);
  letter-spacing:0.1em;
}
.voice-card-list{
  display:flex;
  flex-direction:column;
  gap:24px;
  max-width:820px;
  margin:0 auto;
}
.voice-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  padding:32px 36px;
}
.js-anim-ready .voice-card{
  opacity:1;
  transform:none;
}
.voice-card.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}
.voice-card-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}
.voice-card-icon{
  flex:none;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--beige-deep);
  position:relative;
  overflow:hidden;
}
.voice-card-icon::before{
  content:"";
  position:absolute;
  top:4px;
  left:50%;
  transform:translateX(-50%);
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--gold);
}
.voice-card-icon::after{
  content:"";
  position:absolute;
  bottom:-8px;
  left:50%;
  transform:translateX(-50%);
  width:18px;
  height:20px;
  border-radius:50% 50% 0 0;
  background:var(--gold);
}
.voice-card-name{
  font-size:16px;
  color:var(--gray-deep);
  letter-spacing:0.04em;
}
.voice-card-title{
  font-size:15.5px;
  color:var(--gold);
  font-weight:600;
  line-height:1.8;
  padding-bottom:18px;
  margin-bottom:18px;
  border-bottom:1px solid var(--line);
}
.voice-card-body{
  font-size:14.5px;
  color:var(--ink);
  line-height:1.95;
  text-align:left;
}

/* ---------- よくある質問 ---------- */
.faq-list{
  max-width:820px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.faq-item{
  background:var(--white);
  border:1px solid var(--line);
}
.faq-item summary{
  padding:20px 24px;
  font-size:15px;
  font-weight:600;
  color:var(--gray-deep);
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.faq-item summary::-webkit-details-marker{
  display:none;
}
.faq-item summary::after{
  content:"+";
  flex:none;
  font-size:20px;
  color:var(--gold);
  transition:transform .2s ease;
}
.faq-item[open] summary::after{
  transform:rotate(45deg);
}
.faq-item .faq-a{
  padding:0 24px 22px;
  font-size:14px;
  color:var(--ink-soft);
  line-height:2;
}

/* ---------- ページ下部CTA ---------- */
.page-cta{
  background:var(--gray-deep);
  padding:64px 0;
  text-align:center;
}
.page-cta h2{
  font-size:24px;
  color:#fff;
  letter-spacing:0.08em;
  margin-bottom:16px;
}
.page-cta p{
  font-size:14px;
  color:#C9C3B4;
  margin-bottom:32px;
}
.page-cta .btn-row{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ---------- 写真タップで拡大表示（スマホのみ有効） ---------- */
.zoomable-photo{
  position:relative;
}
.zoom-icon{
  display:none;
}
.photo-lightbox{
  display:none;
}


/* ---- 画像は静止表示に変更（テキストの動きはそのまま） ---- */
.feature-row-photo,
.plan-item-photo-large,
.indoor-type-photo{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}
.js-anim-ready .feature-row{
  opacity:1 !important;
  transform:none !important;
}
.js-anim-ready .indoor-type-card{
  opacity:1 !important;
  transform:none !important;
}

.js-anim-ready .feature-row-text{
  opacity:1;
  transform:none;
}
.feature-row-text.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

.indoor-type-note,
.indoor-type-grid{
  opacity:1;
  transform:none;
}

.page-intro-title {
  font-size: 42px;
  color: var(--gray-deep);
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}
.page-intro p {
  font-size: 18px;
  color: var(--ink);
  line-height: 2.1;
}

.js-anim-ready .page-intro-head{
  opacity:0;
  transform:translateY(50px) scale(0.9);
  transition:
    opacity 1.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 1.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.page-intro-head.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}


/* ============================================================
   ② スマホ専用スタイル（860px以下）
   ============================================================ */
@media (max-width:860px){

/* ---- トップ画像 ---- */
.page-hero{
  padding:160px 0;
}

  /* ---- 導入文 ポイントボックス ---- */
  .point-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
  .point-item{
    display:block;
  }
  .point-circle{
    width:100%;
    height:auto;
    min-height:80px;
    border-radius:40px;
    font-size:15px;
    padding:20px 28px;
    line-height:1.6;
    font-weight:700;
    text-align:left;
  }
  
  /* ---- 個別プラン ---- */
  #plan-outdoor,
  #plan-indoor{
    border-radius:0 0 20px 20px;
    overflow:hidden;
  }
  .plan-item-desc{
    font-size:16px;
  }
  .feature-row{
    grid-template-columns:1fr;
    gap:16px;
    padding:24px;
  }
  .feature-row:nth-child(even) .feature-row-photo{
    order:0;
  }
  .feature-row-desc{
    font-size:14.5px;
  }

  /* ---- プランボタン ---- */
  .plan-nav{
    flex-direction:column;
    align-items:center;
    gap:12px;
  }
  .plan-nav-btn{
    width:100%;
    max-width:320px;
  }
  
  

  /* ---- プランタブ ---- */
  .plan-tabs{
    flex-wrap:nowrap;
    gap:6px;
    padding:0;
    align-items:stretch;
  }
  
 .plan-tab-btn,
   a.plan-tab-btn{
     flex:1;
     padding:18px 8px;
     font-size:16px;
     line-height:1.4;
     white-space:normal;
     overflow:visible;
     text-overflow:clip;
     display:flex;
     align-items:center;
     justify-content:center;
     text-align:center;
     border-radius:20px 20px 0 0;
   }
 
  #plan-outdoor + #plan-indoor,
 #plan-indoor + #plan-outdoor{
   margin-top:24px;
 }

  /* ---- 屋内納骨壇：1人用/2人用 ---- */
  .indoor-type-grid{
    grid-template-columns:1fr;
  }
  .indoor-type-item{
    padding:18px 20px;
  }
  .indoor-type-item:first-child{
    border-right:none;
    border-bottom:1px solid var(--line);
  }
  .indoor-type-title{
    font-size:17px;
    margin-bottom:8px;
    font-weight:700;
  }
  .indoor-type-price{
    font-size:19px;
    margin-top:4px;
    font-weight:700;
  }
  .indoor-type-desc{
    font-size:13px;
    line-height:1.7;
    font-weight:600;
    color:var(--ink);
  }
  .indoor-type-note{
    font-weight:600;
  }
  /* ---- ご利用の流れ／料金プラン(レガシー含む) ---- */
  .price-grid{ grid-template-columns:1fr; }
  .flow-steps{ grid-template-columns:1fr; gap:48px; }
  .flow-step::after{
    top:auto;
    bottom:-34px;
    right:50%;
    transform:translateX(50%) rotate(90deg);
  }
  
  /* ---- 料金表：見出しは固定し、表だけを横スクロール可能にする ---- */
  .price-table-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .price-table{
    min-width:640px;
    font-size:12.5px;
  }
  .price-table th,
  .price-table td{
    padding:10px 12px;
    white-space:normal;
  }
  .price-table-title{
    font-size:20px;
  }
  
  .price-table-scroll-hint{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-top:10px;
    font-size:12px;
    color:var(--ink-soft);
  }
  .price-table-scroll-hint-arrow{
    display:inline-block;
    color:var(--gold);
    animation:priceScrollHint 1.6s ease-in-out infinite;
  }
  @keyframes priceScrollHint{
    0%, 100%{ transform:translateX(0); }
    50%{ transform:translateX(4px); }
  }
  
  /* ---- 屋内納骨壇：写真をスマホでは横幅いっぱいに ---- */
  .plan-item-photo-large img{
    width:100%;
  }
  .indoor-type-photo{
    aspect-ratio:auto;
    height:auto;
  }
  .indoor-type-photo img{
    width:100%;
    height:auto;
    object-fit:contain;
  }
  
  /* ---- 写真タップで拡大表示 ---- */
  .zoomable-photo{
    cursor:pointer;
  }
  .zoom-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    right:10px;
    bottom:10px;
    width:36px;
    height:36px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,0.25);
    color:var(--gray-deep);
    z-index:2;
  }
  .zoom-icon svg{
    width:18px;
    height:18px;
  }
  .photo-lightbox{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:200;
    background:rgba(20,18,15,0.92);
    align-items:center;
    justify-content:center;
    padding:20px;
  }
  .photo-lightbox.is-open{
    display:flex;
  }
  .photo-lightbox img{
    max-width:100%;
    max-height:88vh;
    width:auto;
    height:auto;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
  }
  .photo-lightbox-close{
    position:absolute;
    top:20px;
    right:20px;
    width:40px;
    height:40px;
    border:1px solid rgba(255,255,255,0.5);
    border-radius:50%;
    background:none;
    color:#fff;
    font-size:24px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  
  .price-table-wrap{
    margin-top:-56px;
  }
  
}