/* ==========================================================
   QQTOTO — CLEAN GREY PREMIUM
   Final Override
   Grey Background + Clean Product + Falling Leaves
   ========================================================== */

:root{
  --qq-bg:#e7e7e9;
  --qq-bg-light:#f1f1f2;
  --qq-white:#ffffff;

  --qq-text:#19191d;
  --qq-text-soft:#505057;
  --qq-muted:#77777e;

  --qq-red:#d71920;
  --qq-red-dark:#b50f16;
  --qq-gold:#d5ad62;
  --qq-navy:#19182f;

  --qq-border:rgba(0,0,0,.08);
  --qq-shadow:0 12px 32px rgba(0,0,0,.08);
}

/* ==========================================================
   GLOBAL
   ========================================================== */

html{
  scroll-behavior:smooth;
}

body{
  margin:0;

  color:var(--qq-text) !important;

  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(255,255,255,.8),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #f0f0f1 0%,
      #e7e7e9 45%,
      #dfdfe2 100%
    ) !important;

  background-attachment:fixed !important;

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

#MainContent{
  background:transparent !important;
  color:var(--qq-text) !important;
}

::selection{
  background:var(--qq-red);
  color:#fff;
}


/* ==========================================================
   ANNOUNCEMENT BAR
   ========================================================== */

#shopify-section-announcement_bar_slider{
  position:relative;
  z-index:50;

  background:
    linear-gradient(
      90deg,
      #151429 0%,
      #24213d 50%,
      #151429 100%
    ) !important;

  border-bottom:1px solid rgba(255,255,255,.08);

  box-shadow:
    0 4px 16px rgba(0,0,0,.08);
}

.hura-announcement-bar{
  background:transparent !important;
}

.hura-announcement-bar .hura-message{
  color:#fff !important;
  opacity:1 !important;

  font-weight:600 !important;
}

.hura-announcement-bar a,
.announcement_link{
  color:#ffd66e !important;

  font-weight:700 !important;
  text-decoration:none !important;
}

.hura-announcement-bar a:hover{
  color:#fff !important;
}


/* ==========================================================
   HEADER
   ========================================================== */

.header-wrapper,
.header{
  position:relative;
  z-index:45;

  background:
    rgba(255,255,255,.97) !important;

  color:#29292d !important;

  border-bottom:
    1px solid rgba(0,0,0,.06);

  box-shadow:
    0 5px 22px rgba(0,0,0,.035);
}

.header__heading-logo{
  filter:
    drop-shadow(0 3px 5px rgba(0,0,0,.10));
}


/* ==========================================================
   HEADER NAVIGATION
   ========================================================== */

.header__inline-menu{
  border-top:
    1px solid rgba(0,0,0,.045);
}

.header__menu-item,
.header__menu-item span,
.header__active-menu-item,
.header__heading-link,
.header__icon,
.header a,
.list-menu__item,
.list-menu__item span,
.mega-menu__link{
  color:#3c3c41 !important;
  opacity:1 !important;
}

.header__menu-item{
  font-weight:600 !important;

  letter-spacing:.15px;

  transition:
    color .2s ease;
}

.header__menu-item:hover,
.header__menu-item:hover span,
.header a:hover{
  color:var(--qq-red) !important;
}


/* ==========================================================
   SEARCH
   ========================================================== */

.search-modal,
.header__search,
.predictive-search{
  color:#252529 !important;
}

.search__input,
.search-modal__form .field__input{
  color:#252529 !important;

  background:#f1f1f3 !important;

  border:
    1px solid transparent !important;

  border-radius:999px !important;

  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.025) !important;

  transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.search__input:focus,
.search-modal__form .field__input:focus{
  background:#fff !important;

  border-color:
    rgba(215,25,32,.22) !important;

  box-shadow:
    0 0 0 3px
    rgba(215,25,32,.05) !important;
}

.search__input::placeholder,
.field__input::placeholder{
  color:#77777d !important;
  opacity:1 !important;
}


/* ==========================================================
   PRODUCT CAROUSEL / STRIP
   ========================================================== */

.card,
.card-wrapper,
.card__content,
.card__information{
  color:#28282c !important;
}

.card__heading,
.card__heading *,
.card-information,
.card-information *,
.card .caption-with-letter-spacing{
  color:#303035 !important;
  opacity:1 !important;
}

.card-wrapper{
  transition:
    transform .25s ease;
}

.card-wrapper:hover{
  transform:translateY(-3px);
}


/* ==========================================================
   PRODUCT SECTION
   ========================================================== */

