/* =========================================================
   Source block 01: SUBURTOTO-elegant-background
   ========================================================= */
:root {
    --SUBURTOTO-bg: #070707;
    --SUBURTOTO-bg-soft: #101010;
    --SUBURTOTO-panel: rgba(255, 255, 255, 0.96);
    --SUBURTOTO-gold: #d4af37;
    --SUBURTOTO-gold-soft: #f2d77a;
    --SUBURTOTO-silver: #c8c8c8;
    --SUBURTOTO-ink: #151515;
  }

  html,
  body {
    background:
      radial-gradient(circle at 12% 0%, rgba(212, 175, 55, 0.18), transparent 28%),
      radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.10), transparent 24%),
      radial-gradient(circle at 50% 100%, rgba(212, 175, 55, 0.13), transparent 30%),
      linear-gradient(135deg, #050505 0%, #111111 44%, #060606 100%) !important;
    color: #f5f5f5;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(120deg, transparent 0%, rgba(212, 175, 55, 0.06) 42%, transparent 72%),
      repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 14px);
  }

  .header-wrapper,
  #shopify-section-new-header,
  header,
  .nav-header {
    background:
      linear-gradient(180deg, rgba(16, 16, 16, 0.98), rgba(5, 5, 5, 0.97)) !important;
    color: #f5f5f5 !important;
  }

  .header-wrapper {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    border-bottom: 1px solid rgba(212, 175, 55, 0.34);
  }

  .header-container {
    min-height: 82px;
  }

  .site-logo-link img {
    filter: drop-shadow(0 0 14px rgba(212, 175, 55, 0.45));
  }

  .header-icons svg path,
  #menu-hamburger svg path,
  #search-trigger svg path {
    fill: var(--SUBURTOTO-gold-soft) !important;
    stroke: var(--SUBURTOTO-gold-soft) !important;
  }

  .cart-count {
    background: var(--SUBURTOTO-gold) !important;
    color: #111111 !important;
    border: 1px solid rgba(255, 255, 255, 0.45);
  }

  .nav-header {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(212, 175, 55, 0.28);
  }

  .nav-header a,
  .nav-header span,
  .nav-account-mobile,
  .login-register a {
    color: #f6e3a0 !important;
  }

  .nav-menu > li > a {
    transition: color 0.25s ease, text-shadow 0.25s ease;
  }

  .nav-menu > li > a:hover,
  .nav-menu > li > a:hover span {
    color: #ffffff !important;
    text-shadow: 0 0 14px rgba(212, 175, 55, 0.55);
  }

  #PageContainer,
  .main-content,
  .product-layout-section {
    background: transparent !important;
  }

  .product-layout > .container {
    background: var(--SUBURTOTO-panel);
    color: var(--SUBURTOTO-ink);
    border: 1px solid rgba(212, 175, 55, 0.24);
    border-radius: 22px;
    box-shadow:
      0 22px 50px rgba(0, 0, 0, 0.38),
      0 0 24px rgba(212, 175, 55, 0.16);
    padding-top: 24px;
    padding-bottom: 24px;
    margin-top: 34px;
    margin-bottom: 34px;
  }

  #breadcrumbProduct,
  #breadcrumbProduct .container {
    color: #f5f5f5 !important;
  }

  #breadcrumbProduct a,
  #breadcrumbProduct li {
    color: #f5df99 !important;
  }

  .product-meta,
  .product-description,
  .bg-card,
  .product-buy-buttons,
  .c-pdp-product-info {
    background-color: rgba(255, 255, 255, 0.92) !important;
    color: #181818 !important;
  }

  #btnPurchase,
  .btn.text-uppercase.w-100 {
    background:
      linear-gradient(135deg, #0a0a0a 0%, #252525 48%, #d4af37 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(212, 175, 55, 0.65) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
  }

  #btnPurchase:hover,
  .btn.text-uppercase.w-100:hover {
    filter: brightness(1.08);
  }

  .site-footer {
    background:
      radial-gradient(circle at 10% 0%, rgba(212, 175, 55, 0.16), transparent 30%),
      linear-gradient(180deg, #101010 0%, #050505 100%) !important;
    color: #f5f5f5 !important;
    border-top: 1px solid rgba(212, 175, 55, 0.35);
  }

  .site-footer__section-title,
  .site-footer__list-item a,
  .site-footer a,
  .site-footer p,
  .copyright *,
  .social-icons li a {
    color: #f0dfaa !important;
  }

  .bc-border {
    border-top-color: rgba(212, 175, 55, 0.28) !important;
    border-bottom-color: rgba(212, 175, 55, 0.28) !important;
  }

  .product-layout > .container {
    background:
      radial-gradient(circle at 10% 0%, rgba(212, 175, 55, 0.20), transparent 30%),
      radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0.08), transparent 26%),
      linear-gradient(135deg, rgba(10, 10, 10, 0.98) 0%, rgba(27, 24, 15, 0.98) 50%, rgba(7, 7, 7, 0.98) 100%) !important;
    color: #f7f0d2 !important;
    border: 1px solid rgba(212, 175, 55, 0.48) !important;
    box-shadow:
      0 24px 60px rgba(0, 0, 0, 0.55),
      0 0 34px rgba(212, 175, 55, 0.20),
      inset 0 0 32px rgba(255, 255, 255, 0.05) !important;
  }

  #product-image,
  .product-image,
  #product-meta,
  .product-meta,
  .product-buy-buttons,
  .product-description,
  .bg-card,
  .c-pdp-product-info {
    background: transparent !important;
    color: #f7f0d2 !important;
  }

  .product-single__photos,
  #ProductPhoto,
  .gallery-top,
  .gallery-mobile {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(241, 236, 218, 0.96)) !important;
    border: 1px solid rgba(212, 175, 55, 0.34);
    box-shadow:
      0 16px 36px rgba(0, 0, 0, 0.28),
      inset 0 0 18px rgba(212, 175, 55, 0.08);
  }

  .gallery-thumbs,
  #ProductThumbs,
  #ProductThumbs li {
    background: rgba(255, 255, 255, 0.72) !important;
    border-radius: 10px;
  }

  .product-meta {
    padding: 26px 26px 24px !important;
    border-radius: 18px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(212, 175, 55, 0.08)) !important;
    box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.04);
  }

  .product-meta h1,
  .product-meta h2,
  .product-meta h3,
  .product-meta h4,
  .product-meta label,
  .product-meta li,
  .product-meta p,
  .product-meta span,
  .product-description,
  .short-desc,
  .short-desc li {
    color: #f7f0d2 !important;
  }

  .product-meta h1,
  .product-meta [itemprop="name"] {
    color: #ffe58f !important;
    text-shadow: 0 0 14px rgba(212, 175, 55, 0.28);
  }

  #ProductPrice,
  .ProductPrice {
    color: #ffffff !important;
  }

  .product-meta s,
  .product-meta del,
  .product-meta .compare-price {
    color: rgba(247, 240, 210, 0.62) !important;
  }

  #cities,
  .form-control,
  .variant-metafield,
  input,
  select,
  textarea {
    background-color: rgba(255, 255, 255, 0.94) !important;
    color: #151515 !important;
    border-color: rgba(212, 175, 55, 0.55) !important;
  }

  .delivery-city h4,
  #row-delivery-date h4,
  #row-delivery-time h4 {
    color: #ffe58f !important;
  }

  .button-share-wishlist,
  .button-share-wishlist span,
  .button-share-wishlist p,
  .button-share-wishlist button {
    color: #f7f0d2 !important;
  }

  .button-share-wishlist svg path {
    fill: #f2d77a !important;
    stroke: #f2d77a !important;
  }

  #ProductPhotoImg {
    background: #ffffff !important;
  }

  @media (max-width: 768px) {
    .product-layout > .container {
      width: calc(100% - 22px);
      border-radius: 18px;
      padding-top: 16px;
      padding-bottom: 16px;
      margin-top: 22px;
    }

    .header-container {
      min-height: 72px;
    }
  }


/* =========================================================
   Source block 02: SUBURTOTO-color-only-update
   ========================================================= */
:root {
  --sj-burgundy: #70223b;
  --sj-burgundy-dark: #3d101f;
  --sj-rose: #c84c6b;
  --sj-gold: #d3a64f;
  --sj-champagne: #f1dbae;
  --sj-ivory: #fff9ef;
  --sj-cream: #f6eadf;
  --sj-text: #3d2931;
}

/* Latar belakang utama */
html,
body {
  background:
    radial-gradient(circle at 8% 5%, rgba(200, 76, 107, 0.18), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(211, 166, 79, 0.24), transparent 30%),
    linear-gradient(145deg, #fffaf2 0%, #f6eadf 48%, #ead8ca 100%) !important;
  color: var(--sj-text) !important;
}

body::before {
  background:
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.46) 45%, transparent 74%),
    repeating-linear-gradient(135deg, rgba(112, 34, 59, 0.025) 0 1px, transparent 1px 16px) !important;
}

/* Header */
.header-wrapper,
#shopify-section-new-header,
header {
  background:
    radial-gradient(circle at 50% -45%, rgba(255, 224, 164, 0.23), transparent 52%),
    linear-gradient(135deg, #3c101f 0%, #762740 54%, #491322 100%) !important;
  color: #fff8e9 !important;
}

.header-wrapper {
  border-bottom: 1px solid rgba(241, 219, 174, 0.68) !important;
  box-shadow: 0 13px 34px rgba(61, 16, 31, 0.28) !important;
}

.site-logo-link img {
  filter:
    drop-shadow(0 0 9px rgba(255, 227, 169, 0.44))
    drop-shadow(0 5px 11px rgba(0, 0, 0, 0.26)) !important;
}

.header-icons svg path,
#menu-hamburger svg path,
#search-trigger svg path {
  fill: #ffe3ac !important;
  stroke: #ffe3ac !important;
}

.cart-count {
  background: linear-gradient(135deg, #ffe8b7, #d3a64f) !important;
  color: #491322 !important;
}

/* Menu tetap lengkap, hanya warnanya diperbarui */
.nav-header {
  background: rgba(255, 249, 239, 0.96) !important;
  color: var(--sj-burgundy) !important;
  border-top: 1px solid rgba(211, 166, 79, 0.26) !important;
  border-bottom: 1px solid rgba(112, 34, 59, 0.18) !important;
  box-shadow: 0 8px 24px rgba(61, 16, 31, 0.09);
  backdrop-filter: blur(12px);
}

.nav-header a,
.nav-header span,
.nav-account-mobile,
.login-register a {
  color: var(--sj-burgundy) !important;
}

.nav-menu > li > a {
  border-radius: 999px;
  transition:
    background 0.22s ease,
    color 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease !important;
}

.nav-menu > li > a:hover {
  background: rgba(112, 34, 59, 0.08) !important;
  transform: translateY(-2px);
  box-shadow: 0 7px 17px rgba(112, 34, 59, 0.10);
}

.nav-menu > li > a:hover span {
  color: #912c4b !important;
  text-shadow: none !important;
}

/* Area utama */
#PageContainer,
.main-content,
.product-layout-section {
  background: transparent !important;
}

.product-layout > .container {
  background:
    radial-gradient(circle at 4% 0%, rgba(211, 166, 79, 0.22), transparent 29%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(255, 247, 237, 0.96)) !important;
  color: var(--sj-text) !important;
  border-color: rgba(211, 166, 79, 0.40) !important;
  box-shadow:
    0 23px 56px rgba(61, 16, 31, 0.14),
    0 0 0 6px rgba(255, 255, 255, 0.30) !important;
}

#product-image,
.product-image,
#product-meta,
.product-meta,
.product-buy-buttons,
.product-description,
.bg-card,
.c-pdp-product-info {
  color: var(--sj-text) !important;
}

.product-meta {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 232, 214, 0.92)) !important;
  color: var(--sj-text) !important;
  border-color: rgba(211, 166, 79, 0.35) !important;
  box-shadow:
    0 15px 34px rgba(61, 16, 31, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

.product-meta h1,
.product-meta [itemprop="name"] {
  color: var(--sj-burgundy) !important;
  text-shadow: none !important;
}

.product-meta h2,
.product-meta h3,
.product-meta h4,
.product-meta label,
.product-meta li,
.product-meta p,
.product-meta span,
.product-description,
.short-desc,
.short-desc li {
  color: #46313a !important;
}

#ProductPrice,
.ProductPrice,
.product-price {
  color: #962d4e !important;
}

.product-single__photos,
#ProductPhoto,
.gallery-top,
.gallery-mobile {
  background:
    radial-gradient(circle at 50% 0%, rgba(241, 219, 174, 0.32), transparent 40%),
    linear-gradient(145deg, #ffffff, #fff8ed) !important;
  border-color: rgba(211, 166, 79, 0.35) !important;
  box-shadow:
    0 17px 38px rgba(61, 16, 31, 0.12),
    inset 0 0 19px rgba(211, 166, 79, 0.10) !important;
}

#breadcrumbProduct,
#breadcrumbProduct .container,
#breadcrumbProduct a,
#breadcrumbProduct li {
  color: var(--sj-burgundy) !important;
}

.delivery-city h4,
#row-delivery-date h4,
#row-delivery-time h4 {
  color: var(--sj-burgundy) !important;
}

