/* ============================================================
   DEVINE Catalog — front-end styles
   ============================================================ */
:root{
  --ind:#2E3191;        /* brand indigo */
  --ind-d:#232870;      /* darker indigo */
  --cy:#29ABE2;         /* brand cyan */
  --ink:#1f2430;        /* body text */
  --muted:#6b7385;
  --line:#e6eaf3;
  --bg:#f4f6fb;
  --card:#ffffff;
  --radius:14px;
  --shadow:0 6px 22px rgba(35,40,112,.08);
  --shadow-h:0 14px 34px rgba(35,40,112,.16);
  --wrap:1200px;
}

html{overflow-x:clip;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.55;
  overflow-x:clip; /* contain the off-canvas mobile drawer without breaking the sticky header */
}
a{text-decoration:none;transition:color .15s ease;}
.dv-wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px;}
img{max-width:100%;height:auto;}

/* ---------- utility bar ---------- */
.dv-utility{background:var(--ind-d);color:#c9cdf0;font-size:13px;}
.dv-utility-in{display:flex;align-items:center;justify-content:space-between;height:38px;}
.dv-utility a{color:#e7e9fb;margin-left:16px;}
.dv-utility a:hover{color:#fff;}
.dv-utility-contact{white-space:nowrap;}

/* ---------- header ---------- */
.dv-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60;box-shadow:0 2px 10px rgba(35,40,112,.05);}
.dv-header-in{display:flex;align-items:center;gap:22px;min-height:74px;}
.dv-brand img{height:46px;width:auto;}
.dv-nav{display:flex;align-items:center;gap:6px;margin-left:auto;}
.dv-nav-link{display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;
  font-size:15px;font-weight:600;color:var(--ink);padding:10px 14px;border-radius:9px;font-family:inherit;}
.dv-nav-link:hover,.dv-nav-link.is-active{color:var(--ind);background:#eef1fb;}
.dv-caret{font-size:11px;color:var(--cy);}
.dv-quote-btn{background:var(--ind);color:#fff;font-weight:700;font-size:14px;padding:9px 16px;border-radius:8px;white-space:nowrap;}
.dv-quote-btn:hover{background:var(--ind-d);color:#fff;}

/* dropdown */
.dv-nav-drop{position:relative;}
.dv-drop-panel{position:absolute;top:calc(100% + 8px);right:0;width:680px;max-width:calc(100vw - 32px);
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-h);
  padding:10px;display:none;grid-template-columns:repeat(3,1fr);gap:2px;z-index:70;
  max-height:min(74vh,600px);overflow-y:auto;overscroll-behavior:contain;}
.dv-drop-panel::-webkit-scrollbar{width:9px;}
.dv-drop-panel::-webkit-scrollbar-track{background:transparent;}
.dv-drop-panel::-webkit-scrollbar-thumb{background:#cdd5ea;border-radius:9px;border:2px solid #fff;}
.dv-drop-panel::-webkit-scrollbar-thumb:hover{background:#b4bee0;}
.dv-nav-drop.open .dv-drop-panel{display:grid;}
.dv-drop-panel a{padding:9px 12px;border-radius:8px;font-size:13.5px;line-height:1.35;color:var(--ink);}
.dv-drop-panel a:hover{background:#eef1fb;color:var(--ind);}

/* search */
.dv-search{display:flex;align-items:center;background:#f1f3fb;border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.dv-search input[type=search]{border:0;background:none;padding:9px 12px;font-size:14px;width:190px;outline:none;font-family:inherit;}
.dv-search button{border:0;background:none;cursor:pointer;padding:8px 12px;font-size:15px;color:var(--ind);}

/* burger (mobile only) */
.dv-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto;position:relative;z-index:70;}
.dv-burger span{width:24px;height:2px;background:var(--ind);border-radius:2px;transition:.2s;}
.dv-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.dv-burger.open span:nth-child(2){opacity:0;}
.dv-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- main / page ---------- */
.dv-main{min-height:50vh;}
.dv-page{padding:30px 20px 56px;}
.dv-empty{color:var(--muted);padding:40px 0;text-align:center;}

/* ---------- footer ---------- */
.dv-footer{background:var(--ind);color:#c9cdf0;margin-top:40px;}
.dv-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;padding:44px 20px 34px;}
.dv-footer h4{color:#fff;font-size:15px;margin:0 0 14px;letter-spacing:.02em;}
.dv-footer p{font-size:14px;color:#b9bdea;margin:0 0 16px;max-width:38ch;}
.dv-footer-col ul{list-style:none;margin:0;padding:0;}
.dv-footer-col li{margin:0 0 9px;font-size:14px;}
.dv-footer a{color:#dfe1fb;}
.dv-footer a:hover{color:#fff;}
.dv-brand-plate{display:inline-block;background:#fff;border-radius:12px;padding:12px 16px;box-shadow:0 10px 26px rgba(0,0,0,.22);margin-bottom:16px;}
.dv-brand-plate img{height:40px;width:auto;}
.dv-wa-btn{display:inline-block;background:#25D366;color:#fff;font-weight:700;padding:10px 18px;border-radius:10px;font-size:14px;}
.dv-wa-btn:hover{background:#1ebe5a;color:#fff;}
.dv-contact li{color:#c9cdf0;}
.dv-footer-bar{background:var(--ind-d);font-size:13px;color:#a9adde;}
.dv-footer-bar .dv-wrap{padding-top:16px;padding-bottom:16px;}

/* ---------- page head / toolbar ---------- */
.dv-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  margin:6px 0 24px;padding-bottom:18px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.dv-page-title{font-size:30px;line-height:1.1;margin:0;color:var(--ind-d);letter-spacing:-.01em;}
.dv-page-sub{margin:6px 0 0;color:var(--muted);font-size:14px;}
.dv-cat-filter{border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px 14px;
  font-size:14px;color:var(--ink);min-width:220px;cursor:pointer;font-family:inherit;box-shadow:var(--shadow);}
.dv-cat-filter:focus{outline:none;border-color:var(--cy);box-shadow:0 0 0 3px rgba(41,171,226,.18);}

/* ---------- breadcrumbs ---------- */
.dv-crumbs{font-size:13px;color:var(--muted);margin:0 0 8px;}
.dv-crumbs a{color:var(--ind);font-weight:600;}
.dv-crumbs a:hover{color:var(--cy);}
.dv-crumbs span{margin:0 6px;color:#c3c9d6;}
.dv-search-inline{background:#f1f3fb;}

/* ---------- product grid + card ---------- */
.dv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;}
.dv-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;}
.dv-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-h);border-color:#cfd6ee;}
.dv-card-img{position:relative;aspect-ratio:4/3;background:#fff;display:flex;align-items:center;justify-content:center;padding:16px;border-bottom:1px solid var(--line);}
.dv-card-img img{max-height:100%;width:auto;object-fit:contain;}
.dv-noimg{color:#c3c9d6;font-size:13px;}
.dv-card-body{padding:16px 17px 18px;display:flex;flex-direction:column;flex:1;}
.dv-card-code{display:inline-block;align-self:flex-start;background:#eef1fb;color:var(--ind);
  font-size:11px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:6px;margin-bottom:8px;}
.dv-card-title{font-size:16px;line-height:1.35;margin:0 0 8px;color:var(--ink);font-weight:700;}
.dv-card:hover .dv-card-title{color:var(--ind);}
.dv-card-desc{font-size:13px;color:var(--muted);margin:0 0 14px;line-height:1.5;}
.dv-card-cta{margin-top:auto;font-size:13px;font-weight:700;color:var(--cy);}

/* ============================================================
   Single product
   ============================================================ */
.dv-single{padding:26px 20px 60px;}
.dv-single .dv-crumbs{margin-bottom:20px;}
.dv-single-top{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;margin-bottom:20px;}

/* gallery */
.dv-gallery-main{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:26px;box-shadow:var(--shadow);overflow:hidden;}
.dv-gallery-main img{max-width:100%;max-height:100%;object-fit:contain;}
.dv-noimg-lg{color:#c3c9d6;}
.dv-zoom-hint{position:absolute;bottom:12px;right:14px;font-size:12px;color:var(--muted);background:rgba(255,255,255,.85);padding:4px 9px;border-radius:20px;}
.dv-thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
.dv-thumb{width:74px;height:74px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s;}
.dv-thumb img{max-width:100%;max-height:100%;object-fit:contain;}
.dv-thumb:hover{border-color:#c0c8e6;}
.dv-thumb.is-active{border-color:var(--cy);box-shadow:0 0 0 2px rgba(41,171,226,.25);}

/* info column */
.dv-single-cat{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--cy);margin-bottom:10px;}
.dv-single-title{font-size:30px;line-height:1.2;margin:0 0 12px;color:var(--ind-d);letter-spacing:-.01em;}
.dv-single-code{margin:0 0 14px;font-size:14px;color:var(--muted);}
.dv-single-code strong{color:var(--ink);}
.dv-single-intro{font-size:16px;line-height:1.6;color:#414a5c;margin:0 0 24px;}
.dv-single-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px;}
.dv-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:700;padding:14px 26px;border-radius:11px;transition:transform .12s,box-shadow .12s,background .15s;}
.dv-btn-primary{background:var(--ind);color:#fff;box-shadow:0 8px 20px rgba(46,49,145,.28);}
.dv-btn-primary:hover{background:var(--ind-d);transform:translateY(-2px);}
.dv-btn-wa{background:#25D366;color:#fff;box-shadow:0 8px 20px rgba(37,211,102,.28);}
.dv-btn-wa:hover{background:#1ebe5a;color:#fff;transform:translateY(-2px);}
.dv-single-trust{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 22px;}
.dv-single-trust li{font-size:13.5px;color:var(--muted);position:relative;padding-left:22px;}
.dv-single-trust li::before{content:"\2713";position:absolute;left:0;color:var(--cy);font-weight:700;}

/* body blocks */
.dv-single-body{margin-top:26px;}
.dv-block{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;margin-bottom:22px;box-shadow:var(--shadow);}
.dv-block-title{font-size:19px;margin:0 0 16px;color:var(--ind-d);padding-bottom:12px;border-bottom:2px solid #eef1fb;}
.dv-prose{font-size:15px;line-height:1.7;color:#3a4252;}
.dv-prose h3{font-size:16px;color:var(--ind-d);margin:22px 0 8px;}
.dv-prose h3:first-child{margin-top:0;}
.dv-prose p{margin:0 0 12px;}
.dv-prose ul{margin:0 0 14px;padding-left:20px;}
.dv-prose li{margin:0 0 6px;}

/* spec table */
.dv-spec-wrap{overflow-x:auto;}
.dv-spec-wrap table,.spec-table{width:100%;border-collapse:collapse;font-size:14.5px;}
.dv-spec-wrap th,.dv-spec-wrap td,.spec-table th,.spec-table td{border:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top;}
.dv-spec-wrap th,.spec-table th{background:#f5f7fd;color:var(--ind-d);font-weight:700;width:34%;white-space:nowrap;}
.dv-spec-wrap tr:nth-child(even) td{background:#fbfcfe;}

/* related */
.dv-related{margin-top:30px;}
.dv-grid-4{grid-template-columns:repeat(4,1fr);}

/* lightbox */
.dv-lightbox{position:fixed;inset:0;background:rgba(20,24,55,.86);z-index:200;display:flex;align-items:center;justify-content:center;padding:30px;cursor:zoom-out;}
.dv-lightbox img{max-width:92vw;max-height:90vh;object-fit:contain;border-radius:8px;background:#fff;}
.dv-lb-close{position:absolute;top:20px;right:26px;background:none;border:0;color:#fff;font-size:40px;line-height:1;cursor:pointer;}

/* ---------- inquiry modal ---------- */
.dv-modal[hidden]{display:none;}
.dv-modal{position:fixed;inset:0;background:rgba(20,24,55,.55);z-index:220;display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto;}
.dv-modal-box{position:relative;background:#fff;border-radius:16px;box-shadow:0 30px 70px rgba(20,24,55,.4);width:min(480px,100%);padding:30px 30px 26px;max-height:92vh;overflow:auto;}
.dv-modal-close{position:absolute;top:12px;right:14px;background:none;border:0;font-size:30px;line-height:1;color:#9aa2b6;cursor:pointer;}
.dv-modal-close:hover{color:var(--ind);}
.dv-modal-title{margin:0 0 4px;font-size:21px;color:var(--ind-d);}
.dv-modal-product{margin:0 0 18px;font-size:13.5px;color:var(--cy);font-weight:700;}
.dv-field{display:block;margin:0 0 14px;font-size:13.5px;font-weight:600;color:var(--ink);}
.dv-field span{color:#e05a5a;}
.dv-field input,.dv-field textarea{display:block;width:100%;margin-top:6px;border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;font-size:14px;font-family:inherit;font-weight:400;color:var(--ink);}
.dv-field input:focus,.dv-field textarea:focus{outline:none;border-color:var(--cy);box-shadow:0 0 0 3px rgba(41,171,226,.18);}
.dv-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.dv-btn-block{width:100%;margin-top:4px;}
.dv-form-status{font-size:13.5px;margin:2px 0 12px;min-height:1px;color:var(--muted);}
.dv-form-status.is-error{color:#c62828;}
.dv-thankyou{background:#e9f9ef;border:1px solid #bfe8cd;color:#1c7a3f;border-radius:12px;padding:22px;text-align:center;font-size:15px;line-height:1.5;}
.dv-modal-alt{text-align:center;font-size:13px;color:var(--muted);margin:14px 0 0;}
.dv-modal-alt a{color:#1ebe5a;font-weight:700;}

/* ---------- pagination ---------- */
.dv-pagination{display:flex;justify-content:center;margin:34px 0 6px;}
.dv-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;
  padding:0 12px;margin:0 4px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--ink);
  font-size:14px;font-weight:600;box-shadow:var(--shadow);}
.dv-pagination .page-numbers:hover{border-color:var(--cy);color:var(--ind);}
.dv-pagination .page-numbers.current{background:var(--ind);border-color:var(--ind);color:#fff;}
.dv-pagination .page-numbers.dots{border:0;background:none;box-shadow:none;}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px){
  .dv-footer-grid{grid-template-columns:1fr 1fr;}
  .dv-single-top{grid-template-columns:1fr;gap:26px;}
  .dv-single-title{font-size:25px;}
  .dv-grid-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
  .dv-burger{display:flex;}
  .dv-nav{position:fixed;inset:0 0 0 auto;width:min(84vw,340px);background:#fff;flex-direction:column;
    align-items:stretch;gap:2px;padding:84px 18px 24px;margin:0;transform:translateX(100%);
    transition:transform .25s ease;box-shadow:-16px 0 40px rgba(0,0,0,.18);z-index:65;overflow:auto;}
  .dv-nav.open{transform:translateX(0);}
  .dv-nav-link{width:100%;justify-content:flex-start;}
  .dv-nav-drop{width:100%;}
  .dv-drop-panel{position:static;display:none;grid-template-columns:1fr;box-shadow:none;border:0;
    border-left:2px solid var(--line);border-radius:0;margin:2px 0 6px 10px;min-width:0;padding:2px 0;}
  .dv-nav-drop.open .dv-drop-panel{display:grid;}
  .dv-search{width:100%;margin-top:8px;}
  .dv-search input[type=search]{width:100%;}
}
@media (max-width:560px){
  .dv-utility-msg{display:none;}
  .dv-utility-in{justify-content:center;}
  .dv-utility-contact a[href^="mailto:"]{display:none;} /* keep the tappable phone; email is in the footer */
  .dv-utility-contact a{margin-left:0;}
  .dv-page-title{font-size:23px;}
  .dv-footer-grid{grid-template-columns:1fr;gap:26px;}
}