/* ==================================================================
   Cupcup Jewelry, susunan khusus.

   Container "Full Width" TIDAK punya .e-con-inner (anaknya menempel
   langsung di .e-con); container "Boxed" punya. Aturan di sini
   ditulis untuk kedua bentuk.
   ================================================================== */

/* ------------------------------------------------------------------
   HEADER: wordmark kiri, navigasi tengah, keranjang kanan.
   ------------------------------------------------------------------ */
.e-con:has(> .e-con-inner > .cc-wordmark) > .e-con-inner{align-items:center;}
@media (max-width:900px){
  .e-con:has(> .e-con-inner > .cc-wordmark) > .e-con-inner{
    flex-direction:column;
    gap:14px;
    text-align:center;
  }
  .e-con:has(> .e-con-inner > .cc-wordmark) > .e-con-inner > .elementor-widget{width:100%;}
  .elementor-widget-text-editor.cc-nav p{text-align:center;}
  .elementor-widget-text-editor.cc-nav a{margin:0 8px;font-size:10px;display:inline-block;}
}

/* ------------------------------------------------------------------
   HERO SPLIT, dua panel foto dengan teks melayang di tengah.
   ------------------------------------------------------------------ */
.cc-heroimg,
.cc-heroimg-b{position:relative;width:50%;flex:0 0 50%;overflow:hidden;}
.cc-heroimg img,
.cc-heroimg-b img{display:block;width:100%;height:88vh;object-fit:cover;}
.cc-heroimg::after,
.cc-heroimg-b::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(10,9,7,.16) 0%,rgba(10,9,7,.40) 100%);
}

.e-con:has(> .e-con-inner > .cc-heroover),
.e-con:has(> .cc-heroover){
  position:absolute!important;
  inset:0;
  width:100%;
  --width:100%;
  z-index:3;
  padding:0 24px;
  pointer-events:none;
}
.e-con:has(> .e-con-inner > .cc-heroover) > .e-con-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:100%;
  gap:24px;
  max-width:880px;
  padding:0;
  text-align:center;
}
.e-con:has(> .e-con-inner > .cc-heroover) .elementor-widget{pointer-events:auto;}
.e-con:has(> .e-con-inner > .cc-heroover) .elementor-widget-text-editor{max-width:520px;}

@media (max-width:767px){
  .cc-heroimg{width:100%;flex:0 0 100%;}
  .cc-heroimg-b{display:none;}
  .cc-heroimg img{height:80vh;}
  .e-con:has(> .e-con-inner > .cc-heroover) > .e-con-inner{gap:18px;}
}

/* ------------------------------------------------------------------
   BADGE DISKON, meniru badge SALE merah Lumilux.
   Muncul sendiri pada kartu yang harganya punya <s> (harga lama),
   jadi tidak perlu widget tambahan dan tidak bisa lupa dipasang.
   ------------------------------------------------------------------ */
.e-con:has(> .e-con-inner > .cc-zoom):has(.cc-price s) > .e-con-inner > .cc-zoom::before{
  content:'Sale';
  position:absolute;
  top:0;
  left:0;
  z-index:2;
  background:var(--accent);
  color:#FFFFFF;
  font-family:'Switzer',system-ui,sans-serif;
  font-size:9.5px;
  font-weight:500;
  line-height:1;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:9px 13px;
}

/* ------------------------------------------------------------------
   STRIP INSTAGRAM
   ------------------------------------------------------------------ */
.cc-insta{position:relative;overflow:hidden;flex:0 0 20%;}
.cc-insta::after{
  content:'';
  position:absolute;
  inset:0;
  background:#000;
  opacity:0;
  transition:opacity .3s ease-in-out;
  pointer-events:none;
}
.cc-insta:hover::after{opacity:.2;}
@media (max-width:767px){
  .cc-insta{flex:0 0 33.333%;}
}

/* ------------------------------------------------------------------
   STRIP JAMINAN
   ------------------------------------------------------------------ */
.cc-guar{padding:0 6px;}
@media (min-width:1025px){
  .cc-guar + .cc-guar{border-left:1px solid var(--hairline);padding-left:36px;}
}

/* ------------------------------------------------------------------
   KARTU JURNAL
   ------------------------------------------------------------------ */
.cc-journal{position:relative;overflow:hidden;display:block;width:100%;}
.cc-journal img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;}
.cc-journal::after{
  content:'';
  position:absolute;
  inset:0;
  background:#000;
  opacity:0;
  transition:opacity .3s ease-in-out;
  pointer-events:none;
}
.cc-journal:hover::after{opacity:.2;}

.elementor-widget-text-editor.cc-meta p{
  font-family:'Switzer',system-ui,sans-serif;
  font-size:10px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--accent);
  line-height:1.6;
  margin:0;
}

