/* Contact-form-only styles. Existing theme header, footer, office cards and retail module remain unchanged. */
/* Cold-start fallback for the existing first Depicter slide. The same slide
   elements and artwork are shown until the original player takes control. */
body.home .depicter-1:not(.depicter-ready) { position: relative; overflow: hidden; background: #fff; }
body.home .depicter-1:not(.depicter-ready) > * { opacity: 0; visibility: hidden; }
body.home .depicter-1:not(.depicter-ready) > #depicter-1-section-122 {
  display: block !important; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1; visibility: visible;
}
body.home .depicter-1:not(.depicter-ready) > #depicter-1-section-122 > * { position: absolute; z-index: 2; opacity: 1; visibility: visible; }
body.home .depicter-1:not(.depicter-ready) #depicter-1-section-122 .depicter-layers-container,
body.home .depicter-1:not(.depicter-ready) #depicter-1-section-122 .depicter-layers-wrapper,
body.home .depicter-1:not(.depicter-ready) #depicter-1-section-122 .depicter-layers-fold,
body.home .depicter-1:not(.depicter-ready) #depicter-1-section-122 .depicter-layer-frame,
body.home .depicter-1:not(.depicter-ready) #depicter-1-section-122 .depicter-animation-wrap,
body.home .depicter-1:not(.depicter-ready) #depicter-1-section-122 .depicter-element,
body.home .depicter-1:not(.depicter-ready) #depicter-1-section-122 .depicter-element * {
  opacity: 1 !important;
  visibility: visible !important;
}
body.home .depicter-1:not(.depicter-ready) #depicter-1-element-123 { z-index: 1; top: 0; right: 0; width: 35%; height: 100%; background: #600066; }
body.home .depicter-1:not(.depicter-ready) #depicter-1-element-125 { top: 17%; left: 8%; }
body.home .depicter-1:not(.depicter-ready) #depicter-1-element-126 { top: 25%; left: 8%; width: 42%; }
body.home .depicter-1:not(.depicter-ready) #depicter-1-element-128 { top: 48%; left: 8%; width: 38%; }
body.home .depicter-1:not(.depicter-ready) #depicter-1-element-131 { top: 57%; left: 8%; }
body.home .depicter-1:not(.depicter-ready) #depicter-1-element-132 { top: 70%; left: 8%; width: 286px; height: 44px; }
body.home .depicter-1:not(.depicter-ready) #depicter-1-element-178 { z-index: 3; top: 8%; right: 4%; width: 54%; height: auto; }
body.home .depicter-1:not(.depicter-ready) #depicter-1-element-178 img { display: block; width: 100%; height: auto; }
body.home .depicter-1:not(.depicter-ready) #depicter-1-element-127,
body.home .depicter-1:not(.depicter-ready) #depicter-1-element-129,
body.home .depicter-1:not(.depicter-ready) #depicter-1-element-133 { display: none; }

/* The original layer animations last longer than the original autoplay
   interval, which can leave the active canvas blank between cycles. Keep the
   same Depicter slides, navigation and imagery while making its active slide
   continuously visible. */
body.home .depicter-1.depicter-ready .depicter-section.depicter-active .depicter-element,
body.home .depicter-1.depicter-ready .depicter-section.depicter-active .depicter-element * {
  visibility: visible !important;
  opacity: 1 !important;
}
body.home .depicter-1.depicter-ready .depicter-section.depicter-active .depicter-layers-container,
body.home .depicter-1.depicter-ready .depicter-section.depicter-active .depicter-layers-wrapper,
body.home .depicter-1.depicter-ready .depicter-section.depicter-active .depicter-layers-fold,
body.home .depicter-1.depicter-ready .depicter-section.depicter-active .depicter-layer-frame,
body.home .depicter-1.depicter-ready .depicter-section.depicter-active .depicter-animation-wrap {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Preserve the first slide's existing composition after Depicter wraps its
   layers. These positions mirror the same pre-init slide above. */
body.home #depicter-1-section-122.depicter-active .depicter-layer-frame { transform: none !important; }
body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-123) { top: 0 !important; right: 0 !important; left: auto !important; width: 35% !important; height: 100% !important; z-index: 1 !important; }
body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-125) { top: 17% !important; left: 8% !important; width: auto !important; height: auto !important; z-index: 3 !important; }
body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-126) { top: 25% !important; left: 8% !important; width: 42% !important; height: auto !important; z-index: 3 !important; }
body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-178) { top: 8% !important; right: 4% !important; left: auto !important; width: 54% !important; height: auto !important; z-index: 3 !important; }
body.home #depicter-1-section-122.depicter-active #depicter-1-element-178,
body.home #depicter-1-section-122.depicter-active #depicter-1-element-178 img { width: 100% !important; height: auto !important; }
body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-128) { top: 48% !important; left: 8% !important; width: 38% !important; height: auto !important; z-index: 3 !important; }
body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-131) { top: 57% !important; left: 8% !important; width: auto !important; height: auto !important; z-index: 3 !important; }
body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-132) { top: 70% !important; left: 8% !important; width: 286px !important; height: 44px !important; z-index: 3 !important; }
body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-127),
body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-129),
body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-133) { display: none !important; }

