/* ============================================================

   YWCJ — Fashion E-commerce Stylesheet

   Design tokens - clean minimalist fashion e-commerce

   ============================================================ */



/* ---------- Design Tokens ---------- */

:root {

  /* Typography */

  --font-body: 'Lato', 'Helvetica Neue', Arial, sans-serif;

  --font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;



  /* Colors */

  --color-text: #222222;

  --color-price: #000000;

  --color-sale: #C20000;

  --color-border: #e6e6e6;

  --color-accent: #EDC480;

  --color-white: #ffffff;

  --color-bg: #ffffff;

  --color-bg-alt: #fafafa;

  --color-muted: #6f6f6f;

  --color-overlay: rgba(0, 0, 0, 0.55);



  /* Buttons */

  --btn-bg: #222222;

  --btn-bg-hover: #000000;

  --btn-color: #ffffff;

  --btn-radius: 3px;



  /* Layout */

  --container-max: 1400px;

  --container-pad: 32px;

  --container-pad-mobile: 16px;

  --grid-gap: 16px;



  /* Header */

  --header-height: 72px;

  --announcement-height: 40px;



  /* Elevation */

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);

  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);

  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.18);



  /* Misc */

  --transition: 0.25s ease;

  --z-header: 100;

  --z-drawer: 200;

  --z-overlay: 300;

  --z-modal: 400;

}



/* ---------- Reset ---------- */

*,

*::before,

*::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



html {

  -webkit-text-size-adjust: 100%;

  scroll-behavior: smooth;

  /* Safety net: never let any stray element push the page wider than

     the viewport (prevents the horizontal "wobble"/drag on phones). */

  overflow-x: hidden;

}



body {

  font-family: var(--font-body);

  font-size: 15px;

  line-height: 1.6;

  color: var(--color-text);

  background-color: var(--color-bg);

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  overflow-x: hidden;

}



img {

  max-width: 100%;

  display: block;

}



a {

  color: inherit;

  text-decoration: none;

}



a:hover {

  color: var(--color-text);

}



ul,

ol {

  list-style: none;

}



button {

  font-family: inherit;

  font-size: inherit;

  cursor: pointer;

  border: none;

  background: none;

  color: inherit;

}



input,

select,

textarea {

  font-family: inherit;

  font-size: inherit;

  color: inherit;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  font-family: var(--font-serif);

  font-weight: 500;

  color: var(--color-text);

}



/* ---------- Utility Classes ---------- */

.container {

  max-width: var(--container-max);

  margin: 0 auto;

  padding-left: var(--container-pad);

  padding-right: var(--container-pad);

}



.serif {

  font-family: var(--font-serif);

}



.text-muted {

  color: var(--color-muted);

}



.text-center {

  text-align: center;

}



.text-right {

  text-align: right;

}



.text-price {

  color: var(--color-price);

  font-weight: 600;

}



.text-sale {

  color: var(--color-sale);

}



.visually-hidden {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;

}



.hidden {

  display: none !important;

}



.section {

  padding: 56px 0;

}



.section-title {

  font-size: clamp(28px, 4vw, 40px);

  margin-bottom: 8px;

}



.section-subtitle {

  color: var(--color-muted);

  margin-bottom: 32px;

  max-width: 640px;

}



/* ---------- Buttons ---------- */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 13px 28px;

  background-color: var(--btn-bg);

  color: var(--btn-color);

  border-radius: var(--btn-radius);

  font-family: var(--font-body);

  font-size: 13px;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  transition: background-color var(--transition), color var(--transition);

  border: 1px solid transparent;

  cursor: pointer;

  text-align: center;

}



.btn:hover {

  background-color: var(--btn-bg-hover);

  color: #fff;

}



.btn--block {

  display: flex;

  width: 100%;

}



.btn--outline {

  background-color: transparent;

  color: var(--color-text);

  border-color: var(--color-text);

}



.btn--outline:hover {

  background-color: var(--color-text);

  color: #fff;

}



.btn--light {

  background-color: var(--color-white);

  color: var(--color-text);

}



.btn--light:hover {

  background-color: #f0f0f0;

  color: var(--color-text);

}



.btn--accent {

  background-color: var(--color-accent);

  color: var(--color-text);

}



.btn--accent:hover {

  background-color: #e2b06a;

  color: var(--color-text);

}



.btn--sm {

  padding: 9px 18px;

  font-size: 12px;

}



.btn--lg {

  padding: 16px 34px;

  font-size: 14px;

}



.btn:disabled {

  opacity: 0.5;

  cursor: not-allowed;

}



/* ---------- Forms ---------- */

.form-group {

  margin-bottom: 20px;

}



.form-label {

  display: block;

  font-size: 12px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  margin-bottom: 8px;

  color: var(--color-text);

}



.form-input,

.form-select,

.form-textarea {

  width: 100%;

  padding: 12px 14px;

  border: 1px solid var(--color-border);

  border-radius: var(--btn-radius);

  background-color: #fff;

  transition: border-color var(--transition);

}



.form-input:focus,

.form-select:focus,

.form-textarea:focus {

  outline: none;

  border-color: var(--color-text);

}



.form-textarea {

  min-height: 110px;

  resize: vertical;

}



.form-hint {

  font-size: 12px;

  color: var(--color-muted);

  margin-top: 6px;

}



.form-error {

  font-size: 12px;

  color: var(--color-sale);

  margin-top: 6px;

  display: none;

}



.form-group.has-error .form-input,

.form-group.has-error .form-select {

  border-color: var(--color-sale);

}



.form-group.has-error .form-error {

  display: block;

}



/* Checkbox / radio row */

.form-check {

  display: flex;

  align-items: center;

  gap: 8px;

  cursor: pointer;

}



.form-check input {

  accent-color: var(--color-text);

}



/* ---------- Announcement Bar ---------- */

.announcement-bar {

  background-color: var(--color-accent);

  color: var(--color-text);

  text-align: center;

  font-size: 12px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  padding: 10px 16px;

  overflow: hidden;

}



.announcement-bar__track {

  white-space: nowrap;

  display: inline-block;

}



/* ---------- Header ---------- */

.header {

  position: sticky;

  top: 0;

  z-index: var(--z-header);

  background-color: var(--color-white);

  border-bottom: 1px solid var(--color-border);

  transition: box-shadow var(--transition), transform var(--transition);

}



.header.is-scrolled {

  box-shadow: var(--shadow-sm);

}



.header__inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: var(--header-height);

  position: relative;

}



.header__logo {

  font-family: var(--font-serif);

  font-size: 30px;

  font-weight: 600;

  letter-spacing: 0.28em;

  color: var(--color-text);

}



.header__nav {

  display: flex;

  align-items: center;

  gap: 32px;

}



.header__nav a {

  font-size: 13px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  position: relative;

}



.header__nav a::after {

  content: '';

  position: absolute;

  left: 0;

  bottom: -4px;

  width: 0;

  height: 1px;

  background-color: var(--color-text);

  transition: width var(--transition);

}



.header__nav a:hover::after,

.header__nav a.is-active::after {

  width: 100%;

}



.header__actions {

  display: flex;

  align-items: center;

  gap: 20px;

}



.header__icon {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: var(--color-text);

}



.header__icon svg {

  width: 22px;

  height: 22px;

}



/* Cart badge */

.cart-badge {

  position: absolute;

  top: -8px;

  right: -10px;

  min-width: 18px;

  height: 18px;

  padding: 0 4px;

  background-color: var(--color-accent);

  color: var(--color-text);

  border-radius: 50%;

  font-size: 11px;

  font-weight: 700;

  display: flex;

  align-items: center;

  justify-content: center;

  line-height: 1;

}



/* Mobile menu toggle */

.menu-toggle {

  display: none;

  flex-direction: column;

  gap: 5px;

  width: 28px;

  height: 28px;

  align-items: center;

  justify-content: center;

}



.menu-toggle span {

  display: block;

  width: 24px;

  height: 2px;

  background-color: var(--color-text);

  transition: transform var(--transition), opacity var(--transition);

}



.menu-toggle.is-open span:nth-child(1) {

  transform: translateY(7px) rotate(45deg);

}



.menu-toggle.is-open span:nth-child(2) {

  opacity: 0;

}



.menu-toggle.is-open span:nth-child(3) {

  transform: translateY(-7px) rotate(-45deg);

}



/* ---------- Mobile Nav ---------- */

.mobile-nav {

  position: fixed;

  top: 0;

  left: 0;

  bottom: 0;

  width: 300px;

  max-width: 85vw;

  background-color: var(--color-white);

  z-index: var(--z-drawer);

  transform: translateX(-100%);

  transition: transform 0.3s ease;

  padding: 24px;

  overflow-y: auto;

  box-shadow: var(--shadow-lg);

}



.mobile-nav.is-open {

  transform: translateX(0);

}



.mobile-nav__head {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 24px;

}



.mobile-nav__close {

  font-size: 26px;

  line-height: 1;

}



