:root {
  --hh-ivory: #faf7f2;
  --hh-white: #fffdfc;
  --hh-espresso: #3d2e20;
  --hh-terracotta: #b65f45;
  --hh-gold: #b9925e;
  --hh-sand: #f1e7da;
  --hh-border: #e4d7c8;
  --title-font: "Noto Serif TC", "Songti TC", serif;
  --body-font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

/* Product page: keep the floating WhatsApp/GetButton widget away from the sticky buy bar. */
@media screen and (min-width: 960px) {
  body[data-template="product"] iframe[title*="WhatsApp" i],
  body[data-template="product"] iframe[src*="getbutton" i],
  body[data-template="product"] iframe[src*="whatsapp" i],
  body[data-template="product"] .getbutton,
  body[data-template="product"] .GetButton,
  body[data-template="product"] [class*="getbutton" i],
  body[data-template="product"] [id*="getbutton" i],
  body[data-template="product"] [class*="whatsapp" i],
  body[data-template="product"] [id*="whatsapp" i],
  body[data-template="product"] a[href*="wa.me"],
  body[data-template="product"] a[href*="api.whatsapp.com"] {
    bottom: 96px !important;
  }
}

body {
  color: var(--hh-espresso);
  font-family: var(--body-font);
}

h1,
h2,
h3,
h4,
h5,
h6,
.title1,
.title2,
.title3,
.title4,
.title5,
.title6 {
  font-family: var(--title-font);
  letter-spacing: 0.02em;
  text-transform: none;
}

.button {
  min-height: 48px;
  border-radius: 12px;
  font-family: var(--body-font);
  font-weight: 600;
  letter-spacing: 0.04em;
}

body[data-template="index"] .content-for-layout {
  overflow: hidden;
}

body[data-template="index"] .hh-why,
body[data-template="index"] .hh-flow,
body[data-template="index"] .hh-recipient,
body[data-template="index"] .hh-trust {
  font-family: var(--body-font);
}

body[data-template="index"] .hh-why-title,
body[data-template="index"] .hh-flow-title,
body[data-template="index"] .hh-recipient-title {
  color: var(--hh-espresso);
  font-family: var(--title-font);
  font-weight: 600;
  letter-spacing: 0.02em;
}

body[data-template="index"] .hh-why-eyebrow,
body[data-template="index"] .hh-flow-eyebrow,
body[data-template="index"] .hh-recipient-eyebrow {
  color: var(--hh-gold);
  font-family: Georgia, serif;
  letter-spacing: 0.28em;
}

body[data-template="index"] .product-card-wrapper {
  overflow: hidden;
  border: 1px solid var(--hh-border);
  border-radius: 12px;
  background: var(--hh-white);
  box-shadow: none;
}

body[data-template="index"] .product-card-wrapper .card__content {
  padding: 12px;
}

body[data-template="index"] .product-card-wrapper .price {
  color: var(--hh-terracotta);
  font-weight: 700;
}

/* Homepage product cards: hide color/variant swatches because custom gift specs are text options, not real CSS colors. */
body[data-template="index"] .product-card-wrapper .card__colors,
body[data-template="index"] .product-card-wrapper .card__swatch-radios,
body[data-template="index"] .product-card-wrapper color-swatch,
body[data-template="index"] .product-card-wrapper color-swatch-radios {
  display: none !important;
}

body[data-template="index"] .product-card-wrapper .card__colors + *,
body[data-template="index"] .product-card-wrapper .card__swatch-radios + * {
  margin-block-start: 0 !important;
}

body[data-template="index"] .hh-recipient-card:nth-child(n + 6) {
  display: none !important;
}

body[data-template="index"] .hh-recipient-circle {
  position: relative;
  overflow: hidden;
}

body[data-template="index"] .hh-recipient-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-template="index"] .hh-recipient-circle.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, #efe2d2 8%, #f8f0e7 18%, #efe2d2 33%);
  background-size: 200% 100%;
  animation: hhRecipientLoading 1.2s linear infinite;
}

