@font-face {
  font-family: "Helvetica";
  src: url("../fonts/HelveticaNeueLight.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Helvetica";
  src: url("../fonts/HelveticaNeueLightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Helvetica";
  src: url("../fonts/HelveticaNeue.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Helvetica";
  src: url("../fonts/HelveticaNeueItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Helvetica";
  src: url("../fonts/HelveticaNeueMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Helvetica";
  src: url("../fonts/HelveticaNeueMediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Helvetica";
  src: url("../fonts/HelveticaNeueBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Helvetica";
  src: url("../fonts/HelveticaNeueBoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
}
.h-4 {
  height: 0.25rem !important;
}

.w-4 {
  width: 0.25rem !important;
}

.h-8 {
  height: 0.5rem !important;
}

.w-8 {
  width: 0.5rem !important;
}

.h-12 {
  height: 0.75rem !important;
}

.w-12 {
  width: 0.75rem !important;
}

.h-16 {
  height: 1rem !important;
}

.w-16 {
  width: 1rem !important;
}

.h-20 {
  height: 1.25rem !important;
}

.w-20 {
  width: 1.25rem !important;
}

.h-24 {
  height: 1.5rem !important;
}

.w-24 {
  width: 1.5rem !important;
}

.h-28 {
  height: 1.75rem !important;
}

.w-28 {
  width: 1.75rem !important;
}

.h-32 {
  height: 2rem !important;
}

.w-32 {
  width: 2rem !important;
}

.h-36 {
  height: 2.25rem !important;
}

.w-36 {
  width: 2.25rem !important;
}

.h-40 {
  height: 2.5rem !important;
}

.w-40 {
  width: 2.5rem !important;
}

.h-44 {
  height: 2.75rem !important;
}

.w-44 {
  width: 2.75rem !important;
}

.h-48 {
  height: 3rem !important;
}

.w-48 {
  width: 3rem !important;
}

.h-52 {
  height: 3.25rem !important;
}

.w-52 {
  width: 3.25rem !important;
}

.h-56 {
  height: 3.5rem !important;
}

.w-56 {
  width: 3.5rem !important;
}

.h-60 {
  height: 3.75rem !important;
}

.w-60 {
  width: 3.75rem !important;
}

.h-64 {
  height: 4rem !important;
}

.w-64 {
  width: 4rem !important;
}

.h-68 {
  height: 4.25rem !important;
}

.w-68 {
  width: 4.25rem !important;
}

.h-72 {
  height: 4.5rem !important;
}

.w-72 {
  width: 4.5rem !important;
}

.h-76 {
  height: 4.75rem !important;
}

.w-76 {
  width: 4.75rem !important;
}

.h-80 {
  height: 5rem !important;
}

.w-80 {
  width: 5rem !important;
}

.mt-12 {
  margin-top: 12px !important;
}

.gap-12 {
  gap: 0.75rem !important;
}

.gap-32 {
  gap: 2rem !important;
}

.mb-32 {
  margin-bottom: 2rem !important;
}

.pt-40 {
  padding-top: 2.5rem !important;
}

.pb-20 {
  padding-bottom: 1.25rem !important;
}

.border-soft {
  border: 1px solid rgba(17, 17, 17, 0.1) !important;
}

.bg-track {
  background-color: #d9d9d9 !important;
}

.bg-card-soft {
  background-color: #f4f4f4 !important;
}

.shop-nav-tab {
  padding: 4px 10px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #111;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.shop-nav-tab:hover {
  color: #EB7E0A;
}

.shop-nav-tab.active {
  color: #EB7E0A;
  font-weight: 700;
  border-top: 1px solid #EB7E0A;
  background: linear-gradient(to bottom, rgba(235, 119, 47, 0.10), rgba(255, 212, 171, 0));
}

.shop-nav-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #fff;
  border-radius: 4px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: -4px 4px 5px rgba(0, 0, 0, 0.1), 4px 4px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  min-width: 180px;
}

.shop-nav-dropdown-item {
  font-size: 12px;
  line-height: 20px;
  color: #111;
  text-decoration: none;
  white-space: nowrap;
  padding: 2px 0;
  transition: color 0.15s ease;
}

.shop-nav-dropdown-item:hover {
  color: #EB7E0A;
}

.fc-main {
  color: #EB7E0A !important;
}

.fc-dark {
  color: #111111 !important;
}

.fc-gray {
  color: #848380 !important;
}

.fc-red {
  color: #CC2121 !important;
}

.fc-green {
  color: #1D9974 !important;
}

.fc-white {
  color: white !important;
}

.fc-blue {
  color: #2162A1 !important;
}

.fc-yellow {
  color: #FFEA00 !important;
}

.bg-lightMain {
  background-color: rgba(255, 243, 184, 0.2);
}

.bg-main {
  background-color: #EB7E0A !important;
}

.bg-dark {
  background-color: #111111 !important;
}

.bg-white {
  background-color: white !important;
}

.bg-blue {
  background-color: #2162A1 !important;
}

.bg-black25 {
  background-color: rgba(0, 0, 0, 0.25);
}

.bg-black50 {
  background-color: rgba(0, 0, 0, 0.5);
}

.bg-black75 {
  background-color: rgba(0, 0, 0, 0.75);
}

.bg-red {
  background-color: #CC2121 !important;
}

.bg-lightRed {
  background-color: rgba(250, 176, 176, 0.2);
}

.bg-green {
  background-color: #1D9974 !important;
}

.bg-lightGreen {
  background-color: rgba(176, 250, 177, 0.2);
}

.bg-orange {
  background-color: #FBB315;
}

.bg-purple {
  background-color: #883677;
}

.bg-background {
  background-color: #f1f1f1 !important;
}

.form-control {
  font-size: 0.875rem;
}
.form-control:focus {
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  border-color: #111111;
}

.img-contain {
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center center;
     object-position: center center;
}

.img-cover {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}

.ratio-11 {
  aspect-ratio: 1/1;
}

.ratio-21 {
  aspect-ratio: 2/1;
}

.ratio-31 {
  aspect-ratio: 3/1;
}

.ratio-41 {
  aspect-ratio: 4/1;
}

.ratio-43 {
  aspect-ratio: 4/3;
}

.ratio-169 {
  aspect-ratio: 16/9;
}

.zindex-0 {
  z-index: 0 !important;
}

.zindex-1 {
  z-index: 1 !important;
}

.zindex-2 {
  z-index: 2 !important;
}

.zindex-3 {
  z-index: 3 !important;
}

.zindex-4 {
  z-index: 4 !important;
}

.zindex-5 {
  z-index: 5 !important;
}

.fs-32 {
  font-size: 2rem !important;
}

.fs-14 {
  font-size: 0.875rem !important;
}

.fs-12 {
  font-size: 0.75rem !important;
}

.fs-10 {
  font-size: 0.625rem !important;
}

.fs-8 {
  font-size: 0.5rem !important;
}

.top-1 {
  top: 1rem;
}

.top-2 {
  top: 2rem;
}

.top-3 {
  top: 3rem;
}

.top-4 {
  top: 4rem;
}

.top-5 {
  top: 5rem;
}

.text-double-truncate {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-clamp: 2;
  -webkit-line-clamp: 2; /* number of lines */
  text-overflow: ellipsis;
}

.w-0 {
  width: 0 !important;
}

.w-120 {
  width: 7.5rem !important;
}

.w-144 {
  width: 9rem !important;
}

.w-160 {
  width: 10rem !important;
}

.w-240 {
  width: 15rem !important;
}

.h-120 {
  height: 7.5rem !important;
}

.h-144 {
  height: 9rem !important;
}

.h-160 {
  height: 10rem !important;
}

.h-240 {
  height: 15rem !important;
}

.minh-auto {
  min-height: auto !important;
}

.minh-32 {
  min-height: 2rem !important;
}

.minh-80 {
  min-height: 5rem !important;
}

.minh-100 {
  min-height: 100% !important;
}

.minh-320 {
  min-height: 20rem !important;
}

.minw-32 {
  min-width: 2rem !important;
}

.minw-48 {
  min-width: 3rem !important;
}

.minw-64 {
  min-width: 4rem !important;
}

.minw-80 {
  min-width: 5rem !important;
}

.minw-100 {
  min-width: 100% !important;
}

.minw-120 {
  min-width: 7.5rem !important;
}

.maxw-32 {
  max-width: 2rem !important;
}

.maxw-48 {
  max-width: 3rem !important;
}

.maxw-64 {
  max-width: 4rem !important;
}

.maxw-80 {
  max-width: 5rem !important;
}

.maxw-100 {
  max-width: 100% !important;
}

.maxw-160 {
  max-width: 10rem !important;
}

.maxw-200 {
  max-width: 12.5rem !important;
}

.maxw-240 {
  max-width: 15rem !important;
}

.maxw-280 {
  max-width: 17.5rem !important;
}

.maxw-320 {
  max-width: 20rem !important;
}

.maxw-400 {
  max-width: 25rem !important;
}

.maxw-480 {
  max-width: 30rem !important;
}

.maxw-540 {
  max-width: 40rem !important;
}

.maxw-800 {
  max-width: 50rem !important;
}

.maxw-960 {
  max-width: 60rem !important;
}

.maxh-160 {
  max-height: 10rem !important;
}

.maxh-320 {
  max-height: 20rem !important;
}

.maxh-480 {
  max-height: 30rem !important;
}

.modal-backdrop, .offcanvas-backdrop {
  backdrop-filter: blur(0.25rem);
  -o-backdrop-filter: blur(0.25rem);
  -ms-backdrop-filter: blur(0.25rem);
  -moz-backdrop-filter: blur(0.25rem);
  -webkit-backdrop-filter: blur(0.25rem);
  opacity: 1 !important;
  background-color: rgba(17, 17, 17, 0.5);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -webkit-appearance: textfield;
          appearance: textfield;
  -moz-appearance: textfield;
}

.opacity-10 {
  opacity: 0.1 !important;
}

.btn {
  font-size: 0.875rem !important;
}
.btn.btn-main {
  background-color: #EB7E0A;
}
.btn.btn-main:hover, .btn.btn-main:focus {
  background-color: #B65F02;
}
.btn.btn-main:disabled {
  background-color: rgba(17, 17, 17, 0.1);
  opacity: 0.25 !important;
}
.btn.btn-main:disabled strong {
  color: #111111 !important;
}
.btn.btn-blue {
  background-color: #10609D;
}
.btn.btn-blue:hover, .btn.btn-blue:focus {
  background-color: #044C83;
}
.btn.btn-blue:disabled {
  background-color: rgba(17, 17, 17, 0.1);
  opacity: 0.25 !important;
}
.btn.btn-blue:disabled strong {
  color: #111111 !important;
}
.btn.btn-menu {
  position: relative;
  border: none;
  transition: 0.2s ease;
}
.btn.btn-menu:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  transition: 0.2s ease;
  background: linear-gradient(0deg, transparent, rgba(235, 126, 10, 0.1));
}
.btn.btn-menu span {
  position: relative;
  z-index: 1;
}
.btn.btn-menu img.default {
  display: block;
}
.btn.btn-menu img.active {
  display: none;
}
.btn.btn-menu:hover, .btn.btn-menu.active {
  -ms-box-shadow: inset 0 2px 0 #EB7E0A;
  -o-box-shadow: inset 0 2px 0 #EB7E0A;
  box-shadow: inset 0 2px 0 #EB7E0A;
}
.btn.btn-menu:hover:before, .btn.btn-menu.active:before {
  height: 100%;
}
.btn.btn-menu:hover span, .btn.btn-menu.active span {
  text-shadow: 0 0 0.5px #EB7E0A;
  color: #EB7E0A;
}
.btn.btn-menu:hover img.default, .btn.btn-menu.active img.default {
  display: none;
}
.btn.btn-menu:hover img.active, .btn.btn-menu.active img.active {
  display: block;
}
.btn.btn-light.active, .btn.btn-light:hover, .btn.btn-light:focus {
  background-color: #f8f9fa;
  -ms-box-shadow: 0 0 0 1px #1D9974;
  -o-box-shadow: 0 0 0 1px #1D9974;
  box-shadow: 0 0 0 1px #1D9974;
  border-color: transparent !important;
}
.btn.btn-outline {
  -ms-box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.1);
  -o-box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.1);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.1);
  background-color: white;
}
.btn.btn-outline:hover, .btn.btn-outline:focus {
  background-color: rgba(17, 17, 17, 0.05);
}
.btn.filterDropdownButton:after {
  content: "";
  background-image: url(../icons/chevronRight.svg);
  border: none !important;
  background-size: contain;
  width: 1rem;
  height: 1rem;
  transform: rotate(90deg);
  transition: 0.2s ease;
}
.btn.filterDropdownButton.show:after {
  transform: rotate(-90deg);
}
.btn.customCollapseButton img {
  transition: 0.2s ease;
  transform: rotate(90deg);
}
.btn.customCollapseButton[aria-expanded=true] img {
  transform: rotate(-90deg);
}
.btn.btn-transparent {
  background-color: transparent;
}
.btn.btn-transparent:hover {
  background-color: #f8f9fa;
}

.cursor-pointer {
  cursor: pointer !important;
}

.border.border-dark {
  border-color: #111111 !important;
}

.transformDelete {
  transform: none !important;
}

.rotate-90 {
  transform: rotate(90deg);
}

.rotate-180 {
  transform: rotate(180deg);
}

.rotate-270 {
  transform: rotate(270deg);
}

.text-shadow {
  text-shadow: 0 0.25rem 0.25rem rgba(17, 17, 17, 0.25);
}

body {
  font-family: "Helvetica", sans-serif;
  font-optical-sizing: auto;
  font-size: 0.875rem;
  color: #111111;
}

main {
  min-height: 50vh;
}

header .logo img {
  height: 2.5rem;
}

.topSwiperSection {
  background-color: #FFE4D4;
}

.mainSearch:hover {
  border-color: #EB7E0A !important;
}
.mainSearch .dropdown-menu .btn img.opacity-25 {
  transition: 0.2s ease;
}
.mainSearch .dropdown-menu .btn:hover {
  background-color: rgba(17, 17, 17, 0.05);
}
.mainSearch .dropdown-menu .btn:hover img.opacity-25 {
  opacity: 1 !important;
}

.breadcrumb-item + .breadcrumb-item {
  padding: 0 !important;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: "";
  background-image: url(../icons/chevronRight.svg);
  width: 0.75rem;
  height: 0.75rem;
}

.categoryDropdownWrap:hover > .btn-menu {
  -ms-box-shadow: inset 0 2px 0 #EB7E0A;
  -o-box-shadow: inset 0 2px 0 #EB7E0A;
  box-shadow: inset 0 2px 0 #EB7E0A;
}
.categoryDropdownWrap:hover > .btn-menu:before {
  height: 100%;
}
.categoryDropdownWrap:hover > .btn-menu span {
  text-shadow: 0 0 0.5px #EB7E0A;
  color: #EB7E0A;
}
.categoryDropdownWrap:hover > .categoryDropdown {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

.categoryDropdown {
  transform: scale(0.95);
  transition: 0.2s ease;
  opacity: 0;
  visibility: hidden;
}
.categoryDropdown a.d-block {
  transition: 0.2s ease;
}
.categoryDropdown a.d-block:hover {
  color: #EB7E0A !important;
  transform: translateX(0.25rem);
}

.singleListNav .ListNavImage {
  position: absolute;
  left: 10%;
  width: 80%;
  top: 75%;
  transform: translateY(-50%);
  transition: 0.2s ease;
}
.singleListNav:hover .ListNavImage {
  transform: translateY(-52.5%);
}

.listNavCollapse {
  max-height: 11rem;
  min-height: 11rem !important;
}
.listNavCollapse.show, .listNavCollapse.collapsing {
  max-height: 25rem;
}

.singleProduct {
  position: relative;
  z-index: 1;
}
.singleProduct .productStory {
  transition: 0.2s ease;
  transform: translateY(-1rem);
}
.singleProduct .heartAction {
  transition: 0.3s ease;
  transform: translateX(4rem);
}
.singleProduct .heartAction.active {
  transform: translateX(0);
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.singleProduct .compareAction {
  transition: 0.4s ease;
  transform: translateX(4rem);
}
.singleProduct .detailTexts {
  max-width: calc(100% - 2.5rem);
}
.singleProduct:hover .productStory {
  transform: translateY(0);
}
.singleProduct:hover .heartAction {
  transform: translateX(0);
}
.singleProduct:hover .compareAction {
  transform: translateX(0);
}

.form-check-input:checked {
  background-color: #1D9974;
  border-color: #1D9974;
}

.imageCheckbox img {
  transform: scale(0.9);
}
.imageCheckbox .form-check-label:before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  border-radius: 0.25rem;
  top: 0.5rem;
  right: 0.5rem;
  border: 1px solid rgba(17, 17, 17, 0.1);
  z-index: 1;
}
.imageCheckbox .form-check-label:after {
  content: "";
  background-image: url(../icons/checkSmallWhite.svg);
  width: 1rem;
  height: 1rem;
  display: block;
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  z-index: 1;
  display: none;
}
.imageCheckbox .form-check-input:checked ~ .form-check-label:before {
  background-color: #1D9974;
}
.imageCheckbox .form-check-input:checked ~ .form-check-label:after {
  display: block;
}

footer a:hover span {
  color: #EB7E0A !important;
}

.categoryBackdrop {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(17, 17, 17, 0.75);
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transition: 0.1s ease;
}
.categoryBackdrop.active {
  opacity: 1;
  visibility: visible;
}

.detailRadio {
  position: relative;
  padding: 0;
  margin: 0;
}
.detailRadio .form-check-input {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
.detailRadio .form-check-input:checked ~ .form-check-label {
  -ms-box-shadow: 0 0 0 2px #1d9974;
  -o-box-shadow: 0 0 0 2px #1d9974;
  box-shadow: 0 0 0 2px #1d9974;
}
.detailRadio .form-check-input:disabled ~ .form-check-label {
  opacity: 0.25;
}
.detailRadio .form-check-input:disabled ~ .form-check-label:after {
  content: "";
  position: absolute;
  display: block;
  width: 200%;
  height: 1px;
  left: -50%;
  top: 50%;
  background-color: #111111;
  transform: rotate(30deg);
}
.detailRadio .form-check-label {
  cursor: pointer;
  -ms-box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.1);
  -o-box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.1);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.1);
  position: relative;
  overflow: hidden;
}

.deliveryRadio {
  position: relative;
  padding: 0;
  margin: 0;
}
.deliveryRadio .form-check-input {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
.deliveryRadio .form-check-input:checked ~ .form-check-label {
  -ms-box-shadow: 0 0 0 2px #1d9974;
  -o-box-shadow: 0 0 0 2px #1d9974;
  box-shadow: 0 0 0 2px #1d9974;
}
.deliveryRadio .form-check-input:checked ~ .form-check-label .condition {
  font-weight: 500;
  color: #1D9974;
}
.deliveryRadio .form-check-input:checked ~ .form-check-label:before {
  visibility: visible;
  opacity: 1;
}
.deliveryRadio .form-check-input:disabled ~ .form-check-label {
  opacity: 0.25;
}
.deliveryRadio .form-check-label {
  cursor: pointer;
  -ms-box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.1);
  -o-box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.1);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.1);
  position: relative;
}
.deliveryRadio .form-check-label:before {
  content: "";
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  bottom: -0.35rem;
  left: -0.35rem;
  border: 2px dotted #1D9974;
  display: block;
  border-radius: 0.75rem;
  visibility: hidden;
  opacity: 0;
  transition: 0.2s ease;
}
.deliveryRadio .form-check-label .condition {
  color: rgba(17, 17, 17, 0.5);
}

.serviceRadio {
  position: relative;
  padding: 0;
  margin: 0;
}
.serviceRadio .form-check-input {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
.serviceRadio .form-check-input:checked ~ .form-check-label {
  -ms-box-shadow: 0 0 0 1px #1d9974;
  -o-box-shadow: 0 0 0 1px #1d9974;
  box-shadow: 0 0 0 1px #1d9974;
}
.serviceRadio .form-check-input:checked ~ .form-check-label:before {
  background-color: #1D9974;
}
.serviceRadio .form-check-label {
  cursor: pointer;
  -ms-box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.1);
  -o-box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.1);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.1);
}
.serviceRadio .form-check-label:before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  border-radius: 50%;
  top: 0.5rem;
  right: 0.5rem;
  border: 1px solid rgba(17, 17, 17, 0.1);
  z-index: 1;
  background-color: white;
}
.serviceRadio .form-check-label:after {
  content: "";
  background-image: url(../icons/checkSmallWhite.svg);
  width: 1rem;
  height: 1rem;
  display: block;
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  z-index: 1;
}

