:root{
  --mori-bg:#F3F4EF;
  --mori-ink:#1E1F1A;
  --mori-olive:#636754;
  --mori-sand:#D8D2C5;
  --mori-stone:#B9B1A4;
  --mori-border: rgba(99,103,84,.25);
  --mori-border-strong: rgba(99,103,84,.38);
  --mori-shadow: 0 24px 60px rgba(30,31,26,.08);
  --mori-nav-bg: rgba(243,244,239,.78);
  --mori-glass: rgba(243,244,239,.58);
  --mori-muted: rgba(30,31,26,.72);
  --mori-soft: rgba(216,210,197,.22);

  --tw-surface: rgba(255,255,255,.45);
  --tw-surface-2: rgba(255,255,255,.40);
  --tw-surface-hover: rgba(216,210,197,.25);
  --tw-panel: rgba(243,244,239,.96);
  --tw-input-bg: rgba(255,255,255,.55);
  --tw-input-border: rgba(99,103,84,.28);
  --tw-input-border-focus: rgba(99,103,84,.55);
  --tw-ring: rgba(99,103,84,.14);
  --tw-badge-bg: rgba(99,103,84,.12);
  --tw-badge-border: rgba(99,103,84,.18);
  --tw-toast-bg: rgba(255,255,255,.82);
  --tw-accent-hover: #545844;
  --tw-on-accent: var(--mori-bg);
  --tw-glow-1: rgba(216,210,197,.35);
  --tw-glow-2: rgba(99,103,84,.22);
}

html, body { height: 100%; }

body{
  font-family: "Fira Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--mori-ink);
  background: var(--mori-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--mori-olive); }

.navbar{
  backdrop-filter: blur(10px);
  background: var(--mori-nav-bg);
  border-bottom: 1px solid var(--mori-border);
}

.brand-mark{
  width: 38px; height: 38px;
  border: 1px solid var(--mori-border);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Serif JP", serif;
  color: var(--mori-olive);
  background: var(--tw-surface-hover);
}

.nav-link{
  letter-spacing: .02em;
}

.btn-mori{
  --bs-btn-padding-x: 1.1rem;
  --bs-btn-padding-y: .68rem;
  --bs-btn-border-radius: 999px;
  --bs-btn-font-weight: 500;
  --bs-btn-border-color: var(--mori-olive);
  --bs-btn-color: var(--mori-olive);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--mori-olive);
  --bs-btn-hover-color: var(--mori-bg);
  --bs-btn-hover-border-color: var(--mori-olive);
  --bs-btn-focus-shadow-rgb: 99,103,84;
  transition: transform .18s ease, box-shadow .18s ease;
}

.btn-mori:active{ transform: translateY(1px); }
.btn-mori-solid{
  --bs-btn-bg: var(--mori-olive);
  --bs-btn-color: var(--mori-bg);
  --bs-btn-hover-bg: var(--tw-accent-hover);
  --bs-btn-hover-color: var(--mori-bg);
}

.badge-soft{
  background: var(--tw-badge-bg);
  color: var(--mori-olive);
  border: 1px solid var(--tw-badge-border);
}

.section{
  padding: 4.5rem 0;
}

.section-title{
  font-size: clamp(1.5rem, 2vw, 2.1rem);
  letter-spacing: .02em;
}

.section-subtitle{
  color: var(--mori-muted);
  max-width: 56ch;
}

.card-mori{
  border: 1px solid var(--mori-border);
  border-radius: 22px;
  background: var(--tw-surface);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}

.card-mori:hover{
  transform: translateY(-3px);
  box-shadow: var(--mori-shadow);
  border-color: var(--mori-border-strong);
}

.product-img{
  border-radius: 18px;
  border: 1px solid var(--mori-border);
  background: var(--mori-soft);
}