#cities,
.form-control,
.variant-metafield,
input,
select,
textarea {
  background-color: rgba(255, 255, 255, 0.97) !important;
  color: var(--sj-text) !important;
  border-color: rgba(112, 34, 59, 0.28) !important;
}

/* Artikel dan FAQ */
.article-pro,
.cok-faq-wrap {
  background:
    radial-gradient(circle at 5% 0%, rgba(241, 219, 174, 0.31), transparent 31%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(250, 237, 221, 0.96)) padding-box,
    linear-gradient(135deg, #e4c27e, #aa3657, #fff4d6) border-box !important;
  color: var(--sj-text) !important;
  box-shadow:
    0 19px 45px rgba(61, 16, 31, 0.12),
    0 0 23px rgba(211, 166, 79, 0.12) !important;
}

.article-pro h1,
.article-pro h2,
.article-pro h3,
.cok-faq-title {
  color: var(--sj-burgundy) !important;
  text-shadow: none !important;
}

.article-pro p,
.article-pro li,
.cok-faq-subtitle {
  color: #49363d !important;
}

.cok-faq-item {
  background: rgba(255, 255, 255, 0.74) !important;
  border-color: rgba(112, 34, 59, 0.13) !important;
}

.cok-faq-q {
  color: #592137 !important;
  background:
    linear-gradient(90deg, rgba(241, 219, 174, 0.42), transparent 42%),
    linear-gradient(135deg, #fffaf1 0%, #f6e5d2 72%, #efd39c 100%) !important;
}

.cok-faq-a {
  color: #49363d !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(245, 230, 212, 0.82)) !important;
}

/* Footer */
.site-footer {
  background:
    radial-gradient(circle at 10% 0%, rgba(241, 219, 174, 0.20), transparent 30%),
    linear-gradient(145deg, #481320 0%, #73263d 50%, #330d17 100%) !important;
  border-top-color: rgba(241, 219, 174, 0.55) !important;
}

.site-footer__section-title,
.site-footer__list-item a,
.site-footer a,
.site-footer p,
.copyright *,
.social-icons li a {
  color: #fff0d1 !important;
}


/* =========================================================
   Source block 03: SUBURTOTO-extra-buttons-style
   ========================================================= */
.sj-extra-access {
  width: 100%;
  padding: 14px 15px 4px;
  position: relative;
  z-index: 8;
}

.sj-extra-access-inner {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 11px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  border: 1px solid rgba(211, 166, 79, 0.42);
  border-radius: 21px;
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.78), transparent 36%),
    linear-gradient(145deg, rgba(255, 250, 241, 0.97), rgba(244, 225, 205, 0.94));
  box-shadow:
    0 15px 32px rgba(61, 16, 31, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.sj-extra-btn {
  min-height: 61px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  text-decoration: none !important;
  transition:
    transform 0.22s ease,
    filter 0.22s ease,
    box-shadow 0.22s ease;
}

.sj-extra-btn:hover {
  transform: translateY(-3px);
  filter: brightness(1.04);
}

.sj-extra-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 18px;
}

.sj-extra-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  line-height: 1.12;
}

.sj-extra-copy strong {
  font-size: 15px;
  letter-spacing: 0.8px;
}

.sj-extra-copy small {
  margin-top: 4px;
  font-size: 10px;
  opacity: 0.83;
}

.sj-extra-arrow {
  font-size: 22px;
  font-weight: 700;
  transition: transform 0.22s ease;
}

.sj-extra-btn:hover .sj-extra-arrow {
  transform: translateX(4px);
}

.sj-extra-register {
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 207, 218, 0.26), transparent 38%),
    linear-gradient(135deg, #8f1d42 0%, #d64d6d 53%, #a32149 100%);
  box-shadow:
    0 12px 25px rgba(160, 30, 70, 0.31),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

.sj-extra-register .sj-extra-icon {
  color: #ffe9b9 !important;
  background: rgba(54, 5, 23, 0.24);
}

.sj-extra-register * {
  color: #ffffff !important;
}

.sj-extra-login {
  color: #52182d !important;
  border: 1px solid rgba(112, 34, 59, 0.22);
  background:
    radial-gradient(circle at 86% 0%, rgba(255, 255, 255, 0.90), transparent 38%),
    linear-gradient(135deg, #fff9ec 0%, #edd3a0 55%, #fff2d8 100%);
  box-shadow:
    0 12px 25px rgba(126, 81, 27, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.sj-extra-login .sj-extra-icon {
  color: #75223e !important;
  background: rgba(112, 34, 59, 0.09);
}

.sj-extra-login * {
  color: #52182d !important;
}

@media (max-width: 768px) {
  .sj-extra-access {
    padding: 9px 9px 2px;
  }

  .sj-extra-access-inner {
    padding: 7px;
    gap: 7px;
    border-radius: 18px;
  }

  .sj-extra-btn {
    min-height: 56px;
    padding: 8px 10px;
    border-radius: 14px;
  }

  .sj-extra-icon {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
    font-size: 15px;
  }

  .sj-extra-copy strong {
    font-size: 13px;
  }

  .sj-extra-copy small {
    font-size: 9px;
  }

  .sj-extra-arrow {
    display: none;
  }
}

@media (max-width: 410px) {
  .sj-extra-icon {
    display: none;
  }

  .sj-extra-btn {
    justify-content: center;
    text-align: center;
  }

  .sj-extra-copy {
    flex: 0 1 auto;
  }
}


/* =========================================================
   Source block 04: inline-style-04
   ========================================================= */
#search-trigger {
    cursor: pointer;
  }
  #search-popup {
    display: none;
    position: fixed;
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
    justify-content: center;
    z-index: 9999;
    background: rgb(196 196 196 / 30%);
  }
  #search-input {
    align-self: center;
    width: 100%;
    height: 80px;
    position: absolute;
    top: 0;
    border-bottom: 0.5px solid #A3A3A3;
    background-color: #fff;
  }
  #search-input * {
    align-self: center;
  }
  #search-type {
    width: 100%;
    border: none;
    padding-right: 20px;
    padding-left: 20px;
    font-size: 16px;
    color: #757575;
  }
  #search-btn {
    font-size: 16px;
    font-weight: 500;
  }
  #search-result {
    background-color: #fff;
    min-height: 490px;
    width: 100%;
    padding-top: 80px;
  }
  #search-result .container {
    padding: 20px 40px;
  }
  body.search-popup-open {
  /* .search-popup-open */
    overflow: hidden;
  }
  .search-popup-open #loc_delivery {
    display: none
  }
  .search-header svg {
    display: none;
    cursor: pointer;
  }
  .wrapper-search-popup {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    overflow-x: hidden;
  }

  .group-recommend {
    padding: 20px 40px;
  }

  .resultsearch {
    display: none;
  }
  .results { padding: 20px 40px }
  .resultsearch label {
    font-weight: 600;
    padding-bottom: 20px;
    display: block;
    margin-bottom: 20px;
    border-bottom: 1px solid #AAAAAA;
  }

  ul.result_collection {
    overflow: auto;
  }

  .skeleton-loader {
    padding: 10px 0;
  }

  .skeleton-item {
    height: 20px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    margin-bottom: 12px;
    border-radius: 4px;
  }

  .skeleton-product-card {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
  }

  .skeleton-product-image {
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 10px;
  }

  .skeleton-product-title {
    height: 16px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 8px;
  }

  .skeleton-product-price {
    height: 14px;
    width: 60%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 4px;
  }

  @keyframes loading {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  ul.result_product {
    max-height: 400px;
    overflow: auto;
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  ul.result_product li.item {
    margin-bottom: 0;
  }

  ul.result_product .item_url {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  ul.result_product .product-card-search {
    display: flex;
    flex-direction: row;
    height: 100%;
    text-transform: uppercase;
    text-align: left;
    gap: 12px;
  }

  ul.result_product .product-image-search {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    object-fit: cover;
  }

  ul.result_product .product-info-search {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
  }

  ul.result_product .product-title-search {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  ul.result_product .product-price-search {
    font-size: 13px;
    color: #666;
    font-weight: 500;
  }

  .group-promotion ul {
    margin: 0;
  }
  .group-promotion li {
    list-style: none;
    margin-bottom: 12px;
  }
  .group-promotion li a {
    color: inherit;
  }

  .group-recent {
    position: relative;
    padding: 20px 40px;
  }
  .group-recent ul {
    margin: 0;
  }
  .group-recent li {
    list-style: none;
    display: inline-block;
    margin-right: 60px;
  }
  .group-recent li a {
    color: inherit;
  }

  .last-search svg {
    width: 20px;
    vertical-align: middle;
  }
  ul.last-search a {
    vertical-align: middle;
    padding: 0 10px;
  }
  ul.last-search li span {
    cursor: pointer;
  }
  .delete-all-history {
    position: absolute;
    top: 25px;
    right: 40px;
    text-decoration: underline;
    color: #e11d1d;
    cursor: pointer;
    font-size: 12px;
  }

  form.search.search-modal__form {
    position: relative;
  }

  button.search__button svg {
    width: 25px;
    color: #495057;
    fill: #757582;
  }

  button.search__button.field__button {
    position: absolute;
    top: 50%;
    margin-top: -12px;
  }

  .close-search {
    display: none;
    position: absolute;
    right: 65px;
    top: 10px;
    cursor: pointer;
  }

  .site-overlay {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    background: #0000005c;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: all .3s linear;
    display: block !important;
  }

  .search-popup-open .site-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    z-index: -1;
    cursor: pointer;
  }

  @media (min-width: 991px) {
    .group-recent ul {
      column-count: 3;
    }
    .group-promotion li a {
      font-size: 12px;
      font-weight: 400;
    }
    .group-recent li a {
      font-size: 12px;
      font-weight: 400;
    }
    ul.result_product {
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
  }

  .moreresult {
    padding: 10px 40px;
    border-top: 1px solid #AAAAAA;
  }
  .moreresult * {
    align-self: center;
  }
  .moreresult p {
    margin: 0;
    font-size: 12px !important;
  }
  .moreresult svg {
    width: 13px;
  }

  @media (max-width: 992px) {
    .icon-key-mobile {
        height: auto!important;
        width: 10px!important;
    }
    body.grid-view.search-popup-open .products {
      -ms-flex: 0 0 100%!important;
      flex: 0 0 100%!important;
      max-width: 100%!important;
    }
    button.search__button svg {
      width: 20px;
    }
    #search-result {
      padding-left: 0;
      padding-right: 0;
    }
    #search-result {
      padding-top: 55px;
    }
    #search-input {
      height: 55px;
    }
    .group-recommend {
      padding: 20px;
    }
    
    #search-type, #search-btn {
      font-size: 12px;
    }
    #search-input {
        height: 40px;
    }
    #search-result {
      padding-top: 40px;
    }
    .close-search {
      right: 50px;
      top: 6px;
    }
    #search-input svg {
      width: 15px;
    }
    .result_product li a {
      font-size: 12px;
    }
    ul.result_product li img {
      width: 110px !important;
    }
    .resultsearch label {
      font-size: 14px;
      margin-bottom: 15px;
      padding-bottom: 15px;
    }
    #search-input .container {
      padding: 0 20px;
    }
    #search-type {
      font-size: 14px;
    }
    #search-btn {
      font-size: 12px;
      text-decoration: underline;
    }
    .results {
      padding: 15px;
    }
    .group-recommend h3 {
      font-size: 16px;
    }
    .products .card-body {
      padding: 8px 0px 10px;
    }
    .moreresult {
      padding: 10px 20px;
    }    
    ul.result_product {
      grid-template-columns: repeat(1, 1fr);
      gap: 10px;
    }
    ul.result_product .product-image-search {
      width: 80px;
      height: 80px;
    }
    ul.result_product .product-card-search {
      gap: 10px;
    }
    ul.result_product .product-title-search {
      font-size: 12px;
      margin-bottom: 6px;
    }
    ul.result_product .product-price-search {
      font-size: 11px;
    }  
    .group-promotion li a {
      font-size: 14px;
    }
    ul.result_collection {
      max-height: 200px;
    }
  }