.mobile-nav__list a {

  display: block;

  padding: 14px 0;

  font-size: 14px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  border-bottom: 1px solid var(--color-border);

}



/* ---------- Search Overlay ---------- */

.search-overlay {

  position: fixed;

  inset: 0;

  z-index: var(--z-overlay);

  background-color: rgba(255, 255, 255, 0.98);

  display: flex;

  align-items: flex-start;

  justify-content: center;

  padding: 120px 16px 40px;

  opacity: 0;

  visibility: hidden;

  transition: opacity var(--transition), visibility var(--transition);

}



.search-overlay.is-open {

  opacity: 1;

  visibility: visible;

}



.search-overlay__close {

  position: absolute;

  top: 24px;

  right: 24px;

  font-size: 28px;

  line-height: 1;

  color: var(--color-text);

}



.search-overlay__form {

  width: 100%;

  max-width: 620px;

  display: flex;

  border-bottom: 2px solid var(--color-text);

}



.search-overlay__input {

  flex: 1;

  border: none;

  font-family: var(--font-serif);

  font-size: 28px;

  padding: 12px 0;

  background: transparent;

}



.search-overlay__input:focus {

  outline: none;

}



.search-overlay__submit {

  font-size: 14px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  padding-left: 16px;

}



/* ---------- Hero ---------- */

.hero {

  position: relative;

  height: clamp(420px, 60vh, 720px);

  overflow: hidden;

}



.hero img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  position: absolute;

  inset: 0;

}



.hero__content {

  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  color: #fff;

  padding: 24px;

  background: rgba(0, 0, 0, 0.2);

}



.hero__title {

  font-size: clamp(34px, 6vw, 64px);

  color: #fff;

  margin-bottom: 12px;

  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);

}



.hero__subtitle {

  font-size: 15px;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  margin-bottom: 28px;

  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);

}



/* ---------- Product Grid ---------- */

.product-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: var(--grid-gap);

}



.product-card {

  position: relative;

  transition: opacity var(--transition);

}



.product-card__media {

  position: relative;

  overflow: hidden;

  aspect-ratio: 3 / 4;

  background-color: var(--color-bg-alt);

}



.product-card__media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: opacity var(--transition);

  position: absolute;

  inset: 0;

}



/* Hover image swap */

.product-card__media .img-primary {

  opacity: 1;

}



.product-card__media .img-hover {

  opacity: 0;

}



.product-card:hover .product-card__media .img-primary {

  opacity: 0;

}



.product-card:hover .product-card__media .img-hover {

  opacity: 1;

}



.product-card__badge {

  position: absolute;

  top: 12px;

  left: 12px;

  z-index: 2;

  background-color: var(--color-sale);

  color: #fff;

  font-size: 11px;

  letter-spacing: 0.08em;

  padding: 4px 10px;

  border-radius: 2px;

  text-transform: uppercase;

}



.product-card__wishlist {

  position: absolute;

  top: 10px;

  right: 10px;

  z-index: 2;

  width: 36px;

  height: 36px;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: rgba(255, 255, 255, 0.9);

  border-radius: 50%;

  color: var(--color-text);

  transition: transform var(--transition), color var(--transition);

}



.product-card__wishlist:hover {

  transform: scale(1.1);

}



.product-card__wishlist.is-active {

  color: var(--color-sale);

}



.product-card__wishlist svg {

  width: 18px;

  height: 18px;

}



.product-card__info {

  padding: 12px 0 0;

  text-align: center;

}



.product-card__title {

  font-size: 13px;

  letter-spacing: 0.04em;

  margin-bottom: 4px;

  color: var(--color-text);

}



.product-card__category {

  font-size: 11px;

  color: var(--color-muted);

  text-transform: uppercase;

  letter-spacing: 0.08em;

  margin-bottom: 4px;

}



.product-card__price {

  font-size: 14px;

}



.product-card__price .price-compare {

  color: var(--color-muted);

  text-decoration: line-through;

  margin-right: 8px;

  font-weight: 400;

}



.product-card__price .price-sale {

  color: var(--color-sale);

  font-weight: 600;

}



/* ---------- Collection / Category tiles ---------- */

.category-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: var(--grid-gap);

}



.category-tile {

  position: relative;

  overflow: hidden;

  aspect-ratio: 4 / 5;

}



.category-tile img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.5s ease;

}



.category-tile:hover img {

  transform: scale(1.05);

}



.category-tile__label {

  position: absolute;

  bottom: 16px;

  left: 50%;

  transform: translateX(-50%);

  background-color: var(--color-white);

  padding: 10px 24px;

  font-family: var(--font-serif);

  font-size: 16px;

  letter-spacing: 0.12em;

  text-transform: uppercase;

}



/* ---------- Filters / Toolbar ---------- */

.shop-toolbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 16px;

  padding: 24px 0;

  border-bottom: 1px solid var(--color-border);

  margin-bottom: 24px;

}



.shop-toolbar__filters {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  align-items: center;

}



.filter-btn {

  padding: 8px 16px;

  border: 1px solid var(--color-border);

  border-radius: 999px;

  font-size: 12px;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  transition: border-color var(--transition), background-color var(--transition);

}



.filter-btn:hover,

.filter-btn.is-active {

  border-color: var(--color-text);

  background-color: var(--color-text);

  color: #fff;

}



.shop-sort {

  padding: 9px 14px;

  border: 1px solid var(--color-border);

  border-radius: var(--btn-radius);

  font-size: 13px;

  background-color: #fff;

}



/* Shop main layout: filters sidebar + product grid.

   (Base desktop rule lives here so it can be overridden in media queries;

    shop.html no longer hard-codes the columns inline.) */

.shop-layout {

  display: grid;

  grid-template-columns: 240px 1fr;

  gap: 32px;

  align-items: start;

}

.shop-filters {

  position: sticky;

  top: 96px;

}



/* Pagination */

.pagination {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 8px;

  margin-top: 40px;

  /* Wrap onto multiple rows so a long page list can't push the

     document wider than the viewport (caused horizontal "wobble"). */

  flex-wrap: wrap;

}



.pagination__btn {

  min-width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid var(--color-border);

  border-radius: var(--btn-radius);

  font-size: 14px;

  transition: background-color var(--transition), color var(--transition);

}



.pagination__btn:hover,

.pagination__btn.is-active {

  background-color: var(--color-text);

  color: #fff;

  border-color: var(--color-text);

}



.pagination__btn:disabled {

  opacity: 0.4;

  cursor: not-allowed;

}



/* ---------- Product Detail ---------- */

.product-detail {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 48px;

  padding: 48px 0 64px;

}



.product-gallery__main {

  position: relative;

  overflow: hidden;

  aspect-ratio: 3 / 4;

  background-color: var(--color-bg-alt);

  margin-bottom: 12px;

}



.product-gallery__main img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.product-gallery__thumbs {

  display: flex;

  gap: 10px;

  overflow-x: auto;

}



.product-gallery__thumb {

  width: 72px;

  height: 92px;

  object-fit: cover;

  cursor: pointer;

  border: 2px solid transparent;

  border-radius: 2px;

  flex-shrink: 0;

  opacity: 0.7;

  transition: border-color var(--transition), opacity var(--transition);

}



.product-gallery__thumb.is-active {

  border-color: var(--color-text);

  opacity: 1;

}



.product-info__title {

  font-size: clamp(26px, 3vw, 34px);

  margin-bottom: 10px;

}



.product-info__category {

  font-size: 12px;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--color-muted);

  margin-bottom: 14px;

}



.product-info__price {

  font-size: 22px;

  margin-bottom: 20px;

}



.product-info__price .price-compare {

  color: var(--color-muted);

  text-decoration: line-through;

  font-size: 16px;

  font-weight: 400;

  margin-right: 10px;

}



.product-info__price .price-sale {

  color: var(--color-sale);

}



.product-info__description {

  color: var(--color-text);

  margin-bottom: 24px;

  line-height: 1.7;

}



/* Option selectors */

.option-group {

  margin-bottom: 20px;

}



.option-group__label {

  font-size: 12px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  margin-bottom: 10px;

  display: flex;

  align-items: center;

  gap: 8px;

}



.option-group__selected {

  font-weight: 600;

  text-transform: none;

}



.option-swatches {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}



.option-swatch {

  width: 34px;

  height: 34px;

  border-radius: 50%;

  border: 1px solid var(--color-border);

  cursor: pointer;

  position: relative;

  transition: transform var(--transition);

}



.option-swatch:hover {

  transform: scale(1.1);

}



.option-swatch.is-active {

  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 3.5px var(--color-text);

}



.option-sizes {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}



.option-size {

  min-width: 48px;

  height: 44px;

  padding: 0 14px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid var(--color-border);

  border-radius: var(--btn-radius);

  font-size: 13px;

  cursor: pointer;

  transition: border-color var(--transition), background-color var(--transition);

}



.option-size:hover {

  border-color: var(--color-text);

}