.product-card-imgwrap{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: var(--mori-soft);
  border: 1px solid var(--mori-border);
  /* Keep consistent image box size without cropping. */
  aspect-ratio: 4 / 3;
  min-height: 240px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-card-imgwrap > a{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px;
}

.product-card-imgwrap img{
  position: static;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform: none;
  transition: none;
}

.product-card-imgwrap:hover img{ transform: none; }

.product-quick{
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: .45rem .7rem;
  border-radius: 999px;
  background: var(--mori-glass);
  border: 1px solid var(--mori-border);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}

.product-card-imgwrap:hover .product-quick{
  opacity: 1;
  transform: translateY(0);
}

.hero{
  position: relative;
  border-bottom: 1px solid var(--mori-border);
  background: radial-gradient(1200px 600px at 20% 20%, var(--tw-glow-1), transparent 60%),
              radial-gradient(900px 500px at 80% 40%, var(--tw-glow-2), transparent 55%),
              var(--mori-bg);
}

.hero .carousel-item{
  min-height: 72vh;
}

.hero-slide{
  min-height: 72vh;
  display: grid;
  align-items: center;
  padding: 5.5rem 0;
}

.hero-kicker{
  letter-spacing: .25em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--mori-muted);
}

.hero-title{
  font-size: clamp(2.15rem, 4.2vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: .01em;
}

.hero-lead{
  color: var(--mori-muted);
  max-width: 60ch;
  font-size: 1.06rem;
}

.hero-media{
  border-radius: 26px;
  border: 1px solid var(--mori-border);
  background: var(--tw-surface-2);
  overflow: hidden;
  box-shadow: var(--mori-shadow);
}

.hero-media img{
  width: 100%;
  height: 480px;
  object-fit: contain;
  background: var(--tw-surface-2);
}

@media (max-width: 991.98px){
  .hero .carousel-item{ min-height: 84vh; }
  .hero-slide{ padding: 4.4rem 0; }
  .hero-media img{ height: 360px; }
}

.icon-btn{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--mori-border);
  background: var(--tw-surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.icon-btn:hover{
  background: var(--tw-surface-hover);
  border-color: var(--mori-border-strong);
  transform: translateY(-1px);
}

.footer{
  border-top: 1px solid var(--mori-border);
  padding: 2.5rem 0;
  color: var(--mori-muted);
}

.footer a{ color: var(--mori-muted); }
.footer a:hover{ color: var(--mori-olive); }

.mori-divider{
  height: 1px;
  background: var(--mori-border);
}

.breadcrumb{
  --bs-breadcrumb-divider-color: var(--mori-muted);
  --bs-breadcrumb-item-active-color: var(--mori-muted);
}

.form-control, .form-select{
  border-radius: 16px;
  border-color: var(--tw-input-border);
  background: var(--tw-input-bg);
  color: var(--mori-ink);
}

.form-control:focus, .form-select:focus{
  border-color: var(--tw-input-border-focus);
  box-shadow: 0 0 0 .25rem var(--tw-ring);
}

.table{
  --bs-table-bg: transparent;
}

.cart-line{
  border-bottom: 1px solid var(--mori-border);
}

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

.toast{
  border-radius: 18px;
  border: 1px solid var(--mori-border);
  background: var(--tw-toast-bg);
  box-shadow: var(--mori-shadow);
  color: var(--mori-ink);
}

.bg-soft{
  background: var(--mori-soft);
  border: 1px solid var(--mori-border);
  border-radius: 24px;
}

.kbd-soft{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .88rem;
  padding: .15rem .45rem;
  border-radius: 10px;
  border: 1px solid var(--mori-border);
  background: var(--tw-surface-2);
  color: var(--mori-ink);
}

/* GLightbox tweaks */
.glightbox-clean .gslide-title,
.glightbox-clean .gslide-desc{
  font-family: "Fira Sans", system-ui, sans-serif;
}


/* --- Product detail --- */
.link-plain{
  color: inherit;
  text-decoration: none;
}
.link-plain:hover{
  text-decoration: underline;
}
.pd-main-img{
  border-radius: 18px;
  border: 1px solid var(--mori-border);
  background: var(--mori-soft);
}
.pd-thumb{
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--mori-border);
  background: rgba(216,210,197,.12);
}
.pd-thumb img{
  width: 100%;
  height: 86px;
  object-fit: cover;
  display: block;
}
@media (min-width: 992px){
  .pd-thumb img{ height: 96px; }
}


/* --- Themes --- */
html[data-theme="dark"]{

  --mori-bg:#0F1110;
  --mori-ink:#F3F2EA;
  --mori-olive:#A9B58C;
  --mori-sand:#2A2C29;
  --mori-stone:#666258;
  --mori-border: rgba(243,242,234,.14);
  --mori-border-strong: rgba(243,242,234,.22);
  --mori-shadow: 0 28px 70px rgba(0,0,0,.35);
  --mori-nav-bg: rgba(15,17,16,.72);
  --mori-glass: rgba(20,22,20,.62);
  --mori-muted: rgba(243,242,234,.72);
  --mori-soft: rgba(169,181,140,.12);
  --tw-surface: rgba(255,255,255,.07);
  --tw-surface-2: rgba(255,255,255,.06);
  --tw-surface-hover: rgba(255,255,255,.10);
  --tw-panel: rgba(15,17,16,.96);
  --tw-input-bg: rgba(255,255,255,.07);
  --tw-input-border: rgba(243,242,234,.18);
  --tw-input-border-focus: rgba(169,181,140,.38);
  --tw-ring: rgba(169,181,140,.22);
  --tw-badge-bg: rgba(169,181,140,.14);
  --tw-badge-border: rgba(169,181,140,.24);
  --tw-toast-bg: rgba(15,17,16,.90);
  --tw-accent-hover: #93A474;
  --tw-on-accent: #0F1110;

  --tw-glow-1: rgba(169,181,140,.08);
  --tw-glow-2: rgba(169,181,140,.12);
}

html[data-theme="orange"]{
  --mori-bg:#F7F1E9;
  --mori-ink:#1E1F1A;
  --mori-olive:#C56B2D;
  --mori-sand:#E6D2C2;
  --mori-stone:#C7B1A2;
  --mori-border: rgba(197,107,45,.22);
  --mori-border-strong: rgba(197,107,45,.34);
  --mori-shadow: 0 24px 60px rgba(30,31,26,.08);
  --mori-nav-bg: rgba(247,241,233,.78);
  --mori-glass: rgba(247,241,233,.60);
  --mori-muted: rgba(30,31,26,.72);
  --mori-soft: rgba(197,107,45,.10);
  --tw-surface: rgba(255,250,245,.62);
  --tw-surface-2: rgba(255,250,245,.50);
  --tw-surface-hover: rgba(197,107,45,.10);
  --tw-panel: rgba(247,241,233,.96);
  --tw-input-bg: rgba(255,250,245,.70);
  --tw-input-border: rgba(197,107,45,.22);
  --tw-input-border-focus: rgba(197,107,45,.34);
  --tw-ring: rgba(197,107,45,.18);
  --tw-badge-bg: rgba(197,107,45,.12);
  --tw-badge-border: rgba(197,107,45,.20);
  --tw-toast-bg: rgba(255,250,245,.86);
  --tw-accent-hover: #A95622;
  --tw-on-accent: #F7F1E9;

  --tw-glow-1: rgba(230,210,194,.35);
  --tw-glow-2: rgba(197,107,45,.18);
}

html[data-theme="red"]{
  --mori-bg:#F7EEEE;
  --mori-ink:#1E1F1A;
  --mori-olive:#B44B4B;
  --mori-sand:#E7CFCF;
  --mori-stone:#C7AEAE;
  --mori-border: rgba(180,75,75,.22);
  --mori-border-strong: rgba(180,75,75,.34);
  --mori-shadow: 0 24px 60px rgba(30,31,26,.08);
  --mori-nav-bg: rgba(247,238,238,.78);
  --mori-glass: rgba(247,238,238,.60);
  --mori-muted: rgba(30,31,26,.72);
  --mori-soft: rgba(180,75,75,.10);
  --tw-surface: rgba(255,247,247,.62);
  --tw-surface-2: rgba(255,247,247,.50);
  --tw-surface-hover: rgba(180,75,75,.10);
  --tw-panel: rgba(247,238,238,.96);
  --tw-input-bg: rgba(255,247,247,.70);
  --tw-input-border: rgba(180,75,75,.22);
  --tw-input-border-focus: rgba(180,75,75,.34);
  --tw-ring: rgba(180,75,75,.18);
  --tw-badge-bg: rgba(180,75,75,.12);
  --tw-badge-border: rgba(180,75,75,.20);
  --tw-toast-bg: rgba(255,247,247,.86);
  --tw-accent-hover: #923A3A;
  --tw-on-accent: #F7EEEE;

  --tw-glow-1: rgba(231,207,207,.35);
  --tw-glow-2: rgba(180,75,75,.18);
}

html[data-theme="green"]{
  --mori-bg:#EEF4F0;
  --mori-ink:#1E1F1A;
  --mori-olive:#4E7A63;
  --mori-sand:#D4E3DA;
  --mori-stone:#B4C9BE;
  --mori-border: rgba(78,122,99,.22);
  --mori-border-strong: rgba(78,122,99,.34);
  --mori-shadow: 0 24px 60px rgba(30,31,26,.08);
  --mori-nav-bg: rgba(238,244,240,.78);
  --mori-glass: rgba(238,244,240,.60);
  --mori-muted: rgba(30,31,26,.72);
  --mori-soft: rgba(78,122,99,.10);
  --tw-surface: rgba(244,252,248,.60);
  --tw-surface-2: rgba(244,252,248,.48);
  --tw-surface-hover: rgba(78,122,99,.10);
  --tw-panel: rgba(238,244,240,.96);
  --tw-input-bg: rgba(244,252,248,.68);
  --tw-input-border: rgba(78,122,99,.22);
  --tw-input-border-focus: rgba(78,122,99,.34);
  --tw-ring: rgba(78,122,99,.18);
  --tw-badge-bg: rgba(78,122,99,.12);
  --tw-badge-border: rgba(78,122,99,.20);
  --tw-toast-bg: rgba(244,252,248,.86);
  --tw-accent-hover: #3D6250;
  --tw-on-accent: #EEF4F0;

  --tw-glow-1: rgba(212,227,218,.35);
  --tw-glow-2: rgba(78,122,99,.18);
}


/* --- Theme menu --- */
.dropdown-menu-mori{
  background: var(--mori-glass);
  border: 1px solid var(--mori-border);
  box-shadow: var(--mori-shadow);
  backdrop-filter: blur(12px);
  border-radius: 18px;
  padding: .55rem;
}
.dropdown-menu-mori .dropdown-item{
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .75rem;
}
.dropdown-menu-mori .dropdown-item.active,
.dropdown-menu-mori .dropdown-item:active{
  background: var(--mori-soft);
  color: var(--mori-ink);
}
.theme-dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  border: 1px solid var(--mori-border);
  display: inline-block;
}
.theme-dot[data-dot="light"]{ background:#F3F4EF; }
.theme-dot[data-dot="dark"]{ background:#0F1110; border-color: rgba(243,242,234,.25); }
.theme-dot[data-dot="orange"]{ background:#C56B2D; border-color: rgba(197,107,45,.35); }
.theme-dot[data-dot="red"]{ background:#B44B4B; border-color: rgba(180,75,75,.35); }
.theme-dot[data-dot="green"]{ background:#4E7A63; border-color: rgba(78,122,99,.35); }


/* --- Hero (full-bleed slider) --- */
.hero .carousel-item{
  position: relative;
  height: clamp(520px, 78vh, 860px);
}
.hero-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

.hero-img.hero-img-contain{
  object-fit: contain;
  transform: none;
  background: var(--tw-surface-2);
}

.hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.02) 55%, rgba(0,0,0,.00) 100%);
  pointer-events:none;
}
html[data-theme="dark"] .hero-overlay{
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.0) 100%);
}
.hero .carousel-caption{
  position:absolute;
  inset:0;
  text-align: left;
  padding: 0;
  display:flex;
  align-items:center;
}
.hero-caption-inner{
  max-width: 680px;
  padding: 1.25rem 1.35rem;
  border-radius: 24px;
  background: var(--mori-glass);
  border: 1px solid var(--mori-border);
  backdrop-filter: blur(14px);
  box-shadow: var(--mori-shadow);
}
.hero-kicker{
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .74rem;
  color: var(--mori-muted);
}
.hero-title{
  font-size: clamp(1.9rem, 3.6vw, 3.15rem);
  line-height: 1.12;
  letter-spacing: .01em;
  font-weight: 500;
}
.hero-lead{
  color: var(--mori-muted);
  max-width: 60ch;
  font-size: 1.02rem;
}
@media (max-width: 575.98px){
  .hero-caption-inner{ padding: 1.05rem 1.1rem; border-radius: 20px; }
  .hero-title{ font-size: 1.85rem; }
  .hero-lead{ font-size: .98rem; }
}


