/* Collected inline styles extracted from index.php - kept in original order for safety */

/* === Hero section === */
/* Hero: make images full-width and allow natural height on all devices */
.hero-section .carousel,
.hero-section .carousel-inner,
.hero-section .carousel-item { width: 100%; }

.hero-section .carousel-item img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  display: block !important;
  position: static !important;
  inset: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.hero-section .carousel-item { overflow: visible !important; }
.hero-section .carousel-control-prev,
.hero-section .carousel-control-next { top: 50%; transform: translateY(-50%); }

@media (max-width: 767.98px) {
  .hero-section .carousel-item img { object-fit: contain !important; height: auto !important; }
}
@media (min-width: 768px) {
  .hero-section .carousel-item img { object-fit: contain !important; }
}

/* === Community / gallery scroll === */
.community-scroll-wrap { overflow: hidden; }
.community-track { display: flex; gap: 1rem; align-items:center; will-change: transform; }
.community-item { flex: 0 0 calc((100% - 3rem) / 4); max-width: calc((100% - 3rem) / 4); }
.community-item img { width: 100%; height: 220px; object-fit: cover; border-radius: 6px; display:block; }

@media (min-width: 768px) {
  .community-item { flex: 0 0 calc((100% - 3rem) * 0.375) !important; max-width: calc((100% - 3rem) * 0.375) !important; }
  .community-track { gap: 1.25rem !important; }
}
@media (min-width: 1200px) {
  .community-item { flex: 0 0 calc((100% - 4rem) * 0.375) !important; max-width: calc((100% - 4rem) * 0.375) !important; }
}
@media (max-width: 767px) {
  .community-item { flex: 0 0 calc((100% - 1rem) * 0.48) !important; max-width: calc((100% - 1rem) * 0.48) !important; }
  .community-item img { height: auto !important; }
}
@media (prefers-reduced-motion: reduce) { .community-track { animation: none !important; } }

/* Ensure track hides overflow and scrolls horizontally with transform-based animation */
.community-track { display:flex; gap:1rem; align-items:center; will-change:transform; white-space:nowrap; }
.community-track .community-item { flex: 0 0 auto; }
.community-track.paused { animation-play-state: paused !important; }

