/* ==========================================================================
   Inner pages — collection, product, search, cart, content pages, contact.
   ========================================================================== */

/* inner pages: on phones the header is fixed and content starts at 70px */
@media (max-width: 767px) {
  .page-inner .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 98; }
  .page-inner main { padding-top: 70px; }
}

.container-xl {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 15px;
}

/* ---------- shared: sale label + sale price on cards ---------- */
.lbl-sale {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 0 8px;
  font-size: 15px;
  line-height: 23px;
  color: var(--hot);
}
.pro-loop__price .is-sale { color: var(--hot); }
.pro-loop__price del { font-weight: 300; color: #000; }

/* ---------- grid of product cards (collection / search) ---------- */
.product-grid { display: flex; flex-wrap: wrap; }
.collection, .search-page { overflow-x: hidden; }
.product-grid .pro-loop { overflow: visible; }

/* ==========================================================================
   Collection
   ========================================================================== */
.collection { padding: 0 15px; }
.collection__title {
  margin: 15px 0;
  font-family: var(--font-re);
  font-size: 18px;
  font-weight: 500;
  line-height: 21.6px;
  text-align: center;
  text-transform: uppercase;
  color: var(--text);
}
.collection__desc {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  margin: 15px auto;
  text-align: justify;
}
.collection__desc:empty { display: none; }
.collection .product-grid { margin-right: -10px; }
.collection .pro-loop { width: calc(25% - 4px); margin: 0 2px 10px 0; }
.collection .pro-loop__image a { padding: 0 1px; }
.collection__empty { width: 100%; padding: 30px 0; text-align: center; line-height: 28px; }

/* ==========================================================================
   Search
   ========================================================================== */
.breadcrumb {
  display: flex;
  margin: 0;
  list-style: none;
  flex-wrap: wrap;
  align-items: center;
  padding: 10.5px 0;
  color: #fff; /* the live theme renders its breadcrumb in white */
}
.breadcrumb a, .breadcrumb span { color: #fff; }
.breadcrumb li + li { padding-left: 7px; }
.breadcrumb li + li::before { content: "/"; padding-right: 7px; color: #6c757d; }

.search-page__wrap { padding: 20px; background: var(--bg); }
.search-page__head { text-align: center; }
.search-page__head h1 {
  margin: 0 0 7px;
  font-size: 35px;
  font-weight: 500;
  line-height: 42px;
}
.search-page__head p { margin-bottom: 14px; }
.search-page__result { margin-bottom: 25px; text-align: center; }
.search-page__form {
  position: relative;
  width: 50%;
  margin: 25px auto;
}
.search-page__form input {
  display: block;
  width: 100%;
  height: 38px;
  padding: 7.5px 15px;
  font-family: var(--font-light);
  font-size: 14px;
  color: #000;
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 30px;
  outline: none;
}
.search-page__form button {
  position: absolute;
  top: 3px;
  right: 16px;
  height: 32px;
  padding: 5.25px 10.5px;
  font-size: 14px;
  color: var(--text);
}
.search-page .product-grid { margin: 0 -15px; }
.search-page .pro-loop { width: 25%; margin-bottom: 10px; }

.pagination { display: flex; justify-content: center; align-items: center; }
.pagination:empty { display: none; }
.pagination a,
.pagination span {
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-right: 10px;
  font-size: 14px;
  line-height: 27.5px;
  text-align: center;
  vertical-align: middle;
  color: var(--link);
  background: #fff;
  border: 1px solid var(--line);
}
.pagination .is-current { color: #fff; background: var(--link); border-color: var(--link); }
.pagination a:last-child { margin-right: 0; }
.pagination svg { width: 12px; height: 12px; vertical-align: -1px; }

/* ==========================================================================
   Product
   ========================================================================== */
.product__wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 0 4vw; }
/* gallery: thumbnails on the left, one large image on the right */
.product__gallery {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 0 1 auto;
  padding: 20px 10px 10px;
  background: var(--bg);
}
.product__thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 84px;
  max-height: min(calc(100vh - 140px), 800px);
  overflow-y: auto;
  scrollbar-width: none;
}
.product__thumbs::-webkit-scrollbar { display: none; }
.product__thumb {
  display: block;
  padding: 0;
  border: 1px solid transparent;
  opacity: 0.55;
  transition: opacity 0.2s, border-color 0.2s;
}
.product__thumb:hover { opacity: 1; }
.product__thumb.is-active { opacity: 1; border-color: var(--link); }
.product__thumb img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 0; }
.product__main {
  position: relative;
  flex: 0 1 auto;
  /* whole image fits in the window below the header */
  width: min(600px, calc((100vh - 150px) * 0.75), calc(55vw - 120px));
  background: #f4f2ec;
  touch-action: pan-y;
}
.product__main img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 0; }
.product__nav {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-top: -19px;
  color: var(--link);
  background: rgba(253, 253, 250, 0.85);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s;
}
.product__nav svg { width: 16px; height: 16px; }
.product__nav--prev { left: 12px; }
.product__nav--next { right: 12px; }
.product__main:hover .product__nav { opacity: 1; }
.product__count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 2px 10px;
  font-size: 12px;
  line-height: 20px;
  color: var(--link);
  background: rgba(253, 253, 250, 0.85);
  border-radius: 10px;
}

