: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);
}

/* Home showcase badges */
.badge-showcase{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .38rem .7rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .06em;
}

.badge-tone-neutral{ background: rgba(99,103,84,.10); border: 1px solid rgba(99,103,84,.25); color: var(--mori-olive); }
.badge-tone-success{ background: rgba(25,135,84,.12); border: 1px solid rgba(25,135,84,.25); color: #198754; }
.badge-tone-warning{ background: rgba(255,193,7,.14); border: 1px solid rgba(255,193,7,.28); color: #b88600; }
.badge-tone-danger{  background: rgba(220,53,69,.12); border: 1px solid rgba(220,53,69,.25); color: #dc3545; }
.badge-tone-info{    background: rgba(13,110,253,.12); border: 1px solid rgba(13,110,253,.25); color: #0d6efd; }

/* Horizontal product slider */
.showcase-carousel{
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .25rem;
}

.showcase-carousel .col{
  flex: 0 0 auto;
  width: 280px;
  scroll-snap-align: start;
}

.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. Fill the area without distortion (may crop). */
  aspect-ratio: 1 / 1;
  min-height: 260px;
  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: 0;
}

.product-card-imgwrap img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  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);
}

/* Touch devices (no hover): keep quick actions visible */
@media (hover: none){
  .product-quick{
    opacity: 1;
    transform: none;
  }
}

.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: cover;
  object-position: center;
  background: var(--tw-surface-2);
}

/* Generic hero-media fit modes (used on content pages like About/Contact/CMS) */
.hero-media[data-fit="contain"] img{ object-fit: contain; }
.hero-media[data-fit="smart"] img{ object-fit: contain; }
.hero-media[data-fit="cover"] img{ object-fit: cover; }

@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);
}

/* Smart image fitting:
   - Image is always shown fully (no distortion).
   - If mode is "smart", remaining area is filled with a blurred cover background of the same image.
   - If mode is "contain", image is shown fully with a flat background.
   - If mode is "cover", image fills the area and may crop (legacy behavior). */
.hero .hero-media{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index: 1;
  background: var(--tw-surface-2);
}
.hero .hero-media::before{
  content:"";
  position:absolute;
  inset:-28px;
  background-image: var(--tw-media-url);
  background-size: cover;
  background-position: center;
  filter: blur(22px);
  transform: scale(1.08);
  opacity: .65;
  pointer-events:none;
}
.hero .hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(1000px 600px at 50% 50%, rgba(255,255,255,.12), rgba(255,255,255,0));
  pointer-events:none;
  opacity: .9;
}
html[data-theme="dark"] .hero .hero-media::after{
  background: radial-gradient(1000px 600px at 50% 50%, rgba(0,0,0,.22), rgba(0,0,0,0));
}

.hero .hero-media[data-fit="contain"]::before{ opacity: 0; }
.hero .hero-media[data-fit="cover"]::before{ opacity: 0; }

.hero .hero-media > img.hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: contain;
  transform: none;
  z-index: 2;
}
.hero .hero-media[data-fit="cover"] > img.hero-img{
  object-fit: cover;
  transform: scale(1.02);
}

/* Generic smart image container (used in product gallery, etc.) */
.media-smartfit{
  position: relative;
  overflow: hidden;
  background: var(--tw-surface-2);
}
.media-smartfit::before{
  content:"";
  position:absolute;
  inset:-22px;
  background-image: var(--tw-media-url);
  background-size: cover;
  background-position: center;
  filter: blur(18px);
  transform: scale(1.08);
  opacity: .65;
  pointer-events:none;
}
.media-smartfit::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 520px at 50% 50%, rgba(255,255,255,.10), rgba(255,255,255,0));
  pointer-events:none;
  opacity: .9;
}
html[data-theme="dark"] .media-smartfit::after{
  background: radial-gradient(900px 520px at 50% 50%, rgba(0,0,0,.22), rgba(0,0,0,0));
}

.media-smartfit[data-fit="contain"]::before{ opacity: 0; }
.media-smartfit[data-fit="cover"]::before{ opacity: 0; }

.media-smartfit > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: contain;
  z-index: 2;
}
.media-smartfit[data-fit="cover"] > img{ object-fit: cover; }

.pd-main-media{ aspect-ratio: 1 / 1; border-radius: 18px; border: 1px solid var(--mori-border); }
.pd-thumb-media{ aspect-ratio: 1 / 1; border-radius: 14px; border: 1px solid var(--mori-border); }