.pickupChoice {
  position: relative;
  padding: 0;
  margin: 0;
}
.pickupChoice .form-check-input {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
.pickupChoice .form-check-input:checked ~ .form-check-label {
  -ms-box-shadow: 0 0 0 1px #1d9974;
  -o-box-shadow: 0 0 0 1px #1d9974;
  box-shadow: 0 0 0 1px #1d9974;
}
.pickupChoice .form-check-input:checked ~ .form-check-label:before {
  background-color: #1D9974;
}
.pickupChoice .form-check-label {
  cursor: pointer;
  -ms-box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.1);
  -o-box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.1);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.1);
}
.pickupChoice .form-check-label:before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  border-radius: 50%;
  top: 0.5rem;
  left: 0.5rem;
  border: 1px solid rgba(17, 17, 17, 0.1);
  z-index: 1;
  background-color: white;
}
.pickupChoice .form-check-label:after {
  content: "";
  background-image: url(../icons/checkSmallWhite.svg);
  width: 1rem;
  height: 1rem;
  display: block;
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  z-index: 1;
}

.cartChoice {
  position: relative;
  padding: 0;
  margin: 0;
}
.cartChoice .form-check-input {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
.cartChoice .form-check-input:checked ~ .form-check-label:before {
  background-color: #1D9974;
}
.cartChoice .form-check-label {
  cursor: pointer;
}
.cartChoice .form-check-label:before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  border: 1px solid rgba(17, 17, 17, 0.1);
  z-index: 1;
  background-color: white;
}
.cartChoice .form-check-label:after {
  content: "";
  background-image: url(../icons/checkSmallWhite.svg);
  width: 1rem;
  height: 1rem;
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0.125rem;
  z-index: 1;
}

.accordion-flush .accordion-button:not(.collapsed) {
  background-color: white;
  color: #111111;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.accordion-flush .accordion-button::after {
  width: 0.75rem;
  height: 0.75rem;
  background-size: contain;
}

.buyPair .imageCheckbox + .imageCheckbox {
  margin-left: 2rem;
}
.buyPair .imageCheckbox + .imageCheckbox:before {
  content: "";
  left: -2rem;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  display: block;
  background-image: url(../icons/plus.svg);
  width: 1.5rem;
  height: 1.5rem;
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.swiper-pagination-bullet-active {
  background-color: #111111;
}

.thumbImageSlide .swiper-slide-thumb-active img {
  -ms-box-shadow: 0 0 0 2px #1D9974;
  -o-box-shadow: 0 0 0 2px #1D9974;
  box-shadow: 0 0 0 2px #1D9974;
}

.form-control:focus {
  border-color: #1D9974;
}

.form-select:focus {
  border-color: #1D9974;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}

.deliverySteps .stepDot {
  display: block;
  border-radius: 50%;
  width: 1.25rem;
  height: 1.25rem;
  background-color: #C4C4C4;
  -ms-box-shadow: inset 0 0 0 0.25rem #F5F5F5;
  -o-box-shadow: inset 0 0 0 0.25rem #F5F5F5;
  box-shadow: inset 0 0 0 0.25rem #F5F5F5;
  position: relative;
  z-index: 1;
}
.deliverySteps .stepItem {
  position: relative;
  overflow: hidden;
}
.deliverySteps .stepItem:first-child:before {
  display: none;
}
.deliverySteps .stepItem:last-child:after {
  display: none;
}
.deliverySteps .stepItem:before, .deliverySteps .stepItem:after {
  content: "";
  position: absolute;
  top: 0.5rem;
  height: 0.25rem;
  width: 100%;
  display: block;
  background-color: #F5F5F5;
  z-index: 0;
}
.deliverySteps .stepItem:before {
  right: 50%;
}
.deliverySteps .stepItem:after {
  left: 50%;
}
.deliverySteps .stepItem.active .stepDot {
  background-color: #fff;
  -ms-box-shadow: inset 0 0 0 0.25rem #EB7E0A;
  -o-box-shadow: inset 0 0 0 0.25rem #EB7E0A;
  box-shadow: inset 0 0 0 0.25rem #EB7E0A;
}
.deliverySteps .stepItem.active:after, .deliverySteps .stepItem.active:before {
  background-color: #EB7E0A;
}

.customDropdown .dropdown-menu .btn:hover, .customDropdown .dropdown-menu .btn.active {
  background-color: rgba(17, 17, 17, 0.05);
}

.userMenu {
  background-color: rgba(228, 228, 228, 0.2);
}
.userMenu .btn img.default {
  display: block;
}
.userMenu .btn img.active {
  display: none;
}
.userMenu .btn img.chevron {
  transform: translateX(-0.5rem);
  opacity: 0;
  transition: 0.2s ease;
}
.userMenu .btn.active, .userMenu .btn:hover {
  background-color: #F4F4F4;
}
.userMenu .btn.active span, .userMenu .btn:hover span {
  font-weight: 700;
}
.userMenu .btn.active img.default, .userMenu .btn:hover img.default {
  display: none;
}
.userMenu .btn.active img.active, .userMenu .btn:hover img.active {
  display: block;
}
.userMenu .btn.active img.chevron, .userMenu .btn:hover img.chevron {
  transform: translateX(0rem);
  opacity: 1;
}

.singleOrder + .singleOrder {
  border-top: 1px solid rgba(17, 17, 17, 0.1);
}

.singleBrand .imageContainer img {
  transition: 0.2s ease;
}
.singleBrand .imageContainer:hover img {
  transform: scale(1.05);
}
.singleBrand a:hover {
  color: #EB7E0A !important;
}

.singleSmallBrand:hover {
  border-color: #1D9974 !important;
}

.table .text-truncate {
  display: -webkit-box !important;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

.gridSlideFirst .swiper-wrapper, .gridSlideSecond .swiper-wrapper, .gridSlideThird .swiper-wrapper {
  transition-timing-function: linear !important;
}

.gridSlideRight .swiper-wrapper {
  transition-timing-function: linear !important;
}

.customNav .nav-link {
  border-bottom: 0.25rem solid transparent;
}
.customNav .nav-link.active {
  border-bottom: 0.25rem solid #91205E;
}

.imageBackground {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}

@media (max-width: 767.98px) {
  header .logo img {
    height: 2rem;
  }
  .listNavCollapse {
    min-height: auto !important;
    max-height: none !important;
    aspect-ratio: 2/1;
    width: 100%;
  }
  .listNavCollapse.show, .listNavCollapse.collapsing {
    max-height: 75rem;
    aspect-ratio: auto;
  }
  .offcanvas {
    width: 100% !important;
  }
  .buyPair .imageCheckbox {
    width: calc(50% - 1.25rem);
  }
  .buyPair .imageCheckbox .maxw-160 {
    max-width: 100% !important;
  }
  .buyPair .imageCheckbox + .imageCheckbox {
    margin-left: 1rem;
  }
  .buyPair .imageCheckbox + .imageCheckbox:before {
    content: "";
    left: -1.25rem;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    display: block;
    background-image: url(../icons/plus.svg);
    width: 1rem;
    height: 1rem;
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
  }
  .deliverySteps .stepItem {
    position: relative;
    overflow: hidden;
  }
  .deliverySteps .stepItem:first-child:before {
    display: none;
  }
  .deliverySteps .stepItem:last-child:after {
    display: none;
  }
  .deliverySteps .stepItem:before, .deliverySteps .stepItem:after {
    content: "";
    position: absolute;
    left: 0.5rem;
    height: 100%;
    width: 0.25rem;
    display: block;
    background-color: #F5F5F5;
    z-index: 0;
    right: auto;
    top: auto;
  }
  .deliverySteps .stepItem:before {
    bottom: 50%;
  }
  .deliverySteps .stepItem:after {
    top: 50%;
  }
  .singleOrder .maxw-320 {
    max-width: 100% !important;
  }
  .compareTable .w-25 {
    width: 50% !important;
    min-width: 12.5rem;
  }
}
@media (max-width: 991.98px) and (min-width: 768px) {
  .listNavCollapse {
    min-height: 11rem !important;
    max-height: 11rem;
  }
  .listNavCollapse.show, .listNavCollapse.collapsing {
    max-height: 40rem;
  }
}
@media (max-width: 1399.98px) and (min-width: 992px) {
  .listNavCollapse {
    min-height: 9.5rem !important;
    max-height: 9.5rem;
  }
}

/* ─── Design system tokens — Netmall Figma library (34:1978) ─────────────── */
:root {
  /* Brand */
  --nm-orange:        #EB7E0A;
  --nm-orange-hover:  #B65F02;
  --nm-orange-tint:   rgba(235, 126, 10, 0.10);

  /* Surface neutrals (tinted, never pure #fff/#000) */
  --nm-ink:           #111111; /* primary text */
  --nm-ink-dim:       rgba(17, 17, 17, 0.5);
  --nm-ink-faint:     rgba(17, 17, 17, 0.1);
  --nm-paper:         #FFFFFE; /* near-white surface */
  --nm-surface-soft:  #F4F5F7; /* hover row, skeleton track */
  --nm-border:        #DEE2E6;

  /* Status */
  --nm-red:           #CC2121;
  --nm-green:         #16A34A;
  --nm-yellow:        #F59E0B;

  /* Card_tags fills (Figma 34:1990) */
  --nm-tag-featured:  #0A161D; /* black pill */
  --nm-tag-sale:      #CC2121; /* red pill */
  --nm-tag-new:       #16A34A; /* green pill */
  --nm-tag-lowstock:  #F59E0B; /* amber pill — low stock warning */
}

/* Card_CTA_button — Figma 34:1980 spec (33px pill, exact pixel match)
   5 variants from Figma: Default, Hover, Empty (out-of-stock), Support,
   Support hover. */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--nm-orange);
  border: 0;
  border-radius: 32px;
  height: 33px;
  padding: 4px 16px;
  color: #fff;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-cta:hover,
.btn-cta:focus-visible {
  background-color: var(--nm-orange-hover);
  color: #fff;
  outline: none;
}
.btn-cta:focus-visible {
  box-shadow: 0 0 0 3px var(--nm-orange-tint);
}
.btn-cta:active {
  transform: translateY(1px);
}
.btn-cta:disabled,
.btn-cta[aria-disabled="true"] {
  background-color: var(--nm-ink-faint);
  color: var(--nm-ink-dim);
  cursor: not-allowed;
  transform: none;
}
/* Wider variant for "Support" (e.g. "Бүтгийг харах", bundle CTAs) */
.btn-cta--support {
  height: 33px;
  padding: 4px 20px;
}
/* Larger primary CTA used on page-level forms (PDP, cart, checkout, profile)
   where a 33px pill feels cramped next to body-size form controls. */
.btn-cta--lg {
  height: 44px;
  padding: 10px 24px;
  font-size: 14px;
}
/* Outlined twin of btn-cta — same dimensions, transparent fill.
   Used for secondary actions like "Шууд авах" alongside "Сагсанд хийх". */
.btn-cta-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 1px solid var(--nm-ink);
  border-radius: 32px;
  height: 33px;
  padding: 4px 16px;
  color: var(--nm-ink);
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
              color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-cta-outline:hover,
.btn-cta-outline:focus-visible {
  background-color: var(--nm-ink);
  color: #fff;
  outline: none;
}
.btn-cta-outline:focus-visible {
  box-shadow: 0 0 0 3px var(--nm-ink-faint);
}
.btn-cta-outline:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-cta-outline.btn-cta--lg {
  height: 44px;
  padding: 10px 24px;
  font-size: 14px;
}

/* Variant pill (PDP color/size selectors, Figma 06).
   Default = light bg + thin border, Active = ink bg + white text, Disabled = strikethrough */
.variant-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 40px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--nm-border);
  background-color: var(--nm-paper);
  color: var(--nm-ink);
  font-family: "Helvetica", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
              color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.variant-pill:hover {
  border-color: var(--nm-ink);
}
.variant-pill.active {
  background-color: var(--nm-ink);
  border-color: var(--nm-ink);
  color: #fff;
}
.variant-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--nm-orange-tint);
}
.variant-pill:disabled {
  text-decoration: line-through;
  color: var(--nm-ink-dim);
  cursor: not-allowed;
  background-color: var(--nm-surface-soft);
}

/* Qty stepper (PDP / Cart / Quickview) */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--nm-border);
  border-radius: 9999px;
  overflow: hidden;
  background-color: var(--nm-paper);
}
.qty-stepper button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--nm-ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.qty-stepper button:hover:not(:disabled),
.qty-stepper button:focus-visible:not(:disabled) {
  background-color: var(--nm-surface-soft);
  outline: none;
}
.qty-stepper button:disabled { opacity: 0.4; cursor: not-allowed; }
.qty-stepper input {
  width: 44px;
  border: 0;
  text-align: center;
  font-weight: 500;
  background: transparent;
  font-variant-numeric: tabular-nums;
}
.qty-stepper input:focus { outline: none; }

/* Card_tags — Figma 34:1990 (Featured 84w / Sale 56w / New 50w) */
.card-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.card-tag--featured { background-color: var(--nm-tag-featured); }
.card-tag--sale     { background-color: var(--nm-tag-sale); }
.card-tag--new      { background-color: var(--nm-tag-new); }
.card-tag--lowstock { background-color: var(--nm-tag-lowstock); }
.card-tag img { width: 14px; height: 14px; }

/* Product card title: 2-line clamp with reserved height so short titles
   align with long ones in the same grid row */
.singleProduct .pc-title {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card_features — heart & compare icons on product card image overlay
   (Figma 34:2005 spec — 35.33 × 35.33 round button) */
.card-feature-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  padding: 0;
  background-color: var(--nm-paper);
  border: 1px solid var(--nm-border);
  border-radius: 9999px;
  cursor: pointer;
  transition:
    background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.card-feature-btn:hover,
.card-feature-btn:focus-visible {
  background-color: var(--nm-orange-tint);
  border-color: var(--nm-orange);
  outline: none;
}
.card-feature-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--nm-orange-tint);
}
.card-feature-btn:active {
  transform: scale(0.94);
}
.card-feature-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.card-feature-btn img {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

/* Hide heart / compare on product cards until the card is hovered (desktop
   only). Active / pressed buttons stay visible so users always see what
   they've already wishlisted or added to compare. Touch devices keep them
   visible since there's no hover state. */
@media (hover: hover) {
  .singleProduct .card-feature-btn {
    opacity: 0;
    transform: translateX(12px);
    transition:
      opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
      background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
      border-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .singleProduct:hover .card-feature-btn,
  .singleProduct:focus-within .card-feature-btn,
  .singleProduct .card-feature-btn[aria-pressed="true"],
  .singleProduct .card-feature-btn.is-active {
    opacity: 1;
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .singleProduct .card-feature-btn { transition: none; }
}

/* ─── Cart page (Figma 43:31264) — exact-pixel layout ──────────────────── */
.cart-page { padding: 24px 0 40px; }
.cart-page .cart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  /* No align-items: start — let cells stretch to the row height so the
     right column gives `position: sticky` on .cart-summary scroll room. */
}
.cart-page .cart-aside {
  align-self: stretch;
}
@media (max-width: 991px) {
  .cart-page .cart-grid {
    grid-template-columns: 1fr;
  }
  .cart-page .cart-aside {
    align-self: auto;
  }
}
.cart-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.cart-header h1 {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  margin: 0;
  color: var(--nm-ink);
  flex-grow: 1;
}
.cart-header__gift {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--nm-border);
  background-color: var(--nm-paper);
  border-radius: 9999px;
  color: var(--nm-ink);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cart-header__gift:hover { border-color: var(--nm-ink); }

/* Cart list (flat) — vendor name shows as a subtle row above its items only
   when the cart has 2+ vendors. */
.cart-list {
  background: var(--nm-paper);
}
.cart-vendor-label {
  font-size: 13px;
  color: var(--nm-ink-dim);
  padding: 12px 0 4px;
}
.cart-vendor-label + .cart-item { border-top: 0; }

.cart-item {
  display: grid;
  grid-template-columns: 154px 1fr auto;
  gap: 14px 55px;
  padding: 16px 20px;
  position: relative;
}
.cart-item + .cart-item { border-top: 1px solid var(--nm-border); }
@media (max-width: 767px) {
  .cart-item {
    grid-template-columns: 110px 1fr;
    gap: 12px;
    padding: 12px 14px;
  }
  .cart-item__actions {
    grid-column: 1 / -1;
    border-top: 1px dashed var(--nm-border);
    padding-top: 10px;
  }
}
.cart-item__image-box {
  position: relative;
  background-color: #f7f7f7;
  border-radius: 4px;
  width: 154px;
  height: 154px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media (max-width: 767px) {
  .cart-item__image-box { width: 110px; height: 110px; }
}
.cart-item__image-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cart-item__tag {
  position: absolute;
  top: 8px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 20px;
  padding: 0 6px;
  border-radius: 3px;
  background: #393838;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.02em;
}
.cart-item__tag img { width: 12px; height: 12px; }

.cart-item__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.cart-item__title {
  font-family: "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  color: var(--nm-ink);
  margin: 0;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-item__title:hover { color: var(--nm-orange); }
.cart-item__meta {
  display: flex;
  gap: 12px;
  align-items: center;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
}
.cart-item__shop {
  color: #1d9974;
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}
.cart-item__shop:hover { color: #137f5e; }
.cart-item__sku { color: #7d7d7d; }

/* Plain "label: value" specs (Figma uses inline text, not chips) */
.cart-item__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--nm-ink);
}
.cart-item__spec { display: inline-flex; gap: 4px; align-items: center; }
.cart-item__spec b { font-weight: 400; color: var(--nm-ink-dim); }
.cart-item__color-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--nm-border);
  background-color: currentColor;
}

/* Service option rows (warranty / repair / gift wrapping) */
.cart-item__services {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.cart-item__service {
  display: grid;
  grid-template-columns: 20px 24px 1fr auto auto;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.cart-item__service input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--nm-orange);
  margin: 0;
  cursor: pointer;
}
.cart-item__service-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cart-item__service-icon img { width: 20px; height: 20px; }
.cart-item__service-label { color: var(--nm-ink); }
.cart-item__service-price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--nm-ink);
}
.cart-item__service-more {
  font-size: 12px;
  color: #1d9974;
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.cart-item__service-more:hover { color: #137f5e; }

/* Out-of-stock action card replaces the qty/price column */
.cart-item__oos {
  width: 220px;
  padding: 16px;
  background: var(--nm-surface-soft);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.cart-item__oos-warning {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--nm-ink-dim);
  text-align: left;
}
.cart-item__oos-warning img { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.cart-item__oos-swap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--nm-ink);
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}
.cart-item__oos-swap img { width: 20px; height: 20px; }

/* Restructured right column */
.cart-item__qty-row {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
}
.cart-item__remove-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 6px 0;
  font-size: 13px;
  color: var(--nm-ink);
  cursor: pointer;
}
.cart-item__remove-text:hover { color: var(--nm-orange); }
.cart-item__remove-text img { width: 16px; height: 16px; }
.cart-item__price-old {
  font-size: 13px;
  color: var(--nm-ink-dim);
  text-decoration: line-through;
}
.cart-item__price--sale { color: var(--nm-red); }
.cart-item__stock-low { color: var(--nm-red); font-weight: 500; }

.cart-item__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: 180px;
}
.cart-item__remove {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
}
.cart-item__remove:hover { background: var(--nm-surface-soft); }
.cart-item__remove img { width: 18px; height: 18px; }
.cart-item__price {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  color: var(--nm-ink);
}
.cart-item__price-each {
  font-size: 12px;
  color: var(--nm-ink-dim);
  font-weight: 400;
}
.cart-item__stock {
  font-size: 12px;
  color: var(--nm-ink-dim);
}

