/* VYSESTORE.ID website kedua — unified smooth visual polish.
   Contains presentation only; the Casaku and Firebase business rules are unchanged. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;650;700;800&display=swap');

:root {
  --vyse-ease: cubic-bezier(.2,.75,.25,1);
  --vyse-shadow: 0 12px 36px rgba(75,37,137,.065);
  font-family: 'Plus Jakarta Sans', Inter, ui-sans-serif, system-ui, sans-serif;
}
body,button,input,textarea,select{font-family:'Plus Jakarta Sans',Inter,ui-sans-serif,system-ui,sans-serif}
body{line-height:1.6;letter-spacing:-.012em}
button,a,input{outline-offset:3px}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(124,66,218,.28)}

/* Catalogue typography: stronger heading and closer to the reference cards. */
.catalog-heading{margin:8px 0 21px}
.catalog-heading h2{font-size:clamp(19px,2.2vw,23px);font-weight:800;letter-spacing:-.8px;line-height:1.3}
.category-strip{gap:10px;margin:0 0 19px;padding:8px 1px 15px;scroll-padding-inline:4px}
.category-chip{flex-shrink:0;min-height:38px;border-radius:11px;padding:9px 15px;font-size:11.5px;font-weight:700;letter-spacing:-.2px;transition:background .3s var(--vyse-ease),border-color .3s var(--vyse-ease),box-shadow .3s var(--vyse-ease),transform .3s var(--vyse-ease)}
.category-chip:hover{transform:translateY(-2px);border-color:#c7b1ea;box-shadow:0 7px 15px rgba(90,34,181,.08)}
.category-chip.active{box-shadow:0 6px 18px rgba(106,43,207,.12)}
.quick-section{margin-top:28px;margin-bottom:22px}
.quick-list{gap:16px;padding-top:7px;padding-bottom:13px}
.quick-card{transition:transform .4s var(--vyse-ease),box-shadow .4s var(--vyse-ease),border-color .4s var(--vyse-ease)}
.quick-card:hover{transform:translateY(-5px);box-shadow:0 12px 29px rgba(98,44,185,.11);border-color:#d2c1ee}

/* Product cards: slightly raised, more breathing room, larger product information. */
.product-grid{gap:25px 23px}
.product-card{position:relative;isolation:isolate;overflow:hidden;border-radius:17px;box-shadow:0 5px 16px rgba(63,37,106,.065);border:1px solid #e7e1f1;background:var(--card)}
.product-card-image{overflow:hidden}
.product-card-image img{transition:transform .7s var(--vyse-ease),filter .6s var(--vyse-ease)}
.product-card-info{background:linear-gradient(180deg,#f7f4fc,#f3eefa);padding:13px 13px 15px;min-height:108px;gap:2px}
.product-category{font-family:Inter,'Plus Jakarta Sans',sans-serif;font-size:12.5px;font-weight:650;line-height:1.42;min-height:36px;color:#17253a;letter-spacing:-.24px}
.product-name{font-family:Inter,'Plus Jakarta Sans',sans-serif;font-size:11px;line-height:1.5;font-weight:500;color:#78859a;letter-spacing:.02em;margin-top:auto;padding-top:8px}
.product-sales{font-family:Inter,'Plus Jakarta Sans',sans-serif;font-size:10.5px;font-weight:450;line-height:1.5;color:#65748b;margin-top:3px}
.instant-badge{font-weight:700}

/* Large desktop: proximity glow + one gentle light sweep. */
@media (hover:hover) and (pointer:fine) and (min-width:761px){
  .product-card{transition:transform .5s var(--vyse-ease),box-shadow .5s var(--vyse-ease),border-color .5s var(--vyse-ease)}
  .product-card::before{content:"";position:absolute;inset:-25% -70%;z-index:3;pointer-events:none;opacity:0;transform:translateX(-100%) rotate(16deg);background:linear-gradient(90deg,transparent 31%,rgba(255,255,255,.02) 42%,rgba(255,255,255,.66) 49%,rgba(255,255,255,.12) 55%,transparent 69%)}
  .product-card.glow-near{transform:translateY(-3px);border-color:#d0b6f9;box-shadow:0 13px 28px rgba(93,43,173,.13)}
  .product-card.glow-near::before{animation:vyseGlassSweep 1.05s ease-out both}
  .product-card.glow-active{transform:translateY(-8px) scale(1.014);border-color:#ba91fb;box-shadow:0 22px 46px rgba(87,30,179,.20),0 0 0 1px rgba(134,67,241,.16)}
  .product-card::after{background:radial-gradient(280px circle at var(--glow-x,50%) var(--glow-y,50%),rgba(163,108,250,.25),rgba(133,76,225,.08) 42%,transparent 75%);transition:opacity .5s var(--vyse-ease)}
  .product-card.glow-near::after{opacity:.55}
  .product-card.glow-active::after{opacity:1}
  .product-card.glow-near .product-card-image img{transform:scale(1.035)}
  .product-card.glow-active .product-card-image img{transform:scale(1.075)}
}
@keyframes vyseGlassSweep{0%{opacity:0;transform:translateX(-110%) rotate(16deg)}12%{opacity:.42}70%{opacity:.25}100%{opacity:0;transform:translateX(105%) rotate(16deg)}}

/* Detail product: space out sections rather than relying on collapsed margins. */
.detail-shell{padding-top:13px}
.breadcrumb{margin-bottom:19px}
.product-hero-card{border-radius:20px;margin-bottom:30px;box-shadow:var(--vyse-shadow)}
.detail-layout{grid-template-columns:minmax(0,1.45fr) minmax(305px,1fr);gap:28px;align-items:start}
#orderForm{display:flex;flex-direction:column;gap:26px}
.detail-side-column{gap:23px}
.detail-layout .panel{border:1px solid #e9e4f2;border-radius:19px;box-shadow:var(--vyse-shadow)}
#orderForm > .panel{margin:0;padding:23px 23px 25px}
#orderForm .panel-title{gap:13px;margin-bottom:19px}
#orderForm .panel-title h2{font-weight:800;font-size:16px;letter-spacing:-.45px}
#orderForm .panel-icon{width:39px;height:39px;border-radius:13px;box-shadow:0 4px 10px rgba(106,42,210,.12)}
#orderForm .field-label{font-size:12px;font-weight:600;letter-spacing:0;margin-top:14px}
#orderForm .line-input{height:46px;font-size:13px;transition:border-color .28s ease,box-shadow .28s ease}
#orderForm .line-input:focus{border-bottom-color:#7e46d8;box-shadow:0 2px 0 rgba(126,70,216,.2)}
#orderForm .field-note{font-size:10.5px;line-height:1.6;margin:13px 0 0;color:#7d8da4}
.duration-grid{gap:14px}
.duration-card{min-height:144px;border:1.5px solid #e7e0f2;border-radius:16px;background:var(--card);padding:11px 11px 0;transition:transform .35s var(--vyse-ease),box-shadow .35s var(--vyse-ease),border-color .35s var(--vyse-ease),background .35s var(--vyse-ease)}
.duration-card:hover{transform:translateY(-3px);border-color:#b891f6;box-shadow:0 9px 25px rgba(109,44,215,.12)}
.duration-card.selected{border-color:#7338d3;background:#faf7ff;box-shadow:0 7px 20px rgba(107,49,200,.16)}
.duration-top{gap:9px;font-size:12px;line-height:1.4;font-weight:700}
.duration-top img{border-radius:9px}
.duration-card>strong{font-size:13px;padding:12px 11px;margin-left:-11px;margin-right:-11px;width:calc(100% + 22px);background:#f5f1fb}
.chosen-label{font-size:9px;font-weight:800;padding:4px 9px;margin-top:10px}
.promo-row{gap:11px;margin-top:23px}
.promo-row input{min-height:45px;border-radius:11px;padding-inline:14px;font-size:12px}
.apply-promo{border-radius:11px;padding-inline:17px;transition:transform .25s var(--vyse-ease),box-shadow .25s var(--vyse-ease)}
.apply-promo:hover{transform:translateY(-2px);box-shadow:0 6px 17px rgba(97,33,200,.12)}
.summary-line{padding:13px 0;font-size:12px}
.summary-total{padding-top:16px;padding-bottom:14px}
.primary-order-btn{min-height:51px;border-radius:12px;transition:transform .35s var(--vyse-ease),box-shadow .35s var(--vyse-ease)}
.primary-order-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 29px rgba(103,41,202,.23)}
.instruction-panel,.video-panel,.rating-panel,.detail-info-panel{padding:20px}
.review-note{margin:26px 0 42px}

/* Keep every duration visually normal; stock is private, and backend validates ULTRA. */
.duration-card.duration-admin-fulfillment{background:var(--card);border-color:#e7e0f2;box-shadow:none}
.duration-card.duration-admin-fulfillment:hover{border-color:#b891f6}
.duration-stock-note{display:none!important}

/* Dark theme: preserve contrast, not white-on-white. */
.dark-mode .product-card-info{background:linear-gradient(180deg,#26364d,#1c2b40)}
.dark-mode .product-category{color:#f4f0fb}
.dark-mode .product-name,.dark-mode .product-sales{color:#a8b9d0}
.dark-mode .duration-card.selected{background:#1b3456}
.dark-mode .duration-card>strong{background:#1d2b41}
.dark-mode .detail-layout .panel{border-color:#34455f}
.dark-mode .duration-card{border-color:#34455f;background:var(--card)}
.dark-mode .duration-card.selected{border-color:#9763ea}

@media (max-width:1050px){
  .detail-layout{grid-template-columns:minmax(0,1fr) minmax(270px,.82fr);gap:19px}
  .duration-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
}
@media (max-width:760px){
  body{line-height:1.58}
  .category-strip{gap:8px;margin-bottom:14px;padding-top:7px}
  .category-chip{min-height:34px;padding:8px 12px;font-size:10.5px}
  .catalog-heading h2{font-size:20px}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 13px}
  .product-card-info{min-height:114px;padding:11px 11px 13px}
  .product-category{font-size:11.5px;min-height:33px}
  .product-name{font-size:10.25px}
  .product-sales{font-size:10px}
  .quick-section{margin-top:19px;margin-bottom:19px}
  .detail-shell{padding-top:9px}
  .product-hero-card{margin-bottom:23px}
  .detail-layout{grid-template-columns:1fr;gap:22px}
  #orderForm{gap:21px}
  .detail-side-column{gap:19px}
  #orderForm>.panel{padding:19px 17px 21px}
  #orderForm .panel-title{margin-bottom:15px}
  #orderForm .field-label{font-size:11.5px}
  #orderForm .line-input{height:45px}
  .duration-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .duration-card{min-height:133px;padding:10px 10px 0}
  .duration-card>strong{margin-left:-10px;margin-right:-10px;width:calc(100% + 20px);padding:10px}
  .review-note{margin-top:22px;margin-bottom:28px}
}
@media (max-width:390px){
  .product-grid{gap:13px 10px}
  .product-card-info{padding:10px 9px 12px}
  .product-category{font-size:11px}
  .duration-grid{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .quick-card,.category-chip,.duration-card,.product-card,.primary-order-btn,.product-card-image img{animation:none!important;transition:none!important}
  .product-card::before,.product-card::after{display:none!important}
}


/* 2026-11-09 — original EDOT-reference-inspired product motion.
   The provided EDOT HTML exposes a loading skeleton, not its hydrated card
   animation. This is our own implementation, not copied site code. */
@media (hover:hover) and (pointer:fine) and (min-width:761px) and (prefers-reduced-motion:no-preference){
  .product-card{
    transition: transform .52s cubic-bezier(.22,1,.36,1),
                box-shadow .55s cubic-bezier(.22,1,.36,1),
                border-color .42s ease, background-color .42s ease;
    transform:translate3d(0,0,0);
    backface-visibility:hidden;
  }
  .product-card-image>img{
    transition:transform .85s cubic-bezier(.22,1,.36,1), filter .65s ease;
  }
  .product-card::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    opacity:var(--vyse-light,0);
    transition:opacity .30s ease-out;
    background:radial-gradient(240px circle at var(--glow-x,50%) var(--glow-y,50%),
      rgba(199,166,252,.34) 0%, rgba(156,99,247,.18) 27%, rgba(123,71,205,.07) 51%, transparent 75%);
    mix-blend-mode:screen;
  }
  .product-card::before{
    content:"";
    position:absolute;
    inset:-22% -115%;
    z-index:4;
    pointer-events:none;
    opacity:0;
    transform:translate3d(-80%,0,0) rotate(18deg);
    background:linear-gradient(90deg,transparent 28%,rgba(255,255,255,.02) 42%,
      rgba(255,255,255,.48) 49%,rgba(255,255,255,.06) 57%,transparent 71%);
  }
  .product-card.glow-near{
    transform:translate3d(0,-5px,0);
    border-color:rgba(166,123,236,.75);
    box-shadow:0 14px 32px rgba(99,47,182,.135),0 0 0 1px rgba(180,136,251,.08);
  }
  .product-card.glow-active,.product-card:hover{
    transform:translate3d(0,-10px,0) scale(1.018);
    border-color:rgba(155,103,238,.94);
    box-shadow:0 24px 48px rgba(85,34,168,.20),0 5px 16px rgba(122,70,207,.10),
      0 0 0 1px rgba(157,100,249,.20);
  }
  .product-card.glow-near .product-card-image>img{transform:scale(1.028)}
  .product-card.glow-active .product-card-image>img,.product-card:hover .product-card-image>img{
    transform:scale(1.065);
    filter:saturate(1.06) brightness(1.025);
  }
  .product-card.glow-near::before{
    animation:vyseRefLightPass 1.22s cubic-bezier(.15,.5,.3,1) both;
  }
  .product-card.glow-active::after{opacity:max(.48,var(--vyse-light,1))}
}
@keyframes vyseRefLightPass{
  0%{opacity:0;transform:translate3d(-80%,0,0) rotate(18deg)}
  22%{opacity:.45}
  75%{opacity:.30}
  100%{opacity:0;transform:translate3d(85%,0,0) rotate(18deg)}
}
/* Smooth arrival when catalog cards are rendered; no jump on mobile. */
@media (prefers-reduced-motion:no-preference){
  .product-grid>.product-card{animation:vyseProductEnter .46s cubic-bezier(.2,.8,.24,1) both}
  .product-grid>.product-card:nth-child(2){animation-delay:35ms}
  .product-grid>.product-card:nth-child(3){animation-delay:70ms}
  .product-grid>.product-card:nth-child(4){animation-delay:105ms}
  .product-grid>.product-card:nth-child(5){animation-delay:140ms}
  .product-grid>.product-card:nth-child(6){animation-delay:175ms}
}
@keyframes vyseProductEnter{from{opacity:.35;filter:brightness(.96)}to{opacity:1;filter:brightness(1)}}
@media (prefers-reduced-motion:reduce){
  .product-grid>.product-card{animation:none!important}
}


/* Compact-yet-readable spacing, calibrated to the user's reference:
   avoid large voids between cards and checkout panels. */
.product-grid{column-gap:16px;row-gap:17px}
.product-card-info{padding:11px 12px 13px;min-height:103px}
.quick-section{margin-top:20px;margin-bottom:15px}
.quick-list{gap:11px;padding-bottom:8px}
.category-strip{gap:8px;margin-bottom:12px;padding-bottom:10px}
.catalog-heading{margin-bottom:14px}
.product-hero-card{margin-bottom:18px}
.detail-layout{gap:17px}
#orderForm{gap:17px}
.detail-side-column{gap:16px}
#orderForm>.panel{padding:18px 19px 19px}
#orderForm .panel-title{margin-bottom:14px}
#orderForm .field-label{margin-top:10px}
#orderForm .field-note{margin-top:10px}
.duration-grid{gap:11px}
.promo-row{margin-top:15px;gap:9px}
.review-note{margin-top:20px;margin-bottom:30px}
@media (min-width:1201px){.product-grid{column-gap:17px;row-gap:18px}}
@media (min-width:761px) and (max-width:1200px){.product-grid{column-gap:15px;row-gap:16px}}
@media (max-width:760px){
 .product-grid{gap:13px 11px}
 .quick-section{margin-top:16px;margin-bottom:13px}
 .quick-list{gap:9px}
 .category-strip{gap:7px;margin-bottom:10px}
 .detail-layout{gap:16px}
 #orderForm{gap:15px}
 .detail-side-column{gap:14px}
 #orderForm>.panel{padding:15px 14px 17px}
 .product-hero-card{margin-bottom:17px}
 .duration-grid{gap:10px}
 .promo-row{margin-top:14px}
}
@media (max-width:390px){.product-grid{gap:12px 10px}}

/* A restrained lift rather than exaggerated displacement. */
@media (hover:hover) and (pointer:fine) and (min-width:761px) and (prefers-reduced-motion:no-preference){
 .product-card.glow-near{transform:translate3d(0,-3px,0);box-shadow:0 10px 23px rgba(99,47,182,.12)}
 .product-card.glow-active,.product-card:hover{transform:translate3d(0,-7px,0) scale(1.012);box-shadow:0 18px 38px rgba(85,34,168,.17),0 4px 12px rgba(122,70,207,.08)}
 .product-card.glow-near .product-card-image>img{transform:scale(1.015)}
 .product-card.glow-active .product-card-image>img,.product-card:hover .product-card-image>img{transform:scale(1.045)}
 .product-card::after{background:radial-gradient(210px circle at var(--glow-x,50%) var(--glow-y,50%),rgba(194,159,251,.25) 0%,rgba(152,96,242,.115) 30%,transparent 73%)}
 .product-card::before{background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.012) 44%,rgba(255,255,255,.30) 49%,rgba(255,255,255,.035) 56%,transparent 70%)}
}

/* Percepatan kemunculan katalog tanpa mengubah animasi hover / desain kartu. */
@media (prefers-reduced-motion: no-preference) {
  .product-grid>.product-card { animation-duration:.20s!important; animation-delay:0ms!important; }
}