.hero-overlay{
  position:absolute;
  inset:0;
  z-index: 2;
  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;
  z-index: 3;
  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;
}

/* --- Order shipping timeline (public) --- */
.tw-stepper{
  --tw-step-pad: 16px;
  --tw-step-icon: 42px; /* .icon-btn size */
  --tw-step-gap: 16px;
  --tw-progress: 0; /* 0 | 0.5 | 1 */

  display: flex;
  gap: var(--tw-step-gap);
  position: relative;
}

/* Base connector line (only visible in gaps, steps sit above) */
.tw-stepper::before,
.tw-stepper::after{
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.tw-stepper::before{
  top: calc(var(--tw-step-pad) + (var(--tw-step-icon) / 2));
  left: calc(var(--tw-step-pad) + (var(--tw-step-icon) / 2));
  right: calc(var(--tw-step-pad) + (var(--tw-step-icon) / 2));
  height: 2px;
  background: var(--mori-border);
}

.tw-stepper::after{
  top: calc(var(--tw-step-pad) + (var(--tw-step-icon) / 2));
  left: calc(var(--tw-step-pad) + (var(--tw-step-icon) / 2));
  height: 2px;
  background: rgba(99,103,84,.55);
  width: calc((100% - (2 * (var(--tw-step-pad) + (var(--tw-step-icon) / 2)))) * var(--tw-progress));
}

.tw-step{
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: var(--tw-step-pad);
  border: 1px solid var(--mori-border);
  border-radius: 22px;
  background: var(--tw-surface);
  z-index: 1;
}

.tw-step-head{
  display:flex;
  /* Keep icon pinned so connector line stays aligned even if text wraps */
  align-items:flex-start;
  gap: 14px;
}

.tw-step-head > div{ min-width: 0; }

.tw-step-title{
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  /* Never split Turkish words letter-by-letter (fixes narrow-card ugliness) */
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.tw-step-sub{
  font-size: .85rem;
  color: var(--mori-muted);
  margin-top: 6px;
  line-height: 1.3;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.tw-step-icon{
  flex: 0 0 auto;
}

.tw-step.done{
  border-color: var(--mori-border-strong);
  background: var(--tw-surface-hover);
}

.tw-step.done .tw-step-icon{
  background: var(--mori-olive);
  border-color: var(--mori-olive);
  color: var(--mori-bg);
}

@media (max-width: 991.98px){
  .tw-stepper{ flex-direction: column; --tw-step-gap: 12px; }

  .tw-stepper::before{
    left: calc(var(--tw-step-pad) + (var(--tw-step-icon) / 2));
    right: auto;
    width: 2px;
    top: calc(var(--tw-step-pad) + (var(--tw-step-icon) / 2));
    bottom: calc(var(--tw-step-pad) + (var(--tw-step-icon) / 2));
    height: auto;
  }

  .tw-stepper::after{
    left: calc(var(--tw-step-pad) + (var(--tw-step-icon) / 2));
    width: 2px;
    top: calc(var(--tw-step-pad) + (var(--tw-step-icon) / 2));
    height: calc((100% - (2 * (var(--tw-step-pad) + (var(--tw-step-icon) / 2)))) * var(--tw-progress));
  }
}

.badge-mori{
  background: var(--mori-olive);
  color: var(--mori-bg);
  border: 1px solid rgba(99,103,84,.12);
}

/* --- Shipping history timeline (public) --- */
.tw-history{
  --tw-h-marker: 52px;
  --tw-h-icon: 34px;
  position: relative;
}

.tw-history::before{
  content:"";
  position:absolute;
  left: calc(var(--tw-h-marker) / 2);
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--mori-border);
}

.tw-history-item{
  display:flex;
  gap: 12px;
  position: relative;
}

.tw-history-item + .tw-history-item{ margin-top: 12px; }

.tw-history-marker{
  flex: 0 0 var(--tw-h-marker);
  display:flex;
  justify-content:center;
  position: relative;
  z-index: 1;
}

.tw-history-icon{
  width: var(--tw-h-icon);
  height: var(--tw-h-icon);
  border-radius: 14px;
  font-size: .95rem;
}

.tw-history-card{
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 14px;
  border: 1px solid var(--mori-border);
  border-radius: 22px;
  background: var(--tw-surface);
}

.tw-history-card:hover{ background: var(--tw-surface-hover); }

.tw-history-meta{
  margin-top: 8px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 8px;
  color: var(--mori-muted);
  font-size: .86rem;
}