.elementor-widget-heading.cc-journaltitle .elementor-heading-title{
  font-family:'Gambetta',serif;
  font-size:clamp(20px,1.7vw,27px);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.24;
  color:var(--ink);
  margin:0;
  transition:color .3s ease-in-out;
}
.e-con:has(> .e-con-inner > .cc-journal):hover .cc-journaltitle .elementor-heading-title{color:var(--dim);}
.e-con:has(> .e-con-inner > .cc-journal):hover .cc-journal::after{opacity:.2;}

/* ------------------------------------------------------------------
   BAR PENGUMUMAN
   ------------------------------------------------------------------ */
.elementor-widget-text-editor.cc-announce p{
  font-family:'Switzer',system-ui,sans-serif;
  font-size:10.5px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--dim);
  line-height:1.6;
  margin:0;
  text-align:center;
}

.elementor-widget-heading .elementor-heading-title{margin:0;}


/* ------------------------------------------------------------------
   HALAMAN FAQ: latar bone penuh selebar layar.

   Kontainer accordion punya latar bone sendiri tapi lebarnya dibatasi
   880px di tengah, sehingga sisi kiri dan kanannya memperlihatkan latar
   body yang putih. Latar body disamakan supaya terbaca satu bidang bone
   tanpa jahitan, sementara lebar isi accordion tidak berubah.
   ------------------------------------------------------------------ */
body.page-id-140{background-color:#F3F0E9;}


/* ------------------------------------------------------------------
   HEADER HP: ikon hamburger sejajar dengan wordmark dan CART.

   Kolom nav adalah flex kolom ber-gap 20px, dan panel dropdown tetap
   display:block walau menunya tertutup, jadi ia tetap dihitung sebagai
   flex item: gap 20px plus margin-top 10px menempel di bawah ikon dan
   mendorong pusat ikon naik 15px dari pusat baris header.

   Saat TERTUTUP panel dikeluarkan dari alur supaya tinggi kolom sama
   dengan tinggi ikon, sehingga induknya yang align-items:center bisa
   memusatkannya. Saat TERBUKA (Elementor menambahkan .elementor-active
   pada tombolnya) aturan ini tidak berlaku, jadi menu tetap mendorong
   isi halaman ke bawah persis seperti sebelumnya.
   ------------------------------------------------------------------ */
@media (max-width:1024px){
  .elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu--dropdown{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    margin-top:0;
  }
}


/* ------------------------------------------------------------------
   TAB HALAMAN PRODUK.

   Tombol tab atomic Elementor datang dengan gaya bawaannya sendiri:
   latar putih, border kotak 2px, dan lebar tetap 160px. Di atas latar
   bone hasilnya terbaca sebagai tiga kotak putih yang menempel, bukan
   navigasi. Di sini dikembalikan ke bahasa desain Cupcup: tanpa kotak,
   label mono huruf besar, dan tab aktif ditandai garis bawah tinta.
   ------------------------------------------------------------------ */
.e-tab-base{
  background-color:transparent!important;
  border:0!important;
  border-bottom:1px solid transparent!important;
  border-radius:0!important;
  width:auto!important;
  min-width:0!important;
  padding:10px 0!important;
  margin-right:36px;
  font-family:'Switzer',system-ui,sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dim)!important;
  transition:color .35s cubic-bezier(0.4,0,0.2,1),border-color .35s cubic-bezier(0.4,0,0.2,1);
}
.e-tab-base:last-child{margin-right:0;}
.e-tab-base:hover{color:var(--ink)!important;}
.e-tab-base[aria-selected="true"]{
  color:var(--ink)!important;
  border-bottom-color:var(--ink)!important;
}
@media (max-width:767px){
  .e-tab-base{margin-right:20px;font-size:10px;letter-spacing:.12em;}
}

/* Di 375px label "SHIPPING AND RETURNS" (nowrap, 130px) lebih lebar
   dari tombolnya yang menyusut jadi 89px, jadi teksnya menjulur 3px
   keluar layar. Tombol dilarang menyusut dan barisnya boleh membungkus. */
@media (max-width:767px){
  .e-tabs-menu-base{flex-wrap:wrap!important;row-gap:8px;}
  .e-tab-base{flex:0 0 auto!important;margin-right:18px;font-size:9.5px;letter-spacing:.08em;}
}


/* Wordmark footer: CUPCUP dan JEWELRY membawa text-indent sebesar
   letter-spacing-nya. Pada teks yang dipusatkan (header) itu memang
   penyeimbang spasi ekor, tapi di footer yang rata kiri ia mendorong
   huruf pertama ke kanan sehingga tidak lurus dengan paragraf di
   bawahnya. Indent dinolkan khusus di blok brand footer. */
.elementor-element-6cf5ae6e .e-paragraph-base{text-indent:0!important;}


/* Section loop produk yang kosong ditangani di motion.js, bukan di sini.
   CSS tidak bisa: :has() bersarang ditolak browser dan :empty meleset
   karena Elementor menyisakan simpul teks spasi di dalam layout loop. */