/* WCAG contrast corrections for the unchanged retail and copyright modules. */
body.home a.elementor-button[href*="shopee.ph"] { background-color: #bd3218 !important; }
body.home footer.aux-elementor-footer small { color: #b8b8b8 !important; }

/* Restore the existing WooCommerce card text flow. Phlox positioned the
   title below the card while the Read more control still occupied that same
   space, causing the two existing elements to overlap. */
body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 12px 0 8px !important;
  line-height: 1.35 !important;
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.post-type-archive-product ul.products li.product .button {
  position: static !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
}
body.post-type-archive-product ul.products li.product { height: auto !important; padding-bottom: 14px; }

@media (min-width: 1025px) {
  body.home .depicter-1:not(.depicter-ready) #depicter-1-element-126,
  body.home #depicter-1-section-122.depicter-active #depicter-1-element-126 {
    font-size: 46px !important;
    line-height: 1.08 !important;
  }
  body.home .depicter-1:not(.depicter-ready) #depicter-1-element-178 { right: 3%; width: 50%; }
  body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-178) { right: 3% !important; width: 50% !important; }
  body.home .depicter-1:not(.depicter-ready) #depicter-1-element-128 { top: 54%; }
  body.home .depicter-1:not(.depicter-ready) #depicter-1-element-131 { top: 64%; }
  body.home .depicter-1:not(.depicter-ready) #depicter-1-element-132 { top: 76%; }
  body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-128) { top: 54% !important; }
  body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-131) { top: 64% !important; }
  body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-132) { top: 76% !important; }
}