/* =========================================================
   Source block 05: inline-style-05
   ========================================================= */
#breadcrumbProduct {
    padding: 20px 0;
  }
  #breadcrumbProduct ul {
      display: flex;
      padding: 0;
      list-style: none;
      margin: 0;
      gap: 12px;
  }
  #breadcrumbProduct ul li {
    text-transform: uppercase;
    margin: 0;
    font-size: 12px;
}
  #breadcrumbProduct ul li a {
    color: #757575;
  }

  #breadcrumbProduct ul li svg {
    width: 10px;
    height: 10px;
    padding: 0;
    color: #757575;
    vertical-align: middle;
  }


/* =========================================================
   Source block 06: inline-style-06
   ========================================================= */
.stamped-review-header-title,
    .stamped-review-header .author,
    .stamped-review-content-body,
    .stamped-sort-select,
    .stamped-review-header .verified-badge[data-type=buyer]:after,
    .stamped-review-header-byline,
    .stamped-review-reply-body {font-size: 14px!important;font-family: 'Barlow',sans-serif!important;}
    .stamped-review {margin-bottom: 0;}
    .stamped-review-body {padding-left: 65px;}
    .stamped-review:first-child {padding-top: 25px;}
    .stamped-review-content {clear: none;}
    .stamped-review-reply {margin: 15px 0 0 65px;background: #f2f2f2;border-left: none;}
    .stamped-review-reply-body {padding-left: 65px;}
    .stamped-review-header .author {text-transform: capitalize;}
    .stamped-questions .stamped-review-content {padding-left: 65px;}

    .stamped-pagination {margin: 20px 0 0;}
    .stamped-pagination li {position: initial!important;display: inline-block;position: relative;vertical-align: middle;text-decoration: none;-webkit-tap-highlight-color: transparent;-webkit-box-flex: 0;-moz-box-flex: 0;-ms-flex: 0 0 auto;flex: 0 0 auto;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background: 0 0;text-transform: none;color: #33373D;font-weight: 400;-webkit-transition: background .1s ease,box-shadow .1s ease,color .1s ease;transition: background .1s ease,box-shadow .1s ease,color .1s ease;border: 1px solid #ccc;border-right: none;margin-bottom: 0;}
    .stamped-pagination li a {color: #121212;padding: 13px 18px;vertical-align: middle;display: block;}
    .stamped-pagination li.active a {background-color: #ddd;font-weight: 400;}
    .stamped-pagination li:hover a {background: #ddd;}
    .stamped-pagination .next {border-right: 1px solid #ccc;}
    .stamped-pagination li:first-child {border-top-left-radius: 5px;border-bottom-left-radius: 5px;}
    .stamped-pagination li:last-child {border-top-right-radius: 5px;border-bottom-right-radius: 5px;}

    #stamped-pagination-question span.page {display: inline-block;border: 1px solid #ccc;width: 47px;}
    #stamped-pagination-question span {font-size: 14px;}
    #stamped-pagination-question .page.active {padding: 12px;font-weight: 400;background: #ddd;}
    #stamped-pagination-question a, #stamped-pagination-question .page.active {color: #121212;padding: 13px 18px;vertical-align: middle;display: inline-block;}
    .stamped-pagination-deco {color: #121212;padding: 13px 18px;width: 47px;vertical-align: middle;display: inline-block;border: 1px solid #ccc;padding: 12px;}
    .stamped-pagination-prev, .stamped-pagination-next {position: inherit;}
    .stamped-pagination-prev a, .stamped-pagination-next a {width: auto!important;border: 1px solid #ccc;}

    @media (max-width: 480px){
      .stamped-review-reply {margin-left: 0!important;}
      select.stamped-sort-select {font-size: 13px!important;}
    }

  #product-reviews .stamped-summary-ratings, #product-reviews .stamped-summary-actions, .stamped-content {
      display: block !important;
  }


/* =========================================================
   Source block 07: inline-style-07
   ========================================================= */
.view-video{display:block; margin:auto; padding:5px 10px;font-size:16px;font-weight:bold;border:2px solid #212121;background:#fff;}
      .view-video .icon-play{fill:#212121;vertical-align: middle;}
      .video-modal{display:none;position:fixed;background: rgba(0,0,0,.5); width:100%; height:100%; overflow:auto; z-index:1; top:0;left:0;}
      .close-video{position:absolute;right:9px; top:8%;z-index:2;padding:5px;}
      .close-video .icon{width:30px;height:30px;}
      /*responsive iframe */
      .video-container {position: relative;padding-bottom: 48.25%;padding-top: 35px;height: 0;box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3);}
      .video-container iframe {position: absolute;top:60%;left: 0;width: 100%;height: 100%;}

      .youtube {
        background-color: #000;
        margin-bottom: 30px;
        position: relative;
        padding-top: 56.25%;
        overflow: hidden;
        cursor: pointer;
        width: 100%;
      }
      .swiper-slide .youtube {
        max-width: 480px;
      }
      .youtube img {
        width: 100%;
        top: -16.82%;
        left: 0;
        opacity: 0.7;
      }
      .youtube .play-button {
        width: 90px;
        height: 60px;
        background-color: #333;
        box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
        z-index: 1;
        opacity: 0.8;
        border-radius: 6px;
      }
      .youtube .play-button:before {
        content: "";
        border-style: solid;
        border-width: 15px 0 15px 26.0px;
        border-color: transparent transparent transparent #fff;
      }
      .youtube img,
      .youtube .play-button {
        cursor: pointer;
      }
      .youtube img,
      .youtube iframe,
      .youtube .play-button,
      .youtube .play-button:before {
        position: absolute;
      }
      .youtube .play-button,
      .youtube .play-button:before {
        top: 50%;
        left: 50%;
        transform: translate3d( -50%, -50%, 0 );
      }
      .youtube iframe {
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
      }


/* =========================================================
   Source block 08: inline-style-08
   ========================================================= */
.short-desc ul li:nth-child(n + 4) {
        display: none;
    }
    .short-desc ul li.showList:nth-child(n + 4) {
        display: list-item;
    }
    label.more {
        display: none;
    }
    label.more.showMe {
        display: block;
        font-size: 12px;
        text-transform: uppercase;
        font-weight: 700;
        cursor: pointer;
    }


/* =========================================================
   Source block 09: inline-style-09
   ========================================================= */
.c-pdp-product-info__service--active {
    font-size: 12px;
    padding-left: 10px;
    text-align: left;
    max-width: 550px;
    margin: auto;
  }
  .c-pdp-product-info__service--active li {
    list-style: disc;
  }
  .c-pdp-product-info {
    background-color: #f5f5f5;
    padding: 12px;
    margin: 0;
  }
  .freeship em {
    font-style: italic;
    font-size: 12px !important;
  }


/* =========================================================
   Source block 10: inline-style-10
   ========================================================= */
.towel-bordir {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  /* iOS Mobile specific styles */
  @media screen and (max-width: 768px) {
    .ios .form-group-variant .variant-metafield {
      display: block !important;
      width: 100% !important;
      padding: 12px 16px !important;
      border: 1px solid #212121 !important;
      background: #fff !important;
      font-size: 16px !important; /* Prevents zoom on iOS */
      -webkit-appearance: none !important;
      -moz-appearance: none !important;
      appearance: none !important;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
      background-repeat: no-repeat !important;
      background-position: right 12px center !important;
      background-size: 16px !important;
      color: #333 !important;
      min-height: 44px !important; /* iOS minimum touch target */
    }

    .ios .form-group-variant .variant-metafield:focus {
      outline: none !important;
      border-color: #007AFF !important;
      box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1) !important;
    }

    .ios .form-group-variant .variant-metafield option {
      padding: 12px 16px !important;
      font-size: 16px !important;
      color: #333 !important;
      background: #fff !important;
    }

    .ios .form-group-variant .variant-metafield option:checked {
      background: #007AFF !important;
      color: #fff !important;
    }

    .ios .form-group-variant .variant-metafield option:disabled {
      color: #999 !important;
      background: #f5f5f5 !important;
    }/* Ensure label styling on iOS */
    .ios .form-group-variant label {
      font-size: 14px !important;
      font-weight: 600 !important;
      color: #333 !important;
      margin-bottom: 8px !important;
    }
  }

  /* Non-iOS mobile styles */
  @media screen and (max-width: 768px) {
    body:not(.ios) .form-group-variant .variant-metafield {
      display: block !important;
      width: 1px !important;
      padding: 0 !important;
      border-color: #fff !important;
    }
  }


/* =========================================================
   Source block 11: inline-style-11
   ========================================================= */
.file-dnd * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .file-dnd {
    width: 100%;
    height: 250px;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* box-shadow: 0px 2px 10px 2px rgba(0,0,0,0.05); */
    margin: auto;
  }
  .file-dnd input {
    display: none;
  }
  .file-dnd .before-upload {
    border: 1px dashed #888;
    flex: 1;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
  }
  .file-dnd .before-upload > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .file-dnd .before-upload > div h4 {
    width: 150px;
  }
  .file-dnd .before-upload > div p {
    font-size: 12px !important;
    color: #555;
  }
  .file-dnd.active .before-upload {
    border: 1px solid #5750d9;
    background-color: #f5f5ff;
  }
  .file-dnd .after-upload {
    position: relative;
    display: none;
  }
  .file-dnd .after-upload img {
    width: 100%;
    border-radius: 5px;
    max-height: 180px;
    object-fit: contain;
    display: block;
  }
  .file-dnd .after-upload .clear-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    width: 15px;
    height: 15px;
    text-align: center;
    line-height: 15px;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
  }


/* =========================================================
   Source block 12: inline-style-12
   ========================================================= */
/* Native select styling for #cities */
  #cities {
    width: 100%;
    padding: 10px 35px 10px 12px;
    font-size: 14px;
    border: 1px solid #ccc;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
  }

  #cities {
    /* Menghilangkan panah di Chrome, Safari, dan Firefox */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  
  /* Hide default arrow in IE */
  #cities:-ms-expand {
    display: none;
  }
  
  #cities:focus {
    border-color: #212121;
    outline: none;
    box-shadow: 0 0 0 2px rgba(33, 33, 33, 0.1);
  }
  
  #cities:hover {
    border-color: #999;
  }
  
  #cities option {
    padding: 10px;
  }


/* =========================================================
   Source block 13: inline-style-13
   ========================================================= */
#PBarNextFrameWrapper {
    display: none;
  }
  #backgroundPopup {
    display: none;
    position: fixed;
    _position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgb(117 117 117 / 24%);
    z-index: 1;
  }
  .sectionPurchase {
    height: 100%;
    position: relative;
    max-width: 1344px;
    background-color: #fff;
    padding: 0;
    overflow: hidden; /* Changed from auto to hidden */
    display: flex;
    flex-direction: column;
  }
  .sectionPurchase.purchaseAddonSpotify {
    max-width: 1070px!important;
    max-height: 765px!important;
  }
  .sectionPurchaseBoard {
    max-width: 872px!important;
    max-height: 821px!important;
  }
  .purchaseAddonSpotify .btn-action {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    gap: 10px;
  }
  .wrapperPurchase {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  /* New styles for scrollable content and sticky button */
  .purchase-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
  }
  
  .purchase-button-wrapper {
    position: sticky;
    bottom: 0;
    background-color: #fff;
    border-top: 1px solid #e0e0e0;
    padding: 15px 0;
    margin-top: auto;
    z-index: 10;
  }
  
  .purchasePopup {
    display: none;
    position: fixed;
    background: rgb(117 117 117 / 24%);
    z-index: 999;
    padding: 40px;
    font-size: 13px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .popupPurchaseClose{
    font-size:14px;
    line-height:14px;
    right:45px;
    top:45px;
    position:absolute;
    color:#6fa5fd;
    font-weight:700;
    display:block;
    cursor: pointer;
  }

  .headerPurchase {
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
  }

  .headerPurchase h3 {
    font-size: 16px;
    text-transform: uppercase;
  }

  .sectionPurchaseBoard .headerPurchase {
    margin-bottom: 15px;
  }

  .sectionPurchaseBoard .formAddressPurchase {
    padding-top: 0;
  }

  .purchaseArea {
    position: relative;
    height: 100%;
  }

  .purchaseArea h4 {
    width: 100%;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
  }

  .menuPurchase {
    margin-bottom: 30px;
  }

  .menuPurchase ul {
    list-style-type: none;
    margin: 0;
  }

  .menuPurchase ul li {
    display: inline-block;
    border: 1px solid #212121;
    padding: 5px 20px;
    margin-right: 5px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 400;
  }

  .menuPurchase ul li:hover, .menuPurchase ul li.selected {
    background-color: #212121;
    color: #ffffff;
  }

  .contentPurchase h5 {
      font-size: 12px;
      margin-bottom: 10px;
      font-weight: 400;
      overflow: hidden;
  }

  /* Card */

  #itemCards {
    max-height: 430px;
    overflow: auto;
  }

  .item-cards {
      width: 100%;
  }
  .item-card.selected {
      border: 1px solid #212121;
  }
  .item-card:hover {
      border: 1px solid #C4C4C4;
  }
  .item-cards .item-card {
    position: relative;
    width: calc(33% - 10px);
    max-width: calc(33% - 10px);
    flex: 0 0 calc(33% - 10px);
    margin-bottom: 20px;
  }
  .item-cards .item-card label,
  .item-addons .item-addon label {
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
  }
  .item-cards .item-card .card-image img,
  .item-addons .item-addon .card-image img {
      display: block;
      width: 100%;
  }
  .item-card .card-meta,
  .item-addon .card-meta {
      padding: 10px 5px 5px;
  }
  .item-card.selected .card-meta,
  .item-addon.selected .card-meta,
  .item-card.selected .card-qty {
      background-color: #212121;
      color: #fff;
      visibility: visible!important;
  }
  .item-card:hover .card-meta,
  .item-addon:hover .card-meta,
  .item-card:hover .card-qty {
      background-color: #C4C4C4;
      color: #fff;
      visibility: visible!important;
  }
  .item-cards .item-card p,
  .item-addons .item-addon p {
    font-size: 12px !important;
    margin: 0;
    font-weight: 600;
  }
  .item-card .card-meta input,
  .item-addon .card-meta input {
      display: none;
  }
  .item-cards .item-card h5,
  .item-addons .item-addon h5 {
    font-size: 14px;
  }

  @media (max-width: 768px) {
    .item-cards .item-card {
        width: calc(50% - 10px);
        max-width: calc(50% - 10px);
        flex: 0 0 calc(50% - 10px);
        margin-bottom: 0;
    }
  }

  .card-qty {
    display: flex;
    padding: 5px;
    visibility: hidden;
    background-color: #fff !important;
    z-index: 999;
  }
  .card-qty a {
    border-width: 1px;
    width: 30%;
    cursor: pointer;
    text-align: center;
    align-self: center;
    height: 28px;
    display: block;
    position: relative;
  }
  .card-qty a svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  input.btn-qty {
    border-width: 0px;
    border-radius: 0;
    background-color: #fff;
    -webkit-appearance: none;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none!important;
    width: 40%;
    border-left: 1px solid #c4c4c4;
    border-right: 1px solid #c4c4c4;
    padding: 0;
  }

  .sectionPurchaseBoard #itemAddons .item-card {
    width: calc(20% - 15px);
    max-width: calc(20% - 15px);
    flex: 0 0 calc(20% - 15px);
  }

  .purchase-button {
    width: 100%;
    padding: 0; /* Reset padding as it's now handled by wrapper */
    margin: 0;
  }

  .sectionPurchaseBoard .purchase-button {
    margin-top: 0 !important; /* Reset margin */
  }

  .back-purchase-button, .back-spotify {
      width: 139px;
      border: 1px solid;
      height: 43px;
  }
  .purchase-button .btn {
    width: 297px;
    height: 43px;
    background-color: #212121;
    color: #ffffff;
  }
  .purchase-button .btn[disabled] {
    background-color: #EEEEEE;
  }
  .back-purchase-button svg, .back-spotify svg {
    align-self: center;
    vertical-align: middle;
    margin-right: 10px;
  }

  #purchaseProduct .row .error {
    font-size: 12px !important;
    color: rgb(231, 76, 60);
    margin-top: 5px;
  }

  .reviewCardPurchase {
    max-width: 448px;
    float: right;
  }

  .addonsPurchase .addon-item {display: flex;justify-content: space-between;}
  .addon-item * {align-self: center;font-size: 12px;}
  .addon-itm-title {width: 360px;}
  .addon-itm-line-price {color: #757575;width: 80px;justify-content: space-between;display: flex;}

  .propsAddonSpotify p {
    margin: 0;
    display: flex;
    font-size: 12px !important;
    margin-bottom: 5px;
  }
  .propsAddonSpotify p span:first-child {
    text-transform: uppercase;
    font-weight: 600;
    -ms-flex: 0 0 150px;
    flex: 0 0 150px;
    max-width: 150px;
  }

  .addonsPurchase .addons {
    max-height: 250px;
    overflow: auto;
  }

  .btn .loading:after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    padding: 3px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #FFFFFF;
    --_m: conic-gradient(#0000 10%, #212121), linear-gradient(#212121 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: l3 1s infinite linear;
    margin: auto;
    vertical-align: middle;
    margin-left: 10px;
  }

  #qrcode img, #qrcode canvas {
    width: 50px;
    position: absolute;
    top: 12px;
    left: 16px;
  }

  .t-preview {
    position: absolute;
    top: 17px;
    left: 75px;
  }
  .t-preview p {
    margin: 0;
    font-size: 12px !important;
  }
  .t-preview .h3 {
    font-size: 16px !important;
    margin-bottom: 5px;
    font-weight: 600;
  }
  .scanCard {
    width: 100%;
    border: 1px solid;
    height: 76px;
    background-color: #fff;
  }
  .scanCard > div > img {
    position: absolute;
    right: 0;
    width: 55px;
  }

  @keyframes l3 {
    100% {
      transform: rotate(1turn);
    }
  }

  @media (min-width: 991px) {
    .sectionPurchase {
      height: 100%;
      position: relative;
      max-width: 1344px;
      background-color: #fff;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .headerPurchase h3 {
      font-size: 20px;
    }
    .purchaseArea h4 {
      font-size: 16px;
    }

    .menuPurchase ul li {
        font-size: 16px;
    }
    
    .contentPurchase {
      margin-bottom: 30px;
    }
    .contentPurchase h5 {
      font-size: 16px;
    }

    .item-cards .item-card p,
    .item-addons .item-addon p {
      font-size: 16px !important;
    }

    .cards {
      float: right;
      width: 400px;
    }

    .item-cards .item-card {
      width: calc(25% - 30px);
      max-width: calc(25% - 30px);
      flex: 0 0 calc(25% - 30px);
      margin-right: 30px;
    }

      #itemAddons .item-card {
        position: relative;
        width: calc(16% - 40px);
        max-width: calc(16% - 40px);
        flex: 0 0 calc(16% - 40px);
      }
      
    .purchase-button-wrapper {
        padding: 10px 20px;
    }
  }

  @media (max-width: 1200px) {
    .item-cards .item-card {
      width: calc(33% - 30px);
      max-width: calc(33% - 30px);
      flex: 0 0 calc(33% - 30px);
    }
  }

  @media (max-width: 992px) {
    .purchasePopup {
      padding: 0;
    }
    .item-cards .item-card h5,
    .item-addons .item-addon h5 {
      max-height: 30px;
    }

    .back-purchase-button, .back-spotify, .next-purchase-button {
        width: 100%;
    }
    .addon-itm-title {
      width: 300px;
    }
    .addon-itm-line-price {
      margin-right: 10px;
    }
    .t-preview {
      top: 10px;
    }

    .card-qty a {
      height: 15px;
    }
    
    .purchase-button-wrapper {
      padding: 15px;
    }
  }

  @media (max-width: 576px) {
    .purchase-button .btn {
        width: 100%!important;
    }
    .purchase-button > .col-12 {
      padding-left: 0;
      padding-right: 0;
    }
  }


