/* ============================================================
   DW Panel v2 — Frontend CSS
   ============================================================ */

:root {
  --color-primary:   #2563eb;
  --color-secondary: #64748b;
  --color-accent:    #f59e0b;
  --color-bg:        #ffffff;
  --color-text:      #1e293b;
  --font-heading:    'Montserrat', sans-serif;
  --font-body:       'Inter', sans-serif;
  --border-radius:   8px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); margin: 0; line-height: 1.6; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); line-height: 1.25; margin: 0 0 1rem; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { opacity: .85; }
img { max-width: 100%; height: auto; }

.dw-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }

.dw-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .65rem 1.5rem; border-radius: var(--border-radius); font-family: var(--font-body); font-size: .95rem; font-weight: 600; cursor: pointer; border: 2px solid transparent; transition: all .2s; text-decoration: none; }
.dw-btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.dw-btn-primary:hover { opacity: .9; color: #fff; }
.dw-btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.dw-btn-outline:hover { background: var(--color-primary); color: #fff; }
.dw-btn-accent { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.dw-btn-white { background: #fff; color: var(--color-primary); border-color: #fff; }

.dw-section { padding: 5rem 0; }
.dw-section-sm { padding: 3rem 0; }
.dw-section-title { text-align: center; margin-bottom: 3rem; }
.dw-section-title .label { display: inline-block; color: var(--color-primary); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; }
.dw-section-title h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--color-text); margin-bottom: .75rem; }
.dw-section-title p { color: var(--color-secondary); max-width: 560px; margin: 0 auto; font-size: 1.05rem; }

.dw-card { background: #fff; border: 1px solid #e2e8f0; border-radius: var(--border-radius); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.dw-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,.1); transform: translateY(-2px); }

.dw-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.dw-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.dw-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

@media (max-width: 1024px) { .dw-grid-4 { grid-template-columns: repeat(2, 1fr); } .dw-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dw-grid-4, .dw-grid-3, .dw-grid-2 { grid-template-columns: 1fr; } }

.dw-badge { display: inline-block; padding: .25rem .75rem; border-radius: 99px; font-size: .78rem; font-weight: 600; }
.dw-badge-primary { background: rgba(37,99,235,.1); color: var(--color-primary); }
.dw-badge-accent  { background: rgba(245,158,11,.1); color: #b45309; }

.dw-form-group { margin-bottom: 1.25rem; }
.dw-label { display: block; font-size: .875rem; font-weight: 500; color: var(--color-text); margin-bottom: .4rem; }
.dw-input, .dw-textarea, .dw-select { width: 100%; padding: .7rem 1rem; border: 1px solid #e2e8f0; border-radius: var(--border-radius); font-family: var(--font-body); font-size: .95rem; color: var(--color-text); background: #fff; transition: border-color .2s, box-shadow .2s; }
.dw-input:focus, .dw-textarea:focus, .dw-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.dw-textarea { resize: vertical; min-height: 120px; }

.dw-breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--color-secondary); padding: 1rem 0; flex-wrap: wrap; }
.dw-breadcrumb a { color: var(--color-secondary); }
.dw-breadcrumb a:hover { color: var(--color-primary); }
.dw-breadcrumb .sep { color: #cbd5e1; }
.dw-breadcrumb .current { color: var(--color-text); font-weight: 500; }

.dw-pagination { display: flex; justify-content: center; gap: .4rem; margin-top: 3rem; flex-wrap: wrap; }
.dw-pagination a, .dw-pagination span { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--border-radius); border: 1px solid #e2e8f0; font-size: .875rem; color: var(--color-text); transition: all .15s; }
.dw-pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.dw-pagination .active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.dw-slider { position: relative; overflow: hidden; }
.dw-slide { display: none; position: relative; min-height: 560px; align-items: center; }
.dw-slide.active { display: flex; }
.dw-slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.dw-slide-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.dw-slide-content { position: relative; z-index: 2; color: #fff; max-width: 640px; }
.dw-slide-content h1 { color: #fff; font-size: clamp(1.75rem,5vw,3rem); margin-bottom: 1rem; }
.dw-slide-content p  { font-size: 1.1rem; margin-bottom: 1.5rem; opacity: .9; }
.dw-slider-dots { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); display: flex; gap: .5rem; z-index: 3; }
.dw-slider-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; transition: background .2s, transform .2s; border: none; }
.dw-slider-dot.active { background: #fff; transform: scale(1.3); }
.dw-slider-prev, .dw-slider-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; background: rgba(255,255,255,.15); border: none; color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.dw-slider-prev { left: 1rem; }
.dw-slider-next { right: 1rem; }
.dw-slider-prev:hover, .dw-slider-next:hover { background: rgba(255,255,255,.3); }

.dw-counter-section { background: var(--color-primary); color: #fff; }
.dw-counter-val { font-family: var(--font-heading); font-size: clamp(2rem,5vw,3.5rem); font-weight: 800; line-height: 1; }
.dw-counter-label { font-size: .9rem; opacity: .85; margin-top: .3rem; }

.dw-product-card .dw-product-img { aspect-ratio: 4/3; overflow: hidden; }
.dw-product-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.dw-product-card:hover img { transform: scale(1.04); }
.dw-product-card .body { padding: 1rem; }
.dw-product-price { font-size: 1.25rem; font-weight: 700; color: var(--color-primary); }
.dw-product-price-old { font-size: .9rem; color: #94a3b8; text-decoration: line-through; margin-left: .4rem; }

.dw-post-card .dw-post-img { aspect-ratio: 16/9; overflow: hidden; }
.dw-post-card img { width:100%;height:100%;object-fit:cover;transition:transform .3s; }
.dw-post-card:hover img { transform: scale(1.04); }
.dw-post-card .body { padding: 1.25rem; }
.dw-post-date { font-size: .78rem; color: var(--color-secondary); margin-bottom: .4rem; }
.dw-post-title { font-size: 1.05rem; font-weight: 600; margin-bottom: .4rem; }
.dw-post-excerpt { font-size: .875rem; color: var(--color-secondary); }

.dw-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: .75rem; }
.dw-gallery-item { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--border-radius); cursor: pointer; }
.dw-gallery-item img { width:100%;height:100%;object-fit:cover;transition:transform .3s; }
.dw-gallery-item:hover img { transform: scale(1.06); }
.dw-gallery-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; color: #fff; font-size: 1.5rem; }
.dw-gallery-item:hover .dw-gallery-overlay { opacity: 1; }

#dw-lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 9999; align-items: center; justify-content: center; }
#dw-lightbox.show { display: flex; }
#dw-lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 8px; }
#dw-lightbox-close { position: absolute; top: 1rem; right: 1.5rem; color: #fff; font-size: 2rem; cursor: pointer; background: none; border: none; }

.dw-whatsapp-float { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 56px; height: 56px; background: #25d366; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.6rem; box-shadow: 0 4px 16px rgba(37,211,102,.4); z-index: 999; text-decoration: none; transition: transform .2s; }
.dw-whatsapp-float:hover { transform: scale(1.1); color: #fff; }

@media (max-width: 768px) { .dw-section { padding: 3rem 0; } .dw-slide { min-height: 380px; } }