.product{
  position:relative;

  padding-top:36px;
  padding-bottom:55px;

  align-items:flex-start !important;
}


/* ==========================================================
   PRODUCT IMAGE
   ========================================================== */

.product__media-wrapper{
  position:relative;
}

.product__media{
  position:relative;

  overflow:hidden !important;

  background:#fff !important;

  border:
    1px solid rgba(255,255,255,.85) !important;

  border-radius:18px !important;

  box-shadow:
    0 14px 35px rgba(0,0,0,.10) !important;

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.product__media:hover{
  transform:translateY(-3px);

  box-shadow:
    0 20px 45px rgba(0,0,0,.13) !important;
}

.product__media img{
  display:block;

  width:100%;

  border-radius:18px !important;

  transition:
    transform .45s ease;
}

.product__media:hover img{
  transform:scale(1.012);
}


/* ==========================================================
   PRODUCT INFORMATION
   NO CARD / NO WHITE BOX
   ========================================================== */

.product__info-wrapper{
  position:relative;

  background:transparent !important;

  border:none !important;

  box-shadow:none !important;
}

.product__info-container{
  position:relative;

  padding:
    20px 24px !important;

  color:var(--qq-text) !important;

  background:transparent !important;
  background-color:transparent !important;

  border:none !important;
  border-radius:0 !important;

  box-shadow:none !important;

  overflow:visible !important;
}


/* ==========================================================
   REMOVE UNWANTED DECORATION
   ========================================================== */

.product__info-container::before,
.product__info-container::after,
.product__info-wrapper::before,
.product__info-wrapper::after{
  content:none !important;

  display:none !important;
}


/* ==========================================================
   PRODUCT LABEL
   ========================================================== */

.product__text,
.product__text.caption-with-letter-spacing,
.caption-with-letter-spacing{
  color:#46464b !important;

  opacity:1 !important;

  margin-top:0 !important;
  margin-bottom:8px !important;

  font-weight:600 !important;

  letter-spacing:.07em;
}


/* ==========================================================
   PRODUCT TITLE
   ========================================================== */

.product__title{
  position:relative;

  margin-top:0 !important;
  margin-bottom:17px !important;

  padding:0 !important;

  background:transparent !important;

  border:none !important;

  box-shadow:none !important;
}

.product__title,
.product__title *,
.product__title h1,
.product__title h2,
.product-title-style{
  color:#18181c !important;

  background:none !important;
  background-color:transparent !important;

  opacity:1 !important;

  box-shadow:none !important;

  text-shadow:none !important;
}

.product__title h1{
  margin:0 !important;
  padding:0 !important;

  color:#18181c !important;

  font-size:
    clamp(3rem,3vw,4.2rem) !important;

  line-height:1.16 !important;

  font-weight:800 !important;

  letter-spacing:-.6px !important;
}


/* ==========================================================
   TITLE ACCENT
   ========================================================== */

.product__title::before{
  content:"";

  display:block !important;

  position:relative;

  width:68px;
  height:4px;

  margin-bottom:18px;

  background:
    linear-gradient(
      90deg,
      var(--qq-red),
      #ef343c,
      var(--qq-gold)
    );

  border-radius:999px;

  box-shadow:none;
}

.product__title::after{
  content:none !important;
  display:none !important;
}


/* ==========================================================
   SKU / META
   ========================================================== */

.product__sku,
.product__sku *,
.caption,
.caption-large,
.product .caption{
  color:#6e6e74 !important;

  opacity:1 !important;
}

.product__sku{
  margin-top:8px !important;

  font-size:1.25rem !important;
}


/* ==========================================================
   PRICE
   ========================================================== */

.price,
.price *,
.price-item,
.price-item--regular,
.price-item--sale,
.price__regular,
.price__sale,
.product__info-container .price{
  color:#18181c !important;

  opacity:1 !important;
}

.price-item--regular{
  font-weight:800 !important;
}

.price__sale .price-item--regular{
  color:#99999f !important;
}


/* ==========================================================
   TAX / SHIPPING
   ========================================================== */

.product__tax,
.product__tax *,
.product__tax.caption{
  color:#7f7f85 !important;

  opacity:1 !important;
}

.product__tax a{
  color:var(--qq-red) !important;

  font-weight:600;

  text-decoration:none;
}

.product__tax a:hover{
  text-decoration:underline;
}


/* ==========================================================
   DESCRIPTION / ARTICLE
   ========================================================== */

.product__description,
.product__description *,
.rte,
.rte p,
.rte li,
.rte span,
.rte div{
  color:#505057 !important;

  opacity:1 !important;

  line-height:1.8 !important;
}

.rte p{
  margin-bottom:1.4em;
}

.rte h1,
.rte h2,
.rte h3,
.rte h4,
.rte h5,
.rte h6{
  color:#1c1c20 !important;

  opacity:1 !important;

  font-weight:750 !important;

  line-height:1.35 !important;
}

.rte h2{
  padding-left:14px;

  border-left:
    4px solid var(--qq-red);
}

.rte strong{
  color:#202024 !important;

  font-weight:700 !important;
}

.rte a{
  color:#c9141c !important;

  font-weight:600;

  text-decoration:none;
}

.rte a:hover{
  color:#e7252d !important;

  text-decoration:underline;
}


/* ==========================================================
   FORMS
   ========================================================== */

.product__info-container label,
.product__info-container legend,
.product-form__input label,
.form__label,
.quantity__label{
  color:#303035 !important;

  opacity:1 !important;

  font-weight:600;
}

.quantity,
.quantity__input,
.select,
.select__select,
.field,
.field__input{
  color:#252529 !important;
}

.quantity,
.quantity__input,
.select__select,
.field__input{
  background:#f5f5f6 !important;

  border:
    1px solid rgba(0,0,0,.10) !important;

  border-radius:10px !important;
}


/* ==========================================================
   BUTTON
   ========================================================== */

.button,
button.button,
.product-form__submit{
  min-height:50px;

  border-radius:12px !important;

  font-weight:700 !important;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    filter .2s ease !important;
}

.product-form__submit,
.button--primary{
  color:#fff !important;

  background:
    linear-gradient(
      135deg,
      #b70e16,
      #e5262f
    ) !important;

  border:none !important;

  box-shadow:
    0 8px 22px
    rgba(215,25,32,.22) !important;
}

.product-form__submit *,
.button--primary *{
  color:#fff !important;
}

.product-form__submit:hover,
.button--primary:hover{
  transform:
    translateY(-2px);

  filter:brightness(1.04);

  box-shadow:
    0 13px 28px
    rgba(215,25,32,.29) !important;
}


/* ==========================================================
   SECONDARY BUTTON
   ========================================================== */

.button--secondary{
  color:#252529 !important;

  background:#fff !important;

  border:
    1px solid rgba(0,0,0,.12) !important;
}

.button--secondary:hover{
  color:var(--qq-red) !important;

  border-color:
    rgba(215,25,32,.25) !important;
}


/* ==========================================================
   ACCORDION
   ========================================================== */

.accordion,
.product__accordion{
  border-color:
    rgba(0,0,0,.09) !important;
}

.accordion summary,
.accordion summary *,
.accordion__title{
  color:#242428 !important;

  opacity:1 !important;

  font-weight:650;
}

.accordion__content,
.accordion__content *{
  color:#5d5d63 !important;

  opacity:1 !important;

  line-height:1.75;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.footer{
  position:relative;

  z-index:30;

  background:
    linear-gradient(
      180deg,
      #19182d,
      #11111d
    ) !important;

  border-top:
    1px solid rgba(255,255,255,.07) !important;
}

.footer,
.footer p,
.footer li,
.footer span,
.footer__copyright{
  color:#bebfc6 !important;

  opacity:1 !important;
}

.footer a{
  color:#dedee3 !important;

  text-decoration:none;
}

.footer a:hover{
  color:#ff686e !important;
}

.footer h2,
.footer h3,
.footer h4,
.footer .footer-block__heading{
  color:#fff !important;
}


/* ==========================================================
   FALLING LEAVES
   ========================================================== */

.leaf-fall{
  position:fixed;

  inset:0;

  width:100%;
  height:100%;

  overflow:hidden;

  pointer-events:none;

  z-index:20;
}

.leaf-fall span{
  position:absolute;

  top:-60px;

  display:block;

  width:13px;
  height:8px;

  background:
    linear-gradient(
      135deg,
      #b88a43,
      #8f672f
    );

  border-radius:
    90% 10% 90% 10%;

  opacity:.28;

  box-shadow:
    0 2px 4px
    rgba(70,50,20,.10);

  animation:
    qqLeafFall linear infinite;

  will-change:transform;
}


/* ===== LEAF COLOR VARIATIONS ===== */

.leaf-fall span:nth-child(3n){
  width:10px;
  height:7px;

  background:
    linear-gradient(
      135deg,
      #8f994c,
      #68742f
    );

  opacity:.24;
}

.leaf-fall span:nth-child(4n){
  width:15px;
  height:9px;

  background:
    linear-gradient(
      135deg,
      #c4934c,
      #9c6432
    );

  opacity:.22;
}

.leaf-fall span:nth-child(5n){
  width:9px;
  height:6px;

  background:
    linear-gradient(
      135deg,
      #a66a42,
      #7e4730
    );

  opacity:.22;
}


/* ==========================================================
   LEAF POSITIONS
   ========================================================== */

.leaf-fall span:nth-child(1){
  left:4%;
  animation-duration:14s;
  animation-delay:-4s;
}

.leaf-fall span:nth-child(2){
  left:12%;
  animation-duration:18s;
  animation-delay:-11s;
}

.leaf-fall span:nth-child(3){
  left:20%;
  animation-duration:15s;
  animation-delay:-8s;
}

.leaf-fall span:nth-child(4){
  left:28%;
  animation-duration:19s;
  animation-delay:-14s;
}

.leaf-fall span:nth-child(5){
  left:37%;
  animation-duration:16s;
  animation-delay:-5s;
}

.leaf-fall span:nth-child(6){
  left:46%;
  animation-duration:20s;
  animation-delay:-15s;
}

.leaf-fall span:nth-child(7){
  left:55%;
  animation-duration:14.5s;
  animation-delay:-9s;
}

.leaf-fall span:nth-child(8){
  left:64%;
  animation-duration:18.5s;
  animation-delay:-13s;
}

.leaf-fall span:nth-child(9){
  left:73%;
  animation-duration:16.5s;
  animation-delay:-6s;
}

.leaf-fall span:nth-child(10){
  left:82%;
  animation-duration:21s;
  animation-delay:-17s;
}

.leaf-fall span:nth-child(11){
  left:90%;
  animation-duration:15.5s;
  animation-delay:-10s;
}

.leaf-fall span:nth-child(12){
  left:96%;
  animation-duration:19.5s;
  animation-delay:-7s;
}

.leaf-fall span:nth-child(13){
  left:16%;
  animation-duration:22s;
  animation-delay:-16s;
}

.leaf-fall span:nth-child(14){
  left:43%;
  animation-duration:17.5s;
  animation-delay:-12s;
}

.leaf-fall span:nth-child(15){
  left:68%;
  animation-duration:20.5s;
  animation-delay:-18s;
}

.leaf-fall span:nth-child(16){
  left:87%;
  animation-duration:18s;
  animation-delay:-3s;
}


/* ==========================================================
   LEAF ANIMATION
   ========================================================== */

@keyframes qqLeafFall{

  0%{
    transform:
      translate3d(0,-60px,0)
      rotate(0deg);

    opacity:0;
  }

  8%{
    opacity:.25;
  }

  25%{
    transform:
      translate3d(25px,25vh,0)
      rotate(95deg);
  }

  50%{
    transform:
      translate3d(-18px,52vh,0)
      rotate(190deg);
  }

  75%{
    transform:
      translate3d(30px,78vh,0)
      rotate(290deg);
  }

  95%{
    opacity:.22;
  }

  100%{
    transform:
      translate3d(-10px,108vh,0)
      rotate(390deg);

    opacity:0;
  }
}


/* ==========================================================
   SCROLLBAR
   ========================================================== */

::-webkit-scrollbar{
  width:9px;
}

::-webkit-scrollbar-track{
  background:#dfdfe1;
}

::-webkit-scrollbar-thumb{
  background:#a9a9ae;

  border:
    2px solid #dfdfe1;

  border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
  background:#8f8f95;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:749px){

  body{
    background:
      linear-gradient(
        180deg,
        #eeeeef,
        #e2e2e4
      ) !important;
  }

  .product{
    padding-top:20px;
    padding-bottom:35px;
  }

  .product__info-container{
    padding:
      18px 4px !important;
  }

  .product__title h1{
    font-size:
      2.45rem !important;

    line-height:
      1.23 !important;
  }

  .product__title::before{
    width:55px;

    margin-bottom:13px;
  }

  .product__media,
  .product__media img{
    border-radius:
      14px !important;
  }

  .button,
  .product-form__submit{
    width:100%;
  }

  /* daun lebih tipis di HP */

  .leaf-fall span{
    opacity:.14;
  }

  .menu-drawer{
    background:#fff !important;
  }

  .menu-drawer__menu-item,
  .menu-drawer a{
    color:#29292d !important;
  }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  .leaf-fall{
    display:none;
  }
}