body[data-template="index"] .hh-recipient-circle.has-no-image {
  background: linear-gradient(180deg, #f8efe6 0%, #eadccb 100%);
}

@keyframes hhRecipientLoading {
  to {
    background-position-x: -200%;
  }
}

@media screen and (min-width: 769px) {
  body[data-template="index"] .hh-recipient-scroll {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: 860px;
  }
}

@media screen and (max-width: 959px) {
  :root {
    --page-padding: 16px;
  }

  body[data-template="index"] .section--padding {
    padding-block: 0;
  }

  body[data-template="index"] .slideshow {
    overflow: hidden;
    border-radius: 12px;
  }

  body[data-template="index"] .slideshow-slide__button {
    min-width: 148px;
    border-radius: 999px;
  }

  body[data-template="index"] .hh-why {
    padding: 18px 16px 26px;
    background: var(--hh-ivory);
  }

  body[data-template="index"] .hh-why-header {
    display: none;
  }

  body[data-template="index"] .hh-why-grid {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--hh-border);
    border-radius: 12px;
    background: var(--hh-white);
  }

  body[data-template="index"] .hh-why-item {
    min-width: 0;
    padding: 14px 5px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  body[data-template="index"] .hh-why-item + .hh-why-item {
    border-inline-start: 1px solid var(--hh-border);
  }

  body[data-template="index"] .hh-why-icon {
    width: 34px;
    height: 34px;
    margin-block-end: 7px;
    border: 1px solid var(--hh-gold);
    background: transparent;
    color: var(--hh-espresso);
    font-size: 0;
  }

  body[data-template="index"] .hh-why-icon::before {
    font-family: Georgia, serif;
    font-size: 13px;
    font-weight: 600;
  }

  body[data-template="index"] .hh-why-item:nth-child(1) .hh-why-icon::before { content: "HK"; }
  body[data-template="index"] .hh-why-item:nth-child(2) .hh-why-icon::before { content: "24"; }
  body[data-template="index"] .hh-why-item:nth-child(3) .hh-why-icon::before { content: "✓"; }

  body[data-template="index"] .hh-why-item-title {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
  }

  body[data-template="index"] .hh-why-item-desc {
    display: none;
  }

  body[data-template="index"] .hh-recipient {
    padding: 46px 0 42px;
    background: var(--hh-ivory);
  }

  body[data-template="index"] .hh-recipient-header {
    margin-block-end: 24px;
  }

  body[data-template="index"] .hh-recipient-title {
    font-size: 26px;
  }

  body[data-template="index"] .hh-recipient-scroll {
    padding-inline: 16px;
  }

  body[data-template="index"] .hh-recipient-card,
  body[data-template="index"] .hh-recipient-card:link,
  body[data-template="index"] .hh-recipient-card:visited {
    width: 88px !important;
    margin-inline-end: 12px !important;
  }

  body[data-template="index"] .hh-recipient-circle {
    position: relative;
    overflow: hidden;
    width: 76px;
    height: 92px;
    border: 1px solid var(--hh-border) !important;
    border-radius: 38px;
    background-color: #efe2d2;
    color: var(--hh-terracotta);
    font-family: var(--title-font);
    font-size: 24px;
    font-weight: 600;
  }

  body[data-template="index"] .hh-recipient-circle.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, #efe2d2 8%, #f8f0e7 18%, #efe2d2 33%);
    background-size: 200% 100%;
    animation: hhRecipientLoading 1.2s linear infinite;
  }

  body[data-template="index"] .hh-recipient-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-template="index"] .hh-recipient-circle.has-no-image {
    background: linear-gradient(180deg, #f8efe6 0%, #eadccb 100%);
  }

  body[data-template="index"] .hh-recipient-name {
    margin-block-start: 9px;
    font-size: 13px !important;
  }

  body[data-template="index"] .hh-recipient-en {
    display: none;
  }

  body[data-template="index"] .hh-flow {
    margin-inline: 16px;
    padding: 38px 16px;
    border: 1px solid var(--hh-border);
    border-radius: 12px;
    background: var(--hh-sand);
  }

  body[data-template="index"] .hh-flow-header {
    margin-block-end: 26px;
  }

  body[data-template="index"] .hh-flow-title {
    font-size: 25px;
  }

  body[data-template="index"] .hh-flow-sub {
    font-size: 12px;
  }

  body[data-template="index"] .hh-flow-steps {
    gap: 4px;
  }

  body[data-template="index"] .hh-flow-num {
    width: 36px;
    height: 36px;
    margin-block-end: 10px;
    background: var(--hh-terracotta);
    font-family: Georgia, serif;
    font-size: 15px;
  }

  body[data-template="index"] .hh-flow-step-title {
    font-size: 12px;
  }

  body[data-template="index"] .hh-flow-step-desc {
    display: none;
  }

  body[data-template="index"] .featured-collection {
    padding-block: 48px;
  }

  body[data-template="index"] .featured-collection .title-wrapper,
  body[data-template="index"] .featured-collection h2 {
    font-family: var(--title-font);
    font-size: 28px;
    text-transform: none;
  }

  body[data-template="index"] .hh-trust {
    margin: 42px 16px;
    padding: 34px 14px;
    border-radius: 12px;
    background: var(--hh-espresso);
  }

  body[data-template="index"] .hh-trust-num {
    color: #d4ad74;
    font-family: var(--title-font);
    font-size: 28px;
  }

  body[data-template="index"] .hh-trust-label {
    font-size: 11px;
  }

  body[data-template="index"] .hh-trust-sub {
    display: none;
  }
}