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

/* page override */
.reveal{ opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
/* 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); }
/* page override */
.btn i.fa-arrow-right{ transition: transform 0.35s ease; }
.article-hero{
      position: relative; height: auto; min-height: 400px; padding: 46px 0;
      display: flex; align-items: center; overflow: hidden; background-color: var(--color-primary-dark);
    }
.article-hero-bg{ position: absolute; inset: 0; }
.article-hero-bg img{ width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.article-hero-overlay{ position: absolute; inset: 0; background: linear-gradient(0deg, rgba(31, 36, 40, 0.95) 0%, rgba(31, 36, 40, 0.7) 100%); }
.article-hero-content{ position: relative; z-index: 3; color: var(--color-white); width: 100%; padding-bottom: 20px; }
.breadcrumb{ display: inline-flex; align-items: center; gap: 10px; font-size: 0.84rem; font-weight: 500; color: rgba(255, 255, 255, 0.65); margin-bottom: 24px; letter-spacing: 0.3px; }
.breadcrumb a:hover{ color: var(--color-accent); }
.breadcrumb i{ font-size: 0.62rem; opacity: 0.6; }
.breadcrumb span{ color: var(--color-accent); font-weight: 600; max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.article-category{ display: inline-block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--color-white); background: var(--color-accent); padding: 4px 14px; border-radius: var(--radius-full); margin-bottom: 16px; }
.article-title{ font-family: var(--font-heading); font-size: 2.6rem; font-weight: 800; line-height: 1.2; margin-bottom: 20px; max-width: 900px; }
.article-meta{ display: flex; align-items: center; gap: 24px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.75); }
.article-meta span{ display: inline-flex; align-items: center; gap: 8px; }
.article-meta i{ color: var(--color-accent); }
.article-section{ padding: 60px 0 100px; background-color: var(--color-white); }
.article-layout{ display: grid; grid-template-columns: 1fr 340px; gap: 50px; align-items: start; }
.article-content{
      font-size: 1.05rem;
      color: var(--color-text-main);
      line-height: 1.85;
    }
.article-content p{ margin-bottom: 24px; }
.article-content h2{
      font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; color: var(--color-primary);
      margin: 40px 0 20px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border);
    }
.article-content h3{
      font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: var(--color-primary);
      margin: 30px 0 16px;
    }
.article-content ul, .article-content ol{ margin-bottom: 24px; padding-left: 20px; }
.article-content ul{ list-style-type: disc; }
.article-content ol{ list-style-type: decimal; }
.article-content li{ margin-bottom: 10px; }
.article-content img{
      border-radius: var(--radius-md); margin: 30px 0; box-shadow: var(--shadow-sm);
      width: 100%; height: auto; object-fit: cover;
    }
.article-content blockquote{
      background: var(--color-accent-light); border-left: 4px solid var(--color-accent);
      padding: 24px 30px; margin: 30px 0; border-radius: 0 var(--radius-md) var(--radius-md) 0;
      font-style: italic; font-size: 1.1rem; color: var(--color-primary);
    }
.article-content blockquote p{ margin-bottom: 0; }
.article-footer{
      margin-top: 50px; padding-top: 30px; border-top: 1px solid var(--color-border);
      display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;
    }
.article-tags{ display: flex; gap: 10px; flex-wrap: wrap; }
.tag-item{
      font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);
      background: var(--color-neutral-bg); border: 1px solid var(--color-border);
      padding: 6px 14px; border-radius: var(--radius-full); transition: var(--transition);
    }
.tag-item:hover{ background: var(--color-accent); color: var(--color-white); border-color: var(--color-accent); }
.article-share{ display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.article-share > span{ font-weight: 600; color: var(--color-primary); font-size: 0.9rem; }
.share-btn .zr-icon{ width: 16px; height: 16px; }
.share-btn{
      width: 36px; height: 36px; border-radius: 50%; background: var(--color-neutral-bg);
      color: var(--color-primary); display: flex; align-items: center; justify-content: center;
      transition: var(--transition); cursor: pointer;
    }
.share-btn:hover{ background: var(--color-accent); color: var(--color-white); transform: translateY(-3px); }
.sidebar{ position: sticky; top: 100px; display: flex; flex-direction: column; gap: 30px; }
.sidebar-widget{
      background: var(--color-white); border: 1px solid var(--color-border);
      border-radius: var(--radius-md); padding: 24px; box-shadow: var(--shadow-sm);
    }
.widget-title{
      font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--color-primary);
      padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--color-border);
      position: relative;
    }
.widget-title::after{
      content: ''; position: absolute; bottom: -1px; left: 0; width: 40px; height: 2px; background: var(--color-accent);
    }
.sidebar-cta{
      background: linear-gradient(150deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
      color: var(--color-white); border-radius: var(--radius-md); padding: 30px 24px;
      text-align: center; box-shadow: var(--shadow-md); position: relative; overflow: hidden;
    }
.sidebar-cta::before{
      content: ''; position: absolute; top: -60px; right: -60px; width: 150px; height: 150px;
      border-radius: 50%; background: rgba(196, 121, 79, 0.16);
    }
.sidebar-cta i{ font-size: 2.2rem; color: var(--color-accent); margin-bottom: 12px; display: block; position: relative; }
.sidebar-cta h3{ font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; position: relative; }
.sidebar-cta p{ font-size: 0.88rem; color: rgba(255, 255, 255, 0.75); line-height: 1.6; margin-bottom: 20px; position: relative; }
.sidebar-cta .btn{ width: 100%; padding: 12px; font-size: 0.9rem; position: relative; }
.widget-product{ display: flex; align-items: center; gap: 16px; margin-bottom: 18px; transition: var(--transition); }
.widget-product:last-child{ margin-bottom: 0; }
.widget-product:hover{ transform: translateX(4px); }
.widget-product-img{
      width: 80px; height: 80px; background: var(--color-neutral-bg); border-radius: var(--radius-sm);
      padding: 10px; border: 1px solid var(--color-border); flex-shrink: 0;
    }
.widget-product-img img{ width: 100%; height: 100%; object-fit: contain; }
.widget-product-info h4{
      font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; color: var(--color-primary);
      line-height: 1.3; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
.widget-product:hover .widget-product-info h4{ color: var(--color-accent); }
.widget-product-info span{ font-size: 0.78rem; color: var(--color-text-muted); }
/* 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){
      .article-layout { grid-template-columns: 1fr 300px; gap: 30px; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }
/* page override */
@media (max-width: 992px){
      /* nav drawer styles are defined once in base.css */
      
      .article-layout { grid-template-columns: 1fr; }
      .sidebar { position: static; }
    }
/* page override */
@media (max-width: 768px){
      .footer-grid { grid-template-columns: 1fr; }
      .article-title { font-size: 1.8rem; }
      .article-hero { height: auto; padding: 80px 0 40px; }
      .article-hero-bg { opacity: 0.6; }
      .article-meta { flex-wrap: wrap; gap: 12px; }
      .article-content h2 { font-size: 1.5rem; }
    }