/* =========================
   EFLC PRO – Base UI Reset
   (cleaned + de-duped, minimal)
========================= */

/* --- CSS Variables --- */
:root{
  --bg:#f5f6f8;
  --card:#ffffff;
  --border:#e5e7eb;
  --text:#0b1f3a;
  --muted:#6b7280;
  --accent:#0b1f3a;
  --accent-soft:#f0f3f7;
  --danger:#b42318;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
}

/* --- Reset / Normalize --- */
*,
*::before,
*::after{ box-sizing:border-box; }

html,
body{
  margin:0;
  padding:0;
}

body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;
  line-height:1.45;
  color:var(--text);
  background:var(--bg);
}

/* --- Links --- */
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* --- Headings --- */
h1,h2,h3,h4{ margin:0 0 10px; line-height:1.25; }
h1{ font-size:22px; }
h2{ font-size:18px; }
h3{ font-size:15px; }
h4{ font-size:14px; }

/* --- Utilities --- */
.muted{ color:var(--muted); }
.small{ font-size:12px; }

/* --- Forms --- */
input,
select,
button{
  font-family:inherit;
  font-size:14px;
}

input[type="text"],
input[type="number"],
select{
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:#fff;
}

input:focus,
select:focus{
  outline:none;
  border-color:var(--accent);
}

button{
  padding:10px 14px;
  border-radius:var(--radius-sm);
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
button:hover{ filter:brightness(0.95); }

button[disabled],
input[disabled]{ opacity:0.55; cursor:not-allowed; }

/* --- Layout wrapper --- */
.page-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:12px;
}

/* --- Cards (generic) --- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
}
.card-row{
  display:flex;
  gap:14px;
  align-items:center;
}

/* --- Tables (base) ---
   KEEP: used by checkout/drawer mini tables
*/
table{
  width:100%;
  border-collapse:collapse;
}
th,td{ text-align:left; }

th{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:#374151;
  background:#f7f7f7;
}

/* --- Images --- */
img{
  max-width:100%;
  height:auto;
  display:block;
}

