:root{
  --deep:#10251f;
  --deep-2:#18382f;
  --deep-3:#244d40;
  --cream:#fbf7ef;
  --paper:#fffdf8;
  --gold:#c8a35c;
  --gold-2:#e4c985;
  --leaf:#657a58;
  --ink:#17251f;
  --muted:#69766e;
  --line:#e7e1d6;
  --soft:#f4efe6;
  --white:#ffffff;
  --danger:#b3261e;
  --ok:#1f7a55;
  --shadow:0 18px 45px rgba(20,35,28,.13);
  --shadow-soft:0 10px 26px rgba(20,35,28,.08);
  --radius:28px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Mincho ProN","Yu Mincho","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,serif;
  color:var(--ink);
  background:linear-gradient(180deg,#fffdf8 0%,#f8f5ee 52%,#fffdf8 100%);
  line-height:1.75;
  letter-spacing:.02em;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

main{
  min-height:70vh;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 15% 8%,rgba(200,163,92,.13),transparent 30%),
    radial-gradient(circle at 90% 18%,rgba(104,139,110,.14),transparent 30%),
    radial-gradient(circle at 50% 80%,rgba(30,77,63,.08),transparent 36%);
}

/* Header */

.site-header,
.admin-header{
  position:sticky;
  top:0;
  z-index:100;
  min-height:68px;
  padding:12px clamp(16px,4vw,54px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(16,37,31,.82);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(228,201,133,.22);
  box-shadow:0 10px 28px rgba(0,0,0,.10);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-with-logo{
  gap:10px;
}

.brand-logo-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5px 0;
  background:transparent;
  border-radius:0;
  box-shadow:none;
}

.brand-logo{
  width:auto;
  height:32px;
  max-width:220px;
  object-fit:contain;
}

.brand-subtitle{
  color:rgba(255,255,255,.76);
  font-size:12px;
  letter-spacing:.14em;
  white-space:nowrap;
}

.brand-mark{
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--gold-2);
  border:1px solid rgba(228,201,133,.6);
  font-weight:700;
}

.brand strong{
  display:block;
  color:#fff;
  font-size:18px;
}

.brand small{
  display:block;
  color:rgba(255,255,255,.7);
  font-size:11px;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:22px;
  color:rgba(255,255,255,.86);
  font-size:14px;
}

.site-nav a{
  transition:.2s ease;
}

.site-nav a:hover{
  color:var(--gold-2);
}

.nav-cta{
  color:#15251e !important;
  padding:10px 17px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  box-shadow:0 12px 24px rgba(200,163,92,.25);
  font-weight:700;
}

.nav-toggle{
  display:none;
  width:43px;
  height:43px;
  border-radius:50%;
  border:1px solid rgba(228,201,133,.55);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:24px;
  line-height:1;
}

/* Flash */

.flash{
  max-width:1040px;
  margin:18px auto 0;
  padding:12px 16px;
  border-radius:16px;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}

.flash.success{
  background:#edf9f3;
  color:#146044;
  border:1px solid #bee8d6;
}

.flash.error{
  background:#fff0ef;
  color:#9b221b;
  border:1px solid #f3c1bd;
}

/* Buttons */

.btn{
  border:0;
  border-radius:999px;
  padding:14px 24px;
  min-height:50px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  cursor:pointer;
  font-weight:700;
  letter-spacing:.08em;
  transition:.22s ease;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-primary{
  color:#14231d;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  box-shadow:0 16px 30px rgba(200,163,92,.28);
}

.btn-primary::after{
  content:"›";
  font-size:22px;
  line-height:1;
}

.btn-light{
  color:#fff;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.62);
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}

.btn-light::after{
  content:"›";
  font-size:22px;
  line-height:1;
}

.btn-outline{
  color:var(--deep);
  border:1px solid rgba(200,163,92,.45);
  background:rgba(255,255,255,.84);
}

.btn-danger{
  color:#fff;
  background:var(--danger);
}

.btn-success{
  color:#fff;
  background:var(--ok);
}

.action-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}

/* Current homepage support */

.hero{
  position:relative;
  min-height:calc(100vh - 68px);
  display:grid;
  align-items:end;
  overflow:hidden;
  background:var(--deep);
  isolation:isolate;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(7,20,17,.86) 0%,rgba(8,29,24,.58) 43%,rgba(8,29,24,.18) 100%),
    linear-gradient(180deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.35) 100%);
}

.hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.05) contrast(1.04);
}

.hero-content{
  position:relative;
  z-index:2;
  width:min(1120px,92%);
  margin:0 auto;
  padding:72px 0 86px;
  color:#fff;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--gold-2);
  border:1px solid rgba(228,201,133,.45);
  background:rgba(16,37,31,.42);
  border-radius:999px;
  padding:7px 14px;
  font-size:13px;
  letter-spacing:.14em;
}

.hero h1{
  margin:22px 0 18px;
  max-width:720px;
  font-size:clamp(36px,8vw,72px);
  line-height:1.22;
  font-weight:500;
  letter-spacing:.08em;
  text-shadow:0 10px 28px rgba(0,0,0,.38);
}

.hero p{
  max-width:660px;
  margin:0;
  color:rgba(255,255,255,.9);
  font-size:clamp(15px,2.5vw,19px);
}

.hero-actions{
  margin-top:32px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

/* New selected-homepage classes */

.home-hero{
  position:relative;
  min-height:650px;
  overflow:hidden;
  color:#fff;
  background:var(--deep);
  isolation:isolate;
}

.home-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(8,22,18,.84) 0%,rgba(8,22,18,.62) 44%,rgba(8,22,18,.16) 100%),
    linear-gradient(180deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.36) 100%);
}

.home-hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.home-hero-inner{
  position:relative;
  z-index:2;
  min-height:650px;
  width:min(1120px,92%);
  margin:0 auto;
  display:grid;
  align-items:center;
  padding:54px 0 72px;
}

.home-hero-copy{
  max-width:600px;
}

.home-hero-kicker{
  color:var(--gold-2);
  font-weight:700;
  letter-spacing:.15em;
  font-size:14px;
  margin-bottom:16px;
}

.home-hero h1{
  margin:0 0 20px;
  font-size:clamp(40px,8vw,72px);
  line-height:1.22;
  letter-spacing:.09em;
  font-weight:500;
  text-shadow:0 10px 30px rgba(0,0,0,.40);
}

.home-hero p{
  margin:0;
  max-width:560px;
  color:rgba(255,255,255,.92);
  font-size:17px;
}

.hero-quick-note{
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.26);
  color:rgba(255,255,255,.9);
  font-size:13px;
}

.hero-quick-note::before{
  content:"✓";
  width:22px;
  height:22px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#14231d;
  background:var(--gold-2);
  font-weight:800;
}