@media (max-width: 767px) {
  body.home .depicter-1:not(.depicter-ready) #depicter-1-element-123 { top: 0; right: 0; width: 100%; height: 238px; }
  body.home .depicter-1:not(.depicter-ready) #depicter-1-element-125 { top: 55px; left: 24px; }
  body.home .depicter-1:not(.depicter-ready) #depicter-1-element-126 { top: 104px; left: 24px; width: calc(100% - 48px); font-size: 36px; }
  body.home .depicter-1:not(.depicter-ready) #depicter-1-element-178 { top: 260px; right: 7%; width: 86%; }
  body.home .depicter-1:not(.depicter-ready) #depicter-1-element-128 { top: 570px; left: 24px; width: calc(100% - 48px); }
  body.home .depicter-1:not(.depicter-ready) #depicter-1-element-131 { top: 620px; left: 24px; font-size: 28px; }
  body.home .depicter-1:not(.depicter-ready) #depicter-1-element-132 { top: 670px; left: 24px; width: calc(100% - 48px); height: 52px; }
  body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-123) { top: 0 !important; right: auto !important; left: 0 !important; width: 100% !important; height: 238px !important; }
  body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-125) { top: 55px !important; left: 24px !important; }
  body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-126) { top: 104px !important; left: 24px !important; width: calc(100% - 48px) !important; }
  body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-178) { top: 260px !important; right: auto !important; left: 7% !important; width: 86% !important; }
  body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-128) { top: 570px !important; left: 24px !important; width: calc(100% - 48px) !important; }
  body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-131) { top: 620px !important; left: 24px !important; width: calc(100% - 48px) !important; }
  body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-132) { top: 670px !important; left: 24px !important; width: calc(100% - 48px) !important; height: 52px !important; }
}
@media (min-width: 600px) and (max-width: 767px) {
  body.home #depicter-1-section-122.depicter-active #depicter-1-element-131 { width: 100% !important; font-size: 20px !important; line-height: 1.2 !important; }
}
@media (max-width: 1024px) {
  body.home #depicter-1-element-125,
  body.home #depicter-1-element-125 *,
  body.home #depicter-1-element-126,
  body.home #depicter-1-element-126 * { color: #fff !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  body.home .depicter-1 { min-height: 760px !important; }
  body.home .depicter-1:not(.depicter-ready) #depicter-1-element-123 { top: 0; right: 0; width: 100%; height: 238px; }
  body.home .depicter-1:not(.depicter-ready) #depicter-1-element-125 { top: 48px; left: 32px; }
  body.home .depicter-1:not(.depicter-ready) #depicter-1-element-126 { top: 96px; left: 32px; width: calc(100% - 64px); font-size: 42px; line-height: 1.08; }
  body.home .depicter-1:not(.depicter-ready) #depicter-1-element-178 { top: 250px; right: 14%; width: 72%; }
  body.home .depicter-1:not(.depicter-ready) #depicter-1-element-128 { top: 548px; left: 32px; width: calc(100% - 64px); }
  body.home .depicter-1:not(.depicter-ready) #depicter-1-element-131 { top: 610px; left: 32px; width: calc(100% - 64px); font-size: 27px; }
  body.home .depicter-1:not(.depicter-ready) #depicter-1-element-132 { top: 672px; left: 32px; width: 286px; height: 48px; }
  body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-123) { top: 0 !important; right: auto !important; left: 0 !important; width: 100% !important; height: 238px !important; }
  body.home #depicter-1-section-122.depicter-active #depicter-1-element-123 { width: 100% !important; height: 238px !important; }
  body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-125) { top: 48px !important; left: 32px !important; }
  body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-126) { top: 96px !important; left: 32px !important; width: calc(100% - 64px) !important; }
  body.home #depicter-1-section-122.depicter-active #depicter-1-element-126 { font-size: 42px !important; line-height: 1.08 !important; }
  body.home .depicter-1:not(.depicter-ready) #depicter-1-element-178 { right: auto; left: 50%; width: min(65%, 500px); transform: translateX(-50%); }
  body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-178) { top: 250px !important; right: auto !important; left: 50% !important; width: min(65%, 500px) !important; transform: translateX(-50%) !important; }
  body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-128) { top: 548px !important; left: 32px !important; width: calc(100% - 64px) !important; }
  body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-131) { top: 610px !important; left: 32px !important; width: calc(100% - 64px) !important; }
  body.home #depicter-1-section-122.depicter-active #depicter-1-element-131 { width: 100% !important; font-size: 27px !important; line-height: 1.2 !important; }
  body.home #depicter-1-section-122.depicter-active .depicter-layer-frame:has(#depicter-1-element-132) { top: 672px !important; left: 32px !important; width: 286px !important; height: 48px !important; }
}
.comfort-theme-contact {
  width: min(1180px, calc(100% - 40px));
  margin: 48px auto;
  padding: 32px 28px;
  border-left: 5px solid #2d0038;
  background: #f6f1f7;
  color: #242124;
}
.comfort-theme-contact * { box-sizing: border-box; }
.comfort-theme-contact__inner { max-width: 980px; margin-inline: auto; }
.comfort-theme-contact__eyebrow {
  margin: 0 0 6px;
  color: #600066;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.comfort-theme-contact h2 { margin: 0 0 10px; color: #2d0038; }
.comfort-theme-contact__form { margin-top: 24px; }
.comfort-b2b-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 22px;
}
.comfort-b2b-form label { display: flex; flex-direction: column; gap: 6px; margin: 0; color: #2d0038; font-weight: 650; }
.comfort-b2b-form .comfort-form-full,
.comfort-b2b-form .comfort-form-consent,
.comfort-b2b-form .comfort-form-submit { grid-column: 1 / -1; }
.comfort-b2b-form input:not([type="checkbox"]):not([type="submit"]),
.comfort-b2b-form select,
.comfort-b2b-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #a99eac;
  border-radius: 3px;
  background: #fff;
  color: #242124;
  font: inherit;
}
.comfort-b2b-form textarea { min-height: 130px; resize: vertical; }
.comfort-b2b-form input[type="file"] { padding: 9px; }
.comfort-b2b-form input[type="submit"] {
  min-height: 48px;
  padding: 11px 22px;
  border: 0;
  border-radius: 3px;
  background: #2d0038;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.comfort-b2b-form input[type="submit"]:hover,
.comfort-b2b-form input[type="submit"]:focus-visible { background: #600066; }
.comfort-b2b-form small { color: #5f5661; font-weight: 400; line-height: 1.5; }
.comfort-b2b-form .wpcf7-acceptance label { display: flex; flex-direction: row; align-items: flex-start; gap: 9px; color: #242124; font-weight: 400; }
.comfort-b2b-form .wpcf7-acceptance input { margin-top: 4px; }
.comfort-theme-contact__privacy { margin: 18px 0 0; color: #5f5661; font-size: 13px; line-height: 1.6; }
.comfort-theme-contact .wpcf7-not-valid-tip { margin-top: 5px; color: #a00020; font-size: 13px; }
.comfort-theme-contact .wpcf7-response-output { margin: 18px 0 0 !important; padding: 12px !important; }
.comfort-office-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 16px; }
.comfort-office-actions a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border: 1px solid #2d0038;
  border-radius: 3px;
  background: #2d0038;
  color: #fff !important;
  font-weight: 650;
  text-decoration: none !important;
}
.comfort-office-actions a:last-child { background: #fff; color: #2d0038 !important; }
@media (max-width: 767px) {
  /* The original Elementor map widgets reserve almost 700px each on phones.
     Keep the verified Directions action and collapse only those embedded maps. */
  body.page-id-93 .elementor-widget-google_maps { display: none !important; }
  .comfort-theme-contact { width: calc(100% - 28px); margin: 30px auto; padding: 24px 18px; }
  .comfort-b2b-form { grid-template-columns: 1fr; }
  .comfort-b2b-form .comfort-form-full,
  .comfort-b2b-form .comfort-form-consent,
  .comfort-b2b-form .comfort-form-submit { grid-column: auto; }
  .comfort-office-actions a { width: 100%; }
}