/* ========================================
   APPENDED STYLES: Mobile Enhancements
   ======================================== */
@media (hover: none) and (pointer: coarse) {
  .product-card:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  .product-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
  .quick-link-item:hover {
    transform: none;
  }
  .quick-link-item:active {
    transform: scale(0.95);
  }
  button:active,
  .slider-nav:active,
  .banner-nav:active {
    transform: scale(0.9);
  }
  a:active {
    opacity: 0.7;
  }
}

@media (max-width: 768px) {
  .mobile-header {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100% !important;
    margin: 0;
    padding: 0;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  .header_in {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 50px;
    padding: 0 10px;
    box-sizing: border-box;
  }
  body {
    padding-top: 50px;
  }
  .header_menu {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='21' y2='18'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  .header_logo {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 12px;
  }
  .header_logo img {
    height: 32px;
    width: auto;
  }
  .header_in_r {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }
  .open_store {
    background-color: #f39c12;
    color: #fff;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 15px;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
  }
  .header_search {
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
  }
  .header_noti {
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'%3E%3C/path%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    cursor: pointer;
  }
  .header_noti::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 6px;
    background-color: #ff0000;
    border-radius: 50%;
  }
  .chat-widget__button {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 20px;
    text-decoration: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
  }
  .chat-widget__button i {
    display: none;
  }
  .mobile-nav {
    display: flex !important;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #e0e0e0;
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .top-utility-bar,
  .main-header,
  .category-nav {
    display: none;
  }
  .mobile-nav-item {
    min-height: 44px;
    min-width: 48px;
    padding: 6px 8px;
  }
  .category-list li a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  button,
  .slider-nav,
  .banner-nav {
    min-height: 10px;
    min-width: 10px;
  }
  .products-track,
  .category-list,
  .category-nav {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .product-card {
    scroll-snap-align: start;
  }
  .products-track,
  .banner-slider,
  .slider-nav,
  .banner-nav {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .search-input {
    font-size: 16px;
  }
  .product-actions {
    display: none;
  }
  .product-image img,
  .banner-slide img {
    will-change: transform;
  }
  .products-track::-webkit-scrollbar,
  .brands-tabs::-webkit-scrollbar,
  .new-products-track::-webkit-scrollbar {
    display: none;
  }
  .products-track,
  .brands-tabs,
  .new-products-track {
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .container {
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: 0 auto;
  }
  .banner-section {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  .banner-slider {
    max-width: 100%;
    width: 100%;
  }
  .banner-slide img {
    width: 100%;
    height: 330px;
    object-fit: cover;
  }
  .flash-sale .section-header {
    width: 100%;
    max-width: 100%;
    height: 90px;
    background: #000;
    padding: 15px;
    margin: 0 auto;
    border: none;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
  }
  .flash-sale .section-header .container {
    max-width: 100%;
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  .flash-sale .section-title {
    font-size: 16px;
    color: #fff;
    margin: 0;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: flex-start;
  }
  .flash-sale .section-title .icon {
    font-size: 18px;
    color: #ff6f00;
  }
  .countdown {
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    justify-content: flex-start;
  }
  .countdown-label {
    margin-right: 8px;
    font-size: 14px;
    color: #fff;
  }
  .time-box {
    background-color: #ff6f00;
    color: #fff;
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
    font-size: 14px;
  }
  .time-separator {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    margin: 0 1px;
  }
  .date-tabs {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
  }
  .date-tab {
    flex: 1;
    padding: 8px 0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    white-space: nowrap;
  }
  .date-tab.active {
    background-color: #fff;
    color: #000;
    border-color: #fff;
    font-weight: 700;
  }
  .it720_downbox li {
    width: 20% !important;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  .banner-slide img {
    height: 200px;
  }
  .quick-links {
    padding: 10px 0;
  }
  .quick-links .container {
    padding: 8px;
  }
  .product-section {
    padding: 10px 0;
  }
  .flash-sale .section-header {
    height: 100px;
  }
}

@media (max-width: 375px) {
  .container {
    padding: 0 8px;
  }
  .quick-links-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    padding: 15px 8px;
  }
  .quick-icon {
    width: 48px;
    height: 48px;
  }
  .quick-link-item span {
    font-size: 10px;
  }
  .flash-sale .product-card {
    flex: 0 0 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
  }
  .product-card {
    flex: 0 0 120px;
    min-width: 120px;
  }
  .product-title {
    font-size: 10px;
    height: 28px;
  }
  .current-price {
    font-size: 14px;
  }
  .original-price {
    font-size: 9px;
  }
  .discount-badge {
    font-size: 9px;
    padding: 2px 5px;
  }
  .section-title {
    font-size: 15px;
  }
  .banner-slide img {
    height: 250px;
  }
  .mobile-nav-item .nav-icon {
    font-size: 21px;
  }
  .mobile-nav-item .nav-label {
    font-size: 9px;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
  .banner-slide img {
    height: 480px;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .product-image img,
  .banner-slide img,
  .quick-icon img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@supports (padding: env(safe-area-inset-bottom)) {
  .mobile-nav {
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }
  body {
    padding-bottom: calc(50px + env(safe-area-inset-bottom));
  }
}

/* ========================================
   APPENDED STYLES: Flash Sale New
   ======================================== */
.iopen-mall-item-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 30px auto;
}
.it902-tab-pdbox,
.it904-pds-box {
  width: 100%;
}
.it902-carousel-box,
.it904-carousel-box {
  padding: 0;
  margin: 0;
  list-style: none;
}
.it902-carousel-box .owl-stage-outer,
.it904-carousel-box .owl-stage-outer {
  position: relative;
  overflow: hidden;
}
.it902-carousel-box .owl-stage,
.it904-carousel-box .owl-stage {
  display: flex;
  gap: 10px;
}
.it902-carousel-box .owl-item,
.it904-carousel-box .owl-item {
  flex: 0 0 calc(16.666% - 10px);
  list-style: none;
}
.it904-carousel-box .owl-item {
  flex: 0 0 calc(20% - 10px);
}
.it902-carousel-box .owl-item li,
.it904-carousel-box .owl-item li {
  list-style: none;
}
.pic-pds-default01 {
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pic-pds-default01:hover {
  border-color: #ff6f00;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.pic-pds-imgbox {
  position: relative;
  width: 100%;
  padding-top: 100%;
  background-color: #fff;
  overflow: hidden;
}
.pic-pds-imgbox img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.pic-pds-default01:hover .pic-pds-imgbox img {
  transform: scale(1.05);
}
.pic_pds_discount_tag {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #d32f2f;
  color: #fff;
  padding: 2px 6px;
  border-radius: 0 0 6px 0;
  z-index: 2;
  font-size: 12px;
  font-weight: bold;
}
.pic_pds_discount_number {
  font-size: 14px;
}
.pic-pds-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 3;
}
.pic-pds-default01:hover .pic-pds-btn {
  transform: translateY(0);
}
.pic-pds-addlist,
.pic-pds-addcart {
  flex: 1;
}
.pic-pds-addlist a,
.pic-pds-addcart a {
  display: block;
  color: #fff;
  text-align: center;
  padding: 8px 0;
  font-size: 12px;
  text-decoration: none;
  transition: background 0.2s;
}
.pic-pds-addlist a:hover,
.pic-pds-addcart a:hover {
  background-color: #ff6f00;
}
.pic-pds-addlist a {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.pic-pds-infobox {
  padding: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.pic-pds-infobox h2 {
  margin: 0 0 8px 0;
  font-size: 13px;
  line-height: 1.4;
  height: 36px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pic-pds-infobox h2 a {
  color: #333;
  text-decoration: none;
}
.pic-pds-infobox h2 a:hover {
  color: #ff6f00;
}
.pic-pds-price ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.pic-pds-price_02 {
  color: #ff6f00;
  font-size: 18px;
  font-weight: bold;
}
.pic-pds-price_02 span {
  font-size: 12px;
}
.pic-pds-price_01 {
  color: #999;
  font-size: 11px;
  text-decoration: line-through;
}
.owl-nav {
  display: none; 
}
.it907-newstore-pdbox {
  width: 100%;
  border: 1px solid #f2f2f2;
  border-radius: 12px;
  overflow: hidden;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  padding: 20px 15px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}
.it907-newstore-pdbox:hover {
  border-color: #ff6f00;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.it907-newstore-logo {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-bottom: none;
  padding: 0;
}
.it907-newstore-logo img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid #eee;
  object-fit: contain;
  background: #fff;
}
.it907-newstore-logo h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}
.it907-newstore-logo h3 a {
  color: #333;
  text-decoration: none;
}
.it907-newstore-pds {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1;
}
.it907-newstore-pds li {
  width: 100%;
}
.pic-pds-default02 {
  display: flex;
  position: relative;
  background: #fff;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.pic-pds-default02:hover {
  border-color: transparent;
  box-shadow: none;
}
.pic-pds-flexbox {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
}
.pic-pds-default02 .pic-pds-imgbox {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  padding-top: 0;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  border: 1px solid #eee;
}
.pic-pds-default02 .pic-pds-imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pic-pds-default02 .pic-pds-infobox {
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100px;
}
.pic-pds-default02 .pic-pds-infobox h2 {
  font-size: 14px;
  line-height: 1.5;
  height: 42px;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #333;
}
.pic-pds-default02 .pic-pds-price {
  margin-top: auto;
}
.pic-pds-default02 .pic_pds_discount_tag {
  left: 0;
  top: 0;
  padding: 3px 6px;
  font-size: 12px;
  background-color: #009e96;
  color: #fff;
  border-radius: 0 0 6px 0;
  position: absolute;
  z-index: 2;
  line-height: 1.2;
}
.pic-pds-default02 .pic_pds_discount_number {
  font-size: 14px;
  font-weight: bold;
  display: block;
  text-align: center;
}
.pic-pds-default02 .pic-pds-price_02 {
  color: #e6a23c;
  font-size: 20px;
  font-weight: bold;
}
.pic-pds-default02 .pic-pds-price_02 span {
  font-size: 14px;
}
.pic-pds-default02 .pic-pds-price_01 {
  color: #bbb;
  font-size: 12px;
  text-decoration: line-through;
  margin-left: 5px;
}
.pic-pds-default02 .pic-pds-btn {
  display: none !important;
}
.pic-pds-prodlink {
  display: none;
}
.iopen-mall-item-title h3 {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin: 0;
  display: flex;
  align-items: center;
}
.iopen-mall-item-title h3::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-right: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333333'%3E%3Cpath d='M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3zm5 15h-2v-6H9v6H7v-7.81l5-4.5 5 4.5V18z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.it907-carousel-box .owl-stage {
  display: flex;
  width: 100%;
}
.it907-carousel-box .owl-item {
  flex: 0 0 33.333%;
  max-width: 33.333%;
  padding-right: 20px;
  box-sizing: border-box;
}
.it907-carousel-box .owl-item:last-child {
  padding-right: 0;
}
.it902-item-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  width: 100%;
}
.it902-item-title h3 {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
}
.it902-item-title h3::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6f00'%3E%3Cpath d='M13 2L3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 8px;
}
.it902-right-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
}
.it902-time-box {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin-right: 15px;
}
.it902-time-box p {
  margin: 0 10px 0 0;
  font-size: 14px;
  color: #ccc;
  font-weight: normal;
}
.it902-time-box span {
  background-color: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  min-width: 32px;
  text-align: center;
  margin: 0 2px;
  font-family: monospace;
}
input[name^="it902-tabs"] {
  display: none;
}
input[name^="it902-tabs"] + label {
  display: inline-block;
  padding: 8px 20px;
  background-color: #333;
  color: #ccc;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
input[name^="it902-tabs"] + label:hover {
  background-color: #444;
  color: #fff;
}
input[name^="it902-tabs"]:checked + label {
  background-color: #ff6f00;
  color: #fff;
  font-weight: bold;
}
@media (max-width: 768px) {
  .it902-carousel-box .owl-stage,
  .it904-carousel-box .owl-stage {
    display: flex;
    width: auto !important;
    transform: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .it902-carousel-box .owl-stage::-webkit-scrollbar,
  .it904-carousel-box .owl-stage::-webkit-scrollbar {
    display: none;
  }
  .it902-carousel-box .owl-item,
  .it904-carousel-box .owl-item {
    flex: 0 0 130px;
    width: 130px !important;
    margin-right: 10px !important;
    scroll-snap-align: start;
    display: block;
  }
  .it902-carousel-box .owl-item li,
  .it904-carousel-box .owl-item li {
    height: 100%;
    display: block;
  }
  .pic-pds-default01 {
    box-shadow: none;
    border: 1px solid #eee;
    height: 100%;
  }
  .pic-pds-infobox {
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .pic-pds-infobox h2 {
    font-size: 13px;
    height: 36px;
    margin-bottom: 4px;
    white-space: normal;
  }
  .pic-pds-price_02 {
    font-size: 16px;
  }
  .pic-pds-btn {
    display: none !important;
  }
  .pic-pds-default01:hover {
    transform: none;
    box-shadow: none;
  }
  .it902-item-title {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
    gap: 10px;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
  }
  .it907-carousel-box .owl-stage {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch;
    width: auto;
  }
  .it907-carousel-box .owl-item {
    flex: 0 0 85%;
    max-width: 85%;
    width: 85%;
    padding-right: 15px;
    scroll-snap-align: start;
  }
  .it907-newstore-pdbox {
    padding: 15px;
  }
  .it907-newstore-logo img {
    width: 60px;
    height: 60px;
  }
  .pic-pds-default02 .pic-pds-imgbox {
    width: 80px;
    height: 80px;
  }
  .pic-pds-default02 .pic-pds-infobox {
    height: 80px;
  }
  .iopen-mall-item-container {
    padding: 0 10px;
  }
  .it902-item-title h3 {
    font-size: 20px;
  }
  .it902-right-tabs {
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  .it902-time-box {
    width: 100%;
    margin-right: 0;
    margin-bottom: 8px;
  }
  .it902-time-box span {
    background-color: #ff6f00;
    padding: 2px 4px;
    min-width: 24px;
    font-size: 14px;
  }
  input[name^="it902-tabs"] + label {
    padding: 6px 12px;
    font-size: 13px;
    flex: 1;
    text-align: center;
    background-color: #333;
    border: 1px solid #555;
  }
  input[name^="it902-tabs"]:checked + label {
    background-color: #fff;
    color: #000;
  }
}

/* ========================================
   APPENDED STYLES: Popup
   ======================================== */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.popup-overlay.show {
  opacity: 1;
  visibility: visible;
}
.fancybox-wrap {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 90% !important;
  max-width: 600px;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.fancybox-inner {
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  position: relative;
  width: 100% !important;
  height: auto !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.it429-fancybox-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.it429-fancybox-close:hover {
  background: #000;
}
.it429-owl-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.owl-stage-outer {
  overflow: hidden;
}
.owl-stage {
  display: flex;
  transition: transform 0.5s ease;
}
.owl-item {
  flex: 0 0 100%;
  width: 100%;
}
.it429_item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
.owl-dots {
  text-align: center;
  margin-top: 10px;
}
.owl-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #ddd;
  border-radius: 50%;
  margin: 0 4px;
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background-color 0.2s;
}
.owl-dot.active {
  background: #ff6b00;
}
.it429-todayNotShow {
  margin-top: 15px;
  text-align: center;
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.it429-todayNotShow input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.it429-todayNotShow label {
  cursor: pointer;
  user-select: none;
}
@media (max-width: 768px) {
  .fancybox-wrap {
    width: 95% !important;
  }
  .fancybox-inner {
    padding: 10px;
  }
  .owl-dot {
    width: 6px;
    height: 6px;
    margin: 0 3px;
  }
  .it429-fancybox-close {
    width: 24px;
    height: 24px;
    font-size: 12px;
    top: -10px;
    right: -10px;
  }
}

/* ========================================
   APPENDED STYLES: Mobile Menu
   ======================================== */
.mobile-side-menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 2000;
  transition: left 0.3s ease;
  display: flex;
  flex-direction: column;
  font-family: 'Noto Sans TC', sans-serif;
}
.mobile-side-menu.open {
  left: 0;
}
.mobile-menu-header {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  background: #fff;
  height: 50px;
  box-sizing: border-box;
}
.close-menu-btn {
  background: none;
  border: none;
  font-size: 24px;
  padding: 0;
  cursor: pointer;
  color: #333;
  margin-right: 15px;
  display: flex;
  align-items: center;
}
.icon-back::before {
  content: '‹';
  font-family: Arial, sans-serif;
  font-size: 32px;
  line-height: 1;
  font-weight: bold;
}
.menu-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  color: #333;
  font-weight: 500;
  margin-right: 24px;
}
.mobile-menu-user {
  padding: 10px 15px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  font-size: 12px;
}
.mobile-menu-user span {
  color: #ff6f00;
}
.menu-login-btn {
  border: 1px solid #ff6f00;
  color: #ff6f00;
  background: #fff;
  padding: 2px 12px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.menu-login-btn::before {
  content: '➜';
  font-size: 10px;
  display: inline-block;
  transform: rotate(0deg);
}
.mobile-menu-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.mobile-category-sidebar {
  width: 100px;
  background-color: #1a1a1a;
  overflow-y: auto;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}
.mobile-category-sidebar li {
  padding: 15px 10px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  border-bottom: 1px solid #333;
}
.mobile-category-sidebar li.active {
  background-color: #fff;
  color: #333;
  font-weight: 500;
  position: relative;
}
.mobile-category-content {
  flex: 1;
  background-color: #fff;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.current-category-bar {
  background-color: #ffe0cc;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ff6f00;
  font-size: 14px;
}
.current-category-bar span {
  padding: 10px 15px;
  font-weight: 500;
}
.expand-btn {
  background-color: #ff6f00;
  border: none;
  color: #fff;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.expand-btn::after {
  content: '▼';
}
.subcategory-title {
  padding: 15px;
  font-size: 16px;
  color: #333;
  font-weight: 500;
}
.subcategory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px 5px;
  padding: 0 15px 20px 15px;
}
.subcategory-item {
  text-align: center;
  font-size: 13px;
  color: #333;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  word-break: break-word;
  line-height: 1.4;
}
@media (min-width: 769px) {
  .mobile-side-menu {
    display: none;
  }
}

/* ========================================
   APPENDED STYLES: Dropdown
   ======================================== */
.category-list {
  position: relative !important;
}
.category-list li {
  position: static !important;
}
.category-dropdown {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  background-color: #fafafa;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  border-top: 1px solid #eee;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.category-list li:hover .category-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-scroll-container {
  max-height: 450px;
  overflow-y: auto;
  padding: 20px 30px;
  scrollbar-width: thin;
  scrollbar-color: #ccc #f5f5f5;
}
.dropdown-scroll-container::-webkit-scrollbar {
  width: 8px;
}
.dropdown-scroll-container::-webkit-scrollbar-track {
  background: #f5f5f5;
}
.dropdown-scroll-container::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}
.dropdown-inner {
  display: flex;
  gap: 40px;
}
.dropdown-categories {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-content: flex-start;
  align-items: flex-start;
}
.category-column {
  width: calc(33.33% - 20px);
  min-width: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: auto;
}
.category-group-title {
  color: var(--primary-orange) !important;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  display: block;
  text-decoration: none;
  border-bottom: none !important;
  padding: 0 !important;
  line-height: 1.4;
}
.category-group-title:hover {
  color: var(--primary-orange-dark) !important;
  background: none !important;
}
.category-sub-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.category-sub-list li {
  margin-bottom: 6px;
  display: block;
  line-height: 1.4;
}
.category-sub-list a {
  color: #333 !important;
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s;
  padding: 0 !important;
  display: inline-block !important;
  border: none !important;
  background: none !important;
}
.category-sub-list a:hover {
  color: var(--primary-orange) !important;
  background: none !important;
  padding-left: 0 !important;
  text-decoration: underline;
}
.dropdown-brands {
  width: 420px;
  flex-shrink: 0;
  border-left: 1px solid #eee;
  padding-left: 30px;
}
.brands-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.brand-item {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;
  border-radius: 8px;
  height: 70px;
  padding: 5px;
  transition: all 0.2s;
  background-color: #fff;
  overflow: hidden;
}
.brand-item:hover {
  border-color: var(--primary-orange);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transform: translateY(-2px);
}
.brand-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* ========================================

   Category/Search Page Styles

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



/* Breadcrumb */

.breadcrumb {

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

  padding: 10px 0;

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

  margin-bottom: 20px;

}



.breadcrumb .container {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 13px;

}



.breadcrumb a {

  color: var(--text-secondary);

  text-decoration: none;

}



.breadcrumb a:hover {

  color: var(--primary-orange);

}



.breadcrumb .separator {

  color: var(--text-light);

}



.breadcrumb .current {

  color: var(--text-primary);

  font-weight: 500;

}



/* Category Page Layout */

.category-page {

  padding-bottom: 40px;

}



.page-layout {

  display: flex;

  gap: 20px;

}



/* Sidebar (Category Tree) */

.category-sidebar {

  width: 220px;

  flex-shrink: 0;

  background-color: #fff;

}



.sidebar-title {

  font-size: 18px;

  font-weight: 700;

  color: var(--text-primary);

  margin-bottom: 15px;

  padding-left: 10px;

  border-left: 4px solid var(--primary-orange);

  line-height: 1.2;

}



.category-tree {

  list-style: none;

  padding: 0;

  margin: 0;

}



.category-tree > li {

  margin-bottom: 5px;

}



.category-tree-link {

  display: block;

  padding: 8px 12px;

  color: #333;

  font-size: 14px;

  text-decoration: none;

  transition: all 0.2s;

}



.category-tree-link:hover {

  color: var(--primary-orange);

  background-color: #f9f9f9;

}



.category-tree-link.active {

  color: var(--primary-orange);

  background-color: #fff5e6; /* Light orange background */

  font-weight: 500;

}



.category-tree-link.has-children {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.category-tree-link.has-children::after {

    content: '%�?;

    transform: rotate(90deg);

    font-size: 12px;

}



/* Products Area */

.products-area {

  flex: 1;

}



.results-header {

  display: flex;

  align-items: baseline;

  gap: 15px;

  margin-bottom: 15px;

}



.page-title {

  font-size: 20px;

  font-weight: 700;

  color: #333;

  margin: 0;

}



.result-count {

  font-size: 13px;

  color: #666;

}



.result-count strong {

  color: var(--primary-orange);

  font-weight: 700;

}



/* Sort Toolbar */

.sort-toolbar {

  margin-bottom: 20px;

  background-color: #f8f8f8;

  border: 1px solid #eee;

  padding: 0;

}



.sort-tabs {

  display: flex;

}



.sort-tab {

  padding: 10px 20px;

  background: none;

  border: none;

  border-right: 1px solid #eee;

  font-size: 13px;

  color: #666;

  cursor: pointer;

  display: flex;

  align-items: center;

  gap: 4px;

}



.sort-tab:hover {

  color: var(--primary-orange);

  background-color: #fff;

}



.sort-tab.active {

  background-color: #fff;

  color: var(--primary-orange);

  font-weight: 700;

  border-bottom: 2px solid var(--primary-orange); /* Highlight active tab */

}



.sort-tab .arrow {

  font-size: 10px;

}



/* Products Grid */

.products-grid {

  display: grid;

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

  gap: 15px;

  margin-bottom: 30px;

}



/* Product Card (Specific for Category Page) */

.product-card {

  background: #fff;

  border: 1px solid #eee;

  border-radius: 4px;

  overflow: hidden;

  transition: box-shadow 0.2s;

  position: relative;

}



.product-card:hover {

  box-shadow: 0 4px 12px rgba(0,0,0,0.1);

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

}



.product-image-wrapper {

  position: relative;

  padding-top: 100%; /* Square image */

  overflow: hidden;

}



.product-image {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.out-of-stock-overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

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

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  font-weight: 700;

  font-size: 16px;

  z-index: 2;

}



.product-info {

  padding: 10px;

}



.product-title {

  font-size: 13px;

  color: #333;

  line-height: 1.4;

  height: 36px; /* 2 lines */

  overflow: hidden;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  margin-bottom: 8px;

}



.product-title:hover {

  color: var(--primary-orange);

}



.product-price-row {

  display: flex;

  align-items: baseline;

  gap: 6px;

  flex-wrap: wrap;

}



.product-price {

  color: var(--primary-orange);

  font-weight: 700;

  font-size: 16px;

}



.product-price-original {

  color: #999;

  font-size: 12px;

  text-decoration: line-through;

}



.product-tags {

  margin-top: 6px;

  display: flex;

  gap: 4px;

}



.tag-badge {

  font-size: 10px;

  padding: 1px 4px;

  border-radius: 2px;

  border: 1px solid;

}



.tag-free-shipping {

  color: var(--primary-orange);

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

}



.tag-discount {

  background-color: #28a745; /* Green */

  color: #fff;

  border-color: #28a745;

}



/* Pagination */

.pagination {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 8px;

  margin-bottom: 20px;

}



.page-numbers {

  display: flex;

  align-items: center;

  gap: 5px;

}



.page-btn {

  width: 32px;

  height: 32px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid #ddd;

  background: #fff;

  color: #666;

  font-size: 13px;

  cursor: pointer;

  border-radius: 4px;

}



.page-btn:hover {

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

  color: var(--primary-orange);

}



.page-btn.active {

  background: var(--primary-orange);

  color: #fff;

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

}



.page-btn.next, .page-btn.last {

    width: auto;

    padding: 0 10px;

}



.pagination-jump {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    font-size: 13px;

    color: #666;

}



.page-select {

    padding: 4px 8px;

    border: 1px solid #ddd;

    border-radius: 4px;

}



/* Responsive */

@media (max-width: 992px) {

  .products-grid {

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

  }

  .category-sidebar {

    display: none; /* Hide sidebar on mobile/tablet for now or move to off-canvas */

  }

}



@media (max-width: 768px) {

  .category-page {

    padding-top: 0;

    padding-bottom: 60px; /* Space for bottom nav */

  }



  .breadcrumb {

    padding: 8px 12px;

    background-color: #f5f5f5;

    margin-bottom: 0;

    border-bottom: none;

  }



  .breadcrumb .container {

    padding: 0;

  }



  /* Hide Desktop Elements */

  .top-utility-bar,

  .main-header,

  .category-nav,

  .category-sidebar {

    display: none !important;

  }



  /* Mobile Layout Adjustments */

  .page-layout {

    display: block;

  }



  .products-area {

    width: 100%;

  }



  /* Mobile Sort Bar */

  .sort-toolbar {

    position: sticky;

    top: 50px; /* Below mobile header */

    z-index: 99;

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

    margin: 0;

    padding: 0;

    border: none;

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

    border-radius: 0;

  }



  .sort-tabs {

    width: 100%;

    display: flex;

    justify-content: space-between;

  }



  .sort-tab {

    flex: 1;

    justify-content: center;

    padding: 12px 0;

    font-size: 14px;

    border: none;

    color: #333;

  }



  .sort-tab.active {

    color: var(--primary-orange);

    border-bottom: 2px solid var(--primary-orange);

    background: #fff;

  }



  /* Mobile Sub-category Tabs */

  .mobile-subcategory-tabs-container {

    display: flex !important;

    position: sticky;

    top: 91px; /* 50px header + ~41px sort bar */

    z-index: 98;

    background: #fff;

    width: 100%; /* Ensure full width */

    overflow: hidden; /* Prevent overflow */

  }



  .mobile-subcategory-tabs {

    display: flex;

    background: #fff;

    overflow-x: auto;

    white-space: nowrap;

    padding: 0;

    position: relative;

    border-bottom: 1px solid #eee;

    -webkit-overflow-scrolling: touch;

    flex: 1;

    min-width: 0;

    width: 100%; /* Ensure it takes full width for scrolling */

  }



  .mobile-subcategory-tabs::-webkit-scrollbar {

    display: none;

  }



  .sub-tab-item {

    padding: 12px 16px;

    font-size: 14px;

    color: #666;

    text-decoration: none;

    display: inline-block;

    border-bottom: 2px solid transparent;

  }



  .sub-tab-item.active {

    color: var(--primary-orange);

    border-bottom-color: var(--primary-orange);

    background-color: #fff5e6;

  }



  .sub-tab-expand-btn {

    position: sticky;

    right: 0;

    top: 0;

    background: #f39c12;

    color: #fff;

    border: none;

    width: 40px;

    height: 45px; /* Match tab height */

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: -2px 0 5px rgba(0,0,0,0.1);

    z-index: 2;

  }



  /* Results Header */

  .results-header {

    padding: 12px;

    margin-bottom: 0;

    background: #fff;

    display: none !important; /* Mobile doesn't show "All Results" header usually, based on screenshot */

  }



  .page-title {

    font-size: 16px;

  }



  .result-count {

    font-size: 12px;

  }



  /* Mobile Product Grid */

  .products-grid {

    display: grid;

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

    gap: 10px;

    padding: 10px;

    background-color: #f5f5f5; /* Light gray background for contrast */

  }



  .product-card {

    border: none;

    box-shadow: none;

    background: #fff;

    padding-bottom: 8px;

    border-radius: 8px; /* Rounded corners for card */

  }



  .product-image-wrapper {

    border-radius: 8px 8px 0 0; /* Only top rounded */

    overflow: hidden;

  }



  .product-info {

    padding: 8px;

  }



  .product-title {

    font-size: 14px;

    line-height: 1.4;

    height: 40px;

    margin-bottom: 4px;

    color: #333;

    font-weight: normal;

  }



  .product-price {

    font-size: 18px;

    color: #ff5000; /* Taobao/Shopee Orange */

    font-weight: bold;

  }



  .product-price::before {

    content: '$';

    font-size: 12px;

  }



  .tag-discount {

    position: absolute;

    top: 0;

    right: 0;

    background-color: #008955; /* Dark green as in screenshot */

    color: #fff;

    padding: 4px 6px;

    font-size: 12px;

    border-radius: 0 0 0 8px;

    border: none;

    display: flex;

    flex-direction: column;

    align-items: center;

    line-height: 1.1;

  }

  

  .tag-discount::after {

    content: '��?;

    font-size: 10px;

  }



  /* Hide original tags container on mobile if we use absolute badge */

  .product-tags {

    display: none;

  }

  

  /* Pagination Mobile */

  .pagination {

    display: none; /* Usually infinite scroll on mobile, hiding for now based on screenshot */

  }

}



@media (max-width: 576px) {

  .products-grid {

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

  }

}

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

   Cart Page Styles

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



.cart-page {

  padding: var(--spacing-xl) 0;

  min-height: 60vh;

}



.page-title {

  display: flex;

  align-items: center;

  gap: var(--spacing-sm);

  font-size: 24px;

  font-weight: 700;

  color: var(--text-primary);

  margin-bottom: var(--spacing-xl);

}



.page-title .icon {

  font-size: 28px;

}



/* Cart Content Layout */

.cart-content {

  display: grid;

  grid-template-columns: 1fr 320px;

  gap: var(--spacing-xl);

  margin-bottom: var(--spacing-xl);

}



/* Cart List */

.cart-list {

  display: flex;

  flex-direction: column;

  gap: var(--spacing-md);

}



/* Store Group */

.cart-store-group {

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

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

  overflow: hidden;

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

}



.store-header {

  display: flex;

  align-items: center;

  gap: var(--spacing-md);

  padding: var(--spacing-md);

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

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

}



.store-info {

  display: flex;

  align-items: center;

  gap: var(--spacing-sm);

  flex: 1;

}



.store-avatar {

  width: 32px;

  height: 32px;

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

  object-fit: cover;

}



.store-name {

  font-size: 14px;

  font-weight: 600;

  color: var(--text-primary);

}



.store-link {

  font-size: 13px;

  color: var(--primary-orange);

}



/* Checkbox Styles */

.checkbox-wrapper {

  position: relative;

  display: flex;

  align-items: center;

  cursor: pointer;

}



.checkbox-wrapper input[type="checkbox"] {

  width: 18px;

  height: 18px;

  accent-color: var(--primary-orange);

  cursor: pointer;

}



/* Cart Item */

.cart-item {

  display: grid;

  grid-template-columns: 40px 100px 1fr 100px 120px 100px 80px;

  gap: var(--spacing-md);

  align-items: center;

  padding: var(--spacing-md);

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

}



.cart-item:last-child {

  border-bottom: none;

}



.item-image {

  width: 100px;

  height: 100px;

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

  overflow: hidden;

}



.item-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.item-info {

  display: flex;

  flex-direction: column;

  gap: var(--spacing-xs);

}



.item-name {

  font-size: 14px;

  color: var(--text-primary);

  line-height: 1.4;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.item-name:hover {

  color: var(--primary-orange);

}



.item-options {

  display: flex;

  gap: var(--spacing-sm);

  flex-wrap: wrap;

}



.item-options .option {

  font-size: 12px;

  color: var(--text-light);

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

  padding: 2px 8px;

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

}



.item-badges {

  display: flex;

  gap: var(--spacing-xs);

}



.item-badges .badge {

  font-size: 10px;

  padding: 2px 6px;

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

}



.item-badges .badge.free-ship {

  background-color: var(--primary-orange);

  color: var(--text-white);

}



.item-badges .badge.store-pickup {

  background-color: var(--primary-green);

  color: var(--text-white);

}



/* Item Price */

.item-price {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

}



.item-price .current {

  font-size: 16px;

  font-weight: 700;

  color: var(--primary-orange);

}



.item-price .original {

  font-size: 12px;

  color: var(--text-light);

  text-decoration: line-through;

}



/* Quantity Selector */

.item-quantity {

  display: flex;

  align-items: center;

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

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

  overflow: hidden;

}



.item-quantity .qty-btn {

  width: 32px;

  height: 32px;

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

  font-size: 16px;

  color: var(--text-primary);

  transition: background-color 0.2s;

}



.item-quantity .qty-btn:hover {

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

}



.item-quantity .qty-input {

  width: 48px;

  height: 32px;

  text-align: center;

  font-size: 14px;

  border: none;

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

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

}



/* Subtotal */

.item-subtotal {

  font-size: 16px;

  font-weight: 700;

  color: var(--primary-red);

  text-align: right;

}



/* Item Actions */

.item-actions {

  display: flex;

  gap: var(--spacing-xs);

}



.item-actions .action-btn {

  width: 32px;

  height: 32px;

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

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

  font-size: 14px;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.2s;

}



.item-actions .action-btn:hover {

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

  background-color: #fff5f0;

}



.item-actions .action-btn.delete:hover {

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

  background-color: #fff0f0;

}



/* Cart Summary */

.cart-summary {

  display: flex;

  flex-direction: column;

  gap: var(--spacing-md);

  position: sticky;

  top: 100px;

}



.summary-card {

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

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

  padding: var(--spacing-lg);

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

}



.summary-card h3 {

  font-size: 18px;

  font-weight: 600;

  color: var(--text-primary);

  margin-bottom: var(--spacing-lg);

  padding-bottom: var(--spacing-md);

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

}



.summary-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: var(--spacing-sm);

  font-size: 14px;

  color: var(--text-secondary);

}



.summary-row .amount {

  color: var(--text-primary);

}



.summary-row .amount.free {

  color: var(--primary-green);

}



.summary-row.discount .amount {

  color: var(--primary-red);

}



/* Coupon Section */

.coupon-section {

  display: flex;

  gap: var(--spacing-sm);

  margin: var(--spacing-md) 0;

}



.coupon-input {

  flex: 1;

  padding: 10px 12px;

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

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

  font-size: 14px;

}



.coupon-btn {

  padding: 10px 16px;

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

  color: var(--text-white);

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

  font-size: 14px;

  font-weight: 500;

  transition: background-color 0.2s;

}



.coupon-btn:hover {

  background-color: #444;

}



/* Summary Total */

.summary-total {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-top: var(--spacing-md);

  margin-top: var(--spacing-md);

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

}



.summary-total span:first-child {

  font-size: 16px;

  font-weight: 600;

  color: var(--text-primary);

}



.total-amount {

  font-size: 24px;

  font-weight: 700;

  color: var(--primary-red);

}



/* Checkout Button */

.checkout-button {

  width: 100%;

  padding: 16px;

  background-color: var(--primary-orange);

  color: var(--text-white);

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

  font-size: 16px;

  font-weight: 600;

  margin-top: var(--spacing-md);

  transition: background-color 0.2s;

}



.checkout-button:hover {

  background-color: #e55a00;

}



/* Payment Methods */

.payment-methods {

  margin-top: var(--spacing-md);

  text-align: center;

}



.payment-methods p {

  font-size: 12px;

  color: var(--text-light);

  margin-bottom: var(--spacing-sm);

}



.payment-icons {

  display: flex;

  justify-content: center;

  gap: var(--spacing-md);

  font-size: 24px;

}



/* Promo Card */

.promo-card {

  background-color: #fff5f0;

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

  padding: var(--spacing-md);

  border: 1px dashed var(--primary-orange);

}



.promo-card h4 {

  font-size: 14px;

  font-weight: 600;

  color: var(--primary-orange);

  margin-bottom: var(--spacing-sm);

}



.promo-card ul {

  list-style: none;

}



.promo-card li {

  font-size: 13px;

  color: var(--text-secondary);

  padding: 4px 0;

  padding-left: 16px;

  position: relative;

}



.promo-card li::before {

  content: "%�?;

  position: absolute;

  left: 0;

  color: var(--primary-orange);

}



/* Cart Footer */

.cart-footer {

  display: flex;

  justify-content: space-between;

  align-items: center;

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

  padding: var(--spacing-lg);

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

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

  position: sticky;

  bottom: 0;

  z-index: 50;

  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);

}



.footer-left {

  display: flex;

  align-items: center;

  gap: var(--spacing-md);

}



.select-all-label {

  font-size: 14px;

  color: var(--text-primary);

}



.delete-selected,

.move-to-favorites {

  padding: 8px 16px;

  font-size: 13px;

  color: var(--text-secondary);

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

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

  transition: all 0.2s;

}



.delete-selected:hover {

  color: var(--primary-red);

  background-color: #fff0f0;

}



.move-to-favorites:hover {

  color: var(--primary-orange);

  background-color: #fff5f0;

}



.footer-right {

  display: flex;

  align-items: center;

  gap: var(--spacing-xl);

}



.selected-info {

  font-size: 14px;

  color: var(--text-secondary);

}



.selected-count {

  color: var(--primary-orange);

  font-weight: 600;

}



.total-info {

  font-size: 14px;

  color: var(--text-primary);

}



.total-price {

  font-size: 24px;

  font-weight: 700;

  color: var(--primary-red);

}



.checkout-btn-lg {

  padding: 14px 40px;

  background-color: var(--primary-orange);

  color: var(--text-white);

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

  font-size: 16px;

  font-weight: 600;

  transition: background-color 0.2s;

}



.checkout-btn-lg:hover {

  background-color: #e55a00;

}



/* Recommendations */

.recommendations {

  margin-top: var(--spacing-xl);

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

  padding: var(--spacing-xl);

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

}



.recommendations .products-grid {

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

}



/* Responsive */

@media (max-width: 1200px) {

  .cart-content {

    grid-template-columns: 1fr 280px;

  }



  .cart-item {

    grid-template-columns: 40px 80px 1fr 80px 100px 80px 60px;

  }

}



@media (max-width: 992px) {

  .cart-content {

    grid-template-columns: 1fr;

  }



  .cart-summary {

    position: static;

    order: -1;

  }



  .recommendations .products-grid {

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

  }

}



@media (max-width: 768px) {

  .cart-item {

    grid-template-columns: 40px 80px 1fr;

    gap: var(--spacing-sm);

  }



  .item-price,

  .item-quantity,

  .item-subtotal,

  .item-actions {

    grid-column: 3;

    justify-self: start;

  }



  .cart-footer {

    flex-direction: column;

    gap: var(--spacing-md);

  }



  .footer-left,

  .footer-right {

    width: 100%;

    justify-content: space-between;

  }



  .footer-right {

    flex-wrap: wrap;

  }



  .checkout-btn-lg {

    width: 100%;

  }

}

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

   Checkout Page Styles

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



.checkout-page {

  padding: var(--spacing-xl) 0;

  background-color: #f5f5f5; /* Light grey background for checkout */

  min-height: 80vh;

}



.checkout-content {

  display: grid;

  grid-template-columns: 1fr 380px;

  gap: var(--spacing-lg);

}



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

   Checkout Steps

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

.checkout-steps {

  display: flex;

  align-items: center;

  margin-left: auto; /* Push to right in header */

}



.step {

  display: flex;

  align-items: center;

  gap: 6px;

  color: #ccc;

  font-weight: 500;

}



.step.active {

  color: var(--primary-orange);

}



.step.completed {

  color: var(--primary-green);

}



.step-number {

  width: 24px;

  height: 24px;

  border-radius: 50%;

  border: 2px solid currentColor;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 12px;

  font-weight: 700;

}



.step.active .step-number {

  background-color: var(--primary-orange);

  color: #fff;

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

}



.step.completed .step-number {

  background-color: var(--primary-green);

  color: #fff;

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

}



.step-line {

  width: 40px;

  height: 2px;

  background-color: #eee;

  margin: 0 10px;

}



.step-line.completed {

  background-color: var(--primary-green);

}



.secure-badge {

  display: flex;

  align-items: center;

  gap: 4px;

  color: var(--primary-green);

  font-weight: 600;

  font-size: 13px;

  margin-left: 30px;

}



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

   Checkout Sections (Left Column)

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

.checkout-section {

  background-color: #fff;

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

  padding: var(--spacing-lg);

  margin-bottom: var(--spacing-lg);

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

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

}



.checkout-section .section-title {

  font-size: 18px;

  font-weight: 700;

  margin-bottom: var(--spacing-lg);

  display: flex;

  align-items: center;

  gap: 8px;

  border-bottom: 1px solid #eee;

  padding-bottom: 12px;

}



/* Options (Radio Cards) */

.shipping-options,

.payment-options,

.invoice-options {

  display: flex;

  flex-direction: column;

  gap: var(--spacing-md);

}



.invoice-options {

  flex-direction: row;

  flex-wrap: wrap;

}



.shipping-option,

.payment-option,

.invoice-option {

  position: relative;

  cursor: pointer;

}



.shipping-option input,

.payment-option input,

.invoice-option input {

  position: absolute;

  opacity: 0;

}



.option-content {

  display: flex;

  align-items: center;

  padding: 16px;

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

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

  transition: all 0.2s;

}



.invoice-option span {

  display: inline-block;

  padding: 10px 20px;

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

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

  transition: all 0.2s;

  font-size: 14px;

}



/* Active States */

.shipping-option input:checked + .option-content,

.payment-option input:checked + .option-content {

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

  background-color: #fffbf8;

  box-shadow: 0 0 0 1px var(--primary-orange);

}



.invoice-option input:checked + span {

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

  background-color: var(--primary-orange);

  color: #fff;

}



.option-icon {

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 24px;

  margin-right: 16px;

}



.option-icon img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}



.option-info {

  flex: 1;

  display: flex;

  flex-direction: column;

}



.option-title {

  font-weight: 700;

  color: var(--text-primary);

  font-size: 15px;

}



.option-desc {

  font-size: 12px;

  color: var(--text-secondary);

  margin-top: 2px;

}



.option-price {

  font-weight: 700;

  font-size: 15px;

}



.option-price.free {

  color: var(--primary-green);

}



/* Store Selection Area */

.store-selection,

.home-delivery {

  margin-top: 20px;

  padding: 20px;

  background-color: #f9f9f9;

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

  border: 1px dashed #ddd;

}



.store-picker {

  text-align: center;

}



.store-picker h3 {

  margin-bottom: 12px;

  font-size: 15px;

  color: #555;

}



.pick-store-btn,

.change-store-btn {

  background-color: var(--primary-orange);

  color: #fff;

  padding: 10px 24px;

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

  font-weight: 600;

  display: inline-flex;

  align-items: center;

  gap: 6px;

}



.pick-store-btn:hover,

.change-store-btn:hover {

  background-color: var(--primary-orange-dark);

}



.selected-store {

  display: flex;

  justify-content: space-between;

  align-items: center;

  background-color: #fff;

  padding: 15px;

  border: 1px solid #ddd;

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

}



.selected-store .store-info {

  display: flex;

  flex-direction: column;

}



.selected-store .store-name {

  font-weight: 700;

  font-size: 15px;

  color: var(--text-primary);

}



.selected-store .store-address {

  font-size: 13px;

  color: #666;

  margin-top: 4px;

}



.change-store-btn {

  background-color: #fff;

  border: 1px solid #ddd;

  color: #666;

  font-size: 13px;

  padding: 6px 12px;

}



.change-store-btn:hover {

  background-color: #f0f0f0;

  color: #333;

}



/* Forms */

.form-group {

  margin-bottom: 15px;

}



.form-group label {

  display: block;

  font-size: 13px;

  font-weight: 500;

  margin-bottom: 6px;

  color: #555;

}



.form-group label .required {

  color: red;

}



.form-input,

.form-textarea {

  width: 100%;

  padding: 10px 12px;

  border: 1px solid #ddd;

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

  font-size: 14px;

  transition: border-color 0.2s;

}



.form-input:focus,

.form-textarea:focus {

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

  outline: none;

}



.form-row {

  display: flex;

  gap: 15px;

}



.form-row .form-group {

  flex: 1;

}



/* Order Items */

.order-store-group {

  border: 1px solid #eee;

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

  margin-bottom: 15px;

  overflow: hidden;

}



.order-store-group .store-header {

  background-color: #f9f9f9;

  padding: 10px 15px;

  display: flex;

  align-items: center;

  gap: 8px;

  font-weight: 600;

  font-size: 13px;

  border-bottom: 1px solid #eee;

}



.order-store-group .store-avatar {

  width: 24px;

  height: 24px;

  border-radius: 50%;

}



.order-item {

  display: flex;

  padding: 15px;

  gap: 15px;

  align-items: center;

  border-bottom: 1px solid #eee;

}



.order-item:last-child {

  border-bottom: none;

}



.order-item .item-image {

  width: 60px;

  height: 60px;

  border: 1px solid #eee;

  border-radius: 4px;

  overflow: hidden;

}



.order-item .item-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.order-item .item-details {

  flex: 1;

}



.order-item .item-name {

  font-size: 13px;

  margin-bottom: 4px;

  color: #333;

  font-weight: normal;

  line-height: 1.4;

}



.order-item .item-specs {

  font-size: 12px;

  color: #999;

}



.order-item .item-qty {

  color: #666;

  font-size: 13px;

}



.order-item .item-price {

  font-weight: 700;

  color: #333;

}



/* Credit Card Form */

.credit-card-form {

  margin-top: 15px;

  padding: 20px;

  background-color: #f9f9f9;

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

  display: none; /* Hidden by default */

}



.card-icons {

  display: flex;

  gap: 10px;

  margin-top: 10px;

}



.card-icon {

  background: #fff;

  border: 1px solid #ddd;

  padding: 2px 6px;

  border-radius: 3px;

  font-size: 10px;

  color: #666;

}



/* Invoice Forms */

.invoice-form {

  margin-top: 15px;

  display: none;

}



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

   Summary Card (Right Column)

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

.checkout-summary {

  position: relative;

}



.summary-card.sticky {

  position: sticky;

  top: 90px;

  background: #fff;

  padding: 20px;

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

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

  border: 1px solid #eee;

}



.summary-card h3 {

  font-size: 18px;

  margin-bottom: 20px;

  padding-bottom: 10px;

  border-bottom: 1px solid #eee;

}



.summary-row {

  display: flex;

  justify-content: space-between;

  margin-bottom: 12px;

  font-size: 14px;

  color: #555;

}



.summary-row .amount {

  font-weight: 600;

  color: #333;

}



.summary-row.discount {

  color: var(--primary-red);

}



.summary-row.discount .amount {

  color: var(--primary-red);

}



.coupon-section {

  margin: 20px 0;

  padding: 15px 0;

  border-top: 1px dashed #ddd;

  border-bottom: 1px dashed #ddd;

}



.coupon-input-wrapper {

  display: flex;

  gap: 8px;

}



.coupon-input {

  flex: 1;

  padding: 8px;

  border: 1px solid #ddd;

  border-radius: 4px;

}



.coupon-btn {

  background: #333;

  color: #fff;

  padding: 8px 16px;

  border-radius: 4px;

  font-size: 13px;

}



.points-section {

  margin-bottom: 20px;

  font-size: 13px;

}



.points-section label {

  display: flex;

  align-items: center;

  gap: 6px;

  cursor: pointer;

}



.points-info {

  margin-left: 20px;

  color: #888;

  font-size: 12px;

  margin-top: 4px;

}



.summary-total {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-top: 20px;

  padding-top: 15px;

  border-top: 2px solid #eee;

  font-size: 16px;

  font-weight: 700;

}



.summary-total .total-amount {

  color: var(--primary-red);

  font-size: 24px;

}



.points-earn {

  background-color: #fff8e1;

  color: #f57f17;

  padding: 8px 12px;

  border-radius: 4px;

  font-size: 12px;

  display: flex;

  align-items: center;

  gap: 6px;

  margin-top: 15px;

}



.agreement {

  margin: 20px 0;

  font-size: 13px;

}



.agreement label {

  display: flex;

  align-items: flex-start;

  gap: 8px;

  cursor: pointer;

}



.agreement a {

  color: var(--primary-orange);

  text-decoration: underline;

}



.submit-order-btn {

  width: 100%;

  background-color: var(--primary-orange);

  color: #fff;

  padding: 15px;

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

  font-size: 16px;

  font-weight: 700;

  display: flex;

  justify-content: space-between;

  align-items: center;

  transition: all 0.2s;

}



.submit-order-btn:hover {

  background-color: var(--primary-orange-dark);

}



.submit-order-btn:disabled {

  background-color: #ccc;

  cursor: not-allowed;

}



.secure-info {

  text-align: center;

  margin-top: 15px;

  font-size: 12px;

  color: #999;

  display: flex;

  justify-content: center;

  gap: 6px;

}



/* Modal */

.modal-overlay {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: rgba(0,0,0,0.5);

  z-index: 1000;

  display: none;

  align-items: center;

  justify-content: center;

}



.modal-overlay.active {

  display: flex;

}



.modal-content {

  background: #fff;

  width: 600px;

  max-width: 90%;

  border-radius: 8px;

  overflow: hidden;

  box-shadow: 0 10px 25px rgba(0,0,0,0.2);

}



.modal-header {

  padding: 15px 20px;

  border-bottom: 1px solid #eee;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.modal-header h3 {

  margin: 0;

  font-size: 16px;

}



.modal-close {

  font-size: 24px;

  line-height: 1;

  color: #999;

  background: none;

  border: none;

  cursor: pointer;

}



.modal-body {

  padding: 20px;

  max-height: 60vh;

  overflow-y: auto;

}



.store-search {

  display: flex;

  gap: 10px;

  margin-bottom: 15px;

}



.store-search-input {

  flex: 1;

  padding: 10px;

  border: 1px solid #ddd;

  border-radius: 4px;

}



.store-search-btn {

  background: var(--primary-orange);

  color: #fff;

  padding: 0 20px;

  border-radius: 4px;

}



.store-filters {

  display: flex;

  gap: 10px;

  margin-bottom: 15px;

}



.store-filters select {

  flex: 1;

  padding: 8px;

  border: 1px solid #ddd;

  border-radius: 4px;

}



.store-list-item {

  display: flex;

  align-items: center;

  padding: 12px;

  border: 1px solid #eee;

  margin-bottom: 8px;

  border-radius: 4px;

}



.store-icon {

  font-size: 20px;

  margin-right: 12px;

}



.store-details {

  flex: 1;

  display: flex;

  flex-direction: column;

}



.store-details .store-name {

  font-weight: 700;

  font-size: 14px;

}



.store-details .store-addr {

  font-size: 12px;

  color: #666;

}



.select-store-btn {

  padding: 6px 12px;

  background: #fff;

  border: 1px solid var(--primary-orange);

  color: var(--primary-orange);

  border-radius: 4px;

  font-size: 12px;

}



.select-store-btn:hover {

  background: var(--primary-orange);

  color: #fff;

}



/* Responsive */

@media (max-width: 992px) {

  .checkout-content {

    grid-template-columns: 1fr;

  }

  

  .summary-card.sticky {

    position: static;

  }

  

  .checkout-steps {

    display: none; /* Hide steps on mobile */

  }

}

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

   Auth Page Styles (Simplified Login)

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



.auth-page {

  background-color: #f5f5f5;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  font-family: 'Noto Sans TC', sans-serif;

}



/* Header */

.auth-header {

  background-color: #fff;

  padding: 15px 0;

  box-shadow: 0 1px 4px rgba(0,0,0,0.05);

  text-align: center;

}



.auth-header .container {

  display: flex;

  justify-content: center;

  align-items: center;

}



.auth-header .logo img {

  height: 40px;

}



/* Main Content */

.auth-main {

  flex: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 40px 20px;

}



.login-card {

  background-color: #fff;

  width: 100%;

  max-width: 800px; /* Adjusted to 400 + 400 */

  border-radius: 20px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.1);

  display: flex;

  overflow: hidden;

  height: 530px; /* Fixed height as requested */

}



.login-promo {

  flex: 0 0 400px; /* Fixed width 400px */

  background-color: #f0f0f0;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  height: 100%;

}



.login-promo img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.login-content {

  flex: 0 0 400px; /* Fixed width 400px */

  padding: 40px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  text-align: center;

  height: 100%;

  box-sizing: border-box;

}



.login-title {

  font-size: 24px;

  font-weight: 500;

  color: #333;

  margin: 0 0 10px 0;

}



.uniopen-promo {

  margin-bottom: 20px;

  color: #666;

  font-size: 14px;

}



/* Login Buttons */

.login-methods {

  display: flex;

  flex-direction: column;

  gap: 15px;

  max-width: 320px;

  margin: 0 auto;

  width: 100%;

}



.uniopen-btn-container {

  margin-bottom: 10px;

}



.uniopen-login {

  background-color: #000;

  padding: 10px;

  border-radius: 8px;

}



.uniopen-login:hover {

  background-color: #222;

}



.icon-uniopen {

  display: flex;

  align-items: center;

  justify-content: center;

}



/* ... existing line/google login styles ... */

.line-login {

  background-color: #fff;

  color: #06C755;

  border: 1px solid #eee;

}



.line-login:hover {

  background-color: #f8f9fa;

}



.google-login {

  background-color: #fff;

  color: #666;

  border: 1px solid #eee;

}



/* Form Styles */

.auth-form {

  display: flex;

  flex-direction: column;

  gap: 15px;

  margin-bottom: 20px;

  text-align: left;

}



.form-group {

  display: flex;

  flex-direction: column;

}



.form-input {

  padding: 12px;

  border: 1px solid #ddd;

  border-radius: 4px;

  font-size: 14px;

  width: 100%;

  box-sizing: border-box;

}



.form-input:focus {

  border-color: #ff6f00;

  outline: none;

}



.form-actions {

  display: flex;

  justify-content: flex-end;

  align-items: center;

  margin-top: 5px;

}



.forgot-password {

  font-size: 13px;

  color: #666;

  text-decoration: none;

}



.forgot-password:hover {

  color: #ff6f00;

}



.submit-btn {

  background-color: #ff6f00;

  color: #fff;

  margin-top: 20px;

  width: 100%;

  padding: 12px;

  border: none;

  border-radius: 4px;

  font-size: 16px;

  font-weight: 500;

  cursor: pointer;

  transition: background-color 0.2s;

}



.submit-btn:hover {

  background-color: #e65a00;

}



/* Divider */

.divider {

  display: flex;

  align-items: center;

  margin: 20px 0;

  color: #999;

  font-size: 13px;

}



.divider::before,

.divider::after {

  content: '';

  flex: 1;

  height: 1px;

  background-color: #eee;

}



.divider span {

  padding: 0 10px;

}



/* Footer */

.auth-footer {

  background-color: transparent;

  padding: 20px 0;

  text-align: center;

  color: #999;

  font-size: 12px;

}



/* Mobile Responsive */

@media (max-width: 768px) {

  .auth-header {

    display: none; /* Hide header on mobile as per requirement */

  }



  .auth-main {

    padding: 0;

    align-items: flex-start;

    background-color: #fff; /* White background for mobile */

  }



  .login-card {

    flex-direction: column;

    border-radius: 0;

    box-shadow: none;

    max-width: 100%;

    margin-top: 0;

    height: auto; /* Reset height for mobile */

  }

  

  .login-promo {

    width: 100%;

    order: 1;

    flex: none; /* Reset flex */

    height: auto; /* Allow auto height based on image aspect ratio */

  }

  

  .login-content {

    padding: 20px;

    order: 2;

    flex: none; /* Reset flex */

    width: 100%; /* Full width */

    height: auto;

  }



  .login-title {

    margin-top: 10px;

    font-size: 20px;

  }



  .uniopen-promo {

    display: none; /* Hide promo text if needed to simplify */

  }



  /* Adjust form styles for mobile */

  .auth-form {

    margin-bottom: 10px;

  }



  .form-input {

    padding: 10px;

  }



  .captcha-img {

    height: 40px; /* Larger touch target */

  }

}