.main { background: #f5f5f5; } .main .mainBreadCrumb { padding-block: 9px; background: #d9d9d9; } .main .mainBreadCrumb .breadCrumbContainer { gap: 8px; width: 90%; display: flex; max-width: 1142px; align-items: center; margin-inline: auto; } .main .mainBreadCrumb .breadCrumbContainer .containerLink { gap: 8px; display: flex; font-size: 15px; font-weight: 300; align-items: center; } .main .mainBreadCrumb .breadCrumbContainer .containerLink span { transition: all 0.3s; } .main .mainBreadCrumb .breadCrumbContainer .containerLink:hover span { color: var(--primary); } .main .mainBreadCrumb .breadCrumbContainer .containerLink:not(:last-child)::after { content: "/"; display: block; } .main .mainSection { padding-block: 60px 108px; } .main .mainSection .mainContainer { max-width: 1024px; margin-inline: auto; } .main .mainSection .mainContainer .containerMain { gap: 30px; display: grid; margin-bottom: 55px; grid-template-columns: 1fr 322px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb { padding-block: 30px; border-bottom: 1px solid #c8c8c8; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb:first-child { padding-top: 0; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb:not(:first-child) .thumbOptions .optionTitle { opacity: 0; pointer-events: none; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbOptions { display: flex; align-items: center; margin-bottom: 21px; justify-content: space-between; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbOptions .optionTitle { font-size: 20px; font-weight: 600; color: #858585; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbOptions .optionTitle span { color: var(--primary); } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbOptions .optionList { gap: 28px; display: flex; align-items: center; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbOptions .optionList .listOption { transition: all 0.2s; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbOptions .optionList .listOption:hover { transform: translateY(-2px); } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent { gap: 16px; display: grid; grid-template-columns: 200px 1fr; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentPic { width: 100%; aspect-ratio: 1; overflow: hidden; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentPic img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo { padding-top: 19px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoTitle { font-size: 20px; font-weight: 700; margin-bottom: 28px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoMain { display: flex; align-items: flex-end; justify-content: space-between; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoMain .mainColumn .columnFeatures { gap: 8px; display: flex; flex-direction: column; margin-bottom: 35px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoMain .mainColumn .columnFeatures .fueatureThumb { gap: 4px; display: flex; font-size: 15px; font-weight: 700; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoMain .mainColumn .columnControl { width: 107px; height: 34px; display: grid; overflow: hidden; align-items: center; padding-inline: 14px; border-radius: 9999px; border: 1px solid #858585; grid-template-columns: 15px calc(100% - 30px) 15px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoMain .mainColumn .columnControl .controlInput { text-align: center; background: transparent; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoMain .mainColumn .columnControl .controlButton { width: 15px; height: 15px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoMain .mainColumn .columnDiscount .discountThumb { width: 80px; height: 34px; color: #fff; display: grid; font-size: 20px; font-weight: 700; margin: 0 auto 13px 0; place-items: center; border-radius: 9999px; background: var(--primary); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoMain .mainColumn .columnPrice { text-align: left; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoMain .mainColumn .columnPrice .priceNew { font-size: 30px; font-weight: 400; margin-bottom: 4px; transition: color 0.35s ease, letter-spacing 0.3s ease; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoMain .mainColumn .columnPrice .priceOld { font-size: 15px; color: #858585; font-weight: 400; text-decoration: line-through; } .main .mainSection .mainContainer .containerMain .mainTransport .transportHeader { display: flex; margin-bottom: 40px; align-items: center; justify-content: space-between; } .main .mainSection .mainContainer .containerMain .mainTransport .transportHeader .headerLink { gap: 20px; display: flex; font-size: 15px; font-weight: 600; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--primary); } .main .mainSection .mainContainer .containerMain .mainTransport .transportHeader .headerLink:hover svg { transform: translateX(3px); } .main .mainSection .mainContainer .containerMain .mainTransport .transportHeader .headerLink svg { transition: all 0.3s; } .main .mainSection .mainContainer .containerMain .mainTransport .transportHeader .headerOption { gap: 9px; display: flex; font-size: 15px; font-weight: 600; align-items: center; color: var(--primary); } .main .mainSection .mainContainer .containerMain .mainTransport .transportHeader .headerOption:hover svg { transform: translateX(-3px); } .main .mainSection .mainContainer .containerMain .mainTransport .transportHeader .headerOption svg { transition: all 0.3s; } .main .mainSection .mainContainer .containerMain .mainTransport .transportAddress { font-size: 15px; font-weight: 400; margin-bottom: 30px; } .main .mainSection .mainContainer .containerMain .mainTransport .transportReception { margin-bottom: 34px; padding-bottom: 20px; border-bottom: 1px solid #c8c8c8; } .main .mainSection .mainContainer .containerMain .mainTransport .transportReception .receptionTitle { gap: 14px; display: flex; font-size: 15px; font-weight: 700; align-items: center; margin-bottom: 10px; color: var(--primary); } .main .mainSection .mainContainer .containerMain .mainTransport .transportReception .receptionTitle::after { height: 1px; content: ""; flex-grow: 1; display: block; background: #c8c8c8; } .main .mainSection .mainContainer .containerMain .mainTransport .transportReception .receptionDesc { font-size: 15px; font-weight: 400; } .main .mainSection .mainContainer .containerMain .mainTransport .transportProducts { margin-bottom: 60px; } .main .mainSection .mainContainer .containerMain .mainTransport .transportProducts .productsTitle { font-size: 20px; font-weight: 600; color: #858585; margin-bottom: 13px; } .main .mainSection .mainContainer .containerMain .mainTransport .transportProducts .productsTitle span { color: var(--primary); } .main .mainSection .mainContainer .containerMain .mainTransport .transportProducts .productsList { gap: 30px; display: grid; grid-template-columns: repeat(3, 1fr); } .main .mainSection .mainContainer .containerMain .mainTransport .transportProducts .productsList .listThumb .thumbPic { width: 100%; aspect-ratio: 1; overflow: hidden; margin-bottom: 20px; } .main .mainSection .mainContainer .containerMain .mainTransport .transportProducts .productsList .listThumb .thumbPic img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .main .mainSection .mainContainer .containerMain .mainTransport .transportProducts .productsList .listThumb .thumbControl { width: 107px; height: 34px; display: grid; overflow: hidden; align-items: center; margin-inline: auto; padding-inline: 14px; border-radius: 9999px; border: 1px solid #858585; grid-template-columns: 15px calc(100% - 30px) 15px; } .main .mainSection .mainContainer .containerMain .mainTransport .transportProducts .productsList .listThumb .thumbControl .controlInput { text-align: center; background: transparent; } .main .mainSection .mainContainer .containerMain .mainTransport .transportPrice { margin-bottom: 55px; } .main .mainSection .mainContainer .containerMain .mainTransport .transportPrice .priceTitle { font-size: 15px; font-weight: 700; color: var(--primary); } .main .mainSection .mainContainer .containerMain .mainTransport .transportPrice .priceNew { gap: 4px; display: flex; font-size: 30px; font-weight: 400; align-items: baseline; } .main .mainSection .mainContainer .containerMain .mainTransport .transportPrice .priceNew .priceUnit { font-size: 15px; } .main .mainSection .mainContainer .containerMain .mainTransport .transportPrice .priceOld { gap: 4px; display: flex; font-size: 15px; font-weight: 400; color: #858585; align-items: baseline; text-decoration: line-through; } .main .mainSection .mainContainer .containerMain .mainTransport .transportTime .timeTitle { gap: 14px; display: flex; font-size: 15px; font-weight: 700; align-items: center; margin-bottom: 32px; color: var(--primary); } .main .mainSection .mainContainer .containerMain .mainTransport .transportTime .timeTitle::after { height: 1px; content: ""; flex-grow: 1; display: block; background: #c8c8c8; } .main .mainSection .mainContainer .containerMain .mainTransport .transportTime .timeList { gap: 20px; display: grid; margin-bottom: 35px; grid-template-columns: repeat(7, 1fr); } .main .mainSection .mainContainer .containerMain .mainTransport .transportTime .timeList .listThumb { text-align: center; background: #fff; padding: 11px 6px 13px; } .main .mainSection .mainContainer .containerMain .mainTransport .transportTime .timeList .listThumb.active { color: #fff; background: var(--primary); } .main .mainSection .mainContainer .containerMain .mainTransport .transportTime .timeList .listThumb.active .thumbDate, .main .mainSection .mainContainer .containerMain .mainTransport .transportTime .timeList .listThumb.active .thumbOldPrice { color: #fff; } .main .mainSection .mainContainer .containerMain .mainTransport .transportTime .timeList .listThumb .thumbDay { font-size: 13px; font-weight: 400; margin-bottom: 4px; } .main .mainSection .mainContainer .containerMain .mainTransport .transportTime .timeList .listThumb .thumbDate { font-size: 13px; font-weight: 700; margin-bottom: 20px; color: var(--primary); } .main .mainSection .mainContainer .containerMain .mainTransport .transportTime .timeList .listThumb .thumbOldPrice { font-size: 10px; font-weight: 700; color: #858585; margin-bottom: 3px; text-decoration: line-through; } .main .mainSection .mainContainer .containerMain .mainTransport .transportTime .timeList .listThumb .thumbNewPrice { font-size: 15px; font-weight: 700; } .main .mainSection .mainContainer .containerMain .mainTransport .transportTime .timeList .listThumb .thumbPriceUnit { font-size: 8px; font-weight: 400; } .main .mainSection .mainContainer .containerMain .mainTransport .transportTime .timeOptions { gap: 10px; display: flex; flex-direction: column; } .main .mainSection .mainContainer .containerMain .mainTransport .transportTime .timeOptions .optionThumb { gap: 8px; display: flex; font-size: 15px; font-weight: 400; align-items: center; } .main .mainSection .mainContainer .containerMain .mainTransport .transportTime .timeOptions .optionThumb .thumbCheck { position: relative; width: 15px; display: grid; place-items: center; height: 15px; border-radius: 9999px; border: 1px solid #858585; } .main .mainSection .mainContainer .containerMain .mainTransport .transportTime .timeOptions .optionThumb .thumbCheck::after { width: 10px; height: 10px; content: ""; display: block; background: var(--primary); border-radius: 9999px; /* position: absolute; */ transition: all 0.25s; inset: 50% auto auto 50%; transform: scale(0); } .main .mainSection .mainContainer .containerMain .mainTransport .transportTime .timeOptions .optionThumb .thumbCheck.active { border-color: var(--primary); } .main .mainSection .mainContainer .containerMain .mainTransport .transportTime .timeOptions .optionThumb .thumbCheck.active::after { transform: scale(1); } .main .mainSection .mainContainer .containerMain .mainPayment .paymentTitle { font-size: 20px; font-weight: 600; padding-bottom: 25px; border-bottom: 1px solid #c8c8c8; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentOptions { padding-block: 30px; border-bottom: 1px solid #c8c8c8; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentOptions .optionThumb { gap: 20px; display: flex; align-items: flex-start; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentOptions .optionThumb:not(:last-child) { margin-bottom: 28px; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentOptions .optionThumb .thumbCheck { width: 15px; height: 15px; display: grid; place-items: center; margin-top: 4px; border-radius: 9999px; border: 1px solid #858585; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentOptions .optionThumb .thumbCheck::after { width: 10px; height: 10px; content: ""; display: block; background: var(--primary); border-radius: 9999px; /* position: absolute; */ transition: all 0.25s; inset: 50% auto auto 50%; transform: scale(0); } .main .mainSection .mainContainer .containerMain .mainPayment .paymentOptions .optionThumb.active .thumbCheck { border-color: var(--primary); } .main .mainSection .mainContainer .containerMain .mainPayment .paymentOptions .optionThumb.active .thumbCheck::after { transform: scale(1); } .main .mainSection .mainContainer .containerMain .mainPayment .paymentOptions .optionThumb .thumbContent { gap: 10px; display: flex; align-items: flex-start; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentOptions .optionThumb .thumbContent .contentInfo .infoTitle { font-size: 15px; font-weight: 700; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentOptions .optionThumb .thumbContent .contentInfo .infoDesc { font-size: 15px; font-weight: 400; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentDiscount { margin-bottom: 20px; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentDiscount .dicountOption { display: flex; align-items: center; padding: 16px 37px 16px 10px; justify-content: space-between; border-bottom: 1px solid #c8c8c8; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentDiscount .dicountOption .optionContent { gap: 12px; display: flex; font-size: 15px; font-weight: 700; align-items: center; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentDiscount .discountItem { display: flex; align-items: center; padding: 16px 37px 16px 10px; justify-content: space-between; border-bottom: 1px solid #c8c8c8; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentDiscount .discountItem .itemContent { gap: 12px; display: flex; font-size: 15px; font-weight: 700; align-items: center; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentAlert { gap: 5px; display: flex; font-size: 13px; font-weight: 600; color: #858585; align-items: flex-start; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentAlert svg { flex-shrink: 0; margin-top: 2px; } .main .mainSection .mainContainer .containerMain .mainBill { width: 100%; } .main .mainSection .mainContainer .containerMain .mainBill .billContainer { top: 172px; position: sticky; } .main .mainSection .mainContainer .containerMain .mainBill .billContainer .containerTumb { background: #fff; padding-inline: 10px; margin-bottom: 15px; } .main .mainSection .mainContainer .containerMain .mainBill .billContainer .containerTumb .thumbTitle { font-size: 15px; font-weight: 700; padding-block: 19px; } .main .mainSection .mainContainer .containerMain .mainBill .billContainer .containerTumb .thumbRow { display: flex; align-items: center; padding-block: 18px; justify-content: space-between; border-top: 1px solid #c8c8c8; } .main .mainSection .mainContainer .containerMain .mainBill .billContainer .containerTumb .thumbRow:first-child { border-top: none; } .main .mainSection .mainContainer .containerMain .mainBill .billContainer .containerTumb .thumbRow.profitRow { color: var(--primary); } .main .mainSection .mainContainer .containerMain .mainBill .billContainer .containerTumb .thumbRow .rorwTitle { font-size: 15px; font-weight: 400; } .main .mainSection .mainContainer .containerMain .mainBill .billContainer .containerTumb .thumbRow .rowValue { gap: 4px; display: flex; font-size: 15px; font-weight: 400; align-items: baseline; } .main .mainSection .mainContainer .containerMain .mainBill .billContainer .containerTumb .thumbRow .rowValue .valueUnit { font-size: 10px; } .main .mainSection .mainContainer .containerMain .mainBill .billContainer .containerTumb .thumbOption { height: 60px; display: grid; color: #fff; font-size: 20px; font-weight: 400; place-items: center; margin-inline: -10px; transition: all 0.3s; background: #3c3c3c; width: calc(100% + 20px); } .main .mainSection .mainContainer .containerMain .mainBill .billContainer .containerTumb .thumbOption:hover { background: var(--primary); } .main .mainSection .mainContainer .containerMain .mainBill .billContainer .containerAlert { gap: 6px; display: flex; font-size: 13px; font-weight: 400; color: #858585; align-items: flex-start; } .main .mainSection .mainContainer .containerMain .mainBill .billContainer .containerAlert svg { flex-shrink: 0; margin-top: 2px; } .main .mainSection .mainContainer .containerMain .mainFixed { display: none; z-index: 99999; position: fixed; inset: auto 0 0 0; background: #fff; padding-block: 18px; box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.2); } .main .mainSection .mainContainer .containerMain .mainFixed .fixedContainer { display: flex; align-items: center; padding-inline: 20px; justify-content: space-between; } .main .mainSection .mainContainer .containerMain .mainFixed .fixedContainer .containerOption { flex-grow: 1; } .main .mainSection .mainContainer .containerMain .mainFixed .fixedContainer .containerOption .optionControl { width: 107px; height: 34px; display: grid; overflow: hidden; align-items: center; padding-inline: 14px; border-radius: 9999px; border: 1px solid #858585; grid-template-columns: 15px calc(100% - 30px) 15px; } .main .mainSection .mainContainer .containerMain .mainFixed .fixedContainer .containerOption .optionControl .controlInput { text-align: center; } .main .mainSection .mainContainer .containerMain .mainFixed .fixedContainer .containerOption .optionThumb { width: 100%; height: 40px; display: grid; color: #fff; font-size: 13px; font-weight: 600; max-width: 228px; place-items: center; background: #3c3c3c; } .main .mainSection .mainContainer .containerMain .mainFixed .fixedContainer .containerPrice { flex-shrink: 0; text-align: left; } .main .mainSection .mainContainer .containerMain .mainFixed .fixedContainer .containerPrice .priceNew { display: flex; font-size: 15px; font-weight: 600; margin-bottom: 2px; align-items: baseline; } .main .mainSection .mainContainer .containerMain .mainFixed .fixedContainer .containerPrice .priceOld { font-size: 13px; font-weight: 400; color: var(--primary); } .main .mainSection .mainContainer .containerProducts:not(:last-child) { margin-bottom: 35px; } .main .mainSection .mainContainer .containerProducts .productsTitle { font-size: 30px; font-weight: 600; } .main .mainSection .mainContainer .containerProducts .listNavigation { z-index: 2; width: 46px; height: 46px; display: grid; position: absolute; place-items: center; transition: all 0.3s; background: rgba(255, 255, 255, 0.8); } .main .mainSection .mainContainer .containerProducts .listNavigation:hover { transform: translateY(-2px); background: #fff; } .main .mainSection .mainContainer .containerProducts .listNavigation.navigationPrev { right: 0; } .main .mainSection .mainContainer .containerProducts .listNavigation.navigationNext { left: 0; } .main .mainSection .mainContainer .containerProducts .listNavigation.navigationNext svg { transform: rotate(180deg); } .main .mainSection .mainContainer .containerProducts .listNavigation.swiper-button-disabled { opacity: 0.7; } .main .mainSection .mainContainer .containerProducts .listNavigation.swiper-button-disabled:hover { background: rgba(255, 255, 255, 0.8); transform: translateY(0); } .main .mainSection .mainContainer .containerProducts .productsList { position: relative; } .main .mainSection .mainContainer .containerProducts .productsList .swiper-button-prev { top: calc(36% - 23px); } .main .mainSection .mainContainer .containerProducts .productsList .swiper { padding-block: 30px; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb { cursor: pointer; background: #fff; box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.2509803922); transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(0, 0, 0, 0.12); } .main .mainSection .mainContainer .containerProducts .productsList .listThumb:hover .thumbPic img { transform: scale(1.05); filter: brightness(1.03); } .main .mainSection .mainContainer .containerProducts .productsList .listThumb:hover .thumbContent .contentTop .topInfo .infoTitle { color: var(--primary); transform: translateY(-2px); } .main .mainSection .mainContainer .containerProducts .productsList .listThumb:hover .thumbContent .contentBottom .bottomDiscount .discountThumb { transform: scale(1.06); } .main .mainSection .mainContainer .containerProducts .productsList .listThumb:hover .thumbContent .contentBottom .bottomPrice .priceNew { color: var(--primary); letter-spacing: 0.3px; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbPic { aspect-ratio: 1; overflow: hidden; position: relative; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbPic img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbPic .picLabel { width: 92px; height: 25px; display: flex; font-size: 13px; font-weight: 600; position: absolute; background: #fff; align-items: center; border-radius: 9999px; justify-content: center; inset: 18px auto auto 18px; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbPic .picOption { width: 40px; height: 40px; display: flex; position: absolute; background: #fff; align-items: center; transition: all 0.3s; color: var(--primary); justify-content: center; inset: 18px auto auto 18px; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbPic .picOption:hover { color: #fff; background: var(--primary); transform: translateY(-3px); } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbContent { padding: 13px 18px; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbContent .contentTop { display: flex; margin-bottom: 24px; flex-direction: column-reverse; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbContent .contentTop .topInfo .infoTitle { font-size: 15px; font-weight: 400; margin-bottom: 6px; transition: color 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbContent .contentTop .topInfo .infoDesc { font-size: 10px; font-weight: 400; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbContent .contentTop .topRate { display: flex; justify-content: flex-end; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbContent .contentTop .topRate .rateThumb { gap: 0; display: flex; font-size: 15px; font-weight: 400; align-items: center; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbContent .contentTop .topRate .rateThumb span { margin-top: 4px; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbContent .contentTop .topRate .rateThumb svg { height: 23px; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbContent .contentBottom { display: flex; align-items: flex-start; justify-content: space-between; min-height: 56.5px; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbContent .contentBottom .bottomDiscount .discountThumb { width: 80px; height: 34px; color: #fff; display: grid; font-size: 20px; font-weight: 700; place-items: center; border-radius: 9999px; background: var(--primary); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbContent .contentBottom .bottomPrice { text-align: left; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbContent .contentBottom .bottomPrice .priceNew { font-size: 20px; font-weight: 400; margin-bottom: 4px; transition: color 0.35s ease, letter-spacing 0.3s ease; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbContent .contentBottom .bottomPrice .priceOld { font-size: 15px; color: #858585; font-weight: 400; text-decoration: line-through; } .main .mainSection .mainContainer .containerSuccess { display: flex; min-height: 540px; text-align: center; align-items: center; flex-direction: column; } .main .mainSection .mainContainer .containerSuccess .successIcon { margin-bottom: 19px; } .main .mainSection .mainContainer .containerSuccess .successIcon svg { width: 50px; height: 50px; } .main .mainSection .mainContainer .containerSuccess .successTitle { font-size: 30px; font-weight: 600; margin-bottom: 8px; } .main .mainSection .mainContainer .containerSuccess .successDesc { font-size: 20px; font-weight: 400; margin-bottom: 46px; } .main .mainSection .mainContainer .containerSuccess .successLink { width: 322px; height: 60px; display: grid; font-size: 20px; font-weight: 400; place-items: center; transition: all 0.3s; border: 1px solid #3c3c3c; } .main .mainSection .mainContainer .containerSuccess .successLink:hover { color: #fff; background: var(--primary); transform: translateY(-3px); border-color: var(--primary); } .addressModal .el-dialog { width: 90%; max-width: 733px; } .addressModal .el-dialog .modalContainer { padding: 14px 14px 28px; } .addressModal .el-dialog .modalContainer .containerHeader { display: flex; align-items: center; padding-bottom: 30px; justify-content: space-between; border-bottom: 1px solid #cfcfcf; } .addressModal .el-dialog .modalContainer .containerHeader .headerTitle { font-size: 20px; font-weight: 700; } .addressModal .el-dialog .modalContainer .containerAddress { padding-top: 30px; margin-bottom: 34px; } .addressModal .el-dialog .modalContainer .containerAddress .addressThumb { width: 100%; height: 150px; border: 1px solid #d9d9d9; padding: 10px 16px 16px 10px; } .addressModal .el-dialog .modalContainer .containerAddress .addressThumb.active { background: #f5f5f5; border-color: #f5f5f5; } .addressModal .el-dialog .modalContainer .containerAddress .addressThumb:not(:last-child) { margin-bottom: 20px; } .addressModal .el-dialog .modalContainer .containerAddress .addressThumb .thumbOption { width: 20px; height: 20px; display: grid; margin-right: auto; margin-bottom: 6px; place-items: center; } .addressModal .el-dialog .modalContainer .containerAddress .addressThumb .thumbontent { font-size: 20px; font-weight: 400; } .addressModal .el-dialog .modalContainer .containerFooter { display: flex; align-items: center; justify-content: space-between; } .addressModal .el-dialog .modalContainer .containerFooter .footerAdd { gap: 20px; display: flex; font-size: 20px; font-weight: 700; align-items: center; color: var(--primary); } .addressModal .el-dialog .modalContainer .containerFooter .footerOption { width: 130px; height: 60px; display: grid; font-size: 20px; font-weight: 400; place-items: center; transition: all 0.3s; border: 1px solid #3c3c3c; } .addressModal .el-dialog .modalContainer .containerFooter .footerOption:hover { color: #fff; background: var(--primary); border-color: var(--primary); } .discountModal .el-dialog { width: 90%; max-width: 488px; } .discountModal .el-dialog .modalContainer { padding: 7px 14px 14px; } .discountModal .el-dialog .modalContainer .containerHeader { display: flex; align-items: center; padding-bottom: 30px; justify-content: space-between; } .discountModal .el-dialog .modalContainer .containerHeader .headerTitle { font-size: 20px; font-weight: 700; } .discountModal .el-dialog .modalContainer .containerMain { margin-bottom: 23px; } .discountModal .el-dialog .modalContainer .containerMain .mainInput { width: 100%; height: 60px; transition: all 0.3s; padding-inline: 16px; background: #f5f5f5; border: 1px solid transparent; } .discountModal .el-dialog .modalContainer .containerMain .mainInput::-moz-placeholder { font-size: 20px; font-weight: 400; color: #858585; } .discountModal .el-dialog .modalContainer .containerMain .mainInput::placeholder { font-size: 20px; font-weight: 400; color: #858585; } .discountModal .el-dialog .modalContainer .containerMain .mainInput:hover { border-color: rgba(190, 91, 40, 0.25); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(190, 91, 40, 0.05), 0 0 0 3px rgba(190, 91, 40, 0.06); } .discountModal .el-dialog .modalContainer .containerMain .mainInput:focus { background: #fff; border-color: var(--primary); transform: translateY(-1px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 26px rgba(190, 91, 40, 0.15), 0 0 0 4px rgba(190, 91, 40, 0.2); } .discountModal .el-dialog .modalContainer .containerFooter { display: flex; align-items: center; justify-content: space-between; } .discountModal .el-dialog .modalContainer .containerFooter .footerAdd { gap: 20px; display: flex; font-size: 20px; font-weight: 700; align-items: center; color: var(--primary); } .discountModal .el-dialog .modalContainer .containerFooter .footerOption { width: 130px; height: 60px; display: grid; font-size: 20px; font-weight: 400; place-items: center; transition: all 0.3s; border: 1px solid #3c3c3c; } .discountModal .el-dialog .modalContainer .containerFooter .footerOption:hover { color: #fff; background: var(--primary); border-color: var(--primary); } @media (max-width: 1681px) { .main .mainBreadCrumb .breadCrumbContainer { max-width: 936px; } .main .mainBreadCrumb .breadCrumbContainer .containerLink { font-size: 13px; } .main .mainSection { padding-block: 50px 87px; } .main .mainSection .mainContainer .containerMain { gap: 24px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb { padding-block: 24px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbOptions { margin-bottom: 16px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbOptions .optionTitle { font-size: 16px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbOptions .optionList { gap: 23px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbOptions .optionList .listOption svg { height: 18px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent { gap: 13px; grid-template-columns: 164px 1fr; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo { padding-top: 16px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoTitle { font-size: 16px; margin-bottom: 24px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoMain .mainColumn .columnFeatures { margin-bottom: 29px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoMain .mainColumn .columnFeatures .fueatureThumb { font-size: 13px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoMain .mainColumn .columnDiscount .discountThumb { width: 65px; height: 27px; font-size: 16px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoMain .mainColumn .columnPrice .priceNew { font-size: 16px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoMain .mainColumn .columnPrice .priceOld { font-size: 13px; } .main .mainSection .mainContainer .containerMain .mainTransport .transportHeader { margin-bottom: 32px; } .main .mainSection .mainContainer .containerMain .mainTransport .transportHeader .headerLink { gap: 16px; font-size: 12px; padding-bottom: 14px; } .main .mainSection .mainContainer .containerMain .mainTransport .transportHeader .headerLink svg { height: 9px; } .main .mainSection .mainContainer .containerMain .mainTransport .transportHeader .headerOption { gap: 7px; font-size: 12px; } .main .mainSection .mainContainer .containerMain .mainTransport .transportHeader .headerOption svg { height: 12px; } .main .mainSection .mainContainer .containerMain .mainTransport .transportAddress { font-size: 12px; margin-bottom: 24px; } .main .mainSection .mainContainer .containerMain .mainTransport .transportReception { margin-bottom: 28px; padding-bottom: 16px; } .main .mainSection .mainContainer .containerMain .mainTransport .transportReception .receptionTitle { gap: 11px; font-size: 12px; margin-bottom: 8px; } .main .mainSection .mainContainer .containerMain .mainTransport .transportReception .receptionDesc { font-size: 12px; } .main .mainSection .mainContainer .containerMain .mainTransport .transportProducts { margin-bottom: 49px; } .main .mainSection .mainContainer .containerMain .mainTransport .transportProducts .productsTitle { font-size: 16px; margin-bottom: 10px; } .main .mainSection .mainContainer .containerMain .mainTransport .transportProducts .productsList { gap: 24px; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentTitle { font-size: 16px; padding-bottom: 21px; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentOptions { padding-block: 24px; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentOptions .optionThumb { gap: 16px; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentOptions .optionThumb:not(:last-child) { margin-bottom: 23px; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentOptions .optionThumb .thumbContent { gap: 8px; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentOptions .optionThumb .thumbContent .contentIcon svg { height: 18px; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentOptions .optionThumb .thumbContent .contentInfo .infoTitle { font-size: 12px; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentOptions .optionThumb .thumbContent .contentInfo .infoDesc { font-size: 12px; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentDiscount .dicountOption .optionContent { gap: 9px; font-size: 12px; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentDiscount .dicountOption .optionContent svg { height: 18px; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentDiscount .discountItem .itemContent { gap: 9px; font-size: 12px; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentDiscount .discountItem .itemContent svg { height: 18px; } .main .mainSection .mainContainer .containerMain .mainPayment .paymentAlert { font-size: 11px; } .main .mainSection .mainContainer .containerMain .mainBill .billContainer .containerTumb .thumbTitle { font-size: 12px; padding-block: 16px; } .main .mainSection .mainContainer .containerMain .mainBill .billContainer .containerTumb .thumbRow { padding-block: 14px; } .main .mainSection .mainContainer .containerMain .mainBill .billContainer .containerTumb .thumbRow .rorwTitle, .main .mainSection .mainContainer .containerMain .mainBill .billContainer .containerTumb .thumbRow .rowValue { font-size: 12px; } .main .mainSection .mainContainer .containerMain .mainBill .billContainer .containerTumb .thumbOption { height: 49px; font-size: 16px; } .main .mainSection .mainContainer .containerMain .mainBill .billContainer .containerAlert { font-size: 11px; } .main .mainSection .mainContainer .containerProducts .productsTitle { font-size: 24px; } .discountModal .el-dialog .modalContainer { padding: 6px 11px 11px; } .discountModal .el-dialog .modalContainer .containerHeader { padding-bottom: 24px; } .discountModal .el-dialog .modalContainer .containerHeader .headerTitle { font-size: 16px; } .discountModal .el-dialog .modalContainer .containerMain { margin-bottom: 18px; } .discountModal .el-dialog .modalContainer .containerMain .mainInput { height: 49px; padding-inline: 13px; } .discountModal .el-dialog .modalContainer .containerMain .mainInput::-moz-placeholder { font-size: 16px; } .discountModal .el-dialog .modalContainer .containerMain .mainInput::placeholder { font-size: 16px; } .discountModal .el-dialog .modalContainer .containerFooter .footerOption { width: 107px; height: 49px; font-size: 16px; } .main .mainSection .mainContainer .containerSuccess .successIcon svg { width: 50px; height: 50px; } .main .mainSection .mainContainer .containerSuccess .successTitle { font-size: 25px; } .main .mainSection .mainContainer .containerSuccess .successDesc { font-size: 16px; } .main .mainSection .mainContainer .containerSuccess .successLink { width: 264px; height: 49px; font-size: 16px; } } @media (max-width: 1440px) { .main .mainBreadCrumb .breadCrumbContainer { max-width: 777px; } .main .mainBreadCrumb .breadCrumbContainer .containerLink { font-size: 11px; } } @media (max-width: 1200px) { .main .mainSection .mainContainer { width: 90%; max-width: none; } } @media (max-width: 1024px) { .main .mainBreadCrumb .breadCrumbContainer { max-width: 732px; } .main .mainBreadCrumb .breadCrumbContainer .containerLink { font-size: 10px; } } @media (max-width: 768px) { .main .mainSection .mainContainer .containerMain { grid-template-columns: 100%; } .main .mainSection .mainContainer .containerMain .mainBill { display: none; } .main .mainSection .mainContainer .containerMain .mainFixed { display: block; } .main .mainSection .mainContainer .containerProducts .productsList .listNavigation { display: none; } } @media (max-width: 576px) { .main .mainBreadCrumb .breadCrumbContainer { width: 100%; padding-inline: 20px; } .main .mainBreadCrumb .breadCrumbContainer .containerLink { font-size: 10px; } .main .mainSection { padding-block: 24px 50px; } .main .mainSection .mainContainer .containerMain { margin-bottom: 37px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb { padding-block: 22px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbOptions { margin-bottom: 14px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbOptions .optionTitle { font-size: 14px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbOptions .optionList { gap: 19px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent { gap: 11px; grid-template-columns: 108px 1fr; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo { padding-top: 13px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoTitle { font-size: 14px; margin-bottom: 19px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoMain .mainColumn .columnFeatures { margin-bottom: 24px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoMain .mainColumn .columnFeatures .fueatureThumb { font-size: 10px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoMain .mainColumn .columnFeatures .fueatureThumb svg { height: 12px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoMain .mainColumn .columnControl { width: 82px; height: 28px; padding-inline: 10px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoMain .mainColumn .columnControl .controlInput { height: 100%; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoMain .mainColumn .columnControl .controlButton svg { width: 10px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoMain .mainColumn .columnDiscount .discountThumb { width: 54px; height: 23px; font-size: 14px; margin-bottom: 9px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoMain .mainColumn .columnPrice .priceNew { font-size: 14px; } .main .mainSection .mainContainer .containerMain .mainProducts .productThumb .thumbContent .contentInfo .infoMain .mainColumn .columnPrice .priceOld { font-size: 10px; } .main .mainSection .mainContainer .containerMain .mainTransport .transportProducts .productsList { gap: 18px; } .main .mainSection .mainContainer .containerMain .mainTransport .transportProducts .productsList .listThumb .thumbControl { width: 82px; height: 28px; padding-inline: 10px; } .main .mainSection .mainContainer .containerMain .mainTransport .transportProducts .productsList .listThumb .thumbControl .controlInput { height: 100%; } .main .mainSection .mainContainer .containerMain .mainTransport .transportProducts .productsList .listThumb .thumbControl .controlButton svg { width: 10px; } .main .mainSection .mainContainer .containerMain .mainTransport .transportTime .timeList { gap: 16px; grid-template-columns: repeat(4, 1fr); } .main .mainSection .mainContainer .containerProducts:not(:last-child) { margin-bottom: 20px; } .main .mainSection .mainContainer .containerProducts .productsTitle { font-size: 19px; } .main .mainSection .mainContainer .containerProducts .productsList { margin-inline: -5%; } .main .mainSection .mainContainer .containerProducts .productsList .swiper { padding-top: 20px; padding-inline: 5%; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbContent { padding: 10px 15px; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbContent .contentTop { margin-bottom: 18px; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbContent .contentTop .topInfo .infoTitle { font-size: 12px; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbContent .contentTop .topInfo .infoDesc { font-size: 8px; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbContent .contentTop .topRate .rateThumb { font-size: 12px; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbContent .contentTop .topRate .rateThumb svg { height: 24px; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbContent .contentBottom .bottomDiscount .discountThumb { width: 62px; height: 26px; font-size: 15px; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbContent .contentBottom .bottomPrice .priceNew { font-size: 15px; } .main .mainSection .mainContainer .containerProducts .productsList .listThumb .thumbContent .contentBottom .bottomPrice .priceOld { font-size: 13px; } .main .mainSection .mainContainer .containerSuccess .successTitle { font-size: 20px; } .main .mainSection .mainContainer .containerSuccess .successDesc { font-size: 14px; margin-bottom: 32px; } .main .mainSection .mainContainer .containerSuccess .successLink { width: 100%; height: 42px; font-size: 14px; } } /*# sourceMappingURL=basketPage.css.map */ .basket-skeleton { padding-block: 60px 108px; } .basket-skeleton .skeletonContainer { max-width: 1024px; margin-inline: auto; } .basket-skeleton .skeletonMain { gap: 30px; display: grid; grid-template-columns: 1fr 322px; } .basket-skeleton .skeletonBone { background: #e8e8e8; border-radius: 6px; position: relative; overflow: hidden; } .basket-skeleton .skeletonBone::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100% ); animation: basketShimmer 1.8s ease-in-out infinite; } @keyframes basketShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* ===== PRODUCTS SKELETON ===== */ .basket-skeleton .skeletonProducts { display: flex; flex-direction: column; } .basket-skeleton .skeletonProductItem { padding-block: 30px; border-bottom: 1px solid #c8c8c8; } .basket-skeleton .skeletonProductItem:first-child { padding-top: 0; } .basket-skeleton .skeletonProductItem .itemHeader { display: flex; align-items: center; margin-bottom: 21px; justify-content: space-between; } .basket-skeleton .skeletonProductItem .itemHeader .headerTitle { width: 140px; height: 18px; } .basket-skeleton .skeletonProductItem .itemHeader .headerIcons { gap: 20px; display: flex; align-items: center; } .basket-skeleton .skeletonProductItem .itemHeader .headerIcons .iconBone { width: 18px; height: 18px; border-radius: 4px; } .basket-skeleton .skeletonProductItem .itemBody { gap: 16px; display: grid; grid-template-columns: 200px 1fr; } .basket-skeleton .skeletonProductItem .itemBody .bodyImage { width: 100%; aspect-ratio: 1; border-radius: 4px; } .basket-skeleton .skeletonProductItem .itemBody .bodyInfo { padding-top: 19px; display: flex; flex-direction: column; } .basket-skeleton .skeletonProductItem .itemBody .bodyInfo .infoTitle { width: 70%; height: 20px; margin-bottom: 28px; } .basket-skeleton .skeletonProductItem .itemBody .bodyInfo .infoContent { display: flex; align-items: flex-end; justify-content: space-between; } .basket-skeleton .skeletonProductItem .itemBody .bodyInfo .infoContent .contentLeft { display: flex; flex-direction: column; gap: 8px; } .basket-skeleton .skeletonProductItem .itemBody .bodyInfo .infoContent .contentLeft .featureBone { width: 120px; height: 14px; } .basket-skeleton .skeletonProductItem .itemBody .bodyInfo .infoContent .contentLeft .controlBone { width: 107px; height: 34px; border-radius: 9999px; margin-top: 26px; } .basket-skeleton .skeletonProductItem .itemBody .bodyInfo .infoContent .contentRight { display: flex; flex-direction: column; align-items: flex-start; } .basket-skeleton .skeletonProductItem .itemBody .bodyInfo .infoContent .contentRight .discountBone { width: 80px; height: 34px; border-radius: 9999px; margin: 0 auto 13px 0; } .basket-skeleton .skeletonProductItem .itemBody .bodyInfo .infoContent .contentRight .priceBone { width: 120px; height: 26px; } .basket-skeleton .skeletonProductItem .itemBody .bodyInfo .infoContent .contentRight .priceOldBone { width: 100px; height: 14px; margin-top: 6px; } /* ===== BILL SKELETON ===== */ .basket-skeleton .skeletonBill { width: 100%; } .basket-skeleton .skeletonBill .billWrap { position: sticky; top: 24px; } .basket-skeleton .skeletonBill .billCard { width: 100%; height: 280px; } .basket-skeleton .skeletonBill .billCard .cardTitle { width: 100px; height: 14px; margin-bottom: 19px; } .basket-skeleton .skeletonBill .billCard .cardRow { display: flex; align-items: center; justify-content: space-between; padding-block: 18px; border-top: 1px solid #c8c8c8; } .basket-skeleton .skeletonBill .billCard .cardRow:first-of-type { border-top: none; } .basket-skeleton .skeletonBill .billCard .cardRow .rowLabel { width: 45%; height: 13px; } .basket-skeleton .skeletonBill .billCard .cardRow .rowValue { width: 25%; height: 13px; } .basket-skeleton .skeletonBill .billCard .cardButton { height: 60px; margin-inline: -10px; width: calc(100% + 20px); border-radius: 0; } .basket-skeleton .skeletonBill .billAlert { gap: 6px; display: flex; align-items: flex-start; } .basket-skeleton .skeletonBill .billAlert .alertIcon { width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; } .basket-skeleton .skeletonBill .billAlert .alertText { width: 85%; height: 12px; } /* ===== CAROUSEL SKELETON ===== */ .basket-skeleton .skeletonCarousel { margin-top: 55px; } .basket-skeleton .skeletonCarousel .carouselTitle { width: 180px; height: 26px; margin-bottom: 30px; } .basket-skeleton .skeletonCarousel .carouselItems { gap: 30px; display: grid; grid-template-columns: repeat(3, 1fr); } .basket-skeleton .skeletonCarousel .carouselItems .carouselItem { background: #fff; box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.2509803922); } .basket-skeleton .skeletonCarousel .carouselItems .carouselItem .itemImage { width: 100%; aspect-ratio: 1; } .basket-skeleton .skeletonCarousel .carouselItems .carouselItem .itemContent { padding: 13px 18px; } .basket-skeleton .skeletonCarousel .carouselItems .carouselItem .itemContent .contentTop { display: flex; flex-direction: column-reverse; margin-bottom: 24px; } .basket-skeleton .skeletonCarousel .carouselItems .carouselItem .itemContent .contentTop .topTitle { width: 60%; height: 14px; margin-bottom: 6px; } .basket-skeleton .skeletonCarousel .carouselItems .carouselItem .itemContent .contentTop .topDesc { width: 40%; height: 10px; margin-bottom: 10px; } .basket-skeleton .skeletonCarousel .carouselItems .carouselItem .itemContent .contentBottom { display: flex; align-items: flex-start; justify-content: space-between; } .basket-skeleton .skeletonCarousel .carouselItems .carouselItem .itemContent .contentBottom .bottomDiscount { width: 80px; height: 34px; border-radius: 9999px; } .basket-skeleton .skeletonCarousel .carouselItems .carouselItem .itemContent .contentBottom .bottomPrice { display: flex; flex-direction: column; align-items: flex-start; } .basket-skeleton .skeletonCarousel .carouselItems .carouselItem .itemContent .contentBottom .bottomPrice .priceNew { width: 90px; height: 18px; } .basket-skeleton .skeletonCarousel .carouselItems .carouselItem .itemContent .contentBottom .bottomPrice .priceOld { width: 70px; height: 13px; margin-top: 6px; } /* ===== RESPONSIVE ===== */ @media (max-width: 1681px) { .basket-skeleton { padding-block: 50px 87px; } .basket-skeleton .skeletonProductItem { padding-block: 24px; } .basket-skeleton .skeletonProductItem .itemHeader { margin-bottom: 16px; } .basket-skeleton .skeletonProductItem .itemBody { grid-template-columns: 164px 1fr; gap: 13px; } .basket-skeleton .skeletonProductItem .itemBody .bodyInfo { padding-top: 16px; } .basket-skeleton .skeletonCarousel .carouselItems { gap: 24px; } } @media (max-width: 768px) { .basket-skeleton .skeletonMain { grid-template-columns: 1fr; } .basket-skeleton .skeletonBill { display: none; } .basket-skeleton .skeletonCarousel .carouselItems { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 576px) { .basket-skeleton { padding-block: 24px 50px; } .basket-skeleton .skeletonContainer { padding-inline: 16px; } .basket-skeleton .skeletonProductItem { padding-block: 22px; } .basket-skeleton .skeletonProductItem .itemHeader { margin-bottom: 14px; } .basket-skeleton .skeletonProductItem .itemBody { gap: 11px; grid-template-columns: 108px 1fr; } .basket-skeleton .skeletonProductItem .itemBody .bodyInfo { padding-top: 13px; } .basket-skeleton .skeletonProductItem .itemBody .bodyInfo .infoContent .contentLeft .featureBone { width: 90px; height: 12px; } .basket-skeleton .skeletonProductItem .itemBody .bodyInfo .infoContent .contentLeft .controlBone { width: 82px; height: 28px; } .basket-skeleton .skeletonProductItem .itemBody .bodyInfo .infoContent .contentRight .discountBone { width: 54px; height: 23px; } .basket-skeleton .skeletonProductItem .itemBody .bodyInfo .infoContent .contentRight .priceBone { width: 90px; height: 18px; } .basket-skeleton .skeletonCarousel .carouselItems { grid-template-columns: 1fr; gap: 16px; } .basket-skeleton .skeletonCarousel .carouselItems .carouselItem:not(:first-child) { display: none; } }