:root {
  --shop-color-base-100:#fff;
  --shop-color-base-200:#fafafa;
  --shop-color-base-300:#f5f5f5;
  --shop-color-base-content:#171717;
  --shop-color-primary:#171717;
  --shop-color-primary-content:#fff;
  --shop-color-secondary:#f5f5f5;
  --shop-color-secondary-content:#171717;
  --shop-color-accent:#262626;
  --shop-color-accent-content:#fff;
  --shop-color-neutral:#737373;
  --shop-color-neutral-content:#fff;
  --shop-color-info:#687687;
  --shop-color-info-content:#fff;
  --shop-color-success:#45544a;
  --shop-color-success-content:#fff;
  --shop-color-warning:#675d4c;
  --shop-color-warning-content:#fff;
  --shop-color-error:#625050;
  --shop-color-error-content:#fff;
  --shop-gray-50:#fafafa;
  --shop-gray-100:#f5f5f5;
  --shop-gray-200:#e6e6e6;
  --shop-gray-300:#d4d4d4;
  --shop-gray-400:#a3a3a3;
  --shop-gray-500:#737373;
  --shop-gray-600:#525252;
  --shop-gray-700:#404040;
  --shop-gray-800:#262626;
  --shop-gray-900:#171717;
  --shop-border-radius:8px;
  --shop-border-radius-sm:4px;
  --shop-border-radius-lg:12px;
  --shop-spacing-xs:4px;
  --shop-spacing-sm:8px;
  --shop-spacing-md:16px;
  --shop-spacing-lg:24px;
  --shop-spacing-xl:32px;
  --shop-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;
  --shop-font-size-xs:12px;
  --shop-font-size-sm:14px;
  --shop-font-size-base:16px;
  --shop-font-size-lg:18px;
  --shop-font-size-xl:24px;
  --shop-shadow-sm:0 1px 2px 0 #0000000d;
  --shop-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;
  --shop-shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;
  --shop-shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;
  --shop-transition:all .2s ease
}

[data-theme="dark"] {
  --shop-color-base-100:#171717;
  --shop-color-base-200:#262626;
  --shop-color-base-300:#404040;
  --shop-color-base-content:#fafafa;
  --shop-color-primary:#fafafa;
  --shop-color-primary-content:#171717;
  --shop-color-secondary:#262626;
  --shop-color-secondary-content:#fafafa;
  --shop-color-accent:#e6e6e6;
  --shop-color-accent-content:#171717;
  --shop-color-neutral:#a3a3a3;
  --shop-color-neutral-content:#171717;
  --shop-color-info:#a7b4c3;
  --shop-color-info-content:#171717;
  --shop-color-success:#8fb59a;
  --shop-color-success-content:#171717;
  --shop-color-warning:#b8a17a;
  --shop-color-warning-content:#171717;
  --shop-color-error:#ca9a9a;
  --shop-color-error-content:#171717;
  --shop-gray-50:#171717;
  --shop-gray-100:#262626;
  --shop-gray-200:#404040;
  --shop-gray-300:#525252;
  --shop-gray-400:#737373;
  --shop-gray-500:#a3a3a3;
  --shop-gray-600:#d4d4d4;
  --shop-gray-700:#e6e6e6;
  --shop-gray-800:#f5f5f5;
  --shop-gray-900:#fafafa;

}

.shop-entry {
  max-width: 1400px;
  margin: 0 auto;
  margin-top: 1.25rem;
  padding: 0 1.5rem;
  min-height: calc(100vh - 190px);
}