.product__side {
  position: sticky;
  top: 60px;
  align-self: flex-start;
  width: 35%;
  max-width: 460px;
  padding-top: 10px;
}
.product__detail { padding: 0 10px 10px; background: var(--bg); }
.product__back {
  display: block;
  margin-top: 10px;
  letter-spacing: 1px;
  color: #000;
}
.product__back svg { display: inline-block; width: 30px; height: 10.5px; margin-right: 15px; vertical-align: middle; }
.product__title {
  margin: 20px 0 7px;
  font-family: var(--font-re);
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}
.product__sku { margin-bottom: 10px; font-size: 13px; font-weight: 300; line-height: 19.5px; color: var(--line); }
.product__sku span { margin-right: 5px; }
.product__price { padding: 15px 0; font-size: 13px; line-height: 19.5px; }
.product__price-main { margin-right: 15px; font-size: 18px; font-weight: 700; line-height: 27px; }
.product__price-main.is-sale { color: var(--hot); }
.product__price del { font-size: 14px; color: #000; }

.product__swatch { margin-bottom: 15px; }
.sw-line { display: flex; justify-content: space-between; align-items: center; }
.sw-title { font-size: 13px; font-weight: 500; line-height: 19.5px; text-transform: capitalize; }
.sw-title b { font-weight: 500; }
.sw-title p { margin: 4px 0 14px; color: var(--accent); text-transform: none; }
.sw-select { display: flex; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.sw-item {
  position: relative;
  display: block;
  margin: 0 0 15px 15px;
  cursor: pointer;
}
.sw-item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 20px;
  height: 2px;
  margin-left: -10px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.2s;
}
.sw-item.is-active::after { opacity: 1; }
.sw-item--color { width: 34px; height: 34px; padding: 2px; }
.sw-item--color span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  /* thin ring so white / light colours stay visible */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.sw-item--size { min-width: 27px; height: 27px; padding: 3px 9px; font-size: 14px; line-height: 21px; text-align: center; }
.sw-item.is-soldout { opacity: 0.35; }
.sw-size-guide { display: none; }

.product__links {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  padding: 15px 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.product__links > div { line-height: 21px; }
.link-underline {
  padding-bottom: 3px;
  color: #000;
  border-bottom: 1px solid var(--link);
  cursor: pointer;
}
.product__qty { display: flex; align-items: center; }
.product__qty button,
.product__qty input {
  width: 35px;
  height: 35px;
  font-size: 15px;
  text-align: center;
  color: #000;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #000;
  border-radius: 0;
  outline: none;
  -moz-appearance: textfield;
}
.product__qty input { width: 70px; font-family: var(--font-light); font-size: 14px; }
.product__qty input::-webkit-outer-spin-button,
.product__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.btn-add {
  display: block;
  width: 100%;
  height: 55px;
  margin: 15px 0 10px;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
}
.btn-add:hover { opacity: 0.9; }
.btn-add[disabled] { cursor: not-allowed; opacity: 0.6; }
.product__ship { margin-bottom: 14px; }
.btn-fav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  margin: -6px 0 16px;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--link);
  border: 1px solid var(--line);
}
.btn-fav svg { width: 18px; height: 18px; fill: none; }
.btn-fav:hover { border-color: var(--link); }
.btn-fav__on { display: none; }
.btn-fav.is-fav { color: var(--accent); border-color: var(--accent); }
.btn-fav.is-fav svg { fill: currentColor; }
.btn-fav.is-fav .btn-fav__on { display: inline; }
.btn-fav.is-fav .btn-fav__off { display: none; }