/* =========================================================
   Source block 14: inline-style-14
   ========================================================= */
#greetingCard label {display: inline-block;color: #212121;margin-bottom: .5rem;font-size: 14px;font-weight: 400!Important;}
  
  
  /* Character counter positioning */
  .form-group.has-counter {
    position: relative;
  }
  
  .limit {
    position: absolute;
    top: 4px;
    right: -30px;
    font-size: 11px;
    color: #999;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 10;
    pointer-events: none;
  }
  
  .form-group.has-counter input,
  .form-group.has-counter textarea {
    padding-right: 0px;
  }
  
  /* Prefix selector styles */
  .prefix-selector-wrapper {
    margin: 5px 0;
  }
  
  .prefix-selector-wrapper label {
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
  }
  
  .prefix-selector {
    border: none;
    font-size: 12px;
    background: white;
    cursor: pointer;
    width: auto;
    max-width: 200px;
    padding: 5px;
    padding-right: 25px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"%3E%3Cpath fill="%23333" d="M6 9L1 4h10z"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 12px;
    vertical-align: middle;
  }
  
  .label-prefix {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
  }
  
  .label-prefix.hidden {
    display: none!important;
  }


/* =========================================================
   Source block 15: inline-style-15
   ========================================================= */
/* Quantity Selector in Cart Popup */
  .cart-popup-quantity .quantity-selector {
    display: inline-flex;
    align-items: center;
    border: 1px solid #D1D1D1;
    border-radius: 2px;
    overflow: hidden;
    background: white;
    max-width: 140px;
  }

  .cart-popup-quantity .quantity-selector button {
    width: 32px;
    height: 32px;
    border: none;
    background: white;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    color: #424242;
    transition: all 0.2s ease;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .cart-popup-quantity .quantity-selector button:hover {
    background: #F5F5F5;
    color: #212121;
  }

  .cart-popup-quantity .quantity-selector button:active {
    background: #E0E0E0;
  }

  .cart-popup-quantity .quantity-selector button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: white;
  }

  .cart-popup-quantity .quantity-selector input {
    width: 50px;
    height: 32px;
    border: none;
    border-left: 1px solid #D1D1D1;
    border-right: 1px solid #D1D1D1;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #212121;
    -moz-appearance: textfield;
    background: white;
    padding: 0;
  }

  .cart-popup-quantity .quantity-selector input::-webkit-outer-spin-button,
  .cart-popup-quantity .quantity-selector input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .cart-popup-quantity .quantity-selector input:focus {
    outline: none;
  }


/* =========================================================
   Source block 16: inline-style-16
   ========================================================= */
