/* =========================================================
 * Orthofeet Replica — app.css
 * 作用：重置 WP/WooCommerce 默认外壳，定义我们自己模板
 * （商品网格 / 卡片 / PDP / 购物车）用到的组件类。
 * 视觉变量来自 css-variables.css（已先行加载）。
 * ========================================================= */

/* ---------- 0. WP 外壳重置 ---------- */
body { margin: 0; background: #fff; color: var(--primary-dark, #1A2626); }
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.of-main { min-height: 60vh; }
.of-container { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.entry-content { margin: 0; }

/* 隐藏 WP/WC 自带装饰，交由我们的模板接管 */
.woocommerce-breadcrumb, .woocommerce-result-count, .woocommerce-ordering,
.woocommerce-pagination, .products.related, .cart-collaterals,
.woocommerce-message, .woocommerce-info, .woocommerce-error { /* 保留但样式统一 */ }
.woocommerce .star-rating { display: none; }

/* ---------- 1. 商品网格 ---------- */
.of-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 12px;
  padding: 24px 0 48px;
}
@media (min-width: 768px) {
  .of-product-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 20px; }
}
@media (min-width: 1024px) {
  .of-product-grid { grid-template-columns: repeat(4, 1fr); gap: 32px 24px; }
}

/* ---------- 2. 商品卡片 ---------- */
.of-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #ECECEC; border-radius: 4px;
  overflow: hidden; transition: box-shadow .2s ease, transform .2s ease;
}
.of-card:hover { box-shadow: 0 8px 24px rgba(26,38,38,.12); transform: translateY(-2px); }
.of-card__media { position: relative; display: block; aspect-ratio: 1/1; background: #F7F7F7; overflow: hidden; }
.of-card__img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s ease; }
.of-card__img--b { position: absolute; inset: 0; opacity: 0; }
.of-card:hover .of-card__img--b { opacity: 1; }
.of-card__badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: var(--primary-brand, #9AF8FF); color: var(--primary-dark, #1A2626);
  font-size: .7rem; font-weight: 700; letter-spacing: .03em; padding: 4px 8px; border-radius: 2px;
  text-transform: uppercase;
}
.of-card__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 14px; flex: 1; }
.of-card__gender { font-size: .68rem; letter-spacing: .08em; color: #888; text-transform: uppercase; }
.of-card__title { font-size: .95rem; font-weight: 600; line-height: 1.25; color: var(--primary-dark, #1A2626); }
.of-card__title:hover { text-decoration: underline; }
.of-card__price { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.of-card__sale { font-size: 1.05rem; font-weight: 700; color: var(--primary-dark, #1A2626); }
.of-card__reg s { color: #999; font-size: .85rem; }
.of-card__rating { margin-top: 2px; }
.of-card__btn {
  margin-top: auto; width: 100%; border: 1px solid var(--primary-dark, #1A2626);
  background: var(--primary-brand, #9AF8FF); color: var(--primary-dark, #1A2626);
  font-weight: 700; font-size: .85rem; padding: 11px 12px; border-radius: 2px;
  transition: background .15s ease, color .15s ease;
}
.of-card__btn:hover { background: var(--primary-dark, #1A2626); color: #fff; }

/* 星级（与 css-variables 的 --star-svg 配合） */
.of-stars { position: relative; display: inline-block; width: 92px; height: 18px; vertical-align: middle; }
.of-stars__bg, .of-stars__fg {
  position: absolute; inset: 0; background-repeat: repeat-x; background-size: 18px 18px;
  -webkit-mask: none; mask: none;
}
.of-stars__bg { background-image: var(--star-svg); filter: grayscale(1) opacity(.35); }
.of-stars__fg { background-image: var(--star-svg); }
.of-stars__count { display: inline-block; margin-left: 6px; font-size: .8rem; color: #777; vertical-align: middle; }

/* ---------- 3. 集合页头部 ---------- */
.of-archive-head { padding: 28px 0 4px; }
.of-archive-head h1 { font-size: 2rem; font-weight: 700; margin: 0 0 6px; letter-spacing: -.03em; }
.of-archive-head p { color: #666; margin: 0; max-width: 70ch; }

/* ---------- 4. PDP ---------- */
.of-pdp { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 24px 0 56px; }
@media (min-width: 900px) { .of-pdp { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 56px; } }
.of-pdp__gallery { position: relative; }
.of-pdp__main-img { width: 100%; border-radius: 4px; background: #F7F7F7; }
.of-pdp__thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.of-pdp__thumb { width: 72px; height: 72px; border: 1px solid #E0E0E0; border-radius: 4px; overflow: hidden; cursor: pointer; }
.of-pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.of-pdp__info { position: sticky; top: 120px; align-self: start; }
.of-pdp__breadcrumb { font-size: .8rem; color: #888; margin-bottom: 14px; }
.of-pdp__breadcrumb a:hover { text-decoration: underline; }
.of-pdp__title { font-size: 2rem; font-weight: 700; line-height: 1.05; margin: 0 0 10px; letter-spacing: -.02em; }
.of-pdp__price { display: flex; align-items: baseline; gap: 12px; margin: 10px 0 6px; }
.of-pdp__price .of-now { font-size: 1.6rem; font-weight: 700; }
.of-pdp__price .of-was s { color: #999; }
.of-pdp__rating { margin: 8px 0 18px; }
.of-pdp__desc { color: #444; line-height: 1.6; font-size: .95rem; margin: 0 0 22px; }
.of-pdp__options { display: flex; flex-direction: column; gap: 18px; margin-bottom: 22px; }
.of-opt__label { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 8px; display: block; }
.of-opt__swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.of-swatch {
  min-width: 44px; padding: 10px 12px; border: 1px solid #ccc; background: #fff;
  border-radius: 3px; font-size: .85rem; text-align: center; transition: border-color .15s, box-shadow .15s;
}
.of-swatch[aria-pressed="true"], .of-swatch.is-active { border-color: var(--primary-dark, #1A2626); box-shadow: inset 0 0 0 1px var(--primary-dark, #1A2626); }
.of-swatch--color { width: 36px; min-width: 0; height: 36px; padding: 0; border-radius: 50%; }
.of-swatch--color.is-active { outline: 2px solid var(--primary-dark); outline-offset: 2px; }
.of-pdp__qty { display: inline-flex; align-items: center; border: 1px solid #ccc; border-radius: 3px; overflow: hidden; }
.of-pdp__qty button { width: 40px; height: 44px; border: none; background: #fafafa; font-size: 1.2rem; }
.of-pdp__qty input { width: 52px; height: 44px; border: none; text-align: center; font-size: 1rem; }
.of-pdp__atc {
  width: 100%; margin-top: 18px; background: var(--primary-brand, #9AF8FF); color: var(--primary-dark, #1A2626);
  border: 1px solid var(--primary-dark, #1A2626); font-weight: 700; font-size: 1rem; padding: 16px; border-radius: 3px;
  transition: background .15s, color .15s;
}
.of-pdp__atc:hover { background: var(--primary-dark, #1A2626); color: #fff; }
.of-pdp__ship { margin-top: 18px; font-size: .85rem; color: #555; border-top: 1px solid #eee; padding-top: 16px; }

/* ---------- 5. 政策页 / 普通页 ---------- */
.of-page { max-width: 820px; margin: 0 auto; padding: 48px 16px 72px; }
.of-page h1 { font-size: 2.25rem; font-weight: 700; letter-spacing: -.03em; margin: 0 0 24px; }
.of-page h2 { font-size: 1.4rem; font-weight: 700; margin: 32px 0 12px; }
.of-page p, .of-page li { color: #333; line-height: 1.75; font-size: 1rem; }
.of-page a { text-decoration: underline; }

/* ---------- 6.5 头部 / 公告栏 / 导航 / 页脚（手写，零外链） ---------- */
:root { --of-brand: #9AF8FF; --of-dark: #1A2626; --of-grey: #6b7775; --of-line: #ECECEC; --of-header-h: 64px; }

/* 头部主壳 */
.of-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--of-line); }
.of-header__inner {
  max-width: 1280px; margin: 0 auto; height: var(--of-header-h);
  display: flex; align-items: center; gap: 16px; padding: 0 16px;
}
.of-burger { display: none; background: none; border: none; color: var(--of-dark); padding: 6px; margin-right: 4px; }

/* Logo */
.of-logo { display: flex; align-items: center; text-decoration: none; }
.of-logo__txt {
  font-family: var(--font-body, 'Elza', Georgia, serif); font-weight: 700;
  font-size: 1.35rem; letter-spacing: .06em; color: var(--of-dark);
}

/* 主导航 */
.of-nav { flex: 1; display: flex; justify-content: center; }
.of-nav__list { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.of-nav__item > a {
  font-size: .9rem; font-weight: 600; letter-spacing: .02em; color: var(--of-dark);
  text-decoration: none; padding: 6px 2px; position: relative;
}
.of-nav__item > a:hover { color: #000; }
.of-nav__item > a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--of-brand); transform: scaleX(0); transition: transform .18s ease; transform-origin: left;
}
.of-nav__item > a:hover::after { transform: scaleX(1); }
.of-nav__sale > a { color: #C0392B; }

/* 右侧图标 */
.of-header__icons { display: flex; align-items: center; gap: 14px; }
.of-icon-btn { position: relative; background: none; border: none; color: var(--of-dark); padding: 6px; display: inline-flex; }
.of-cart-count {
  position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--of-brand); color: var(--of-dark); border-radius: 999px; font-size: .68rem;
  font-weight: 700; line-height: 18px; text-align: center;
}

/* 搜索层 */
.of-search { background: #fff; border-bottom: 1px solid var(--of-line); padding: 14px 16px; }
.of-search[hidden] { display: none; }
.of-search__inner { max-width: 720px; margin: 0 auto; }
.of-search form { display: flex; gap: 8px; align-items: center; border: 1px solid var(--of-line); border-radius: 4px; padding: 4px 8px; }
.of-search input { flex: 1; border: none; outline: none; font-size: 1rem; padding: 8px 4px; background: transparent; }
.of-search button { background: none; border: none; color: var(--of-dark); padding: 6px; }

/* 移动端：导航折叠 */
@media (max-width: 860px) {
  .of-burger { display: inline-flex; }
  .of-nav {
    position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--of-line);
    flex-direction: column; align-items: stretch; padding: 8px 0; box-shadow: 0 12px 24px rgba(0,0,0,.06);
    display: none;
  }
  .of-nav.is-open { display: flex; }
  .of-nav__list { flex-direction: column; gap: 0; width: 100%; }
  .of-nav__item > a { display: block; padding: 14px 20px; border-bottom: 1px solid #f3f3f3; }
  .of-nav__item > a::after { display: none; }
  .of-logo__txt { font-size: 1.15rem; }
}

/* 页脚 */
.of-footer { background: var(--of-dark); color: #cfe9ea; padding: 28px 16px; margin-top: 40px; text-align: center; }
.of-footer__inner { max-width: 1280px; margin: 0 auto; }
.of-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-bottom: 14px; }
.of-footer__links a { color: #eafdfe; font-size: .9rem; text-decoration: none; }
.of-footer__links a:hover { text-decoration: underline; }
.of-footer__copy { font-size: .8rem; color: #8fb4b6; }

/* ---------- 6. 购物车 / 结算兜底 ---------- */
.of-cart-table { width: 100%; border-collapse: collapse; }
.of-cart-table th, .of-cart-table td { padding: 14px 10px; border-bottom: 1px solid #eee; text-align: left; }
.of-checkout-btn {
  display: inline-block; background: var(--primary-brand, #9AF8FF); color: var(--primary-dark, #1A2626);
  border: 1px solid var(--primary-dark, #1A2626); font-weight: 700; padding: 16px 28px; border-radius: 3px;
}