/* Cart info cards — Figma 43:31565 spec. NO border, NO icon background. */
.cart-info-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--nm-border);
}
@media (max-width: 767px) {
  /* Stack the two info cards with a divider between them, instead of cramming
     them side by side (Figma 43:31565 mobile). */
  .cart-info-strip { flex-direction: column; align-items: stretch; gap: 0; }
  .cart-info-card { flex: none; width: 100%; padding: 16px 4px; }
  .cart-info-card + .cart-info-card { border-top: 1px solid var(--nm-border); }
}
.cart-info-card {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px;
  border-radius: 8px;
  background: transparent;
  border: 0;
}
.cart-info-card__icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  background: transparent;
}
.cart-info-card__icon img { width: 50px; height: 50px; }
.cart-info-card__body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.cart-info-card__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  color: #111;
}
.cart-info-card__title {
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  margin: 0;
}
.cart-info-card__desc {
  font-family: "Helvetica", sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: normal;
  margin: 0;
  color: #111;
}
.cart-info-card__link {
  font-family: "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #393838;
  text-decoration: underline;
  text-decoration-skip-ink: auto;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.cart-info-card__link:hover { color: var(--nm-orange); }

/* Order summary (right column) — Figma 43:31586 1:1 */
.cart-summary {
  background: #fff;
  border: 1px solid #c4c4c4;
  border-radius: 8px;
  padding: 20px 16px;
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: stretch;
}
.cart-summary__title {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: #111;
  text-transform: uppercase;
  margin: 0;
}
.cart-summary__group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.cart-summary__row {
  display: flex;
  gap: 13px;
  align-items: baseline;
  width: 100%;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
}
.cart-summary__row .label {
  flex: 1 1 0;
  min-width: 0;
  font-weight: 400;
  color: #111;
}
.cart-summary__row .value {
  font-weight: 400;
  color: #111;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cart-summary__row.discount .value {
  font-weight: 700;
  color: #cc2121;
}
/* Coupon savings read as a positive (green), beating the red `.discount` rule
   that the same row also carries. */
.cart-summary__row.discount.cart-summary__row--coupon .value {
  color: #1d9974;
}
.cart-summary__services {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.cart-summary__services-title {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  margin: 0;
}
.cart-summary__services-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cart-summary__service-row {
  display: flex;
  gap: 4px;
  align-items: center;
  width: 100%;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
}
.cart-summary__service-row .label {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
}
.cart-summary__service-row .label img { width: 16px; height: 16px; }
.cart-summary__service-row .value {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.cart-summary__coupon {
  display: flex;
  align-items: stretch;
  height: 40px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
}
.cart-summary__coupon input {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  padding: 8px;
  border: 0;
  background: transparent;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
}
.cart-summary__coupon input::placeholder { color: #7d7d7d; }
.cart-summary__coupon input:focus { outline: none; }
.cart-summary__coupon button {
  width: 96px;
  height: 100%;
  background: #f5f5f5;
  border: 0;
  border-left: 1px solid rgba(17, 17, 17, 0.1);
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #111;
  cursor: pointer;
  text-align: center;
}
.cart-summary__coupon button:hover { background: #ebebeb; }
.cart-summary__coupon button:disabled { color: #7d7d7d; cursor: not-allowed; }
.cart-summary__coupon input:disabled { color: #7d7d7d; cursor: not-allowed; }
.cart-summary__applied-coupons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.cart-summary__applied-coupon {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  background: #f5f5f5;
  border-radius: 8px;
  font-family: "Helvetica", sans-serif;
  font-size: 13px;
}
.cart-summary__applied-coupon-code {
  flex: 1 1 0;
  min-width: 0;
  font-weight: 500;
  color: #111;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-summary__applied-coupon-amount {
  color: #cc0a0a;
  font-weight: 500;
}
.cart-summary__applied-coupon-remove {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: #7d7d7d;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
}
.cart-summary__applied-coupon-remove:hover { background: rgba(17, 17, 17, 0.06); color: #111; }
.cart-summary__applied-coupon-remove:disabled { cursor: not-allowed; opacity: 0.5; }
.cart-summary__divider {
  border: 0;
  border-top: 1px solid rgba(17, 17, 17, 0.1);
  margin: 0;
  width: 100%;
}
.cart-summary__total {
  display: flex;
  gap: 13px;
  align-items: baseline;
  width: 100%;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #111;
}
.cart-summary__total > strong:first-child {
  flex: 1 1 0;
  min-width: 0;
  font-weight: 700;
}
.cart-summary__total > strong:last-child {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cart-summary__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 16px;
  background: var(--nm-orange);
  color: #fff;
  border: 0;
  border-radius: 32px;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  width: 100%;
}
.cart-summary__cta:hover {
  background: var(--nm-orange-hover);
  color: #fff;
}
.cart-summary__cta:disabled,
.cart-summary__cta[aria-disabled="true"] {
  background: #cfd2d6;
  color: #fff;
  cursor: not-allowed;
}

/* Hover hint shown under the disabled checkout CTA. The wrapper carries the
   `:hover` because a `disabled` <button> swallows pointer events (so its own
   `:hover`/`title` never fire); `pointer-events: none` on the button lets the
   pointer fall through to the wrapper, which is what reveals the tip. */
.cart-summary__cta-wrap {
  position: relative;
  width: 100%;
  cursor: not-allowed;
}
.cart-summary__cta-wrap > .cart-summary__cta:disabled {
  pointer-events: none;
}
.cart-summary__cta-tip {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 5;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(180, 35, 35, 0.96);
  color: #fff;
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  pointer-events: none;
}
.cart-summary__cta-tip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: rgba(180, 35, 35, 0.96);
}
.cart-summary__cta-wrap:hover .cart-summary__cta-tip,
.cart-summary__cta-wrap:focus-within .cart-summary__cta-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Per-row validation issue banner — sits at the top of the cart item card. */
.cart-item__issue {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 6px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  backdrop-filter: blur(2px);
}
.cart-item__issue-message {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cart-item__issue--error {
  background: rgba(180, 35, 35, 0.92);
  color: #fff;
}
.cart-item__issue--warning {
  background: rgba(204, 122, 0, 0.92);
  color: #fff;
}
.cart-item__issue--info {
  background: rgba(26, 79, 138, 0.92);
  color: #fff;
}
.cart-item__issue-action {
  font-weight: 700;
  white-space: nowrap;
  text-decoration: underline;
}

/* Saved-for-later — Figma 43:31655. Orange-tinted header, items below. */
.cart-saved {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--nm-border);
  /* Row 2 of .cart-grid spanning both columns — makes .cart-aside end
     at this divider so the sticky summary parks here on scroll. The
     inner content is constrained to the left column width so the
     summary column area below the summary stays empty (per the
     designer's layout request). */
  grid-column: 1 / -1;
  padding-right: calc(380px + 24px);
}
@media (max-width: 991px) {
  .cart-saved { padding-right: 0; }
}
.cart-saved__header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  background: rgba(255, 202, 167, 0.2);
  border-radius: 8px;
}
.cart-saved__title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: #111;
  text-transform: uppercase;
  margin: 0;
}
.cart-saved__title img { width: 35px; height: 35px; }
.cart-saved__gift {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 149px;
  padding: 4px 16px;
  background: #fff;
  border: 1px solid var(--nm-orange);
  border-radius: 32px;
  font-family: "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #111;
  cursor: pointer;
}
.cart-saved__gift span { flex: 1 0 0; min-width: 0; text-align: left; }

/* Item — Figma 43:31318 exact layout (image 154px + info 568px + actions auto) */
.cart-item--figma {
  display: flex;
  align-items: flex-start;
  padding: 10px;
  gap: 14px;
}
.cart-item--figma + .cart-item--figma { border-top: 1px solid var(--nm-border); }
.cart-item--figma .cart-item__image-box {
  width: 154px;
  height: 154px;
  flex-shrink: 0;
  border-radius: 4.162px;
  position: relative;
  background: #f7f7f7;
  overflow: hidden;
}
.cart-item--figma .cart-item__image-box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4.162px;
}
.cart-item--figma .cart-item__tag {
  position: absolute;
  top: 8px;
  left: 6px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  border-radius: 3.035px;
  background: #393838;
  width: auto;
  min-width: 64px;
  justify-content: center;
  color: #fff;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 9px;
  line-height: normal;
}
.cart-item--figma .cart-item__tag img { width: 12px; height: 12px; }
.cart-item--figma .cart-item__tag--sale { background: #cc2121; }

.cart-item--figma .cart-item__body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.cart-item--figma .cart-item__details {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: stretch;
}
.cart-item--figma .cart-item__details-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cart-item--figma .cart-item__title {
  font-family: "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: normal;
  color: #111;
  margin: 0;
  text-decoration: none;
}
.cart-item--figma .cart-item__title:hover { color: var(--nm-orange); }
.cart-item--figma .cart-item__meta {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
}
.cart-item--figma .cart-item__shop { color: #1d9974; text-decoration: underline; }
.cart-item--figma .cart-item__sku { color: #7d7d7d; }
.cart-item--figma .cart-item__specs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.cart-item--figma .cart-item__spec {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: normal;
  color: #111;
}
.cart-item--figma .cart-item__spec b { font-weight: 400; }
.cart-item--figma .cart-item__color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid var(--nm-border);
  background: currentColor;
}

/* Extras box (warranty/repair/gift) — sits inside the details column under
   the variant chips, matching Figma's "Extra Options Container" (43:31371). */
.cart-item--figma .cart-item__services {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  background: rgba(228, 228, 228, 0.2);
  border-radius: 8px;
  padding: 5px 10px;
}
.cart-item--figma .cart-item__service {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-family: "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #111;
  width: 100%;
  cursor: pointer;
}
.cart-item--figma .cart-item__service-label {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-item--figma .cart-item__service input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--nm-orange);
  margin: 0;
  cursor: pointer;
}
.cart-item--figma .cart-item__service img { width: 20px; height: 20px; }
.cart-item--figma .cart-item__service-price {
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cart-item--figma .cart-item__service-more {
  font-size: 12px;
  color: #1d9974;
  text-decoration: underline;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
}
.cart-item--figma .cart-item__service-more:hover { color: #137f5e; }

/* Right column — qty + stock + price + remove. Width matches Figma:
   qty (124) + gap (20) + stock/price column (auto ~80) ≈ 224px. */
.cart-item--figma .cart-item__actions {
  flex: 0 0 auto;
  width: 224px;
  height: 154px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  margin-left: 20px;
}
.cart-item--figma .cart-item__qty-stock {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  width: 100%;
}
.cart-item--figma .qty-stepper {
  width: 124px;
  height: 36px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 32px;
  background: #fff;
  justify-content: space-between;
  padding: 0 8px;
}
.cart-item--figma .qty-stepper button {
  width: 24px;
  height: 24px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: #111;
}
.cart-item--figma .qty-stepper input { width: 32px; font-size: 14px; font-weight: 500; font-family: "Helvetica Neue", sans-serif; }
.cart-item--figma .cart-item__stock-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  min-width: 100px;
}
.cart-item--figma .cart-item__stock {
  font-family: "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #111;
}
.cart-item--figma .cart-item__stock b { color: #111; font-weight: 700; }
.cart-item--figma .cart-item__stock b.is-low { color: #cc2121; }
.cart-item--figma .cart-item__price {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #111;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cart-item--figma .cart-item__price-old {
  font-family: "Helvetica", sans-serif;
  font-size: 13px;
  color: var(--nm-ink-dim);
  text-decoration: line-through;
}
.cart-item--figma .cart-item__price--sale { color: #cc2121; }
.cart-item--figma .cart-item__remove {
  position: static;
  top: auto;
  right: auto;
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 0;
  font-family: "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #111;
  cursor: pointer;
  justify-content: flex-start;
}
.cart-item--figma .cart-item__remove img { width: 20px; height: 20px; }
.cart-item--figma .cart-item__remove:hover { color: var(--nm-orange); }

/* Saved-section "Сагсанд нэмэх" + Устгах action stack */
.cart-item--figma .cart-item__saved-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  height: 154px;
  justify-content: space-between;
}

/* Out of stock card replacing actions */
.cart-item--figma .cart-item__oos {
  flex: 0 0 auto;
  width: 220px;
  height: 154px;
  background: var(--nm-surface-soft);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px;
  margin-left: 20px;
}

/* Mobile — image + title/shop/sku on top, the price/stepper bar on its own
   full-width row below them. */
@media (max-width: 767px) {
  .cart-item--figma {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 12px;
    gap: 12px;
  }
  .cart-item--figma .cart-item__image-box {
    width: 110px;
    height: 110px;
    flex-shrink: 0;
  }
  /* Dissolve the body wrapper so its children (details + actions/oos) become
     direct flex children of the article: image + details share the top row,
     and the actions/oos bar wraps to its own full-width row beneath. */
  .cart-item--figma .cart-item__body { display: contents; }
  .cart-item--figma .cart-item__details {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: auto;
  }
  .cart-item--figma .cart-item__services {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }
  /* Full-width bar below the image + title — no dashed divider. */
  .cart-item--figma .cart-item__actions,
  .cart-item--figma .cart-item__oos {
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    margin-left: 0;
  }
  .cart-item--figma .cart-item__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
  }
  /* Qty stepper on the LEFT, stock + price right-aligned on the RIGHT.
     "Үлдэгдэл: Nш" stays on one line. */
  .cart-item--figma .cart-item__qty-stock {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .cart-item--figma .cart-item__stock-block {
    align-items: flex-end;
    text-align: right;
  }
  .cart-item--figma .cart-item__stock { white-space: nowrap; }
  /* "Устгах" centered beneath the stepper/price row. */
  .cart-item--figma .cart-item__remove { align-self: center; }
  /* Saved-for-later row's "Сагсанд нэмэх" CTA goes full-width (only the saved
     row carries a .btn-cta in its actions; the cart row does not). */
  .cart-item--figma .cart-item__actions .btn-cta { width: 100%; }
}

/* Trending Now section title */
.cart-trending {
  margin-top: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--nm-border);
}
.cart-trending__title {
  text-align: center;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: normal;
  color: #111;
  margin: 0 0 20px;
}

/* Featured shops row — Figma 12:2660. 245px description sidebar +
   4 shop cards (250px each) in a single horizontal row. */
.featured-shops-row {
  display: flex;
  gap: 30px;
  align-items: center;
}
.featured-shops-aside {
  width: 245px;
  flex-shrink: 0;
}
.featured-shops-cards-wrap {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
}
.featured-shops-cards {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.featured-shops-cards::-webkit-scrollbar { display: none; }

.featured-shops-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #dee2e6;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: background 150ms ease, box-shadow 150ms ease;
}
.featured-shops-nav:hover {
  background: var(--nm-surface-soft);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.featured-shops-nav img { width: 20px; height: 20px; }
.featured-shops-nav--left { left: -22px; }
.featured-shops-nav--right { right: -22px; }

.featured-shop-card {
  width: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.featured-shop-card:hover {
  transform: translateY(-2px);
}
.featured-shop-card__grid {
  display: grid;
  grid-template-columns: repeat(2, 120px);
  gap: 5px;
  width: 100%;
}
.featured-shop-card__tile {
  width: 120px;
  height: 120px;
  background: #efefef;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.featured-shop-card__tile:nth-child(1) { border-top-left-radius: 10px; }
.featured-shop-card__tile:nth-child(2) { border-top-right-radius: 10px; }
.featured-shop-card__tile:nth-child(3) { border-bottom-left-radius: 10px; }
.featured-shop-card__tile:nth-child(4) { border-bottom-right-radius: 10px; }
.featured-shop-card__tile img {
  width: 102px;
  height: 96px;
  object-fit: contain;
}
.featured-shop-card__meta {
  display: flex;
  gap: 16px;
  align-items: center;
  width: 100%;
}

@media (max-width: 991px) {
  .featured-shops-row { flex-direction: column; gap: 16px; }
  .featured-shops-aside { width: 100%; }
}

/* Shop list card hover (home page) */
.shop-list-card {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.shop-list-card:hover img[class*="rounded-3"] {
  transform: none; /* image stays still */
}
.shop-list-card:hover .fc-dark {
  color: var(--nm-orange) !important;
}

/* Quickview trigger — appears on product card image hover (desktop only) */
.quickview-trigger {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translate(-50%, 12px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background-color: var(--nm-paper);
  border: 1px solid var(--nm-border);
  border-radius: 9999px;
  color: var(--nm-ink);
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition:
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.singleProduct:hover .quickview-trigger {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.quickview-trigger:hover,
.quickview-trigger:focus-visible {
  background-color: var(--nm-orange);
  border-color: var(--nm-orange);
  color: #fff;
  outline: none;
}
.quickview-trigger:focus-visible {
  /* Reveal even without hover for keyboard users */
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
  box-shadow: 0 0 0 3px var(--nm-orange-tint);
}
@media (prefers-reduced-motion: reduce) {
  .quickview-trigger { transition: none; }
}

/* Search box result rows */
.search-result-row {
  transition: background-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.search-result-row:hover,
.search-result-row:focus-visible {
  background-color: var(--nm-surface-soft);
  outline: none;
}
/* Hide native clear button on <input type="search"> — we render a custom one */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
input[type="search"] {
  -moz-appearance: textfield;
}
.min-width-0 {
  min-width: 0;
}

/* Skeleton loader — shimmering placeholder block */
.netmall-skeleton {
  position: relative;
  overflow: hidden;
  background-color: var(--nm-surface-soft);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: -150% 0;
  animation: netmall-skeleton-shimmer 1.4s linear infinite;
  vertical-align: middle;
}

@keyframes netmall-skeleton-shimmer {
  0%   { background-position: -150% 0; }
  100% { background-position: 150% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .netmall-skeleton {
    animation: none;
  }
}

/* ============================================================
   PDP (06 Detail) — Figma node 34:6135 1:1 transcription
   ============================================================ */
.pdp-page { padding: 16px 0 40px; }
.pdp-page .pdp-grid {
  display: grid;
  /* Fluid 50/50 columns. Was fixed `660px 660px` (=1332px), which is wider
     than the Bootstrap container below 1400px and forced page-wide horizontal
     scroll on 1280/1366px laptops. The children carry `min-width: 0`, so the
     gallery image can't blow the track back out. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  /* Let the right cell stretch to the row height so the sticky buy
     column has scroll room while the gallery is taller. */
}
/* Grid items default to min-width: auto, which lets them grow to their
   content's intrinsic size — the product image's natural width (≈1280px)
   was pushing the gallery column past the viewport on mobile, causing
   horizontal scroll. Forcing min-width: 0 keeps the track inside `1fr`. */
.pdp-gallery {
  min-width: 0;
}
.pdp-aside {
  align-self: stretch;
  padding-left: 32px;
  min-width: 0;
}
.pdp-buy {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: stretch;
  position: sticky;
  top: 120px;
  /* Breathing room above the sticky info section so it doesn't kiss
     the header when pinned. */
  margin-top: 24px;
}

.pdp-title-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
}
.pdp-title-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
}
.pdp-title {
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: #111;
  margin: 0;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}
.pdp-meta {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 20px;
}
.pdp-vendor-link {
  color: #1d9974;
  text-decoration: underline;
  text-decoration-skip-ink: none;
}
.pdp-vendor-link:hover { color: #157056; }
.pdp-sku { color: #7d7d7d; }
.pdp-icon-group {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  flex-shrink: 0;
}
.pdp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #111;
  border-radius: 6px;
}
.pdp-icon-btn img { width: 16px; height: 16px; }
.pdp-icon-btn:hover { background: var(--nm-surface-soft); }
.pdp-icon-btn.is-active { background: var(--nm-surface-soft); color: var(--nm-orange); }

.pdp-price-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
}
.pdp-price-row { display: flex; gap: 4px; align-items: baseline; }
.pdp-price-sale {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #cc2121;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
  white-space: nowrap;
}
.pdp-price-old {
  font-family: "Helvetica", sans-serif;
  font-size: 16px;
  color: rgba(17, 17, 17, 0.5);
  text-decoration: line-through;
  text-decoration-skip-ink: none;
}
.pdp-price-now {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #111;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}
.pdp-saving {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  display: flex;
  gap: 4px;
}
.pdp-tag-row { display: flex; gap: 8px; align-items: center; }
.pdp-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 24px;
  padding: 0 6px;
  border-radius: 4px;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
}
.pdp-tag img { width: 16px; height: 16px; }
.pdp-tag--sale { background: #cc2121; }
.pdp-tag--featured { background: var(--nm-tag-featured); }

.pdp-variants {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
}
.pdp-variant-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
}
.pdp-variant-label {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  line-height: 1.4;
}
.pdp-variant-label b { font-weight: 400; color: #111; }
.pdp-swatch-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; width: 100%; }
.pdp-size-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; width: 100%; }
.pdp-swatch {
  width: 64px;
  height: 33px;
  border: 1px solid #c4c4c4;
  border-radius: 32px;
  background: #fff;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pdp-swatch.is-active { border: 1.5px solid #1d9974; }
.pdp-swatch.is-disabled, .pdp-swatch:disabled { opacity: 0.3; cursor: not-allowed; }
.pdp-swatch img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.pdp-size-pill {
  min-width: 64px;
  height: 33px;
  border: 1px solid #c4c4c4;
  border-radius: 32px;
  background: #fff;
  padding: 8px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #111;
  cursor: pointer;
  flex-shrink: 0;
}
.pdp-size-pill.is-active {
  border: 1.5px solid #1d9974;
  color: #1d9974;
  font-weight: 700;
}
.pdp-size-pill.is-disabled, .pdp-size-pill:disabled { opacity: 0.3; cursor: not-allowed; }

.pdp-services {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
}
.pdp-services-label {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
}
.pdp-services-label b { font-weight: 400; }
.pdp-services-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}
.pdp-service-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid #c4c4c4;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: border-color 150ms ease;
}
.pdp-service-card.is-active { border-color: #1d9974; }
.pdp-service-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
.pdp-service-id {
  display: flex;
  gap: 4px;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
}
.pdp-service-id img { width: 24px; height: 24px; flex-shrink: 0; }
.pdp-service-id span {
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #111;
  line-height: 1.3;
}
.pdp-service-check { width: 16px; height: 16px; flex-shrink: 0; }
.pdp-service-price {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #111;
}
.pdp-service-more {
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #393838;
  text-decoration: underline;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  align-self: flex-start;
}

.pdp-divider {
  border: 0;
  border-top: 1px solid rgba(17, 17, 17, 0.1);
  margin: 0;
  width: 100%;
}

.pdp-stock {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.pdp-stock-line {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
}
.pdp-stock-line b { font-weight: 400; color: #cc2121; }

.pdp-actions {
  display: flex;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}
.pdp-qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.1);
  height: 52px;
  border-radius: 32px;
  padding: 0;
  flex-shrink: 0;
}
.pdp-qty button {
  width: 52px;
  height: 52px;
  border: 0;
  background: transparent;
  font-size: 18px;
  color: #111;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 32px;
}
.pdp-qty button:disabled { opacity: 0.3; cursor: not-allowed; }
.pdp-qty .pdp-qty-value {
  min-width: 32px;
  text-align: center;
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #111;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}
.pdp-cta {
  flex: 1 1 0;
  min-width: 0;
  height: 52px;
  border-radius: 32px;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease;
  padding: 0 16px;
  white-space: nowrap;
}
.pdp-cta--primary { background: #eb7e0a; color: #fff; }
.pdp-cta--primary:hover { background: #b65f02; }
.pdp-cta--primary:disabled { background: rgba(235,126,10,0.4); cursor: not-allowed; }
.pdp-cta--outline { background: #fff; color: #111; border: 1px solid #111; }
.pdp-cta--outline:hover { background: #f4f5f7; }
.pdp-cta--outline:disabled { opacity: 0.4; cursor: not-allowed; }

.pdp-info-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  padding: 0;
  width: 100%;
  overflow: hidden;
}
.pdp-info-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.1);
}
.pdp-info-section:last-child { border-bottom: 0; }
.pdp-info-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #111;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
  margin: 0;
}
.pdp-info-head .chevron {
  width: 20px;
  height: 20px;
  transition: transform 200ms ease;
}
.pdp-info-head[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.pdp-info-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: #111;
  line-height: 1.5;
}
.pdp-info-body p { margin: 0; }
.pdp-info-body strong, .pdp-info-body h4 {
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #111;
  margin: 0;
}

.pdp-attr-table { width: 100%; margin: 0; }
.pdp-attr-row {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  width: 100%;
}
.pdp-attr-row:nth-child(even) { background: #f5f5f5; }
.pdp-attr-row dt {
  width: 160px;
  flex-shrink: 0;
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: rgba(17, 17, 17, 0.5);
  margin: 0;
}
.pdp-attr-row dd {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  margin: 0;
}

/* Gallery (Figma 34:6127) — hero + 2-col tile grid */
.pdp-gallery-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.pdp-gallery-hero {
  width: 100%;
  aspect-ratio: 1280 / 1344;
  background: var(--nm-surface-soft);
  overflow: hidden;
  position: relative;
  border-radius: 0;
}
.pdp-gallery-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pdp-gallery-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}
.pdp-gallery-tile {
  width: 100%;
  aspect-ratio: 324 / 340;
  background: var(--nm-surface-soft);
  overflow: hidden;
  border: 0;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: outline 150ms ease;
}
.pdp-gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pdp-gallery-tile:hover {
  outline: 2px solid rgba(17, 17, 17, 0.15);
  outline-offset: -2px;
}
.pdp-gallery-tile.is-active {
  outline: 2px solid var(--nm-orange);
  outline-offset: -2px;
}

/* Gallery hero chevrons — white rounded-square buttons (32×32) with a
   soft shadow so they stand out against both light and dark product
   imagery. Only visible on mobile; desktop uses the 2-col tile grid. */
.pdp-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  background: #fff;
  border-radius: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(17, 17, 17, 0.15);
}
.pdp-gallery-nav img { width: 24px; height: 24px; display: block; }
.pdp-gallery-nav--prev { left: 8px; }
.pdp-gallery-nav--next { right: 8px; }
.pdp-gallery-nav:hover { background: #fafafa; }

/* Profile sidebar (Figma 34:24737) */
.profile-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.profile-sidebar__greeting {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #111;
  margin: 0 0 4px;
}
.profile-sidebar__greeting-name {
  color: var(--nm-orange);
}
.profile-sidebar__nav {
  background: rgba(228, 228, 228, 0.2);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}
.profile-sidebar__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  text-decoration: none;
  background: transparent;
  border: 0;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.profile-sidebar__link:hover { background: rgba(0, 0, 0, 0.03); color: #111; }
.profile-sidebar__link.is-active {
  background: #f4f4f4;
  font-weight: 700;
}
.profile-sidebar__link img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.profile-sidebar__link span { flex: 1 1 0; min-width: 0; }
.profile-sidebar__alert {
  width: 20px !important;
  height: 20px !important;
  margin-left: auto;
}
.profile-sidebar__chevron {
  width: 18px !important;
  height: 18px !important;
  margin-left: auto;
  opacity: 0.6;
}
.profile-sidebar__divider {
  border: 0;
  border-top: 1px solid rgba(17, 17, 17, 0.1);
  margin: 0;
}
.profile-sidebar__link--logout { color: #111; }

/* Profile info page (Figma 34:24682) */
.profile-page {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.profile-page__title {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #111;
  margin: 0;
}
.profile-page__divider {
  border: 0;
  border-top: 1px solid rgba(17, 17, 17, 0.1);
  margin: 0;
}

/* Verify-email banner — Figma 34:25058. Shown above the personal-info card
   when the user has no email on file. */
.profile-verify-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 16px;
  background: rgba(255, 243, 184, 0.2);
  border-radius: 8px;
}
.profile-verify-banner__icon {
  width: 35px;
  height: 35px;
  flex-shrink: 0;
}
.profile-verify-banner__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}
.profile-verify-banner__title {
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #111;
  margin: 0;
}
.profile-verify-banner__desc {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #7d7d7d;
  margin: 0;
  line-height: 1.4;
}
.profile-verify-banner__action {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #1d9974;
  text-decoration: underline;
  cursor: pointer;
}
.profile-verify-banner__action:hover { opacity: 0.85; }

.profile-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.profile-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 10px;
  background: rgba(228, 228, 228, 0.2);
  border-radius: 8px;
}
.profile-section__head-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.profile-section__icon {
  width: 35px;
  height: 35px;
  flex-shrink: 0;
}
.profile-section__title {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #111;
  text-transform: uppercase;
}
.profile-section__hint {
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #393838;
  text-align: right;
}
.profile-section__edit {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #2162a1;
  text-decoration: underline;
}
.profile-section__edit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.profile-section__edit-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.profile-section__bottom-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.profile-section__save {
  height: 33px;
  padding: 0 20px;
  border: 0;
  border-radius: 32px;
  background: var(--nm-orange);
  color: #fff;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.profile-section__save:hover { background: var(--nm-orange-hover); }
.profile-section__save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.profile-section__cancel {
  height: 33px;
  padding: 0 20px;
  border: 1px solid var(--nm-border);
  border-radius: 32px;
  background: #fff;
  color: #111;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.profile-section__cancel:hover { background: var(--nm-surface-soft); }
.profile-section__cancel:disabled { opacity: 0.6; cursor: not-allowed; }
.profile-section__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 10px;
}
.profile-section__body--security { gap: 20px; }

.profile-field-grid { display: grid; gap: 16px; }
.profile-field-grid--2 { grid-template-columns: 1fr 1fr; }
.profile-field-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.profile-field-grid--4 { grid-template-columns: repeat(4, 1fr); }
.profile-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-field__label {
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #111;
}
.profile-field__value {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--nm-border);
  border-radius: 8px;
  background: var(--nm-paper);
  margin: 0;
  display: flex;
  align-items: center;
}
.profile-field__input {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--nm-border);
  border-radius: 8px;
  background: #fff;
  width: 100%;
  outline: none;
}
.profile-field__input:focus {
  border-color: var(--nm-orange);
  box-shadow: 0 0 0 3px var(--nm-orange-tint);
}
.profile-field__input::placeholder { color: #b3b3b3; }
.profile-field__input:disabled {
  background: var(--nm-surface-soft, #f6f6f6);
  color: #7d7d7d;
  cursor: not-allowed;
}

.profile-address-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 8px;
}
.profile-address-row__id { flex: 1 1 0; min-width: 0; }
.profile-address-row__label {
  font-family: "Helvetica", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #111;
  margin: 0 0 2px;
}
.profile-address-row__label span {
  font-weight: 400;
  color: #7d7d7d;
  font-size: 12px;
}
.profile-address-row__detail {
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #111;
  margin: 0;
}
.profile-address-row__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.profile-address-row__edit {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #2162a1;
  text-decoration: underline;
  flex-shrink: 0;
}
.profile-address-row__trash {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.profile-address-row__trash img { width: 20px; height: 20px; }
.profile-address-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #1d9974;
  align-self: flex-start;
}
.profile-address-add__plus {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}

.profile-security-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 16px;
  border-radius: 8px;
  text-decoration: none;
  background: #fff;
  transition: background-color 150ms ease;
}
.profile-security-row:hover { background: var(--nm-surface-soft); }
.profile-security-row__icon {
  width: 35px;
  height: 35px;
  flex-shrink: 0;
}
.profile-security-row__id { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.profile-security-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.profile-security-row__title {
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #111;
  margin: 0;
}
.profile-security-row__chevron { width: 20px; height: 20px; opacity: 0.6; }
.profile-security-row__desc {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #7d7d7d;
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 991.98px) {
  .profile-field-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .profile-field-grid--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
  .profile-field-grid--2,
  .profile-field-grid--3,
  .profile-field-grid--4 { grid-template-columns: 1fr; }
}

/* Invoice list page (Figma 34:24102) */
.invoice-list-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.invoice-list-title {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #111;
  margin: 0;
}
.invoice-filters-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.invoice-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.invoice-filter {
  height: 40px;
  padding: 0 16px;
  background: #f6f6f6;
  border: 1.5px solid transparent;
  border-radius: 32px;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  line-height: 1;
  color: #111;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.invoice-filter:hover { background: rgba(228, 228, 228, 0.6); }
.invoice-filter.is-active {
  background: #f6f6f6;
  color: #111;
  border-color: #1d9974;
}
.invoice-filter--muted { color: #7d7d7d; }
.invoice-sort {
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #c4c4c4;
  border-radius: 32px;
  cursor: pointer;
}
.invoice-sort img { width: 20px; height: 20px; }
.invoice-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.invoice-card {
  border: 0;
  border-radius: 8px;
  padding: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.invoice-card + .invoice-card {
  border-top: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 0;
}
.invoice-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.invoice-card-id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.invoice-card-sub {
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #7d7d7d;
  line-height: 1.2;
}
.invoice-card-num {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #111;
  line-height: 1.2;
}
.invoice-card-id a {
  text-decoration: none;
}
.invoice-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.invoice-card-date {
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #7d7d7d;
}
.invoice-card-badge {
  font-family: "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 12px;
  padding: 8px 16px;
  border-radius: 32px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #111;
}
.invoice-card-badge::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.invoice-card-badge--green {
  background: rgba(176, 250, 177, 0.2);
}
.invoice-card-badge--green::before {
  background-image: url("/icons/checkCircleGreen.svg");
}
.invoice-card-badge--gray {
  background: rgba(228, 228, 228, 0.2);
}
.invoice-card-badge--gray::before {
  background-image: url("/icons/paymentPendingGray.svg");
}
.invoice-card-badge--red {
  background: rgba(250, 176, 176, 0.2);
}
.invoice-card-badge--red::before {
  background-image: url("/icons/timesCircleRed.svg");
}
.invoice-card-badge--orange {
  background: rgba(235, 126, 10, 0.12);
  color: var(--nm-orange);
}
.invoice-card-badge--orange::before {
  background-image: url("/icons/paymentPendingGray.svg");
}
.invoice-card-badge--blue {
  background: rgba(33, 98, 161, 0.10);
  color: #2162a1;
}
.invoice-card-badge--blue::before {
  background-image: url("/icons/checkCircleGreen.svg");
}
.invoice-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.invoice-card-pill {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 20px;
  color: #7d7d7d;
  text-transform: uppercase;
  padding: 5px 10px;
  background: rgba(228, 228, 228, 0.2);
  border-radius: 8px;
  margin: 0;
}
.invoice-card-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}
.invoice-card-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.invoice-card-thumb {
  width: 89px;
  height: 89px;
  background: var(--nm-surface-soft);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.invoice-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.invoice-card-more {
  width: 89px;
  height: 89px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(228, 228, 228, 0.6);
  border-radius: 8px;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 30px;
  color: #7d7d7d;
}
.invoice-card-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  text-align: right;
}
.invoice-card-total-label {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #111;
  margin: 0;
}
.invoice-card-total-label strong {
  color: #111;
  font-weight: 700;
  margin-left: 4px;
}
.invoice-card-deadline {
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #7d7d7d;
  text-align: right;
  line-height: 1.2;
  margin: 0;
}
.invoice-card-deadline strong {
  display: block;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #111;
}
.invoice-card-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.invoice-card-actions-buttons {
  display: flex;
  gap: 8px;
}
.invoice-card-cta {
  height: 33px;
  padding: 4px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 32px;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.invoice-card-cta--primary { background: var(--nm-orange); color: #fff; }
.invoice-card-cta--primary:hover { background: var(--nm-orange-hover); color: #fff; }
.invoice-card-cta--outline {
  background: #fff;
  color: #111;
  border: 1px solid #393838;
}
.invoice-card-cta--outline:hover { background: var(--nm-surface-soft); color: #111; }

@media (max-width: 575.98px) {
  .invoice-card-body { grid-template-columns: 1fr; }
  .invoice-card-summary { align-items: flex-start; text-align: left; }
  .invoice-card-thumb,
  .invoice-card-more { width: 72px; height: 72px; }
  .invoice-card-actions { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Orders list + profile mobile (≤767) */
@media (max-width: 767.98px) {
  .invoice-list-title { font-size: 20px; }
  /* Sort ("order") button sits above a single-row, horizontally-scrollable tab
     carousel instead of the tabs wrapping onto two rows. */
  .invoice-filters-row {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
  }
  /* min-width: 0 is what lets the nowrap track actually scroll — without it the
     flex item grows to its content width, overflowing the row (so the tabs
     can't scroll AND the sort button gets pushed off-screen to the right). */
  .invoice-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
  }
  .invoice-filters::-webkit-scrollbar { display: none; }
  .invoice-filter {
    flex-shrink: 0;
    height: 36px;
    padding: 0 14px;
    font-size: 14px;
  }
  .invoice-sort { align-self: flex-end; }
  .invoice-card-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .invoice-card-meta { width: 100%; justify-content: space-between; }
  .invoice-card-id { gap: 2px; }
  .invoice-card-num { font-size: 14px; }
  .invoice-card-date { font-size: 11px; }
  .invoice-card-badge { font-size: 11px; padding: 6px 10px; }
  .invoice-card-thumb,
  .invoice-card-more { width: 60px; height: 60px; }
  .invoice-card-more { font-size: 20px; }
  /* Profile page tighter */
  .profile-page__title { font-size: 18px; }
  .profile-section { gap: 12px; }
  .profile-section__header { gap: 8px; }
  .profile-section__title { font-size: 13px; }
  .profile-sidebar__greeting { font-size: 16px; }
  .profile-sidebar__link { padding: 10px 8px; font-size: 13px; }
  /* Verify-email banner stacks icon + text */
  .profile-verify-banner { gap: 12px; padding: 10px 12px; }
  .profile-verify-banner__icon { width: 28px; height: 28px; }
  .profile-verify-banner__title { font-size: 14px; }
  .profile-verify-banner__desc { font-size: 12px; }
  .profile-verify-banner__action { font-size: 12px; }
  /* Edit profile bottom action buttons stay right-aligned but smaller */
  .profile-section__bottom-actions { flex-wrap: wrap; }
}

/* Invoice detail page (Figma 125:11211) */
.invoice-detail-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Compact PENDING / paid status pill — Figma 125:11240 / 34:20689 */
.invoice-status-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 10px;
  background: rgba(228, 228, 228, 0.2);
  border-radius: 8px;
  width: 100%;
}
/* Tone variants — paid orders flip the pill to soft green. The compact pill
   inherits the success tone via the wrapper that adds .invoice-status-pill
   to the OrderStatusBanner output; we tag the same element with a tone
   class so the bg can switch without duplicating layout rules. */
.invoice-status-pill[data-tone="success"] {
  background: rgba(176, 250, 177, 0.2);
}
.invoice-status-pill[data-tone="cancelled"] {
  background: rgba(250, 176, 176, 0.2);
}
.invoice-status-pill__icon {
  width: 35px;
  height: 35px;
  flex-shrink: 0;
}
.invoice-status-pill__title {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #111;
  margin: 0;
}
.invoice-order-number {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #111;
  margin: 0;
}
.invoice-summary-grid {
  display: grid;
  /* Figma 125:11211 — payment+address column ~512px, summary ~780px,
     ratio ≈ 35/65 with a 40px gap. */
  grid-template-columns: minmax(0, 512fr) minmax(0, 780fr);
  gap: 40px;
  align-items: start;
}
.invoice-summary-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.invoice-summary-card {
  background: rgba(228, 228, 228, 0.2);
  border: 0;
  border-radius: 12px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Actionable state (PENDING) — Figma 125:11250 shows white card with a
   thin grey stroke. Switches back to the borderless grey treatment for
   paid/shipped/delivered. */
.invoice-detail-page.is-pending .invoice-summary-card,
.invoice-detail-page.is-pending .invoice-address-card {
  background: #fff;
  border: 1px solid var(--default-stroke, #c4c4c4);
}
.invoice-card-title {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  color: #111;
  margin: 0;
}
.invoice-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
}
.invoice-summary-row .label { color: #7d7d7d; }
.invoice-summary-row .value { color: #111; font-variant-numeric: tabular-nums; }
.invoice-countdown {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #111;
  letter-spacing: 0.04em;
}
.invoice-method {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: #111;
}
.invoice-method-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1976d2;
}
.invoice-method-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
}
.invoice-method-trigger:hover { opacity: 0.85; }
.invoice-method-logo {
  width: 32px;
  height: 21px;
  border: 1px solid var(--nm-border);
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
}
.invoice-method-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.invoice-method-label {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 13px;
}
.invoice-method-chevron { width: 12px; height: 12px; opacity: 0.7; }

/* Read-only state (paid+) — Figma 34:20700 */
.invoice-method-readonly {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
}
.invoice-method-mask {
  color: #7d7d7d;
  font-variant-numeric: tabular-nums;
}
.invoice-link-row {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #1d9974;
  text-decoration: underline;
  text-align: left;
  align-self: flex-start;
}
.invoice-link-row:hover { opacity: 0.85; }
.invoice-link-row--dark { color: #111; }
.invoice-cancel-reason {
  text-align: right;
  max-width: 60%;
}

/* Placeholder marketing/lookbook banner shown above the product grid
   on every shop page. BACKEND_TODO: replace with the real shop hero/
   lookbook image once the API exposes it. The visible pattern hints
   that something is meant to live here without claiming to be content. */
/* Shop detail hero — holds the shop banner when one exists, otherwise a
   SafeImage placeholder fills the same box. Sizing only; the visual comes
   from SafeImage (placeholder) or the banner image itself. */
.shop-detail__hero-placeholder {
  width: 100%;
  aspect-ratio: 1332 / 361;
  max-height: 361px;
  border-radius: 12px;
  overflow: hidden;
}

/* Shop detail toolbar — three pill buttons to the right of the product
   count title (Figma reference). Lightweight gray pills with leading icon
   and optional trailing chevron for the sort dropdown. */
.shop-toolbar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.shop-toolbar__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  background: #f6f6f6;
  border: 0;
  border-radius: 32px;
  cursor: pointer;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  white-space: nowrap;
}
.shop-toolbar__pill:hover { background: rgba(228, 228, 228, 0.6); }
.shop-toolbar__pill-icon { width: 20px; height: 20px; }
.shop-toolbar__pill-chevron { width: 12px; height: 12px; opacity: 0.7; }
.shop-toolbar__pill--sort { padding-right: 12px; }

/* Product-list toolbar — used on /sale (and any listing page that
   wants the full mobile design from Figma). Mobile layout stacks:
   row 1 = filter + sort half-and-half, row 2 = full-width brand pill,
   row 3 = full-width shop pill, then the count row, then a horizontal
   row of removable filter chips. Desktop collapses to a horizontal row
   of pills like the shop-toolbar pattern. */
.list-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
  width: 100%;
}
.list-toolbar__row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.list-toolbar__sort { flex: 1 1 0; }
.list-toolbar__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  background: #f6f6f6;
  border: 0;
  border-radius: 32px;
  cursor: pointer;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  white-space: nowrap;
  text-decoration: none;
}
.list-toolbar__pill:hover { background: rgba(228, 228, 228, 0.6); color: #111; }
.list-toolbar__pill-icon { width: 20px; height: 20px; flex-shrink: 0; }
.list-toolbar__pill-chevron { width: 12px; height: 12px; opacity: 0.7; }
.list-toolbar__pill--sort { padding-right: 14px; width: 100%; }
.list-toolbar__pill--block { width: 100%; }
.list-toolbar__row > .list-toolbar__pill,
.list-toolbar__row > .list-toolbar__sort {
  flex: 1 1 0;
}

/* Count row — product total + an optional active spec label */
.list-toolbar__count-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.list-toolbar__count {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #111;
}

/* Active filter chip row — horizontal scroll on narrow screens. */
.list-toolbar__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.list-toolbar__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #c4c4c4;
  border-radius: 32px;
  cursor: pointer;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #111;
}
.list-toolbar__chip:hover { background: var(--nm-surface-soft); }
.list-toolbar__chip img { width: 20px; height: 20px; }

/* Desktop — collapse the stack into a single horizontal row of pills.
   Natural left-to-right order matches the JSX (Filter, Sort, Brand). */
@media (min-width: 768px) {
  .list-toolbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }
  .list-toolbar__row { gap: 12px; }
  .list-toolbar__pill { padding: 0 20px; }
  .list-toolbar__pill--block,
  .list-toolbar__pill--sort {
    width: auto;
  }
  .list-toolbar__sort { flex: 0 0 auto; }
  .list-toolbar__row > .list-toolbar__pill,
  .list-toolbar__row > .list-toolbar__sort {
    flex: 0 0 auto;
  }
}

/* Shop detail mobile — toolbar pills wrap full-width, hero placeholder
   keeps aspect ratio but shrinks, brand drawer grid stays 3 cols inside
   the 344px drawer width (no change needed). */
@media (max-width: 767.98px) {
  .shop-detail__hero-placeholder {
    border-radius: 8px;
  }
  .shop-toolbar {
    width: 100%;
    gap: 8px;
  }
  .shop-toolbar__pill {
    flex: 1 1 auto;
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
    justify-content: center;
  }
  .shop-toolbar__pill-icon { width: 18px; height: 18px; }
}

/* Brands drawer — Figma 34:4404 */
.brands-drawer__header {
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  padding: 20px 15px;
}
.brands-drawer__head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.brands-drawer__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-start;
}
.brands-drawer__chip {
  height: 40px;
  padding: 0 16px;
  background: #f6f6f6;
  border: 1.5px solid transparent;
  border-radius: 32px;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  line-height: 1;
  color: #111;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.brands-drawer__chip.is-active { border-color: #1d9974; }
.brands-drawer__body {
  padding-top: 0;
  gap: 14px;
}
.brands-drawer__search {
  position: relative;
  display: flex;
  align-items: center;
  height: 48px;
  border: 1px solid #393838;
  border-radius: 32px;
  padding: 4px 8px 4px 18px;
}
.brands-drawer__search-input {
  flex: 1 1 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
}
.brands-drawer__search-input::placeholder { color: #7d7d7d; }
.brands-drawer__search-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--nm-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brands-drawer__search-btn img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}
.brands-drawer__count {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  margin: 0;
}
.brands-drawer__grid {
  display: grid;
  /* minmax(0, 1fr) — not bare 1fr — so the square aspect-ratio boxes can't
     blow out the column widths; columns stay perfectly equal. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  /* Top-align tiles so a 2-line brand name never stretches its row and
     squashes the square logo box (Figma 34:4404 — uniform tiles). */
  align-items: start;
}
.brands-drawer__tile {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-decoration: none;
  color: inherit;
  /* Reset native <button> chrome — the 2px outset border + button-face
     background were drawing a boxed border around every tile. */
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}
.brands-drawer__tile:focus-visible {
  outline: 2px solid var(--nm-orange, #eb7e0a);
  outline-offset: 2px;
  border-radius: 8px;
}
.brands-drawer__logo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  background: #f0f0f0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.brands-drawer__logo img {
  max-width: 72%;
  max-height: 58%;
  object-fit: contain;
  /* No grayscale filter — show the brand's black logo if uploaded, else the
     main colored logo in its real colors (handled in BrandsDrawer.tsx). */
}
.brands-drawer__logo-fallback {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #7d7d7d;
}
.brands-drawer__check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid #c4c4c4;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brands-drawer__check.is-on {
  background: #1d9974;
  border-color: #1d9974;
}
.brands-drawer__check img { width: 12px; height: 12px; }
.brands-drawer__name {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  text-align: center;
}
.brands-drawer__footer {
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}
.brands-drawer__total {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #7d7d7d;
  margin: 0;
}
.brands-drawer__actions {
  display: flex;
  gap: 15px;
  align-items: center;
}
.brands-drawer__cta {
  flex: 1 1 0;
  height: 33px;
  padding: 4px 16px;
  border-radius: 32px;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.brands-drawer__cta--ghost {
  background: #fff;
  color: #111;
  border: 1px solid #111;
}
.brands-drawer__cta--ghost:hover { background: var(--nm-surface-soft); }
.brands-drawer__cta--primary {
  background: var(--nm-orange);
  color: #fff;
  border: 0;
}
.brands-drawer__cta--primary:hover { background: var(--nm-orange-hover); }

/* Filters drawer — Figma 34:5112 */
.filters-drawer__body {
  gap: 14px;
}
.filters-drawer__group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #f4f4f4;
}
.filters-drawer__group:last-child { border-bottom: 0; }
.filters-drawer__group-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 100%;
}
.filters-drawer__group-title {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #111;
}
.filters-drawer__group-chevron {
  width: 20px;
  height: 20px;
  transition: transform 150ms ease;
}
.filters-drawer__group-chevron.is-collapsed { transform: rotate(-90deg); }
.filters-drawer__group-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.filters-drawer__row {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}
.filters-drawer__check {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #1d9974;
  flex-shrink: 0;
}
.filters-drawer__color-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}
.filters-drawer__row-label {
  font-family: "Helvetica", sans-serif;
  font-size: 16px;
  color: #111;
}
.invoice-loan-link {
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #1d9974;
  text-decoration: underline;
  align-self: flex-start;
}
.invoice-cancel-link {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #2162a1;
  text-decoration: underline;
  align-self: flex-start;
}
.invoice-cancel-link:hover { opacity: 0.85; }
.invoice-summary-row--top { align-items: flex-start; }
.invoice-address-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 2px;
}
.invoice-address-label {
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #111;
}
.invoice-actions {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  align-items: center;
}
.invoice-cta {
  height: 33px;
  padding: 4px 16px;
  border-radius: 32px;
  border: 0;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.invoice-cta--primary { background: var(--nm-orange); color: #fff; }
.invoice-cta--primary:hover { background: var(--nm-orange-hover); }
.invoice-cta--outline {
  background: #fff;
  color: #111;
  border: 1px solid #111;
}
.invoice-divider {
  border: 0;
  border-top: 1px solid rgba(17, 17, 17, 0.1);
  margin: 0;
}
.invoice-total strong:last-child {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.invoice-address-card {
  background: rgba(228, 228, 228, 0.2);
  border: 0;
  border-radius: 12px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* BOPIS pickup card — rendered when usePickupCodes() returns any
   STORE_PICKUP shipment that has reached READY_FOR_PICKUP. The 6-digit
   code is the load-bearing element so it gets the largest type. */
.invoice-pickup-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.invoice-pickup-card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff4d6 0%, #ffe6a3 100%);
  border: 1px solid #f2c94c;
}
.invoice-pickup-card__body {
  flex: 1 1 auto;
  min-width: 0;
}
.invoice-pickup-card__title {
  margin: 0 0 4px;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #111;
}
.invoice-pickup-card__hint {
  margin: 0 0 12px;
  font-family: "Helvetica", sans-serif;
  font-size: 13px;
  color: #5c4a00;
}
.invoice-pickup-card__location {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: "Helvetica", sans-serif;
  font-size: 13px;
  color: #111;
}
.invoice-pickup-card__location-name {
  margin: 0;
  font-weight: 700;
}
.invoice-pickup-card__location-address,
.invoice-pickup-card__location-phone {
  margin: 0;
  color: #5c4a00;
}
.invoice-pickup-card__location-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.invoice-pickup-card__code {
  flex: 0 0 auto;
  font-family: "SF Mono", "Menlo", "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 36px;
  letter-spacing: 0.12em;
  color: #111;
  background: #fff;
  padding: 14px 20px;
  border-radius: 10px;
  border: 1px dashed #b88800;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .invoice-pickup-card {
    flex-direction: column;
    align-items: stretch;
  }
  .invoice-pickup-card__code {
    text-align: center;
    font-size: 32px;
  }
}
.invoice-group {
  border: 0;
  border-radius: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.invoice-group-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 5px 10px;
  background: rgba(228, 228, 228, 0.2);
  border-radius: 8px;
  align-self: flex-start;
  min-width: 100%;
}
.invoice-group-header img { width: 35px; height: 35px; }
.invoice-group-title {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  color: #111;
}
.invoice-group-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.invoice-item-row {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 8px 0;
  border-top: 0;
}
.invoice-item-row + .invoice-item-row {
  border-top: 1px solid rgba(17, 17, 17, 0.06);
}
.invoice-item-img {
  width: 90px;
  height: 90px;
  border-radius: 4px;
  background: var(--nm-surface-soft);
  object-fit: cover;
  flex-shrink: 0;
}
.invoice-item-id {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 16px;
}
.invoice-item-name {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  text-decoration: underline;
  margin: 0;
}
.invoice-item-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
}
.invoice-item-vendor {
  color: #1d9974;
  text-decoration: underline;
}
.invoice-item-sku {
  color: #7d7d7d;
}
.invoice-item-qty {
  color: #111;
}
.invoice-item-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.invoice-item-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #111;
}
.invoice-item-pill__label {
  color: #111;
}
.invoice-item-pill__value {
  color: #111;
}
.invoice-item-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.15);
}

/* "Бүх захиалга харах" link beside the order number — Figma 34:20697 */
.invoice-order-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.invoice-orders-link {
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #1d9974;
  text-decoration: underline;
}
.invoice-orders-link:hover { color: #157a5d; }

/* 4-step delivery tracker — Figma 34:20910 */
.order-tracker {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}
.order-tracker__info {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
}
.order-tracker__eta {
  font-weight: 700;
  font-size: 14px;
  color: #1d9974;
  text-transform: uppercase;
}
.order-tracker__code {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 14px;
  color: #111;
}
.order-tracker__code-label { color: #111; }
.order-tracker__code-value {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #111;
}
.order-tracker__steps {
  display: flex;
  align-items: center;
  width: 100%;
  /* Inset the row so the first and last labels (~150px wide, centered
     under the end dots) stay inside the tracker container. Bars get
     shorter; that's intentional — matches Figma 34:20912. */
  padding-left: 75px;
  padding-right: 75px;
}
.order-tracker__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.order-tracker__dot {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}
.order-tracker__label {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  font-size: 12px;
  color: #111;
  text-align: center;
}
.order-tracker__bar {
  flex: 1 1 0;
  height: 5px;
  background: #d2d2d2;
  border-radius: 4px;
}
.order-tracker__bar.is-complete { background: var(--nm-orange); }
/* Reserve room for the labels below the bar. */
.order-tracker__steps { padding-bottom: 28px; }

/* Pickup-only store address row — Figma 34:20720. Sits inside the
   .order-tracker container in place of the step bar so vertical
   rhythm matches the delivery groups. */
.invoice-pickup-store {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 2px 0;
}
.invoice-pickup-store__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}
.invoice-pickup-store__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  font-size: 13px;
  color: #111;
}
.invoice-pickup-store__name { font-weight: 700; }
.invoice-pickup-store__addr { color: #7d7d7d; font-size: 12px; }
.invoice-item-price {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #111;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.invoice-item-price-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}
.invoice-item-price-original {
  font-family: "Helvetica", sans-serif;
  font-size: 13px;
  color: #7d7d7d;
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 991.98px) {
  .invoice-summary-grid { grid-template-columns: 1fr; }
}

/* Order detail mobile — Figma 125:11211 / 34:20643 reflow */
@media (max-width: 767.98px) {
  /* Looser grid gap, single column */
  .invoice-summary-grid { gap: 20px; }
  /* Title chunks down so it fits two lines max */
  .invoice-status-pill {
    padding: 12px 10px;
  }
  .invoice-status-pill__title { font-size: 18px; line-height: 1.2; }
  .invoice-status-pill__icon { width: 28px; height: 28px; }
  .invoice-order-row { gap: 8px; }
  .invoice-order-number { font-size: 16px; }
  .invoice-orders-link { font-size: 12px; }
  /* Address card top-row collapses (label above value, both left aligned) */
  .invoice-summary-row { flex-wrap: wrap; }
  .invoice-summary-row--top { flex-direction: column; align-items: flex-start; gap: 4px; }
  .invoice-address-value { align-items: flex-start; text-align: left; max-width: 100%; }
  /* Tracker — labels too wide on phones; shrink padding and font, allow text to wrap. */
  .order-tracker__steps { padding-left: 20px; padding-right: 20px; }
  .order-tracker__label {
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    width: 64px;
    white-space: normal;
  }
  .order-tracker__info { gap: 10px; }
  .order-tracker__eta { font-size: 12px; }
  .order-tracker__code { font-size: 12px; }
  .order-tracker__code-value { font-size: 14px; }
  /* Item rows — image stays inline, content + price wrap underneath */
  .invoice-item-row {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0;
  }
  .invoice-item-img { width: 72px; height: 72px; }
  .invoice-item-id {
    flex: 1 1 calc(100% - 84px);
    min-width: 0;
    padding: 0;
  }
  .invoice-item-price {
    font-size: 16px;
    width: 100%;
    text-align: right;
  }
  .invoice-item-price-block {
    width: 100%;
    align-items: flex-end;
  }
  .invoice-item-name { font-size: 13px; }
  .invoice-item-meta-row { gap: 8px; font-size: 11px; }
  .invoice-item-pills { gap: 10px; }
  .invoice-item-pill { font-size: 11px; }
  /* Group header pill fits screen */
  .invoice-group-header { padding: 8px 12px; gap: 10px; }
  .invoice-group-header img { width: 28px; height: 28px; }
  .invoice-group-title { font-size: 12px; }
  /* Payment + summary card buttons */
  .invoice-actions { flex-wrap: wrap; gap: 8px; }
  .invoice-cta { flex: 1 1 auto; min-width: 0; }
  /* Method trigger row (Төлбөрийн хэрэгсэл) */
  .invoice-method-trigger { flex-shrink: 0; }
}

/* Custom <NMSelect> dropdown — replaces native <select> for consistent
   visuals across browsers. Closed trigger reads like an input; open menu
   is a styled floating list. */
.nm-select {
  position: relative;
  width: 100%;
}
.nm-select__trigger {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--nm-paper);
  border: 1px solid var(--nm-border);
  border-radius: 8px;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  cursor: pointer;
  transition: border-color 150ms ease;
}
.nm-select__trigger:hover { border-color: rgba(17, 17, 17, 0.35); }
.nm-select__trigger:focus-visible {
  outline: 2px solid var(--nm-orange-tint);
  outline-offset: 1px;
}
.nm-select.is-open .nm-select__trigger { border-color: #111; }
.nm-select.is-disabled .nm-select__trigger {
  background: var(--nm-surface-soft);
  cursor: not-allowed;
  color: #7d7d7d;
}
.nm-select__value {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.nm-select__value.is-placeholder { color: #7d7d7d; }
.nm-select__chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 200ms ease;
}
.nm-select.is-open .nm-select__chevron { transform: rotate(180deg); }
.nm-select__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(17, 17, 17, 0.08);
  padding: 4px;
  margin: 0;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.nm-select__option {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 10px 12px;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  cursor: pointer;
  border-radius: 4px;
  text-align: left;
  display: block;
}
.nm-select__option:hover { background: var(--nm-surface-soft); }
.nm-select__option.is-active {
  background: rgba(29, 153, 116, 0.08);
  color: #1d9974;
  font-weight: 700;
}

/* Custom radio matching Figma "Single Check" — used across checkout flows.
   Replaces the default browser dot with a green checkmark inside the
   filled green circle, so radios read consistently with the green check
   already used on PDP service rows / cart line services. */
.nm-radio,
.delivery-info-page input[type="radio"],
.delivery-page input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #c4c4c4;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.nm-radio:checked,
.delivery-info-page input[type="radio"]:checked,
.delivery-page input[type="radio"]:checked {
  border-color: #1d9974;
  background: #1d9974 url("/icons/checkSmallWhite.svg") center / 10px 10px no-repeat;
}
.nm-radio:disabled,
.delivery-info-page input[type="radio"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Same for checkboxes — square version */
.nm-checkbox,
.delivery-info-page input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #c4c4c4;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.nm-checkbox:checked,
.delivery-info-page input[type="checkbox"]:checked {
  border-color: #1d9974;
  background: #1d9974 url("/icons/checkSmallWhite.svg") center / 12px 12px no-repeat;
}

/* Delivery info page (Figma 45:11261) */
.delivery-info-page { padding: 16px 0 60px; }
.delivery-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 324px;
  gap: 12px;
}
.delivery-info-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.delivery-info-title {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: #111;
  text-transform: uppercase;
  margin: 0;
}
.delivery-info-divider {
  border: 0;
  border-top: 1px solid rgba(17, 17, 17, 0.1);
  margin: 0;
  width: 100%;
}

.info-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  width: 100%;
  gap: 16px;
  background: rgba(228, 228, 228, 0.2);
  border-radius: 8px;
}
.info-section-header-left {
  display: flex;
  gap: 14px;
  align-items: center;
}
.info-section-badge {
  width: 35px;
  height: 35px;
  flex-shrink: 0;
}
.info-section-title {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: #111;
  text-transform: uppercase;
}
.info-section-hint {
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #393838;
  text-align: right;
}

.address-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}
.address-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color 150ms ease;
}
.address-row:hover { background: var(--nm-surface-soft); }
.address-row.is-picked {
  border-color: #1d9974;
  background: rgba(29, 153, 116, 0.04);
}
.address-row input {
  width: 16px;
  height: 16px;
  margin: 4px 0 0;
  accent-color: #1d9974;
  flex-shrink: 0;
}
.address-row-id {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.address-row-name {
  font-family: "Helvetica", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #111;
  margin: 0;
}
.address-row-name span { font-weight: 400; color: #7d7d7d; font-size: 12px; }
.address-row-addr {
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #111;
  margin: 0;
}
.address-row-note-link {
  align-self: flex-start;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #1d9974;
  text-decoration: underline;
}
.address-row-edit {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #1d9974;
  text-decoration: underline;
  flex-shrink: 0;
}
.address-row-trash {
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.address-row-trash img { width: 16px; height: 16px; }

/* New-address form */
.new-address-card {
  background: var(--nm-paper);
  border: 1px solid rgba(17, 17, 17, 0.05);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.new-address-title {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #111;
  margin: 0;
}
.address-map {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.address-map-hint {
  margin: 0;
  font-size: 13px;
  color: var(--nm-ink-dim);
}
.address-map-frame {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--nm-border);
  /* Contain the map's internal z-indexes so its controls don't slide above
     the sticky site header on scroll. */
  isolation: isolate;
  z-index: 0;
}
/* Map disabled (no API key configured) — a soft notice in place of the map. */
.address-map-frame--disabled {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background: var(--nm-surface-soft);
}
.address-map-frame--disabled .address-map-hint {
  font-size: 13px;
}
.address-map-loading {
  width: 100%;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nm-surface-soft);
  color: var(--nm-ink-dim);
  font-size: 14px;
}
.address-map-status { margin-top: 4px; }

.new-address-labels {
  /* Three evenly-divided columns aligned with the Хот/Дүүрэг/Хороо fields
     below (Figma 125:13006). Гэр, Ажил, then Бусад+Бичих share the 3rd. */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: center;
}
.new-address-label-other {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.new-address-label-other .new-address-label-opt {
  flex-shrink: 0;
}
/* Radio option: a circle that fills green with a white check when selected,
   plus a plain text label (Figma 125:13006). */
.new-address-label-opt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-width: 0;
}
.new-address-label-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.new-address-radio {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--nm-border);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, border-color 150ms ease;
}
.new-address-label-opt:hover .new-address-radio {
  border-color: #1d9974;
}
.new-address-label-opt:has(input:checked) .new-address-radio {
  background: #1d9974;
  border-color: #1d9974;
}
.new-address-label-opt:has(input:checked) .new-address-radio::after {
  content: "";
  width: 11px;
  height: 11px;
  background: url("/icons/checkSmallWhite.svg") center / contain no-repeat;
}
.new-address-label-text {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
}
/* The "Бичих" free-text input is always visible and sits to the right. */
.new-address-other-input {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--nm-border);
  border-radius: 8px;
  font-size: 14px;
  /* Fills the rest of the Бусад column, after the radio. */
  flex: 1 1 auto;
  min-width: 0;
}

.new-address-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.new-address-row:has(.new-address-field:nth-child(4)) {
  grid-template-columns: repeat(4, 1fr);
}
.new-address-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: "Helvetica", sans-serif;
}
.new-address-field span {
  font-size: 12px;
  font-weight: 500;
  color: #111;
}
.new-address-field--block { grid-column: 1 / -1; }
.new-address-field input,
.new-address-field select,
.new-address-field textarea {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--nm-border);
  border-radius: 8px;
  background: var(--nm-paper);
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  width: 100%;
}
.new-address-field textarea {
  height: auto;
  padding: 8px 12px;
  resize: vertical;
}
.new-address-field.is-invalid input,
.new-address-field.is-invalid select,
.new-address-field.is-invalid textarea,
.new-address-field.is-invalid .nm-select__trigger {
  border-color: #cc2121;
}
.new-address-field .new-address-error {
  font-size: 12px;
  font-weight: 400;
  color: #cc2121;
  margin-top: 2px;
}
.new-address-field input:focus,
.new-address-field select:focus,
.new-address-field textarea:focus {
  outline: none;
  border-color: #111;
}
.new-address-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
}
.new-address-checkbox input { accent-color: var(--nm-orange); }
.new-address-divider {
  border: 0;
  border-top: 1px solid rgba(17, 17, 17, 0.1);
  margin: 0;
}
.new-address-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.new-address-cancel,
.new-address-save {
  height: 33px;
  padding: 4px 16px;
  border-radius: 32px;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  border: 0;
}
.new-address-cancel {
  background: transparent;
  color: #111;
  border: 1px solid var(--nm-border);
}
.new-address-cancel:hover { background: var(--nm-surface-soft); }
.new-address-save {
  background: var(--nm-orange);
  color: #fff;
}
.new-address-save:hover { background: var(--nm-orange-hover); }
.new-address-save:disabled { background: rgba(235, 126, 10, 0.4); cursor: not-allowed; }

/* Add-new-address trigger (Figma 45:11314 — green "+ Шинэ хаяг нэмэх" link) */
.address-add-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 0;
  background: transparent;
  border: 0;
  color: #1d9974;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
}
.address-add-trigger span[aria-hidden] {
  font-size: 18px;
  line-height: 1;
}
.address-add-trigger:hover { text-decoration: underline; }

/* Add-new-address modal (Figma 323:8372) */
.address-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.address-modal {
  width: 100%;
  max-width: 997px;
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.address-modal .new-address-card {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

.netpay-banner-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  margin-top: 8px;
}

.payment-section-title {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #111;
  margin: 16px 0 0;
}
.payment-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(228, 228, 228, 0.2);
  border-radius: 8px;
  padding: 10px;
}
.payment-group-title {
  font-family: "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #111;
  margin: 0;
}
.payment-options-row {
  display: flex;
  gap: 8px;
}
.payment-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  flex: 1 1 0;
  min-width: 0;
  transition: background-color 150ms ease;
}
.payment-option:hover { background: rgba(255, 255, 255, 0.6); }
.payment-option.is-picked { background: rgba(255, 255, 255, 0.8); }
.payment-option input {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: #1d9974;
}
.payment-option-logo {
  width: 35px;
  height: 35px;
  background: var(--nm-surface-soft);
  border-radius: 6px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.payment-option-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}
.payment-option-logo--card {
  width: 56px;
  background: #fff;
  border: 1px solid #c4c4c4;
  border-radius: 2.333px;
}
.payment-option-logo--card img { padding: 6px 8px; }
.payment-option-label {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
}

.ereceipt-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ereceipt-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ereceipt-head img { width: 35px; height: 35px; border-radius: 5.833px; object-fit: cover; }
.ereceipt-title {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  color: #111;
}
.ereceipt-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ereceipt-option {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 8px;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
}
.ereceipt-option input { accent-color: var(--nm-orange); }
.ereceipt-org-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 991.98px) {
  .delivery-info-grid { grid-template-columns: 1fr; }
  .new-address-row,
  .new-address-row:has(.new-address-field:nth-child(4)),
  .payment-options-row,
  .ereceipt-org-row,
  .netpay-banner {
    grid-template-columns: 1fr;
  }
}

/* Delivery-info mobile (≤767) — sticky summary drops below, address-list
   rows wrap their edit/trash actions, label pills wrap, footer stacks. */
@media (max-width: 767.98px) {
  .delivery-info-title { font-size: 20px; }
  .delivery-info-page { padding: 12px 0 40px; }
  .info-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .info-section-hint { font-size: 11px; }
  /* Address list rows: edit + trash drop below the address text */
  .address-row { flex-wrap: wrap; gap: 12px; }
  .address-row > .d-flex { width: 100%; justify-content: flex-end; }
  /* New-address card — tighter padding + always single column form */
  .new-address-card { padding: 16px; gap: 16px; }
  .new-address-title { font-size: 14px; }
  /* On phones the 3-up grid is too tight: Гэр + Ажил sit inline and the
     Бусад option + Бичих input take their own full-width row. */
  .new-address-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: center;
  }
  .new-address-label-other {
    flex: 1 1 100%;
  }
  .new-address-label-other .new-address-other-input {
    flex: 1 1 140px;
  }
  .new-address-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .new-address-save,
  .new-address-cancel { width: 100%; }
  /* E-receipt radios — wrap if many */
  .ereceipt-options { flex-wrap: wrap; gap: 12px; }
  .ereceipt-option { flex: 0 0 auto; }
  /* Payment option label can shrink */
  .payment-option { padding: 12px; gap: 10px; }
  .payment-option-label { font-size: 13px; }
}

/* Delivery method page (Figma 45:11794) */
.delivery-page { padding: 16px 0 60px; }
.delivery-page .delivery-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 324px;
  gap: 12px;
  align-items: start;
}
.delivery-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.delivery-title {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: #111;
  margin: 0;
}
.delivery-divider {
  border: 0;
  border-top: 1px solid rgba(17, 17, 17, 0.1);
  margin: 0;
  width: 100%;
}
.delivery-vendors-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  width: 100%;
  gap: 16px;
  background: rgba(228, 228, 228, 0.2);
  border-radius: 8px;
}
.delivery-vendors-header-left {
  display: flex;
  gap: 14px;
  align-items: center;
}
.delivery-vendors-badge {
  width: 35px;
  height: 35px;
  flex-shrink: 0;
  display: block;
}
.delivery-vendors-title {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: #111;
  text-transform: uppercase;
}
.delivery-vendors-hint {
  font-family: "Helvetica", sans-serif;
  font-style: italic;
  font-size: 12px;
  color: #393838;
  text-align: right;
}

.delivery-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.delivery-card {
  border: 0;
  border-radius: 16px;
  background: rgba(228, 228, 228, 0.2);
  overflow: hidden;
  width: 100%;
}
.delivery-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.delivery-card-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--nm-surface-soft);
  object-fit: cover;
  flex-shrink: 0;
}
.delivery-card-id {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.delivery-card-name {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: #111;
  margin: 0;
}
.delivery-card-sub {
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #7d7d7d;
  margin: 0;
}
.delivery-card-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 200ms ease;
}
.delivery-card.is-open .delivery-card-chevron { transform: rotate(180deg); }
.delivery-card-divider {
  border: 0;
  border-top: 1px solid rgba(17, 17, 17, 0.1);
  margin: 0 20px;
  width: auto;
}
.delivery-card-body {
  display: grid;
  /* minmax(0, 1fr) (not bare 1fr = minmax(auto, 1fr)) so a long product name
     in the listings column can't blow out its track and shrink the options
     column — keeps the shipment options an even, consistent width. */
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: 0;
  padding: 0 20px 20px;
}
.delivery-card-vsep {
  background: rgba(17, 17, 17, 0.1);
}
.delivery-stores {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 16px 16px 0;
}
.delivery-store-row {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 4px 8px;
}
.delivery-store-img {
  width: 49px;
  height: 49px;
  border-radius: 4px;
  background: var(--nm-surface-soft);
  object-fit: contain;
  flex-shrink: 0;
}
.delivery-store-id {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.delivery-store-name {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  line-height: 1;
  color: #111;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.delivery-store-price {
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #7d7d7d;
  margin: 0;
}

.delivery-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0 16px 16px;
  border: 0;
  margin: 0;
  min-width: 0;
}
.delivery-option-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.delivery-option-row:hover { background: var(--nm-surface-soft); }
.delivery-option-row.is-picked {
  border-color: #1d9974;
  background: rgba(29, 153, 116, 0.06);
}
.delivery-option-radio {
  width: 16px;
  height: 16px;
  accent-color: #1d9974;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}
.delivery-option-id {
  flex: 1 1 0;
  min-width: 0;
}
.delivery-option-name {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  line-height: 1;
  color: #111;
  margin: 0 0 4px;
}
.delivery-option-sub {
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  line-height: 1;
  color: #7d7d7d;
  margin: 0;
}
.delivery-option-sub--green { color: #1d9974; }
.delivery-option-row.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.delivery-option-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.delivery-option-branch-link {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  font-size: 12px;
  color: #111;
  text-decoration: underline;
  flex-shrink: 0;
}
.delivery-option-branch-link:hover { color: var(--nm-orange); }
.delivery-option-branch-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.delivery-option-branch-warn {
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #d92d20;
  white-space: nowrap;
}
.delivery-option-branch-link.is-required {
  color: #d92d20;
}
.delivery-option-branch-link.is-required:hover {
  color: #b42318;
}
.delivery-option-branch-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px 0 30px;
}
.delivery-option-branch-icon { width: 20px; height: 20px; flex-shrink: 0; }
.delivery-option-branch-id { flex: 1 1 0; min-width: 0; }
.delivery-option-branch-name {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #111;
  margin: 0 0 2px;
}
.delivery-option-branch-addr {
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #7d7d7d;
  margin: 0;
}

/* Shared right-side drawer shell — used by:
   • PendingInvoiceDrawer (.pending-invoice, Figma 34:24084)
   • ChangePaymentDrawer (.payment-drawer, Figma 34:22536)
   • CancelOrderModal/Drawer (.cancel-drawer, Figma 34:23094) */
.pending-invoice,
.payment-drawer,
.cancel-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 344px;
  max-width: 100vw;
  background: #fff;
  z-index: 1060;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 200ms ease-out;
  outline: none;
  overflow-y: auto;
}
.pending-invoice.is-open,
.payment-drawer.is-open,
.cancel-drawer.is-open { transform: translateX(0); }
.payment-drawer__header,
.cancel-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 15px;
  border-bottom: 1px solid #d2d2d2;
  flex-shrink: 0;
}
.payment-drawer__title,
.cancel-drawer__title {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #111;
  margin: 0;
}
.payment-drawer__close,
.cancel-drawer__close {
  width: 34px;
  height: 34px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.payment-drawer__close img,
.cancel-drawer__close img { width: 34px; height: 34px; display: block; }
.payment-drawer__body,
.cancel-drawer__body {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 20px 15px 100px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.payment-drawer__footer,
.cancel-drawer__footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #d2d2d2;
  padding: 20px 15px;
}
.payment-drawer__cta,
.cancel-drawer__cta {
  width: 100%;
  height: 33px;
  padding: 4px 16px;
  border: 0;
  border-radius: 32px;
  background: var(--nm-orange);
  color: #fff;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.payment-drawer__cta:hover,
.cancel-drawer__cta:hover { background: var(--nm-orange-hover); }
.payment-drawer__cta:disabled,
.cancel-drawer__cta:disabled { opacity: 0.6; cursor: not-allowed; }

/* Payment-method picker rows */
.payment-drawer__group {
  background: rgba(228, 228, 228, 0.2);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.payment-drawer__group-title {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  margin: 0;
}
.payment-drawer__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.payment-drawer__option input { accent-color: #1d9974; margin: 0; }
.payment-drawer__option-logo {
  width: 56px;
  height: 35px;
  border: 1px solid var(--nm-border);
  border-radius: 4px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.payment-drawer__option-logo--square {
  width: 35px;
  height: 35px;
  border: 0;
  border-radius: 6px;
}
.payment-drawer__option-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.payment-drawer__option-label {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
}

/* Cancel-order reason rows */
.cancel-drawer__intro {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #111;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.cancel-drawer__reasons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cancel-drawer__reason {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}
.cancel-drawer__reason input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #1d9974;
  flex-shrink: 0;
}
.cancel-drawer__reason span {
  font-family: "Helvetica", sans-serif;
  font-size: 16px;
  color: #111;
}
/* Success view shown after the cancel mutation resolves (Figma 34:23607). */
.cancel-drawer__success {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 0 15px;
}
.cancel-drawer__success-icon {
  width: 80px;
  height: 80px;
  display: block;
}
.cancel-drawer__success-title {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #111;
  text-align: center;
  margin: -18px 0 0;
  /* Pull the title closer to the icon to match Figma's 16px gap between
     icon and label inside the 34px-gap content stack. */
}
.pending-invoice__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 15px;
  border-bottom: 1px solid #d2d2d2;
}
.pending-invoice__title {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #111;
  margin: 0;
}
.pending-invoice__close {
  width: 34px;
  height: 34px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pending-invoice__close img { width: 34px; height: 34px; display: block; }
.pending-invoice__close:hover img { opacity: 0.85; }
.pending-invoice__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 24px 9.5px 24px;
}
.pending-invoice__payment-label {
  width: 100%;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #111;
  margin: 0;
}
.pending-invoice__qr {
  width: 325px;
  height: 325px;
  max-width: 100%;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 4px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pending-invoice__qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pending-invoice__qr-placeholder {
  width: 80%;
  height: 80%;
  opacity: 0.85;
  border-radius: 4px;
}
.pending-invoice__amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 140px;
}
.pending-invoice__amount-label {
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #7d7d7d;
}
.pending-invoice__amount-value {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #111;
  white-space: nowrap;
}
.pending-invoice__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 32px;
  background: var(--nm-orange, #eb7e0a);
  color: #fff;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.pending-invoice__cta:hover { background: var(--nm-orange-hover, #b65f02); }
/* Secondary variant — used for "check payment" when a primary pay link is
   present (link gateways), so the two CTAs don't read as duplicate primaries. */
.pending-invoice__cta--ghost {
  background: #fff;
  color: var(--nm-orange, #eb7e0a);
  border: 1px solid var(--nm-orange, #eb7e0a);
}
.pending-invoice__cta--ghost:hover {
  background: var(--nm-orange-tint, #fff4e8);
}

/* Pickup branch drawer (Figma 34:8155) */
.pickup-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 344px;
  max-width: 100vw;
  background: #fff;
  z-index: 1060;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
}
.pickup-drawer.is-open { transform: translateX(0); }
.pickup-drawer__head {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 20px 15px;
  border-bottom: 1px solid #d2d2d2;
  background: #fff;
}
.pickup-drawer__head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pickup-drawer__title {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #111;
  margin: 0;
}
.pickup-drawer__close {
  width: 34px;
  height: 34px;
  background: transparent;
  border: 0;
  font-size: 26px;
  color: #7d7d7d;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.pickup-drawer__close:hover { color: #111; background: var(--nm-surface-soft); }
.pickup-drawer__product {
  display: flex;
  gap: 10px;
  align-items: center;
}
.pickup-drawer__product img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--nm-surface-soft);
  object-fit: cover;
  flex-shrink: 0;
}
.pickup-drawer__product-title {
  flex: 1 1 0;
  min-width: 0;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #111;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pickup-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 15px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pickup-drawer__vendor {
  display: flex;
  gap: 10px;
  align-items: center;
}
.pickup-drawer__vendor-logo {
  width: 32px;
  height: 32px;
  border: 1px solid #f4f4f4;
  border-radius: 4px;
  background: var(--nm-surface-soft);
  flex-shrink: 0;
}
.pickup-drawer__vendor-name {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pickup-drawer__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pickup-drawer__branch {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid #d2d2d2;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 150ms ease;
  justify-content: center;
}
.pickup-drawer__branch.is-picked { border-color: #1d9974; }
.pickup-drawer__branch.is-oos { cursor: not-allowed; }
.pickup-drawer__branch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.pickup-drawer__branch-id {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pickup-drawer__branch-id input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #1d9974;
  flex-shrink: 0;
}
.pickup-drawer__branch-name {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pickup-drawer__branch.is-oos .pickup-drawer__branch-name { color: #7d7d7d; }
.pickup-drawer__branch-nearest {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--nm-orange);
  white-space: nowrap;
}
.pickup-drawer__branch-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}
.pickup-drawer__branch-addr {
  font-family: "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #7d7d7d;
  margin: 0;
  line-height: 1.4;
}
.pickup-drawer__branch-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  white-space: nowrap;
}
.pickup-drawer__branch-hours {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #111;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pickup-drawer__branch-stock {
  font-family: "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #111;
  flex-shrink: 0;
}
.pickup-drawer__branch-stock.is-oos { color: #7d7d7d; }
.pickup-drawer__foot {
  padding: 20px 15px;
  border-top: 1px solid #d2d2d2;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pickup-drawer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 33px;
  padding: 4px 16px;
  background: var(--nm-orange);
  color: #fff;
  border: 0;
  border-radius: 32px;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.pickup-drawer__cta:hover { background: var(--nm-orange-hover); }
.pickup-drawer__cta:disabled { background: rgba(235, 126, 10, 0.4); cursor: not-allowed; }
.delivery-option-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  opacity: 0.6;
}

.delivery-aside {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 120px;
  align-self: start;
}
.delivery-aside-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.delivery-aside-title {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: #111;
  text-transform: uppercase;
  margin: 0;
}
.delivery-aside-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.delivery-aside-item {
  display: flex;
  gap: 16px;
  align-items: stretch;
  min-height: 64px;
}
.delivery-aside-item-img {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--nm-surface-soft);
  object-fit: contain;
}
.delivery-aside-item-id {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}
.delivery-aside-item-name {
  font-family: "Helvetica", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: #111;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.delivery-aside-item-price {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  font-weight: 400;
}
.delivery-aside-item-price .now { font-weight: 400; color: #111; }
.delivery-aside-item-price:has(.old) .now { color: #cc2121; }
.delivery-aside-item-price .old {
  color: #7d7d7d;
  text-decoration: line-through;
  font-size: 12px;
}
.delivery-aside-item-price .qty {
  margin-left: auto;
  color: #111;
  font-size: 12px;
  font-weight: 500;
  background: var(--nm-surface-soft, #F4F5F7) !important;
  padding: 2px 8px;
  border: 0;
  border-radius: 6px;
}

@media (max-width: 991.98px) {
  .delivery-page .delivery-grid { grid-template-columns: 1fr; }
  .delivery-aside { position: static; }
  /* Stack line-items above the options as a plain flex column. A grid here let
     a long product title blow the column wider than the card, which pushed the
     options out and clipped the selected option's rounded card on the right. */
  .delivery-card-body { display: flex; flex-direction: column; gap: 8px; }
  .delivery-card-vsep { display: none; }
  .delivery-stores { padding: 16px 0; border-bottom: 1px solid rgba(17,17,17,0.1); min-width: 0; }
  .delivery-options { padding: 16px 0; min-width: 0; }
}

/* Delivery-method mobile (≤767) — single 16px gutter, all text >= 14px */
@media (max-width: 767.98px) {
  .delivery-page { padding: 12px 0 40px; }
  .delivery-title { font-size: 20px; }
  .delivery-vendors-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .delivery-vendors-title { font-size: 14px; }
  .delivery-vendors-hint { font-size: 14px; }
  /* Trim the accordion's doubled-up padding (card 12 + header/body 20 ≈ 32px)
     down to a single clean 16px gutter. */
  .delivery-card { padding: 0; }
  .delivery-card-header { gap: 12px; padding: 16px; }
  .delivery-card-divider { margin: 0 16px; }
  .delivery-card-body { padding: 0 16px 16px; }
  .delivery-card-logo { width: 36px; height: 36px; }
  .delivery-card-name { font-size: 14px; }
  .delivery-card-sub { font-size: 14px; }
  .delivery-store-img { width: 56px; height: 56px; }
  .delivery-store-name { font-size: 14px; }
  .delivery-store-price { font-size: 14px; }
  .delivery-option-row { padding: 10px 12px; }
  .delivery-option-name { font-size: 14px; }
  .delivery-option-sub { font-size: 14px; }
  .delivery-option-branch-name { font-size: 14px; }
  .delivery-option-branch-addr { font-size: 14px; }
  .delivery-option-branch-action { flex-wrap: wrap; gap: 4px 8px; }
  .delivery-option-branch-warn { font-size: 14px; }
  .delivery-option-branch-link { font-size: 14px; }
}

/* Breadcrumb (Figma 125:9720) */
.netmall-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: normal;
  color: #111;
  flex-wrap: wrap;
}
.netmall-breadcrumb__link {
  color: #111;
  text-decoration: none;
  white-space: nowrap;
}
.netmall-breadcrumb__link:hover { color: var(--nm-orange); }
.netmall-breadcrumb__current {
  color: #111;
  white-space: nowrap;
}
.netmall-breadcrumb__sep {
  width: 4px;
  height: 6px;
  flex-shrink: 0;
  display: block;
}

/* Site header + user-menu deck (Figma 247:5790 / 247:5831) */
.site-header {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid var(--nm-border);
  z-index: 20;
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  flex-wrap: nowrap;
}
.site-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.site-header__logo img { height: 40px; width: auto; display: block; }
.site-header__user-options {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
  /* No margin-left: auto — on desktop the SearchBox (flex-grow: 1) takes
     all the space between the logo and this nav, pushing it to the right.
     On mobile the search-trigger has margin-left: auto which pushes
     itself + this nav to the right as one group. A second auto here
     would split the free space and center the search icon. */
  flex-shrink: 0;
}

.header-deck {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  gap: 0;
  cursor: pointer;
}
.header-deck--auth {
  align-items: center;
  justify-content: center;
}
.header-deck__row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.header-deck__icon {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}
.header-deck__badge {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #7d7d7d;
  font-family: "Helvetica", sans-serif;
  font-size: 16px;
  line-height: 1;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}
.header-deck__badge--notif {
  background: #cc2121;
  color: #fff;
  border-radius: 32px;
  font-size: 14px;
  font-weight: 500;
  /* Helvetica numerals sit visually high inside a flex-centered box —
     the cap height is offset from the line-box center. Push down 2px so
     the digit reads as optically centered (relies on Bootstrap's
     global box-sizing: border-box so the badge stays 24×24). */
  padding-top: 2px;
}
.header-deck__label {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #111;
  min-width: 100%;
}
.header-deck--auth .header-deck__label {
  min-width: auto;
}
.header-deck__label--name {
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.header-deck__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Only show the soft-gray circle when there's a real avatar image to frame.
   For the default user.svg fallback, render flush with no background. */
.header-deck__avatar:has(img:not(.header-deck__avatar-default)) {
  background: var(--nm-surface-soft);
}
.header-deck__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.header-deck__avatar-fallback {
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--nm-orange);
}
.header-deck__avatar-default {
  width: 24px;
  height: 24px;
  display: block;
}
.header-deck:hover .header-deck__label { color: var(--nm-orange); }
.header-deck:focus-visible {
  outline: 2px solid var(--nm-orange-tint);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (max-width: 991.98px) {
  .site-header__bar { gap: 12px; padding: 12px 0; }
  .site-header__user-options { gap: 16px; }
  .header-deck__label { display: none; }
  .header-deck { width: auto !important; }
}

/* Header mobile (≤767) — bar wraps so search drops to its own row */
@media (max-width: 767.98px) {
  .site-header__bar {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .site-header__logo img { height: 32px; }
  /* No margin-left: auto here — the search trigger already has
     margin-left: auto to push itself + the user-options to the right
     as a single group. Two auto-margins would split the free space and
     center the search icon. */
  .site-header__user-options { gap: 12px; }
  /* The (hidden) SearchBox is :nth-child(2); the visible mobile trigger
     is :nth-child(3). The legacy "drop to own row" rule applied to the
     hidden SearchBox had no visual effect but kept the bar tall — remove
     it so everything sits inline. */
  .header-deck { gap: 4px !important; }
  .header-deck__icon { width: 22px; height: 22px; }
  .header-deck__badge { width: 20px; height: 20px; font-size: 12px; }
}

/* Shop detail in-page card tab strip — wraps the primary + secondary
   nav groups so the desktop layout (primary centered, secondary right)
   collapses on mobile into a single horizontally scrollable row instead
   of wrapping into two stacked lines. */
.shop-bar-tabs {
  display: flex;
  align-items: center;
  flex-grow: 1;
  gap: 14px;
  min-width: 0;
}
@media (max-width: 767.98px) {
  .shop-bar-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    /* Hide the scrollbar so the bar reads as content, not a control. */
    scrollbar-width: none;
  }
  .shop-bar-tabs::-webkit-scrollbar { display: none; }
  .shop-bar-tabs__group {
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    justify-content: flex-start !important;
  }
}

/* Fullscreen mobile search overlay — opens when the header search icon
   is tapped. Covers the viewport, hosts an input + recent searches /
   live suggestions, and traps body scroll while open. */
.mobile-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1060;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mobile-search-overlay__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--nm-border);
  background: #fff;
}
.mobile-search-overlay__form {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1.5px solid #c5d4e2;
  border-radius: 32px;
  background: #fff;
  transition: border-color 150ms ease-out;
}
.mobile-search-overlay__form:focus-within { border-color: #1d9974; }
.mobile-search-overlay__form-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.6;
}
.mobile-search-overlay__input {
  flex: 1 1 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: "Helvetica", sans-serif;
  font-size: 15px;
  color: #111;
  min-width: 0;
}
.mobile-search-overlay__input::placeholder { color: #7d7d7d; }

/* Suppress the browser-native clear (×) button on every `<input type="search">`.
   We render our own clear button next to the input — without this rule WebKit
   draws a second grey × inside the field. Firefox doesn't add one, so nothing
   to hide there. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.mobile-search-overlay__clear {
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mobile-search-overlay__clear img { width: 16px; height: 16px; }
.mobile-search-overlay__cancel {
  background: transparent;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #1d9974;
  white-space: nowrap;
}
.mobile-search-overlay__cancel:hover { color: #157a5d; }

.mobile-search-overlay__body {
  flex: 1 1 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 14px 24px;
}
.mobile-search-overlay__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 10px;
}
.mobile-search-overlay__section-head strong {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #111;
}
.mobile-search-overlay__link {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: "Helvetica", sans-serif;
  font-size: 13px;
  color: #1d9974;
}
.mobile-search-overlay__link:hover { color: #157a5d; }
.mobile-search-overlay__empty {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #7d7d7d;
  margin: 24px 0 0;
  text-align: center;
}
.mobile-search-overlay__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.mobile-search-overlay__list-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(17, 17, 17, 0.05);
}
.mobile-search-overlay__list-text {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  min-width: 0;
}
.mobile-search-overlay__list-text img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.5;
}
.mobile-search-overlay__list-text span {
  flex: 1 1 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-search-overlay__list-text:hover { color: var(--nm-orange); }
.mobile-search-overlay__list-text--accent { color: var(--nm-orange); font-weight: 500; }
.mobile-search-overlay__list-remove {
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mobile-search-overlay__list-remove img { width: 14px; height: 14px; }

/* Mobile-only search trigger — icon button grouped with the compare
   deck on the right side of the header. Plain icon, no border/background. */
.site-header__search-trigger {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #111;
  flex-shrink: 0;
  margin-left: auto;
  transition: background 150ms ease-out;
}
.site-header__search-trigger img { width: 22px; height: 22px; }
.site-header__search-trigger:hover {
  background: rgba(17, 17, 17, 0.05);
}

/* Wishlist / cart / profile decks live in the top header on desktop;
   on mobile they migrate to the MobileBottomNav (`.mobile-bottom-nav`)
   so the top bar stays focused on logo + search + compare. */
.site-header__decks-desktop {
  display: contents;
}
@media (max-width: 767.98px) {
  .site-header__decks-desktop { display: none; }
}

/* Mobile bottom tab bar — visible only at ≤767px. Sits flush with the
   bottom edge, 5 equal tabs, safe-area aware. Above it: a bottom-padded
   <main> so page content scrolls clear of the bar. */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  background: #fff;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -2px 12px rgba(17, 17, 17, 0.04);
}
.mobile-bottom-nav__tab {
  flex: 1 1 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 56px;
  padding: 8px 4px;
  color: #7d7d7d;
  text-decoration: none;
  font-family: "Helvetica", sans-serif;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: color 150ms ease-out;
}
.mobile-bottom-nav__tab.is-active { color: var(--nm-orange); }
.mobile-bottom-nav__tab:hover { color: #111; }
.mobile-bottom-nav__tab.is-active:hover { color: var(--nm-orange); }
.mobile-bottom-nav__icon-wrap {
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mobile-bottom-nav__icon {
  width: 24px;
  height: 24px;
  display: block;
}
.mobile-bottom-nav__badge {
  position: absolute;
  top: -4px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #cc2121;
  color: #fff;
  font-family: "Helvetica", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.mobile-bottom-nav__label {
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .mobile-bottom-nav {
    display: flex;
    align-items: stretch;
  }
  /* Make room for the bottom bar so fixed elements (the compare sticky,
     drawers) and page content all clear it. */
  body { padding-bottom: 56px; }
  /* Hide the floating "help" button on mobile — it conflicts with the
     compare-sticky bar and the bottom tab nav, and small phones don't
     have screen real estate for an extra floating CTA. */
  body > .position-fixed.end-0.bottom-0 { display: none !important; }
  /* Compare sticky bottom bar lifts above the tab bar. */
  .compare-sticky { bottom: 56px; }
  /* Shop detail's fixed "sticky bar" duplicates the in-page card and
     glitches on phones because its `top: headerOffset` re-measure fights
     with the wrapping header. Hide it on mobile — the in-page header
     above the product grid already covers the same navigation. */
  .shop-sticky-bar { display: none !important; }
}

/* Promo banner (Figma 43:31266) */
.promo-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffe4d4;
  height: 50px;
  padding: 10px 56px;
  width: 100%;
  z-index: 4;
}
.promo-banner__inner {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.promo-banner__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--nm-orange);
  color: #fff;
  border-radius: 2px;
  font-family: "Nunito", "Helvetica", sans-serif;
  font-weight: 900;
  font-size: 12px;
  flex-shrink: 0;
}
.promo-banner__text {
  font-family: "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: normal;
  color: #0b0b0b;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.promo-banner__text strong { font-weight: 700; }
.promo-banner__close {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: rgba(0, 0, 0, 0.55);
}
.promo-banner__close img { width: 16px; height: 16px; }
.promo-banner__close:hover { background: rgba(0, 0, 0, 0.05); }

@media (max-width: 575.98px) {
  .promo-banner {
    height: auto;
    padding: 8px 40px;
  }
  .promo-banner__text { white-space: normal; }
}

/* Toast (Figma 130:21446 — AntD-style alert) */
.netmall-toast-region {
  position: fixed;
  top: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 2000;
  pointer-events: none;
  max-width: calc(100vw - 32px);
}
.netmall-toast {
  width: 395px;
  max-width: 100%;
  padding: 9px 16px;
  border-radius: 2px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto;
  font-family: "Roboto", "Helvetica", sans-serif;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.04);
  background: #fff;
  border-color: rgba(0, 0, 0, 0.06);
}
.netmall-toast[data-type="success"] {
  background: #f6ffed;
  border-color: #b7eb8f;
}
.netmall-toast[data-type="error"] {
  background: #fff2f0;
  border-color: #ffccc7;
}
.netmall-toast[data-type="warning"] {
  background: #fffbe6;
  border-color: #ffe58f;
}
.netmall-toast[data-type="info"] {
  background: #e6f4ff;
  border-color: #91d5ff;
}
.netmall-toast-title-row {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
}
.netmall-toast-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.netmall-toast-icon svg { display: block; }
.netmall-toast-title-text {
  flex: 1 1 0;
  min-width: 0;
  font-family: "Roboto", "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.85);
  margin: 0;
}
.netmall-toast-close {
  width: 16px;
  height: 16px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 150ms ease;
}
.netmall-toast-close:hover { color: rgba(0, 0, 0, 0.85); }
.netmall-toast-description {
  padding-left: 36px;
  font-family: "Roboto", "Helvetica", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.85);
  margin: 0;
}

@media (max-width: 575.98px) {
  .netmall-toast-region {
    top: auto;
    bottom: 16px;
    left: 16px;
    right: 16px;
  }
  .netmall-toast { width: 100%; }
}

/* Compare page (Figma 130:16461) */
.compare-page {
  padding: 16px 0 120px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.compare-breadcrumb {
  display: flex;
  gap: 4px;
  align-items: center;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  padding-top: 8px;
}
.compare-breadcrumb a {
  color: #111;
  text-decoration: none;
}
.compare-breadcrumb a:hover { color: var(--nm-orange); }
.compare-breadcrumb .chev {
  width: 12px;
  height: 12px;
}
.compare-breadcrumb .here { color: #7d7d7d; }

.compare-grid {
  display: grid;
  width: 100%;
  align-items: stretch;
}
.compare-cell-empty {
  background: transparent;
}
.compare-product-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px;
  min-height: 280px;
  border: 1px dashed #d0d2d6;
  border-radius: 8px;
  color: #b5b8bd;
  font-size: 32px;
  font-weight: 300;
  user-select: none;
}

.compare-product {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  position: relative;
  background: #fff;
}
.compare-product-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--nm-surface-soft);
  overflow: hidden;
  border-radius: 8px;
  position: relative;
}
.compare-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.compare-product-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 24px;
  padding: 0 6px;
  border-radius: 4px;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  z-index: 2;
}
.compare-product-tag img { width: 16px; height: 16px; }
.compare-product-tag--featured { background: #393838; }
.compare-product-tag--sale { background: #cc2121; }
.compare-product-tag--new { background: var(--nm-orange); }
.compare-product-icons {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
}
.compare-product-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(17, 17, 17, 0.08);
}
.compare-product-icon img { width: 18px; height: 18px; }
.compare-product-icon:hover { background: var(--nm-surface-soft); }
.compare-product-remove {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  border: 0;
  cursor: pointer;
  font-family: "Helvetica", sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #7d7d7d;
  box-shadow: 0 2px 6px rgba(17, 17, 17, 0.08);
  z-index: 2;
}
.compare-product-remove img { width: 14px; height: 14px; }
.compare-product-remove:hover { color: #cc2121; }
.compare-product-title {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
}
.compare-product-vendor {
  font-family: "Helvetica", sans-serif;
  font-size: 10px;
  color: #7d7d7d;
  margin: 0;
}
.compare-product-stock {
  font-family: "Helvetica", sans-serif;
  font-size: 10px;
  color: #cc2121;
  margin: 0;
  min-height: 14px;
}
.compare-product-bottom {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}
.compare-product-price-block {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.compare-product-price {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #111;
  line-height: 1.1;
}
.compare-product-price--sale { color: #cc2121; }
.compare-product-price-old {
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #7d7d7d;
  text-decoration: line-through;
  text-decoration-skip-ink: none;
  line-height: 1;
}
.compare-product-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  height: 33px;
  background: var(--nm-orange);
  color: #fff;
  border: 0;
  border-radius: 32px;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.compare-product-cta:hover { background: var(--nm-orange-hover); }
.compare-product-cta:disabled {
  background: rgba(235, 126, 10, 0.4);
  cursor: not-allowed;
}

.compare-spec-title {
  grid-column: 1 / -1;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #111;
  padding: 24px 8px 8px;
  margin: 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.1);
}
.compare-spec-label {
  padding: 8px 8px;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #7d7d7d;
  border-bottom: 1px solid rgba(17, 17, 17, 0.05);
}
.compare-spec-cell {
  padding: 8px 8px;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  border-bottom: 1px solid rgba(17, 17, 17, 0.05);
}
.compare-spec-row-even .compare-spec-label,
.compare-spec-row-even .compare-spec-cell {
  background: #f5f5f5;
}

.compare-sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid rgba(17, 17, 17, 0.1);
  box-shadow: 0 -4px 16px rgba(17, 17, 17, 0.04);
  z-index: 40;
}
.compare-sticky-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 8px 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  min-height: 80px;
}
.compare-sticky-count {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  margin: 0;
}
.compare-sticky-count b { font-weight: 700; }
.compare-sticky-thumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.compare-sticky-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: var(--nm-surface-soft);
  overflow: hidden;
}
.compare-sticky-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.compare-sticky-thumb-remove {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border: 0;
  background: rgba(17, 17, 17, 0.6);
  color: #fff;
  border-radius: 0 8px 0 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.compare-sticky-thumb-remove img { width: 12px; height: 12px; filter: brightness(0) invert(1); }
.compare-sticky-add {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: #f4f5f7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7d7d7d;
  font-size: 24px;
}
.compare-sticky-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.compare-clear,
.compare-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 20px;
  border-radius: 32px;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.compare-clear {
  background: #fff;
  color: #111;
  border: 1px solid var(--nm-border);
  font-weight: 500;
}
.compare-clear:hover { background: var(--nm-surface-soft); }
.compare-cta {
  background: var(--nm-orange);
  color: #fff;
  border: 0;
  font-weight: 700;
}
.compare-cta:hover { background: var(--nm-orange-hover); }
.compare-cta:disabled { background: rgba(235, 126, 10, 0.4); cursor: not-allowed; }

.compare-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 16px;
  gap: 16px;
}
.compare-empty h1 {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #111;
  margin: 0;
}
.compare-empty p {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #7d7d7d;
  margin: 0;
}
/* Direct child only — without `>` this also turned every link inside the
   featured `PdpProductRail` (product cards, vendor names) into giant orange
   pill buttons. */
.compare-empty > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  border-radius: 32px;
  background: var(--nm-orange);
  color: #fff;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.compare-empty > a:hover { background: var(--nm-orange-hover); color: #fff; }

@media (max-width: 991.98px) {
  .compare-page { padding: 16px 0 140px; }
  .compare-sticky-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .compare-sticky-thumbs { flex-wrap: wrap; }
  .compare-sticky-actions { justify-content: center; }
}

/* Compare page mobile — grid still has to render all columns side-by-side
   for the comparison to make sense, but the fixed 324px label column +
   4 product columns overflow at <768px. Solution: horizontal scroll on
   the grid itself, with shrunk label + min product column widths so two
   product cards stay visible at once. */
@media (max-width: 767.98px) {
  .compare-page {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* The page's `overflow-x: auto` + wide grid child swallows the
     container's natural padding visually — the breadcrumb at the top
     ends up flush against the viewport edge. Re-introduce a 14px
     left/right gap so it reads correctly. */
  .compare-page .netmall-breadcrumb {
    padding-inline: 14px;
  }
  .compare-grid {
    /* Override inline style by raising specificity via the page class. */
    grid-template-columns: 140px repeat(4, minmax(150px, 1fr)) !important;
    min-width: 740px;
  }
  .compare-spec-title { font-size: 18px; padding: 16px 8px 4px; }
  .compare-spec-label,
  .compare-spec-cell { font-size: 13px; padding: 6px; }
  .compare-product { padding: 6px; gap: 6px; }
  .compare-product-title { font-size: 13px; }
  .compare-product-price { font-size: 15px; }
  .compare-product-cta { font-size: 11px; padding: 6px 12px; height: 30px; }
  .compare-product-tag { height: 20px; padding: 0 5px; font-size: 11px; top: 8px; left: 8px; }
  .compare-product-icons { top: 8px; right: 8px; gap: 6px; }
  .compare-product-icon { width: 28px; height: 28px; }
  .compare-product-icon img { width: 16px; height: 16px; }
  .compare-product-remove { bottom: 8px; right: 8px; padding: 4px 8px; font-size: 11px; }
  .compare-sticky-inner { padding: 6px 12px; min-height: 64px; gap: 12px; }
  .compare-sticky-thumb,
  .compare-sticky-add { width: 48px; height: 48px; }
}

/* Pickup-only store address row — mobile sizing */
@media (max-width: 767.98px) {
  .invoice-pickup-store__icon { width: 16px; height: 16px; }
  .invoice-pickup-store__text { font-size: 12px; }
  .invoice-pickup-store__addr { font-size: 11px; }
}

/* Reviews section (Figma 125:9539) */
.reviews-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin-top: 48px;
}
.reviews-section .reviews-title {
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #111;
  margin: 0;
  padding: 16px;
  border-radius: 4px;
}
.reviews-filters {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 8px 0;
  background: #fff;
  width: 100%;
}
.reviews-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  height: 40px;
  background: #f6f6f6;
  border: 0;
  border-radius: 32px;
  width: 185px;
  cursor: pointer;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  position: relative;
}
.reviews-chip-icon { width: 20px; height: 20px; flex-shrink: 0; }
.reviews-chip-label { flex: 1 1 0; min-width: 0; text-align: left; }
.reviews-chip-chevron { width: 12px; height: 12px; flex-shrink: 0; transition: transform 200ms ease; }
.reviews-chip[aria-expanded="true"] .reviews-chip-chevron { transform: rotate(180deg); }
.reviews-chip:hover { background: #ececec; }
.reviews-chip-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 10;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(17, 17, 17, 0.08);
  min-width: 100%;
  padding: 4px;
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
}
.reviews-chip-menu-item {
  padding: 8px 12px;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  cursor: pointer;
  border-radius: 4px;
  background: transparent;
  border: 0;
  text-align: left;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
}
.reviews-chip-menu-item:hover { background: #f4f5f7; }
.reviews-chip-menu-item.is-active { background: #fff4e8; color: var(--nm-orange); font-weight: 700; }
.reviews-count {
  flex: 1 1 0;
  min-width: 0;
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  line-height: 20px;
  color: #7d7d7d;
  text-align: right;
}

.reviews-grid {
  display: grid;
  grid-template-columns: 1fr 368px;
  gap: 24px;
  width: 100%;
  align-items: start;
}
.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 16px;
  width: 100%;
  background: #fff;
}
.review-card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.review-card-meta {
  display: flex;
  gap: 8px;
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  font-size: 12px;
  white-space: nowrap;
}
.review-card-user {
  color: #7d7d7d;
  text-decoration: underline;
  text-decoration-skip-ink: none;
}
.review-card-date { color: #111; }
.review-card-verified {
  color: #1d9974;
  font-weight: 700;
}
.review-card-stars {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.review-card-stars img { width: 14px; height: 14px; display: block; }
.review-card-title {
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #111;
  margin: 0;
}
.review-card-body {
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #111;
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
}
.review-card-images {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.review-card-images a {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--nm-surface-soft);
}
.review-card-images img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-card-vendor-response {
  background: #f4f5f7;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #111;
}
.review-card-vendor-response-label {
  display: block;
  font-size: 11px;
  color: #7d7d7d;
  margin-bottom: 4px;
}
.review-card-product {
  display: flex;
  gap: 8px;
  align-items: center;
  border-radius: 10px;
  width: 272px;
  text-decoration: none;
  color: inherit;
}
.review-card-product-thumb {
  width: 60px;
  height: 60px;
  border-radius: 1.6px;
  overflow: hidden;
  background: #f8f8f8;
  flex-shrink: 0;
}
.review-card-product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-card-product-name {
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #111;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-card-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.review-card-vote {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: transparent;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 999px;
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #111;
  cursor: pointer;
}
.review-card-vote:hover:not(:disabled) { background: var(--nm-surface-soft); }
.review-card-vote:disabled { opacity: 0.5; cursor: not-allowed; }

.reviews-summary {
  width: 368px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.reviews-summary-headline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.reviews-summary-headline-top {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.reviews-summary-average {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 32px;
  color: var(--nm-orange);
  line-height: 1;
  margin: 0;
}
.reviews-summary-stars-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.reviews-summary-stars {
  display: inline-flex;
  align-items: center;
}
.reviews-summary-stars img { width: 24px; height: 24px; display: block; }
.reviews-summary-count {
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #111;
  margin: 0;
}
.reviews-bars { display: flex; flex-direction: column; gap: 4px; }
.reviews-bar {
  display: flex;
  gap: 4px;
  align-items: center;
  width: 100%;
}
.reviews-bar-label {
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #111;
  width: 48px;
}
.reviews-bar-track {
  flex: 1 1 0;
  min-width: 0;
  height: 4px;
  background: #d9d9d9;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.reviews-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--nm-orange);
  border-radius: 4px;
  transition: width 200ms ease;
}
.reviews-bar-percent {
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #111;
  width: 48px;
  text-align: right;
}

.review-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.review-form-title {
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #111;
  line-height: 21px;
  margin: 0;
}
.review-form-stars {
  display: inline-flex;
  gap: 4px;
}
.review-form-star {
  width: 24px;
  height: 24px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.review-form-star img { width: 24px; height: 24px; display: block; }
.review-form-textarea {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 16px;
  min-height: 132px;
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  line-height: 21px;
  width: 100%;
  resize: vertical;
}
.review-form-textarea::placeholder { color: rgba(33, 37, 41, 0.75); }
.review-form-textarea:focus {
  outline: none;
  border-color: #111;
}
.review-form-input {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 10px 16px;
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  width: 100%;
}
.review-form-input:focus { outline: none; border-color: #111; }
.review-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nm-orange);
  color: #fff;
  border: 0;
  border-radius: 32px;
  height: 33px;
  padding: 4px 16px;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  align-self: flex-start;
}
.review-form-submit:hover { background: var(--nm-orange-hover); }
.review-form-submit:disabled { background: rgba(235, 126, 10, 0.4); cursor: not-allowed; }
.review-form-error {
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #cc2121;
  margin: 0;
}
.review-form-success {
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #1d9974;
  margin: 0;
}
.review-form-locked {
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #7d7d7d;
}
.review-form-locked a { color: var(--nm-orange); text-decoration: underline; }

@media (max-width: 991.98px) {
  .reviews-grid { grid-template-columns: 1fr; }
  .reviews-summary { width: 100%; }
}

/* PDP rails (Ижил төстэй / Брэндийн бусад — Figma 34:6542, 34:6555) */
.pdp-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin-top: 48px;
}
.pdp-rail-title {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #111;
  text-align: center;
  margin: 0;
  width: 100%;
}
.pdp-rail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}
/* Same min-width: 0 fix as .pdp-gallery — without it the product card's
   image pushes each `1fr` track past the viewport on mobile. */
.pdp-rail-grid > * { min-width: 0; }
@media (max-width: 991.98px) {
  .pdp-rail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Recently viewed (Figma 34:6771) — compact 6-tile row */
.pdp-recent-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin-top: 48px;
}
.pdp-recent-title {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #111;
  margin: 0;
}
.pdp-recent-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}
.pdp-recent-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: inherit;
}
.pdp-recent-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--nm-surface-soft);
  overflow: hidden;
  border-radius: 4px;
}
.pdp-recent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pdp-recent-name {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pdp-recent-price {
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #111;
}
.pdp-recent-tile:hover .pdp-recent-name { color: var(--nm-orange); }
@media (max-width: 991.98px) {
  .pdp-recent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .pdp-recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .pdp-page .pdp-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .pdp-aside { padding-left: 0; align-self: auto; }
  .pdp-buy { position: static; top: auto; margin-top: 0; }
}

/* PDP mobile (≤767) — gallery first, info under, variant pills wrap */
@media (max-width: 767.98px) {
  .pdp-page { padding: 12px 0 32px; }
  .pdp-page .pdp-grid { gap: 16px; }
  .pdp-gallery-hero { aspect-ratio: 1 / 1; }
  /* Show the prev/next chevrons inside the hero on mobile only. */
  .pdp-gallery-nav { display: inline-flex; }
  /* Convert the 2-col thumbnail grid into a horizontal row. When there
     are ≤5 images they distribute evenly across the row; beyond that
     the row scrolls horizontally so every thumbnail stays reachable.
     Active tile keeps its orange outline from the base CSS. */
  .pdp-gallery-tiles {
    grid-template-columns: none;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pdp-gallery-tiles::-webkit-scrollbar { display: none; }
  .pdp-gallery-tile {
    flex: 1 0 64px;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    max-width: 80px;
  }
  .pdp-variants { gap: 16px; }
  .pdp-variant-group { gap: 8px; }
  .pdp-variant-label { font-size: 13px; }
  .pdp-swatch-row, .pdp-size-row { gap: 6px; flex-wrap: wrap; }
  .pdp-swatch { width: 32px; height: 32px; }
  .pdp-size-pill {
    height: 36px;
    padding: 0 12px;
    font-size: 12px;
  }
  /* Buy column stays full-width below gallery; large CTA sticky-like */
  .pdp-buy { gap: 12px; }
}

/* Narrow phones (≤575px): on this width qty + 2 CTAs side-by-side squeezes
   the outline "Шууд худалдан авах" past the viewport. Wrap the row so the
   outline button drops to its own full-width line below the primary CTA. */
@media (max-width: 575.98px) {
  .pdp-actions { flex-wrap: wrap; }
  .pdp-cta--outline { flex: 1 0 100%; }
}

/* Inline action link inside empty-state descriptions (e.g. "шинэ
   бараануудтай танилцаарай.") — green underline like the Figma. */
.empty-state__inline-link {
  color: #1d9974;
  text-decoration: underline;
  font-weight: 500;
}
.empty-state__inline-link:hover { opacity: 0.85; }

/* "эсвэл" divider used between the login CTA and secondary actions
   (Figma 34:24185 footer). Two thin rules flank a centered label. */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: #7d7d7d;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: rgba(17, 17, 17, 0.12);
}

/* ============================================================
   MOBILE RESPONSIVE FIXES — Batch 1: overflow safety + roots
   Mobile-scoped only (@media max-width). Desktop is NOT affected.
   ============================================================ */
@media (max-width: 991px) {
  /* Featured-shops strip: when the row stacks it keeps align-items:center,
     so the cards-wrap sized to its content (~1045px) and blew the page
     ~710px wide. Clamp it to the viewport so the inner cards scroll. */
  .featured-shops-cards-wrap { width: 100%; align-self: stretch; min-width: 0; }
  .featured-shops-cards { max-width: 100%; }
  /* Keep the round prev/next arrows on mobile/tablet (same as desktop), but
     pull them INSIDE the strip — at -22px they spilled past the viewport edge
     once the strip is full-width. Overlaying inside is the standard mobile
     carousel pattern and stays within the screen. */
  .featured-shops-nav--left { left: 4px; }
  .featured-shops-nav--right { right: 4px; }
}
@media (max-width: 767.98px) {
  /* Global backstop: any stray over-wide element clips at the edge instead of
     scrolling the whole page sideways. 'clip' (not 'hidden') keeps sticky working. */
  html, body { overflow-x: clip; }
}

/* ============================================================
   MOBILE RESPONSIVE FIXES — Batch 2: product-list filter UI (#10)
   Mobile-scoped only. Desktop toolbar markup + look unchanged
   (layout is re-ordered with CSS `order`, not by editing the DOM).
   ============================================================ */
@media (max-width: 767.98px) {
  /* Pills become a 2-col grid: Шүүлтүүр + Эрэмбэлэх share row 1, brand/shop
     pills span full width below. Pills move above the count (matches #10). */
  .filter-toolbar__pills {
    display: grid !important; /* beat Bootstrap .d-flex (display:flex !important) on mobile */
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    order: -1;
  }
  .filter-toolbar__pills > * { width: 100%; min-width: 0 !important; }
  .filter-toolbar__pills .list-toolbar__pill { width: 100%; min-width: 0 !important; }
  .list-toolbar__pill--filter { order: 1; }
  .filter-toolbar__pills > .list-toolbar__sort { order: 2; }
  .list-toolbar__pill--brand { order: 3; grid-column: 1 / -1; }
  .list-toolbar__pill--shops { order: 4; grid-column: 1 / -1; }

  /* Keep the sort dropdown menu on-screen on narrow phones. */
  .list-toolbar__sort .dropdown-menu {
    min-width: 0 !important;
    width: max-content;
    max-width: calc(100vw - 32px);
  }

  /* Active filter chips: one horizontally-scrollable row, not wrapped stacks. */
  .list-toolbar__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .list-toolbar__chips::-webkit-scrollbar { display: none; }
  .list-toolbar__chip { flex: 0 0 auto; }
}

/* ============================================================
   MOBILE RESPONSIVE FIXES — Batch 3: carousels (#7 / #8)
   Mobile-scoped only. Desktop grids/cards unchanged.
   ============================================================ */
@media (max-width: 767.98px) {
  /* #7 Featured shops — make the contained strip a real swipe carousel. */
  .featured-shops-cards { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .featured-shop-card { scroll-snap-align: start; }

  /* #8 Recently viewed — turn the reflowing grid into a swipe carousel. */
  .pdp-recent-grid {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 12px;
    margin-inline: -14px;
    padding-inline: 14px;
  }
  .pdp-recent-grid::-webkit-scrollbar { display: none; }
  .pdp-recent-tile { flex: 0 0 38%; scroll-snap-align: start; }
  .pdp-recent-name { -webkit-line-clamp: 2; }
}
@media (max-width: 575.98px) {
  /* #7 cards: tune to phone width + responsive square tiles
     (desktop 250px card / 120px tiles are kept). */
  .featured-shop-card { width: 78vw; max-width: 280px; }
  .featured-shop-card__grid { grid-template-columns: 1fr 1fr; }
  .featured-shop-card__tile { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .featured-shop-card__tile img { width: 85%; height: 85%; }
}

/* ============================================================
   MOBILE RESPONSIVE FIXES — Batch 5: real mobile bugs
   ============================================================ */
/* Promotions cards hide ❤️/compare behind :hover — unreachable on touch.
   Neutralize the hover-reveal transforms on touch / small screens only. */
@media (hover: none), (max-width: 767.98px) {
  .singleProduct .heartAction,
  .singleProduct .compareAction { transform: none; }
  .singleProduct .productStory { transform: translateY(0); }
}
@media (max-width: 767.98px) {
  /* Checkout payment methods: flex row with no wrap overflows with 3-4 methods.
     Reflow to 2-up on phones. */
  .payment-options-row { flex-wrap: wrap; }
  .payment-options-row .payment-option { flex: 1 1 calc(50% - 8px); }
}
@media (max-width: 991.98px) {
  /* Cart order-summary should scroll away on mobile, not pin over the
     saved/trending sections below it. */
  .cart-page .cart-summary { position: static; top: auto; }
}

/* ============================================================
   MOBILE RESPONSIVE FIXES — Batch 6: touch targets + layout polish
   All min-height/min-width only raise the FLOOR on mobile; desktop sizes
   (set by base rules above) are unchanged.
   ============================================================ */
@media (max-width: 767.98px) {
  .pdp-size-pill { min-width: 44px; }
  .btn-cta { min-height: 44px; }
  .brands-drawer__cta { min-height: 44px; }
  .filters-drawer__row { min-height: 44px; }
  .cart-summary__coupon { height: 44px; }
  .cart-item--figma .cart-item__remove { min-height: 44px; }
  .mobile-search-overlay__cancel { min-height: 44px; display: inline-flex; align-items: center; }
  .mobile-search-overlay__clear { min-width: 44px; min-height: 44px; }

  /* Cart item meta: let the shop+SKU line wrap / truncate instead of spilling. */
  .cart-item--figma .cart-item__meta { flex-wrap: wrap; gap: 2px 12px; }
  .cart-item--figma .cart-item__shop { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

  /* Profile: stack the section header + address rows so controls don't collide. */
  .profile-section__header { flex-direction: column; align-items: flex-start; }
  .profile-section__hint { text-align: left; }
  .profile-address-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .profile-address-row__actions { flex-wrap: wrap; width: 100%; gap: 12px 16px; }

  /* Compare grid: real layout has 3 product columns, not 4 — kill the phantom
     empty column so the scroll width is correct. */
  .compare-grid { grid-template-columns: 140px repeat(3, minmax(150px, 1fr)) !important; min-width: 590px; }
}
@media (max-width: 575.98px) {
  footer .btn { min-height: 44px; }
}

/* ============================================================
   MOBILE RESPONSIVE FIXES — Batch 7: PLP product-card footer
   On narrow 2-col cards the price + "Сагсанд хийх" CTA were on one row and
   overlapped. Stack them on mobile: price on top, full-width CTA below.
   Desktop keeps the side-by-side row.
   ============================================================ */
@media (max-width: 767.98px) {
  .product-card__foot {
    flex-direction: column;
    align-items: stretch !important; /* beat Bootstrap .align-items-center */
    gap: 8px;
  }
  .product-card__foot .btn-cta { width: 100%; }
}

/* ============================================================
   MOBILE RESPONSIVE FIXES — Batch 8: PDP product rails → swipe carousels
   Related / brand-other / Trending rails become horizontal swipe carousels
   on mobile (matching the recently-viewed rail). Desktop grid unchanged.
   ============================================================ */
@media (max-width: 767.98px) {
  .pdp-rail-grid {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 12px;
    margin-inline: -14px;
    padding-inline: 14px;
  }
  .pdp-rail-grid::-webkit-scrollbar { display: none; }
  .pdp-rail-grid > * { flex: 0 0 60%; scroll-snap-align: start; }
}

/* ============================================================
   MOBILE RESPONSIVE FIXES — Batch 9: PDP container padding + carousel sizing
   ============================================================ */
@media (max-width: 991.98px) {
  /* ROOT CAUSE FIX: `.pdp-page`'s `padding: 16px 0` shorthand zeroed the
     .container's horizontal padding (so the 1332px desktop grid could fit).
     On mobile/tablet the grid is single-column, so restore side padding —
     this is why gallery / bundle / rails were touching the screen edges. */
  .pdp-page { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 767.98px) {
  /* Carousels respect the container padding (no edge-bleed) and fit 2 cards
     fully for the product rails, 3 for the compact recently-viewed tiles. */
  .pdp-rail-grid,
  .pdp-recent-grid { margin-inline: 0; padding-inline: 0; }
  .pdp-rail-grid > * { flex: 0 0 47%; }
  .pdp-recent-tile { flex: 0 0 30%; }
}

/* Reusable scroll-rail chrome (arrows + dots) for the PDP product rails and
   recently-viewed. Buttons/dots are rendered by JS only when the track
   overflows (the mobile carousel), so desktop grids show no chrome. */
.scroll-rail { position: relative; width: 100%; }
.scroll-rail__nav {
  position: absolute;
  top: 36%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 10px; /* rounded rectangle, matching the gallery nav (not a circle) */
  background: #fff;
  border: 1px solid #dee2e6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.scroll-rail__nav img { width: 18px; height: 18px; }
.scroll-rail__nav--left { left: 0; }
.scroll-rail__nav--right { right: 0; }
.scroll-rail__nav.is-disabled { opacity: 0.4; pointer-events: none; }

/* Out-of-stock product-card CTA: a clear grey "sold out" look, and the same
   min-width as the add-to-cart button so in-stock and sold-out cards align. */
.product-card__foot .btn-cta { min-width: 130px; }
.product-card__foot .btn-cta:disabled {
  background: #f0f0f0;
  color: #9a9a9a;
}
.scroll-rail__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}
.scroll-rail__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d4d4d4;
  cursor: pointer;
  transition: width 150ms ease, background 150ms ease;
}
.scroll-rail__dot.is-active {
  width: 18px;
  border-radius: 4px;
  background: var(--nm-orange, #eb7e0a);
}

/* ============================================================
   MOBILE RESPONSIVE FIXES — Batch 10: PDP gallery + title polish
   Mobile-scoped only. (Gallery nav reverts to the base 32px shadowed
   chevron — the Batch 6 44px override was removed above.)
   ============================================================ */
@media (max-width: 767.98px) {
  /* Rounded corners on the big preview image. */
  .pdp-gallery-hero { border-radius: 12px; }
  /* 16px between the hero and the thumbnail row; thumbnails stay 8px apart. */
  .pdp-gallery-stack { gap: 16px; }
  .pdp-gallery-tiles { gap: 8px; }
  /* Thumbnails were too big — compact 56px row. */
  .pdp-gallery-tile { flex: 0 0 56px; max-width: 56px; }
  /* Action icons (compare / wishlist / share) move ABOVE the title on their
     own right-aligned row; the title then takes the full width on a new row
     below (it was being squeezed by the icons). */
  .pdp-title-row { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
  .pdp-icon-group { display: flex; justify-content: flex-end; }
}

/* Frequently-bought-together bundle (Figma 34:6486) — 150px product tiles in a
   row separated by "+", circular include checkboxes, running total + add-all
   beside them; light #f5f5f5 card with a faint Netmall logo watermark. */
.fbt {
  position: relative;
  overflow: hidden;
  background: #f5f5f5;
  border-radius: 16px;
  padding: 24px;
  margin-top: 48px;
}
.fbt__watermark {
  position: absolute;
  top: 42px;
  right: -120px;
  width: 560px;
  height: auto;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.fbt__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fbt__title {
  font-family: "Raleway", "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #111;
  margin: 0;
}
.fbt__row { display: flex; align-items: center; gap: 64px; }
/* Tiles keep their natural width on wide screens, shrink + scroll when the row
   would otherwise overflow (narrow laptops, mobile) — never push the summary. */
.fbt__items {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.fbt__items::-webkit-scrollbar { display: none; }
.fbt__plus { flex-shrink: 0; font-size: 20px; line-height: 1; color: #9a9a9a; }
.fbt__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 150px;
  flex-shrink: 0;
}
.fbt__thumb {
  position: relative;
  width: 150px;
  height: 150px;
  background: #fbfbfb;
  border-radius: 4px;
  overflow: hidden;
}
.fbt__thumb-link { display: block; width: 100%; height: 100%; }
.fbt__check {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 2;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid #d2d2d2;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.fbt__check.is-on {
  background: var(--nm-green, #16a34a);
  border-color: var(--nm-green, #16a34a);
}
.fbt__check img { width: 10px; height: 10px; }
.fbt__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fbt__name {
  max-width: 150px;
  font-size: 14px;
  color: #111;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fbt__price { font-size: 16px; font-weight: 700; color: #111; }
.fbt__summary {
  flex: 1 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.fbt__total { font-size: 16px; color: rgba(17, 17, 17, 0.5); }
.fbt__total strong { font-size: 24px; font-weight: 700; color: #111; }
.fbt__cta {
  width: 208px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nm-orange, #eb7e0a);
  color: #fff;
  border: 0;
  border-radius: 32px;
  font-family: "Helvetica", sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.fbt__cta:hover:not(:disabled) { filter: brightness(0.95); }
.fbt__cta:disabled { background: #e6e6e6; color: #9a9a9a; cursor: not-allowed; }

@media (max-width: 767.98px) {
  .fbt { padding: 16px; margin-top: 32px; }
  .fbt__watermark { display: none; }
  .fbt__title { font-size: 18px; }
  /* Stack: tiles scroll in one row, summary (total + add-all) sits beneath. */
  .fbt__row { flex-direction: column; align-items: stretch; gap: 16px; }
  .fbt__items { flex: 1 1 auto; -webkit-overflow-scrolling: touch; }
  .fbt__summary {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .fbt__total strong { font-size: 20px; }
  .fbt__cta { width: auto; min-width: 160px; flex-shrink: 0; }
}

/* ============================================================
   MOBILE RESPONSIVE FIXES — Batch 11: cart + checkout container gutter
   ============================================================ */
@media (max-width: 991.98px) {
  /* Same root cause as `.pdp-page`: these page wrappers use a `padding: Y 0 Z`
     shorthand that zeroes the Bootstrap `.container`'s horizontal padding, so
     on phones/tablets the cart and checkout content ran edge-to-edge. Restore
     the side gutter (desktop keeps its full-width grid untouched). */
  .cart-page,
  .delivery-page,
  .delivery-info-page { padding-left: 16px; padding-right: 16px; }
}

/* ============================================================
   MOBILE RESPONSIVE FIXES — Batch 12: equal-height carousel cards
   ============================================================ */
@media (max-width: 767.98px) {
  /* Product-rail cards carry Bootstrap's `.h-100` (height: 100% !important),
     which inside an indefinite-height horizontal flex track resolves to the
     card's own content height — so the card opts out of `align-items: stretch`
     and rows end up uneven (a card with a "Зөвхөн N үлдсэн" stock line is
     taller, leaving its "Сагсанд хийх" CTA below its neighbours). Force
     height:auto so stretch makes every card the row's full height; the card's
     existing `mt-auto` foot then snaps the price + CTA to the bottom, aligned. */
  .pdp-rail-grid { align-items: stretch; }
  .pdp-rail-grid > * { height: auto !important; }
}
/*# sourceMappingURL=wrap.css.map */