.option-size.is-active {

  border-color: var(--color-text);

  background-color: var(--color-text);

  color: #fff;

}



.option-size.is-disabled {

  opacity: 0.35;

  cursor: not-allowed;

  text-decoration: line-through;

}



/* Quantity */

.quantity {

  display: inline-flex;

  align-items: center;

  border: 1px solid var(--color-border);

  border-radius: var(--btn-radius);

  height: 48px;

}



.quantity__btn {

  width: 44px;

  height: 100%;

  font-size: 18px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--color-text);

}



.quantity__btn:hover {

  background-color: var(--color-bg-alt);

}



.quantity__input {

  width: 50px;

  height: 100%;

  border: none;

  text-align: center;

  font-size: 14px;

  border-left: 1px solid var(--color-border);

  border-right: 1px solid var(--color-border);

  -moz-appearance: textfield;

}



.quantity__input::-webkit-outer-spin-button,

.quantity__input::-webkit-inner-spin-button {

  -webkit-appearance: none;

}



.product-info__actions {

  display: flex;

  flex-direction: column;

  gap: 12px;

  margin-top: 24px;

}



/* ============================================================

   Product Detail — Commense-style (pd-* prefix)

   Mirrors thecommense.com single product page:

   left gallery (thumb strip + main), right info column with

   title / stars / sku / price / flash sale / color / size /

   add to cart / perks / Details / Size & Fit / Care

   ============================================================ */

.pd-wrap {

  display: grid;

  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

  gap: 40px;

  align-items: start;

  padding: 32px 0 64px;

}



/* ---------- Gallery ---------- */

.pd-gallery {

  display: grid;

  grid-template-columns: 80px minmax(0, 1fr);

  gap: 14px;

}



.pd-thumbs {

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.pd-thumb {

  width: 80px;

  height: 104px;

  padding: 0;

  border: 1px solid transparent;

  background: var(--color-bg-alt);

  cursor: pointer;

  overflow: hidden;

  flex-shrink: 0;

  transition: border-color var(--transition);

}



.pd-thumb img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.pd-thumb:hover {

  border-color: var(--color-border);

}



.pd-thumb.is-active {

  border-color: var(--color-text);

}



.pd-gallery__main {

  position: relative;

  aspect-ratio: 3 / 4;

  background: var(--color-bg-alt);

  overflow: hidden;

}



.pd-gallery__main img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition: opacity 180ms ease;

}



.pd-gallery__main img.is-swapping {

  opacity: 0;

}



.pd-badge {

  position: absolute;

  top: 14px;

  left: 14px;

  background: var(--color-text);

  color: #fff;

  font-size: 11px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  padding: 5px 12px;

}



/* ---------- Info column ---------- */

.pd-info {

  display: flex;

  flex-direction: column;

}



.pd-info__title {

  font-family: var(--font-heading, Georgia, serif);

  font-size: clamp(24px, 2.4vw, 32px);

  font-weight: 500;

  line-height: 1.25;

  margin: 0 0 10px;

}



.pd-reviews {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--color-text);

  text-decoration: none;

  font-size: 13px;

}



.pd-reviews:hover .pd-reviews__count {

  text-decoration: underline;

}



.pd-stars {

  display: inline-flex;

  gap: 2px;

  color: var(--color-text);

}



.pd-stars .star {

  width: 15px;

  height: 15px;

}



.pd-sku {

  font-size: 12px;

  color: var(--color-muted);

  letter-spacing: 0.06em;

  margin-top: 8px;

}



.pd-price {

  display: flex;

  align-items: baseline;

  gap: 10px;

  margin: 14px 0 12px;

}



.pd-price__compare {

  color: var(--color-muted);

  text-decoration: line-through;

  font-size: 16px;

}



.pd-price__current {

  font-size: 22px;

  font-weight: 600;

}



.pd-price__current.is-sale {

  color: var(--color-sale, #c92a2a);

}



.pd-flashsale {

  display: inline-block;

  background: var(--color-sale, #c92a2a);

  color: #fff;

  font-size: 11px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  padding: 5px 12px;

  margin-bottom: 20px;

}



/* ---------- Color / Size options ---------- */

.pd-option {

  margin-bottom: 18px;

}



/* Header row above the swatches / size list.

   - label on the left (small, uppercase, letter-spaced)

   - selected value on the right (regular weight, baseline aligned)

   - justify-content: space-between so they sit at opposite ends of

     the row — matches the original thecommense.com "COLOR … Black"

     look where the label and the colour name sit at the two ends of

     the line and the middle is intentionally empty. */

.pd-option__head {

  display: flex;

  align-items: baseline;

  justify-content: space-between;

  margin-bottom: 8px;

  min-height: 18px;

}



.pd-option__label {

  font-size: 11px;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--color-text);

  font-weight: 500;

}



.pd-option__value {

  font-size: 13px;

  color: var(--color-text);

  text-align: right;

}



/* Inline-flow variant used by the COLOR header on the product page.

   Matches the original thecommense.com layout:

       COLOR  —  Black

   where the label, em-dash, and value sit on a single line with

   just the em-dash between them. */

.pd-option__head--inline {

  display: block;

  margin-bottom: 12px;

  min-height: 0;

  line-height: 1.4;

}



.pd-option__head--inline .pd-option__label {

  display: inline;

  margin-right: 6px;

}



.pd-option__sep {

  display: inline-block;

  margin: 0 6px;

  color: var(--color-muted);

  font-size: 13px;

  line-height: 1;

  transform: translateY(-1px);

}



.pd-option__head--inline .pd-option__value {

  display: inline;

  text-align: left;

  font-size: 14px;

  font-weight: 400;

  letter-spacing: 0;

  text-transform: none;

  color: var(--color-text);

}



.pd-sizeguide {

  font-size: 12px;

  color: var(--color-muted);

  text-decoration: underline;

}



.pd-sizeguide:hover {

  color: var(--color-text);

}



.pd-swatches {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 6px;

}



/* Circular color swatch. The button is the ring container, the inner

   <span class="pd-swatch__dot"> holds the actual product photo.

   On active state a thin outline shows around the photo, matching the

   original thecommense.com product page. */

.pd-swatch {

  width: 52px;

  height: 52px;

  padding: 4px;

  border: 1px solid transparent;

  border-radius: 50%;

  background: transparent;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  transition: border-color var(--transition), padding var(--transition);

}



.pd-swatch:hover {

  border-color: rgba(0, 0, 0, 0.25);

}



.pd-swatch.is-active {

  border-color: var(--color-text);

  padding: 3px;        /* tighten the inset slightly so the image fills more */

}



/* The dot holds the product photo. We:

   - Make it a circle (border-radius: 50%).

   - Layer a subtle 1px inner ring (matches original site look) via

     box-shadow so the photo always has a faint border even on busy

     backgrounds.

   - Keep a solid color fallback (background-color set inline by JS)

     so the swatch is never blank if the photo 404s.

   - Hide the dot's own overflow so the rounded image crop clips it. */

.pd-swatch__dot {

  position: relative;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  display: block;

  overflow: hidden;

  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);

}



.pd-swatch__dot--solid {

  /* colour-only fallback when no product image is available */

}



.pd-swatch__img {

  display: block;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  object-fit: cover;

  object-position: center;

  background-color: transparent;

}



/* Hide the img element entirely if it fails to load so the dot's

   background-color (set inline by JS) becomes the visible colour. */

.pd-swatch__img.is-broken {

  display: none;

}



.pd-swatch--fallback {

  width: 34px;

  height: 34px;

}



.pd-sizes {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}



.pd-size {

  min-width: 52px;

  height: 42px;

  padding: 0 14px;

  border: 1px solid var(--color-border);

  background: none;

  font-size: 13px;

  cursor: pointer;

  transition: border-color var(--transition), background-color var(--transition);

}



.pd-size:hover {

  border-color: var(--color-text);

}



.pd-size.is-active {

  border-color: var(--color-text);

  background: var(--color-text);

  color: #fff;

}



.pd-size.is-disabled {

  opacity: 0.35;

  cursor: not-allowed;

  text-decoration: line-through;

}



/* ---------- Add to cart ---------- */

.pd-addtocart {

  width: 100%;

  height: 50px;

  background: var(--color-text);

  color: #fff;

  border: none;

  font-size: 13px;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  cursor: pointer;

  margin-top: 4px;

  transition: opacity var(--transition);

}



.pd-addtocart:hover {

  opacity: 0.85;

}



/* ---------- Perks (shipping / returns) ---------- */