/* --- Contact info --- */
.contact-info{
  border-radius: 22px;
}
.contact-row{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:.75rem .85rem;
  border-radius: 18px;
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
  border: 1px solid transparent;
}
.contact-row:hover{
  background: var(--mori-soft);
  border-color: var(--mori-border);
  transform: translateY(-1px);
}
.contact-ico{
  width: 40px; height: 40px;
  border-radius: 16px;
  border: 1px solid var(--mori-border);
  background: var(--tw-surface-2);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}
html[data-theme="dark"] .contact-ico{
  background: rgba(255,255,255,.06);
}


/* --- Dark theme surface tweaks --- */
html[data-theme="dark"] .card-mori{ background: rgba(255,255,255,.06); }
html[data-theme="dark"] .icon-btn{ background: rgba(255,255,255,.06); }
html[data-theme="dark"] .navbar-toggler{ filter: invert(1) hue-rotate(180deg); }


/* --- Focus ring (theme aware) --- */
.btn-mori:focus, .btn-mori:focus-visible{
  box-shadow: 0 0 0 .25rem var(--tw-ring) !important;
}


/* --- Panels (offcanvas/modal) --- */
.offcanvas{
  background: var(--tw-panel);
  color: var(--mori-ink);
  border-left: 1px solid var(--mori-border);
}
.offcanvas-header{
  border-bottom: 1px solid var(--mori-border);
}
.modal-content{
  background: var(--tw-panel);
  color: var(--mori-ink);
  border: 1px solid var(--mori-border);
  border-radius: 22px;
}
html[data-theme="dark"] .btn-close{
  filter: invert(1) grayscale(1);
}


/* --- Theme wash on hero --- */
.hero-overlay::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.06) 100%);
  mix-blend-mode: multiply;
  opacity: .35;
  pointer-events:none;
}
html[data-theme="dark"] .hero-overlay::after{
  opacity: .55;
}


/* --- Theme transitions --- */
body,
.navbar,
.card-mori,
.bg-soft,
.offcanvas,
.modal-content,
.dropdown-menu-mori,
.icon-btn,
.badge-soft,
.form-control,
.form-select,
.toast,
.kbd-soft{
  transition:
    background-color .22s ease,
    color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    opacity .22s ease;
}

img[data-theme-img]{
  transition: opacity .18s ease;
}