/* Image Editor Popup Styles */
  .image-editor-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
  }

  .image-editor-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(2px);
  }

  .image-editor-modal {
    position: relative;
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: min(900px, calc(100vw - 40px));
    max-height: min(700px, calc(100vh - 40px));
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    margin: auto;
    transform: translateZ(0);
  }

  .image-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
  }

  .image-editor-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
  }

  .close-editor {
    background: none;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
  }

  .close-editor:hover {
    background: #f3f4f6;
    color: #374151;
  }

  .image-editor-content {
    display: flex;
    flex: 1;
    min-height: 500px;
  }

  .image-editor-canvas {
    flex: 1;
    padding: 20px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
  }

  .image-editor-canvas img {
    max-width: 100%;
    max-height: 100%;
    display: block;
  }

  .image-editor-controls {
    width: 280px;
    padding: 20px;
    background: white;
    border-left: 1px solid #e5e7eb;
    overflow-y: auto;
  }

  .control-group {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f3f4f6;
  }

  .control-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }

  .control-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
  }

  .control-group select,
  .control-group input[type="range"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    background: white;
  }

  .control-group input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    padding: 0;
  }

  .control-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #3b82f6;
    border-radius: 50%;
    cursor: pointer;
  }

  .control-group button {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    margin-right: 8px;
    margin-bottom: 8px;
    transition: all 0.2s;
  }

  .control-group button:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
  }

  .control-group button:active {
    transform: translateY(1px);
  }

  #imageSizeInfo {
    font-size: 12px;
    color: #6b7280;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  #imageSizeInfo span {
    display: block;
    padding: 4px 8px;
    background: #f9fafb;
    border-radius: 4px;
    border: 1px solid #e5e7eb;
  }

  #originalSize {
    color: #374151;
  }

  #newSize {
    color: #059669;
    font-weight: 500;
  }

  .image-editor-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
  }

  .btn-cancel {
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-cancel:hover {
    background: #f9fafb;
    border-color: #9ca3af;
  }

  .btn-save {
    background: #3b82f6;
    border: 1px solid #3b82f6;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 14px;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-save:hover {
    background: #2563eb;
    border-color: #2563eb;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .image-editor-popup {
      padding: 10px;
    }
    
    .image-editor-modal {
      max-width: calc(100vw - 20px);
      max-height: calc(100vh - 20px);
      width: 100%;
      height: auto;
      min-height: 80vh;
    }

    .image-editor-content {
      flex-direction: column;
    }

    .image-editor-controls {
      width: 100%;
      border-left: none;
      border-top: 1px solid #e5e7eb;
      max-height: 200px;
    }

    .image-editor-canvas {
      min-height: 300px;
    }
  }

  /* Loading state for preview area */
  .steps-card-preview.loading-upload {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
  }

  .steps-card-preview.loading-upload::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    border-radius: inherit;
    z-index: 1;
  }

  .ajax-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: none;
  }

  /* Animation for popup */
  .image-editor-popup {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex !important;
  }

  .image-editor-popup.show {
    opacity: 1;
    visibility: visible;
  }

  .image-editor-modal {
    transform: translateY(-20px) scale(0.9);
    transition: transform 0.3s ease;
  }

  .image-editor-popup.show .image-editor-modal {
    transform: translateY(0) scale(1);
  }

  @keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
  }

  /* Skeleton Loader for Date Buttons */
  .skeleton-date-loader {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .skeleton-date-button {
    width: calc(14.285% - 7px);
    min-width: 40px;
    height: 40px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .skeleton-date-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
  }

  .skeleton-date-text {
    width: 30px;
    height: 10px;
    background: #e0e0e0;
    border-radius: 4px;
  }

  .skeleton-date-number {
    width: 20px;
    height: 14px;
    background: #d0d0d0;
    border-radius: 4px;
  }

  @keyframes skeleton-shimmer {
    0% {
      left: -100%;
    }
    100% {
      left: 100%;
    }
  }

  @media (max-width: 768px) {
    .skeleton-date-button {
      width: calc(16.666% - 7px);
      min-width: 40px;
      height: 40px;
    }
  }

  @media (max-width: 480px) {
    .skeleton-date-button {
      width: calc(20% - 7px);
      min-width: 40px;
      height: 40px;
    }
    
    .skeleton-date-text {
      width: 25px;
      height: 8px;
    }
    
    .skeleton-date-number {
      width: 18px;
      height: 12px;
    }
  }

  /* OCR Address Popup Styles */
  .ocr-address-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
  }

  .ocr-address-popup.show {
    display: flex;
  }

  .ocr-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    cursor: pointer;
  }

  .ocr-popup-content {
    position: relative;
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    max-height: 80vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .ocr-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
  }

  .ocr-popup-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
  }

  .close-ocr-popup {
    background: none;
    border: none;
    font-size: 28px;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
  }

  .close-ocr-popup:hover {
    color: #1f2937;
  }

  .ocr-popup-body {
    overflow-y: auto;
    padding: 20px;
    flex: 1;
  }

  .ocr-address-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .ocr-address-option {
    padding: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
  }

  .ocr-address-option:hover {
    border-color: #3b82f6;
    background: #f0f4ff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
  }

  .ocr-address-option.selected {
    border-color: #3b82f6;
    background: #eff6ff;
  }

  .address-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .address-text {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.4;
  }

  .address-details {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
  }

  body.ocr-popup-open {
    overflow: hidden;
  }

  @media (max-width: 768px) {
    .ocr-popup-content {
      max-width: calc(100vw - 40px);
      max-height: 85vh;
    }

    .ocr-popup-header h3 {
      font-size: 16px;
    }

    .address-text {
      font-size: 14px;
    }
  }


/* =========================================================
   Source block 17: inline-style-17
   ========================================================= */
.field-error .variant-metafield {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25) !important;
  }
  
  .field-error .form-control {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25) !important;
  }
  
  .field-error select {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25) !important;
  }
  
  .error-message {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #e74c3c;
  }
  
  #btnPurchase:disabled {
    opacity: 0.7;
    pointer-events: none;
  }

  /* Wishlist button styling */
  #wishButton {
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: opacity 0.2s ease;
  }

  #wishButton:hover {
    opacity: 0.8;
  }

  #wishButton:disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  .wishlist-icon-wrapper svg {
    flex-shrink: 0;
    width: 16px;
  }

  /* iOS specific error styling */
  @media screen and (max-width: 768px) {
    .ios .field-error .variant-metafield {
      border-color: #e74c3c !important;
      box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1) !important;
    }
  }

  /* Shipping Method Section Styling */
  .delivery-method-section h4 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 12px;
    color: #212121;
  }

  .delivery-method-buttons {
    display: flex;
    gap: 8px;
  }

  .delivery-method-btn {
    flex: 1;
    padding: 12px 24px;
    border: 1px solid #212121;
    font-weight: 400;
    text-transform: uppercase;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 14px;
    letter-spacing: 0.5px;
  }

  .delivery-method-btn:not(.active) {
    background-color: #ffffff;
    color: #212121;
    font-weight: 400;
  }

  .delivery-method-btn:not(.active):hover {
    opacity: 0.8;
  }

  .delivery-method-btn.active {
    background-color: #EEEEEE;
    color: #212121;
    font-weight: 700;
  }

  @media screen and (max-width: 576px) {
    .delivery-method-buttons {
      flex-direction: column;
    }
    
    .delivery-method-btn {
      width: 100%;
    }
  }


/* =========================================================
   Source block 18: SUBURTOTO-article-pro-style
   ========================================================= */
.article-pro {
  max-width: 1000px;
  width: calc(100% - 32px);
  margin: 56px auto 38px;
  padding: 38px 34px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 26px;
  border: 2px solid transparent;
  background:
    linear-gradient(#101010, #050505) padding-box,
    linear-gradient(135deg, #c0c0c0, #111111, #d4af37, #f5f5f5) border-box;
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.45),
    0 0 30px rgba(212, 175, 55, 0.22),
    inset 0 0 28px rgba(192, 192, 192, 0.10);
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  color: #f5f5f5;
  line-height: 1.85;
  clear: both;
  z-index: 2;
}

.article-pro::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(192, 192, 192, 0.18), transparent 28%),
    radial-gradient(circle at 92% 20%, rgba(212, 175, 55, 0.20), transparent 30%),
    radial-gradient(circle at 70% 100%, rgba(255, 255, 255, 0.06), transparent 32%),
    linear-gradient(120deg, transparent 0%, rgba(212, 175, 55, 0.08) 45%, transparent 75%);
  z-index: 0;
  pointer-events: none;
}

.article-pro::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -80%;
  width: 45%;
  height: 180%;
  background: linear-gradient(120deg, transparent, rgba(255, 215, 120, 0.32), transparent);
  transform: rotate(18deg);
  animation: articleShine 5s linear infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes articleShine {
  0% { left: -80%; }
  45% { left: 130%; }
  100% { left: 130%; }
}

.article-pro > * {
  position: relative;
  z-index: 2;
}

.article-pro h1 {
  margin: 0 0 22px 0;
  color: #ffd76a;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.4px;
}

.article-pro h1::after {
  content: "";
  display: block;
  width: min(100%, 900px);
  height: 5px;
  margin-top: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #c0c0c0, #111111, #d4af37, #f5f5f5);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.38);
}

.article-pro p {
  margin: 0 0 18px 0;
  font-size: 16px;
  line-height: 1.9;
  color: #e8e8e8;
  text-align: justify;
}

.article-pro p:first-of-type {
  padding: 18px 20px;
  margin-bottom: 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.12), rgba(212, 175, 55, 0.16));
  border-left: 5px solid #d4af37;
  color: #ffffff;
  font-weight: 500;
  box-shadow: inset 0 0 18px rgba(212, 175, 55, 0.12);
}

.article-pro a {
  color: #ffd76a;
  font-weight: 900;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid rgba(212, 175, 55, 0.55);
  transition: 0.25s ease;
}

.article-pro a:hover {
  color: #ffffff;
  border-bottom-color: #f5f5f5;
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.45);
}

.article-pro:hover {
  transform: translateY(-3px);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.55),
    0 0 38px rgba(212, 175, 55, 0.28),
    inset 0 0 30px rgba(192, 192, 192, 0.12);
  transition: 0.3s ease;
}

.cok-faq-wrap {
  max-width: 1000px;
  width: calc(100% - 32px);
  margin: 0 auto 56px;
  font-family: "Segoe UI", Arial, sans-serif;
}

.cok-faq-title {
  text-align: center;
  color: #d4af37;
  font-size: 32px;
  margin: 0 0 24px;
  font-weight: 800;
  text-shadow: 0 0 12px #c0c0c0aa, 0 0 20px #00000088;
  letter-spacing: 1px;
}

.cok-faq-item {
  width: 100%;
  margin-bottom: 10px;
  border-radius: 18px;
  overflow: hidden;
}

.cok-faq-q {
  width: 100%;
  display: block;
  padding: 16px 52px 16px 18px;
  background: linear-gradient(270deg, #050505 0%, #1a1a1a 50%, #d4af37 100%);
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
  text-align: left;
  border: 1px solid #c0c0c0;
  border-radius: 18px;
  cursor: pointer;
  position: relative;
  box-shadow: inset 0 0 8px rgba(212, 175, 55, 0.22);
  transition: 0.25s ease;
}

.cok-faq-q:hover {
  background: linear-gradient(270deg, #000000 0%, #2b2b2b 50%, #b8860b 100%);
}

.cok-faq-q::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #d4af37;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  transition: 0.25s ease;
}

.cok-faq-item.active .cok-faq-q {
  border-radius: 18px 18px 0 0;
}

.cok-faq-item.active .cok-faq-q::after {
  content: "-";
  background: #c0c0c0;
  color: #111111;
}

.cok-faq-a {
  max-height: 0;
  overflow: hidden;
  background: linear-gradient(270deg, #050505 0%, #151515 50%, #2b2108 100%);
  color: #ffffff;
  padding: 0 18px;
  border-left: 1px solid #c0c0c0;
  border-right: 1px solid #c0c0c0;
  border-bottom: 1px solid #c0c0c0;
  border-radius: 0 0 18px 18px;
  box-shadow: inset 0 0 10px rgba(212, 175, 55, 0.18);
  transition: max-height 0.35s ease, padding 0.25s ease;
}

.cok-faq-item.active .cok-faq-a {
  max-height: 500px;
  padding: 18px;
}

.cok-faq-a p {
  margin: 0;
  color: #f5f5f5;
  font-size: 16px;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .article-pro,
  .cok-faq-wrap {
    width: calc(100% - 24px);
  }

  .article-pro {
    margin: 36px auto 34px;
    padding: 28px 22px;
    border-radius: 22px;
  }

  .article-pro h1 {
    font-size: 27px;
  }

  .article-pro p {
    font-size: 15px;
    line-height: 1.8;
    text-align: left;
  }

  .article-pro p:first-of-type {
    padding: 16px;
  }

  .cok-faq-wrap {
    margin: 0 auto 42px;
  }

  .cok-faq-title {
    font-size: 26px;
  }

  .cok-faq-q {
    font-size: 16px;
    padding: 14px 48px 14px 15px;
  }

  .cok-faq-a p {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .article-pro {
    padding: 24px 16px;
  }

  .article-pro h1 {
    font-size: 24px;
  }

  .article-pro p {
    font-size: 14.5px;
  }
}

.article-pro {
  background:
    linear-gradient(145deg, rgba(18, 18, 18, 0.98), rgba(3, 3, 3, 0.98)) padding-box,
    linear-gradient(135deg, #f7e7a6 0%, #5f5f5f 24%, #151515 48%, #d4af37 72%, #ffffff 100%) border-box;
}

.article-pro::before {
  background:
    radial-gradient(circle at 12% 15%, rgba(255, 255, 255, 0.13), transparent 26%),
    radial-gradient(circle at 88% 12%, rgba(212, 175, 55, 0.24), transparent 30%),
    radial-gradient(circle at 50% 110%, rgba(192, 192, 192, 0.14), transparent 34%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 12px);
}

.article-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px;
}

.article-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.55);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(212, 175, 55, 0.16));
  color: #ffe9a6;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  box-shadow: inset 0 0 12px rgba(212, 175, 55, 0.12), 0 8px 18px rgba(0, 0, 0, 0.24);
}