/* --- Pills / badges --- */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}
.badge-danger{
  background:var(--danger);
  color:#fff;
}
/* =========================================
   Checkout - Mobile table rescue (pro-mini)
========================================= */
@media (max-width: 900px){

  .pro-mini{
    width:100%;
    border-collapse:separate;
    border-spacing:0 10px; /* space between rows */
  }

  .pro-mini thead{
    display:none; /* hide header on mobile */
  }

  .pro-mini,
  .pro-mini tbody,
  .pro-mini tr,
  .pro-mini td{
    display:block;
    width:100%;
  }

  .pro-mini tr{
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    padding:12px 12px 10px;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
  }

  .pro-mini td{
    border:0;
    padding:6px 0;
    text-align:left !important; /* override .pro-right */
  }

  /* Make label/value rows */
  .pro-mini td.pro-right{
    display:flex;
    justify-content:space-between;
    font-weight:700;
  }

  /* Add labels before numeric values */
  .pro-mini tr td:nth-child(2)::before{ content:"Qty"; font-weight:600; color:var(--muted); }
  .pro-mini tr td:nth-child(3)::before{ content:"Site"; font-weight:600; color:var(--muted); }
  .pro-mini tr td:nth-child(4)::before{ content:"Pro"; font-weight:600; color:var(--muted); }
  .pro-mini tr td:nth-child(5)::before{ content:"Line"; font-weight:600; color:var(--muted); }

  .pro-mini tr td:nth-child(n+2)::before{
    margin-right:12px;
  }

  /* Prevent overflow from long names/models */
  .pro-mini *{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
}
/* =========================================
   PO Cart - Mobile table -> card layout
   Scoped to cart page only
========================================= */
@media (max-width: 900px){

  .page-cart table{
    width:100% !important;
    max-width:100% !important;
  }

  .page-cart table thead{ display:none !important; }

  .page-cart table,
  .page-cart table tbody,
  .page-cart table tr,
  .page-cart table td{
    display:block !important;
    width:100% !important;
  }

  .page-cart table tr{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:12px 12px 10px;
    margin:0 0 10px;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
  }

  .page-cart table td{
    border:0 !important;
    padding:6px 0 !important;
    text-align:left !important;
  }

  .page-cart table td:first-child a{
    display:inline-block;
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .page-cart table td:nth-child(2),
  .page-cart table td:nth-child(3),
  .page-cart table td:nth-child(4),
  .page-cart table td:nth-child(5),
  .page-cart table td:nth-child(6){
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:12px !important;
  }

  .page-cart table td:nth-child(2)::before{ content:"Model"; color:#6b7280; font-weight:700; }
  .page-cart table td:nth-child(3)::before{ content:"Site Price"; color:#6b7280; font-weight:700; }
  .page-cart table td:nth-child(4)::before{ content:"Pro Price"; color:#6b7280; font-weight:700; }
  .page-cart table td:nth-child(5)::before{ content:"Qty"; color:#6b7280; font-weight:700; }
  .page-cart table td:nth-child(6)::before{ content:"Remove"; color:#6b7280; font-weight:700; }

  .page-cart table td:nth-child(5) input[type="number"]{
    width:120px !important;
    max-width:52% !important;
  }

  .page-cart table td:nth-child(6) button{
    width:auto !important;
    padding:10px 12px !important;
    border-radius:12px !important;
  }

  .page-cart table td:nth-child(2){
    overflow-wrap:anywhere;
    word-break:break-word;
  }
}

/* --- Footer spacing fix --- */
footer{ margin-top:24px; }

/* =========================
   EFLC PRO – Category/Search Layout
========================= */

.pro-wrap{
  display:flex;
  gap:18px;
  align-items:flex-start;
}

.pro-side{
  width:240px;
  flex:0 0 240px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card);
  padding:12px;
}

.pro-main{
  flex:1 1 auto;
  min-width:0;
}

.pro-side h3{
  margin:0 0 8px;
  font-size:14px;
  letter-spacing:.2px;
}

/* Force vertical list even if other styles hit UL/LI */
.pro-catlist,
.pro-catlist li{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}

.pro-catlist li{
  display:block !important;
  width:100% !important;
  float:none !important;
  clear:both !important;
}

.pro-catlist a{
  display:block !important;
  width:100% !important;
  padding:8px 10px;
  border-radius:8px;
  color:var(--text);
  font-size:14px;
  line-height:1.2;
  text-decoration:none;
}
.pro-catlist a:hover{
  background:var(--accent-soft);
  text-decoration:none;
}

.pro-catlist a.is-active{
  background:none;
  color:red;
  font-weight:800;
}

.pro-cat-main a{ font-weight:800; }

.pro-cat-sub a{
  padding-left:18px;
  font-weight:100;
  font-size:13px;
}

.pro-divider{
  height:1px;
  background:#eee;
  margin:10px 0;
}

/* Header bar */


.pro-headerbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.pro-headerbar h1{
  margin:0;
  font-size:22px;
}

.pro-actions{
  font-size:13px;
  white-space:nowrap;
}

.pro-actions a{
  color:var(--text);
  font-weight:600;
  text-decoration:none;
}
.pro-actions a:hover{ text-decoration:underline; }

/* Subcategory cards */
.pro-subgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px;
  margin-top:10px;
}

.pro-subcard{
  display:block;
  padding:14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
  color:var(--text);
  text-decoration:none;
}
.pro-subcard:hover{
  background:var(--accent-soft);
  text-decoration:none;
}

.pro-subname{
  font-weight:800;
  margin:0 0 6px;
  line-height:1.2;
}

.pro-subhint{
  font-size:12px;
  color:var(--muted);
  margin:0;
}

/* =========================
   Result rows (Category + Search)
========================= */

.pro-results{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.pro-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
}

.pro-row-left{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  flex:1 1 auto;
}

.pro-row-thumb{
  width:76px;
  height:76px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--card);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 76px;
}

.pro-row-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.pro-row-mid{ min-width:0; }

.pro-row-title{
  font-weight:900;
  line-height:1.2;
  margin:0 0 4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pro-row-meta{
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
}
.pro-row-meta strong{
  color:var(--text);
  font-weight:900;
}

.pro-row-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}

/* PO inline form (shared) */
.pro-poform{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  white-space:nowrap;
}

.pro-poform input[type="number"]{
  width:70px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:8px;
}

/* keep: tiny safety override */
.pro-poform button{
  padding:9px 12px;
  border-radius:8px;
}
.pro-poform button:hover{ filter:brightness(0.95); }

.pro-row-proprice{
  font-size:22px;
  font-weight:900;
  line-height:1;
}

.pro-row-prolabel{
  margin-top:4px;
  font-size:11px;
  font-weight:900;
  color:var(--muted);
  letter-spacing:.02em;
}

/* Pagination */
.pro-pagination{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-end;
  margin:12px 0 0;
  font-size:13px;
}

.pro-pagination a{
  color:var(--text);
  font-weight:700;
  padding:7px 10px;
  border:1px solid #d7d7d7;
  border-radius:8px;
  background:var(--card);
  text-decoration:none;
}
.pro-pagination a:hover{
  background:var(--accent-soft);
  text-decoration:none;
}

.pro-pagination .muted{
  color:var(--muted);
  font-weight:600;
}

/* Responsive */
@media (max-width:900px){
  .pro-wrap{ flex-direction:column; }
  .pro-side{ width:auto; flex:1 1 auto; }

  .pro-row{ flex-direction:column; align-items:stretch; }
  .pro-row-actions{ justify-content:space-between; }
}

/* =========================================
   EFLC Pro - Mobile Rescue CSS (minimal)
   <= 720px
   NOTE: Removed global TABLE->CARD conversion
========================================= */
@media (max-width:720px){
  html,
  body{
    max-width:100%;
    overflow-x:hidden;
  }

  *{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .pro-side,
  .pro-subcard,
  .pro-main{ width:100%; }

  /* Header spacing tighten (safe) */
  .pro-topbar,
  .pro-header,
  .pro-headerbar,
  header{
    padding-top:6px !important;
    padding-bottom:6px !important;
  }
.pro-header {position: fixed!important;}
.pro-header-inner {padding: 0px 8px!important;}
.pro-brand img {height:21px!important;}
main {
    margin-top: 57px !important;
}
  .pro-logo,
  .pro-brand,
  .site-branding{
    margin:0 !important;
    padding:0 !important;
  }

  /* MOBILE NAV tweaks you already relied on */
  .pro-left span {display:none;}
  .pro-nav a:first-child{ display:none !important; }

  .pro-nav a.pro-cart,
  .pro-nav a[href="/app/logout.php"]{
    width:22px !important;
    height:44px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:0 !important;
  }

  .pro-nav a.pro-cart:before,
  .pro-nav a[href="/app/logout.php"]:before{
    font-family:FontAwesome !important;
    font-size:20px !important;
    line-height:1 !important;
    display:block !important;
    color:var(--text) !important;
  }

  .pro-nav a.pro-cart:before{ content:"\f07a"; }
  .pro-nav a[href="/app/logout.php"]:before{ content:"\f08b"; }

  .pro-tiles{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .pro-tile{ min-height:88px; }
}

/* =========================
   Product page
========================= */

.eflcQtyWrap{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.eflcQtyBtn{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.15);
  background:rgba(0,0,0,.50);
  cursor:pointer;
  font-weight:900;
  line-height:1;
}
.eflcQtyBtn:active{ transform:translateY(1px); }

.eflcQtyInput{
  width:78px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.15);
  padding:0 10px;
  font-weight:800;
}

.eflcPoBtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.eflcPoLight{
  width:10px;
  height:10px;
  border-radius:999px;
  flex:0 0 auto;
}

/* Timed discount badge */
.eflcTimedBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:10px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
  border:1px solid rgba(0,0,0,.15);
  background:rgba(239,178,0,.18);
}

/* =========================
   Checkout
========================= */

.pro-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:14px;
  align-items:start;
}

.pro-card{
  padding:12px;
  border:1px solid #ddd;
  border-radius:10px;
  background:#fff;
  margin-bottom:14px;
}

.pro-cartbox{
  position:sticky;
  top:12px;
}

.pro-mini{
  width:100%;
  border-collapse:collapse;
}

.pro-mini th,
.pro-mini td{
  padding:8px 6px;
  border-bottom:1px solid #f1f1f1;
  vertical-align:top;
  font-size:13px;
}

.pro-mini th{
  text-transform:uppercase;
  letter-spacing:.35px;
  font-size:11px;
  color:#333;
  background:#f7f7f7;
}

.pro-mini tr:last-child td{ border-bottom:none; }

.pro-right{ text-align:right; white-space:nowrap; }
.pro-muted{ color:#666; font-size:12px; }
.pro-money{ font-weight:900; white-space:nowrap; }

.pro-protag,
.eflcProTag{
  display:inline-block;
  margin-left:6px;
  font-size:11px;
  font-weight:900;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(0,0,0,.04);
  opacity:.85;
  vertical-align:middle;
}

@media (max-width:900px){
  .pro-grid{ grid-template-columns:1fr; }
  .pro-cartbox{ position:static; }
}

/* =========================
   Cart (shared bits)
========================= */

.eflcLight{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:999px;
  box-shadow:0 0 0 3px rgba(0,0,0,.08);
  vertical-align:middle;
  margin-right:8px;
}

.eflcPriceStrike{
  text-decoration:line-through;
  opacity:.55;
  font-weight:700;
}

.eflcPriceNow{ font-weight:900; }

/* =========================
   Pro Banner Slider (CSS-only)
========================= */

.pro-slider{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--card);
  margin:12px 0 20px;
}

.pro-slides{
  display:flex;
  width:300%;
  transform:translateX(0);
  animation:proSlide 18s infinite;
}

.pro-slide{
  width:33.333333%;
  padding:26px 28px;
  box-sizing:border-box;
}

.pro-slide h2{
  margin:0 0 8px;
  font-size:20px;
  font-weight:800;
  color:var(--text);
}

.pro-slide p{
  margin:0;
  max-width:760px;
  font-size:14px;
  color:var(--muted);
  line-height:1.5;
}

@keyframes proSlide{
  0%,28%{ transform:translateX(0); }
  33%,61%{ transform:translateX(-33.333333%); }
  66%,94%{ transform:translateX(-66.666666%); }
  100%{ transform:translateX(0); }
}

@media (prefers-reduced-motion:reduce){
  .pro-slides{ animation:none; }
}

/* =========================
   Category Tiles
========================= */

.pro-tiles{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px;
  margin-top:10px;
}

.pro-tile{
  display:block;
  padding:16px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--card);
  color:var(--text);
  text-decoration:none;
}
.pro-tile:hover{
  background:var(--accent-soft);
  text-decoration:none;
}

.pro-tile-title{
  font-weight:800;
  font-size:15px;
  line-height:1.2;
  margin:0;
}

.pro-tile-sub{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
}

/* =========================
   Header
========================= */

.pro-header{
  margin:0 auto;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid #e5e5e5;
}
.pro-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:#fff; /* important so content doesn't show through */
}
.pro-header-inner{
  max-width:1100px;
  margin:0 auto;
  padding:6px 6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.pro-left{
  display:flex;
  align-items:center;
  gap:18px;
  flex:1;
  min-width:0;
}

.pro-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#0b1f3a;
  font-weight:800;
  font-size:16px;
  white-space:nowrap;
  flex:0 0 auto;
}

.pro-brand img{
  height:32px;
  width:auto;
  display:block;
}

.pro-header-search{
  flex:1 1 auto;
  display:flex;
  gap:6px;
  min-width:0;
}

.pro-searchwrap{
  position:relative;
  width:100%;
  min-width:0;
}

.pro-header-search input{
  width:100%;
  padding:9px 12px;
  font-size:14px;
  border:1px solid #d0d0d0;
  border-radius:8px;
}

.pro-header-search button{
  padding:9px 14px;
  font-size:14px;
  font-weight:600;
  border:1px solid #d0d0d0;
  border-radius:8px;
  background:gray;
  cursor:pointer;
}

/* Search suggestions */
.pro-suggest{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  background:#fff;
  border:1px solid #d0d0d0;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  z-index:9999;
}

.pro-suggest .item{
  padding:10px 12px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:14px;
}

.pro-suggest .item:hover{ background:#f4f6f8; }
.pro-suggest .title{ font-weight:800; color:#0b1f3a; }
.pro-suggest .muted{ color:#666; font-size:12px; }

/* Nav */
.pro-nav{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  flex:0 0 auto;
}

.pro-nav a{
  text-decoration:none;
  color:#0b1f3a;
}

.pro-nav a:hover{ text-decoration:underline; }

.pro-cart{ font-weight:800; }

/* ======================
   Cart Drawer
====================== */

.pro-drawer-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:10000;
}

.pro-drawer{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:420px;
  max-width:92vw;
  background:#fff;
  border-left:1px solid #e5e5e5;
  box-shadow:-16px 0 38px rgba(0,0,0,.18);
  transform:translateX(102%);
  transition:transform .22s ease;
  z-index:10001;
  display:flex;
  flex-direction:column;
}

.pro-drawer.open{ transform:translateX(0); }

.pro-drawer-backdrop.open{
  opacity:1;
  pointer-events:auto;
}

.pro-drawer-head{
  padding:14px 14px 10px;
  border-bottom:1px solid #eee;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.pro-drawer-title{
  font-size:16px;
  font-weight:900;
  color:#0b1f3a;
}

.pro-drawer-close{
  border:1px solid #d0d0d0;
  background:black;
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:800;
}

.pro-drawer-body{
  padding:12px 14px;
  overflow:auto;
  flex:1 1 auto;
}

.pro-drawer-foot{
  padding:12px 14px;
  border-top:1px solid #eee;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}

.pro-drawer-btn{
  display:inline-block;
  padding:10px 12px;
  border:1px solid #d0d0d0;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  font-weight:900;
  text-decoration:none;
  color:#0b1f3a;
  white-space:nowrap;
}

.pro-drawer-btn.primary{
  border-color:#0b1f3a;
  background:#0b1f3a;
  color:#fff;
}

/* Mini table inside drawer */
.pro-drawer-mini{
  width:100%;
  border-collapse:collapse;
}

.pro-drawer-mini th,
.pro-drawer-mini td{
  padding:9px 6px;
  border-bottom:1px solid #f1f1f1;
  vertical-align:top;
  font-size:13px;
}

.pro-drawer-mini th{
  text-transform:uppercase;
  letter-spacing:.35px;
  font-size:11px;
  color:#333;
  background:#f7f7f7;
}

.pro-drawer-mini tr:last-child td{ border-bottom:none; }
.pro-drawer-right{ text-align:right; white-space:nowrap; }
.pro-drawer-muted{ color:#666; font-size:12px; margin-top:6px; }

/* Mobile: bottom sheet */
@media (max-width:860px){
  .pro-header{ flex-wrap:wrap;top:0;   position:sticky;}
  .pro-left{ width:100%; }
  .pro-header-search{ max-width:100%; }

  .pro-drawer{
    width:100vw;
    max-width:100vw;
    height:78vh;
    top:auto;
    bottom:0;
    right:0;
    border-left:none;
    border-top:1px solid #e5e5e5;
    box-shadow:0 -16px 38px rgba(0,0,0,.18);
    transform:translateY(102%);
  }

  .pro-drawer.open{ transform:translateY(0); }
}