@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) {
  .cart-info-strip { flex-wrap: wrap; }
}
.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;
}
.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__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;
}

/* 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 — stack the columns */
@media (max-width: 767px) {
  .cart-item--figma {
    flex-wrap: wrap;
    padding: 12px;
    gap: 12px;
  }
  .cart-item--figma .cart-item__image-box {
    width: 110px;
    height: 110px;
  }
  .cart-item--figma .cart-item__body {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: calc(100% - 122px);
  }
  .cart-item--figma .cart-item__details {
    width: auto;
    height: auto;
  }
  .cart-item--figma .cart-item__services {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }
  .cart-item--figma .cart-item__actions {
    width: 100%;
    height: auto;
    align-items: stretch;
    margin-left: 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    border-top: 1px dashed rgba(17, 17, 17, 0.1);
    padding-top: 10px;
  }
  .cart-item--figma .cart-item__qty-stock {
    width: 100%;
    align-items: center;
    justify-content: space-between;
  }
}

/* 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;
  grid-template-columns: 660px 660px;
  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-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; }
  .invoice-filters-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .invoice-filters { gap: 6px; }
  .invoice-filter {
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
  }
  .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;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.brands-drawer__tile {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-decoration: none;
  color: inherit;
}
.brands-drawer__logo {
  position: relative;
  aspect-ratio: 1 / 1;
  background: rgba(228, 228, 228, 0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.brands-drawer__logo img {
  max-width: 70%;
  max-height: 50%;
  object-fit: contain;
}
.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;
}

@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-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 Leaflet's high internal z-indexes (panes 400, controls 1000)
     so they don't slide above the sticky site header on scroll. */
  isolation: isolate;
  z-index: 0;
}
.address-map-frame .leaflet-pane,
.address-map-frame .leaflet-top,
.address-map-frame .leaflet-bottom {
  z-index: 1;
}
.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 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: center;
}
.new-address-label-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  min-width: 0;
  height: 40px;
  padding: 0 20px;
  border: 1.5px solid var(--nm-border);
  border-radius: 32px;
  background: #fff;
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  color: #111;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.new-address-label-pill:hover { background: var(--nm-surface-soft); }
.new-address-label-pill:has(input:checked) {
  border-color: var(--nm-orange);
  background: var(--nm-orange-tint);
  color: var(--nm-orange);
}
.new-address-label-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
/* When "Бусад" is selected, its radio shares the 3rd column with the
   custom-text input on the SAME row. The radio shrinks to its content
   and the input fills the rest. */
.new-address-labels > .new-address-other-input {
  grid-column: 3 / 4;
  justify-self: stretch;
  min-width: 0;
}
.new-address-labels:has(.new-address-other-input) {
  grid-template-columns: 1fr 1fr auto minmax(0, 1fr);
}
.new-address-labels:has(.new-address-other-input) > .new-address-other-input {
  grid-column: 4 / 5;
  margin-left: 0;
}
.new-address-label-pill input { accent-color: var(--nm-orange); }
.new-address-label-pill span {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
}
.new-address-other-input {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--nm-border);
  border-radius: 8px;
  font-size: 14px;
  flex: 1 1 200px;
  max-width: 240px;
}

.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; }
  .new-address-labels {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px;
  }
  .new-address-labels:has(.new-address-other-input) {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  .new-address-labels:has(.new-address-other-input) > .new-address-other-input {
    grid-column: 1 / -1;
  }
  .new-address-label-pill {
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
  }
  .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;
  grid-template-columns: 1fr 1px 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 {
  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;
  cursor: pointer;
}
.pending-invoice__cta:hover { background: var(--nm-orange-hover, #b65f02); }

/* 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; }
  .delivery-card-body { grid-template-columns: 1fr; }
  .delivery-card-vsep { display: none; }
  .delivery-stores { padding: 16px 0; border-bottom: 1px solid rgba(17,17,17,0.1); }
  .delivery-options { padding: 16px 0; }
}

/* Delivery-method mobile (≤767) — tighter padding, smaller header */
@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: 12px; }
  .delivery-card { padding: 12px; }
  .delivery-card-header { gap: 10px; }
  .delivery-card-logo { width: 36px; height: 36px; }
  .delivery-card-name { font-size: 13px; }
  .delivery-card-sub { font-size: 11px; }
  .delivery-store-img { width: 56px; height: 56px; }
  .delivery-store-name { font-size: 12px; }
  .delivery-option-row { padding: 10px 12px; }
  .delivery-option-name { font-size: 13px; }
  .delivery-option-sub { font-size: 11px; }
  .delivery-option-branch-action { flex-wrap: wrap; gap: 4px 8px; }
  .delivery-option-branch-warn { font-size: 11px; }
  .delivery-option-branch-link { font-size: 11px; }
}

/* 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;
}
.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);
}
/*# sourceMappingURL=wrap.css.map */