.product__related { margin-top: 0; }
.product__related .section-head { padding: 15px 10px; }
.product__related .section-head h2 { width: auto; flex: 1; padding-left: 0; }
.product__related .carousel { padding: 0 10px 10px; background: var(--bg); }
.product__related .carousel__viewport { margin-right: -10px; }
.product__related .carousel__track > .pro-loop { padding-right: 10px; }

/* right-side popups (size chart / product info / shipping) */
.side-popup {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100000;
  width: 600px;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: 0 15px 30px;
  overflow-y: auto;
  background: var(--cart-bg);
  opacity: 0;
  transform: translateX(100%);
  transition: 0.5s;
}
.side-popup--info { width: 515px; }
.side-popup--ship { width: 650px; }
.side-popup.is-open { opacity: 1; transform: translateX(0); }
.side-popup__close { float: right; margin: 15px 0 30px; color: var(--link); }
.side-popup__close svg { width: 15px; height: 15px; display: block; }
.side-popup__body { clear: both; font-size: 13px; line-height: 19.5px; }
.side-popup__body img { display: block; width: 100%; height: auto; }
.side-popup__body p { margin-bottom: 14px; }
.side-popup__body h3 { margin: 30px 0 14px; font-size: 13px; font-weight: 400; color: var(--link); }
.side-popup__body h3:first-child { margin-top: 0; }
.popup-open .overlay { display: block; }