.pd-perks {

  list-style: none;

  margin: 16px 0 0;

  padding: 0;

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.pd-perks li {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 13px;

  color: var(--color-text);

}



.pd-perks__icon {

  width: 18px;

  height: 18px;

  display: inline-flex;

  flex-shrink: 0;

}



.pd-perks__icon svg {

  width: 100%;

  height: 100%;

}



/* ---------- Details / Size & Fit / Care blocks ---------- */

.pd-block {

  margin-top: 28px;

  padding-top: 22px;

  border-top: 1px solid var(--color-border);

}

.pd-block:not(:first-child) {

  /* 单列回退时（非网格场景）保留原分隔线 */

  margin-top: 28px;

  padding-top: 22px;

  border-top: 1px solid var(--color-border);

}



.pd-block__title {

  font-size: 13px;

  font-weight: 600;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  margin: 0 0 14px;

}



.pd-block__list {

  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.pd-block__list li {

  display: flex;

  gap: 10px;

  font-size: 14px;

  line-height: 1.6;

}



.pd-kv__label {

  color: var(--color-muted);

  min-width: 130px;

  flex-shrink: 0;

}



.pd-kv__value {

  color: var(--color-text);

}



/* Care instructions: icon + label rows */

.pd-care {

  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.pd-care li {

  display: flex;

  align-items: center;

  gap: 12px;

  font-size: 14px;

}



.pd-care__icon {

  width: 20px;

  height: 26px;

  display: inline-flex;

  flex-shrink: 0;

  color: var(--color-text);

}



.pd-care__icon svg {

  width: 100%;

  height: 100%;

}



/* ---------- Cart Drawer ---------- */

.drawer-overlay {

  position: fixed;

  inset: 0;

  background-color: var(--color-overlay);

  z-index: var(--z-drawer);

  opacity: 0;

  visibility: hidden;

  transition: opacity var(--transition), visibility var(--transition);

}



.drawer-overlay.is-open {

  opacity: 1;

  visibility: visible;

}



.cart-drawer {

  position: fixed;

  top: 0;

  right: 0;

  bottom: 0;

  width: 420px;

  max-width: 92vw;

  background-color: var(--color-white);

  z-index: var(--z-drawer);

  transform: translateX(100%);

  transition: transform 0.3s ease;

  display: flex;

  flex-direction: column;

  box-shadow: var(--shadow-lg);

}



.cart-drawer.is-open {

  transform: translateX(0);

}



.cart-drawer__head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 20px 24px;

  border-bottom: 1px solid var(--color-border);

}



.cart-drawer__title {

  font-family: var(--font-serif);

  font-size: 22px;

}



.cart-drawer__close {

  font-size: 26px;

  line-height: 1;

}



.cart-drawer__items {

  flex: 1;

  overflow-y: auto;

  padding: 20px 24px;

}



.cart-item {

  display: grid;

  grid-template-columns: 84px 1fr auto;

  gap: 14px;

  padding: 16px 0;

  border-bottom: 1px solid var(--color-border);

}



.cart-item__img {

  width: 84px;

  height: 108px;

  object-fit: cover;

  background-color: var(--color-bg-alt);

}



.cart-item__info {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.cart-item__title {

  font-size: 14px;

  color: var(--color-text);

}



.cart-item__variant {

  font-size: 12px;

  color: var(--color-muted);

}



.cart-item__price {

  font-size: 14px;

  font-weight: 600;

}



.cart-item__actions {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  justify-content: space-between;

}



.cart-item__remove {

  font-size: 12px;

  color: var(--color-muted);

  text-decoration: underline;

}



.cart-item__remove:hover {

  color: var(--color-sale);

}



.cart-item__qty {

  display: inline-flex;

  align-items: center;

  border: 1px solid var(--color-border);

  border-radius: var(--btn-radius);

  height: 32px;

}



.cart-item__qty button {

  width: 28px;

  height: 100%;

  font-size: 15px;

}



.cart-item__qty .qty-val {

  width: 34px;

  text-align: center;

  font-size: 13px;

}



.cart-drawer__foot {

  border-top: 1px solid var(--color-border);

  padding: 20px 24px;

}



.cart-drawer__subtotal {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 16px;

}



.cart-drawer__subtotal-label {

  font-size: 13px;

  text-transform: uppercase;

  letter-spacing: 0.08em;

}



.cart-drawer__subtotal-value {

  font-size: 20px;

  font-weight: 600;

}



.cart-drawer__actions {

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.cart-drawer__empty {

  text-align: center;

  padding: 48px 16px;

  color: var(--color-muted);

}



.cart-drawer__empty svg {

  width: 48px;

  height: 48px;

  margin: 0 auto 16px;

  opacity: 0.4;

}



/* ---------- Checkout ---------- */

.checkout-layout {

  display: grid;

  grid-template-columns: 1.2fr 1fr;

  gap: 48px;

  padding: 32px 0 72px;

  align-items: start;

}



/* The order summary now serves as the right column with everything

   (order summary, payment options, pay button, secure note) inside

   the same <aside id="checkoutSummary">. We keep the soft-grey card

   background from the original layout. */

.checkout-summary {

  background-color: #f1f1ef;

  padding: 28px 28px 32px;

  border-radius: 6px;

  align-self: start;

  font-size: 14px;

  color: #1a1a1a;

}



/* ----- Form column ----- */

.ck-title {

  font-family: var(--font-serif);

  font-size: 28px;

  font-weight: 500;

  margin: 0 0 20px;

  letter-spacing: -0.01em;

}



.ck-section {

  border-top: 1px solid var(--color-border);

  padding: 22px 0 4px;

}

.ck-section:first-of-type {

  border-top: 0;

  padding-top: 0;

}



.ck-section__title {

  font-size: 15px;

  font-weight: 600;

  margin: 0 0 14px;

  color: var(--color-text);

}



.ck-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

  margin-bottom: 12px;

}

.ck-row:last-child { margin-bottom: 0; }



.ck-required {

  color: #c0392b;

  margin-left: 2px;

}



.form-textarea {

  width: 100%;

  border: 1px solid var(--color-border);

  background: #fff;

  padding: 10px 12px;

  font: inherit;

  border-radius: 2px;

  resize: vertical;

  min-height: 64px;

  transition: border-color var(--transition);

}

.form-textarea:focus { outline: 0; border-color: var(--color-text); }



.checkout-summary__title {

  font-family: var(--font-serif);

  font-size: 22px;

  font-weight: 500;

  margin-bottom: 18px;

  letter-spacing: -0.005em;

}



.checkout-summary__item {

  display: flex;

  gap: 14px;

  align-items: flex-start;

  padding: 12px 0;

  font-size: 14px;

}



.checkout-summary__thumb {

  width: 56px;

  height: 72px;

  object-fit: cover;

  border-radius: 2px;

  flex-shrink: 0;

  background: #e7e7e4;

}



.checkout-summary__info {

  flex: 1;

  min-width: 0;

  padding-top: 2px;

}



.checkout-summary__name {

  display: block;

  font-weight: 500;

  line-height: 1.4;

}



.checkout-summary__variant,

.checkout-summary__qty {

  display: block;

  color: var(--color-muted);

  font-size: 12px;

  margin-top: 4px;

}



.checkout-summary__price {

  font-weight: 600;

  white-space: nowrap;

  padding-top: 2px;

}



/* Subtotal / Shipping row block */

.checkout-summary__rows {

  margin-top: 12px;

  padding-top: 14px;

  border-top: 1px solid #d8d8d4;

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.checkout-summary__row {

  display: flex;

  justify-content: space-between;

  align-items: baseline;

  font-size: 14px;

}

.checkout-summary__row-label { color: var(--color-text); }

.checkout-summary__row-value { font-weight: 500; }



.checkout-summary__total {

  display: flex;

  justify-content: space-between;

  align-items: baseline;

  padding-top: 16px;

  margin-top: 14px;

  border-top: 1px solid #d8d8d4;

  font-size: 17px;

  font-weight: 700;

}



/* ----- Pay action -----

   NOTE: no payment-method selector here on purpose. Payment gateways

   (Artom / PayPal) are NOT integrated yet, so the original site's

   radio list would be misleading. Only the pay CTA + a generic

   secure-payment note are shown. Re-add the method selector here

   when a gateway is actually wired up. */

.checkout-pay {

  margin-top: 26px;

}



/* "Payment methods" section title. The heading stays so customers know

   this is where the payment choice happens; the actual channel list

   (Artom / PayPal / …) is NOT shown yet because no gateway is wired up. */

.checkout-pay__title {

  font-size: 15px;

  font-weight: 600;

  margin-bottom: 12px;

}



/* Big black "PAY total →" button */

.checkout-pay__btn {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  width: 100%;

  background-color: #0e0e0e;

  color: #fff;

  font-family: var(--font-sans, 'Lato', system-ui, sans-serif);

  font-size: 16px;

  font-weight: 600;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  padding: 16px 20px;

  border: 0;

  border-radius: 4px;

  margin-top: 16px;

  cursor: pointer;

  transition: background-color 150ms, opacity 150ms;

}

.checkout-pay__btn:hover { background-color: #2a2a2a; }

.checkout-pay__btn:disabled { opacity: 0.6; cursor: not-allowed; }

.checkout-pay__arrow { stroke: #fff; }



.checkout-pay__secure {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  font-size: 12px;

  color: #6a6a66;

  margin-top: 10px;

}

.checkout-pay__secure svg { stroke: #c98a3a; /* warm orange to match the lock */ }



/* ---------- PayPal ACDC card fields ---------- */

.checkout-pay__divider {

  display: flex;

  align-items: center;

  gap: 10px;

  color: #9a9a95;

  font-size: 12px;

  margin: 14px 0;

}

.checkout-pay__divider::before,

.checkout-pay__divider::after {

  content: "";

  flex: 1;

  height: 1px;

  background: #e4e2dc;

}

.pp-field { margin-bottom: 10px; }

.pp-field .form-label { display: block; font-size: 12px; margin-bottom: 4px; }

.pp-row { display: flex; gap: 10px; }

.pp-row .pp-field { flex: 1; }

#card-number-field iframe,

#card-expiry-field iframe,

#card-cvc-field iframe {

  width: 100% !important;

  height: 44px !important;

  border: 1px solid #d8d6d0;

  border-radius: 4px;

  background: #fff;

}



/* ---------- Payment method radio list ---------- */

.pay-methods { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 16px; }

.pay-method {

  position: relative;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px 14px;

  border: 1px solid #e4e2dc;

  border-radius: 8px;

  cursor: pointer;

  transition: border-color 0.15s, background 0.15s;

}

.pay-method:hover { border-color: #b9b6ae; }

.pay-method input { position: absolute; opacity: 0; pointer-events: none; }

.pay-method__body { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.pay-method__name { font-size: 14px; font-weight: 600; color: var(--color-text, #111); }

.pay-method__desc { font-size: 12px; color: #8a8880; }

.cf-row { margin-bottom: 12px; }

.cf-row > label { display: block; font-size: 12px; color: #8a8880; margin-bottom: 5px; }

.cf-row > div { border: 1px solid var(--color-border, #e5e3dd); border-radius: 6px; padding: 10px 12px; background: #fff; min-height: 44px; }

.cf-row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.pay-method__radio {

  width: 18px; height: 18px; flex: none;

  border: 2px solid #c4c1b8; border-radius: 50%;

  position: relative; transition: border-color 0.15s;

}

.pay-method__radio::after {

  content: ""; position: absolute; inset: 3px;

  border-radius: 50%; background: transparent; transition: background 0.15s;

}

.pay-method input:checked ~ .pay-method__radio { border-color: #111; }

.pay-method input:checked ~ .pay-method__radio::after { background: #111; }

.pay-method:has(input:checked) { border-color: #111; }

.pp-hidden { display: none !important; }



/* ---------- In-page PayPal card form bottom-sheet (popup) ---------- */

.pp-sheet-overlay {

  position: fixed; inset: 0; z-index: 1200;

  background: rgba(0, 0, 0, 0.45);

  display: flex; align-items: center; justify-content: center;

  padding: 16px;

  animation: ppSheetFadeIn 0.18s ease;

}

.pp-sheet-overlay[hidden] { display: none; }

.pp-sheet {

  width: 100%; max-width: 480px;

  background: #fff;

  border-radius: 16px;

  padding: 8px 22px 28px;

  max-height: 92vh;

  overflow-y: auto;

  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);

  animation: ppSheetUp 0.26s cubic-bezier(0.22, 1, 0.36, 1);

}

.pp-sheet__handle {

  width: 40px; height: 4px; border-radius: 2px;

  background: #d8d6d0; margin: 0 auto 12px;

}

.pp-sheet__head {

  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;

}

.pp-sheet__title { font-size: 18px; font-weight: 700; color: #111; }

.pp-sheet__secure {

  font-size: 11px; color: #6b6a63;

  background: #f0efe9; padding: 2px 8px; border-radius: 20px;

}

.pp-sheet__close {

  margin-left: auto; border: 0; background: transparent;

  font-size: 24px; line-height: 1; color: #555; cursor: pointer; padding: 2px 6px;

}

.pp-sheet__close:hover { color: #111; }

.pp-sheet__amount {

  font-size: 22px; font-weight: 700; color: #111; margin: 4px 0 14px;

}

.pp-sheet__body { padding-top: 4px; }

.pp-sheet__note {

  margin-top: 12px; font-size: 11.5px; line-height: 1.5; color: #8a8880; text-align: center;

}

@keyframes ppSheetUp { from { transform: translateY(12px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

@keyframes ppSheetFadeIn { from { opacity: 0; } to { opacity: 1; } }





/* ---------- Footer ---------- */

.footer {

  background-color: var(--color-text);

  color: #9d9d9d;

  margin-top: 48px;

}



.footer__top {

  display: grid;

  grid-template-columns: 1.4fr 1fr 1fr 1fr;

  gap: 40px;

  padding: 56px 0 40px;

}



.footer__brand {

  font-family: var(--font-serif);

  font-size: 28px;

  color: #fff;

  letter-spacing: 0.28em;

  margin-bottom: 16px;

}



.footer__about {

  font-size: 13px;

  line-height: 1.7;

  max-width: 320px;

}



.footer__heading {

  font-family: var(--font-body);

  font-size: 13px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: #fff;

  margin-bottom: 18px;

}



.footer__links li {

  margin-bottom: 10px;

}



.footer__links a {

  font-size: 13px;

  transition: color var(--transition);

}



.footer__links a:hover {

  color: var(--color-accent);

}



.footer__newsletter-form {

  display: flex;

  margin-top: 8px;

}



.footer__newsletter-input {

  flex: 1;

  padding: 11px 14px;

  border: 1px solid #444;

  background: transparent;

  color: #fff;

  font-size: 13px;

}



.footer__newsletter-input::placeholder {

  color: #7a7a7a;

}



.footer__newsletter-btn {

  padding: 0 18px;

  background-color: var(--color-accent);

  color: var(--color-text);

  font-size: 12px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}



.footer__bottom {

  border-top: 1px solid #333;

  padding: 20px 0;

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;

  font-size: 12px;

}



.footer__payment {

  display: flex;

  gap: 10px;

  font-size: 12px;

  text-transform: uppercase;

}



/* ---------- Toast / Loading ---------- */

.toast {

  position: fixed;

  bottom: 24px;

  left: 50%;

  transform: translateX(-50%) translateY(20px);

  background-color: var(--color-text);

  color: #fff;

  padding: 14px 24px;

  border-radius: var(--btn-radius);

  font-size: 14px;

  z-index: var(--z-modal);

  opacity: 0;

  visibility: hidden;

  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);

  box-shadow: var(--shadow-md);

}



.toast.is-show {

  opacity: 1;

  visibility: visible;

  transform: translateX(-50%) translateY(0);

}



.toast--error {

  background-color: var(--color-sale);

}



.spinner {

  display: inline-block;

  width: 28px;

  height: 28px;

  border: 3px solid var(--color-border);

  border-top-color: var(--color-text);

  border-radius: 50%;

  animation: spin 0.7s linear infinite;

  margin: 40px auto;

}



@keyframes spin {

  to {

    transform: rotate(360deg);

  }

}



.loading-wrap {

  display: flex;

  justify-content: center;

  grid-column: 1 / -1;

}



.empty-state {

  text-align: center;

  padding: 64px 16px;

  color: var(--color-muted);

  grid-column: 1 / -1;

}



.empty-state__title {

  font-family: var(--font-serif);

  font-size: 26px;

  color: var(--color-text);

  margin-bottom: 8px;

}



/* ---------- Responsive ---------- */

@media (max-width: 1024px) {

  .product-grid {

    grid-template-columns: repeat(3, 1fr);

  }



  .footer__top {

    grid-template-columns: 1fr 1fr;

  }

}



@media (max-width: 768px) {

  .container {

    padding-left: var(--container-pad-mobile);

    padding-right: var(--container-pad-mobile);

  }



  /* Product detail: stack columns, thumbnails go horizontal */

  .pd-wrap {

    grid-template-columns: 1fr;

    gap: 24px;

    padding: 20px 0 48px;

  }



  .pd-gallery {

    grid-template-columns: 1fr;

    gap: 10px;

  }



  .pd-thumbs {

    flex-direction: row;

    order: 2;

    overflow-x: auto;

    gap: 8px;

  }



  .pd-thumb {

    width: 64px;

    height: 84px;

  }



  .pd-gallery__main {

    order: 1;

  }



  .pd-kv__label {

    min-width: 110px;

  }



  .header__nav {

    display: none;

  }



  .menu-toggle {

    display: flex;

  }



  .product-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

  }



  .product-detail {

    grid-template-columns: 1fr;

    gap: 28px;

    padding: 24px 0 48px;

  }



  .checkout-layout {

    grid-template-columns: 1fr;

    gap: 32px;

  }



  .category-grid {

    grid-template-columns: 1fr 1fr;

  }



  .section {

    padding: 40px 0;

  }



  .footer__top {

    grid-template-columns: 1fr;

    gap: 28px;

  }



  .hero__title {

    font-size: 34px;

  }



  /* ---- Shop: collapse the fixed sidebar into a single stacked column ---- */

  .shop-layout {

    grid-template-columns: 1fr;

    gap: 28px;

  }

  .shop-filters {

    position: static !important;

    border: 1px solid var(--color-border);

    padding: 18px 18px 8px;

  }

  .shop-toolbar {

    align-items: flex-start;

    gap: 12px;

  }



  /* Announcement bar: let the long line wrap on small screens */

  .announcement-bar {

    font-size: 11px;

    letter-spacing: 0.05em;

    line-height: 1.4;

    padding: 8px 12px;

    white-space: normal;

  }

}



@media (max-width: 480px) {

  .product-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 10px;

  }



  .category-grid {

    grid-template-columns: 1fr;

  }



  .header__logo {

    font-size: 24px;

  }



  /* ---- Pagination: compact buttons on narrow phones ---- */

  .pagination {

    gap: 6px;

    margin-top: 28px;

  }

  .pagination__btn {

    min-width: 34px;

    height: 34px;

    font-size: 13px;

  }



  /* ---- Shop: filter groups + sort stack cleanly on narrow phones ---- */

  .shop-toolbar {

    flex-direction: column;

    gap: 12px;

  }

  .shop-toolbar__filters {

    gap: 8px;

    width: 100%;

  }

  .filter-btn {

    padding: 7px 12px;

    font-size: 11px;

  }

  .shop-toolbar > div:last-child {

    width: 100%;

    justify-content: space-between;

  }

  .shop-sort {

    flex: 1 1 auto;

    min-width: 0;

    max-width: 200px;

  }

  .shop-filters .form-check {

    font-size: 13px;

  }



  /* ---- Checkout: form rows collapse to a single column ---- */

  .ck-row {

    grid-template-columns: 1fr;

    gap: 0;

  }



  /* ---- Cart item: keep comfortable spacing on narrow screens ---- */

  .cart-item {

    grid-template-columns: 72px 1fr auto;

    gap: 10px;

    padding: 14px 0;

  }

  .cart-item__img {

    width: 72px;

    height: 92px;

  }

  .cart-item__actions {

    justify-content: space-between;

    gap: 8px;

  }



  /* ---- Checkout card fields: stack split rows on narrow phones ---- */

  .cf-row--split,

  .pp-row {

    grid-template-columns: 1fr;

    flex-direction: column;

    gap: 10px;

  }

  .checkout-summary {

    padding: 20px 18px 24px;

  }

  .ck-title {

    font-size: 24px;

  }

}



/* ============================================================

   COMMENSE-style Homepage

   (mirrors the original thecommense.com homepage layout)

   ============================================================ */

.homepage {

  --cm-accent: #fbbc05;          /* announcement bar yellow */

  --cm-text: #222222;

  --cm-border: #e6e6e6;

}



.cm-container {

  max-width: 1400px;

  margin: 0 auto;

  padding: 0 32px;

}



/* ---------- Announcement bar (rotating) ---------- */

.cm-announce {

  background-color: var(--cm-accent);

  color: var(--cm-text);

  overflow: hidden;

  padding: 0;

  height: 36px;

  display: flex;

  align-items: center;

}

.cm-announce__track {

  display: flex;

  width: 100%;

  height: 100%;

  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);

}

.cm-announce__slide {

  flex: 0 0 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 12px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  font-weight: 600;

  white-space: nowrap;

}

.cm-announce__slide:hover {

  color: var(--cm-text);

}



/* ---------- YWCJ single-row header ---------- */

.cm-header .header__inner {

  justify-content: space-between;

  gap: 16px;

}

.cm-header__logo {

  font-family: var(--font-serif);

  font-size: 28px;

  font-weight: 600;

  letter-spacing: 0.18em;

  color: var(--cm-text);

  text-transform: uppercase;

  flex: 0 0 auto;

  margin-right: 16px;

}

.cm-header__nav {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 22px;

  flex: 1 1 auto;

  overflow: hidden;

}

.cm-header__nav a {

  font-size: 12px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--cm-text);

  position: relative;

  white-space: nowrap;

}

.cm-header__nav a::after {

  content: '';

  position: absolute;

  left: 0;

  bottom: -4px;

  width: 0;

  height: 1px;

  background: var(--cm-text);

  transition: width 0.25s ease;

}

.cm-header__nav a:hover::after {

  width: 100%;

}

.cm-header__actions {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 14px;

  flex: 0 0 auto;

}

.cm-header__actions .header__icon {

  display: inline-flex;

}

.cm-header__actions .header__icon svg {

  width: 22px;

  height: 22px;

}



/* ---------- Section scaffolding ---------- */

.cm-section {

  padding: 40px 0;

}

.cm-section--tight {

  padding: 24px 0;

}

.cm-section-head {

  text-align: center;

  padding: 0 16px 28px;

}

.cm-section-title {

  font-family: var(--font-serif);

  font-size: clamp(24px, 3.5vw, 38px);

  font-weight: 600;

  letter-spacing: 0.02em;

  color: var(--cm-text);

  margin: 0;

}



/* ---------- Hero carousel ---------- */

.cm-hero {

  position: relative;

  width: 100%;

  overflow: hidden;

  background: #f4f4f4;

}

.cm-hero__slides {

  position: relative;

  width: 100%;

  aspect-ratio: 24 / 10;

}

.cm-hero__slide {

  position: absolute;

  inset: 0;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.7s ease, visibility 0.7s ease;

  display: block;

}

.cm-hero__slide.is-active {

  opacity: 1;

  visibility: visible;

}

.cm-hero__slide-inner {

  width: 100%;

  height: 100%;

  background-size: cover;

  background-position: center center;

  background-repeat: no-repeat;

}

.cm-hero__dots {

  position: absolute;

  bottom: 16px;

  left: 0;

  right: 0;

  display: flex;

  justify-content: center;

  gap: 10px;

  z-index: 3;

}

.cm-hero__dots button {

  width: 9px;

  height: 9px;

  border-radius: 50%;

  background: rgba(0, 0, 0, 0.25);

  border: 1px solid rgba(255, 255, 255, 0.6);

  transition: background 0.25s ease, transform 0.25s ease;

}

.cm-hero__dots button.is-active {

  background: var(--cm-text);

  transform: scale(1.25);

}



/* ---------- SHOP BY CATEGORY (7 equal tiles, full-width like original) ---------- */

.cm-cat-section {

  padding: 40px 0;

}

.cm-cat-section .cm-section-head {

  padding-bottom: 24px;

}

.cm-cat-grid {

  display: grid;

  grid-template-columns: repeat(7, 1fr);

  gap: 8px;

  padding: 0 8px;

}

.cm-cat {

  display: block;

  overflow: hidden;

  position: relative;

  aspect-ratio: 3 / 4;

}

.cm-cat img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.5s ease, opacity 0.4s ease;

}

.cm-cat:hover img {

  transform: scale(1.03);

}



/* ---------- Sub banner slideshow ---------- */

.cm-sub-banner {

  display: block;

  width: 100%;

  overflow: hidden;

}

.cm-sub-banner__inner {

  width: 100%;

  aspect-ratio: 24 / 4;

  background-size: cover;

  background-position: center center;

  background-repeat: no-repeat;

  transition: transform 0.5s ease;

}

.cm-sub-banner:hover .cm-sub-banner__inner {

  transform: scale(1.01);

}



/* ---------- Two-column tiles (SHOP THE EDITS / LATEST) full-width, natural ratio ---------- */

.cm-2col {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 8px;

  padding: 0 8px;

}

.cm-tile {

  display: block;

  overflow: hidden;

  position: relative;

}

.cm-tile img {

  width: 100%;

  height: auto;

  display: block;

  transition: transform 0.5s ease;

}

.cm-tile:hover img {

  transform: scale(1.03);

}



/* ---------- FOR EVERY MOMENT (full-width, overlay label + caption) ---------- */

.cm-moment-section {

  padding: 40px 0;

}

.cm-moment-section .cm-section-head {

  padding-bottom: 24px;

}

.cm-moment-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 8px;

  padding: 0 8px;

}

.cm-moment {

  display: block;

  position: relative;

  overflow: hidden;

}

.cm-moment img {

  width: 100%;

  aspect-ratio: 3 / 4;

  object-fit: cover;

  transition: transform 0.5s ease;

}

.cm-moment:hover img {

  transform: scale(1.03);

}

.cm-moment__overlay {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 46px;

  text-align: center;

  font-family: var(--font-serif);

  font-size: clamp(18px, 2vw, 30px);

  font-weight: 400;

  letter-spacing: 0.02em;

  color: #fff;

  text-shadow: 0 1px 4px rgba(0,0,0,0.4);

  pointer-events: none;

}

.cm-moment__caption {

  display: block;

  text-align: center;

  padding: 14px 8px 4px;

  font-size: 13px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--cm-text);

}



/* ---------- Section subtitle ---------- */

.cm-section-sub {

  text-align: center;

  margin: -16px 0 28px;

  color: #6b6b6b;

  font-size: 14px;

  letter-spacing: 0.04em;

}



/* ---------- GET THE #YWCJ LOOK (single-row carousel) ---------- */

.cm-look-section {

  padding: 40px 0 56px;

}

.cm-look-section .cm-section-head {

  padding-bottom: 24px;

}

.cm-look-carousel {

  position: relative;

}

.cm-look-viewport {

  overflow: hidden;

  width: 100%;

}

.cm-look-track {

  display: flex;

  gap: 10px;

  transition: transform 0.45s ease;

  will-change: transform;

}

.cm-look {

  display: block;

  flex: 0 0 auto;

  width: calc(20% - 8px);

  aspect-ratio: 3 / 4;

  overflow: hidden;

  position: relative;

  background: #f4f4f4;

}

.cm-look img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform 0.5s ease;

}

.cm-look:hover img {

  transform: scale(1.03);

}

.cm-look-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 3;

  width: 42px;

  height: 42px;

  border-radius: 50%;

  border: 1px solid rgba(0,0,0,0.12);

  background: rgba(255,255,255,0.92);

  color: var(--cm-text);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  opacity: 0;

  transition: opacity 0.25s ease, background 0.25s ease;

  pointer-events: none;

}

.cm-look-carousel:hover .cm-look-arrow,

.cm-look-carousel:focus-within .cm-look-arrow {

  opacity: 1;

  pointer-events: auto;

}

.cm-look-arrow:hover {

  background: #fff;

}

.cm-look-arrow svg {

  width: 18px;

  height: 18px;

}

.cm-look-arrow--left {

  left: 14px;

}

.cm-look-arrow--right {

  right: 14px;

}



/* ---------- Footer (matches original thecommense.com) ---------- */

.cm-footer {

  background-color: #fff;

  color: var(--cm-text);

  border-top: 1px solid var(--cm-border);

  margin-top: 24px;

}

.cm-footer__top {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  gap: 32px;

  padding: 52px 0 40px;

}

.cm-footer__title {

  font-family: var(--font-body);

  font-size: 13px;

  font-weight: 600;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--cm-text);

  margin-bottom: 18px;

}

.cm-footer__links li {

  margin-bottom: 11px;

}

.cm-footer__links a {

  font-size: 13px;

  color: var(--cm-text);

  transition: color 0.25s ease;

}

.cm-footer__links a:hover {

  color: #6f6f6f;

}

.cm-footer__col--newsletter {

  display: flex;

  flex-direction: column;

  gap: 28px;

}

.cm-footer__app-badges {

  display: flex;

  gap: 8px;

}

.cm-footer__app-badges a {

  display: block;

  width: calc(50% - 4px);

  max-width: 140px;

}

.cm-footer__app-badges img {

  width: 100%;

  height: auto;

  display: block;

}

.cm-footer__subscribe-text {

  font-size: 13px;

  margin-bottom: 12px;

  line-height: 1.5;

}

.cm-footer__form {

  display: flex;

  border: 1px solid var(--cm-text, #111);

  border-radius: 2px;

  overflow: hidden;

  background: #fff;

}

.cm-footer__form .cm-footer__input {

  flex: 1 1 auto;

  border: none;

  padding: 11px 14px;

  font-size: 14px;

  color: var(--cm-text, #111);

  background: #fff;

  outline: none;

  min-width: 0;

}

.cm-footer__form .cm-footer__input:focus {

  background: #fff;

}

.cm-footer__form .cm-footer__input::placeholder {

  color: var(--cm-text, #111);

  opacity: 0.55;

}

.cm-footer__form .cm-footer__btn {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 0 16px;

  background-color: var(--cm-text, #111);

  color: #fff;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  border: none;

  cursor: pointer;

  white-space: nowrap;

  transition: opacity 0.15s, background-color 0.15s;

}

.cm-footer__form .cm-footer__btn:hover { opacity: 0.85; }

.cm-footer__form .cm-footer__btn:focus-visible {

  outline: 2px solid var(--cm-text, #111);

  outline-offset: 2px;

}

.cm-footer__form .cm-footer__btn svg {

  width: 18px;

  height: 18px;

}

.cm-footer__social {

  display: flex;

  gap: 14px;

  margin-top: 18px;

}

.cm-footer__social a {

  color: var(--cm-text);

  transition: color 0.25s ease;

}

.cm-footer__social svg {

  width: 20px;

  height: 20px;

}

.cm-footer__social a:hover {

  color: #6f6f6f;

}

.cm-footer__payment {

  border-top: 1px solid var(--cm-border);

  padding: 20px 0;

}

.cm-payment {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  gap: 10px 16px;

  list-style: none;

  padding: 0;

  margin: 0;

}

.cm-payment li {

  display: inline-flex;

  align-items: center;

  justify-content: center;

}

.cm-payment img {

  display: block;

  width: 38px;

  height: 24px;

  object-fit: contain;

}



/* ---------- Footer: Press / "AS SEEN IN" bar ----------

   Mirrors the press-bar on thecommense.com: full-width medium-grey band

   underneath the footer link grid + payment row, holding five press

   names in distinctive typographic styles.  Text-only fallback because

   the actual trademarks can't be re-distributed — replace each

   <span class="cm-press__name"> with an SVG/PNG once rights are

   cleared. */

.cm-footer__press {

  background: #8a8a8a;

  padding: 20px 0;

  margin-top: 10px;

}

.cm-press {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-around;

  align-items: center;

  list-style: none;

  padding: 0;

  margin: 0;

  gap: 14px 28px;

}

.cm-press li {

  display: inline-flex;

  align-items: center;

  justify-content: center;

}

.cm-press__name {

  color: #ffffff;

  font-size: 14px;

  letter-spacing: 0.08em;

  font-weight: 600;

  white-space: nowrap;

  line-height: 1;

}

.cm-press__name--serif {

  /* "IN THE KNOW." style: italic serif */

  font-family: Georgia, "Times New Roman", serif;

  font-style: italic;

  font-weight: 400;

  letter-spacing: 0.02em;

  font-size: 16px;

}

.cm-press__name--italic {

  /* "ELLE" style: bold italic serif */

  font-family: Georgia, "Times New Roman", serif;

  font-style: italic;

  font-weight: 900;

  font-size: 19px;

  letter-spacing: 0.02em;

}

.cm-press__name--bold {

  /* "COSMOPOLITAN" style: heavy serif all-caps */

  font-family: Georgia, "Times New Roman", serif;

  font-weight: 900;

  letter-spacing: 0.2em;

  font-size: 12px;

}

.cm-press__name--tracked {

  /* "NETFLIX" style: bold sans with very wide tracking */

  font-family: Helvetica, Arial, sans-serif;

  letter-spacing: 0.32em;

  font-weight: 700;

  font-size: 13px;

}

.cm-press__name--script {

  /* "WHO WHAT WEAR" style: italic serif, slightly larger */

  font-family: Georgia, "Times New Roman", serif;

  font-style: italic;

  font-weight: 500;

  font-size: 15px;

  letter-spacing: 0.02em;

}

@media (max-width: 768px) {

  .cm-press {

    gap: 10px 18px;

  }

  .cm-press__name {

    font-size: 12px;

  }

  .cm-press__name--serif,

  .cm-press__name--italic,

  .cm-press__name--script {

    font-size: 14px;

  }

}



.cm-footer__copyright {

  padding: 18px 0;

  text-align: center;

  font-size: 12px;

  color: var(--cm-text);

}



/* ---------- Homepage responsive ---------- */

@media (max-width: 1024px) {

  .cm-header__nav {

    display: none;

  }

  .cm-header__logo {

    margin-right: auto;

  }

  .cm-cat-grid {

    grid-template-columns: repeat(3, 1fr);

  }

  .cm-moment-grid {

    grid-template-columns: repeat(2, 1fr);

  }

  .cm-look {

    width: calc(25% - 7.5px);

  }

}



@media (max-width: 768px) {

  .cm-container {

    padding: 0 16px;

  }

  .cm-header__logo {

    font-size: 22px;

    letter-spacing: 0.12em;

  }

  .cm-header .header__inner {

    gap: 6px;

  }

  .cm-header__actions {

    gap: 10px;

  }

  .cm-header__actions .header__icon svg {

    width: 20px;

    height: 20px;

  }

  .cm-header .menu-toggle {

    display: flex;

  }

  .cm-hero__slides {

    /* Keep the hero's native landscape ratio (sources are 1400x583 ≈ 2.4)

       so the full image is visible instead of cropping the sides. */

    aspect-ratio: 12 / 5;

  }

  .cm-hero__slide-inner {

    background-position: center center;

  }

  .cm-sub-banner__inner {

    /* Same idea: keep the wide banner's native ratio (~5.8). */

    aspect-ratio: 12 / 2;

  }

  .cm-cat-grid {

    grid-template-columns: repeat(4, 1fr);

    gap: 8px;

  }

  .cm-2col {

    gap: 8px;

  }

  .cm-look {

    width: calc(33.333% - 6.7px);

  }

  .cm-footer__top {

    grid-template-columns: 1fr;

    gap: 28px;

    padding: 40px 0 28px;

  }

}



@media (max-width: 480px) {

  .cm-header__logo {

    font-size: 18px;

    letter-spacing: 0.08em;

  }

  .cm-header .header__inner {

    gap: 4px;

  }

  .cm-header__actions {

    gap: 4px;

  }

  .cm-header__actions .header__icon svg,

  .cm-header__actions .menu-toggle {

    width: 18px;

    height: 18px;

  }

  .cm-header__actions .menu-toggle {

    width: 24px;

    height: 24px;

  }

  .cm-header__actions .menu-toggle span {

    width: 20px;

  }

  .cm-moment-grid {

    grid-template-columns: 1fr 1fr;

    gap: 8px;

  }

  .cm-look {

    width: calc(50% - 5px);

  }

  /* Category tiles: 4-per-row is far too cramped on a phone → 2-per-row */

  .cm-cat-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 6px;

    padding: 0 4px;

  }

  .cm-moment__caption {

    font-size: 11px;

    padding: 10px 4px 2px;

  }

  .cm-moment__overlay {

    bottom: 40px;

    font-size: 15px;

  }

}



@media (prefers-reduced-motion: reduce) {

  *,

  *::before,

  *::after {

    animation-duration: 0.01ms !important;

    transition-duration: 0.01ms !important;

  }

}



/* ---------- Shipping method radio list ---------- */

.ship-methods { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }

.ship-method {

  position: relative; display: flex; align-items: center; gap: 10px;

  padding: 11px 13px; border: 1px solid #e4e2dc; border-radius: 8px;

  cursor: pointer; background: #fff;

  transition: border-color 0.15s, background-color 0.15s;

}

.ship-method:hover { border-color: #b9b6ae; }

.ship-method input { position: absolute; opacity: 0; pointer-events: none; }

.ship-method__body { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.ship-method__name { font-size: 13px; font-weight: 600; color: var(--color-text, #111); }

.ship-method__desc { font-size: 11.5px; color: #8a8880; }

.ship-method__price { font-size: 13px; font-weight: 600; color: var(--color-text, #111); }

.ship-method__radio {

  width: 16px; height: 16px; flex: none;

  border: 2px solid #c4c1b8; border-radius: 50%;

  position: relative; transition: border-color 0.15s;

}

.ship-method__radio::after {

  content: ""; position: absolute; inset: 3px;

  border-radius: 50%; background: transparent; transition: background 0.15s;

}

.ship-method input:checked ~ .ship-method__radio { border-color: #111; }

.ship-method input:checked ~ .ship-method__radio::after { background: #111; }

.ship-method:has(input:checked) { border-color: #111; background: #faf9f6; }



/* ---------- Policy / About / FAQ 共享样式 ---------- */

.policy-section { margin-bottom: 32px; }

.policy-section h2 {

  font-family: var(--font-heading);

  font-size: 24px;

  margin-bottom: 8px;

}

.policy-section p,

.policy-section li { color: var(--color-muted); line-height: 1.8; margin-bottom: 10px; }

.policy-section ul { padding-left: 20px; margin-bottom: 10px; }





/* Currency switcher */

.cm-header__currency {

  display: inline-flex;

  align-items: center;

  margin-right: 8px;

}

.cm-header__currency select {

  appearance: none;

  -webkit-appearance: none;

  background: transparent;

  border: 1px solid var(--cm-border, #e5e5e5);

  border-radius: 4px;

  padding: 5px 22px 5px 10px;

  font-size: 13px;

  font-family: inherit;

  color: inherit;

  cursor: pointer;

}



/* ============================================================

   shop2-ywcj Footer 4-column upgrade

   - 改成 4 栏：brand + Help/Company/Newsletter

   - brand 栏：圆形 logo + 公司名 + 地址 + 邮箱 + 圆形社交圈

   ============================================================ */

.cm-footer__top {

  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;

}



/* Brand 栏 */

.cm-footer__col--brand {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 14px;

}

.cm-footer__brandlogo {

  display: inline-flex;

  align-self: flex-start;

  align-items: center;

  gap: 10px;

  text-decoration: none;

  color: inherit;

  margin-bottom: 2px;

}

.cm-footer__brandcircle {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 36px;

  height: 36px;

  border-radius: 50%;

  background: #222;

  color: #fff;

  font-weight: 600;

  font-size: 16px;

  letter-spacing: 0.02em;

}

.cm-footer__brandname {

  font-size: 18px;

  font-weight: 600;

  letter-spacing: 0.06em;

  text-transform: uppercase;

}

.cm-footer__address {

  font-style: normal;

  font-size: 13px;

  line-height: 1.55;

  color: var(--cm-text);

  opacity: .85;

}

.cm-footer__email {

  display: inline-flex;

  align-self: flex-start;

  align-items: center;

  gap: 8px;

  font-size: 13px;

  color: var(--cm-text);

  text-decoration: none;

  margin-top: 2px;

  width: auto;

}

.cm-footer__email svg {

  width: 16px !important;

  height: 16px !important;

  flex-shrink: 0;

}

.cm-footer__email:hover { color: #6f6f6f; }



/* 圆形社交圈（盖在 brand 栏里） */

.cm-footer__social--circles {

  margin-top: 8px;

  align-self: flex-start;

  width: auto;

  max-width: 100%;

  gap: 10px;

  flex-wrap: wrap;

}

.cm-footer__social--circles li { display: inline-flex; }

.cm-footer__social--circles a {

  display: inline-flex !important;

  align-items: center;

  justify-content: center;

  width: 34px !important;

  height: 34px !important;

  border-radius: 50%;

  border: 1px solid var(--cm-border, #e7e3dd);

  color: var(--cm-text);

  transition: background-color .2s ease, color .2s ease, border-color .2s ease;

}

.cm-footer__social--circles a:hover {

  background: #222;

  color: #fff;

  border-color: #222;

}

.cm-footer__social.cm-footer__social--circles svg,

.cm-footer__social--circles a svg {

  width: 16px !important;

  height: 16px !important;

}



/* 响应式 — 中等屏两行，窄屏单列 */

@media (max-width: 1024px) {

  .cm-footer__top {

    grid-template-columns: 1fr 1fr;

    gap: 36px 24px;

  }

  .cm-footer__col--brand { grid-column: 1 / -1; }

}

@media (max-width: 640px) {

  .cm-footer__top {

    grid-template-columns: 1fr;

    gap: 28px;

  }

}



/* Make product-card title and price stack vertically instead of inline */

.product-card__title { display: block; }

.product-card__price { display: block; margin-top: 4px; }



/* PDP Shipping prose (added 2026-09-20) */

.pd-block__text {

  font-size: 14px;

  line-height: 1.65;

  color: var(--pd-ink, #333);

  margin: 0;

}

.pd-shipping__highlights {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

  gap: 12px 24px;

  margin: 0;

  padding: 0;

  list-style: none;

}

.pd-shipping__highlights li {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 13px;

  color: var(--pd-ink-soft, #555);

}



/* ============================================================

   PDP description / features / size chart (2026-09-20)

   ============================================================ */

.pd-block__list--plain { list-style: none; padding-left: 0; }

.pd-block__list--plain li {

  position: relative;

  padding-left: 16px;

  font-size: 14px;

  line-height: 1.7;

  color: #3a3a3a;

}

.pd-block__list--plain li::before {

  content: "";

  position: absolute; left: 0; top: 10px;

  width: 4px; height: 4px; border-radius: 50%;

  background: currentColor; opacity: .55;

}

.pd-sizetable { overflow-x: auto; }

.pd-sizetable table {

  border-collapse: collapse;

  width: 100%;

  font-size: 13px;

  color: #3a3a3a;

}

.pd-sizetable th,

.pd-sizetable td {

  border: 1px solid #e6e2dc;

  padding: 7px 10px;

  text-align: center;

  white-space: nowrap;

}

.pd-sizetable th { background: #f7f5f1; font-weight: 600; }

.pd-block__text + .pd-block__text { margin-top: 10px; }

/* ============================================================
   Single-image products: no thumbnail rail, so the main image
   must span the full gallery width (2026-09-20).
   ============================================================ */
.pd-gallery > .pd-gallery__main:first-child { grid-column: 1 / -1; }

/* Countries we do not ship to — shipping policy list (multi-column) */
.policy-section ul.ship-blocked { column-count: 3; column-gap: 32px; padding-left: 20px; margin-bottom: 12px; }
.policy-section ul.ship-blocked li { margin: 2px 0; break-inside: avoid; page-break-inside: avoid; }
@media (max-width: 640px) {
  .policy-section ul.ship-blocked { column-count: 2; column-gap: 16px; }
}