.article-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0 26px;
}

.article-kpi {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(192, 192, 192, 0.22);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(212, 175, 55, 0.10));
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.04);
}

.article-kpi strong {
  display: block;
  margin-bottom: 6px;
  color: #ffd76a;
  font-size: 15px;
  font-weight: 900;
}

.article-kpi span {
  display: block;
  color: #e7e7e7;
  font-size: 13px;
  line-height: 1.55;
}

.article-pro p {
  position: relative;
  padding-left: 18px;
}

.article-pro p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d4af37;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.7);
}

.article-pro p:first-of-type {
  padding-left: 20px;
}

.article-pro p:first-of-type::before {
  display: none;
}

.cok-faq-wrap {
  padding: 34px;
  border-radius: 28px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background:
    radial-gradient(circle at 10% 0%, rgba(212, 175, 55, 0.18), transparent 32%),
    radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.10), transparent 30%),
    linear-gradient(145deg, #0c0c0c, #050505);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.42),
    inset 0 0 28px rgba(212, 175, 55, 0.08);
}

.cok-faq-title {
  margin-bottom: 10px;
}

.cok-faq-subtitle {
  max-width: 720px;
  margin: 0 auto 26px;
  color: #d7d7d7;
  font-size: 15px;
  line-height: 1.7;
  text-align: center;
}

.cok-faq-item {
  border: 1px solid rgba(192, 192, 192, 0.22);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
}

.cok-faq-q {
  padding-left: 22px;
  border: 0;
  background:
    linear-gradient(90deg, rgba(212, 175, 55, 0.22), transparent 38%),
    linear-gradient(135deg, #151515 0%, #050505 72%, #977418 100%);
}

.cok-faq-item.active .cok-faq-q {
  color: #ffe9a6;
}

.cok-faq-a {
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(212, 175, 55, 0.10));
}

@media (max-width: 768px) {
  .article-kpi-grid {
    grid-template-columns: 1fr;
  }

  .article-pro p {
    padding-left: 14px;
  }

  .cok-faq-wrap {
    padding: 24px 16px;
  }
}


/* =========================================================
   Source block 19: inline-style-19
   ========================================================= */
.site-footer__list-item a {color: #212121;font-size: 14px;font-weight: 400;}
  .social-icons li {display: inline-block;}
  .social-icons li a {display: block;color: #212121!important;font-size: 16px;}
  .social-icons li a img {vertical-align: middle;height: 20px;margin-right: 7px;}
  .icon-footer-whatsapp .icon-svg {width: 18px;height: 18px;vertical-align: middle;}
  .copyright * {display: inline-block;vertical-align: middle;color: #212121;letter-spacing: normal!important;font-size: 16px!important;}
  .copyright a {border-left: 1px solid;padding-left: 10px;margin-left: 5px;}
  .icon-minus {display:none}
  .bc-border {
    border-top: 1px solid #C4C4C4;
    border-bottom: 1px solid #C4C4C4;
    padding: 40px 0;
    margin-bottom: 50px;
  }
  @media (min-width: 769px) {
    .site-footer__list-item{margin-bottom:8px;}
  }
  @media (max-width: 992px){
    ul.site-footer__list {display: none;}
    .site-footer__section .bottom-line .icon {float: right;width: 20px;height: 20px;}
    .bottom-line.site-footer__section-title.open .icon-minus {display: block;}
    .bottom-line.site-footer__section-title.open .icon-plus {display: none;}

    .site-footer__list.cust-service {margin-bottom: 25px;}
    .site-footer__list.cust-service li {width: 100%;text-align: center;}
    /*.site-footer__list.cust-service li:first-child {border-right: 1px solid #757575;}
    .site-footer__list.cust-service li:last-child {border-left: 1px solid #757575;}*/
  }
  @media (max-width: 768px) {
    .seo-footer, .seo-article {padding-top: 0!important;}
    .copyright {padding: 0px 0 0!important;}
    .copyright span {
      width: 100%;
      font-size: 14px!important;
    }
    .copyright a {
      padding: 0;
      margin: 0 5px;
      border: none;
      font-size: 14px!important;
    }
    .article-lists {column-count: 2;-webkit-column-count: 2;}
  }
  /** Newsletter Footer **/
  .site-footer__newsletter-input {height: 37px;border-radius: 0;}#mc-embedded-subscribe-form .input-group-btn {width: initial;}
  /** Method Footer **/
  .footer-method ul {margin: 0;}.footer-method ul li {display: inline-block;width: 65px;float: left;margin-right: 5px;margin-bottom: 5px;}.footer-method ul li img {display: block;width: 100%;background-color: #fff;}
  /** SEO **/
  .c-seo-links h6 {font-size: 24px;font-weight: 600;}
  .c-seo-links .about_text p {font-size: 14px!important;font-weight: 400;}
  .seo-article * {color: #212121!important;}
  .seo-article a:hover {text-decoration: underline;}


/* =========================================================
   Source block 20: inline-style-20
   ========================================================= */
#CartDrawer .drawer__title {color: #fff;}
  #CartDrawer .drawer__close button {color: #fff;}
  #CartDrawer .drawer__header {background-color: #212121;padding: 5px 0;}
  #CartDrawer .drawer {top: 48px;}
  .login-customer a {text-decoration: underline;}


/* =========================================================
   Source block 21: inline-style-21
   ========================================================= */
#CartDrawer .ajaxcart__product.nExtra.Shipping.Cost .ajaxcart__qty button,
  #CartDrawer .ajaxcart__product.n3D2N .ajaxcart__qty button,
  #CartDrawer .ajaxcart__product.n4D3N .ajaxcart__qty button {display: none;}
  #CartDrawer .ajaxcart__product.nExtra.Shipping.Cost .ajaxcart__qty input,
  #CartDrawer .ajaxcart__product.n3D2N .ajaxcart__qty input,
  #CartDrawer .ajaxcart__product.n4D3N .ajaxcart__qty input {pointer-events: none;opacity: 0.5;}
  #CartDrawer .ajaxcart__product.nExtra.Shipping.Cost .ajaxcart__qty input,
  #CartDrawer .ajaxcart__product.n3D2N .ajaxcart__qty input,
  #CartDrawer .ajaxcart__product.n4D3N .ajaxcart__qty input {pointer-events: none;}


/* =========================================================
   Source block 22: inline-style-22
   ========================================================= */
/** Search AutoComplete **/
  .resultsearch .ui-menu-item[data-cat="Collection"],
  .resultsearch .ui-menu-item[data-cat="Collection"] {display: none;}
  .resultsearch .ui-widget.ui-widget-content {
    width: 100%;
    top: 48px;
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }
  .resultsearch .ui-menu-item {text-align: left;}
  .resultsearch .ui-menu-item>a, .resultsearch .ui-menu-item>span {display: inline-block;width: 100%;font-size: 16px;}.resultsearch .ui-menu-item img {vertical-align: middle;}.resultsearch .ui-menu-item a[data-cat="Collection"] img {display: none;}.resultsearch .ui-menu .ui-state-focus, .resultsearch .ui-menu .ui-state-active {margin: 0;}.ui-state-active, .ui-widget-content .ui-state-active {background: #f2f2f2;border: none;color: #212121;}.resultsearch .ui-menu-item>a,.resultsearch .ui-menu-item>span {display: inline-block;width: 100%;font-size: 13px;}.resultsearch .ui-menu-item a[data-cat="Produk"] img {margin-right: 10px;}.resultsearch .ui-menu-item a[data-cat="Produk"] .price {float: right;padding: 15px 0;}.ui-autocomplete-category.ui-menu-item[data-cat="Produk"]:before {content: "Product Populer";font-size: 13px;padding: 5px;margin: 5px 0;background: #f2f2f2;width: 100%;display: block;color: #212121;}.ui-autocomplete-category.ui-menu-item[data-cat="Produk"] span {display: none;}
  .ui-state-active {
    border: none!important;
    background-color: #fafafa!important;
    color: #000!important;
  }
  .ui-menu-item a[data-cat="Collection"] {padding: 5px 12px;}
  .ui-menu .ui-menu-item {line-height: normal;}


/* =========================================================
   Source block 23: SUBURTOTO-final-product-dark-override
   ========================================================= */
body .product-layout > .container,
  body .product-layout.product-bunga > .container {
    background:
      radial-gradient(circle at 8% 0%, rgba(212, 175, 55, 0.22), transparent 32%),
      radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.10), transparent 28%),
      linear-gradient(135deg, #080808 0%, #1c180f 52%, #070707 100%) !important;
    color: #f7f0d2 !important;
    border: 1px solid rgba(212, 175, 55, 0.54) !important;
    box-shadow:
      0 28px 70px rgba(0, 0, 0, 0.62),
      0 0 36px rgba(212, 175, 55, 0.22),
      inset 0 0 30px rgba(255, 255, 255, 0.05) !important;
  }

  body #product-image,
  body .product-image,
  body #product-meta,
  body .product-buy-buttons,
  body .product-description,
  body .bg-card,
  body .c-pdp-product-info {
    background: transparent !important;
    color: #f7f0d2 !important;
  }

  body .product-meta {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(212, 175, 55, 0.09)) !important;
    color: #f7f0d2 !important;
    border: 1px solid rgba(212, 175, 55, 0.36) !important;
    border-radius: 18px !important;
    box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.05) !important;
  }

  body .product-meta h1,
  body .product-meta h2,
  body .product-meta h3,
  body .product-meta h4,
  body .product-meta label,
  body .product-meta li,
  body .product-meta p,
  body .product-meta span,
  body .short-desc,
  body .short-desc li {
    color: #f7f0d2 !important;
  }

  body .product-meta h1,
  body .product-meta [itemprop="name"] {
    color: #ffe58f !important;
    text-shadow: 0 0 14px rgba(212, 175, 55, 0.30);
  }

  body #ProductPrice,
  body .ProductPrice,
  body .product-price {
    color: #ffffff !important;
  }

  body .product-meta s,
  body .product-meta del,
  body .product-meta .compare-price {
    color: rgba(247, 240, 210, 0.62) !important;
  }

  body .product-single__photos,
  body #ProductPhoto,
  body .gallery-top,
  body .gallery-mobile {
    background:
      radial-gradient(circle at 20% 0%, rgba(212, 175, 55, 0.14), transparent 34%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(238, 232, 208, 0.95)) !important;
    border: 1px solid rgba(212, 175, 55, 0.38) !important;
    box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.34),
      inset 0 0 18px rgba(212, 175, 55, 0.10) !important;
  }

  body .gallery-thumbs,
  body #ProductThumbs,
  body #ProductThumbs li {
    background: rgba(255, 255, 255, 0.70) !important;
    border-radius: 10px !important;
  }

  body .delivery-city h4,
  body #row-delivery-date h4,
  body #row-delivery-time h4 {
    color: #ffe58f !important;
  }

  body #cities,
  body .form-control,
  body .variant-metafield,
  body input,
  body select,
  body textarea {
    background-color: rgba(255, 255, 255, 0.94) !important;
    color: #151515 !important;
    border-color: rgba(212, 175, 55, 0.58) !important;
  }

  body #btnPurchase,
  body .btn.text-uppercase.w-100 {
    background:
      linear-gradient(135deg, #070707 0%, #222222 45%, #d4af37 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(212, 175, 55, 0.70) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34) !important;
  }

  body .button-share-wishlist,
  body .button-share-wishlist span,
  body .button-share-wishlist p,
  body .button-share-wishlist button {
    color: #f7f0d2 !important;
  }

  body .button-share-wishlist svg path {
    fill: #f2d77a !important;
    stroke: #f2d77a !important;
  }

  body #thumb-image-product {
    padding-right: 12px !important;
  }

  body .gallery-thumbs {
    min-height: 0 !important;
    height: auto !important;
    background:
      linear-gradient(180deg, rgba(212, 175, 55, 0.16), rgba(255, 255, 255, 0.04)) !important;
    border: 1px solid rgba(212, 175, 55, 0.42) !important;
    border-radius: 14px !important;
    padding: 8px !important;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.28) !important;
    overflow: hidden !important;
  }

  body #ProductThumbs {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  body #ProductThumbs li,
  body #ProductThumbs .swiper-slide {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 10px !important;
  }

  body #ProductThumbs .product-single__thumbnail {
    display: block !important;
    overflow: hidden !important;
    border: 1px solid rgba(212, 175, 55, 0.58) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }

  body #ProductThumbs img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 9px !important;
  }

  body #ProductThumbs li:empty,
  body #ProductThumbs .swiper-slide:empty {
    display: none !important;
  }


