/* ---------------------- Карточка товара product_default.php - Joomshopping ---------------------- */
.product-header-wrapper { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; flex-wrap: wrap; gap: 15px; }
.product-title-custom { font-size: 28px; font-weight: bold; margin-bottom: 0; color: #222; line-height: 1.2; flex: 1 1 auto; }
.product-actions-wrapper { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.btn-wishlist-custom { background: #fff; border: 1px solid #e0e0e0; border-radius: 50%; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #999; transition: all 0.2s ease; padding: 0; outline: none; }
.btn-wishlist-custom:hover { border-color: #bbb; color: #666; }
.btn-wishlist-custom.active svg { fill: #e74c3c; stroke: #e74c3c; }
.btn-wishlist-custom.is-loading { pointer-events: none; opacity: 0.6; }
.wishlist-toast { position: fixed; bottom: 20px; right: 20px; background: #2b303b; color: #fff; padding: 15px 20px; border-radius: 4px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); display: flex; align-items: center; gap: 15px; z-index: 9999; transform: translateY(100px); opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); font-size: 15px; }
.wishlist-toast.show { transform: translateY(0); opacity: 1; visibility: visible; }
.wishlist-toast a { color: #E97C11; text-decoration: underline; font-weight: bold; margin-left: 5px; transition: 0.2s; }
.wishlist-toast a:hover { color: #fff; text-decoration: none; }
.wishlist-toast-close { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; line-height: 1; padding: 0; opacity: 0.7; transition: 0.2s; }
.wishlist-toast-close:hover { opacity: 1; }
.product-nav-arrows { display: flex; gap: 8px; margin: 0; padding: 0; }
.nav-arrow-container { position: relative; display: inline-flex; }
.product-nav-arrows .nav-arrow { display: inline-flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #e0e0e0 !important; border-radius: 50% !important; color: #555 !important; text-decoration: none; transition: 0.2s; background: #fff !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; line-height: 1 !important; font-size: 0 !important; }
.product-nav-arrows .nav-arrow:hover:not(.disabled) { border-color: #ccc !important; background: #f9f9f9 !important; color: #333 !important; }
.product-nav-arrows .nav-arrow.disabled { opacity: 0.3; cursor: default; }
.nav-tooltip {
position: absolute;
top: calc(100% + 5px);
background: #fff;
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
width: 180px;
text-align: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
transition-delay: 0.15s;
z-index: 100;
border-top: 4px solid #2b303b;
pointer-events: none;
padding: 15px 10px;
}
.nav-arrow-container:hover .nav-tooltip,
.nav-tooltip:hover {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition-delay: 0s;
}
.prev-container .nav-tooltip,
.next-container .nav-tooltip { right: 0; }
.nav-tooltip::before {
content: ""; position: absolute; bottom: 100%; border-width: 6px; border-style: solid;
border-color: transparent transparent #2b303b transparent;
}
.prev-container .nav-tooltip::before,
.next-container .nav-tooltip::before { right: 12px; }
.nav-tooltip-link { text-decoration: none; display: block; }
.nav-tooltip-link img { max-width: 100%; height: auto; max-height: 120px; object-fit: contain; margin-bottom: 12px; }
.nav-tooltip-title { display: block; font-size: 15px; font-weight: 700; color: #2b303b; line-height: 1.3; transition: color 0.2s; }
.nav-tooltip-link:hover .nav-tooltip-title { color: #007bff; text-decoration: none; }
.custom-rating-container { display: flex; align-items: center; margin-bottom: 20px; font-size: 15px; color: #888; }
.custom-rating-container .star-rating-control { display: flex; align-items: center; height: 16px; }
.custom-rating-container .star-rating { float: none !important; display: block; }
.custom-rating-container .rating-number { margin-right: 10px; margin-left: 5px; font-weight: 600; color: #333; line-height: 1; display: flex; align-items: center; }
.custom-rating-container a { color: #888; text-decoration: none; transition: color 0.2s; line-height: 1; display: flex; align-items: center; }
.custom-rating-container a:hover { color: #333; }
.top-rating-stars .star-rating { cursor: pointer; }
.rating-divider { margin: 0 8px; display: flex; align-items: center; line-height: 1; }
.price-lg { font-size: 24px; font-weight: 700; color: #333; margin-bottom: 15px; }
.sku-block { font-size: 15px; color: #333; font-weight: 700; margin-bottom: 30px; text-transform: uppercase; }
.sku-block span { font-weight: 400; color: #666; text-transform: none; }
.jshop_short_description { font-size: 15px; color: #555; line-height: 1.6; margin-bottom: 20px; padding: 12px 15px; background: #fcfcfc; border-left: 4px solid #2b303b; border-radius: 2px; }
.jshop_prod_attributes { background: #fff; padding: 18px 20px; border: 1px solid #eaeaea; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); margin-bottom: 25px !important; }
.jshop_prod_attributes .attributes_title { font-weight: 600; color: #444; font-size: 15px; padding-right: 15px; }
.jshop_prod_attributes select { width: 100%; max-width: 320px; padding: 10px 14px; border: 1px solid #dcdcdc; border-radius: 4px; font-size: 15px; outline: none; transition: all 0.2s; background: #fcfcfc; cursor: pointer; color: #333; }
.jshop_prod_attributes select:focus { border-color: #2b303b; box-shadow: 0 0 0 2px rgba(43, 48, 59, 0.1); background: #fff; }
.jshop_prod_attributes span[id^="block_attr_sel_"] { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.jshop_prod_attributes input[type="radio"], .jshop_prod_attributes input[type="checkbox"] { margin-right: 6px; cursor: pointer; accent-color: #2b303b; margin-top: 0; }
.jshop_prod_attributes label { cursor: pointer; margin-right: 0; font-size: 15px; color: #555; display: inline-flex; align-items: center; }
.jshop_prod_attributes .row { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed #f0f0f0; }
.jshop_prod_attributes .row:last-of-type { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.prod_free_attribs { background: #fff; padding: 18px 20px; border: 1px solid #eaeaea; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); margin-bottom: 25px !important; }
.prod_free_attribs .name { font-weight: 600; color: #444; font-size: 15px; }
.prod_free_attribs input[type="text"], .prod_free_attribs textarea { width: 100%; max-width: 320px; padding: 10px 14px; border: 1px solid #dcdcdc; border-radius: 4px; font-size: 15px; outline: none; transition: all 0.2s; background: #fcfcfc; color: #333; }
.prod_free_attribs input[type="text"]:focus, .prod_free_attribs textarea:focus { border-color: #2b303b; box-shadow: 0 0 0 2px rgba(43, 48, 59, 0.1); background: #fff; }
input#quantity{
display: block;
width: 100%;
padding: .5rem .5rem !important;
font-size: 1rem;
line-height: 1.25;
color: #495057;
background-clip: padding-box;
border: 1px solid #000000;
border-radius: 0;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
left: 2px;
position: relative;
}
.qty-controls { display: flex; align-items: stretch; border: 1px solid #e0e0e0; width: fit-content; margin-right: 15px; height: 48px; width: 130px; }
.qty-controls button { background: #fff; border: none; padding: 0 15px; cursor: pointer; font-size: 18px; color: #555; }
.qty-controls button:hover { background: #f9f9f9; }
.qty-controls input { border: none; border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; text-align: center; width: 28px; border-radius: 0; outline: none; font-size: 15px; color: #333; -moz-appearance: textfield; }
.qty-controls input::-webkit-outer-spin-button, .qty-controls input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.btn-buy-custom { background-color: #2b303b !important; color: #fff !important; border-radius: 2px; padding: 0 25px; height: 48px; text-transform: uppercase; font-weight: 700; font-size: 15px; border: none; display: flex; align-items: center; gap: 8px; transition: 0.2s; }
.btn-buy-custom:hover { background-color: #1a1e25 !important; }
.btn-buy-custom svg { fill: #fff; }
.product-social-icons { margin-top: 25px; display: flex; gap: 8px; }
.product-social-icons a { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: #666; border: 1px solid #e0e0e0; border-radius: 50%; font-size: 15px; transition: all 0.2s; background: #fff; font-family: sans-serif; font-weight: 600; }
.product-social-icons a:hover { background-color: #f0f0f0; border-color: #ccc; color: #333; }
.product-tabs-section { margin-top: 50px; }
.custom-tabs { border-bottom: 1px solid #e0e0e0; margin-bottom: 30px; display: flex; gap: 30px; padding: 0; list-style: none; }
.custom-tabs .nav-item .nav-link { background: transparent; border: none; font-weight: 700; color: #888; text-transform: uppercase; font-size: 15px; padding: 0 0 10px 0; border-bottom: 2px solid transparent; cursor: pointer; border-radius: 0; transition: all 0.2s; }
.custom-tabs .nav-item .nav-link:hover { color: #555; }
.custom-tabs .nav-item .nav-link.active { color: #222; border-bottom-color: #222; }
.image_middle { position: relative; border: 1px solid transparent; text-align: center; }
.product_label { position: absolute; top: 0; left: 0; z-index: 10; background: #5cb85c; color: #fff; padding: 2px 6px; font-size: 15px; font-weight: bold; text-transform: uppercase; }
.thumb-carousel-wrapper { position: relative; margin-top: 15px; display: flex; align-items: center; }
.image_thumb_list #list_product_image_thumb {
display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth;
-ms-overflow-style: none; scrollbar-width: none; cursor: grab; padding-bottom: 5px; width: 100%;
}
.image_thumb_list #list_product_image_thumb::-webkit-scrollbar { display: none; }
.image_thumb_list #list_product_image_thumb.active { cursor: grabbing; scroll-behavior: auto; }
.image_thumb_list #list_product_image_thumb > * { flex: 0 0 auto; user-select: none; }
.image_thumb_list .jshop_img_thumb { width: 80px; height: 80px; object-fit: contain; border: 1px solid #eee; transition: border-color 0.2s; padding: 5px; -webkit-user-drag: none; cursor: pointer; }
.image_thumb_list img.jshop_img_thumb:hover,
.image_thumb_list img.jshop_img_thumb.active-thumb { border-color: #333; }
.thumb-arrow {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
background: none; border: none; font-size: 0; cursor: pointer; opacity: 0; transition: opacity 0.2s ease;
padding: 0; outline: none;
}
.thumb-arrow svg { stroke: #d35400; width: 24px; height: 24px; transition: stroke 0.2s; }
.thumb-arrow:hover svg { stroke: #e67e22; }
.thumb-prev { left: -25px; }
.thumb-next { right: -25px; }
.thumb-carousel-wrapper:hover .thumb-arrow { opacity: 1; }
#addinfo .addinfo-table-container { border: 1px solid #eaeaea; border-bottom: none; border-radius: 4px; overflow: hidden; margin-bottom: 20px; }
#addinfo .addinfo-row { display: flex; align-items: center; padding: 15px 20px; border-bottom: 1px solid #eaeaea !important; background-color: #fff; margin: 0 !important; }
#addinfo .addinfo-row:nth-of-type(even) { background-color: #f9f9f9; }
#addinfo .addinfo-label { flex: 0 0 35%; font-weight: 700; color: #555; padding-right: 15px; font-size: 15px; line-height: 1.4; }
#addinfo .addinfo-value { flex: 1; color: #666; font-weight: 400 !important; text-align: left; float: none !important; font-size: 15px; line-height: 1.4; }
#addinfo .addinfo-value a { color: #007bff; text-decoration: none; }
#addinfo .addinfo-value a:hover { text-decoration: underline; }
#addinfo .extra_fields_group { background-color: #f1f1f1; padding: 12px 20px; font-size: 15px; color: #333; border-bottom: 1px solid #eaeaea; margin: 0 !important; text-transform: uppercase; }
.review_header, .review { font-size: 22px; font-weight: 600; color: #333; margin: 0 0 25px 0; display: block; }
.review_item { position: relative; padding: 20px; margin-bottom: 30px; margin-left: 90px; background-color: #f6f6f6; border-radius: 4px; min-height: 85px; }
.review_item::after { content: ""; position: absolute; top: 30px; left: -12px; border-width: 12px 12px 12px 0; border-style: solid; border-color: transparent #f6f6f6 transparent transparent; }
.review_item::before { content: ""; position: absolute; top: 0; left: -90px; width: 70px; height: 70px; background-color: #c4c4c4; background-image: url('data:image/svg+xml;utf8,'); background-size: 55px; background-repeat: no-repeat; background-position: center bottom; }
.review_item > div:nth-child(1) { font-size: 0; margin-bottom: 10px; display: flex; align-items: center; }
.review_user { font-size: 15px; font-weight: bold; color: #555; }
.review_time { font-size: 15px; color: #999; }
.review_time::before { content: " - "; white-space: pre; }
.review_text { font-size: 15px; color: #444; line-height: 1.6; }
.review_mark { position: absolute; top: 20px; right: 20px; font-size: 0 !important; }
.review_mark > span:not(.star-rating-control) { display: none !important; }
.stars_no_active, .stars_active { background-image: none !important; }
.stars_no_active { background: url('data:image/svg+xml;utf8,') repeat-x; background-size: 20px 20px; height: 20px; width: 100px !important; position: relative; }
.stars_active { background: url('data:image/svg+xml;utf8,') repeat-x; background-size: 20px 20px; height: 20px; position: absolute; top: 0; left: 0; }
.review_item .star-rating-control { display: flex; align-items: center; height: 20px; }
.review_item .star-rating { background: none !important; overflow: hidden !important; width: 10px !important; height: 20px; display: inline-block; float: none !important; margin: 0 !important; padding: 0 !important; }
.review_item .star-rating a { display: block !important; width: 20px !important; height: 20px !important; background: url('data:image/svg+xml;utf8,') no-repeat 0 center !important; background-size: 20px 20px !important; text-indent: -9999px; font-size: 0; line-height: 0; color: transparent; text-decoration: none; }
.review_item .star-rating.star-rating-on a { background-image: url('data:image/svg+xml;utf8,') !important; }
#jshop_review_write { background: #fdfdfd; border: 1px solid #eaeaea; padding: 30px; border-radius: 4px; margin-top: 40px; }
#jshop_review_write .row { margin-bottom: 20px; align-items: center; }
#jshop_review_write label { font-weight: 600; color: #444; margin: 0; }
#jshop_review_write .inputbox { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 15px; transition: border-color 0.2s; box-shadow: inset 0 1px 2px rgba(0,0,0,0.02); }
#jshop_review_write .inputbox:focus { border-color: #999; outline: none; }
#jshop_review_write textarea.inputbox { resize: vertical; min-height: 120px; }
#jshop_review_write .btn.btn-primary { background-color: #2b303b; border-color: #2b303b; color: #fff; padding: 12px 25px; font-weight: bold; text-transform: uppercase; font-size: 15px; border-radius: 2px; transition: 0.2s; }
#jshop_review_write .btn.btn-primary:hover { background-color: #1a1e25; }
@media (max-width: 339px) {
.custom-rating-container .star-rating-control { height: 10px; transform: scale(0.8); transform-origin: left center; margin-right: -25px; }
}
@media (max-width: 767.98px) {
.down-panel-shop {
position: fixed; bottom: -80px; left: 0; width: 100%; height: 70px;
background: #fff; box-shadow: 0 -4px 15px rgba(0,0,0,0.1);
display: flex; align-items: center; justify-content: space-between;
padding: 0 20px; z-index: 9990; transition: bottom 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.down-panel-shop.show { bottom: 0; }
.down-panel-shop .mobile-panel-price { font-size: 18px; font-weight: 700; color: #222; flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; }
.down-panel-shop .qty-controls { margin-right: 10px; flex-shrink: 0; height: 44px; border-radius: 4px; flex-grow: 0; justify-content: center; }
.down-panel-shop .qty-controls input { width: 100%; max-width: 50px; background: transparent; }
.down-panel-shop .mobile-panel-buy-btn {
background-color: #2b303b !important; border: none; border-radius: 4px;
color: #fff !important; height: 44px; width: 60px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; padding: 0; outline: none;
}
.down-panel-shop .mobile-panel-buy-btn svg { fill: #fff; width: 22px; height: 22px; }
.sp-scroll-up { transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), bottom 0.3s ease, opacity 0.3s ease !important; }
body.panel-shown .sp-scroll-up { transform: translateY(-70px) !important; }
.attributes-mobile-modal {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
z-index: 10000; display: flex; align-items: flex-end;
opacity: 0; visibility: hidden; transition: 0.3s;
}
.attributes-mobile-modal.show { opacity: 1; visibility: visible; }
.modal-overlay-bg { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); cursor: pointer; }
.mobile-attributes-modal-content {
position: relative; background: #fff; width: 100%; padding: 25px 20px;
border-radius: 15px 15px 0 0; transform: translateY(100%); transition: 0.3s;
max-height: 85vh; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; z-index: 10001;
}
.attributes-mobile-modal.show .mobile-attributes-modal-content { transform: translateY(0); }
.modal-buy-btn { display: flex !important; }
.modal-close-btn { display: block; position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 28px; cursor: pointer; color: #999; line-height: 1; padding: 0; z-index: 100; }
.modal-header-mobile { display: block !important; margin-bottom: 15px; }
.modal-product-info { display: flex; align-items: center; gap: 15px; padding-bottom: 15px; border-bottom: 1px solid #eaeaea; }
.modal-img-wrapper { width: 60px; height: 60px; flex-shrink: 0; background: #fff; border: 1px solid #eee; border-radius: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.modal-img-wrapper img { max-width: 100%; max-height: 100%; object-fit: contain; }
.modal-product-info-texts { display: flex; flex-direction: column; justify-content: center; gap: 4px; overflow: hidden; }
.modal-product-title { font-size: 14px; font-weight: 700; color: #222; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-product-price { font-size: 18px; font-weight: 700; color: #e74c3c; line-height: 1; }
.mobile-attributes-modal-content .jshop_prod_attributes,
.mobile-attributes-modal-content .prod_free_attribs {
box-shadow: none; border: none; padding: 0; margin-bottom: 15px !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; width: 100%;
}
}
@media (min-width: 768px) {
.down-panel-shop { display: none !important; }
.attributes-mobile-modal { display: none !important; }
}
@media (max-width: 991.98px) {
.jshop.productview { overflow-x: hidden; padding: 20px; }
.product-header-wrapper { flex-wrap: nowrap; align-items: flex-start; margin-bottom: 10px; gap: 10px; }
.product-title-custom { font-size: 24px; padding-right: 0; word-wrap: break-word; }
.product-actions-wrapper { flex-shrink: 0; }
.custom-rating-container { padding-bottom: 15px; border-bottom: 1px solid #eaeaea; margin-bottom: 15px; flex-wrap: wrap; align-items: center; }
.sku-block { padding-bottom: 15px; border-bottom: 1px solid #eaeaea; margin-bottom: 15px; }
.jshop_prod_attributes { padding: 15px; margin-left: -10px; margin-right: -10px; border-radius: 0; border-left: none; border-right: none; }
.jshop_prod_attributes .row { display: flex; flex-direction: column; align-items: flex-start; }
.jshop_prod_attributes .attributes_title { padding-right: 0; margin-bottom: 10px; width: 100%; }
.jshop_prod_attributes .col-lg-8 { width: 100%; }
.jshop_prod_attributes span[id^="block_attr_sel_"] { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.jshop_prod_attributes span[id^="block_attr_sel_"] > input[type="radio"],
.jshop_prod_attributes span[id^="block_attr_sel_"] > input[type="checkbox"] { margin-right: 5px; margin-top: 0; }
.jshop_prod_attributes label { margin-right: 0; font-size: 15px; white-space: nowrap; display: inline-flex; align-items: center; }
.prod_buttons { flex-direction: row !important; flex-wrap: nowrap; align-items: stretch !important; justify-content: space-between; gap: 15px; margin-top: 15px; padding-bottom: 15px; }
.qty-controls { margin-right: 0; width: 95px; flex-shrink: 0; display: flex; height: 48px; }
.qty-controls button { width: 120px; flex-grow: 0; padding: 0; display: flex; align-items: center; justify-content: center; }
.qty-controls input { width: 25px; flex-grow: 0; }
.product-buttons { width: calc(100% - 135px); margin: 0; }
.btn-buy-custom { width: 100%; height: 100%; justify-content: center; padding: 12px 10px; font-size: 15px; }
.product-social-icons { margin-top: 15px; padding-bottom: 20px; border-bottom: 1px solid #eaeaea; justify-content: flex-start; }
.product-tabs-section { display: flex; flex-direction: column; margin-top: 20px; }
.custom-tabs { display: contents; }
.custom-tabs .nav-item { display: contents; }
#jshopProductTabsContent { display: contents; }
#desc-tab { order: 1; }
#desc { order: 2; }
#addinfo-tab { order: 3; }
#addinfo { order: 4; }
#reviews-tab { order: 5; }
#reviews { order: 6; }
.custom-tabs .nav-item .nav-link { display: flex; align-items: center; width: 100%; text-align: left; padding: 15px 0; border: none !important; border-bottom: 2px solid #eaeaea !important; font-size: 15px; font-weight: 700; color: #555; border-radius: 0; background: #fff; transition: border-bottom-color 0.3s ease, color 0.3s ease; }
.custom-tabs .nav-item .nav-link.active { border-bottom-color: #E97C11 !important; color: #E97C11; }
.custom-tabs .nav-item .nav-link::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 12px; border-right: 2px solid #555; border-bottom: 2px solid #555; transform: rotate(45deg); transition: transform 0.3s ease, border-color 0.3s ease; position: relative; top: -2px; }
.custom-tabs .nav-item .nav-link.active::before { transform: rotate(-135deg); top: 2px; border-color: #E97C11; }
.tab-pane { width: 100%; padding: 15px 0; border-bottom: 1px solid #eaeaea; }
.tab-pane:not(.active) { display: none !important; }
.tab-pane.active { display: block !important; opacity: 1 !important; }
.review_item { margin-left: 0; padding: 20px 15px 15px 15px; }
.review_item::before { display: none; }
.review_item::after { display: none; }
.review_mark { position: relative; top: auto; right: auto; margin-top: 10px; display: block; }
}
/* ---------------------- Конец Карточка товара product_default.php - Joomshopping ---------------------- */
/* ---------------------- Карточка товара Related.php - Joomshopping ---------------------- */
.jshop_related_wrapper {
margin-top: 30px;
font-family: inherit;
}
.related_header_container {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-bottom: 25px;
}
.related_header {
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
color: #444;
margin: 0;
}
.custom-owl-dots {
display: flex;
gap: 5px;
}
.custom-owl-dots .owl-dot {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #ddd;
cursor: pointer;
transition: 0.3s;
background-color: transparent !important;
padding: 0;
margin: 0;
outline: none;
}
.custom-owl-dots .owl-dot.active {
border-color: #d67b27;
}
.related_grid .related_item {
box-sizing: border-box;
}
.sj-product-item {
position: relative;
background: #fff;
padding: 15px;
text-align: center;
border-radius: 4px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
border: 1px solid transparent;
height: 100%;
}
.sj-product-item:hover {
transform: translateY(-8px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
border-color: #f5f5f5;
}
.sj-item-image-wrap {
position: relative;
overflow: hidden;
margin-bottom: 15px;
padding-bottom: 20px;
}
.sj-item-image-link {
display: block;
}
.sj-item-image-link img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.sj-item-label {
position: absolute;
top: 0;
right: 0;
z-index: 2;
}
.sj-item-label span {
background: #e77673;
color: #fff;
padding: 3px 8px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
.btn-wishlist-related {
position: absolute;
top: 10px;
left: 10px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 50%;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #999;
transition: all 0.2s ease;
padding: 0;
outline: none;
z-index: 5;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.btn-wishlist-related:hover {
border-color: #bbb;
color: #666;
transform: scale(1.05);
}
.btn-wishlist-related.active svg {
fill: #e74c3c;
stroke: #e74c3c;
}
.btn-wishlist-related.is-loading {
pointer-events: none;
opacity: 0.6;
}
.btn-quickview-related {
position: absolute;
top: 10px;
right: 10px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 50%;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #999;
transition: all 0.2s ease;
padding: 0;
outline: none;
z-index: 5;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.btn-quickview-related:hover {
border-color: #bbb;
color: #2b303b;
transform: scale(1.05);
}
.related-quickview-modal-body {
padding: 30px;
}
.wishlist-toast {
position: fixed;
bottom: 20px;
right: 20px;
background: #2b303b;
color: #fff;
padding: 15px 20px;
border-radius: 4px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
display: flex;
align-items: center;
gap: 15px;
z-index: 9999;
transform: translateY(100px);
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
font-size: 15px;
}
.wishlist-toast.show {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.wishlist-toast a {
color: #E97C11;
text-decoration: underline;
font-weight: bold;
margin-left: 5px;
transition: 0.2s;
}
.wishlist-toast a:hover {
color: #fff;
text-decoration: none;
}
.wishlist-toast-close {
background: none;
border: none;
color: #fff;
font-size: 24px;
cursor: pointer;
line-height: 1;
padding: 0;
opacity: 0.7;
transition: 0.2s;
}
.wishlist-toast-close:hover {
opacity: 1;
}
.sj-item-hover-btn {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
opacity: 0;
transform: translateY(15px);
transition: all 0.3s ease;
z-index: 3;
}
.sj-product-item:hover .sj-item-hover-btn {
opacity: 1;
transform: translateY(0);
}
.sj-btn-action {
display: block;
width: 100%;
background: #ec7200;
color: #fff !important;
text-align: center;
padding: 10px 0;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
border: none;
border-radius: 3px;
cursor: pointer;
box-shadow: 0 2px 6px rgba(236, 114, 0, 0.4);
transition: background 0.2s ease;
}
.sj-btn-action:hover {
background: #d66700;
text-decoration: none;
}
.sj-item-info {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.sj-item-desc-short {
font-size: 11px;
color: #999;
text-transform: uppercase;
margin-bottom: 8px;
letter-spacing: 0.5px;
}
.sj-item-title {
margin-bottom: 12px;
}
.sj-item-title a {
font-size: 14px;
color: #333;
font-weight: 600;
text-decoration: none;
line-height: 1.4;
transition: color 0.2s ease;
}
.sj-item-title a:hover {
color: #ec7200;
}
.sj-item-rating-reviews {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 12px;
}
.sj-rating-wrap {
display: inline-flex;
align-items: center;
}
.sj-rating-stars {
position: relative;
display: inline-block;
width: 80px;
height: 16px;
background: url('data:image/svg+xml;utf8,') repeat-x;
background-size: 16px 16px;
}
.sj-rating-stars-active {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: url('data:image/svg+xml;utf8,') repeat-x;
background-size: 16px 16px;
}
.sj-reviews-count {
font-size: 13px;
color: #888;
line-height: 1;
margin-top: 1px;
}
.sj-item-price {
font-size: 17px;
font-weight: 700;
color: #333;
margin-top: auto;
}
@media (max-width: 768px) {
.related-quickview-modal-body { padding: 15px; }
}
body.sj-quickview-iframe { overflow-x: hidden !important; background-color: #fff !important; padding: 15px !important; }
body.sj-quickview-iframe .jshop { overflow-x: hidden !important; }
body.sj-quickview-iframe .row { margin-left: 0 !important; margin-right: 0 !important; }
body.sj-quickview-iframe #list_product_image_thumb { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; justify-content: center !important; margin-top: 15px !important; padding: 0 !important; }
body.sj-quickview-iframe .sblock0 { float: none !important; margin: 0 !important; padding: 0 !important; display: block !important; }
body.sj-quickview-iframe .jshop_img_thumb { width: 70px !important; height: 70px !important; object-fit: contain !important; border: 1px solid #eaeaea !important; padding: 4px !important; border-radius: 4px !important; cursor: pointer !important; transition: border-color 0.2s ease !important; display: block !important; }
body.sj-quickview-iframe .jshop_img_thumb:hover,
body.sj-quickview-iframe .jshop_img_thumb.active-thumb { border-color: #ec7200 !important; }
body.sj-quickview-iframe .image_middle { text-align: center !important; }
body.sj-quickview-iframe .image_middle img { max-width: 100% !important; height: auto !important; margin: 0 auto !important; }
/* ---------------------- Конец Карточка товара Related.php - Joomshopping ---------------------- */
/* ---------------------- list_products — Joomshopping 5.9.1 ---------------------- */
.list-products-wrap *, .list-products-wrap ::before, .list-products-wrap ::after { box-sizing: border-box; }
.list-products-wrap { max-width: 100%; box-sizing: border-box; position: relative; }
.list-products-grid { display: grid; gap: 20px; margin: 0; padding: 15px 5px 30px 5px; box-sizing: border-box; width: 100%; align-items: stretch; }
.list-products-grid.view-grid-4 { grid-template-columns: repeat(4, 1fr) !important; }
.list-products-grid.view-grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
.list-products-grid.view-grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
.list-products-grid.view-list { grid-template-columns: 1fr !important; }
@media (max-width: 992px) {
.list-products-grid.view-grid-4 { grid-template-columns: repeat(3, 1fr) !important; }
.btn-switch-view[data-view="view-grid-4"] { display: none !important; }
}
@media (max-width: 768px) {
.list-products-grid.view-grid-4,
.list-products-grid.view-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
.btn-switch-view[data-view="view-grid-3"] { display: none !important; }
}
.list-product-item { width: 100%; height: 100%; position: relative; background: #fff; padding: 15px; text-align: center; border-radius: 4px; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; border: 1px solid transparent; }
.list-product-item:hover { transform: translateY(-8px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); border-color: #f5f5f5; z-index: 5; }
.sj-item-image-wrap { position: relative; overflow: hidden; margin-bottom: 15px; padding-bottom: 20px; }
.sj-carousel-container { position: relative; width: 100%; }
.sj-item-image-link { display: block; position: relative; width: 100%; overflow: hidden; height: 300px; }
.sj-item-image-link img.jshop_img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.3s ease-in-out; z-index: 1; margin: 0 auto; }
.sj-item-image-link img.jshop_img.active { opacity: 1; z-index: 2; }
.sj-carousel-dots { position: absolute; bottom: 25px; left: 0; width: 100%; display: flex; justify-content: center; gap: 6px; z-index: 4; }
.sj-dot { width: 8px; height: 8px; border-radius: 50%; background: #ccc; cursor: pointer; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.sj-dot.active { background: #ec7200; transform: scale(1.2); }
.sj-dot:hover { background: #d66700; }
.sj-item-label { position: absolute; top: 0; right: 0; z-index: 5; }
.sj-item-label span, .sj-item-label img { background: #e77673; color: #fff; padding: 3px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.list-products-wrap .btn-wishlist-custom, .list-products-wrap .btn-quickview-custom { position: absolute; top: 10px; background: #fff; border: 1px solid #e0e0e0; border-radius: 50%; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #999; transition: all 0.2s ease; padding: 0; outline: none; box-shadow: 0 2px 5px rgba(0,0,0,0.1); z-index: 6; }
.list-products-wrap .btn-wishlist-custom { left: 10px; }
.list-products-wrap .btn-quickview-custom { right: 10px; }
.list-products-wrap .btn-wishlist-custom:hover, .list-products-wrap .btn-quickview-custom:hover { border-color: #bbb; color: #2b303b; transform: scale(1.05); }
.list-products-wrap .btn-wishlist-custom.active svg { fill: #e74c3c; stroke: #e74c3c; }
.list-products-wrap .btn-wishlist-custom.is-loading { pointer-events: none; opacity: 0.6; }
.sj-item-hover-btn { position: absolute; bottom: 0; left: 0; width: 100%; opacity: 0; transform: translateY(15px); transition: all 0.3s ease; z-index: 7; }
.list-product-item:hover .sj-item-hover-btn { opacity: 1; transform: translateY(0); }
.sj-btn-action { display: block; width: 100%; background: #ec7200; color: #fff !important; text-align: center; padding: 10px 0; font-size: 13px; font-weight: 600; text-transform: uppercase; text-decoration: none; border: none; border-radius: 3px; cursor: pointer; box-shadow: 0 2px 6px rgba(236, 114, 0, 0.4); transition: background 0.2s ease; }
.sj-btn-action:hover { background: #d66700; text-decoration: none; }
.sj-item-info { display: flex; flex-direction: column; flex-grow: 1; }
.sj-item-desc-short { font-size: 11px; color: #999; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sj-item-title { margin-bottom: 12px; }
.sj-item-title a { font-size: 14px; color: #333; font-weight: 600; text-decoration: none; line-height: 1.4; transition: color 0.2s ease; }
.sj-item-title a:hover { color: #ec7200; }
.sj-item-rating-reviews { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; }
.sj-rating-wrap { display: inline-flex; align-items: center; }
.sj-rating-stars { position: relative; display: inline-block; width: 80px; height: 16px; background: url('data:image/svg+xml;utf8,') repeat-x; background-size: 16px 16px; }
.sj-rating-stars-active { position: absolute; top: 0; left: 0; height: 100%; background: url('data:image/svg+xml;utf8,') repeat-x; background-size: 16px 16px; }
.sj-reviews-count { font-size: 13px; color: #888; line-height: 1; margin-top: 1px; }
.sj-item-price { font-size: 17px; font-weight: 700; color: #333; margin-top: auto; }
.view-list .list-product-item { flex-direction: row; text-align: left; align-items: flex-start; gap: 30px; }
.view-list .sj-item-image-wrap { width: 250px; flex-shrink: 0; margin-bottom: 0; }
.view-list .sj-item-rating-reviews { justify-content: flex-start; }
@media (max-width: 768px) {
.view-list .list-product-item { flex-direction: column; text-align: center; align-items: center; gap: 0; }
.view-list .sj-item-image-wrap { width: 100%; max-width: 300px; margin-bottom: 15px; }
.view-list .sj-item-rating-reviews { justify-content: center; }
}
.wishlist-toast { position: fixed; bottom: 20px; right: 20px; background: #2b303b; color: #fff; padding: 15px 20px; border-radius: 4px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); display: flex; align-items: center; gap: 15px; z-index: 9999; transform: translateY(100px); opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); font-size: 15px; }
.wishlist-toast.show { transform: translateY(0); opacity: 1; visibility: visible; }
.wishlist-toast a { color: #E97C11; text-decoration: underline; font-weight: bold; margin-left: 5px; transition: 0.2s; }
.wishlist-toast a:hover { color: #fff; text-decoration: none; }
.wishlist-toast-close { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; line-height: 1; padding: 0; opacity: 0.7; transition: 0.2s; }
.wishlist-toast-close:hover { opacity: 1; }
.btn-switch-view.active { background-color: #f0f0f0; border-color: #d0d0d0; color: #ec7200; }
.sj-products-wrap .btn-wishlist-custom, .sj-products-wrap .btn-quickview-custom { z-index: 99 !important; }
.jshop_pagination_wrap { margin-top: 40px; text-align: center; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 25px; }
.sj-load-more-container { width: 100%; max-width: 320px; margin: 0 auto; }
.btn-load-more { padding: 14px 25px; font-size: 14px; font-weight: 700; text-transform: uppercase; border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; cursor: pointer; border: none; background: #ec7200; color: #fff !important; transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; box-shadow: 0 4px 10px rgba(236, 114, 0, 0.3); }
.btn-load-more:hover { background: #d66700; box-shadow: 0 6px 15px rgba(214, 103, 0, 0.4); text-decoration: none; transform: translateY(-2px); }
.btn-load-more.is-loading { opacity: 0.7; pointer-events: none; transform: none; box-shadow: none; }
.jshop_pagination { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.jshop_pagination .pagination { display: inline-flex; flex-wrap: wrap; justify-content: center; padding: 0; margin: 0; list-style: none; gap: 8px; }
.jshop_pagination .pagination li { display: inline-block; margin: 0; }
.jshop_pagination .pagination li a { display: flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; background: #fff; border: 1px solid #e0e0e0; color: #333; font-size: 15px; font-weight: 600; text-decoration: none; border-radius: 4px; transition: all 0.2s ease; box-sizing: border-box; line-height: 1; }
.jshop_pagination .pagination li span { display: flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; background: #fff; border: 1px solid #e0e0e0; color: #333; font-size: 15px; font-weight: 600; text-decoration: none; border-radius: 4px; transition: all 0.2s ease; box-sizing: border-box; line-height: 1; }
.jshop_pagination .pagination li a:hover { background: #f5f5f5; border-color: #bbb; color: #ec7200; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.05); }
.jshop_pagination .pagination li.active span, .jshop_pagination .pagination li.active a, .jshop_pagination .pagination li span.active { background: #ec7200; border-color: #ec7200; color: #fff; transform: none; box-shadow: 0 4px 10px rgba(236, 114, 0, 0.3); pointer-events: none; }
.jshop_pagination .pagination li.disabled span, .jshop_pagination .pagination li.disabled a { background: #fafafa; color: #ccc; border-color: #eee; cursor: not-allowed; pointer-events: none; }
.pagination_result_counter { font-size: 13px; color: #888; margin-top: 5px; font-weight: 500; }
/* ---------------------- Конец list_products — Joomshopping 5.9.1 ---------------------- */
/* ---------------------- Cart cart.php — Joomshopping 5.9.1 ---------------------- */
#comjshop { color: #333; position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
#comjshop > * { width: 100%; order: 1; }
#updateCart { display: contents; }
#updateCart > * { width: 100%; order: 1; }
.jshop.cart { border-collapse: separate; border-spacing: 0; background: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border-radius: 8px; margin-bottom: 30px; overflow: hidden; }
.jshop.cart th { background: #f8f9fa; padding: 15px; font-size: 13px; font-weight: 600; text-transform: uppercase; color: #555; text-align: left; border-bottom: 2px solid #eaeaea; }
.jshop.cart td { padding: 20px 15px; vertical-align: middle; border-bottom: 1px solid #f0f0f0; }
.jshop.cart tr:last-child td { border-bottom: none; }
.jshop.cart .jshop_img { max-width: 80px; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); display: block; margin: 0 auto; }
.jshop.cart .prodname { font-size: 16px; font-weight: 600; color: #2b303b; text-decoration: none; display: block; margin-bottom: 5px; transition: color 0.2s; }
.jshop.cart .prodname:hover { color: #ec7200; text-decoration: none; }
.jshop.cart .jshop_code_prod { font-size: 13px; color: #888; display: block; margin-bottom: 5px; }
.jshop.cart .manufacturer, .jshop.cart .real_ean, .jshop.cart .deliverytime { font-size: 12px; color: #777; margin-top: 3px; }
.jshop.cart .manufacturer span, .jshop.cart .real_ean span { font-weight: 600; color: #555; }
.jshop.cart .single_price .price, .jshop.cart .total_price .data { font-size: 16px; font-weight: 700; color: #333; }
.jshop.cart .taxinfo { display: block; font-size: 11px; color: #999; margin-top: 3px; }
.jshop.cart .basic_price { font-size: 12px; color: #888; margin-top: 5px; }
.jshop.cart .quantity .data { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jshop.cart .quantity input.inputbox { width: 65px; padding: 8px; border: 1px solid #ddd; border-radius: 4px; text-align: center; font-size: 14px; transition: border-color 0.2s; box-sizing: border-box; }
.jshop.cart .quantity input.inputbox:focus { border-color: #ec7200; outline: none; }
.jshop.cart .sj-cart-reload { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: #f0f0f0; border-radius: 4px; color: #555; transition: all 0.2s; text-decoration: none; }
.jshop.cart .sj-cart-reload:hover { background: #e0e0e0; color: #333; }
.jshop.cart .sj-cart-reload i { font-size: 14px; transition: transform 0.3s; }
.jshop.cart .sj-cart-reload:hover i { transform: rotate(90deg); }
.jshop.cart .remove .btn-danger { background: transparent; color: #e74c3c; border: 1px solid #e74c3c; padding: 6px 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; border-radius: 4px; transition: all 0.2s; text-decoration: none; display: inline-block; }
.jshop.cart .remove .btn-danger:hover { background: #e74c3c; color: #fff; box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3); }
.cart_block_discount { width: calc(50% - 15px) !important; max-width: none !important; order: 2 !important; margin-top: 0 !important; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); box-sizing: border-box; align-self: flex-start; }
.cart_block_discount .name { font-weight: 600; margin-bottom: 12px; font-size: 14px; text-transform: uppercase; color: #333; }
.cart_block_discount .input-wrap { display: flex; gap: 10px; flex-wrap: wrap; }
.cart_block_discount .inputbox { flex: 1; min-width: 150px; padding: 12px 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; outline: none; transition: border-color 0.2s; }
.cart_block_discount .inputbox:focus { border-color: #ec7200; }
.cart_block_discount .btn { padding: 12px 25px; background: #333; color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: 0.2s; text-transform: uppercase; font-weight: 600; font-size: 13px; }
.cart_block_discount .btn:hover { background: #555; color: #fff; }
.jshop_subtotal { width: calc(50% - 15px) !important; max-width: none !important; order: 3 !important; margin-top: 0 !important; margin-left: 0 !important; background: #f8f9fa; border-radius: 8px; padding: 20px; box-sizing: border-box; box-shadow: 0 2px 10px rgba(0,0,0,0.03); align-self: flex-start; }
.jshop_subtotal td { padding: 12px 15px; border-bottom: 1px solid #eaeaea; }
.jshop_subtotal tr:last-child td { border-bottom: none; }
.jshop_subtotal .name { font-weight: 600; color: #555; text-align: left; }
.jshop_subtotal .value { font-weight: 700; color: #333; text-align: right; }
.jshop_subtotal .total .name, .jshop_subtotal .total .value { font-size: 18px; color: #ec7200; border-top: 2px solid #ddd; padding-top: 15px; }
.jshop_subtotal .discount .value { color: #27ae60; }
.cart_buttons { order: 4 !important; width: 100% !important; margin-top: 30px !important; padding-top: 20px; border-top: 1px solid #eee; }
.cart_buttons .btn { padding: 14px 28px; font-size: 14px; font-weight: 600; text-transform: uppercase; border-radius: 4px; transition: all 0.2s; text-decoration: none; display: inline-block; }
.cart_buttons .btn-secondary { background: #f0f0f0; color: #333; border: none; }
.cart_buttons .btn-secondary:hover { background: #e0e0e0; color: #000; }
.cart_buttons .btn-success { background: #ec7200; color: #fff; border: none; box-shadow: 0 4px 10px rgba(236,114,0,0.3); }
.cart_buttons .btn-success:hover { background: #d66700; color: #fff; box-shadow: 0 6px 15px rgba(214,103,0,0.4); transform: translateY(-2px); }
.clear-cart { text-align: right; margin-bottom: 25px; }
.clear-cart .btn-danger { background: transparent; color: #888; border: none; padding: 0; font-size: 13px; text-decoration: underline; transition: 0.2s; box-shadow: none; }
.clear-cart .btn-danger:hover { color: #e74c3c; background: transparent; }
.cart_empty_text { font-size: 18px; font-weight: 600; color: #555; text-align: center; padding: 50px 0; background: #f8f9fa; border-radius: 8px; border: 1px dashed #ddd; margin-bottom: 30px; }
.cart-loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.7); z-index: 100; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; border-radius: 8px; }
.cart-loading-overlay.active { opacity: 1; pointer-events: auto; }
.cart-spinner { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #ec7200; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.mobile-cart-inline { display: none; font-weight: 600; color: #555; margin-right: 10px; }
@media (max-width: 768px) {
.jshop.cart, .jshop.cart tbody, .jshop.cart tr, .jshop.cart td { display: block; width: 100%; box-sizing: border-box; }
.jshop.cart tr:first-child { display: none; } /* Скрываем шапку таблицы */
.jshop.cart tr.jshop_prod_cart { background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); margin-bottom: 20px; padding: 15px; position: relative; border: 1px solid #eaeaea; }
.jshop.cart td { border: none; padding: 10px 0; text-align: left; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; border-bottom: 1px solid #f9f9f9; }
.jshop.cart tr.jshop_prod_cart td:last-child { border-bottom: none; }
.jshop.cart .jshop_img_description_center { justify-content: center; padding-bottom: 15px; border-bottom: 1px solid #eee; margin-bottom: 10px; }
.jshop.cart .jshop_img { max-width: 120px; }
.jshop.cart .product_name { display: block; text-align: center; margin-bottom: 15px; }
.jshop.cart .product_name .data { width: 100%; }
.mobile-cart-inline { display: inline-block; font-size: 13px; margin-right: 0; }
.jshop.cart .quantity .data { justify-content: flex-end; width: 100%; }
.jshop.cart .quantity input.inputbox { width: 50px; padding: 6px; }
.cart_buttons #checkout { flex-direction: row; flex-wrap: wrap; gap: 15px; justify-content: space-between; }
.cart_buttons .pull-left, .cart_buttons .pull-right { float: none; width: auto; }
.cart_buttons .btn { width: auto; text-align: center; box-sizing: border-box; display: inline-block; padding: 10px 20px; font-size: 13px; }
.cart_block_discount, .jshop_subtotal { width: 100% !important; order: auto !important; margin-top: 20px !important; }
.cart_block_discount .input-wrap { flex-direction: column; align-items: stretch; }
}
/* ---------------------- Конец Cart cart.php — Joomshopping 5.9.1 ---------------------- */
/* ---------------------- Wishlist wishlist.php — Joomshopping 5.9.1 ---------------------- */
#comjshop { color: #333; position: relative; }
.jshop.cartwishlist { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border-radius: 8px; margin-bottom: 30px; overflow: hidden; transition: all 0.3s ease; }
.jshop.cartwishlist th { background: #f8f9fa; padding: 15px; font-size: 13px; font-weight: 600; text-transform: uppercase; color: #555; text-align: left; border-bottom: 2px solid #eaeaea; }
.jshop.cartwishlist td { padding: 20px 15px; vertical-align: middle; border-bottom: 1px solid #f0f0f0; transition: all 0.3s ease; }
.jshop.cartwishlist tr:last-child td { border-bottom: none; }
.jshop.cartwishlist .compare_check { width: 50px; text-align: center; }
.jshop.cartwishlist .compare_check input { transform: scale(1.3); cursor: pointer; margin: 0; }
.jshop.cartwishlist .jshop_img { max-width: 80px; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); display: block; margin: 0 auto; }
.jshop.cartwishlist .product_name a { font-size: 16px; font-weight: 600; color: #2b303b; text-decoration: none; display: block; margin-bottom: 5px; transition: color 0.2s; }
.jshop.cartwishlist .product_name a:hover { color: #ec7200; text-decoration: none; }
.jshop.cartwishlist .jshop_code_prod { font-size: 13px; color: #888; display: block; margin-bottom: 5px; }
.jshop.cartwishlist .manufacturer, .jshop.cartwishlist .real_ean { font-size: 12px; color: #777; margin-top: 3px; }
.jshop.cartwishlist .manufacturer span, .jshop.cartwishlist .real_ean span { font-weight: 600; color: #555; }
.jshop.cartwishlist .single_price .price { font-size: 16px; font-weight: 700; color: #333; }
.jshop.cartwishlist .taxinfo { display: block; font-size: 11px; color: #999; margin-top: 3px; }
.jshop.cartwishlist .basic_price { font-size: 12px; color: #888; margin-top: 5px; }
.jshop.cartwishlist .remove_to_cart .data { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.jshop.cartwishlist .remove_to_cart .btn { padding: 8px 15px; font-size: 12px; font-weight: 600; text-transform: uppercase; border-radius: 4px; transition: all 0.2s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; border: none; }
.jshop.cartwishlist .remove_to_cart .btn-success { background: #27ae60; color: #fff; box-shadow: 0 2px 6px rgba(39,174,96,0.3); }
.jshop.cartwishlist .remove_to_cart .btn-success:hover { background: #219653; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(33,150,83,0.4); }
.jshop.cartwishlist .remove_to_cart .btn-danger { background: transparent; color: #e74c3c; border: 1px solid #e74c3c; }
.jshop.cartwishlist .remove_to_cart .btn-danger:hover { background: #e74c3c; color: #fff; box-shadow: 0 4px 10px rgba(231,76,60,0.3); }
.wishlish_buttons { width: 100%; margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee; }
.wishlish_buttons .btn { padding: 14px 28px; font-size: 14px; font-weight: 600; text-transform: uppercase; border-radius: 4px; transition: all 0.2s; text-decoration: none; display: inline-block; border: none; }
.wishlish_buttons .btn-secondary { background: #f0f0f0; color: #333; }
.wishlish_buttons .btn-secondary:hover { background: #e0e0e0; color: #000; }
.wishlist-top-controls .btn-primary { background: #ec7200; color: #fff; border: none; padding: 10px 20px; font-weight: 600; text-transform: uppercase; font-size: 13px; border-radius: 4px; transition: all 0.2s; }
.wishlist-top-controls .btn-primary:hover { background: #d66700; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(236,114,0,0.3); }
.wishlist_empty_text { font-size: 18px; font-weight: 600; color: #555; text-align: center; padding: 50px 0; background: #f8f9fa; border-radius: 8px; border: 1px dashed #ddd; margin-bottom: 30px; }
.jshop.cartwishlist.compare-mode { display: block; border: none; box-shadow: none; background: transparent; overflow: visible; }
.jshop.cartwishlist.compare-mode tbody { display: flex; flex-direction: row; overflow-x: auto; gap: 20px; padding-bottom: 15px; scroll-snap-type: x mandatory; align-items: flex-start; }
.jshop.cartwishlist.compare-mode tr:first-child { display: none; }
.jshop.cartwishlist.compare-mode tr.jshop_prod_cart { display: flex; flex-direction: column; background: #fff; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); min-width: 260px; max-width: 320px; border: 1px solid #eaeaea; flex-shrink: 0; scroll-snap-align: start; padding: 20px; box-sizing: border-box; }
.jshop.cartwishlist.compare-mode td { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; border: none; padding: 10px 0; width: 100%; border-bottom: 1px solid #f9f9f9; }
.jshop.cartwishlist.compare-mode td.compare_check { display: none; }
.jshop.cartwishlist.compare-mode td.jshop_img_description_center { border-bottom: 1px solid #eee; margin-bottom: 10px; padding-bottom: 15px; }
.jshop.cartwishlist.compare-mode td.jshop_img_description_center .jshop_img { max-width: 150px; }
.jshop.cartwishlist.compare-mode td.product_name { flex-grow: 1; justify-content: flex-start; align-items: flex-start; }
.jshop.cartwishlist.compare-mode td.remove_to_cart { border-bottom: none; margin-top: auto; padding-top: 15px; }
.jshop.cartwishlist.compare-mode td.remove_to_cart .data { justify-content: center; width: 100%; flex-wrap: nowrap; flex-direction: column; }
.jshop.cartwishlist.compare-mode td.remove_to_cart .btn { width: 100%; }
.jshop.cartwishlist.compare-mode td.single_price::before { content: attr(data-compare-label); display: block; font-weight: 600; color: #555; font-size: 13px; margin-bottom: 5px; width: 100%; text-align: center; }
.jshop.cartwishlist .compare-details { display: none; margin-top: 15px; padding-top: 15px; border-top: 1px solid #eaeaea; font-size: 13px; text-align: left; width: 100%; }
.jshop.cartwishlist.compare-mode .compare-details { display: block; }
.jshop.cartwishlist.compare-mode .compare-details .extra_fields_el { margin-bottom: 5px; display: flex; flex-direction: column; }
.jshop.cartwishlist.compare-mode .compare-details .extra_fields_name { font-weight: 600; color: #555; }
.jshop.cartwishlist.compare-mode .compare-details .extra_fields_value { color: #333; }
.jshop.cartwishlist.compare-mode .compare-details .product_ean,
.jshop.cartwishlist.compare-mode .compare-details .productweight,
.jshop.cartwishlist.compare-mode .compare-details .deliverytime,
.jshop.cartwishlist.compare-mode .compare-details .vendorinfo { margin-bottom: 8px; color: #555; }
.jshop.cartwishlist.compare-mode .compare-details .product_ean span { font-weight: 600; color: #333; }
.jshop.cartwishlist.compare-mode .compare-details .jshop_prod_description { margin-top: 10px; color: #666; font-size: 12px; }
.jshop.cartwishlist.compare-mode .compare-details .block_efg { margin-bottom: 10px; }
.jshop.cartwishlist.compare-mode .compare-details .extra_fields_group { font-weight: 700; text-transform: uppercase; margin-bottom: 5px; color: #2b303b; border-bottom: 1px solid #eee; padding-bottom: 3px; }
.jshop.cartwishlist.compare-mode tbody::-webkit-scrollbar { height: 8px; }
.jshop.cartwishlist.compare-mode tbody::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.jshop.cartwishlist.compare-mode tbody::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.jshop.cartwishlist.compare-mode tbody::-webkit-scrollbar-thumb:hover { background: #ec7200; }
@media (max-width: 768px) {
.jshop.cartwishlist:not(.compare-mode),
.jshop.cartwishlist:not(.compare-mode) tbody,
.jshop.cartwishlist:not(.compare-mode) tr,
.jshop.cartwishlist:not(.compare-mode) td { display: block; width: 100%; box-sizing: border-box; }
.jshop.cartwishlist:not(.compare-mode) tr:first-child { display: none; }
.jshop.cartwishlist:not(.compare-mode) tr.jshop_prod_cart { background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); margin-bottom: 20px; padding: 15px; position: relative; border: 1px solid #eaeaea; }
.jshop.cartwishlist:not(.compare-mode) td { border: none; padding: 10px 0; text-align: left; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; border-bottom: 1px solid #f9f9f9; }
.jshop.cartwishlist:not(.compare-mode) tr.jshop_prod_cart td:last-child { border-bottom: none; }
.jshop.cartwishlist:not(.compare-mode) .compare_check { justify-content: flex-end; padding-bottom: 5px; width: 100%; }
.jshop.cartwishlist:not(.compare-mode) .compare_check::before { content: attr(data-compare-label); font-weight: 600; color: #555; font-size: 13px; margin-right: auto; }
.jshop.cartwishlist:not(.compare-mode) .compare_check input { margin-right: 10px; }
.jshop.cartwishlist:not(.compare-mode) .jshop_img_description_center { justify-content: center; padding-bottom: 15px; border-bottom: 1px solid #eee; margin-bottom: 10px; }
.jshop.cartwishlist:not(.compare-mode) .jshop_img { max-width: 120px; }
.jshop.cartwishlist:not(.compare-mode) .product_name { display: block; text-align: center; margin-bottom: 15px; }
.jshop.cartwishlist:not(.compare-mode) .product_name .data { width: 100%; }
.jshop.cartwishlist:not(.compare-mode) .single_price::before { content: attr(data-price-label); font-weight: 600; color: #555; font-size: 13px; }
.jshop.cartwishlist:not(.compare-mode) .remove_to_cart { display: block; padding-top: 15px; }
.jshop.cartwishlist:not(.compare-mode) .remove_to_cart .data { justify-content: space-between; width: 100%; gap: 10px; }
.jshop.cartwishlist:not(.compare-mode) .remove_to_cart .btn { flex: 1; padding: 12px 10px; text-align: center; justify-content: center; font-size: 11px; }
.wishlish_buttons #checkout { flex-direction: row; flex-wrap: wrap; gap: 15px; justify-content: space-between; }
.wishlish_buttons .pull-left, .wishlish_buttons .pull-right { float: none; width: auto; }
.wishlish_buttons .btn { width: auto; text-align: center; box-sizing: border-box; display: inline-block; padding: 10px 20px; font-size: 13px; }
}
/* ---------------------- Конец Wishlist wishlist.php — Joomshopping 5.9.1 ---------------------- */
/* ==========================================================================
СТИЛИ ДЛЯ РАЗДЕЛА ПОЛЬЗОВАТЕЛЯ JOOMSHOPPING (Папка: user/)
Файлы: editaccount.php, register.php, login.php, myaccount.php, groupsinfo.php, logout.php
========================================================================== */
/* ---------------------- Общие стили раздела User ---------------------- */
#comjshop h1 { font-size: 28px; font-weight: 700; color: #2b303b; margin-bottom: 25px; line-height: 1.2; }
.jshop .requiredtext { font-size: 13px; color: #e74c3c; font-weight: 600; }
/* ---------------------- Регистрация и Редактирование (register.php, editaccount.php) ---------------------- */
.jshop.max-500 { max-width: 650px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.jshop_register, .editaccount_block { background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 30px; border: 1px solid #eaeaea; }
.jshop_register .control-group { margin-bottom: 20px; display: flex; flex-direction: column; }
.jshop_register .control-label.name { margin-bottom: 8px; }
.jshop_register .control-label label { font-weight: 600; color: #444; font-size: 14px; margin: 0; display: inline-block; line-height: 1.4; }
.jshop_register .control-label label span { color: #e74c3c; margin-left: 4px; font-weight: bold; }
.jshop_register .controls input[type="text"],
.jshop_register .controls input[type="password"],
.jshop_register .controls select { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 15px; transition: all 0.2s ease; background: #fcfcfc; box-sizing: border-box; color: #333; outline: none; }
.jshop_register .controls input:focus,
.jshop_register .controls select:focus { border-color: #2b303b; background: #fff; box-shadow: 0 0 0 2px rgba(43, 48, 59, 0.1); }
.other_delivery_adress { background: #f8f9fa; padding: 15px 20px; border-radius: 4px; border: 1px solid #eaeaea; display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 25px; }
.other_delivery_adress .control-label.name { font-weight: 700; color: #333; font-size: 15px; margin: 0; }
.other_delivery_adress .controls { display: flex; align-items: center; gap: 15px; }
.other_delivery_adress input[type="radio"] { margin: 0 5px 0 0; accent-color: #ec7200; cursor: pointer; transform: scale(1.1); }
.other_delivery_adress label { margin: 0; cursor: pointer; font-size: 14px; color: #555; font-weight: 500; }
.jshop_block_privacy_statement { background: #fcfcfc; padding: 15px 20px; border: 1px dashed #ddd; border-radius: 4px; margin-top: 10px; margin-bottom: 20px; }
.jshop_block_privacy_statement .control-group { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 12px; margin-bottom: 0; }
.jshop_block_privacy_statement .controls input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: #ec7200; cursor: pointer; }
.jshop_block_privacy_statement .control-label { margin: 0; }
.jshop_block_privacy_statement a { color: #ec7200; text-decoration: underline; font-weight: 600; font-size: 14px; transition: 0.2s; }
.jshop_block_privacy_statement a:hover { color: #d66700; text-decoration: none; }
.box_button { margin-top: 30px; padding-top: 25px; border-top: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.box_button .controls { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.box_button .btn { padding: 14px 30px; background: #ec7200; color: #fff; border: none; border-radius: 4px; font-weight: 700; text-transform: uppercase; font-size: 15px; transition: all 0.2s; box-shadow: 0 4px 10px rgba(236,114,0,0.3); cursor: pointer; }
.box_button .btn:hover { background: #d66700; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(214,103,0,0.4); }
/* ---------------------- Авторизация (login.php) ---------------------- */
.pagelogin .row { display: flex; flex-wrap: wrap; gap: 30px; margin: 0; }
.pagelogin .col-lg-6 { flex: 1 1 calc(50% - 15px); max-width: calc(50% - 15px); padding: 0; box-sizing: border-box; }
.login_block, .register_block { background: #fff; padding: 35px 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); height: 100%; display: flex; flex-direction: column; border: 1px solid #eaeaea; }
.pagelogin .small_header { font-size: 22px; font-weight: 700; margin-bottom: 12px; color: #2b303b; line-height: 1.2; }
.pagelogin .logintext { color: #666; margin-bottom: 25px; font-size: 14px; line-height: 1.6; }
.login_block .control-elms { margin-bottom: 20px; }
.login_block .control-elms label { font-weight: 600; color: #444; margin-bottom: 8px; display: block; font-size: 14px; }
.login_block .control-elms input.inputbox { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 15px; transition: 0.2s; box-sizing: border-box; background: #fcfcfc; }
.login_block .control-elms input.inputbox:focus { border-color: #2b303b; background: #fff; box-shadow: 0 0 0 2px rgba(43, 48, 59, 0.1); outline: none; }
.checkbox.rowremember .controls { display: flex; align-items: center; gap: 10px; }
.checkbox.rowremember input { margin: 0; width: 18px; height: 18px; accent-color: #ec7200; cursor: pointer; }
.checkbox.rowremember label { margin: 0; cursor: pointer; font-weight: 500; color: #555; }
.rowlostpassword a { color: #888; text-decoration: underline; font-size: 13px; transition: 0.2s; display: inline-block; margin-top: 5px; }
.rowlostpassword a:hover { color: #ec7200; }
.rowbutton .btn { padding: 14px 30px; font-size: 15px; background: #2b303b; color: #fff; border: none; text-transform: uppercase; font-weight: 700; border-radius: 4px; transition: 0.2s; cursor: pointer; width: 100%; box-shadow: 0 4px 10px rgba(43,48,59,0.2); }
.rowbutton .btn:hover { background: #1a1e25; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(43,48,59,0.3); }
.block_button_register { margin-top: auto; }
.block_button_register .btn { padding: 14px 30px; font-size: 15px; background: #ec7200; color: #fff; border: none; text-transform: uppercase; font-weight: 700; border-radius: 4px; transition: 0.2s; cursor: pointer; width: 100%; box-shadow: 0 4px 10px rgba(236,114,0,0.3); }
.block_button_register .btn:hover { background: #d66700; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(214,103,0,0.4); }
.text_pay_without_reg { display: block; margin-top: 30px; padding-top: 25px; border-top: 1px solid #eaeaea; }
.text_pay_without_reg .btn { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 15px; padding: 14px 25px; background: #f0f0f0; color: #333; text-decoration: none; font-weight: 700; text-transform: uppercase; border-radius: 4px; font-size: 14px; transition: 0.2s; border: 1px solid #e0e0e0; }
.text_pay_without_reg .btn:hover { background: #e0e0e0; color: #000; border-color: #d0d0d0; }
/* ---------------------- Личный кабинет (myaccount.php) ---------------------- */
.jshop_profile_data { background: #fff; padding: 25px 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 35px; border: 1px solid #eaeaea; border-left: 4px solid #2b303b; }
.jshop_profile_data > div { font-size: 15px; color: #444; margin-bottom: 12px; display: flex; align-items: baseline; flex-wrap: wrap; }
.jshop_profile_data > div:last-child { margin-bottom: 0; }
.jshop_profile_data span { font-weight: 700; color: #2b303b; min-width: 140px; margin-right: 10px; }
.jshop_profile_data .name { font-size: 22px; font-weight: 700; color: #ec7200; margin-bottom: 20px; border-bottom: 1px solid #eaeaea; padding-bottom: 15px; width: 100%; }
.jshop_profile_data .subinfo { font-weight: 400; color: #888; font-size: 13px; margin-left: 8px; min-width: auto; }
.jshop_user_group_info { margin-left: 10px; color: #007bff; text-decoration: underline; font-size: 13px; }
.jshop_user_group_info:hover { text-decoration: none; }
.myaccount_urls { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.myaccount_urls a { display: flex; align-items: center; justify-content: center; padding: 20px 15px; background: #fff; border: 1px solid #eaeaea; border-radius: 8px; text-decoration: none; color: #333; font-weight: 700; text-transform: uppercase; font-size: 14px; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
.myaccount_urls a:hover { border-color: #ec7200; color: #ec7200; transform: translateY(-4px); box-shadow: 0 8px 20px rgba(236,114,0,0.15); }
.myaccount_urls .urllogout a { border-color: #fbd6d2; color: #e74c3c; background: #fffdfd; }
.myaccount_urls .urllogout a:hover { border-color: #e74c3c; background: #e74c3c; color: #fff; box-shadow: 0 8px 20px rgba(231,76,60,0.2); }
/* ---------------------- Информация о группах (groupsinfo.php) ---------------------- */
.groups_list { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border-radius: 8px; margin-bottom: 30px; overflow: hidden; border: 1px solid #eaeaea; }
.groups_list th { background: #f8f9fa; padding: 18px 20px; font-size: 13px; font-weight: 700; text-transform: uppercase; color: #555; text-align: left; border-bottom: 2px solid #eaeaea; }
.groups_list td { padding: 18px 20px; vertical-align: middle; border-bottom: 1px solid #f0f0f0; font-size: 15px; color: #444; transition: background 0.2s; }
.groups_list tr:hover td { background: #fcfcfc; }
.groups_list tr:last-child td { border-bottom: none; }
.groups_list .discount { text-align: right; font-weight: 700; color: #ec7200; font-size: 16px; }
.groups_list th.discount { text-align: right; }
/* ---------------------- Мобильная адаптация User (Планшеты и Смартфоны) ---------------------- */
@media (max-width: 991.98px) {
.pagelogin .row { flex-direction: column; }
.pagelogin .col-lg-6 { flex: 1 1 100%; max-width: 100%; }
}
@media (max-width: 768px) {
#comjshop h1 { font-size: 24px; margin-bottom: 20px; }
.jshop_register, .editaccount_block, .login_block, .register_block, .jshop_profile_data { padding: 20px; }
/* Формы */
.box_button .controls { flex-direction: column; align-items: stretch; text-align: center; gap: 15px; }
.box_button .btn { width: 100%; order: 1; padding: 15px; }
.box_button .requiredtext { order: 2; margin: 0; }
.other_delivery_adress { flex-direction: column; align-items: flex-start; gap: 15px; }
/* ЛК */
.jshop_profile_data span { min-width: 100%; display: block; margin-bottom: 4px; font-size: 13px; color: #888; }
.jshop_profile_data > div { flex-direction: column; align-items: flex-start; border-bottom: 1px dashed #f0f0f0; padding-bottom: 10px; margin-bottom: 10px; }
.jshop_profile_data > div:last-child { border-bottom: none; padding-bottom: 0; }
.myaccount_urls { grid-template-columns: 1fr; gap: 15px; }
/* Таблица групп (карточный вид) */
.groups_list, .groups_list tbody, .groups_list tr, .groups_list td { display: block; width: 100%; box-sizing: border-box; }
.groups_list tr:first-child { display: none; }
.groups_list tr { background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 15px; border: 1px solid #eaeaea; overflow: hidden; }
.groups_list td { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f0f0f0; padding: 15px; }
.groups_list td:last-child { border-bottom: none; }
.groups_list td.title::before { content: "Группа: "; font-weight: 600; color: #888; font-size: 13px; margin-right: auto; }
.groups_list td.discount::before { content: "Скидка: "; font-weight: 600; color: #888; font-size: 13px; margin-right: auto; }
}
/* ==========================================================================
СТИЛИ ДЛЯ ОФОРМЛЕНИЯ ЗАКАЗА JOOMSHOPPING (Папка: checkout/)
========================================================================== */
/* ---------------------- Шаги оформления (checkout/menu.php) ---------------------- */
#jshop_menu_order { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 30px; margin-bottom: 40px; padding: 20px; background: #fff; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); border: 1px solid #eaeaea; }
.jshop_order_step { font-size: 14px; font-weight: 600; color: #888; text-transform: uppercase; position: relative; }
.jshop_order_step a { color: #888; text-decoration: none; transition: color 0.2s; }
.jshop_order_step a:hover { color: #2b303b; }
.jshop_order_step.active_step { color: #ec7200; font-weight: 700; pointer-events: none; }
.jshop_order_step.active { color: #ec7200; font-weight: 700; pointer-events: none; }
/* Стрелочки между шагами */
.jshop_order_step:not(:last-child)::after { content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: -20px; color: #ccc; top: 50%; transform: translateY(-50%); }
/* ---------------------- Адрес доставки и оплаты (checkout/adress.php) ---------------------- */
.address_block.max-500 { max-width: 650px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.address_block .jshop_register { background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 30px; border: 1px solid #eaeaea; }
.address_block .control-group { margin-bottom: 20px; display: flex; flex-direction: column; }
.address_block .control-label.name { margin-bottom: 8px; }
.address_block .control-label label { font-weight: 600; color: #444; font-size: 14px; margin: 0; display: inline-block; line-height: 1.4; }
.address_block .control-label label span { color: #e74c3c; margin-left: 4px; font-weight: bold; }
.address_block .controls input[type="text"],
.address_block .controls input[type="password"],
.address_block .controls select { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 15px; transition: all 0.2s ease; background: #fcfcfc; box-sizing: border-box; color: #333; outline: none; }
.address_block .controls input:focus,
.address_block .controls select:focus { border-color: #2b303b; background: #fff; box-shadow: 0 0 0 2px rgba(43, 48, 59, 0.1); }
.address_block .other_delivery_adress { background: #f8f9fa; padding: 15px 20px; border-radius: 4px; border: 1px solid #eaeaea; display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 25px; }
.address_block .other_delivery_adress .control-label.name { font-weight: 700; color: #333; font-size: 15px; margin: 0; }
.address_block .other_delivery_adress .controls { display: flex; align-items: center; gap: 15px; }
.address_block .other_delivery_adress input[type="radio"] { margin: 0 5px 0 0; accent-color: #ec7200; cursor: pointer; transform: scale(1.1); }
.address_block .other_delivery_adress label { margin: 0; cursor: pointer; font-size: 14px; color: #555; font-weight: 500; }
.address_block .jshop_block_privacy_statement { background: #fcfcfc; padding: 15px 20px; border: 1px dashed #ddd; border-radius: 4px; margin-top: 10px; margin-bottom: 20px; }
.address_block .jshop_block_privacy_statement .control-group { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 12px; margin-bottom: 0; }
.address_block .jshop_block_privacy_statement .controls input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: #ec7200; cursor: pointer; }
.address_block .jshop_block_privacy_statement a { color: #ec7200; text-decoration: underline; font-weight: 600; font-size: 14px; transition: 0.2s; }
.address_block .jshop_block_privacy_statement a:hover { color: #d66700; text-decoration: none; }
.address_block .box_button { margin-top: 30px; padding-top: 25px; border-top: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.address_block .box_button .controls { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.address_block .box_button .btn { padding: 14px 30px; background: #ec7200; color: #fff; border: none; border-radius: 4px; font-weight: 700; text-transform: uppercase; font-size: 15px; transition: all 0.2s; box-shadow: 0 4px 10px rgba(236,114,0,0.3); cursor: pointer; }
.address_block .box_button .btn:hover { background: #d66700; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(214,103,0,0.4); }
.address_block .requiredtext { font-size: 13px; color: #e74c3c; font-weight: 600; margin: 0; }
/* ---------------------- Методы Оплаты и Доставки (checkout/payments.php, checkout/shippings.php) ---------------------- */
.checkout_payment_block, .checkout_shipping_block { max-width: 800px; margin: 0 auto; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid #eaeaea; }
#table_payments, #table_shippings { display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px; }
#table_payments .name, #table_shippings .name { display: flex; align-items: center; background: #fcfcfc; border: 1px solid #eaeaea; padding: 15px 20px; border-radius: 6px; transition: 0.2s; cursor: pointer; }
#table_payments .name:hover, #table_shippings .name:hover { border-color: #ddd; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
#table_payments input[type="radio"], #table_shippings input[type="radio"] { margin: 0 15px 0 0; accent-color: #ec7200; transform: scale(1.2); cursor: pointer; }
#table_payments label, #table_shippings label { display: flex; align-items: center; flex-wrap: wrap; margin: 0; cursor: pointer; width: 100%; font-size: 15px; color: #333; }
#table_payments label b, #table_shippings label b { font-weight: 600; margin-right: 10px; }
.payment_image, .shipping_image { margin-right: 15px; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 35px; background: #fff; border: 1px solid #eee; border-radius: 4px; padding: 2px; }
.payment_image img, .shipping_image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.payment_price, .shipping_price { color: #ec7200; font-weight: 700; font-size: 14px; white-space: nowrap; }
/* Дополнительные блоки описаний и форм в оплате/доставке */
.paymform, .shipping_form, .shipping_descr { margin: 10px 0 15px 35px; padding: 15px; background: #f8f9fa; border-left: 3px solid #2b303b; border-radius: 0 4px 4px 0; font-size: 14px; color: #555; }
.shipping_weight_to_price { margin: 10px 0 10px 35px; width: auto; min-width: 250px; border-collapse: collapse; }
.shipping_weight_to_price td { padding: 8px 12px; border: 1px solid #eaeaea; font-size: 13px; }
.shipping_weight_to_price td.weight { background: #fcfcfc; font-weight: 600; color: #555; }
.shipping_weight_to_price td.price { text-align: right; color: #ec7200; font-weight: 700; }
.shipping_delivery, .shipping_delivery_date { margin-left: 35px; font-size: 13px; color: #888; margin-top: 5px; }
.checkout_payment_block .btn, .checkout_shipping_block .btn { padding: 14px 30px; background: #ec7200; color: #fff; border: none; border-radius: 4px; font-weight: 700; text-transform: uppercase; font-size: 15px; transition: all 0.2s; box-shadow: 0 4px 10px rgba(236,114,0,0.3); width: 100%; cursor: pointer; }
.checkout_payment_block .btn:hover, .checkout_shipping_block .btn:hover { background: #d66700; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(214,103,0,0.4); }
/* ---------------------- Подтверждение заказа (checkout/previewfinish.php) ---------------------- */
.checkout_pfinish_block { background: #fff; padding: 0; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 30px; border: 1px solid #eaeaea; overflow: hidden; }
.checkoutinfo { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0; border-bottom: 1px solid #eaeaea; }
.checkoutinfo > div { padding: 25px; border-right: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; }
.checkoutinfo > div:last-child { border-right: none; }
.checkoutinfo strong { display: block; font-size: 13px; text-transform: uppercase; color: #888; margin-bottom: 10px; letter-spacing: 0.5px; }
.checkoutinfo span { display: block; font-size: 15px; color: #333; line-height: 1.5; font-weight: 500; }
.checkoutinfo .delivery_time, .checkoutinfo .delivery_date { margin-top: 15px; }
.checkoutinfo .delivery_time strong, .checkoutinfo .delivery_date strong { margin-bottom: 4px; }
.pfinish_comment_block { padding: 30px; background: #fcfcfc; }
.pfinish_comment_block .name { font-size: 16px; font-weight: 700; color: #2b303b; margin-bottom: 15px; }
.pfinish_comment_block .field textarea { width: 100%; min-height: 100px; padding: 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; box-sizing: border-box; resize: vertical; transition: 0.2s; outline: none; background: #fff; }
.pfinish_comment_block .field textarea:focus { border-color: #ec7200; box-shadow: 0 0 0 2px rgba(236,114,0,0.1); }
.row_agb, .row_no_return { margin-top: 20px; background: #fff; padding: 15px 20px; border: 1px dashed #ddd; border-radius: 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; color: #555; }
.row_agb input[type="checkbox"], .row_no_return input[type="checkbox"] { width: 18px; height: 18px; accent-color: #ec7200; cursor: pointer; margin: 0 5px 0 0; }
.row_agb a.policy { color: #ec7200; text-decoration: underline; font-weight: 600; transition: 0.2s; }
.row_agb a.policy:hover { color: #d66700; text-decoration: none; }
.pfinish_comment_block .box_button { margin-top: 30px; text-align: right; }
.pfinish_comment_block .btn { padding: 16px 40px; background: #ec7200; color: #fff; border: none; border-radius: 4px; font-weight: 700; text-transform: uppercase; font-size: 16px; transition: all 0.2s; box-shadow: 0 4px 15px rgba(236,114,0,0.3); cursor: pointer; display: inline-block; }
.pfinish_comment_block .btn:hover { background: #d66700; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(214,103,0,0.4); }
/* ---------------------- Страница "Заказ завершен" (checkout/finish.php) ---------------------- */
#comjshop > p { background: #d4edda; color: #155724; padding: 20px 25px; border-radius: 4px; border: 1px solid #c3e6cb; font-size: 16px; font-weight: 600; text-align: center; margin-bottom: 30px; }
/* ---------------------- iFrame для оплаты (checkout/step6iframe.php) ---------------------- */
iframe { max-width: 100%; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
/* ---------------------- Адаптив для оформления заказа (Мобильные и Планшеты) ---------------------- */
@media (max-width: 768px) {
#jshop_menu_order { flex-direction: column; align-items: flex-start; gap: 15px; }
.jshop_order_step:not(:last-child)::after { display: none; }
.address_block .box_button .controls { flex-direction: column; gap: 15px; }
.address_block .box_button .btn { width: 100%; order: 1; }
.address_block .requiredtext { order: 2; }
.address_block .other_delivery_adress { flex-direction: column; align-items: flex-start; }
#table_payments label, #table_shippings label { flex-direction: column; align-items: flex-start; gap: 10px; }
.payment_image, .shipping_image { margin-right: 0; }
.paymform, .shipping_form, .shipping_descr { margin-left: 0; border-left: none; border-top: 3px solid #2b303b; border-radius: 0 0 4px 4px; }
.shipping_weight_to_price { margin-left: 0; width: 100%; min-width: 100%; }
.checkoutinfo { grid-template-columns: 1fr; }
.checkoutinfo > div { border-right: none; }
.pfinish_comment_block { padding: 20px; }
.row_agb { align-items: flex-start; }
.pfinish_comment_block .btn { width: 100%; text-align: center; }
}
/* ==========================================================================
СТИЛИ ДЛЯ РАЗДЕЛА ЗАКАЗОВ JOOMSHOPPING (Папка: order/)
Файлы: listorder.php, order.php, statusorder.php
========================================================================== */
/* ---------------------- СПИСОК ЗАКАЗОВ (listorder.php) ---------------------- */
.myorders_block_info {
background: #fff;
padding: 25px 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
margin-bottom: 30px;
border: 1px solid #eaeaea;
}
.myorders_block_info .order_number,
.myorders_block_info .order_status {
display: inline-block;
margin-right: 25px;
margin-bottom: 15px;
font-size: 15px;
color: #333;
}
.myorders_block_info .order_number b,
.myorders_block_info .order_status b {
color: #888;
font-weight: 600;
text-transform: uppercase;
font-size: 13px;
margin-right: 5px;
}
.myorders_block_info .order_status span {
font-weight: 700;
color: #2b303b;
background: #f8f9fa;
padding: 4px 10px;
border-radius: 4px;
border: 1px solid #eaeaea;
}
.myorders_block_info .table_order_list {
border-top: 1px solid #eaeaea;
padding-top: 20px;
margin-top: 5px;
}
.table_order_list .users div,
.table_order_list .products div {
margin-bottom: 8px;
font-size: 14px;
color: #444;
}
.table_order_list b {
font-weight: 600;
color: #555;
display: inline-block;
min-width: 140px;
}
.table_order_list .buttons {
display: flex;
align-items: center;
justify-content: flex-end;
}
.table_order_list .btn-primary,
.downlod_order_invoice .btn-secondary,
.button_cancel .btn-secondary {
padding: 12px 25px;
border-radius: 4px;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
transition: all 0.2s;
text-decoration: none;
display: inline-block;
text-align: center;
border: none;
}
.table_order_list .btn-primary {
background: #ec7200;
color: #fff;
box-shadow: 0 4px 10px rgba(236,114,0,0.3);
}
.table_order_list .btn-primary:hover {
background: #d66700;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(214,103,0,0.4);
}
.myorders_total {
background: #fcfcfc;
padding: 20px 30px;
border-radius: 8px;
border: 1px dashed #ddd;
text-align: right;
font-size: 18px;
margin-bottom: 30px;
}
.myorders_total .name {
font-weight: 600;
color: #555;
margin-right: 15px;
text-transform: uppercase;
font-size: 15px;
}
.myorders_total .price {
font-weight: 700;
color: #ec7200;
font-size: 22px;
}
.myorders_no_orders {
background: #f8f9fa;
padding: 30px;
text-align: center;
border-radius: 8px;
border: 1px solid #eaeaea;
color: #888;
font-weight: 500;
font-size: 16px;
}
/* ---------------------- ДЕТАЛИ ЗАКАЗА (order.php) ---------------------- */
.jshop.myorderinfo > div.order_number,
.jshop.myorderinfo > div.order_status,
.jshop.myorderinfo > div.order_date,
.jshop.myorderinfo > div.order_total {
background: #fff;
padding: 15px 30px;
border-left: 1px solid #eaeaea;
border-right: 1px solid #eaeaea;
font-size: 15px;
color: #333;
}
.jshop.myorderinfo > div.order_number {
border-top: 1px solid #eaeaea;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
padding-top: 25px;
margin-top: 20px;
}
.jshop.myorderinfo > div.order_total {
border-bottom: 1px solid #eaeaea;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
padding-bottom: 25px;
margin-bottom: 30px;
box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
.jshop.myorderinfo > div.order_number b,
.jshop.myorderinfo > div.order_status b,
.jshop.myorderinfo > div.order_date b,
.jshop.myorderinfo > div.order_total b {
display: inline-block;
min-width: 180px;
color: #888;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
}
.downlod_order_invoice {
margin-bottom: 25px;
}
.downlod_order_invoice .btn-secondary,
.button_cancel .btn-secondary {
background: #2b303b;
color: #fff;
box-shadow: 0 4px 10px rgba(43,48,59,0.2);
}
.downlod_order_invoice .btn-secondary:hover,
.button_cancel .btn-secondary:hover {
background: #1a1e25;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(43,48,59,0.3);
}
/* Блоки с адресами покупателя */
.row.userinfo {
margin-bottom: 40px;
}
.userbillinfo, .userdeliveryinfo {
background: #fff;
padding: 25px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
border: 1px solid #eaeaea;
height: 100%;
}
.userbillinfo table.jshop, .userdeliveryinfo table.jshop {
width: 100%;
border-collapse: collapse;
}
.userbillinfo table.jshop td, .userdeliveryinfo table.jshop td {
padding: 10px 0;
border-bottom: 1px dashed #f0f0f0;
font-size: 14px;
color: #444;
}
.userbillinfo table.jshop tr:last-child td,
.userdeliveryinfo table.jshop tr:last-child td {
border-bottom: none;
}
.userbillinfo table.jshop td:first-child,
.userdeliveryinfo table.jshop td:first-child {
font-weight: 600;
color: #2b303b;
width: 40%;
padding: 10px;
}
.userbillinfo table.jshop b, .userdeliveryinfo table.jshop b {
font-size: 16px;
color: #2b303b;
text-transform: uppercase;
display: block;
margin-bottom: 10px;
border-bottom: 2px solid #eaeaea;
padding-bottom: 10px;
}
/* Таблица товаров заказа */
.product_head strong {
display: block;
font-size: 20px;
color: #2b303b;
margin-bottom: 20px;
text-transform: uppercase;
}
.order_items {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
border: 1px solid #eaeaea;
overflow: hidden;
margin-bottom: 30px;
}
table.jshop.cart {
width: 100%;
border-collapse: collapse;
}
table.jshop.cart th {
background: #f8f9fa;
padding: 18px 20px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
color: #555;
text-align: left;
border-bottom: 2px solid #eaeaea;
}
table.jshop.cart td {
padding: 18px 20px;
vertical-align: middle;
border-bottom: 1px solid #f0f0f0;
font-size: 14px;
color: #444;
}
table.jshop.cart tr.even td {
background: #fcfcfc;
}
table.jshop.cart tr:last-child td {
border-bottom: none;
}
.jshop_prod_cart .name a {
font-weight: 700;
color: #2b303b;
text-decoration: none;
font-size: 15px;
transition: 0.2s;
}
.jshop_prod_cart .name a:hover {
color: #ec7200;
}
.jshop_prod_cart .manufacturer,
.jshop_prod_cart .manufacturer_code,
.jshop_prod_cart .real_ean,
.jshop_prod_cart .attribs {
font-size: 13px;
color: #888;
margin-top: 5px;
}
.jshop_prod_cart .attribs {
color: #555;
}
table.jshop.cart .single_price .price {
font-weight: 600;
color: #333;
}
table.jshop.cart .total_price .data {
font-weight: 700;
color: #ec7200;
font-size: 16px;
}
.mobile-cart, .mobile-cart-inline {
display: none;
}
/* Блок итогов (Subtotal) */
.weightorder {
text-align: right;
font-size: 14px;
color: #888;
margin-bottom: 15px;
}
table.jshop_subtotal {
width: 100%;
max-width: 400px;
margin-left: auto;
border-collapse: collapse;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
border: 1px solid #eaeaea;
margin-bottom: 40px;
}
table.jshop_subtotal td {
padding: 15px 20px;
border-bottom: 1px solid #f0f0f0;
font-size: 14px;
}
table.jshop_subtotal td.name {
text-align: right;
font-weight: 600;
color: #555;
}
table.jshop_subtotal td.value {
text-align: right;
color: #333;
font-weight: 600;
width: 30%;
}
table.jshop_subtotal tr.total td {
background: #f8f9fa;
border-bottom: none;
}
table.jshop_subtotal tr.total td.name {
font-size: 16px;
color: #2b303b;
text-transform: uppercase;
}
table.jshop_subtotal tr.total td.value {
font-size: 20px;
font-weight: 700;
color: #ec7200;
}
/* Информационные блоки (Доставка, Оплата, Комментарий) */
.shipping_block_info,
.payment_block_info,
.order_comment,
.history {
background: #fcfcfc;
padding: 25px 30px;
border-radius: 8px;
border: 1px solid #eaeaea;
border-left: 4px solid #2b303b;
margin-bottom: 30px;
}
.shipping_head b,
.payment_head b,
.order_comment_head b,
.history_head b {
display: block;
font-size: 16px;
text-transform: uppercase;
color: #2b303b;
margin-bottom: 15px;
border-bottom: 1px solid #eaeaea;
padding-bottom: 10px;
}
.shipping_info,
.order_shipping_params,
.delivery_time,
.delivery_date,
.payment_info,
.order_payment_params,
.order_comment_info {
font-size: 14px;
line-height: 1.6;
color: #444;
margin-bottom: 10px;
}
/* Таблица истории */
.order_history table {
width: 100%;
border-collapse: collapse;
}
.order_history td {
padding: 12px 15px;
border-bottom: 1px solid #eaeaea;
font-size: 14px;
}
.order_history tr:last-child td {
border-bottom: none;
}
.order_history td.date {
font-weight: 600;
color: #888;
width: 20%;
}
.order_history td.name {
font-weight: 700;
color: #2b303b;
width: 30%;
}
.order_history td.comment {
color: #555;
}
.button_cancel {
margin-top: 40px;
text-align: right;
}
/* ---------------------- МОБИЛЬНАЯ АДАПТАЦИЯ (Планшеты и Смартфоны) ---------------------- */
@media (max-width: 991.98px) {
.table_order_list .col-lg-6,
.table_order_list .col-lg-3 {
width: 100%;
margin-bottom: 15px;
}
.table_order_list .buttons {
justify-content: flex-start;
}
.row.userinfo {
display: flex;
flex-direction: column;
gap: 20px;
}
.userbillinfo, .userdeliveryinfo {
width: 100%;
}
}
@media (max-width: 768px) {
.myorders_block_info,
.jshop.myorderinfo > div.order_number,
.jshop.myorderinfo > div.order_status,
.jshop.myorderinfo > div.order_date,
.jshop.myorderinfo > div.order_total,
.shipping_block_info,
.payment_block_info,
.order_comment,
.history {
padding: 20px;
}
.jshop.myorderinfo > div.order_number b,
.jshop.myorderinfo > div.order_status b,
.jshop.myorderinfo > div.order_date b,
.jshop.myorderinfo > div.order_total b {
min-width: 100%;
display: block;
margin-bottom: 5px;
}
table.jshop_subtotal {
max-width: 100%;
}
table.jshop_subtotal td {
padding: 12px 15px;
}
/* Адаптация таблицы корзины */
table.jshop.cart,
table.jshop.cart tbody,
table.jshop.cart tr,
table.jshop.cart td {
display: block;
width: 100%;
box-sizing: border-box;
}
table.jshop.cart thead {
display: none; /* Скрываем стандартный заголовок на мобильных */
}
table.jshop.cart tr {
border-bottom: 2px solid #eaeaea;
padding-bottom: 15px;
margin-bottom: 15px;
}
table.jshop.cart td {
border-bottom: none;
padding: 8px 15px;
display: flex;
justify-content: space-between;
align-items: center;
text-align: right;
}
table.jshop.cart td.product_name {
flex-direction: column;
align-items: flex-start;
text-align: left;
background: #fcfcfc;
border-radius: 6px;
}
.mobile-cart, .mobile-cart-inline {
display: block;
font-weight: 600;
color: #888;
font-size: 13px;
}
/* Адаптация таблицы истории */
.order_history table,
.order_history tbody,
.order_history tr,
.order_history td {
display: block;
width: 100%;
}
.order_history tr {
border-bottom: 1px solid #eaeaea;
padding: 15px 0;
}
.order_history td {
border: none;
padding: 5px 0;
}
}
/* ---------------------- Checkout checkout.php sticky для сайдбара — Joomshopping 5.9.1 ---------------------- */
body, html,
#sp-main-body,
#sp-component,
#comjshop,
.jshop,
.checkout-columns-wrapper {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
/* Двухколоночный макет для шагов оформления */
.checkout-columns-wrapper {
display: flex;
flex-wrap: wrap;
gap: 40px;
align-items: flex-start;
margin-top: 20px;
}
.checkout-main-content {
flex: 1 1 calc(60% - 40px);
min-width: 300px;
}
/* Правый сайдбар "Ваш заказ" — ПЛАВАЮЩИЙ БЛОК */
.checkout-sidebar-right {
flex: 1 1 40%;
min-width: 300px;
background: #fdfdfd;
padding: 30px;
border: 2px solid #f0f0f0;
border-radius: 8px;
position: sticky;
top: 90px;
align-self: flex-start;
z-index: 99;
max-height: calc(100vh - 60px);
overflow-y: auto;
}
/* Скрытие уродливого скроллбара внутри сайдбара */
.checkout-sidebar-right::-webkit-scrollbar { width: 4px; }
.checkout-sidebar-right::-webkit-scrollbar-track { background: transparent; }
.checkout-sidebar-right::-webkit-scrollbar-thumb { background: #dcdcdc; border-radius: 4px; }
.checkout-sidebar-right::-webkit-scrollbar-thumb:hover { background: #ec7200; }
.checkout-sidebar-inner .sidebar-title {
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
color: #2b303b;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #eaeaea;
margin-top: 0;
}
/* Модификация стандартной таблицы корзины внутри сайдбара */
.checkout-sidebar-inner .cartcheckout th { display: none; }
.checkout-sidebar-inner .cartcheckout { box-shadow: none; border-radius: 0; margin-bottom: 20px; background: transparent; padding: 0; border: none; }
.checkout-sidebar-inner .cartcheckout tr { display: flex; align-items: center; border-bottom: 1px solid #f0f0f0; padding: 15px 0; background: transparent !important; }
.checkout-sidebar-inner .cartcheckout td { border: none; padding: 0; display: block; }
.checkout-sidebar-inner .cartcheckout .jshop_img_description_center { flex: 0 0 60px; margin-right: 15px; }
.checkout-sidebar-inner .cartcheckout .jshop_img { width: 100%; border: 1px solid #eee; border-radius: 4px; padding: 2px; }
.checkout-sidebar-inner .cartcheckout .product_name { flex: 1; font-size: 14px; font-weight: 600; line-height: 1.3; }
.checkout-sidebar-inner .cartcheckout .product_name .prodname { color: #333; text-decoration: none; }
.checkout-sidebar-inner .cartcheckout .single_price { display: none; }
.checkout-sidebar-inner .cartcheckout .quantity { font-size: 14px; color: #888; font-weight: 600; margin-left: 10px; margin-right: 15px; }
.checkout-sidebar-inner .cartcheckout .quantity .data::before { content: "× "; }
.checkout-sidebar-inner .cartcheckout .mobile-cart-inline { display: none !important; }
.checkout-sidebar-inner .cartcheckout .total_price { font-size: 15px; font-weight: 700; color: #333; flex: 0 0 auto; text-align: right; }
/* Итоговые суммы внутри сайдбара */
.checkout-sidebar-inner .jshop_subtotal { width: 100% !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; border: none !important; }
.checkout-sidebar-inner .jshop_subtotal td { padding: 12px 0; border-bottom: 1px solid #f0f0f0; display: table-cell; }
.checkout-sidebar-inner .jshop_subtotal tr:last-child td { border-bottom: none; }
.checkout-sidebar-inner .jshop_subtotal td.name { text-align: left; font-size: 14px; color: #555; }
.checkout-sidebar-inner .jshop_subtotal td.value { text-align: right; font-size: 15px; color: #333; font-weight: 700; }
.checkout-sidebar-inner .jshop_subtotal .total td.name { font-size: 18px; color: #222; border-top: 2px solid #ddd; }
.checkout-sidebar-inner .jshop_subtotal .total td.value { font-size: 22px; color: #ec7200; border-top: 2px solid #ddd; }
/* Мобильная адаптация двух колонок (Смартфоны отключают липкость) */
@media (max-width: 768px) {
.checkout-columns-wrapper { gap: 20px; }
.checkout-sidebar-right {
order: -1; /* Ставит заказ выше формы на мобилках */
margin-bottom: 15px;
position: static; /* Отключаем липкость на мобилках */
max-height: none; /* Убираем свой скролл */
overflow-y: visible;
padding: 20px;
}
.checkout-main-content { flex: 1 1 100%; }
.checkout-sidebar-inner .cartcheckout tr { display: block;}
}
/* ---------------------- Конец Checkout checkout.php sticky для сайдбара — Joomshopping 5.9.1 ---------------------- */
/* ---------------------- Убрано перове радио none — Joomshopping 5.9.1 ---------------------- */
.jshop_prod_attributes .input_type_radio:has(input[value="0"]) {
display: none;
}
/* ---------------------- Конец Убрано перове радио none — Joomshopping 5.9.1 ---------------------- */