/* ==================================================================
   Cupcup Jewelry, design system.

   Animasi dan tipografi meniru Lumilux (novaworks) setelah pembedahan
   2026-09-10: entrance fade naik 50px 1,25 detik easing ease, dan
   hover kartu produk berupa scrim gelap 20 persen 0,3 detik
   ease-in-out, bukan zoom.

   Setiap aturan tipografi memakai awalan .elementor-widget-<tipe>
   supaya menang atas theme style kit Elementor.
   ================================================================== */

:root{
  --bone:#F3F0E9; --surface:#FFFFFF; --deep:#100F0C;
  --ink:#1A1815; --dim:#6B655B; --faint:#A39C8F;
  --hairline:rgba(26,24,21,.14); --accent:#8C2F39;
  --ease:cubic-bezier(.4,0,.2,1);
}

body{
  background-color:var(--surface);
  color:var(--ink);
  font-family:'Switzer',system-ui,sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none;}

/* ------------------------------------------------------------------
   1. ENTRANCE ANIMATION (kitifyShortFadeInUp milik Lumilux)
   ------------------------------------------------------------------ */
@keyframes ccShortFadeInUp{
  0%{opacity:0;transform:translate3d(0,50px,0);}
  100%{opacity:1;transform:none;}
}
.elementor-element.animated.fadeInUp,
.elementor-element.animated.fadeIn{
  animation-name:ccShortFadeInUp;
  animation-duration:1.25s;
  animation-timing-function:ease;
  animation-fill-mode:both;
}
@media (prefers-reduced-motion:reduce){
  .elementor-element.animated.fadeInUp,
  .elementor-element.animated.fadeIn{animation:none;}
}

/* ------------------------------------------------------------------
   2. TIPOGRAFI
   ------------------------------------------------------------------ */

/* Label kecil uppercase, tracking lebar (Lumilux 11px) */
.elementor-widget-heading.cc-chrome .elementor-heading-title,
.elementor-widget-text-editor.cc-chrome p{
  font-family:'Switzer',system-ui,sans-serif;
  font-size:11px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height:1.6;
  color:var(--faint);
  margin:0;
}

/* Judul section, serif uppercase (Lumilux 42px) */
.elementor-widget-heading.cc-sectiontitle .elementor-heading-title{
  font-family:'Gambetta',serif;
  font-size:clamp(26px,2.7vw,44px);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.1;
  color:var(--ink);
  margin:0;
}

/* Nama produk memakai SANS 16px, bukan serif. Detail Lumilux. */
.elementor-widget-heading.cc-prodname .elementor-heading-title{
  font-family:'Switzer',system-ui,sans-serif;
  font-size:16px;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  line-height:1.5;
  color:var(--ink);
  margin:0;
  transition:color .3s ease-in-out;
}

/* Harga, mendukung harga lama dicoret */
.elementor-widget-text-editor.cc-price p{
  font-family:'Switzer',system-ui,sans-serif;
  font-size:15px;
  font-weight:400;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  margin:0;
  line-height:1.6;
}
.elementor-widget-text-editor.cc-price s{color:var(--faint);margin-right:8px;}

/* Judul kartu banner kategori */
.elementor-widget-heading.cc-cardtitle .elementor-heading-title{
  font-family:'Gambetta',serif;
  font-size:clamp(21px,1.9vw,30px);
  font-weight:300;
  letter-spacing:0;
  line-height:1.22;
  color:var(--ink);
  margin:0;
}

/* Judul raksasa di atas foto (Lumilux 84px) */
.elementor-widget-heading.cc-hugetitle .elementor-heading-title{
  font-family:'Gambetta',serif;
  font-size:clamp(34px,5.4vw,92px);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.06;
  color:#FFFFFF;
  margin:0;
}

/* Navigasi header */
.elementor-widget-text-editor.cc-nav p{
  font-family:'Switzer',system-ui,sans-serif;
  font-size:11px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.16em;
  line-height:1.6;
  margin:0;
  color:var(--ink);
}
.elementor-widget-text-editor.cc-nav a{margin:0 15px;transition:color .3s ease-in-out;}
.elementor-widget-text-editor.cc-nav a:hover{color:var(--faint);}
.elementor-widget-text-editor.cc-nav a:first-child{margin-left:0;}
.elementor-widget-text-editor.cc-nav a:last-child{margin-right:0;}
@media (max-width:1024px){
  .elementor-widget-text-editor.cc-nav a{margin:0 8px;font-size:10px;}
}

/* Wordmark */
.elementor-widget-heading.cc-wordmark .elementor-heading-title{
  font-family:'Gambetta',serif;
  font-size:26px;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.34em;
  line-height:1;
  color:var(--ink);
  margin:0;
}

/* Paragraf umum di atas foto */
.elementor-widget-text-editor.cc-lede p{
  font-family:'Switzer',system-ui,sans-serif;
  font-size:15px;
  font-weight:400;
  line-height:1.85;
  letter-spacing:.01em;
  margin:0;
}