/* =========================================================
   Source block 24: inline-style-24
   ========================================================= */
.bobarawr {
      margin: 0;
      padding: 0;
      font-family: 'Playfair Display', 'Segoe UI', serif;
      background-color: transparent;
      color: #fff;
      overflow: hidden;
    }

    .popup-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    .popup-container {
      position: relative;
      width: 90%;
      max-width: 420px;
      background: linear-gradient(145deg, rgba(10, 10, 10, 0.9), rgba(26, 21, 16, 0.85));
      border-radius: 20px;
      overflow: hidden;
      text-align: center;
      animation: rotateScaleIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), goldPulse 3.5s infinite ease-in-out;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(55, 212, 63, 0.2);
      padding-bottom: 20px;
      border: 1px solid rgba(55, 212, 94, 0.15);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    /* 💛 Emas berdenyut yang mewah */
    @keyframes goldPulse {
      0%, 100% {
        box-shadow: 0 20px 40px #D00000, 0 0 20px #D00000, 0 0 0 1px #D00000;
      }
      50% {
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 30px #D00000, 0 0 0 1px #D00000
      }
    }

    /* ✨ Shiny diagonal emas yang elegan */
    .popup-container::before {
      content: "";
      position: absolute;
      top: -100%;
      left: -100%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0) 45%,
        rgba(21, 255, 0, 0.15) 50%,
        rgba(255, 255, 255, 0) 55%
      );
      animation: shineDiagonal 5s linear infinite;
      z-index: 2;
      pointer-events: none;
    }

    @keyframes shineDiagonal {
      0% {
        transform: translate(-100%, -100%) rotate(30deg);
      }
      100% {
        transform: translate(100%, 100%) rotate(30deg);
      }
    }

    .popup-image {
      width: 100%;
      display: block;
      border-bottom: 1px solid rgba(55, 212, 63, 0.15);
    }

    .popup-buttons {
      display: flex;
      flex-direction: column;
      gap: 15px;
      padding: 25px 20px;
      position: relative;
      z-index: 3;
    }

    .popup-buttons a {
      width: 100%;
      display: block;
      padding: 18px 0;
      font-size: 16px;
      font-weight: 700;
      border-radius: 50px;
      text-decoration: none;
      text-align: center;
      color: #ffffff;
      background: linear-gradient(135deg, #D4A373 , #D4A373 );
      box-shadow: 0 10px 20px #ff4343;
      transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      position: relative;
      overflow: hidden;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      font-family: 'Montserrat', sans-serif;
    }

    /* Efek hover tombol emas yang mewah */
    .popup-buttons a::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        #b4d4aa,
        transparent
      );
      transition: left 0.8s;
    }

    .popup-buttons a:hover::before {
      left: 100%;
    }

    .popup-buttons a:hover {
      transform: translateY(-4px);
      box-shadow: 0 15px 25px rgba(81, 212, 55, 0.5);
      background: linear-gradient(135deg, #00FF66, #ADB5BD );
    }

    .popup-buttons a:active {
      transform: translateY(1px);
    }

    .info-table {
      width: 90%;
      margin: 20px auto;
      border-collapse: collapse;
      color: #eee;
      font-size: 14px;
      position: relative;
      z-index: 3;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    .info-table th {
      background: linear-gradient(135deg, #00f028, #24b81f);
      padding: 14px 10px;
      font-size: 15px;
      color: #000;
      border: none;
      font-weight: 700;
      letter-spacing: 0.8px;
      text-transform: uppercase;
    }

    .info-table td {
      padding: 12px;
      border-bottom: 1px solid rgba(81, 212, 55, 0.1);
      text-align: left;
    }

    .info-table tr:last-child td {
      border-bottom: none;
    }

    .popup-footer {
      font-size: 13px;
      color: #ccc;
      padding: 20px 10px;
      position: relative;
      z-index: 3;
      line-height: 1.6;
      font-family: 'Playfair Display', serif;
    }

    @keyframes rotateScaleIn {
      0% {
        opacity: 0;
        transform: scale(0.3) rotate(-10deg);
      }
      50% {
        transform: scale(1.05) rotate(2deg);
      }
      100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
      }
    }

    /* Efek partikel emas */
    .gold-particle {
      position: absolute;
      background: radial-gradient(circle, rgba(0, 255, 13, 0.8) 0%, rgba(81, 212, 55, 0.4) 100%);
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
      animation: floatGold 10s infinite ease-in-out;
      box-shadow: 0 0 10px rgba(30, 255, 0, 0.6);
    }

    @keyframes floatGold {
      0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0;
      }
      10% {
        opacity: 0.8;
      }
      90% {
        opacity: 0.8;
      }
      100% {
        transform: translateY(-120px) translateX(40px);
        opacity: 0;
      }
    }

    /* Efek border emas mewah */
    .luxury-border {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: 1px solid rgba(55, 212, 76, 0.2);
      border-radius: 20px;
      pointer-events: none;
      z-index: 4;
      background: linear-gradient(135deg, 
        rgba(55, 212, 76, 0) 0%, 
        rgba(73, 212, 55, 0.1) 50%, 
        rgba(55, 212, 63, 0) 100%);
    }

    /* Tombol Close */
    .close-btn {
      position: absolute;
      top: 15px;
      right: 15px;
      width: 32px;
      height: 32px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      z-index: 10;
      transition: all 0.3s ease;
      border: 1px solid rgba(55, 212, 68, 0.671);
    }

    .close-btn:hover {
      background: rgb(0, 255, 34);
      transform: rotate(90deg);
    }

    .close-btn::before,
    .close-btn::after {
      content: '';
      position: absolute;
      width: 16px;
      height: 2px;
      background: #fff;
    }

    .close-btn::before {
      transform: rotate(45deg);
    }

    .close-btn::after {
      transform: rotate(-45deg);
    }

    /* Responsif untuk layar kecil */
    @media (max-width: 480px) {
      .popup-container {
        width: 95%;
        max-width: 350px;
      }
      
      .popup-buttons a {
        font-size: 14px;
        padding: 16px 0;
      }
      
      .info-table {
        font-size: 13px;
      }
      
      .popup-footer {
        font-size: 12px;
      }
      
      .close-btn {
        width: 28px;
        height: 28px;
      }
    }


/* =========================================================
   Source block 25: SUBURTOTO-final-red-gold-theme
   ========================================================= */
/* =========================================================
   SUBURTOTO — Elegant Crimson / Black / Gold Theme
   Color-only override inspired by the red satin + gold artwork.
   Existing HTML structure and content are intentionally preserved.
   ========================================================= */
:root {
  --sr-black: #050405;
  --sr-black-soft: #0d0709;
  --sr-panel: #14080c;
  --sr-panel-2: #1d0a10;
  --sr-crimson: #6f0d20;
  --sr-crimson-bright: #a21b36;
  --sr-red-soft: #c14357;
  --sr-gold: #d8b45a;
  --sr-gold-soft: #f3dda2;
  --sr-champagne: #fff0c6;
  --sr-text: #f8f0e8;
  --sr-muted: #d5c5bc;
  --sr-line: rgba(216, 180, 90, 0.38);
}

html,
body {
  background:
    radial-gradient(circle at 9% 3%, rgba(162, 27, 54, 0.26), transparent 31%),
    radial-gradient(circle at 91% 10%, rgba(216, 180, 90, 0.13), transparent 26%),
    radial-gradient(circle at 50% 100%, rgba(111, 13, 32, 0.22), transparent 34%),
    linear-gradient(145deg, #030203 0%, #10070a 47%, #050304 100%) !important;
  color: var(--sr-text) !important;
}

body::before {
  background:
    linear-gradient(120deg, transparent 0%, rgba(216, 180, 90, 0.035) 44%, transparent 73%),
    repeating-linear-gradient(135deg, rgba(255, 240, 198, 0.018) 0 1px, transparent 1px 16px) !important;
}

/* Header + navigation */
.header-wrapper,
#shopify-section-new-header,
header {
  background:
    radial-gradient(circle at 50% -55%, rgba(216, 180, 90, 0.18), transparent 46%),
    linear-gradient(135deg, #170509 0%, #670d1e 52%, #1b060b 100%) !important;
  color: var(--sr-text) !important;
}

.header-wrapper {
  border-bottom: 1px solid rgba(216, 180, 90, 0.50) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.48), 0 0 24px rgba(111, 13, 32, 0.18) !important;
}

.site-logo-link img {
  filter: drop-shadow(0 0 11px rgba(216, 180, 90, 0.40)) drop-shadow(0 8px 16px rgba(0,0,0,.35)) !important;
}

.header-icons svg path,
#menu-hamburger svg path,
#search-trigger svg path {
  fill: var(--sr-gold-soft) !important;
  stroke: var(--sr-gold-soft) !important;
}

.cart-count {
  background: linear-gradient(135deg, #f5dfa4, #c8932f) !important;
  color: #2b080e !important;
  border-color: rgba(255, 240, 198, 0.60) !important;
}

.nav-header {
  background: linear-gradient(180deg, rgba(10, 5, 7, 0.98), rgba(23, 6, 10, 0.98)) !important;
  border-top: 1px solid rgba(255,255,255,.04) !important;
  border-bottom: 1px solid rgba(216, 180, 90, 0.30) !important;
  box-shadow: 0 9px 24px rgba(0,0,0,.30) !important;
  backdrop-filter: blur(12px);
}

.nav-header a,
.nav-header span,
.nav-account-mobile,
.login-register a {
  color: #f5dda4 !important;
}

.nav-menu > li > a:hover {
  background: linear-gradient(135deg, rgba(111, 13, 32, 0.48), rgba(216, 180, 90, 0.10)) !important;
  box-shadow: inset 0 0 0 1px rgba(216, 180, 90, 0.18), 0 8px 18px rgba(0,0,0,.22) !important;
}

.nav-menu > li > a:hover span {
  color: #fff3ce !important;
  text-shadow: 0 0 12px rgba(216,180,90,.28) !important;
}

/* Main product area */
#PageContainer,
.main-content,
.product-layout-section {
  background: transparent !important;
}

.product-layout > .container {
  background:
    radial-gradient(circle at 4% 0%, rgba(162, 27, 54, 0.22), transparent 31%),
    radial-gradient(circle at 94% 12%, rgba(216, 180, 90, 0.10), transparent 26%),
    linear-gradient(145deg, rgba(12, 6, 8, 0.985), rgba(30, 8, 14, 0.985) 52%, rgba(7, 4, 5, 0.985)) !important;
  color: var(--sr-text) !important;
  border: 1px solid rgba(216, 180, 90, 0.42) !important;
  box-shadow: 0 25px 60px rgba(0,0,0,.55), 0 0 28px rgba(111,13,32,.22), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

#product-image,
.product-image,
#product-meta,
.product-meta,
.product-buy-buttons,
.product-description,
.bg-card,
.c-pdp-product-info {
  background: transparent !important;
  color: var(--sr-text) !important;
}

.product-meta {
  background:
    radial-gradient(circle at 100% 0%, rgba(216,180,90,.08), transparent 32%),
    linear-gradient(145deg, rgba(27, 8, 13, 0.92), rgba(7, 5, 6, 0.92)) !important;
  border: 1px solid rgba(216, 180, 90, 0.31) !important;
  box-shadow: inset 0 0 28px rgba(162,27,54,.08), 0 15px 32px rgba(0,0,0,.24) !important;
}

.product-meta h1,
.product-meta [itemprop="name"] {
  color: var(--sr-gold-soft) !important;
  text-shadow: 0 0 18px rgba(216,180,90,.16) !important;
}

.product-meta h2,
.product-meta h3,
.product-meta h4,
.product-meta label,
.product-meta li,
.product-meta p,
.product-meta span,
.product-description,
.short-desc,
.short-desc li,
.button-share-wishlist,
.button-share-wishlist span,
.button-share-wishlist p,
.button-share-wishlist button {
  color: #f3e7df !important;
}

#ProductPrice,
.ProductPrice,
.product-price {
  color: #f4d67e !important;
}

.product-meta s,
.product-meta del,
.product-meta .compare-price {
  color: rgba(243, 231, 223, 0.58) !important;
}

.product-single__photos,
#ProductPhoto,
.gallery-top,
.gallery-mobile {
  background:
    radial-gradient(circle at 50% 0%, rgba(216,180,90,.09), transparent 38%),
    linear-gradient(145deg, #12080b, #070506) !important;
  border-color: rgba(216, 180, 90, 0.36) !important;
  box-shadow: 0 17px 38px rgba(0,0,0,.42), inset 0 0 24px rgba(162,27,54,.08) !important;
}

.gallery-thumbs,
#ProductThumbs,
#ProductThumbs li {
  background: rgba(18, 8, 11, 0.88) !important;
  border-color: rgba(216,180,90,.20) !important;
}

#ProductPhotoImg {
  background: #0b0608 !important;
}

#breadcrumbProduct,
#breadcrumbProduct .container,
#breadcrumbProduct a,
#breadcrumbProduct li {
  color: #eed69b !important;
}

.delivery-city h4,
#row-delivery-date h4,
#row-delivery-time h4 {
  color: var(--sr-gold-soft) !important;
}

