@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500&display=swap');

:root{
  --color-bg:#f3f2f2;
  --color-surface:#eae9e9;
  --color-text:#201e1d;
  --color-accent:#f96a28;
  --color-accent-600:#e25314;
  --color-accent-700:#b83e08;
  --color-neutral-300:#d7d3d3;
  --color-neutral-700:#605d5d;
  --color-neutral-800:#444141;
  --color-divider:#dcdada;
  --font: 'Kanit', system-ui, sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:var(--font); font-weight:300; font-size:14px; line-height:1.7;
  padding-bottom:64px; /* space for sticky CTA */
}
a{color:var(--color-accent-700); text-decoration:none;}
img{display:block; max-width:100%; height:auto;}
:focus{outline:none;}
:focus-visible{outline:2px solid var(--color-accent); outline-offset:2px;}

h1,h2,h3,h4{font-family:var(--font); font-weight:300; margin:0;}
h1{font-size:30px; line-height:1.25;}
h2{font-size:24px; line-height:1.3;}
h3{font-size:19px; font-weight:500; line-height:1.35;}

.kicker{
  font-size:11px; font-weight:300; letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-neutral-700); margin:0 0 6px;
}

.wrap{padding-left:24px; padding-right:24px;}
.max{max-width:720px; margin:0 auto;}

section{padding-bottom:72px;}

/* ---- header ---- */
header.site{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px;
}
header.site img.logo{height:24px; width:auto;}
.menu-btn{
  font-size:12px; font-weight:300; color:var(--color-neutral-700);
  background:none; border:none; min-height:44px; display:flex; align-items:center;
  cursor:pointer; font-family:var(--font);
}
.breadcrumb{
  padding:8px 24px 0; font-size:11px; font-weight:300; color:var(--color-neutral-700);
}
.breadcrumb a{color:var(--color-neutral-700);}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:flex-start; gap:6px;
  cursor:pointer; text-decoration:none; font-family:var(--font); font-weight:400;
  font-size:14px; line-height:1.2; min-height:44px; padding:10px 18px;
  border-radius:8px; border:1px solid transparent;
}
.btn-primary{background:var(--color-accent); color:#fff;}
.btn-primary:hover{background:var(--color-accent-600);}
.btn-primary:active{background:var(--color-accent-700);}
.btn-secondary{border-color:var(--color-divider); color:var(--color-text); background:transparent;}
.btn-secondary:hover{background:rgba(32,30,29,0.06);}
.btn-block{width:100%;}
.btn-left{align-self:flex-start;}

/* ---- sticky bottom cta ---- */
.sticky-cta{
  position:sticky; bottom:0; z-index:40;
  display:flex; gap:8px; padding:10px 16px;
  background:var(--color-bg); border-top:1px solid var(--color-divider);
}
.sticky-cta .btn{flex:1; justify-content:center;}

/* ---- rows / dividers ---- */
.hr{height:1px; border:0; margin:0; background:var(--color-divider);}
.row-list a, .row-list .row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 0; border-top:1px solid var(--color-divider); color:var(--color-text);
  min-height:44px;
}
.row-list > :last-child{border-bottom:1px solid var(--color-divider);}
.row-list .row-title{font-size:15px; font-weight:400;}
.row-list .row-sub{font-size:12px; color:var(--color-neutral-700); margin-top:2px;}
.row-list .chevron{color:var(--color-neutral-700); flex-shrink:0;}

/* ---- data table (branch page) ---- */
.data-row{
  display:grid; grid-template-columns:64px 1fr; gap:16px;
  padding:18px 0; border-top:1px solid var(--color-divider);
}
.data-row:last-child{border-bottom:1px solid var(--color-divider);}
.data-row .label{font-size:12px; color:var(--color-neutral-700);}
.data-row .value{font-size:14px; line-height:1.65;}

/* ---- status dot ---- */
.status-row{display:flex; align-items:center; gap:8px; font-size:13px; margin:10px 0 18px;}
.status-dot{width:8px; height:8px; background:var(--color-accent); flex-shrink:0;}
.status-dot.closed{background:var(--color-neutral-700);}

/* ---- image ---- */
.full-photo{width:100%; height:auto; border-radius:0;}
.photo-placeholder{
  width:100%; aspect-ratio:16/10; background:var(--color-surface);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--color-neutral-700); font-size:12px; padding:20px; border-radius:0;
}

/* ---- brand cards (lens brands) ---- */
.brand-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--color-divider); border-top:1px solid var(--color-divider); border-bottom:1px solid var(--color-divider);}
.brand-card{background:var(--color-bg); padding:20px 16px;}
.brand-card img{height:40px; width:auto; margin-bottom:10px;}
.brand-card h3{font-size:15px; margin-bottom:6px;}
.brand-card p{font-size:12px; line-height:1.55; color:var(--color-neutral-700); margin:0;}

/* ---- feature list ---- */
.feature-item{padding:18px 0; border-top:1px solid var(--color-divider);}
.feature-item:last-child{border-bottom:1px solid var(--color-divider);}
.feature-item h3{margin-bottom:4px;}
.feature-item p{font-size:13px; color:var(--color-neutral-700); margin:0; line-height:1.6;}

/* ---- price ---- */
.price-tag{font-size:13px; color:var(--color-accent-700); font-weight:400; margin-top:4px;}

/* ---- footer ---- */
footer.site{
  border-top:1px solid var(--color-divider); padding:28px 24px;
  font-size:11px; line-height:1.8; color:var(--color-neutral-700);
}

/* ---- full-screen menu ---- */
.menu-overlay{
  display:none; position:fixed; inset:0; z-index:100; background:var(--color-bg);
  padding:18px 24px; overflow-y:auto;
}
.menu-overlay.open{display:block;}
.menu-overlay .menu-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;}
.menu-overlay .close-btn{background:none; border:none; font-size:22px; min-height:44px; min-width:44px; cursor:pointer; color:var(--color-text); font-family:var(--font);}
.menu-overlay nav{display:flex; flex-direction:column;}
.menu-overlay nav a{
  padding:16px 0; border-top:1px solid var(--color-divider); font-size:19px; color:var(--color-text);
}
.menu-overlay nav a:last-child{border-bottom:1px solid var(--color-divider);}

/* ---- desktop / tablet ---- */
.full-bleed{ width:100vw; position:relative; left:50%; transform:translateX(-50%); }
@media (min-width:768px){
  .full-bleed{ width:100%; left:auto; transform:none; }
  .wrap{max-width:820px; margin:0 auto;}
  header.site .wrap-inner{max-width:820px; margin:0 auto;}
  .brand-grid{grid-template-columns:repeat(4,1fr);}
}