/* Announcement banner styles */
.community-announcement .announcement-banner { margin-top: 1rem; }
.announcement-track { display: inline-flex; gap: 4rem; align-items: center; white-space: nowrap; will-change: transform; }
.announcement-item { display: inline-block; font-weight: 600; color: #8b1e1eff; font-size: 1rem; }
.announcement-track.paused, .announcement-track:hover, .announcement-track:focus { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .announcement-track { animation: none !important; } }
@media (max-width: 767px) { .announcement-item { font-size: 0.95rem; gap: 6rem; } }

/* Buffer / feature section */
.buffer-chay-section .buffer-desc { font-size: 1.08rem; color: #444; min-height: 340px; }
.buffer-chay-section .row.align-items-stretch { min-height: 340px; }
.buffer-chay-section .col-md-6 { padding: 0 12px; }
.buffer-chay-section .buffer-desc { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.buffer-chay-section .col-md-6 img { height: 340px; object-fit: cover; border-radius: 16px; }
@media (max-width: 767px) {
  .buffer-chay-section .buffer-desc, .buffer-chay-section .col-md-6 img { min-height: 180px; height: 180px; }
  .buffer-chay-section .row.align-items-stretch { min-height: 180px; }
}

/* Kendesign journey */
.kendesign-journey .carousel-item img { width:100%; height:180px; object-fit:cover; }
@media (max-width:767px) { .kendesign-journey .carousel-item img { height:120px; } }

/* Featured products tweaks */
#featured-products-container > * { margin-bottom: 0 !important; }
@media (min-width: 768px) { #featured-products-container .product-image-wrapper { height: 200px !important; } }
@media (min-width: 1200px) { #featured-products-container .product-image-wrapper { height: 220px !important; } }
#featured-products-container .modern-card .card-body { padding: 12px !important; }
#featured-products-container .product-title a { font-size: 14px !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; }
#featured-products-container .product-price { margin-bottom: 8px !important; }
#featured-products-container .product-actions .d-grid { gap: 6px !important; }

/* Price sizing */
#featured-products-container .current-price,
#featured-products-container .product-card .current-price,
#featured-products-container .price-current,
#featured-products-container .product-price,
#featured-products-container .price {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
#featured-products-container .old-price,
#featured-products-container .price-old,
#featured-products-container .product-card .old-price {
  font-size: 0.78rem !important;
  color: #6c757d !important;
  margin-left: 6px !important;
}
.product-card { transition: transform 0.2s ease, box-shadow 0.2s ease !important; cursor: pointer !important; }
.product-card:hover { transform: translateY(-2px) !important; box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; }
.product-img-container { position: relative !important; overflow: hidden !important; border-radius: 8px !important; }
.product-img-container img { transition: transform 0.3s ease !important; }
.product-card:hover .product-img-container img { transform: scale(1.05) !important; }

@media (max-width: 767.98px) {
  #featured-products-container .current-price,
  #featured-products-container .price-current,
  #featured-products-container .product-price .current-price,
  #featured-products-container .product-price,
  #featured-products-container .price,
  #featured-products-container .old-price,
  #featured-products-container .price-old { display: inline-block !important; white-space: nowrap !important; vertical-align: middle !important; box-sizing: border-box !important; }
  #featured-products-container .product-card.has-two-prices .current-price,
  #featured-products-container .product-card.has-two-prices .price-current,
  #featured-products-container .product-card.has-two-prices .price,
  #featured-products-container .product-card.has-two-prices .old-price,
  #featured-products-container .product-card.has-two-prices .price-old,
  #featured-products-container .product-card.has-two-prices .product-price { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
  #featured-products-container .product-card.has-two-prices .current-price { margin-bottom: 4px !important; font-size: 0.98rem !important; }
  #featured-products-container .product-card.has-two-prices .old-price { color: #6c757d !important; font-size: 0.82rem !important; }
  #featured-products-container .price-group { display: flex !important; flex-direction: column !important; gap: 4px !important; }
}

/* Hero enhancements and global section compaction */
.py-5 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.py-4 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
section, .hero-section, .about-section, .partners-section, .benefits-section, .featured-products,
.testimonials, .gallery-section, .news-section, .cta-section, .company-hero, .about-detail,
.culture-section, .commitment-section { padding-top: .5rem !important; padding-bottom: .5rem !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.section-title { margin-top: .25rem !important; margin-bottom: .5rem !important; }
.white-area, .card, .ratio, .partner-stats, .benefits-list, .benefit-card { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: .5rem !important; padding-bottom: .5rem !important; }
@media (max-width: 576px) { .py-5, .py-4, section { padding-top: .6rem !important; padding-bottom: .6rem !important; } }

/* Large hero image system */
.hero-section { position: relative; overflow: hidden; border-radius: 0; box-shadow: 0 8px 25px rgba(0,0,0,0.15); margin-bottom: 1.5rem; margin-left: 0 !important; margin-right: 0 !important; width: 100vw !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; }
.carousel-inner { border-radius: 0; overflow: hidden; }
.hero-img { width: 100% !important; height: auto !important; min-height: 300px !important; object-fit: contain !important; object-position: center center !important; display: block !important; transition: transform 0.8s ease-in-out !important; background: #f8f9fa !important; }
.carousel-item.active .hero-img { transform: scale(1.02) !important; }
.carousel-control-prev, .carousel-control-next { width: 50px !important; height: 50px !important; top: 50% !important; transform: translateY(-50%) !important; border-radius: 50% !important; background: rgba(255,255,255,0.9) !important; backdrop-filter: blur(8px) !important; border: 1px solid rgba(255,255,255,0.3) !important; transition: all 0.3s ease !important; z-index: 10 !important; }
.carousel-control-prev { left: 15px !important; }
.carousel-control-next { right: 15px !important; }
.carousel-control-prev:hover, .carousel-control-next:hover { background: white !important; transform: translateY(-50%) scale(1.1) !important; box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important; }
.carousel-control-prev-icon, .carousel-control-next-icon { width: 20px !important; height: 20px !important; filter: invert(1) !important; }
.carousel-indicators { bottom: 20px !important; z-index: 10 !important; }
.carousel-indicators button { width: 12px !important; height: 12px !important; border-radius: 50% !important; border: 2px solid rgba(255,255,255,0.8) !important; background-color: transparent !important; transition: all 0.3s ease !important; margin: 0 5px !important; }
.carousel-indicators button.active { background-color: white !important; transform: scale(1.3) !important; box-shadow: 0 0 10px rgba(255,255,255,0.6) !important; }
@media (max-width: 768px) { .hero-img { height: auto !important; min-height: 250px !important; } .carousel-control-prev, .carousel-control-next { width: 40px !important; height: 40px !important; } .carousel-control-prev { left: 10px !important; } .carousel-control-next { right: 10px !important; } .carousel-control-prev-icon, .carousel-control-next-icon { width: 16px !important; height: 16px !important; } }
@media (max-width: 576px) { .hero-img { height: auto !important; min-height: 200px !important; } .hero-section { margin-bottom: 1rem; border-radius: 0; } .carousel-inner { border-radius: 0; } }
@media (min-width: 1400px) { .hero-img { height: auto !important; min-height: 400px !important; } }
.hero-img[src=""] { background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; animation: loading 1s linear infinite; }
@keyframes loading { 0% { background-position: 0 0, 0 10px, 10px -10px, -10px 0px; } 100% { background-position: 20px 20px, 20px 30px, 30px 10px, 10px 20px; } }

/* Community & gallery aspect-ratio enforcement */
.community-item, .gallery-item { position: relative !important; overflow: hidden !important; aspect-ratio: 16 / 9 !important; height: auto !important; }
.community-item::before, .gallery-item::before { content: ''; display: block; padding-top: 56.25%; }
.community-item img, .gallery-item img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; border-radius: 6px !important; display: block !important; }
.community-item img[style], .gallery-item img[style], .community-item img, .gallery-item img { max-height: none !important; }

/* Buffer sub-image treatment and hover lifts */
.buffer-chay-section .buffer-main-img-wrap .sub-img { opacity: 0.96 !important; transform-origin: center center; transition: transform 0.6s cubic-bezier(.2,.9,.2,1), box-shadow 0.45s ease, filter 0.45s ease, opacity 0.45s ease; box-shadow: 0 10px 30px rgba(20,20,20,0.12); border-radius: 12px !important; border: 6px solid rgba(255,255,255,0.92) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); max-width: 60% !important; max-height: 180px !important; will-change: transform, opacity; }
.buffer-chay-section .buffer-main-img-wrap .main-img:hover, .buffer-chay-section .buffer-main-img-wrap:hover .main-img { transform: translateY(-8px) scale(1.035); box-shadow: 0 34px 90px rgba(16,24,32,0.22), 0 10px 30px rgba(16,24,32,0.08); filter: saturate(1.04) contrast(1.02); }
.buffer-chay-section .buffer-img-wrap { padding: 6px; background: linear-gradient(180deg,#ffffff 0%,#fbfbfb 100%); border-radius: 12px; overflow: hidden; border: 6px solid rgba(255,255,255,0.98); box-shadow: 0 14px 40px rgba(10,18,22,0.10); transition: transform 0.32s ease, box-shadow 0.32s ease; will-change: transform, box-shadow; }
.buffer-chay-section .buffer-img-wrap .buffer-img { display: block; width: 100%; height: 140px; object-fit: cover; border-radius: 8px; transition: transform 0.45s ease, filter 0.32s ease; }
.buffer-chay-section .buffer-img-wrap:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 26px 64px rgba(10,18,22,0.14); }
.buffer-chay-section .buffer-img-wrap:hover .buffer-img { transform: scale(1.08); filter: saturate(1.06) contrast(1.03); }
@media (max-width: 767px) { .buffer-chay-section .buffer-img-wrap .buffer-img { height: 110px; } .buffer-chay-section .buffer-main-img-wrap .main-img:hover { transform: none; box-shadow: 0 12px 32px rgba(16,24,32,0.12); } .buffer-chay-section .buffer-img-wrap:hover { transform: none; box-shadow: 0 10px 26px rgba(10,18,22,0.08); } }
@media (prefers-reduced-motion: reduce) { .buffer-chay-section .buffer-main-img-wrap .main-img, .buffer-chay-section .buffer-img-wrap, .buffer-chay-section .buffer-img-wrap .buffer-img { transition: none !important; transform: none !important; } }

/* End of index page extracted styles */