/* ============================================
   Sunmart Group - Responsive Framework
   Applies to all pages. Keeps original visual
   style (orange #FF9000 menus, light blue bg)
   while making layout fluid & mobile-friendly.
   ============================================ */

/* --- global reset / base --- */
html { -webkit-text-size-adjust:100%; }
body {
  font-family: Verdana, Arial, sans-serif;
  font-size:12px;
  line-height:1.5;
  color:#333;
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
/* box-sizing only for our own layout containers (do NOT touch legacy elements) */
.sm-wrap, .sm-header, .sm-body, .sm-side, .sm-main, .sm-footer,
.sm-section, .sm-title, .sm-text, .sm-banner {
  box-sizing:border-box;
}

/* --- fluid layout containers --- */
.sm-wrap { max-width:1200px; margin:0 auto; padding:0 8px; }
/* main content wrapper stretches to fill space above footer (kills white gap) */
.sm-wrap:not(.sm-header) { flex:1; width:100%; display:flex; flex-direction:column; }
.sm-header { text-align:left; padding:15px 0 31px; width:100%; }
.sm-logo { display:block; max-width:100%; height:auto; }
.sm-body { display:flex; align-items:stretch; gap:0; padding:30px 0 4px; background:transparent; flex:1; }
.sm-side { width:246px; flex:0 0 246px; }
.sm-main { flex:1 1 0; min-width:0; background:#F8F8F8; padding:10px 14px; margin-left:36px; }
.sm-text { line-height:28px; text-align:justify; text-justify:inter-word; }
.sm-section { margin-left:0; margin-top:10px; }
.sm-footer { text-align:center; padding:0; margin-top:auto; }
.sm-clear { clear:both; }

/* --- product grid (Product.asp): 1 per row, 75% total, fixed 620px image on desktop --- */
.sm-prod-grid { width:75%; margin:0 auto; }
.sm-prod-cell { vertical-align:top; }
.sm-prod-cell > table > tbody > tr > td,
.sm-prod-cell > table > tr > td { display:block; width:100% !important; margin:0 0 4px; }
.sm-prod-cell > table > tbody > tr > td > p,
.sm-prod-cell > table > tr > td > p { margin:0 !important; line-height:24px; }
.sm-prod-cell > table > tbody > tr > td[height],
.sm-prod-cell > table > tr > td[height] { height:24px !important; }
.sm-prod-cell table table { width:auto !important; height:auto !important; margin:0 auto !important; border-collapse:collapse !important; }
.sm-prod-cell img { width:620px !important; height:auto !important; display:block !important; margin:0 auto !important; }
.sm-prod-cell table table tr { height:auto !important; line-height:0 !important; font-size:0 !important; }
.sm-prod-cell table table td { display:table-cell !important; line-height:0 !important; font-size:0 !important; padding:0 !important; vertical-align:top !important; height:auto !important; }
.sm-prod-cell table table p { margin:0 !important; padding:0 !important; line-height:0 !important; font-size:0 !important; }
.sm-prod-cell table table a { display:block !important; line-height:0 !important; font-size:0 !important; }
.sm-prod-cell td[height] p { text-align:center !important; }

/* --- original orange dropdown menu (KEEP as-is) --- */
#con { margin:0 auto; width:275px; }
ul.menu { margin:0; padding:0; list-style-type:none; text-align:left; }
ul.menu * { margin:0; padding:0; }
ul.menu a { display:block; color:#000; text-decoration:none; height:25px; line-height:25px; text-align:left; }
ul.menu li { position:relative; float:left; margin-right:0; }
ul.menu ul { position:absolute; top:0; left:275px; background:#FF9000; display:none; opacity:0; list-style:none; }
ul.menu ul li { position:relative; border:1px solid #ffab3e; border-top:none; width:275px; margin:0; }
ul.menu ul li a { display:block; padding:3px 7px 5px; background-color:#FF9000; color:#fff; }
ul.menu ul li a:hover { background-color:#fa7e04; color:#fff2ee; }
ul.menu ul ul { left:275px; top:-1px; }
ul.menu .menulink { border:0 solid #ffab3e; padding:5px 7px 7px; font-weight:bold; width:275px; text-align:left; font-family:Verdana; }
ul.menu .sub { background:#fa7e04 url(/images/arrow.gif) 100% 0 no-repeat; }
ul.menu .topline { border-top:1px solid #aaa; }
ul.menu .subb { background:#fa7e04 url(/images/arrow.gif) 0 0 no-repeat; }
ul.menu .abcd { left:-148px; top:-1px; }

/* --- legacy table auto-fit (phones) --- */
table { max-width:100%; }
td, th { word-break:break-word; }

/* --- images scale --- */
img { max-width:100%; height:auto; }

/* --- mobile hamburger drawer (phones only) --- */
.sm-hamburger, .sm-mask, .sm-drawer { display:none; }

@media (max-width: 900px) {
  .sm-side { width:246px; flex-basis:246px; }
}

@media (max-width: 768px) {
  .sm-body { flex-direction:column; }
  .sm-side { width:100%; flex-basis:auto; }
  #con { width:auto; }
  /* sidebar menu: full width, keep dropdown style */
  ul.menu, ul.menu li { float:none; width:100%; }
  ul.menu ul { position:static; display:block; opacity:1; width:100%; left:0; }
  ul.menu ul li { width:100%; }
  ul.menu .menulink { width:100%; }
  /* hide desktop sidebar, show hamburger drawer */
  .sm-side { display:none; }
  .sm-main { margin-left:0; padding-top:0; }
  .sm-body { padding-top:0; }
  .sm-main p:has(.sm-banner) { margin-top:3px; }
  /* product grid: 1 per row, 80% viewport on phones */
  .sm-prod-grid { width:80vw !important; margin:0 auto; max-width:100%; }
  .sm-prod-cell > table > tbody > tr > td,
  .sm-prod-cell > table > tr > td { display:block; width:100% !important; margin:0 0 2px; }
  .sm-prod-cell table { border-spacing:0; width:100% !important; }
  .sm-prod-cell img { width:100% !important; height:auto !important; display:block !important; margin:0 auto !important; }
  .sm-prod-cell td[height] { height:auto !important; line-height:26px !important; padding:3px 0 1px !important; font-size:15px !important; }
  .sm-prod-cell td[height] p { text-align:center !important; }
  .sm-prod-cell table table { width:auto !important; height:auto !important; margin:0 auto !important; border-collapse:collapse !important; }
  .sm-prod-cell table table tr { height:auto !important; line-height:0 !important; font-size:0 !important; }
  .sm-prod-cell table table td { display:table-cell !important; line-height:0 !important; font-size:0 !important; padding:0 !important; vertical-align:top !important; height:auto !important; }
  .sm-prod-cell table table p { margin:0 !important; padding:0 !important; line-height:0 !important; font-size:0 !important; }
  .sm-prod-cell table table a { display:block !important; line-height:0 !important; font-size:0 !important; }
  /* footer nav: flex wrap, tidy on phones */
  .sm-footnav { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2px 14px; line-height:26px !important; }
  .sm-footnav .sm-sep { display:none; }
  .sm-wrap.sm-header { position:relative; background:url('../sm/mheader.jpg') no-repeat center top / 100% auto;
    padding:0; padding-bottom:25.13%; text-align:center; width:100%; }
  .sm-logo { display:none !important; }
  body { background-image:none; }
  .sm-hamburger { display:block; position:fixed; right:8px; top:30px; z-index:900;
    background:#0b2e5b; color:#fff !important; padding:7px 12px; text-decoration:none; font-weight:bold;
    border-radius:6px; font-size:13px; box-shadow:0 2px 6px rgba(0,0,0,.35);
    border:1px solid #0b2e5b; }
  .sm-hamburger:link, .sm-hamburger:visited, .sm-hamburger:hover, .sm-hamburger:active {
    color:#fff !important; }
  .sm-mask { display:none; position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,.5); z-index:990; touch-action:none; }
  .sm-drawer { display:block; position:fixed; top:0; left:-85%; width:80%; max-width:400px; height:100%;
    background:#fff; z-index:995; overflow-y:auto; transition:left .3s ease;
    box-shadow:2px 0 10px rgba(0,0,0,.3); -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
  .sm-drawer-body { overflow-y:auto; -webkit-overflow-scrolling:touch; height:100%; }
  .sm-drawer.open { left:0; }
  .sm-drawer-head { background:#0b2e5b; color:#fff; padding:14px 16px; font-size:16px;
    position:sticky; top:0; z-index:2; }
  .sm-drawer-close { float:right; color:#fff; text-decoration:none; font-weight:bold; font-size:16px; }
  .sm-mnav { border-bottom:2px solid #0b2e5b; }
  .sm-mnav-link { display:block; padding:13px 18px; color:#0b2e5b; font-weight:bold;
    text-decoration:none; border-bottom:1px solid #eee; font-size:14px; text-align:left !important; }
  .sm-mcats-title { background:#0b2e5b; color:#fff; padding:9px 18px; font-size:12px;
    font-weight:bold; letter-spacing:1px; }
  .sm-mcats { padding:0 0 16px; }
  .sm-cat { border-bottom:1px solid #eee; }
  .sm-cat-head { display:flex; justify-content:space-between; align-items:center;
    padding:13px 18px; font-weight:bold; color:#0b2e5b; cursor:pointer; font-size:14px; }
  .sm-cat-name { flex:1; }
  .sm-cat-arrow { color:#FF9000; font-size:18px; font-weight:bold; margin-left:8px;
    transition:transform .2s ease; }
  .sm-cat.open .sm-cat-arrow { transform:rotate(45deg); }
  .sm-cat-sub { display:none; list-style:none; margin:0; padding:0; background:#f4f8ff; }
  .sm-cat.open .sm-cat-sub { display:block; }
  .sm-cat-sub li a { display:block; padding:11px 18px 11px 30px; color:#333;
    text-decoration:none; border-bottom:1px solid #e8eef8; font-size:13px; text-align:left !important; }
  .sm-cat-link { display:block; padding:13px 18px; color:#0b2e5b; font-weight:bold;
    text-decoration:none; font-size:14px; text-align:left !important; position:relative;
    padding-right:38px; }
  .sm-cat-link::after { content:''; position:absolute; right:20px; top:50%; width:8px; height:8px;
    margin-top:-4px; border-radius:50%; background:#FF9000; }
  /* scroll-down hint arrow: appears 5s after menu opens, pulses a few times */
  .sm-drawer-hint {
    position:absolute; left:50%; bottom:64px; transform:translateX(-50%);
    width:38px; height:38px; border-radius:50%;
    background:rgba(11,46,91,0.88); color:#fff;
    font-size:20px; line-height:38px; text-align:center;
    z-index:25; pointer-events:none; opacity:0; display:none;
    box-shadow:0 2px 8px rgba(0,0,0,.3);
  }
  .sm-drawer-hint.on { display:block; animation: smHintPulse .9s ease-in-out 3; }
  @keyframes smHintPulse {
    0%,100% { opacity:0; transform:translateX(-50%) translateY(0); }
    50%     { opacity:1; transform:translateX(-50%) translateY(7px); }
  }
  /* article/content images & text: full-width, no right-float wrap mess on phones */
  .sm-text img { max-width:100% !important; height:auto !important; float:none !important;
    display:block; margin:4px auto; }
  .sm-text img + br { display:none; }
  .sm-text table { max-width:100%; }
  .sm-text p, .sm-text div { text-align:justify; }
}

@media (min-width: 769px) {
  .sm-hamburger, .sm-mask, .sm-drawer { display:none !important; }
}

@media (max-width: 480px) {
  body { font-size:13px; }
  .sm-wrap { padding:0 4px; }
}