.home-wrap{
  background:linear-gradient(180deg,#fffaf2 0%,#f4efe6 42%,#fffdf8 100%);
}

.home-section{
  padding:64px clamp(18px,5vw,72px);
}

.home-section-inner{
  max-width:1120px;
  margin:0 auto;
}

.home-heading{
  text-align:center;
  margin:0 auto 30px;
}

.home-heading .en{
  display:block;
  margin-bottom:4px;
  color:var(--gold);
  font-size:12px;
  letter-spacing:.18em;
  font-weight:800;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}

.home-heading h2{
  margin:0;
  font-size:clamp(26px,5vw,42px);
  line-height:1.35;
  font-weight:500;
  letter-spacing:.08em;
}

.home-heading p{
  margin:12px auto 0;
  max-width:680px;
  color:var(--muted);
}

/* Cards */

.premium-card-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.premium-card{
  position:relative;
  overflow:hidden;
  padding:28px 20px;
  min-height:190px;
  text-align:center;
  border-radius:24px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(200,163,92,.24);
  box-shadow:var(--shadow-soft);
}

.premium-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(200,163,92,.16),transparent 42%);
  pointer-events:none;
}

.card-icon{
  position:relative;
  width:72px;
  height:72px;
  margin:0 auto 16px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--deep-2);
  background:linear-gradient(180deg,#fdfbf5,#f0eadf);
  border:1px solid rgba(200,163,92,.24);
  font-size:32px;
}

.premium-card h3{
  position:relative;
  margin:0 0 9px;
  font-size:21px;
  font-weight:600;
  letter-spacing:.08em;
}

.premium-card p{
  position:relative;
  margin:0;
  color:var(--muted);
  font-size:14px;
}

/* General section styles */

.section{
  padding:78px clamp(18px,5vw,72px);
}

.section-inner{
  max-width:1120px;
  margin:auto;
}

.section-title{
  max-width:820px;
  margin:0 auto 40px;
  text-align:center;
}

.section-title .sub{
  color:var(--gold);
  font-weight:800;
  letter-spacing:.16em;
  font-size:12px;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}

.section-title h2{
  margin:8px 0 14px;
  font-size:clamp(28px,5vw,46px);
  font-weight:500;
  letter-spacing:.06em;
}

.section-title p{
  margin:0;
  color:var(--muted);
}

.grid-2{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:46px;
  align-items:center;
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.card{
  background:rgba(255,255,255,.9);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
}

.image-card{
  overflow:hidden;
  border-radius:32px;
  background:#fff;
  border:1px solid rgba(200,163,92,.16);
  box-shadow:var(--shadow);
}

.image-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.lead{
  font-size:20px;
  color:#263b32;
}

.muted{
  color:var(--muted);
}

.feature-list{
  display:grid;
  gap:14px;
  margin-top:24px;
}

.feature{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:15px;
  border-radius:18px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(200,163,92,.18);
  box-shadow:var(--shadow-soft);
}

.feature .num,
.step-num{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,var(--deep-2),var(--leaf));
  font-weight:800;
}

/* Mineral section */

.mineral-section{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.96)),
    radial-gradient(circle at 85% 15%,rgba(101,122,88,.18),transparent 34%);
}