.shop-entry__header {
  text-align:left;
  margin-bottom:var(--shop-spacing-xl)
}
.shop-entry__title {
  color:var(--shop-gray-900);
  margin:0 0 var(--shop-spacing-sm)0;
  font-size:32px;
  font-weight:700
}
.shop-entry__subtitle {
  font-size:var(--shop-font-size-lg);
  color:var(--shop-gray-600);
  margin:0
}
.shop-entry * {
  box-sizing:border-box
}
@media (width<=768px) {
  .shop-entry__title {
    font-size:28px
  }
  .shop-entry__subtitle {
    font-size:var(--shop-font-size-base)
  }
}
.shop-btn {
  font-size:var(--shop-font-size-base);
  text-align:center;
  border-radius:var(--shop-border-radius);
  cursor:pointer;
  transition:var(--shop-transition);
  white-space:nowrap;
  border:1px solid #0000;
  justify-content:center;
  align-items:center;
  padding:10px 20px;
  font-weight:500;
  line-height:1.5;
  text-decoration:none;
  display:inline-flex
}
.shop-btn:disabled,
.shop-btn.shop-btn--disabled {
  opacity:.6;
  cursor:not-allowed
}
.shop-btn-primary {
  background-color:var(--shop-color-primary);
  color:var(--shop-color-primary-content);
  border-color:var(--shop-color-primary)
}
.shop-btn-primary:hover:not(:disabled):not(.shop-btn--disabled) {
  background-color:var(--shop-color-accent)
}
.shop-btn-secondary {
  background-color:var(--shop-color-secondary);
  color:var(--shop-color-secondary-content);
  border-color:var(--shop-gray-300)
}
.shop-btn-secondary:hover:not(:disabled):not(.shop-btn--disabled) {
  background-color:var(--shop-gray-200)
}
.shop-btn-danger {
  background-color:var(--shop-color-error);
  color:var(--shop-color-error-content);
  border-color:var(--shop-color-error)
}
.shop-btn-danger:hover:not(:disabled):not(.shop-btn--disabled) {
  background-color:#463939
}
.shop-btn-sm {
  font-size:var(--shop-font-size-sm);
  padding:6px 12px
}
.shop-btn-lg {
  font-size:var(--shop-font-size-lg);
  padding:14px 28px
}
.shop-select {
  width:100%;
  font-size:var(--shop-font-size-base);
  font-family:var(--shop-font-family);
  color:var(--shop-color-base-content);
  background-color:var(--shop-color-base-100);
  border:1px solid var(--shop-gray-300);
  border-radius:var(--shop-border-radius);
  cursor:pointer;
  transition:var(--shop-transition);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222z'/%3E%3C/svg%3E");
  background-position:right 10px center;
  background-repeat:no-repeat;
  background-size:1.2em;
  padding:10px 32px 10px 14px
}
.shop-select:focus {
  border-color:var(--shop-color-primary);
  outline:none;
  box-shadow:0 0 0 3px #1717171a
}
.shop-select:disabled {
  background-color:var(--shop-gray-100);
  cursor:not-allowed;
  opacity:.6
}
.shop-input,
.shop-textarea {
  width:100%;
  font-size:var(--shop-font-size-base);
  font-family:var(--shop-font-family);
  color:var(--shop-color-base-content);
  background-color:var(--shop-color-base-100);
  border:1px solid var(--shop-gray-300);
  border-radius:var(--shop-border-radius);
  transition:var(--shop-transition);
  padding:10px 14px;
  line-height:1.5
}
.shop-input:focus,
.shop-textarea:focus {
  border-color:var(--shop-color-primary);
  outline:none;
  box-shadow:0 0 0 3px #1717171a
}
.shop-input::-moz-placeholder {
  color:var(--shop-gray-400)
}
.shop-textarea::-moz-placeholder {
  color:var(--shop-gray-400)
}
.shop-input::placeholder,
.shop-textarea::placeholder {
  color:var(--shop-gray-400)
}
.shop-input:disabled,
.shop-textarea:disabled {
  background-color:var(--shop-gray-100);
  cursor:not-allowed;
  opacity:.6
}
.shop-textarea {
  resize:vertical;
  min-height:80px
}
.shop-form-group {
  gap:var(--shop-spacing-sm);
  margin-bottom:var(--shop-spacing-md);
  flex-direction:column;
  display:flex
}
.shop-label {
  font-size:var(--shop-font-size-base);
  color:var(--shop-gray-900);
  font-weight:500
}
.shop-divider {
  background-color:var(--shop-gray-200);
  height:1px;
  margin:var(--shop-spacing-md)0;
  border:none
}
.shop-quantity {
  border:1px solid var(--shop-gray-300);
  border-radius:var(--shop-border-radius);
  align-items:center;
  display:flex;
  overflow:hidden
}
.shop-quantity__btn {
  background-color:var(--shop-color-base-100);
  cursor:pointer;
  width:40px;
  height:40px;
  color:var(--shop-gray-700);
  transition:var(--shop-transition);
  border:none;
  justify-content:center;
  align-items:center;
  font-size:14px;
  display:flex
}
.shop-quantity__btn:hover:not(:disabled) {
  background-color:var(--shop-gray-100)
}
.shop-quantity__btn:disabled {
  opacity:.4;
  cursor:not-allowed
}
.shop-quantity__btn:not(:last-child) {
  border-right:1px solid var(--shop-gray-300)
}
.shop-quantity__input {
  width:60px;
  height:40px;
  padding:0 var(--shop-spacing-sm);
  text-align:center;
  font-size:var(--shop-font-size-base);
  color:var(--shop-gray-900);
  background-color:var(--shop-color-base-100);
  border:none
}
.shop-quantity__input:focus {
  outline:none
}
.shop-quantity__input::-webkit-inner-spin-button {
  -webkit-appearance:none;
  margin:0
}
.shop-quantity__input::-webkit-outer-spin-button {
  -webkit-appearance:none;
  margin:0
}
.shop-quantity__input[type=number] {
  appearance:textfield
}
.shop-card {
  padding:var(--shop-spacing-lg);
  background-color:var(--shop-color-base-100);
  border:1px solid var(--shop-gray-200);
  border-radius:var(--shop-border-radius)
}
.shop-card__title {
  font-size:var(--shop-font-size-xl);
  color:var(--shop-gray-900);
  margin:0 0 var(--shop-spacing-lg)0;
  font-weight:700
}
.shop-product-list {
  gap:var(--shop-spacing-lg);
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  display:grid
}
@media (width<=768px) {
  .shop-product-list {
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr))
  }
}
.shop-product-card {
  background-color:var(--shop-color-base-100);
  border:1px solid var(--shop-gray-200);
  border-radius:var(--shop-border-radius-lg);
  transition:var(--shop-transition);
  color:inherit;
  flex-direction:column;
  text-decoration:none;
  display:flex;
  overflow:hidden
}
.shop-product-card:hover {
  box-shadow:var(--shop-shadow-lg);
  transform:translateY(-2px)
}
.shop-product-card:hover .shop-product-card__image img {
  transform:scale(1.05)
}
.shop-product-card__image {
  background-color:var(--shop-gray-100);
  width:100%;
  height:220px;
  position:relative;
  overflow:hidden
}
.shop-product-card__image img {
  -o-object-fit:cover;
  object-fit:cover;
  width:100%;
  height:100%;
  transition:transform .4s
}
.shop-product-card__info {
  gap:var(--shop-spacing-sm);
  padding:var(--shop-spacing-md);
  flex-direction:column;
  flex:1;
  display:flex
}
.shop-product-card__name {
  font-size:var(--shop-font-size-lg);
  color:var(--shop-gray-900);
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  margin:0;
  font-weight:600;
  line-height:1.4;
  display:-webkit-box;
  overflow:hidden
}
.shop-product-card__description {
  font-size:var(--shop-font-size-sm);
  color:var(--shop-gray-600);
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  margin:0;
  line-height:1.5;
  display:-webkit-box;
  overflow:hidden
}
.shop-product-card__footer {
  padding-top:var(--shop-spacing-sm);
  border-top:1px solid var(--shop-gray-200);
  justify-content:space-between;
  align-items:center;
  margin-top:auto;
  display:flex
}
.shop-product-card__price {
  align-items:baseline;
  gap:var(--shop-spacing-xs);
  display:flex
}
.shop-product-card__price-current {
  font-size:var(--shop-font-size-xl);
  color:var(--shop-gray-900);
  font-weight:700
}
.shop-product-card__price-original {
  font-size:var(--shop-font-size-sm);
  color:var(--shop-gray-500)
}
@media (width<=768px) {
  .shop-product-card__image {
    height:180px
  }
}
.buy-box {
  gap:var(--shop-spacing-lg,24px);
  flex-direction:column;
  display:flex
}
.buy-box__price {
  padding-bottom:var(--shop-spacing-md,16px);
  border-bottom:1px solid var(--shop-gray-200,#e6e6e6)
}
.buy-box__price-label {
  font-size:var(--shop-font-size-sm,14px);
  color:var(--shop-gray-600,#525252);
  margin-bottom:var(--shop-spacing-xs,4px)
}
.buy-box__price-value {
  color:var(--shop-gray-900,#171717);
  font-size:32px;
  font-weight:700
}
.buy-box__price-value del {
  font-size:var(--shop-font-size-sm,14px);
  font-weight:400
}
.buy-box__spec {
  gap:var(--shop-spacing-sm,8px);
  flex-direction:column;
  display:flex
}
.buy-box__spec-label {
  font-size:var(--shop-font-size-base,16px);
  color:var(--shop-gray-900,#171717);
  font-weight:600
}
.buy-box__spec-options {
  gap:var(--shop-spacing-sm,8px);
  flex-wrap:wrap;
  display:flex
}
.buy-box__spec-option {
  align-items:center;
  gap:var(--shop-spacing-xs,8px);
  font-size:var(--shop-font-size-base,16px);
  color:var(--shop-gray-700);
  background-color:var(--shop-color-base-100);
  border:1px solid var(--shop-gray-300);
  border-radius:var(--shop-border-radius,8px);
  cursor:pointer;
  transition:var(--shop-transition,all .2s ease);
  padding:10px 20px;
  display:flex
}
.buy-box__spec-option:hover:not(:disabled) {
  border-color:var(--shop-gray-500)
}
.buy-box__spec-option--with-image {
  gap:var(--shop-spacing-xs,6px);
  flex-direction:column;
  min-width:100px;
  padding:8px;
  position:relative
}
.buy-box__spec-option-image {
  -o-object-fit:cover;
  object-fit:cover;
  border-radius:4px;
  width:80px;
  height:80px
}
.buy-box__spec-option-image.medium-zoom-image--opened {
  border-radius:0
}
.buy-box__spec-option-zoom {
  opacity:0;
  transition:var(--shop-transition,all .2s ease);
  background-color:var(--shop-color-base-300,white);
  border-radius:var(--shop-border-radius-sm,4px);
  justify-content:center;
  align-items:center;
  padding:.2rem;
  display:inline-flex;
  position:absolute;
  top:.7rem;
  right:.7rem
}
.buy-box__spec-option-zoom svg {
  width:1rem;
  height:1rem
}
.buy-box__spec-option:hover .buy-box__spec-option-zoom {
  opacity:1;
  cursor:zoom-in
}
.buy-box__spec-option-text {
  text-align:center;
  font-size:var(--shop-font-size-sm,14px)
}
.buy-box__spec-option--selected {
  background-color:var(--shop-color-primary);
  border-color:var(--shop-color-primary);
  color:var(--shop-color-primary-content)
}
.buy-box__spec-option--selected.buy-box__spec-option--with-image {
  background-color:var(--shop-color-base-200);
  color:var(--shop-gray-700)!important
}
.buy-box__spec-option--disabled {
  color:var(--shop-gray-400);
  cursor:not-allowed;
  opacity:.5
}
.buy-box__spec-option--disabled .buy-box__spec-option-text {
  text-decoration:line-through
}
.buy-box__spec-option--disabled .buy-box__spec-option-image {
  opacity:.5
}
.buy-box__stock {
  font-size:var(--shop-font-size-sm,14px);
  color:var(--shop-gray-700);
}
.buy-box__stock-value {
  color:var(--shop-color-success);
  font-weight:600
}
.buy-box__quantity {
  align-items:center;
  gap:var(--shop-spacing-md,16px);
  display:flex
}
.buy-box__quantity-label {
  font-size:var(--shop-font-size-base,16px);
  color:var(--shop-gray-900);
  font-weight:600
}
.buy-box__actions {
  gap:var(--shop-spacing-md,16px);
  padding-top:var(--shop-spacing-md,16px);
  border-top:1px solid var(--shop-gray-200);
  display:flex
}
.buy-box__actions form {
  flex:1
}
.buy-box__actions .shop-btn {
  width:100%
}
.shop-filter {
  justify-content:space-between;
  align-items:center;
  gap:var(--shop-spacing-lg);
  margin-bottom:var(--shop-spacing-xl);
  display:flex
}
.shop-filter__left {
  gap:var(--shop-spacing-md);
  flex:1;
  max-width:600px;
  display:flex
}
.shop-filter__right {
  flex-shrink:0
}
.shop-filter .shop-select,
.shop-filter .shop-input {
  min-width:0
}
.shop-filter__left .shop-select {
  flex-shrink:0;
  width:180px
}
.shop-filter__left .shop-input {
  flex:1
}
.shop-filter__right .shop-select {
  width:200px
}
@media (width<=768px) {
  .shop-filter {
    align-items:stretch;
    gap:var(--shop-spacing-md);
    flex-direction:column
  }
  .shop-filter__left {
    flex-direction:column;
    max-width:none
  }
  .shop-filter__left .shop-select,
  .shop-filter__right .shop-select {
    width:100%
  }
}
.shop-product-detail {
  gap:var(--shop-spacing-xl);
  margin-bottom:var(--shop-spacing-xl);
  grid-template-columns:repeat(2,minmax(0,1fr));
  display:grid
}
.shop-product-gallery {
  --swiper-navigation-color:#fff;
  --swiper-pagination-color:#fff
}
.shop-product-gallery swiper-container {
  width:100%;
  margin-left:0!important;
  margin-right:0!important
}
.shop-product-gallery swiper-slide {
  text-align:center;
  background:#444;
  justify-content:center;
  align-items:center;
  font-size:18px;
  display:flex
}
.shop-product-gallery swiper-slide img {
  -o-object-fit:cover;
  object-fit:cover;
  width:100%;
  height:100%;
  display:block
}
.shop-product-gallery .product-gallery-swiper {
  aspect-ratio:1;
  width:100%;
  max-width:600px;
  max-height:600px;
  margin-bottom:var(--shop-spacing-md);
  border-radius:var(--shop-border-radius-lg);
  overflow:hidden
}
.shop-product-gallery .product-gallery-swiper swiper-slide {
  background-position:50%;
  background-size:cover
}
.shop-product-gallery .product-gallery-swiper swiper-slide img {
  -o-object-fit:cover;
  object-fit:cover;
  width:100%;
  height:100%
}
.shop-product-gallery .product-gallery-nav-swiper {
  box-sizing:border-box;
  max-width:600px
}
.shop-product-gallery .product-gallery-nav-swiper swiper-slide {
  opacity:.4;
  cursor:pointer;
  width:100px;
  height:100px;
  transition:opacity var(--shop-transition);
  border-radius:var(--shop-border-radius);
  overflow:hidden
}
.shop-product-gallery .product-gallery-nav-swiper swiper-slide:hover {
  opacity:.7
}
.shop-product-gallery .product-gallery-nav-swiper .swiper-slide-thumb-active {
  opacity:1;
  border:1px solid var(--shop-color-primary)
}
.shop-product-gallery .product-gallery-nav-swiper swiper-slide img {
  -o-object-fit:cover;
  object-fit:cover;
  width:100%;
  height:100%;
  display:block
}
.shop-product-info {
  gap:var(--shop-spacing-md);
  flex-direction:column;
  display:flex
}
.shop-product-info__title {
  color:var(--shop-gray-900);
  margin:0;
  font-size:28px;
  font-weight:700;
  line-height:1.3
}
.shop-product-info__desc {
  font-size:var(--shop-font-size-base);
  color:var(--shop-gray-600);
  margin:0;
  line-height:1.6
}
.shop-product-content {
  padding:var(--shop-spacing-xl)0;
  border-top:1px solid var(--shop-gray-200)
}
.shop-product-content__description {
  margin-bottom:var(--shop-spacing-xl);
  color:var(--shop-gray-700);
  line-height:1.8
}
.shop-product-content__specs {
  border-collapse:collapse;
  border:1px solid var(--shop-gray-200);
  width:100%
}
.shop-product-content__specs tr {
  border-bottom:1px solid var(--shop-gray-200)
}
.shop-product-content__specs td {
  padding:var(--shop-spacing-md);
  color:var(--shop-gray-700)
}
.shop-product-content__specs td:first-child {
  color:var(--shop-gray-900);
  width:150px;
  font-weight:600
}
@media (width<=768px) {
  .shop-product-detail {
    display:block
  }
  .shop-product-gallery {
    width:100%
  }
  .shop-product-gallery .product-gallery-swiper {
    max-width:100%;
    max-height:none
  }
  .shop-product-gallery .product-gallery-nav-swiper {
    max-width:100%
  }
  .shop-product-gallery .product-gallery-nav-swiper swiper-slide {
    width:80px;
    height:80px
  }
  .shop-product-info {
    width:100%;
    margin-top:var(--shop-spacing-xl)
  }
  .shop-product-info__title {
    font-size:24px
  }
  .shop-product-content__specs td:first-child {
    width:100px
  }
}
.shop-cart {
  gap:var(--shop-spacing-xl);
  grid-template-columns:1fr 400px;
  align-items:start;
  display:grid
}
.shop-cart__items {
  gap:var(--shop-spacing-md);
  flex-direction:column;
  display:flex
}
.shop-cart-item {
  gap:var(--shop-spacing-md);
  padding:var(--shop-spacing-md);
  background-color:var(--shop-color-base-100);
  border:1px solid var(--shop-gray-200);
  border-radius:var(--shop-border-radius);
  grid-template-columns:100px 1fr auto auto auto auto;
  align-items:center;
  display:grid
}
.shop-cart-item__image {
  border-radius:var(--shop-border-radius);
  background-color:var(--shop-gray-100);
  -o-object-fit:cover;
  object-fit:cover;
  width:100px;
  height:100px
}
.shop-cart-item__info {
  gap:var(--shop-spacing-xs);
  flex-direction:column;
  display:flex
}
.shop-cart-item__name {
  font-size:var(--shop-font-size-lg);
  color:var(--shop-gray-900);
  margin:0;
  font-weight:600
}
.shop-cart-item__variant,
.shop-cart-item__price {
  font-size:var(--shop-font-size-sm);
  color:var(--shop-gray-700);
  margin:0
}
.shop-cart-item__price-original {
  font-size:var(--shop-font-size-xs);
  color:var(--shop-gray-500);
  margin:0
}
.shop-cart-item__total {
  font-size:var(--shop-font-size-lg);
  color:var(--shop-gray-900);
  font-weight:600
}
.shop-cart-item__remove {
  font-size:var(--shop-font-size-sm);
  color:var(--shop-color-error);
  border:1px solid var(--shop-gray-300);
  border-radius:var(--shop-border-radius);
  cursor:pointer;
  transition:var(--shop-transition);
  background-color:#0000;
  padding:6px 12px
}
.shop-cart-item__remove:hover {
  background-color:var(--shop-color-base-200);
  border-color:var(--shop-color-error)
}
.shop-cart-summary {
  position:sticky;
  top:100px
}
.shop-cart-summary__row {
  margin-bottom:var(--shop-spacing-sm);
  font-size:var(--shop-font-size-base);
  color:var(--shop-gray-700);
  justify-content:space-between;
  align-items:center;
  display:flex
}
.shop-cart-summary__row--total {
  font-size:var(--shop-font-size-lg);
  color:var(--shop-gray-900);
  margin:var(--shop-spacing-md)0;
  font-weight:700
}
.shop-cart-summary__actions {
  gap:var(--shop-spacing-sm);
  flex-direction:column;
  display:flex
}
.shop-cart-summary__actions .shop-btn {
  width:100%
}
@media (width<=1024px) {
  .shop-cart {
    grid-template-columns:1fr
  }
  .shop-cart-summary {
    position:static
  }
}
@media (width<=768px) {
  .shop-cart-item {
    flex-wrap:wrap;
    display:flex
  }
  .shop-cart-item__remove {
    width:100%
  }
}
.shop-checkout {
  gap:var(--shop-spacing-xl);
  grid-template-columns:1fr 400px;
  align-items:start;
  display:grid
}
.shop-checkout__form {
  gap:var(--shop-spacing-lg);
  flex-direction:column;
  display:flex
}
.shop-checkout__summary {
  gap:var(--shop-spacing-lg);
  flex-direction:column;
  display:flex;
  position:sticky;
  top:100px
}
.shop-checkout__form-row {
  gap:var(--shop-spacing-md);
  grid-template-columns:repeat(2,1fr);
  display:grid
}
.shop-checkout__actions {
  gap:var(--shop-spacing-sm);
  flex-direction:column;
  display:flex
}
.shop-checkout__actions .shop-btn {
  width:100%
}
.shop-order-items {
  gap:var(--shop-spacing-md);
  flex-direction:column;
  display:flex
}
.shop-order-item {
  gap:var(--shop-spacing-md);
  padding-bottom:var(--shop-spacing-md);
  border-bottom:1px solid var(--shop-gray-200);
  display:flex
}
.shop-order-item:last-child {
  border-bottom:none;
  padding-bottom:0
}
.shop-order-item__image {
  border-radius:var(--shop-border-radius);
  background-color:var(--shop-gray-100);
  -o-object-fit:cover;
  object-fit:cover;
  flex-shrink:0;
  width:75px;
  height:75px
}
.shop-order-item__info {
  gap:var(--shop-spacing-xs);
  flex-direction:column;
  flex:1;
  display:flex
}
.shop-order-item__name {
  font-size:var(--shop-font-size-base);
  color:var(--shop-gray-900);
  font-weight:600
}
.shop-order-item__variant,
.shop-order-item__quantity {
  font-size:var(--shop-font-size-sm);
  color:var(--shop-gray-600)
}
.shop-order-item__price {
  font-size:var(--shop-font-size-base);
  color:var(--shop-gray-900);
  flex-shrink:0;
  font-weight:600
}
.shop-order-summary__row {
  margin-bottom:var(--shop-spacing-sm);
  font-size:var(--shop-font-size-base);
  color:var(--shop-gray-700);
  justify-content:space-between;
  align-items:center;
  display:flex
}
.shop-order-summary__row--total {
  font-size:var(--shop-font-size-lg);
  color:var(--shop-gray-900);
  margin:var(--shop-spacing-md)0 0 0;
  font-weight:700
}
@media (width<=1024px) {
  .shop-checkout {
    grid-template-columns:1fr
  }
  .shop-checkout__summary {
    position:static
  }
}
@media (width<=768px) {
  .shop-checkout__form-row {
    grid-template-columns:1fr
  }
}
.shop-success {
  max-width:600px;
  margin:var(--shop-spacing-xl)auto;
  padding:var(--shop-spacing-xl);
  text-align:center;
  background-color:var(--shop-color-base-100);
  border:1px solid var(--shop-gray-200);
  border-radius:var(--shop-border-radius-lg)
}
.shop-success__icon {
  width:80px;
  height:80px;
  margin:0 auto var(--shop-spacing-lg);
  color:var(--shop-color-success-content);
  background-color:var(--shop-color-success);
  border-radius:50%;
  justify-content:center;
  align-items:center;
  font-size:48px;
  display:flex
}
.shop-success__title {
  color:var(--shop-gray-900);
  margin:0 0 var(--shop-spacing-sm)0;
  font-size:28px;
  font-weight:700
}
.shop-success__desc {
  font-size:var(--shop-font-size-base);
  color:var(--shop-gray-600);
  margin:0 0 var(--shop-spacing-xl)0
}
.shop-success__info {
  padding:var(--shop-spacing-lg);
  background-color:var(--shop-gray-50);
  border-radius:var(--shop-border-radius);
  margin-bottom:var(--shop-spacing-xl)
}
.shop-success__info-row {
  padding:var(--shop-spacing-sm)0;
  justify-content:space-between;
  align-items:center;
  display:flex
}
.shop-success__info-row:not(:last-child) {
  border-bottom:1px solid var(--shop-gray-200)
}
.shop-success__info-label {
  font-size:var(--shop-font-size-base);
  color:var(--shop-gray-700)
}
.shop-success__info-value {
  font-size:var(--shop-font-size-base);
  color:var(--shop-gray-900);
  font-weight:600
}
.shop-success__info-value--price {
  font-size:var(--shop-font-size-xl);
  color:var(--shop-color-error)
}
.shop-success__actions {
  gap:var(--shop-spacing-md);
  justify-content:center;
  display:flex
}
.shop-success__actions .shop-btn {
  min-width:150px
}
@media (width<=768px) {
  .shop-success {
    padding:var(--shop-spacing-lg)
  }
  .shop-success__icon {
    width:60px;
    height:60px;
    font-size:36px
  }
  .shop-success__title {
    font-size:24px
  }
  .shop-success__actions {
    flex-direction:column
  }
  .shop-success__actions .shop-btn {
    width:100%
  }
}
.shop-payments {
  gap:var(--shop-spacing-xl);
  grid-template-columns:1fr 420px;
  align-items:start;
  display:grid
}
.shop-payments__left {
  gap:var(--shop-spacing-lg);
  flex-direction:column;
  display:flex
}
.shop-payments__right {
  gap:var(--shop-spacing-lg);
  flex-direction:column;
  display:flex;
  position:sticky;
  top:100px
}
.shop-payments__actions {
  gap:var(--shop-spacing-sm);
  flex-direction:column;
  display:flex
}
.shop-payments__actions .shop-btn {
  width:100%
}
.shop-payment-methods {
  gap:var(--shop-spacing-md);
  grid-template-columns:repeat(2,1fr);
  display:grid
}
.shop-payment-method {
  padding:var(--shop-spacing-md);
  border:2px solid var(--shop-gray-200);
  border-radius:var(--shop-border-radius);
  background-color:var(--shop-color-base-100);
  cursor:pointer;
  transition:var(--shop-transition);
  display:block;
  position:relative
}
.shop-payment-method:hover {
  border-color:var(--shop-gray-400);
  box-shadow:0 2px 8px #00000014
}
.shop-payment-method--active {
  border-color:var(--shop-color-primary);
  background-color:var(--shop-color-primary-light,#3b82f60d)
}
.shop-payment-method--active .shop-payment-method__check {
  opacity:1;
  color:var(--shop-color-primary)
}
.shop-payment-method__radio {
  opacity:0;
  pointer-events:none;
  position:absolute
}
.shop-payment-method__content {
  align-items:center;
  gap:var(--shop-spacing-sm);
  display:flex
}
.shop-payment-method__icon {
  border-radius:var(--shop-border-radius);
  background-color:var(--shop-gray-100);
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  width:40px;
  height:40px;
  display:flex
}
.shop-payment-method__icon img {
  width:100%
}
.shop-payment-method__info {
  text-align:left;
  flex-direction:column;
  flex:1;
  gap:2px;
  display:flex
}
.shop-payment-method__name {
  font-size:var(--shop-font-size-base);
  color:var(--shop-gray-900);
  font-weight:600;
  line-height:1.3
}
.shop-payment-method__desc {
  font-size:var(--shop-font-size-xs);
  color:var(--shop-gray-600);
  line-height:1.3
}
.shop-payment-method__check {
  top:var(--shop-spacing-sm);
  right:var(--shop-spacing-sm);
  opacity:0;
  width:18px;
  height:18px;
  transition:var(--shop-transition);
  flex-shrink:0;
  position:absolute
}
.shop-order-info {
  gap:var(--shop-spacing-md);
  flex-direction:column;
  display:flex
}
.shop-order-info__row {
  padding-bottom:var(--shop-spacing-md);
  border-bottom:1px solid var(--shop-gray-200);
  justify-content:space-between;
  align-items:center;
  display:flex
}
.shop-order-info__row:last-child {
  border-bottom:none;
  padding-bottom:0
}
.shop-order-info__label {
  font-size:var(--shop-font-size-base);
  color:var(--shop-gray-600)
}
.shop-order-info__value {
  font-size:var(--shop-font-size-base);
  color:var(--shop-gray-900);
  font-weight:600
}
.shop-order-summary__amount {
  font-size:var(--shop-font-size-xl);
  color:var(--shop-color-primary)
}
.shop-qrcode-container {
  align-items:center;
  gap:var(--shop-spacing-lg);
  padding:var(--shop-spacing-lg)0;
  flex-direction:column;
  display:flex
}
.shop-qrcode-wrapper {
  padding:var(--shop-spacing-lg);
  background-color:var(--shop-gray-50);
  border-radius:var(--shop-border-radius);
  border:2px dashed var(--shop-gray-300);
  justify-content:center;
  align-items:center;
  display:flex
}
.shop-qrcode-image {
  width:200px;
  height:auto;
  display:block
}
.shop-qrcode-info {
  text-align:center;
  gap:var(--shop-spacing-sm);
  flex-direction:column;
  display:flex
}
.shop-qrcode-amount {
  font-size:var(--shop-font-size-lg);
  color:var(--shop-gray-900);
  margin:0
}
.shop-qrcode-amount strong {
  font-size:var(--shop-font-size-xl);
  color:var(--shop-color-primary);
  font-weight:700
}
.shop-qrcode-tip {
  font-size:var(--shop-font-size-base);
  color:var(--shop-gray-600);
  margin:0
}
.shop-qrcode-status {
  justify-content:center;
  align-items:center;
  gap:var(--shop-spacing-sm);
  margin-top:var(--shop-spacing-md);
  padding:var(--shop-spacing-sm)var(--shop-spacing-md);
  background-color:var(--shop-color-primary-light,#3b82f61a);
  border-radius:var(--shop-border-radius);
  font-size:var(--shop-font-size-sm);
  color:var(--shop-color-primary);
  display:flex
}
.shop-loading-spinner {
  border:2px solid var(--shop-color-primary-light,#3b82f64d);
  border-top-color:var(--shop-color-primary);
  border-radius:50%;
  width:16px;
  height:16px;
  animation:1s linear infinite spin
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
.shop-redirect-container {
  gap:var(--shop-spacing-sm);
  flex-direction:column;
  display:flex
}
.shop-redirect-link {
  font-size:var(--shop-font-size-base);
  color:var(--shop-color-primary);
  transition:var(--shop-transition);
  text-decoration:none
}
.shop-redirect-link:hover {
  text-decoration:underline
}
.shop-redirect-tip {
  font-size:var(--shop-font-size-sm);
  color:var(--shop-gray-500);
  margin:0
}
.shop-loading,
.shop-error {
  padding:var(--shop-spacing-xl);
  text-align:center;
  font-size:var(--shop-font-size-base);
  color:var(--shop-gray-600)
}
.shop-error {
  color:var(--shop-color-error)
}
@media (width<=1024px) {
  .shop-payments {
    grid-template-columns:1fr
  }
  .shop-payments__right {
    position:static
  }
}
@media (width<=768px) {
  .shop-payment-methods {
    grid-template-columns:1fr
  }
  .shop-qrcode-wrapper {
    padding:var(--shop-spacing-md)
  }
  .shop-qrcode-image {
    width:180px
  }
  .shop-qrcode-amount {
    font-size:var(--shop-font-size-base)
  }
  .shop-qrcode-amount strong {
    font-size:var(--shop-font-size-lg)
  }
  .shop-qrcode-tip {
    font-size:var(--shop-font-size-sm)
  }
}
.medium-zoom-overlay,
.medium-zoom-image--opened {
  z-index:999
}
/*$vite$:1*/