/* ------------------------------------------------------------------
   3. FOTO DAN HOVER
   ------------------------------------------------------------------ */
.cc-zoom{position:relative;overflow:hidden;display:block;}
.cc-zoom img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:7/8;
  object-fit:cover;
  background:#FBFAF8;
}
.cc-zoom::after{
  content:'';
  position:absolute;
  inset:0;
  background:#000;
  opacity:0;
  transition:opacity .3s ease-in-out;
  pointer-events:none;
}
.cc-zoom:hover::after{opacity:.2;}
.cc-zoom-wide img{aspect-ratio:16/10;}
.cc-zoom-tall img{aspect-ratio:3/4;}
.cc-zoom-square img{aspect-ratio:1/1;}

/* Seluruh kartu ikut bereaksi saat bagian mana pun di-hover */
.e-con:has(> .e-con-inner > .cc-zoom):hover .cc-zoom::after{opacity:.2;}
.e-con:has(> .e-con-inner > .cc-zoom):hover .cc-prodname .elementor-heading-title{color:var(--dim);}

/* ------------------------------------------------------------------
   4. KOLOM
   Setelan dan css class pada container tidak tersimpan lewat MCP,
   jadi kolom dikenali dari widget bertanda di dalamnya.
   ------------------------------------------------------------------ */
.e-con:has(> .e-con-inner > .cc-zoom){width:23.5%; --width:23.5%;}
.e-con:has(> .e-con-inner > .cc-zoom) > .e-con-inner{
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:0;
}
.e-con:has(> .e-con-inner > .cc-zoom) > .e-con-inner > .cc-zoom{margin-bottom:11px;}

.e-con:has(> .e-con-inner > .cc-zoom-wide){width:48.5%; --width:48.5%;}
.e-con:has(> .e-con-inner > .cc-zoom-wide) > .e-con-inner{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:0;
}
.e-con:has(> .e-con-inner > .cc-zoom-wide) > .e-con-inner > .cc-zoom-wide{margin-bottom:14px;}
.e-con:has(> .e-con-inner > .cc-zoom-wide) > .e-con-inner > .elementor-widget-button{margin-top:10px;}

.e-con:has(> .e-con-inner > .cc-journal){width:31.4%; --width:31.4%;}
.e-con:has(> .e-con-inner > .cc-journal) > .e-con-inner{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:0;
}

.e-con:has(> .e-con-inner > .cc-foothead){width:22%; --width:22%;}
.e-con:has(> .e-con-inner > .cc-foothead) > .e-con-inner{
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:0;
}

.cc-guar{width:23%;}
.cc-insta{width:20%;}
.cc-insta img{aspect-ratio:1/1;object-fit:cover;width:100%;display:block;}

@media (max-width:1024px){
  .e-con:has(> .e-con-inner > .cc-zoom){width:47.5%; --width:47.5%;}
  .cc-guar{width:47%;}
}
@media (max-width:767px){
  .e-con:has(> .e-con-inner > .cc-zoom),
  .e-con:has(> .e-con-inner > .cc-zoom-wide),
  .e-con:has(> .e-con-inner > .cc-journal),
  .e-con:has(> .e-con-inner > .cc-foothead){width:100%; --width:100%;}
  .cc-guar{width:100%;}
  .cc-insta{width:33.33%;}
}

/* ------------------------------------------------------------------
   5. STRIP JAMINAN
   ------------------------------------------------------------------ */
.elementor-widget-text-editor.cc-guar p{margin:0;}
.elementor-widget-text-editor.cc-guar strong{
  display:block;
  font-family:'Switzer',system-ui,sans-serif;
  font-size:11px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--ink);
  margin-bottom:8px;
}
.elementor-widget-text-editor.cc-guar em{
  font-style:normal;
  display:block;
  font-size:13px;
  color:var(--dim);
  line-height:1.65;
}

/* ------------------------------------------------------------------
   6. TEKS DI ATAS LATAR GELAP
   ------------------------------------------------------------------ */
.cc-onphoto .elementor-heading-title,
.cc-onphoto p{color:#FFFFFF!important;}
.cc-onphoto-dim .elementor-heading-title,
.cc-onphoto-dim p{color:rgba(255,255,255,.76)!important;}

.elementor-widget-heading.cc-foothead .elementor-heading-title{
  font-family:'Gambetta',serif;
  font-size:20px;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.06em;
  line-height:1.2;
  color:#FFFFFF!important;
  margin:0;
}
.elementor-widget-text-editor.cc-footlink p{
  font-family:'Switzer',system-ui,sans-serif;
  font-size:15px;
  color:rgba(255,255,255,.72)!important;
  line-height:2.1;
  margin:0;
}
.elementor-widget-text-editor.cc-footlink a{transition:color .3s ease-in-out;}
.elementor-widget-text-editor.cc-footlink a:hover{color:#FFFFFF!important;}

.cc-rule{border-top:1px solid var(--hairline);}
.cc-rule-dark{border-top:1px solid rgba(255,255,255,.12);}