.mineral-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.mineral{
  position:relative;
  overflow:hidden;
  padding:24px 18px;
  min-height:128px;
  text-align:center;
  border-radius:22px;
  background:linear-gradient(180deg,#fff,#f8f3ea);
  border:1px solid rgba(200,163,92,.22);
  box-shadow:var(--shadow-soft);
}

.mineral::before{
  content:"";
  position:absolute;
  top:-35px;
  left:50%;
  transform:translateX(-50%);
  width:88px;
  height:88px;
  border-radius:50%;
  background:rgba(200,163,92,.12);
}

.mineral strong{
  position:relative;
  display:block;
  color:var(--deep-2);
  font-size:31px;
  line-height:1.15;
  font-weight:500;
}

.mineral span{
  position:relative;
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:13px;
}

/* Steps */

.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.step{
  position:relative;
  min-height:178px;
  padding:22px;
  border-radius:24px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(200,163,92,.2);
  box-shadow:var(--shadow-soft);
}

.step h3{
  margin:13px 0 8px;
  font-size:19px;
  letter-spacing:.06em;
}

.step p{
  margin:0;
  font-size:14px;
}

/* Lifestyle / CTA */

.lifestyle-band{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:0;
  overflow:hidden;
  border-radius:32px;
  background:#fff;
  box-shadow:var(--shadow);
  border:1px solid rgba(200,163,92,.18);
}

.lifestyle-band img{
  width:100%;
  height:100%;
  min-height:310px;
  object-fit:cover;
}

.lifestyle-content{
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    linear-gradient(90deg,rgba(255,255,255,.92),rgba(255,255,255,.82)),
    radial-gradient(circle at 100% 0%,rgba(101,122,88,.16),transparent 34%);
}

.lifestyle-content h2{
  margin:0 0 14px;
  font-size:clamp(27px,5vw,42px);
  line-height:1.35;
  font-weight:500;
  letter-spacing:.08em;
}

.usage-icons{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:22px;
}

.usage-icon{
  padding:14px 10px;
  text-align:center;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
}

.usage-icon strong{
  display:block;
  color:var(--deep);
  font-size:22px;
  margin-bottom:4px;
}

.cta-band{
  position:relative;
  overflow:hidden;
  color:#fff;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  align-items:center;
  padding:42px;
  border-radius:36px;
  background:
    linear-gradient(135deg,rgba(16,37,31,.95),rgba(32,74,62,.90)),
    radial-gradient(circle at 90% 0%,rgba(200,163,92,.18),transparent 35%);
  box-shadow:var(--shadow);
}

.cta-band::after{
  content:"";
  position:absolute;
  right:-60px;
  bottom:-80px;
  width:260px;
  height:260px;
  border-radius:50%;
  background:rgba(228,201,133,.12);
}

.cta-band h2{
  margin:0 0 10px;
  font-size:clamp(27px,5vw,42px);
  line-height:1.35;
  font-weight:500;
}

.cta-band p{
  color:rgba(255,255,255,.84);
}

.cta-band > *{
  position:relative;
  z-index:1;
}

/* Footer */

.site-footer{
  background:var(--deep);
  color:#dfe8e1;
  padding:34px clamp(18px,5vw,72px);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:28px;
  font-size:14px;
  border-top:1px solid rgba(228,201,133,.2);
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.footer-links a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:4px;
}

/* Page hero / company pages */

.page-hero{
  padding:72px clamp(18px,5vw,72px);
  color:#fff;
  background:
    linear-gradient(90deg,rgba(16,37,31,.94),rgba(32,74,62,.78)),
    url("../images/forest-bottles.png") center/cover;
  border-bottom:1px solid rgba(228,201,133,.22);
}

.page-hero-inner{
  max-width:1120px;
  margin:auto;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:42px;
  align-items:center;
}

.page-hero h1{
  margin:12px 0;
  font-size:clamp(32px,6vw,58px);
  font-weight:500;
  line-height:1.2;
  letter-spacing:.08em;
}

.page-hero p{
  color:rgba(255,255,255,.86);
}

.page-hero .image-card{
  border-color:rgba(255,255,255,.18);
}

/* Forms */

.form-wrap{
  max-width:760px;
  margin:48px auto;
  padding:0 18px;
}

.form-card{
  padding:30px;
  border-radius:30px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.form-grid{
  display:grid;
  gap:18px;
}

.form-row{
  display:grid;
  gap:6px;
}

.form-row label{
  font-weight:700;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}

.input,
select,
textarea{
  width:100%;
  padding:13px 14px;
  border:1px solid #d9d0c4;
  border-radius:14px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}

.input:focus,
select:focus,
textarea:focus{
  outline:3px solid rgba(200,163,92,.18);
  border-color:var(--gold);
}

.small-note{
  color:var(--muted);
  font-size:13px;
}

/* Dashboard / admin / tables */

.dashboard{
  max-width:1120px;
  margin:34px auto;
  padding:0 18px;
}

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:24px;
}

.stat{
  padding:20px;
  border-radius:22px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}

.stat strong{
  display:block;
  color:var(--deep-2);
  font-size:30px;
}

.table-card{
  overflow:hidden;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.table-scroll{
  overflow:auto;
}

table{
  width:100%;
  border-collapse:collapse;
  white-space:nowrap;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}

th,
td{
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  text-align:left;
}

th{
  background:#f4efe6;
  color:#4d5c51;
  font-size:13px;
}

.badge{
  display:inline-flex;
  border-radius:999px;
  padding:5px 10px;
  font-size:12px;
  font-weight:700;
}

.badge-pending{
  background:#fff7e5;
  color:#8a5a00;
}

.badge-complete{
  background:#eaf8f0;
  color:#176042;
}

.badge-cancel{
  background:#fff0ef;
  color:#9b221b;
}

.qr-box{
  padding:24px;
  text-align:center;
  border-radius:30px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.qr-box img{
  max-width:260px;
  margin:0 auto;
}

.admin-body{
  background:#f7f4ee;
}

.admin-main{
  padding:20px 0;
}

.scan-panel{
  max-width:760px;
  margin:30px auto;
  padding:0 18px;
}

.scanner{
  padding:20px;
  border-radius:26px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

#reader{
  overflow:hidden;
  border-radius:22px;
}

.legal-content{
  max-width:920px;
  margin:42px auto;
  padding:0 18px;
}

.legal-content article{
  padding:32px;
  border-radius:28px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.legal-content h1{
  font-size:32px;
}

.legal-content h2{
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid var(--line);
}

.company-table th{
  width:220px;
}

.empty{
  padding:28px;
  text-align:center;
  color:var(--muted);
}

/* Mobile first adjustments */

@media (max-width:860px){
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Hiragino Mincho ProN","Yu Mincho","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,serif;
  }

  .site-header,
  .admin-header{
    min-height:64px;
    padding:10px 16px;
  }

  .brand-logo{
    height:24px;
    max-width:150px;
  }

  .brand-subtitle{
    display:none;
  }

  .nav-toggle{
    display:grid;
    place-items:center;
  }

  .site-nav{
    position:fixed;
    inset:74px 12px auto 12px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:16px;
    border-radius:22px;
    color:var(--ink);
    background:rgba(255,253,248,.96);
    border:1px solid rgba(200,163,92,.25);
    box-shadow:var(--shadow);
  }

  .nav-open .site-nav{
    display:flex;
  }

  .site-nav a{
    padding:11px 12px;
  }

  .nav-cta{
    text-align:center;
  }

  .hero{
    min-height:720px;
    align-items:end;
  }

  .hero::before{
    background:
      linear-gradient(180deg,rgba(8,22,18,.14) 0%,rgba(8,22,18,.46) 45%,rgba(8,22,18,.88) 100%);
  }

  .hero-content{
    width:100%;
    padding:0 22px 48px;
  }

  .hero h1{
    font-size:37px;
    line-height:1.28;
  }

  .hero-actions,
  .home-hero .hero-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  .hero-actions .btn{
    width:100%;
    padding-left:16px;
    padding-right:16px;
  }

  .home-hero{
    min-height:760px;
  }

  .home-hero::before{
    background:
      linear-gradient(180deg,rgba(8,22,18,.10) 0%,rgba(8,22,18,.42) 42%,rgba(8,22,18,.90) 100%);
  }

  .home-hero-inner{
    min-height:760px;
    width:100%;
    padding:0 22px 48px;
    align-items:end;
  }

  .home-hero h1{
    font-size:38px;
    line-height:1.28;
  }

  .home-section,
  .section{
    padding:58px 18px;
  }

  .premium-card-row,
  .grid-2,
  .grid-3,
  .steps,
  .mineral-grid,
  .stats,
  .page-hero-inner,
  .cta-band,
  .lifestyle-band{
    grid-template-columns:1fr;
  }

  .premium-card-row{
    gap:14px;
  }

  .premium-card{
    min-height:auto;
    padding:22px 18px;
  }

  .mineral-grid{
    grid-template-columns:repeat(3,1fr);
    gap:10px;
  }

  .mineral{
    min-height:116px;
    padding:18px 8px;
  }

  .mineral strong{
    font-size:24px;
  }

  .mineral span{
    font-size:11px;
  }

  .steps{
    gap:12px;
  }

  .step{
    min-height:auto;
  }

  .lifestyle-content{
    padding:26px 20px;
  }

  .usage-icons{
    grid-template-columns:repeat(3,1fr);
    gap:8px;
  }

  .usage-icon{
    padding:12px 6px;
    font-size:11px;
  }

  .cta-band{
    padding:30px 22px;
  }

  .site-footer{
    display:block;
    padding:32px 18px;
  }

  .footer-links{
    margin-top:20px;
  }

  .page-hero{
    padding:48px 18px;
  }

  .company-table th{
    width:auto;
  }

  .table-scroll table{
    min-width:760px;
  }
}

@media (max-width:480px){
  .hero-actions,
  .home-hero .hero-actions{
    grid-template-columns:1fr;
  }

  .mineral-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .btn{
    min-height:52px;
  }
}
/* ==================================================
   Stage 1A visual refinement
   Smaller, more elegant typography and better image balance
================================================== */

/* Overall width and spacing */
.home-section-inner,
.section-inner{
  max-width: 920px;
}

.home-section{
  padding-top: 52px;
  padding-bottom: 52px;
}

/* Header refinement */
.site-header,
.admin-header{
  min-height: 56px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.brand-logo{
  height: 40px;
  max-width: 170px;
}

.site-nav{
  font-size: 12px;
  gap: 16px;
}

.nav-cta{
  padding: 7px 13px;
}

/* Hero refinement */
.home-hero{
  min-height: 520px;
}

.home-hero-inner{
  min-height: 520px;
  max-width: 920px;
  padding-top: 42px;
  padding-bottom: 54px;
}

.home-hero-bg{
  object-fit: cover;
  object-position: center center;
  transform: scale(1.02);
}

.home-hero::before{
  background:
    linear-gradient(90deg,rgba(8,22,18,.82) 0%,rgba(8,22,18,.55) 42%,rgba(8,22,18,.12) 100%),
    linear-gradient(180deg,rgba(0,0,0,.03) 0%,rgba(0,0,0,.28) 100%);
}

.home-hero-kicker{
  font-size: 11px;
  margin-bottom: 12px;
  letter-spacing: .16em;
}

.home-hero h1{
  font-size: clamp(34px, 5.2vw, 50px);
  line-height: 1.26;
  letter-spacing: .08em;
  margin-bottom: 16px;
}

.home-hero p{
  font-size: 13px;
  line-height: 1.9;
  max-width: 470px;
}

.hero-actions{
  margin-top: 24px;
}

.btn{
  min-height: 42px;
  padding: 10px 20px;
  font-size: 12px;
}

.hero-quick-note{
  margin-top: 14px;
  font-size: 11px;
  padding: 7px 12px;
}

/* Section title refinement */
.home-heading{
  margin-bottom: 24px;
}

.home-heading .en,
.section-title .sub{
  font-size: 10px;
}

.home-heading h2,
.section-title h2{
  font-size: clamp(23px, 3.4vw, 32px);
  line-height: 1.45;
  letter-spacing: .08em;
}

.home-heading p,
.section-title p{
  font-size: 13px;
}

/* Feature cards */
.premium-card-row{
  gap: 18px;
}

.premium-card{
  min-height: 150px;
  padding: 22px 18px;
  border-radius: 20px;
}

.card-icon{
  width: 54px;
  height: 54px;
  font-size: 22px;
  margin-bottom: 12px;
}

.premium-card h3{
  font-size: 16px;
  margin-bottom: 6px;
}

.premium-card p{
  font-size: 12px;
  line-height: 1.75;
}

/* Mineral cards */
.mineral-grid{
  gap: 12px;
}

.mineral{
  min-height: 96px;
  padding: 18px 12px;
  border-radius: 17px;
}

.mineral strong{
  font-size: 25px;
}

.mineral span{
  font-size: 11px;
}

/* Pickup flow */
.steps{
  gap: 13px;
}

.step{
  min-height: 145px;
  padding: 18px 16px;
  border-radius: 19px;
}

.step-num{
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.step h3{
  font-size: 15px;
  margin: 11px 0 5px;
}

.step p{
  font-size: 11px;
  line-height: 1.75;
}

/* Lifestyle panel */
.lifestyle-band{
  max-width: 860px;
  margin: 0 auto;
  border-radius: 26px;
}

.lifestyle-band img{
  min-height: 360px;
  max-height: 430px;
  object-fit: cover;
  object-position: center center;
}

.lifestyle-content{
  padding: 30px 32px;
}

.lifestyle-content h2{
  font-size: clamp(24px, 3.5vw, 34px);
}

.lifestyle-content p{
  font-size: 13px;
}

.usage-icon{
  font-size: 11px;
}

.usage-icon strong{
  font-size: 18px;
}

/* Final CTA */
.cta-band{
  max-width: 860px;
  margin: 0 auto;
  padding: 34px;
  border-radius: 28px;
  gap: 24px;
}

.cta-band h2{
  font-size: clamp(24px, 3.6vw, 34px);
}

.cta-band p{
  font-size: 12px;
  line-height: 1.9;
}

.cta-band .image-card{
  max-height: 380px;
}

.cta-band .image-card img{
  width: 100%;
  height: 100%;
  max-height: 380px;
  object-fit: cover;
  object-position: center center;
}

/* Footer smaller */
.site-footer{
  font-size: 11px;
  padding-top: 24px;
  padding-bottom: 24px;
}

/* Mobile refinement */
@media (max-width: 860px){
  .home-section-inner,
  .section-inner{
    max-width: 100%;
  }

  .home-section{
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .home-hero{
    min-height: 720px;
  }

  .home-hero-inner{
    min-height: 720px;
    padding-left: 22px;
    padding-right: 22px;
    padding-bottom: 44px;
  }

  .home-hero-bg{
    object-position: 62% center;
    transform: scale(1);
  }

  .home-hero h1{
    font-size: 34px;
  }

  .home-hero p{
    font-size: 13px;
  }

  .premium-card{
    text-align: left;
    display: grid;
    grid-template-columns: 58px 1fr;
    column-gap: 14px;
    align-items: center;
  }

  .premium-card .card-icon{
    grid-row: span 2;
    margin: 0;
  }

  .premium-card h3{
    margin: 0 0 4px;
  }

  .mineral-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  .steps{
    grid-template-columns: 1fr;
  }

  .lifestyle-band{
    grid-template-columns: 1fr;
  }

  .lifestyle-band img{
    min-height: 300px;
    max-height: 340px;
  }

  .cta-band{
    grid-template-columns: 1fr;
    padding: 26px 20px;
  }

  .cta-band .image-card{
    max-height: 300px;
  }

  .cta-band .image-card img{
    max-height: 300px;
  }
}
/* ==================================================
   Image balance fix
   Keep product images visible without cutting
================================================== */

.cta-band .image-card{
  background: #fffdf8;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: none;
}

.cta-band .image-card img{
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  object-position: center center;
  border-radius: 20px;
}

/* Keep lifestyle photo attractive but less aggressively cropped */
.lifestyle-band img{
  object-fit: cover;
  object-position: center top;
}

/* Mobile image balance */
@media (max-width: 860px){
  .cta-band .image-card{
    padding: 12px;
  }

  .cta-band .image-card img{
    max-height: 260px;
    object-fit: contain;
  }

  .lifestyle-band img{
    object-position: center 35%;
  }
}
/* ==================================================
   Final CTA product image visual polish
================================================== */

.cta-band .image-card{
  min-height: 250px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,243,234,.96));
  overflow: hidden;
}

.cta-band .image-card img{
  max-height: 300px;
  transform: scale(1.18);
  transition: .3s ease;
}

/* Make bottom CTA feel more premium on mobile */
@media (max-width: 860px){
  .cta-band{
    padding: 24px 18px;
  }

  .cta-band .image-card{
    min-height: 230px;
  }

  .cta-band .image-card img{
    max-height: 270px;
    transform: scale(1.25);
  }
}
/* ==================================================
   Header + hero mobile polish
================================================== */

/* Make header logo more visible but still elegant */
@media (max-width: 860px){
  .site-header,
  .admin-header{
    min-height: 58px;
    padding: 9px 14px;
  }

  .brand-logo{
    height: 28px;
    max-width: 190px;
  }

  .nav-toggle{
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(228,201,133,.48);
    color: #f7f1df;
    font-size: 22px;
  }

  /* Better hero balance on mobile */
  .home-hero{
    min-height: 700px;
  }

  .home-hero-inner{
    min-height: 700px;
    padding-bottom: 34px;
  }

  .home-hero-bg{
    object-position: 58% center;
    filter: saturate(1.08) contrast(1.04);
  }

  .home-hero::before{
    background:
      linear-gradient(180deg,rgba(8,22,18,.18) 0%,rgba(8,22,18,.36) 36%,rgba(8,22,18,.88) 100%),
      linear-gradient(90deg,rgba(8,22,18,.42) 0%,rgba(8,22,18,.10) 70%);
  }

  .home-hero-copy{
    padding-bottom: 6px;
  }

  .home-hero-kicker{
    font-size: 10px;
    letter-spacing: .17em;
    color: #e4c985;
  }

  .home-hero h1{
    font-size: 31px;
    line-height: 1.34;
    letter-spacing: .08em;
    text-shadow: 0 8px 24px rgba(0,0,0,.45);
    margin-bottom: 12px;
  }

  .home-hero p{
    font-size: 12px;
    line-height: 1.85;
    max-width: 320px;
  }

  .home-hero .hero-actions{
    margin-top: 18px;
    grid-template-columns: 1fr 1fr;
  }

  .home-hero .btn{
    min-height: 42px;
    padding: 9px 12px;
    font-size: 11px;
  }

  .hero-quick-note{
    max-width: 100%;
    font-size: 10px;
    line-height: 1.5;
    padding: 7px 10px;
  }

  .hero-quick-note::before{
    width: 19px;
    height: 19px;
    font-size: 11px;
  }
}

/* Extra small phones */
@media (max-width: 420px){
  .brand-logo{
    height: 25px;
    max-width: 170px;
  }

  .home-hero{
    min-height: 680px;
  }

  .home-hero-inner{
    min-height: 680px;
  }

  .home-hero h1{
    font-size: 29px;
  }
}
/* ==================================================
   Company page mobile polish
================================================== */

.company-hero{
  padding-top: 34px;
  padding-bottom: 36px;
}

.company-hero .page-hero-inner{
  max-width: 920px;
}

.company-hero .eyebrow{
  font-size: 10px;
  padding: 5px 10px;
}

.company-hero h1{
  font-size: clamp(27px, 4.8vw, 42px);
  line-height: 1.38;
}

.company-hero p{
  font-size: 13px;
  line-height: 1.9;
}

.company-hero-image{
  max-height: 340px;
}

.company-hero-image img{
  width: 100%;
  height: 100%;
  max-height: 340px;
  object-fit: cover;
  object-position: center center;
}

/* Story panel */
.story-panel{
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: 28px;
  align-items: center;
  padding: 30px;
  border-radius: 30px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(200,163,92,.2);
  box-shadow: var(--shadow);
}

.story-text h2{
  margin: 10px 0 14px;
  font-size: clamp(25px, 4vw, 36px);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: .08em;
}

.story-text p{
  font-size: 13px;
  color: var(--muted);
}

.story-image{
  border-radius: 24px;
  overflow: hidden;
  background: #fffdf8;
  padding: 12px;
}

.story-image img{
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  object-position: center center;
}

/* Factory panel */
.factory-panel{
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: 24px;
  align-items: stretch;
}

.factory-map-card,
.factory-photo-card{
  border-radius: 30px;
  background: #fff;
  border: 1px solid rgba(200,163,92,.2);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.factory-map-card{
  padding: 30px;
}

.factory-map-card h2{
  margin: 10px 0 22px;
  font-size: clamp(25px, 4vw, 36px);
  font-weight: 500;
}

.factory-detail-list{
  display: grid;
  gap: 14px;
}

.factory-detail-list div{
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.factory-detail-list div:last-child{
  border-bottom: 0;
}

.factory-detail-list strong{
  display: block;
  margin-bottom: 4px;
  color: var(--deep);
  font-size: 13px;
}

.factory-detail-list span{
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.factory-photo-card img{
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  object-position: center 35%;
}

/* Company profile table mobile-safe */
.company-profile-card{
  max-width: 900px;
  margin: 0 auto;
}

.company-profile-card .table-scroll{
  overflow: visible;
}

.company-profile-card table{
  min-width: 0;
  white-space: normal;
}

.company-profile-card th,
.company-profile-card td{
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.company-profile-card th{
  width: 150px;
  color: var(--deep);
}

/* Mobile */
@media (max-width: 860px){
  .company-hero{
    padding: 28px 18px 30px;
  }

  .company-hero .page-hero-inner{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .company-hero h1{
    font-size: 25px;
  }

  .company-hero-image{
    max-height: 280px;
    border-radius: 24px;
  }

  .company-hero-image img{
    max-height: 280px;
  }

  .story-panel,
  .factory-panel{
    grid-template-columns: 1fr;
  }

  .story-panel{
    padding: 22px 18px;
    border-radius: 24px;
  }

  .story-text h2{
    font-size: 23px;
  }

  .story-image img{
    max-height: 280px;
  }

  .factory-map-card{
    padding: 24px 18px;
  }

  .factory-photo-card img{
    min-height: 280px;
    max-height: 320px;
  }

  .company-profile-card{
    border-radius: 22px;
  }

  .company-profile-card table,
  .company-profile-card tbody,
  .company-profile-card tr,
  .company-profile-card th,
  .company-profile-card td{
    display: block;
    width: 100%;
  }

  .company-profile-card tr{
    border-bottom: 1px solid var(--line);
  }

  .company-profile-card tr:last-child{
    border-bottom: 0;
  }

  .company-profile-card th{
    border-bottom: 0;
    padding: 14px 16px 4px;
    background: #f8f3ea;
    font-size: 12px;
  }

  .company-profile-card td{
    padding: 4px 16px 14px;
    border-bottom: 0;
    font-size: 13px;
  }
}
/* ==================================================
   Admin QR scan manual backup layout
================================================== */

.scan-layout{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.scan-camera-card,
.scan-manual-card{
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.scan-camera-card h3,
.scan-manual-card h3{
  margin-top: 0;
  font-size: 20px;
  letter-spacing: .05em;
}

.scan-help-box{
  margin: 18px 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: #f8f3ea;
  border: 1px solid rgba(200,163,92,.25);
  color: var(--muted);
  font-size: 13px;
}

.scan-help-box strong{
  display: block;
  color: var(--deep);
  margin-bottom: 4px;
}

.scan-help-box p{
  margin: 0;
}

#reader{
  min-height: 280px;
  background: #f8f6ef;
  border: 1px dashed rgba(101,122,88,.35);
}

@media (max-width: 860px){
  .scan-layout{
    grid-template-columns: 1fr;
  }

  .scan-camera-card,
  .scan-manual-card{
    padding: 18px;
    border-radius: 22px;
  }

  #reader{
    min-height: 240px;
  }
}
/* ==================================================
   Stage 1A mobile polish for forms, my page, order, admin
================================================== */

@media (max-width: 860px){

  /* General page spacing */
  .form-wrap,
  .dashboard,
  .scan-panel,
  .legal-content{
    margin-top: 26px;
    margin-bottom: 34px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .form-card,
  .card,
  .table-card,
  .qr-box{
    border-radius: 24px;
    padding: 22px 18px;
  }

  /* Register / Login form title balance */
  .form-wrap .section-title,
  .dashboard .section-title{
    text-align: left;
    margin-bottom: 22px;
  }

  .form-wrap .section-title .sub,
  .dashboard .section-title .sub{
    font-size: 10px;
    letter-spacing: .18em;
  }

  .form-wrap .section-title h2,
  .dashboard .section-title h2{
    font-size: 26px;
    line-height: 1.4;
  }

  .form-wrap .section-title p,
  .dashboard .section-title p{
    font-size: 13px;
    line-height: 1.8;
  }

  /* Input fields */
  .form-grid{
    gap: 15px;
  }

  .form-row label{
    font-size: 13px;
  }

  .input,
  select,
  textarea{
    min-height: 48px;
    padding: 12px 13px;
    border-radius: 14px;
    font-size: 15px;
    background: #fffdf8;
  }

  textarea.input{
    min-height: 118px;
  }

  .form-card .btn,
  .dashboard .btn,
  .scan-panel .btn{
    width: 100%;
  }

  /* My Page / order hero card */
  .dashboard .cta-band,
  .dashboard .card{
    border-radius: 26px;
  }

  .dashboard .cta-band{
    padding: 24px 18px;
  }

  .dashboard .cta-band h2{
    font-size: 25px;
    line-height: 1.4;
  }

  .dashboard .cta-band p{
    font-size: 12px;
  }

  /* Stats cards */
  .stats{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .stat{
    border-radius: 20px;
    padding: 17px 15px;
  }

  .stat strong{
    font-size: 26px;
  }

  /* Tables: convert to readable mobile cards where possible */
  .table-card{
    overflow: visible;
  }

  .table-scroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-scroll table{
    min-width: 720px;
  }

  th,
  td{
    padding: 12px 13px;
    font-size: 13px;
  }

  .badge{
    font-size: 11px;
    padding: 5px 9px;
  }

  /* QR ticket / order complete */
  .qr-box{
    margin-left: auto;
    margin-right: auto;
  }

  .qr-box img{
    max-width: 230px;
  }

  /* Admin order detail cards */
  .admin-main .card{
    margin-bottom: 18px;
  }

  .admin-main h1,
  .dashboard h1{
    font-size: 26px;
    line-height: 1.4;
  }

  /* Footer mobile */
  .site-footer{
    text-align: left;
    font-size: 11px;
    line-height: 1.7;
  }

  .footer-links{
    display: grid;
    gap: 8px;
  }
}

/* Extra small mobile */
@media (max-width: 420px){

  .form-wrap,
  .dashboard,
  .scan-panel,
  .legal-content{
    padding-left: 14px;
    padding-right: 14px;
  }

  .form-card,
  .card,
  .table-card,
  .qr-box{
    padding: 20px 16px;
    border-radius: 22px;
  }

  .stats{
    grid-template-columns: 1fr;
  }

  .home-hero .hero-actions,
  .cta-band .hero-actions{
    grid-template-columns: 1fr;
  }
}
/* ==================================================
   My Page mobile order cards
================================================== */

.member-dashboard{
  max-width: 920px;
}

.member-order-hero{
  margin: 24px auto 26px;
  padding: 34px;
  border-radius: 30px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(16,37,31,.96), rgba(38,83,69,.92)),
    radial-gradient(circle at 88% 50%, rgba(228,201,133,.18), transparent 30%);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: center;
}

.member-order-hero h2{
  margin: 0 0 10px;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: .08em;
}

.member-order-hero p{
  margin: 0;
  color: rgba(255,255,255,.84);
  font-size: 13px;
}

.orders-mobile-list{
  display: grid;
  gap: 16px;
}

.order-mobile-card{
  padding: 20px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.order-mobile-top{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 14px;
}

.order-mobile-top strong{
  display: block;
  font-size: 15px;
  color: var(--deep);
}

.order-mobile-top span{
  display: block;
  font-size: 12px;
  color: var(--muted);
}

.order-mobile-details{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.order-mobile-details div{
  padding: 12px;
  border-radius: 16px;
  background: #f8f3ea;
}

.order-mobile-details span{
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 3px;
}

.order-mobile-details strong{
  display: block;
  color: var(--deep);
  font-size: 14px;
}

@media (max-width: 860px){
  .member-dashboard{
    margin-top: 28px;
  }

  .member-dashboard .section-title{
    text-align: left;
  }

  .member-order-hero{
    grid-template-columns: 1fr;
    padding: 24px 18px;
    border-radius: 26px;
  }

  .member-order-hero h2{
    font-size: 25px;
  }

  .member-order-hero .btn{
    width: 100%;
  }
}
/* ==================================================
   Admin orders mobile cards
================================================== */

.admin-orders-search{
  margin-bottom: 20px;
  box-shadow: none;
}

.admin-orders-mobile-list{
  display: none;
}

@media (max-width: 860px){
  .admin-orders-page{
    margin-top: 28px;
  }

  .admin-orders-table{
    display: none;
  }

  .admin-orders-mobile-list{
    display: grid;
    gap: 16px;
  }

  .admin-order-card{
    padding: 20px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
  }

  .admin-order-card-top{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
  }

  .admin-order-card-top strong{
    display: block;
    font-size: 15px;
    color: var(--deep);
  }

  .admin-order-card-top span{
    display: block;
    font-size: 12px;
    color: var(--muted);
  }

  .admin-order-member{
    margin-bottom: 14px;
    padding: 13px;
    border-radius: 16px;
    background: #fffdf8;
    border: 1px solid var(--line);
  }

  .admin-order-member strong{
    display: block;
    margin-bottom: 4px;
    color: var(--deep);
  }

  .admin-order-member span{
    display: block;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
  }

  .admin-order-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
  }

  .admin-order-grid div{
    padding: 12px;
    border-radius: 16px;
    background: #f8f3ea;
  }

  .admin-order-grid span{
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-bottom: 3px;
  }

  .admin-order-grid strong{
    display: block;
    color: var(--deep);
    font-size: 14px;
  }

  .admin-order-card .btn{
    width: 100%;
  }
}
/* ==================================================
   Stage 1B pickup schedule + reports
================================================== */
.order-detail-wide{
  grid-column: 1 / -1;
}

.order-mobile-details .order-detail-wide,
.admin-order-grid .order-detail-wide{
  background: #fffaf0;
  border: 1px solid rgba(200,163,92,.22);
}

.reports-page .report-stats{
  margin-bottom: 18px;
}

.admin-orders-search .action-row .btn{
  width: auto;
}

@media (max-width: 860px){
  .admin-orders-search .grid-3{
    grid-template-columns: 1fr;
  }

  .admin-orders-search .action-row{
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-orders-search .action-row .btn{
    width: 100%;
  }

  .report-stats{
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ==================================================
   Legal pages mobile table fix
   特定商取引法ページのスマホ表示調整
================================================== */

.legal-content table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  white-space: normal;
}

.legal-content th,
.legal-content td{
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.legal-content th{
  width: 180px;
  background: #f4efe6;
  color: var(--deep);
}

@media (max-width: 860px){
  .legal-content{
    margin-top: 28px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .legal-content article{
    padding: 26px 18px;
    border-radius: 24px;
  }

  .legal-content h1{
    font-size: 27px;
    line-height: 1.45;
    letter-spacing: .04em;
  }

  .legal-content p{
    font-size: 14px;
    line-height: 1.9;
  }

  .legal-content table,
  .legal-content tbody,
  .legal-content tr,
  .legal-content th,
  .legal-content td{
    display: block;
    width: 100%;
  }

  .legal-content table{
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
  }

  .legal-content tr{
    border-bottom: 1px solid var(--line);
  }

  .legal-content tr:last-child{
    border-bottom: 0;
  }

  .legal-content th{
    padding: 13px 14px 5px;
    border-bottom: 0;
    background: #f8f3ea;
    font-size: 12px;
  }

  .legal-content td{
    padding: 5px 14px 14px;
    border-bottom: 0;
    font-size: 13px;
    line-height: 1.8;
  }
}
/* ==================================================
   Legal / policy pages elegant typography
================================================== */

.legal-content{
  max-width: 820px;
}

.legal-content article{
  padding: 42px 44px;
}

.legal-content h1{
  font-size: 30px;
  line-height: 1.45;
  letter-spacing: .04em;
  font-weight: 600;
  margin-bottom: 24px;
}

.legal-content h2{
  font-size: 21px;
  line-height: 1.55;
  letter-spacing: .04em;
  font-weight: 600;
  margin-top: 32px;
  padding-top: 24px;
}

.legal-content h3{
  font-size: 17px;
  line-height: 1.6;
  font-weight: 600;
}

.legal-content p,
.legal-content li,
.legal-content td,
.legal-content th{
  font-size: 14px;
  line-height: 1.95;
}

.legal-content p{
  margin: 0 0 16px;
}

.legal-content table{
  font-size: 14px;
}

@media (max-width: 860px){
  .legal-content{
    max-width: 100%;
    margin-top: 24px;
    margin-bottom: 34px;
  }

  .legal-content article{
    padding: 28px 20px;
    border-radius: 24px;
  }

  .legal-content h1{
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 20px;
  }

  .legal-content h2{
    font-size: 18px;
    line-height: 1.55;
    margin-top: 28px;
    padding-top: 22px;
  }

  .legal-content h3{
    font-size: 16px;
  }

  .legal-content p,
  .legal-content li,
  .legal-content td,
  .legal-content th{
    font-size: 13px;
    line-height: 1.9;
  }

  .legal-content th{
    font-size: 12px;
  }

  .legal-content td{
    font-size: 13px;
  }
}
/* ==================================================
   Karatsuya brand color adjustment
   Main dark color changed to #354458
================================================== */

:root{
  --deep:#354458;
  --deep-2:#405168;
  --deep-3:#50647d;
  --leaf:#607568;
}

/* Header / footer brand tone */
.site-header,
.admin-header,
.site-footer{
  background:#354458;
}

/* Deep CTA panels */
.cta-band,
.member-order-hero{
  background:
    linear-gradient(135deg, rgba(53,68,88,.97), rgba(64,81,104,.94)),
    radial-gradient(circle at 88% 50%, rgba(228,201,133,.18), transparent 30%);
}

/* Hero overlay slightly adjusted for blue-gray brand tone */
.home-hero::before{
  background:
    linear-gradient(180deg,rgba(53,68,88,.18) 0%,rgba(53,68,88,.42) 38%,rgba(20,31,38,.88) 100%),
    linear-gradient(90deg,rgba(53,68,88,.48) 0%,rgba(53,68,88,.08) 70%);
}

/* Mobile menu button keeps premium look */
.nav-toggle{
  border-color:rgba(228,201,133,.55);
  background:rgba(255,255,255,.10);
}

/* Footer links remain readable */
.site-footer,
.site-footer a{
  color:#fff;
}

/* ==================================================
   Mobile typography refinement
   Smaller, more elegant mobile titles
================================================== */

@media (max-width: 860px){
  .form-wrap h1,
  .dashboard h1,
  .admin-main h1{
    font-size: 25px;
    line-height: 1.45;
    letter-spacing: .04em;
  }

  .form-wrap .section-title h2,
  .dashboard .section-title h2,
  .scan-panel .section-title h2{
    font-size: 23px;
    line-height: 1.45;
  }

  .card h2,
  .form-card h2,
  .member-order-hero h2,
  .cta-band h2{
    font-size: 21px;
    line-height: 1.45;
  }

  .form-card h1{
    font-size: 25px;
    margin-top: 0;
    margin-bottom: 22px;
  }

  .form-card p{
    font-size: 14px;
    line-height: 1.9;
  }
}

@media (max-width: 420px){
  .form-wrap h1,
  .dashboard h1,
  .admin-main h1,
  .form-card h1{
    font-size: 24px;
  }
}

/* ==================================================
   Karatsuya premium font system
   Headings use elegant Japanese Mincho only where it adds brand value.
   Forms, admin, tables, buttons, and policy pages use clean Gothic/Sans.
================================================== */

:root{
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
}

body{
  font-family: var(--font-sans);
}

/* Premium public-facing headings */
.home-hero h1,
.home-heading h2,
.page-hero h1,
.company-hero h1,
.lifestyle-content h2,
.cta-band h2,
.member-order-hero h2,
.story-text h2,
.factory-map-card h2{
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: .08em;
}

/* Keep functional/admin/legal UI highly readable */
.site-nav,
.brand,
.btn,
.input,
select,
textarea,
table,
th,
td,
.form-row label,
.flash,
.small-note,
.badge,
.form-card,
.dashboard,
.admin-main,
.scan-panel,
.legal-content,
.site-footer,
.footer-links{
  font-family: var(--font-sans);
}

/* Legal/policy pages should remain professional and easy to read */
.legal-content h1,
.legal-content h2,
.legal-content h3,
.legal-content p,
.legal-content li,
.legal-content th,
.legal-content td{
  font-family: var(--font-sans);
}

/* Forms and admin titles stay clean, not decorative */
.form-card h1,
.form-card h2,
.form-wrap h1,
.dashboard .section-title h2,
.admin-main h1,
.scan-panel .section-title h2{
  font-family: var(--font-sans);
  font-weight: 600;
}

/* Slightly refined Japanese text rendering */
body,
button,
input,
select,
textarea{
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* ==================================================
   Hero responsive image switch: PC + mobile
   PC uses hero-desktop.jpg, mobile uses hero-mobile.jpg
================================================== */

.home-hero-picture{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}

.home-hero-picture source,
.home-hero-picture img{
  display:block;
}

.home-hero-picture .home-hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Desktop: make hero taller and use the PC image comfortably */
@media (min-width: 861px){
  .home-hero{
    min-height:760px;
  }

  .home-hero-inner{
    min-height:760px;
    align-items:center;
    padding-top:90px;
    padding-bottom:90px;
  }

  .home-hero-bg{
    object-position:center center;
  }
}

/* Mobile: keep the approved mobile balance */
@media (max-width: 860px){
  .home-hero{
    min-height:700px;
  }

  .home-hero-inner{
    min-height:700px;
  }

  .home-hero-bg{
    object-position:58% center;
  }
}
/* ==================================================
   Order confirmation popup
================================================== */

body.modal-open{
  overflow: hidden;
}

.order-confirm-backdrop{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(20, 25, 30, .58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.order-confirm-backdrop[hidden]{
  display: none;
}

.order-confirm-modal{
  width: min(620px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 30px;
  border-radius: 30px;
  background: #fffdf8;
  border: 1px solid rgba(200,163,92,.28);
  box-shadow: 0 28px 80px rgba(0,0,0,.26);
}

.order-confirm-head span{
  display: block;
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  margin-bottom: 6px;
}

.order-confirm-head h2{
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.45;
  letter-spacing: .06em;
  color: var(--deep);
}

.order-confirm-head p{
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 13px;
}

.order-confirm-list{
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
}

.order-confirm-list div{
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 14px;
  padding: 13px 14px;
  border-radius: 16px;
  background: #f8f3ea;
  border: 1px solid rgba(200,163,92,.16);
}

.order-confirm-list span{
  color: var(--muted);
  font-size: 12px;
}

.order-confirm-list strong{
  color: var(--deep);
  font-size: 14px;
}

.order-confirm-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 860px){
  .order-confirm-modal{
    padding: 24px 18px;
    border-radius: 24px;
  }

  .order-confirm-head h2{
    font-size: 23px;
  }

  .order-confirm-list div{
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .order-confirm-actions{
    grid-template-columns: 1fr;
  }

  .order-confirm-actions .btn{
    width: 100%;
  }
}
/* ==================================================
   Company profile mobile table final fix
   会社概要テーブルのスマホ表示調整
================================================== */

.company-profile-card{
  overflow: hidden;
}

.company-profile-card .table-scroll{
  overflow: visible !important;
  width: 100%;
}

.company-profile-card .table-scroll table{
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed;
  white-space: normal;
}

.company-profile-card th,
.company-profile-card td{
  white-space: normal !important;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

@media (max-width: 860px){
  .company-profile-card{
    padding: 0;
    border-radius: 24px;
  }

  .company-profile-card .table-scroll{
    overflow: hidden !important;
    border-radius: 24px;
  }

  .company-profile-card table,
  .company-profile-card tbody,
  .company-profile-card tr,
  .company-profile-card th,
  .company-profile-card td{
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .company-profile-card tr{
    border-bottom: 1px solid var(--line);
    background: #fff;
  }

  .company-profile-card tr:last-child{
    border-bottom: 0;
  }

  .company-profile-card th{
    padding: 13px 16px 4px;
    background: #f4efe6;
    color: var(--deep);
    font-size: 12px;
    line-height: 1.6;
    border-bottom: 0;
  }

  .company-profile-card td{
    padding: 4px 16px 15px;
    background: #fff;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.8;
    border-bottom: 0;
  }
}
/* ==================================================
   Login new-member callout + password confirmation
================================================== */

.register-callout{
  margin-top: 22px;
  padding: 18px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, #fffaf0, #f8f3ea);
  border: 1px solid rgba(200,163,92,.35);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 14px;
}

.register-callout strong{
  display: block;
  color: var(--deep);
  font-size: 16px;
  margin-bottom: 4px;
}

.register-callout p{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}

.register-callout .btn{
  width: 100%;
}

.password-note-error{
  color: #b3261e !important;
  font-weight: 700;
}

.password-note-ok{
  color: #1f7a55 !important;
  font-weight: 700;
}

@media (max-width: 860px){
  .register-callout{
    padding: 16px;
    border-radius: 20px;
  }

  .register-callout strong{
    font-size: 15px;
  }

  .register-callout p{
    font-size: 12px;
  }
}
/* ==================================================
   Password visibility eye button
================================================== */

.password-field{
  position: relative;
  width: 100%;
}

.password-field .input{
  padding-right: 88px;
}

.password-toggle{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  min-width: 62px;
  height: 34px;
  border: 1px solid rgba(200,163,92,.42);
  border-radius: 999px;
  background: #fffaf0;
  color: var(--deep);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.password-toggle:hover{
  background: #f8f3ea;
}

@media (max-width: 860px){
  .password-field .input{
    padding-right: 82px;
  }

  .password-toggle{
    right: 9px;
    min-width: 58px;
    height: 32px;
    font-size: 11px;
  }
}
/* ==================================================
   Admin page return button
================================================== */

.admin-page-actions{
  margin: 18px 0 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-page-actions .btn{
  min-width: 190px;
}

@media (max-width: 860px){
  .admin-page-actions{
    margin: 14px 0 20px;
  }

  .admin-page-actions .btn{
    width: 100%;
    min-width: 0;
  }
}
/* ==================================================
   Reports yearly + member contact list polish
================================================== */

.report-section{
  margin-top: 34px;
}

.report-section:first-of-type{
  margin-top: 0;
}

.report-section-title{
  text-align: left;
  margin: 0 0 18px;
}

.report-section-title h2{
  font-size: 25px;
}

.member-contact-table td{
  vertical-align: top;
}

@media (max-width: 860px){
  .report-section{
    margin-top: 28px;
  }

  .report-section-title h2{
    font-size: 22px;
  }

  .member-contact-table .table-scroll table{
    min-width: 980px;
  }
}


/* ==================================================
   Admin orders PC filter alignment only
   PC only. Does not affect mobile/cards/stats/member pages.
================================================== */

@media (min-width: 861px){

  .admin-orders-search .grid-3{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 22px !important;
  }

  .admin-orders-search .grid-3 .form-row{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  .admin-orders-search .grid-3 .form-row label{
    display: block !important;
    height: 22px !important;
    min-height: 22px !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    line-height: 22px !important;
  }

  .admin-orders-search .grid-3 .form-row input,
  .admin-orders-search .grid-3 .form-row select{
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    line-height: 48px !important;
    box-sizing: border-box !important;
  }

  .admin-orders-search .grid-3 .form-row select{
    padding-right: 36px !important;
  }

  .admin-orders-search .grid-3 .form-row .small-note{
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.35 !important;
    font-size: 12px !important;
    transform: translateY(-2px);
  }
}



/* ==================================================
   Admin orders PC view fix
   PC only. Hide mobile cards on desktop and keep PC table visible.
================================================== */

@media (min-width: 861px){

  body.admin-body .admin-orders-mobile-list,
  body.admin-body .admin-order-card{
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.admin-body .admin-orders-table{
    display: block !important;
    visibility: visible !important;
    margin-top: 20px !important;
  }

  body.admin-body .admin-orders-table .table-scroll{
    overflow-x: auto !important;
  }

  body.admin-body .admin-orders-table table{
    width: 100% !important;
    min-width: 1080px !important;
    font-size: 12px !important;
  }

  body.admin-body .admin-orders-table th,
  body.admin-body .admin-orders-table td{
    padding: 10px 12px !important;
    vertical-align: middle !important;
  }

  body.admin-body .admin-orders-table .btn{
    min-height: 34px !important;
    padding: 7px 13px !important;
    font-size: 11px !important;
  }
}


/* ==================================================
   Admin dashboard mobile stats 2-column restore
   Mobile only. Does not affect PC table/cards.
================================================== */

@media (max-width: 860px){

  body.admin-body .dashboard .stats{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body.admin-body .dashboard .stat{
    width: auto !important;
    margin: 0 !important;
  }
}