/* page-specific styles extracted from Products details.html (loaded after base.css) */

/* page override */
.reveal{ opacity: 0; transform: translateY(40px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
/* page override */
.btn-primary{
      background-color: var(--color-accent); color: var(--color-white); box-shadow: var(--shadow-accent);
      background-image: linear-gradient(90deg, var(--color-accent) 0%, #D98A5E 50%, var(--color-accent) 100%);
      background-size: 200% auto;
      transition: background-position 0.6s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
    }
/* page override */
.btn-primary:hover{ background-position: right center; background-color: var(--color-accent-hover); transform: translateY(-3px); box-shadow: 0 14px 36px rgba(196, 121, 79, 0.4); }
.btn-outline{ background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn-outline:hover{ background: var(--color-primary); color: var(--color-white); transform: translateY(-3px); }
/* page override */
.btn i.fa-arrow-right{ transition: transform 0.35s ease; }
.breadcrumb-bar{ background: var(--color-neutral-bg); padding: 14px 0; border-bottom: 1px solid var(--color-border); font-size: 0.85rem; color: var(--color-text-muted); }
.breadcrumb{ display: flex; align-items: center; gap: 10px; }
.breadcrumb a:hover{ color: var(--color-accent); }
.breadcrumb i{ font-size: 0.65rem; }
.breadcrumb span{ color: var(--color-primary); font-weight: 600; }
.product-main-section{ padding: 60px 0 90px; background: var(--color-white); }
.product-layout{ display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.product-gallery{ display: flex; flex-direction: column; gap: 16px; }
.gallery-main-img{ 
      background: var(--color-neutral-bg); border-radius: var(--radius-md); border: 1px solid var(--color-border);
      aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 30px; overflow: hidden;
    }
.gallery-main-img img{ width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s ease; }
.gallery-main-img:hover img{ transform: scale(1.05); }
.gallery-thumbs{ display: flex; gap: 12px; }
.thumb-item{ 
      width: 90px; height: 90px; background: var(--color-neutral-bg); border-radius: var(--radius-sm); border: 1px solid var(--color-border); 
      display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 10px; transition: var(--transition);
    }
.thumb-item:hover, .thumb-item.active{ border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-light); }
.thumb-item img{ width: 100%; height: 100%; object-fit: contain; }
.product-info-detail{ display: flex; flex-direction: column; }
.product-brand{ font-size: 0.82rem; font-weight: 700; color: var(--color-accent); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.product-title{ font-family: var(--font-heading); font-size: 2.2rem; font-weight: 800; color: var(--color-primary); line-height: 1.2; margin-bottom: 16px; }
.product-rating{ display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 0.9rem; color: var(--color-text-muted); }
.product-rating i{ color: #F59E0B; font-size: 0.85rem; }
.product-brief-desc{ font-size: 1.02rem; color: var(--color-text-muted); line-height: 1.7; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--color-border); }
/* content typed in the product editor */
.product-brief-desc p{ margin: 0; }
.product-brief-desc p + p{ margin-top: 10px; }
.product-brief-desc ul,
.product-brief-desc ol{ list-style: disc; padding-left: 22px; margin: 6px 0; }
.product-brief-desc ol{ list-style: decimal; }
.product-brief-desc li{ margin-bottom: 4px; }
.product-brief-desc a{ color: var(--color-accent); text-decoration: underline; }
.product-brief-desc strong{ color: var(--color-text-main); font-weight: 700; }
.product-highlights{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 36px; }
.highlight-item{ display: flex; align-items: center; gap: 12px; font-size: 0.92rem; font-weight: 500; color: var(--color-text-main); }
.highlight-item i{ width: 28px; height: 28px; background: var(--color-accent-light); color: var(--color-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; flex-shrink: 0; }
.product-actions{ display: flex; gap: 16px; margin-bottom: 40px; flex-wrap: wrap; }
.product-actions .btn{ padding: 15px 36px; font-size: 1rem; }
.custom-options{ background: var(--color-neutral-bg); padding: 24px; border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.custom-options h4, .custom-options .product-highlights-title{ font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--color-primary); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.custom-options h4 i, .custom-options .product-highlights-title i{ color: var(--color-accent); }
.custom-options ul{ display: flex; flex-direction: column; gap: 10px; font-size: 0.9rem; color: var(--color-text-muted); }
.custom-options ul li{ display: flex; align-items: center; gap: 8px; }
.custom-options ul li i{ color: #10B981; font-size: 0.8rem; }
.specs-section{ padding: 80px 0; background: var(--color-neutral-bg); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
/* page override */
.section-header{ text-align: center; margin-bottom: 50px; }
/* page override */
.section-tag{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--color-accent); background: var(--color-accent-light); padding: 6px 16px; border-radius: var(--radius-full); margin-bottom: 14px; }
/* page override */
.section-title{ font-family: var(--font-heading); font-size: 2.2rem; font-weight: 800; color: var(--color-primary); line-height: 1.25; }
.related-section{ padding: 90px 0 100px; background: var(--color-white); }
.related-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
/* page override */
.product-card{ background: var(--color-white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); transition: var(--transition); display: flex; flex-direction: column; }
/* page override */
.product-card:hover{ transform: translateY(-10px); box-shadow: var(--shadow-md); border-color: rgba(196, 121, 79, 0.4); }
/* page override */
.product-img-wrap{ position: relative; background: #FFFFFF; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 20px; border-bottom: 1px solid var(--color-border); overflow: hidden; }
/* page override */
.product-img-wrap img{ width: 100%; height: 100%; object-fit: contain; transition: transform 0.6s ease; }
/* page override */
.product-card:hover .product-img-wrap img{ transform: scale(1.1); }
/* page override */
.product-info{ padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
/* page override */
.product-cat{ font-size: 0.74rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-accent); font-weight: 700; margin-bottom: 6px; }
/* page override */
.product-name{ font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--color-primary); margin-bottom: 8px; line-height: 1.35; }
/* page override */
.product-card-footer{ margin-top: auto; }
/* page override */
.product-inquire-btn{ width: 100%; padding: 11px; font-size: 0.85rem; font-weight: 600; text-align: center; color: var(--color-primary); border-radius: var(--radius-sm); border: 1px solid var(--color-border); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: var(--transition); }
/* page override */
.product-inquire-btn:hover{ background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }
/* page override */
.floating-btn{ width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; color: var(--color-white); box-shadow: var(--shadow-lg); cursor: pointer; transition: var(--transition); position: relative; }
.floating-btn:hover{ transform: scale(1.15) translateY(-4px); }
/* page override */
@media (max-width: 1200px){
      .related-grid { grid-template-columns: repeat(3, 1fr); }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }
/* page override */
@media (max-width: 992px){
      /* nav drawer styles are defined once in base.css */
      
      .product-layout { grid-template-columns: 1fr; gap: 40px; }
    }
/* page override */
@media (max-width: 768px){
      .related-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: 1fr; }
      .product-title { font-size: 1.8rem; }
      .product-highlights { grid-template-columns: 1fr; }
      .gallery-thumbs { justify-content: center; }
    }
/* page override */
@media (max-width: 480px){
      .related-grid { grid-template-columns: 1fr; }
    }