#cities,
.form-control,
.variant-metafield,
input,
select,
textarea {
  background-color: rgba(16, 8, 10, 0.96) !important;
  color: #fff2df !important;
  border-color: rgba(216, 180, 90, 0.42) !important;
}

input::placeholder,
textarea::placeholder {
  color: #a99487 !important;
}

#btnPurchase,
.btn.text-uppercase.w-100,
.steps-btn,
.next-purchase-button {
  background: linear-gradient(135deg, #5c0b1a 0%, #9e1934 52%, #d1a84d 100%) !important;
  color: #fff9e9 !important;
  border: 1px solid rgba(244, 218, 151, 0.72) !important;
  box-shadow: 0 12px 28px rgba(90, 8, 24, 0.38), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

#btnPurchase:hover,
.btn.text-uppercase.w-100:hover,
.steps-btn:hover,
.next-purchase-button:hover {
  filter: brightness(1.10) saturate(1.04) !important;
  box-shadow: 0 15px 34px rgba(111,13,32,.46), 0 0 17px rgba(216,180,90,.16) !important;
}

.button-share-wishlist svg path {
  fill: #d8b45a !important;
  stroke: #d8b45a !important;
}

/* Top access buttons */
.sj-extra-access-inner {
  border-color: rgba(216,180,90,.38) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(162,27,54,.18), transparent 38%),
    linear-gradient(145deg, rgba(18,7,10,.97), rgba(40,9,16,.95)) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.sj-extra-register {
  background: linear-gradient(135deg, #590916 0%, #a21b36 55%, #6b0c1e 100%) !important;
  border-color: rgba(241,211,145,.42) !important;
  box-shadow: 0 12px 27px rgba(111,13,32,.36), inset 0 1px 0 rgba(255,255,255,.15) !important;
}

.sj-extra-register .sj-extra-icon {
  color: #f5d98f !important;
  background: rgba(0,0,0,.25) !important;
}

.sj-extra-login {
  color: #25070c !important;
  background: linear-gradient(135deg, #f6e2ad 0%, #d2a94d 53%, #f3d88f 100%) !important;
  border-color: rgba(255,240,198,.60) !important;
  box-shadow: 0 12px 27px rgba(77,49,10,.20), inset 0 1px 0 rgba(255,255,255,.48) !important;
}

.sj-extra-login *,
.sj-extra-login .sj-extra-icon {
  color: #3a0a12 !important;
}

.sj-extra-login .sj-extra-icon {
  background: rgba(94, 10, 27, 0.10) !important;
}

/* Article */
.article-pro {
  background:
    radial-gradient(circle at 8% 0%, rgba(162,27,54,.22), transparent 30%),
    radial-gradient(circle at 93% 9%, rgba(216,180,90,.10), transparent 28%),
    linear-gradient(145deg, rgba(18, 6, 9, 0.985), rgba(5, 4, 5, 0.985)) padding-box,
    linear-gradient(135deg, #f0d58b 0%, #7b1026 33%, #241016 55%, #d8b45a 78%, #f9e7b5 100%) border-box !important;
  color: var(--sr-text) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.50), 0 0 30px rgba(111,13,32,.18), inset 0 0 30px rgba(216,180,90,.035) !important;
}

.article-pro::before {
  background:
    radial-gradient(circle at 12% 15%, rgba(162,27,54,.17), transparent 26%),
    radial-gradient(circle at 88% 12%, rgba(216,180,90,.12), transparent 30%),
    repeating-linear-gradient(135deg, rgba(255,240,198,.018) 0 1px, transparent 1px 13px) !important;
}

.article-pro h1,
.article-pro h2,
.article-pro h3 {
  color: #f4dda2 !important;
  text-shadow: 0 0 15px rgba(216,180,90,.14) !important;
}

.article-pro p,
.article-pro li {
  color: #eadfd7 !important;
}

.article-pro p:first-of-type {
  color: #fff0d2 !important;
  background: linear-gradient(135deg, rgba(111,13,32,.24), rgba(216,180,90,.055)) !important;
  border-color: rgba(216,180,90,.30) !important;
}

.article-pro p::before {
  background: #d8b45a !important;
  box-shadow: 0 0 12px rgba(216,180,90,.58) !important;
}

.article-badge {
  border-color: rgba(216,180,90,.48) !important;
  background: linear-gradient(135deg, rgba(111,13,32,.28), rgba(216,180,90,.10)) !important;
  color: #f6dfa4 !important;
}

.article-kpi {
  border-color: rgba(216,180,90,.24) !important;
  background: linear-gradient(145deg, rgba(111,13,32,.18), rgba(216,180,90,.055)) !important;
}

.article-kpi strong {
  color: #f0cf72 !important;
}

.article-kpi span {
  color: #dbcfc8 !important;
}

/* FAQ */
.cok-faq-wrap {
  background:
    radial-gradient(circle at 8% 0%, rgba(162,27,54,.20), transparent 31%),
    radial-gradient(circle at 92% 8%, rgba(216,180,90,.09), transparent 27%),
    linear-gradient(145deg, #120609, #050405) !important;
  color: var(--sr-text) !important;
  border-color: rgba(216,180,90,.38) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.47), inset 0 0 30px rgba(111,13,32,.08) !important;
}

.cok-faq-title {
  color: #f4dda2 !important;
  text-shadow: 0 0 14px rgba(216,180,90,.12) !important;
}

.cok-faq-subtitle {
  color: #d8cac2 !important;
}

.cok-faq-item {
  background: rgba(255,255,255,.025) !important;
  border-color: rgba(216,180,90,.22) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.30) !important;
}

.cok-faq-q {
  color: #fff0c6 !important;
  background:
    linear-gradient(90deg, rgba(162,27,54,.25), transparent 42%),
    linear-gradient(135deg, #1b080d 0%, #090506 68%, #55101c 100%) !important;
}

.cok-faq-q:hover,
.cok-faq-item.active .cok-faq-q {
  color: #f7dda0 !important;
  background:
    linear-gradient(90deg, rgba(216,180,90,.13), transparent 42%),
    linear-gradient(135deg, #270a11 0%, #0c0507 65%, #721229 100%) !important;
}

.cok-faq-q::after {
  background: linear-gradient(135deg, #f3dda2, #c89532) !important;
  color: #28080e !important;
  box-shadow: 0 0 15px rgba(216,180,90,.18) !important;
}

.cok-faq-item.active .cok-faq-q::after {
  background: linear-gradient(135deg, #b31c39, #6f0d20) !important;
  color: #fff0c6 !important;
}

.cok-faq-a {
  color: #eadfd7 !important;
  background: linear-gradient(135deg, rgba(9,5,6,.98), rgba(111,13,32,.13)) !important;
  border-color: rgba(216,180,90,.18) !important;
}

.cok-faq-a p {
  color: #eadfd7 !important;
}

/* Purchase modal / sticky purchase area */
.purchase-button-wrapper,
.purchaseArea,
.sectionPurchase,
.wrapperPurchase {
  background-color: #0e0709 !important;
  color: #f5e9e0 !important;
  border-color: rgba(216,180,90,.24) !important;
}

.purchasePopup {
  background: rgba(3,2,3,.72) !important;
  backdrop-filter: blur(5px);
}

.popupPurchaseClose,
.close-purchase-popup {
  color: #f0cc72 !important;
}

/* Footer */
.site-footer {
  background:
    radial-gradient(circle at 12% 0%, rgba(162,27,54,.20), transparent 30%),
    radial-gradient(circle at 88% 0%, rgba(216,180,90,.08), transparent 26%),
    linear-gradient(145deg, #130509 0%, #4b0916 48%, #090405 100%) !important;
  color: #f8eee5 !important;
  border-top-color: rgba(216,180,90,.42) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.site-footer__section-title,
.site-footer__list-item a,
.site-footer a,
.site-footer p,
.copyright *,
.social-icons li a {
  color: #f1dca6 !important;
}

/* Popup — remove old green accents and align with artwork */
.popup-overlay {
  background: rgba(3, 2, 3, 0.70) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.popup-container {
  background:
    radial-gradient(circle at 10% 0%, rgba(162,27,54,.24), transparent 34%),
    linear-gradient(145deg, rgba(16,6,9,.96), rgba(37,8,14,.94)) !important;
  border: 1px solid rgba(216,180,90,.38) !important;
  box-shadow: 0 24px 52px rgba(0,0,0,.72), 0 0 28px rgba(111,13,32,.30), 0 0 0 1px rgba(216,180,90,.16) !important;
}

@keyframes goldPulse {
  0%, 100% {
    box-shadow: 0 24px 52px rgba(0,0,0,.72), 0 0 17px rgba(111,13,32,.34), 0 0 0 1px rgba(216,180,90,.18);
  }
  50% {
    box-shadow: 0 24px 52px rgba(0,0,0,.72), 0 0 30px rgba(216,180,90,.20), 0 0 0 1px rgba(216,180,90,.34);
  }
}

.popup-container::before {
  background: linear-gradient(135deg, transparent 45%, rgba(244,218,151,.14) 50%, transparent 55%) !important;
}

.popup-image {
  border-bottom-color: rgba(216,180,90,.24) !important;
}

.popup-buttons a {
  color: #fff7e3 !important;
  background: linear-gradient(135deg, #5f0a1a 0%, #a31a37 53%, #d2aa50 100%) !important;
  border: 1px solid rgba(244,218,151,.46) !important;
  box-shadow: 0 12px 25px rgba(111,13,32,.38) !important;
}

.popup-buttons a::before {
  background: linear-gradient(90deg, transparent, rgba(255,239,195,.34), transparent) !important;
}

.popup-buttons a:hover {
  background: linear-gradient(135deg, #7a0f24 0%, #b82140 53%, #e0bd68 100%) !important;
  box-shadow: 0 15px 31px rgba(111,13,32,.46), 0 0 16px rgba(216,180,90,.14) !important;
}

.gold-particle {
  background: radial-gradient(circle, rgba(250,221,143,.92) 0%, rgba(216,180,90,.34) 100%) !important;
  box-shadow: 0 0 11px rgba(216,180,90,.60) !important;
}

.luxury-border {
  border-color: rgba(216,180,90,.30) !important;
  background: linear-gradient(135deg, transparent 0%, rgba(216,180,90,.09) 50%, transparent 100%) !important;
}

.close-btn {
  background: rgba(42,7,14,.78) !important;
  border-color: rgba(216,180,90,.52) !important;
}

.close-btn:hover {
  background: #8f1731 !important;
  box-shadow: 0 0 14px rgba(216,180,90,.15) !important;
}

.popup-footer,
.popup-footer span {
  color: #d8c8bd !important;
  text-shadow: none !important;
}

.info-table {
  background: rgba(7,4,5,.62) !important;
  color: #efe5de !important;
}

.info-table th {
  background: linear-gradient(135deg, #6e0d20, #c59a3d) !important;
  color: #fff8e8 !important;
}

.info-table td {
  border-bottom-color: rgba(216,180,90,.12) !important;
}

/* Small refinements */
a { transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.bc-border { border-color: rgba(216,180,90,.25) !important; }

@media (max-width: 768px) {
  .product-layout > .container {
    box-shadow: 0 18px 40px rgba(0,0,0,.46), 0 0 19px rgba(111,13,32,.16) !important;
  }

  .article-pro,
  .cok-faq-wrap {
    box-shadow: 0 15px 34px rgba(0,0,0,.43), 0 0 17px rgba(111,13,32,.13) !important;
  }

  .sj-extra-access-inner {
    background: linear-gradient(145deg, rgba(18,7,10,.98), rgba(49,9,18,.96)) !important;
  }
}