/*
Theme Name: Simply Theme
Theme URI: http://example.com/simply-theme
Author: Xin
Description: Custom theme for Simply Phone Cases & Bags
Version: 1.0
*/
/* 注册本地字体 */
@font-face {
  font-family: 'Georgia';
  /* 你给这个字体起的名字 */
  src: url('./assets/fonts/Georgia.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  /* 优化字体加载体验 */
}

@font-face {
  font-family: 'Playfair Display';
  /* 你给这个字体起的名字 */
  src: url('./assets/fonts/PlayfairDisplay-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
  /* 修改为 block，优化闪烁问题 */
}

/* 注册本地字体 */
@font-face {
  font-family: 'inter';
  /* 你给这个字体起的名字 */
  src: url('./assets/fonts/Inter_18pt-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
  /* 修改为 block，优化闪烁问题 */
}

@font-face {
  font-family: 'interMedium';
  /* 你给这个字体起的名字 */
  src: url('./assets/fonts/Inter_18pt-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
  /* 修改为 block，优化闪烁问题 */
}

/* 下面粘贴你 style.css 里的所有代码 (行 1-340) */
:root {
  --bg: #f6f4ef;
  --white: #ffffff;
  --text: #2f3e38;
  --muted: #5f6661;
  --brand: #738b7b;
  --brand-dark: #5d7468;
  --line: #e8e2de;
  --soft: #faf8f7;
  --warm: #eee8e4;
}

body {

  font-family: Georgia;
  background: var(--bg);
  color: var(--text);
}

h1,
h2,
h3,
h4,
h5,
.simply-serif {

  font-family: Georgia;
  font-weight: 400;
}

.navbar {
  background: rgba(255, 253, 248, .82);
  backdrop-filter: blur(8px);
  /*border-bottom: 1px solid #d8d2ce;*/
}

.simply-logo {

  font-family: Georgia;
  font-size: 2rem;
  letter-spacing: .2em;
  color: var(--brand) !important;
  line-height: 1;
}

.simply-logo-sub {
  font-size: .65rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: #7c837e;
  margin-top: .35rem;
}

.navbar .nav-link {
  color: var(--text);
  font-size: .95rem;
  padding-left: .9rem !important;
  padding-right: .9rem !important;
}

.navbar .nav-link.active,
.navbar .nav-link:hover {
  color: var(--brand);
}

.btn-simply {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  border-radius: 1rem;
  padding: .6rem 1.7rem;
}

.btn-simply:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

.btn-outline-simply {
  border: 1px solid #c1cbc4;
  color: #30413a;
  border-radius: 1rem;
  padding: .8rem 1.5rem;
  background: transparent;
}

.btn-outline-simply:hover {
  background: var(--soft);
  color: #30413a;
  border-color: #9aa59e;
}

.section-padding {
  padding: 5rem 0;
}

.hero-section {
  padding: 6rem 0 4rem;
}

.eyebrow {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .35em;
  color: #7d847f;
  margin-bottom: 1rem;
}

.hero-title {
  font-size: clamp(2.75rem, 5vw, 4.8rem);
  line-height: 1.05;
  color: #30413a;
  max-width: 650px;
  font-family: Georgia;
}

.hero-copy,
.section-copy {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.85;
}

.simply-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 1.75rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
  height: 100%;
}

.simply-card-body {
  padding: 1.4rem;
}

.simply-visual {
  /*background: linear-gradient(to bottom, var(--soft), #ece7e2);*/
  border-radius: 0.7rem;
  min-height: 192px;
  display: flex;
  align-items: center;
  justify-content: center;
  /*padding: 1.25rem;*/
  position: relative;
  overflow: hidden;
}

.simply-visual.warm {
  background: linear-gradient(to bottom, #f8f5f1, var(--warm));
}

.shape-stack {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: .75rem;
}

.shape-case-light {
  width: 82px;
  height: 145px;
  border-radius: 1.4rem;
  background: #f8f5f2;
  border: 1px solid #d9d2cc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
}

.shape-case-green,
.shape-case-mixed,
.shape-case-beige {
  width: 105px;
  height: 185px;
  border-radius: 1.8rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}

.shape-case-green {
  background: var(--brand);
}

.shape-case-mixed {
  background: #c7d1cb;
}

.shape-case-beige {
  background: #eee7e0;
}

.shape-bag-small {
  width: 88px;
  height: 88px;
  border-radius: 1.25rem;
  background: #e5ddd6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
}

.shape-bag-main {
  width: 165px;
  height: 175px;
  border-radius: 1.8rem;
  background: #f6f2ee;
  border: 1px solid #d9d1ca;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}

.visual-badge-white,
.visual-badge-brand {
  position: absolute;
  font-size: .62rem;
  letter-spacing: .2em;
  right: .45rem;
  bottom: .5rem;
}

.visual-badge-white {
  color: rgba(255, 255, 255, .92);
}

.visual-badge-brand {
  color: var(--brand);
}

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  color: #30413a;
}

.icon-box {
  width: 44px;
  height: 44px;
  border-radius: 1rem;
  background: #eef2ef;
  margin-bottom: 1rem;
}

.workshop-image,
.wide-image,
.map-image,
.material-image {
  border-radius: 1.35rem;
  overflow: hidden;
  background: linear-gradient(to right, #d7e0da, #eef1ee, #d8d2cc);
}

.workshop-image {
  height: 180px;
}

.wide-image {
  height: 260px;
}

.material-image {
  height: 213px;
}

.map-image {
  height: 230px;
  background: linear-gradient(to right, #e1e8e2, #f4f0ec, #d8d2cc);
}

.contact-panel,
.craft-panel,
.process-panel {
  background: var(--brand);
  color: #fff;
  border-radius: 2rem;
  padding: 2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
  height: 100%;
}

.process-step {
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .05);
  border-radius: 1rem;
  padding: 1rem 1.15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.muted-white {
  color: rgba(255, 255, 255, .78);
}

.soft-panel {
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .05);
  border-radius: 1.4rem;
  padding: 1.2rem;
  line-height: 1.8;
  font-size: .95rem;
}

.category-box {
  border: 1px solid #eee8e3;
  border-radius: 1.35rem;
  padding: 1rem;
  margin-top: .9rem;
}

.category-box ul {
  list-style: none;
  padding: 0;
  margin: .8rem 0 0;
}

.category-box li {
  color: var(--muted);
  margin-bottom: .45rem;
  font-size: .95rem;
}

.page-header-block {
  text-align: center;
  margin-bottom: 3rem;
}

.page-header-line {
  width: 110px;
  height: 1px;
  background: #d4ceca;
  margin: 0 auto 1rem;
}

.form-control,
.form-select {
  border-radius: 1rem;
  border-color: #d9d2cc;
  background: var(--soft);
  padding: .85rem 1rem;
}

textarea.form-control {
  border-radius: 1.4rem;
  min-height: 170px;
}

.footer {
  border-top: 1px solid #ded8d3;
  background: #fffdfa;
  padding: 3.5rem 0;
  margin-top: 3rem;
}

.footer-title {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: #6a716d;
  margin-bottom: 1rem;
}

.footer-list {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
}

.footer-list li {
  margin-bottom: .5rem;
  color: #434a46;
  font-size: .95rem;
}

/* 全局悬停阴影动效 */
.hover-shadow-effect {
  transition: all 0.3s ease;
}

.hover-shadow-effect:hover {
  transform: translateY(-6px);
  border-color: rgba(129, 146, 129, .34) !important;
  box-shadow: 0 18px 48px rgba(55, 54, 48, .13) !important;
  cursor: pointer;
}

@media (max-width: 991.98px) {
  .section-padding {
    padding: 4rem 0;
  }

  .hero-section {
    padding: 4.5rem 0 3rem;
  }
}

.primary-color {
  color: var(--brand);
}

@media (max-width: 640px) {
  .pu-spec {
    border-right: none !important;
  }
}

@media (max-width: 920px) {

  .pu-content {
    grid-template-rows: auto minmax(0px, 1fr) auto !important;
  }
}

@media(max-width: 640px) {
  .pu-card-frame {
    min-height: 182px !important;
  }

  .process-grid {
    grid-template-columns: repeat(1, 1fr) !important;
  }

  .pack-row {
    grid-template-columns: repeat(1, 1fr) !important;
  }

  .pack-item+.pack-item {
    border-top: none !important;
  }
}