.ship-table { width: 100%; margin: 0 0 30px; border-collapse: collapse; }
.ship-table th,
.ship-table td { padding: 8px; text-align: center; border: 1px solid #333; font-weight: 400; }
.ship-table th { color: var(--accent); }
.accent { color: var(--accent); }

/* ==========================================================================
   Cart page
   ========================================================================== */
.cart-page { max-width: 1140px; margin: 0 auto; padding: 30px 15px 50px; }
.cart-page .container-xl { padding: 0; }
.cart-page__title { margin-bottom: 25px; font-family: var(--font-re); font-size: 20px; font-weight: 500; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.cart-page__title span { font-family: var(--font-light); color: #888; }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.cart-list { border-top: 1px solid #ece7dd; }
.cart-line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 110px 30px; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid #ece7dd; }
.cart-line__img img { display: block; width: 96px; height: 128px; object-fit: cover; object-position: 50% 0; border-radius: 4px; }
.cart-line__title { font-size: 14px; line-height: 20px; color: var(--text); }
.cart-line__variant { margin-top: 4px; font-size: 12px; color: #888; }
.cart-line__unit { margin-top: 6px; font-size: 13px; color: #555; }
.cart-line__total { font-size: 15px; font-weight: 500; text-align: right; white-space: nowrap; }
.cart-line__remove { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: #999; border-radius: 50%; transition: color 0.2s, background 0.2s; }
.cart-line__remove:hover { color: var(--accent); background: #f1ede6; }
.cart-line__remove svg { display: block; width: 11px; height: 11px; }
.cart-continue { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--link); }
.cart-continue:hover { color: var(--accent); }
.cart-summary { position: sticky; top: 100px; padding: 22px; background: #f9f7f2; border-radius: 6px; }
.cart-summary .btn-checkout { margin-top: 18px; }
.cart-summary__notes { margin: 16px 0 0; font-size: 12px; line-height: 18px; color: #777; }
.cart-summary__notes li { position: relative; margin-bottom: 6px; padding-left: 16px; }
.cart-summary__notes li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); }
.cart-summary__notes a { color: var(--link); text-decoration: underline; }

.btn-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  font-family: var(--font-re);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  transition: opacity 0.2s;
}
.btn-checkout:hover { color: #fff; opacity: 0.9; }

/* ==========================================================================
   Content pages (policies, brand, size chart)
   ========================================================================== */
.page-layout { padding: 20px; background: var(--bg); }
.page-wrapper { max-width: 800px; margin: 0 auto; padding: 0 0 20px; }
.page-wrapper h1 {
  margin: 15px 0;
  font-family: var(--font-re);
  font-size: 18px;
  font-weight: 500;
  line-height: 21.6px;
  text-align: center;
  text-transform: uppercase;
}
.page-content { font-size: 14px; line-height: 21px; text-align: justify; }
.page-content p { margin-bottom: 14px; }
.page-content h3 { margin: 0 0 14px; font-size: 13px; font-weight: 400; color: var(--accent); text-transform: uppercase; }
.page-content ul { margin: 0 0 14px; }
.page-content li { margin-bottom: 14px; }
.page-content li::before { content: "• "; }
.page-content img { display: block; width: 100%; height: auto; margin: 0 auto; }
.page-content hr { margin: 20px 0; border: 0; border-top: 1px solid #999; }
.page-content .note { font-style: italic; color: #999; }
.page-content h2 { margin: 26px 0 12px; font-family: var(--font-re); font-size: 15px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; color: var(--link); }
.page-content h2:first-child { margin-top: 0; }
.page-content ol { margin: 0 0 14px; padding-left: 20px; }
.page-content ol li { margin-bottom: 8px; }
.page-content ol li::before { content: none; }
.page-content li { margin-bottom: 8px; }
.page-content .updated { font-size: 12px; color: #888; }
.page-content .info-box { margin: 0 0 20px; padding: 14px 18px; background: #f6f3ec; border-left: 3px solid var(--accent); }
.page-content .info-box p { margin-bottom: 4px; }
.page-content table { width: 100%; margin: 0 0 18px; border-collapse: collapse; font-size: 13px; }
.page-content th,
.page-content td { padding: 8px 10px; text-align: center; border: 1px solid #d8d4cc; }
.page-content th { font-weight: 500; color: var(--link); background: #f6f3ec; }
.page-content .table-wrap { overflow-x: auto; }
.placeholder-note { padding: 10px 12px; margin-bottom: 20px; font-size: 12px; color: #8a6d3b; background: #fcf8e3; border: 1px dashed #e3d29a; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact__top { display: flex; flex-wrap: wrap; }
.contact__info { width: 35%; }
.contact__form-col { width: 65%; padding-left: 40px; }
.contact__title {
  margin: 40px 0;
  font-family: var(--font-re);
  font-size: 16px;
  font-weight: 500;
  line-height: 19.2px;
}
.contact__info strong { font-weight: 900; }
.contact__lines { letter-spacing: 1px; }
.contact__lines div { min-height: 21px; }
.contact__lines .accent { color: var(--accent); }
.contact__form input,
.contact__form select {
  display: block;
  width: 100%;
  height: 42px;
  margin-bottom: 25px;
  padding: 0;
  font-family: var(--font-re);
  font-size: 13px;
  color: #000;
  text-transform: uppercase;
  background: var(--bg);
  border: 0;
  border-bottom: 0.5px solid var(--line);
  border-radius: 0;
  outline: none;
}
.contact__form input::placeholder { color: var(--line); }
.contact__form select { padding: 0 4px; font-family: var(--font-light); font-size: 14px; color: var(--line); border-bottom-width: 1px; }
.contact__form textarea {
  display: block;
  width: 100%;
  height: 139px;
  padding: 5.25px 10.5px;
  font: inherit;
  color: #495057;
  background: var(--bg);
  border: 1px solid #ced4da;
  border-radius: 3.5px;
  outline: none;
  resize: vertical;
}
.contact__form textarea::placeholder { color: var(--line); text-transform: uppercase; }
/* send button sits right under the message box */
.contact__send { margin-top: 15px; }
.contact__send button {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 200px;
  height: 44px;
  padding: 0 30px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  transition: opacity 0.2s;
}
.contact__send button:hover { opacity: 0.9; }
.contact__msg { margin-top: 10px; font-size: 13px; color: var(--accent); }
.contact__msg.is-error { color: var(--hot); }
.contact__form .is-invalid { border-color: var(--hot); }
.contact__form input.contact__hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }
.contact__bottom { display: flex; flex-wrap: wrap; margin-top: 30px; }
.contact__map { width: 35%; }
.contact__map iframe { display: block; width: 100%; height: 415px; border: 0; }
.contact__image { width: 65%; padding-left: 40px; }
.contact__image img { display: block; width: 100%; height: 515px; object-fit: cover; }
.contact__image:only-child { width: 100%; padding-left: 0; }
.contact__image:only-child img { height: auto; }

/* ==========================================================================
   Blog / article
   ========================================================================== */
.blog__title {
  margin: 15px 0;
  font-family: var(--font-re);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
}
.blog__list { display: flex; flex-wrap: wrap; gap: 50px; padding: 0 0 70px 60px; }
.blog__item { width: calc(50% - 25px); max-width: 533px; }
.blog__item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.blog__item h2 {
  margin: 20px 0 10px;
  font-family: var(--font-re);
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  text-transform: capitalize;
}
.blog__item h2 a { color: var(--text); }
.blog__item p { margin-bottom: 10px; }
.blog__more { display: inline-block; color: #000; border-bottom: 1px solid #000; }

.article { max-width: 800px; margin: 0 auto; padding: 15px 15px 40px; }
.article h1 {
  margin: 15px 0 5px;
  font-family: var(--font-re);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}
.article__date { margin-bottom: 20px; font-size: 13px; color: #999; text-align: center; }
.article__body img { display: block; max-width: 100%; height: auto; margin: 0 auto 14px; }
.article__body p { margin-bottom: 14px; }
.article__nav { display: flex; justify-content: space-between; margin-top: 30px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .product__side { width: 42%; }
}

@media (max-width: 991px) {
  .collection .pro-loop { width: calc(33.333% - 4px); }
  .search-page .pro-loop { width: 33.333%; }
  .contact__info, .contact__form-col, .contact__map, .contact__image { width: 100%; padding-left: 0; }
  .contact__image { margin-top: 20px; }
}

@media (max-width: 767px) {
  .container-xl { padding: 0 15px; }

  .collection { padding: 0; }
  .collection__title { margin: 10px 0 5px; font-size: 13px; line-height: 15.6px; }
  .collection__desc { width: auto; margin: 5px 19.5px 10px; font-size: 11px; font-weight: 300; line-height: 16.5px; }
  .collection .product-grid { margin-right: -1px; }
  .collection .pro-loop { width: calc(50% - 1px); margin: 0 1px -5px 0; }
  .collection .pro-loop__image a { padding: 0; }
  .collection .swatches { margin-bottom: 20px; }
  .collection .swatches:empty { min-height: 0; }

  .breadcrumb { justify-content: center; }
  .search-page__wrap { padding: 0; }
  .search-page__form { width: auto; margin: 25px 18px; }
  .search-page .product-grid { margin: 0 -7.5px; }
  .search-page .pro-loop { width: 50%; margin-bottom: -5px; }

  /* product: large image on top (swipe to change), thumbnail strip below, details stack under it */
  .product__gallery { flex-direction: column-reverse; gap: 8px; width: 100%; padding: 0 0 10px; }
  .product__main { width: 100%; max-width: none; }
  .product__nav { opacity: 1; width: 32px; height: 32px; margin-top: -16px; }
  .product__thumbs { flex-direction: row; flex: none; width: 100%; max-height: none; padding: 0 10px; overflow-x: auto; overflow-y: hidden; }
  .product__thumb { flex: 0 0 60px; }
  .product__side { position: static; width: 100%; padding: 0; }
  .product__detail { display: flex; flex-direction: column; padding: 10px; }
  .product__back { display: none; }
  .product__swatch { order: 1; margin-bottom: 15px; }
  .product__qty { display: none; }
  .btn-add { order: 2; margin-top: 0; font-family: var(--font-re); }
  .btn-fav { order: 2; margin: 0 0 12px; }
  .product__title { order: 3; margin: 0 0 7px; font-size: 14px; line-height: 21px; }
  .product__sku { order: 4; }
  .product__price { order: 5; padding: 0; }
  .product__price-main { opacity: 0.92; }
  .product__links { order: 6; border-top: 0; margin-bottom: 0; }
  .product__ship { order: 7; }
  .sw-line { flex-direction: row-reverse; }
  .sw-line--color .sw-title b { display: none; }
  .sw-line--color .sw-title p { margin: 0; font-size: 13px; }
  .sw-line--size .sw-title { display: none; }
  .sw-item { margin: 0 15px 15px 0; }
  .sw-line--size { flex-direction: row; justify-content: space-between; }
  .sw-line--size .sw-size-guide { display: inline; }
  .product__links .js-open-size { display: none; }
  .product__related .carousel { padding: 0; }
  .product__related .carousel__viewport { margin-right: 0; }
  .product__related .carousel__track > .pro-loop { width: 50% !important; padding-right: 1px; }

  .side-popup, .side-popup--info, .side-popup--ship { width: 100%; }


  .page-layout { margin-top: 15px; padding: 0 15px; }
  .page-wrapper { padding-top: 10px; }
  .page-wrapper h1 { margin: 0 0 10px; font-size: 14px; line-height: 16.8px; }
  .contact { display: flex; flex-direction: column; }
  .contact__top, .contact__bottom { display: contents; }
  .contact__info { order: 1; padding-bottom: 21px; }
  .contact__map { order: 2; margin-top: 12px; }
  .contact__form-col { order: 3; padding-top: 7px; }
  .contact__image { order: 5; margin-top: 30px; }
  .contact__title { margin: 15px 0; font-size: 15px; font-weight: 400; line-height: 18px; }
  .contact__map iframe { height: 415px; }
  .contact__image img { height: auto; }

  .blog__list { gap: 30px; padding-left: 0; }
  .cart-page__empty h3 { padding-top: 25px; font-size: 16px; line-height: 19.2px; }
  .blog__item { width: 100%; }
}

/* ==========================================================================
   Checkout
   ========================================================================== */
.checkout { max-width: 1140px; margin: 0 auto; padding: 30px 15px 50px; }
.checkout__title { margin-bottom: 25px; font-family: var(--font-re); font-size: 20px; font-weight: 500; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.checkout__layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.checkout__layout[hidden] { display: none; }
.checkout__h2 { margin: 0 0 14px; font-family: var(--font-re); font-size: 15px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; }
.checkout__form .checkout__h2 + * { margin-bottom: 26px; }
/* honeypot: invisible and out of the layout without pushing anything off-screen */
.checkout__hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
.checkout__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.checkout__full { grid-column: 1 / -1; }
.field-box { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: #555; }
.field-box input,
.field-box select,
.field-box textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: #fff;
  border: 1px solid #d8d4cc;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field-box textarea { resize: vertical; }
.field-box select:disabled { color: #aaa; background: #f6f5f1; }
.field-box input:focus,
.field-box select:focus,
.field-box textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(141, 88, 104, 0.12); }
.field-box .is-invalid,
.is-invalid { border-color: #c0392b !important; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1); }
.pay-methods { display: flex; flex-direction: column; gap: 10px; }
.pay-option { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid #d8d4cc; border-radius: 6px; cursor: pointer; transition: border-color 0.2s; }
.pay-option.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pay-option input { accent-color: var(--accent); }
.pay-option__icon { display: flex; flex: none; width: 34px; height: 34px; align-items: center; justify-content: center; color: var(--accent); background: #f6f0f2; border-radius: 50%; }
.pay-option__icon svg { width: 19px; height: 19px; }
.pay-option__text { display: flex; flex-direction: column; gap: 2px; }
.pay-option__text b { font-weight: 500; }
.pay-option__text small { font-size: 12px; color: #777; }
.pay-bank { display: flex; gap: 20px; align-items: center; padding: 16px; background: #f9f7f2; border: 1px dashed #d8d4cc; border-radius: 6px; }
.pay-bank[hidden] { display: none; }
.pay-bank__qr { position: relative; flex: none; padding: 8px; background: #fff; border-radius: 6px; }
.pay-bank__qr img { display: block; width: 160px; height: 160px; }
.pay-bank__badge { position: absolute; left: 50%; bottom: -9px; padding: 1px 8px; font-size: 11px; color: #fff; white-space: nowrap; background: var(--accent); border-radius: 10px; transform: translateX(-50%); }
.pay-bank__info { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 13px; }
.pay-bank__info dt { color: #777; }
.pay-bank__info dd { margin: 0; word-break: break-word; }
.pay-confirm { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 13px; cursor: pointer; }
.pay-confirm[hidden] { display: none; }
.pay-confirm input { width: 16px; height: 16px; accent-color: var(--accent); }
.checkout__error { margin: 14px 0 0; padding: 10px 12px; font-size: 13px; color: #a93226; background: #fdf0ee; border-radius: 4px; }
.checkout__submit { width: 100%; height: 52px; margin-top: 18px; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; }
.checkout__submit:disabled { opacity: 0.6; cursor: wait; }
.checkout__terms { margin-top: 10px; font-size: 12px; color: #777; text-align: center; }
.checkout__terms a { text-decoration: underline; }
.checkout__summary { position: sticky; top: 100px; padding: 22px; background: #f9f7f2; border-radius: 6px; }
.checkout__items { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #e3ded3; }
.checkout__item { display: flex; align-items: center; gap: 12px; }
.checkout__thumb { position: relative; flex: none; }
.checkout__thumb img { display: block; width: 58px; height: 77px; object-fit: cover; object-position: 50% 0; border-radius: 4px; }
.checkout__thumb span { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; font-size: 11px; line-height: 20px; color: #fff; text-align: center; background: var(--accent); border-radius: 10px; }
.checkout__item-info { flex: 1; min-width: 0; }
.checkout__item-info p { font-size: 13px; }
.checkout__item-info small { font-size: 12px; color: #777; }
.checkout__item b { font-weight: 500; white-space: nowrap; }
.checkout__row { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.checkout__row span:last-child { color: #555; text-align: right; }
.checkout__row--total { margin-top: 12px; padding-top: 12px; font-size: 16px; border-top: 1px solid #e3ded3; }
.checkout__row--total b { font-weight: 500; color: var(--accent); }
.checkout__back { display: inline-block; margin-top: 10px; font-size: 13px; color: #777; }
.checkout__empty,
.checkout__success { max-width: 520px; margin: 20px auto; text-align: center; }
.checkout__empty p { margin-bottom: 18px; }
.checkout__success svg { width: 64px; height: 64px; margin-bottom: 12px; color: var(--accent); }
.checkout__success h2 { margin-bottom: 12px; font-family: var(--font-re); font-size: 20px; font-weight: 500; }
.checkout__success p { margin-bottom: 10px; line-height: 22px; }
.checkout__success .btn-checkout,
.checkout__empty .btn-checkout { display: inline-flex; width: auto; padding: 0 30px; }

@media (max-width: 991px) {
  .checkout__layout { grid-template-columns: 1fr; gap: 26px; }
  .checkout__summary { position: static; order: -1; }
}
@media (max-width: 575px) {
  .checkout__grid { grid-template-columns: 1fr; }
  .pay-bank { flex-direction: column; text-align: left; }
}

@media (max-width: 991px) {
  .cart-layout { grid-template-columns: 1fr; gap: 26px; }
  .cart-summary { position: static; }
}
@media (max-width: 575px) {
  .cart-page { padding-top: 20px; }
  .cart-page__title { font-size: 17px; }
  /* photo | info + remove on top, qty + total underneath */
  .cart-line { grid-template-columns: 80px minmax(0, 1fr) auto; grid-template-areas: "img info remove" "img qty total"; gap: 8px 14px; align-items: start; }
  .cart-line__img { grid-area: img; }
  .cart-line__img img { width: 80px; height: 107px; }
  .cart-line__info { grid-area: info; }
  .cart-line__qty { grid-area: qty; align-self: end; }
  .cart-line__total { grid-area: total; align-self: end; line-height: 32px; }
  .cart-line__remove { grid-area: remove; margin-top: -4px; }
}

/* ==========================================================================
   Blog
   ========================================================================== */
.blog { max-width: 1140px; margin: 0 auto; padding: 30px 15px 50px; }
.blog__title { font-family: var(--font-re); font-size: 22px; font-weight: 500; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.blog__intro { max-width: 620px; margin: 8px auto 22px; font-size: 14px; color: #777; text-align: center; }
.blog-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 30px; }
.blog-tabs a { padding: 7px 18px; font-size: 13px; color: var(--link); border: 1px solid #d8d4cc; border-radius: 999px; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.blog-tabs a:hover { border-color: var(--accent); color: var(--accent); }
.blog-tabs a.is-active { color: #fff; background: var(--accent); border-color: var(--accent); }

.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
.post-card { display: flex; flex-direction: column; }
.post-card__img { display: block; overflow: hidden; border-radius: 6px; }
.post-card__img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 15%; transition: transform 0.5s ease; }
.post-card:hover .post-card__img img { transform: scale(1.04); }
.post-card__body { display: flex; flex-direction: column; flex: 1; padding-top: 14px; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 8px; font-size: 12px; color: #888; }
.post-meta a { font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent); }
.post-meta span + span::before,
.post-meta a + span::before { content: "·"; margin-right: 10px; }
.post-card__title { margin: 0 0 8px; font-family: var(--font-re); font-size: 17px; font-weight: 500; line-height: 24px; }
.post-card__title a { color: var(--text); }
.post-card__title a:hover { color: var(--accent); }
.post-card__excerpt { display: -webkit-box; overflow: hidden; margin: 0 0 12px; font-size: 13px; line-height: 20px; color: #666; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.post-card__more { margin-top: auto; font-size: 13px; color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

/* single post */
.post { max-width: 760px; margin: 0 auto; padding: 26px 15px 10px; }
.breadcrumb-trail { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; font-size: 12px; color: #999; }
.breadcrumb-trail a { color: #777; }
.breadcrumb-trail a:hover { color: var(--accent); }
.post__title { margin: 0 0 12px; font-family: var(--font-re); font-size: 28px; font-weight: 500; line-height: 1.3; }
.post__lead { margin: 0 0 20px; font-size: 16px; line-height: 26px; color: #555; }
.post__cover { display: block; width: 100%; max-height: 520px; margin-bottom: 26px; object-fit: cover; object-position: 50% 20%; border-radius: 6px; }
.post__content { font-size: 15px; line-height: 26px; text-align: left; }
.post__content p { margin-bottom: 16px; }
.post__content h2 { margin: 30px 0 12px; font-size: 18px; text-transform: none; letter-spacing: 0; }
.post__content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.post__content figure { margin: 22px auto; max-width: 420px; }
.post__content figure img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 0; border-radius: 6px; }
.post__content figcaption { margin-top: 8px; font-size: 13px; color: #888; text-align: center; }
.post-related { max-width: 1140px; margin: 0 auto; padding: 10px 15px 50px; }
.post-section-title { margin: 30px 0 18px; font-family: var(--font-re); font-size: 16px; font-weight: 500; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.post-products__grid { justify-content: center; }
.post-products__grid .pro-loop { width: calc(25% - 8px); margin: 0 4px 10px; }

@media (max-width: 991px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-products__grid .pro-loop { width: calc(50% - 8px); }
}
@media (max-width: 575px) {
  .blog { padding-top: 20px; }
  .post-grid { grid-template-columns: 1fr; gap: 26px; }
  .post__title { font-size: 22px; }
  .post__lead { font-size: 15px; line-height: 24px; }
}