/* ==========================================================
   item.css
   Страница оборудования
   Стиль: DigiKey + Amazon Business
   ========================================================== */
.advantages-section {
    --advantages-primary: #388285;
    --advantages-primary-dark: #0d3e9f;
    --advantages-text: #172033;
    --advantages-muted: #667085;
    --advantages-border: #e4e9f2;
    --advantages-bg: #f5f7fb;
    background-color: transparent !important;
    font-family: inherit;
}

.advantages {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--advantages-border);
    border-radius: 24px;
    box-shadow: 0 18px 60px rgba(16, 24, 40, 0.09);
}

.advantages__image {
    position: relative;
    height: 100%;
    min-height: 640px;
    overflow: hidden;
    background: #dce3ee;
}

.advantages__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(8, 18, 40, 0.05) 35%,
            rgba(8, 18, 40, 0.85) 100%
        );
}

.advantages__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
}

.advantages:hover .advantages__image img {
    transform: scale(1.025);
}

.advantages__image-caption {
    position: absolute;
    z-index: 1;
    right: 32px;
    bottom: 32px;
    left: 32px;
    max-width: 360px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}

.advantages__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 56px;
}

.advantages__eyebrow {
    margin-bottom: 14px;
    color: var(--advantages-primary);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.advantages__title {
    max-width: 720px;
    margin: 0 0 18px;
    color: var(--advantages-text);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.advantages__description {
    max-width: 720px;
    margin: 0;
    color: var(--advantages-muted);
    font-size: 17px;
    line-height: 1.7;
}

.advantages__list {
    margin-top: 32px;
}

.advantage-card {
    display: flex;
    gap: 16px;
    height: 100%;
    padding: 22px;
    background: var(--advantages-bg);
    border: 1px solid transparent;
    border-radius: 16px;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.advantage-card:hover {
    transform: translateY(-3px);
    background: #ffffff;
    border-color: rgba(20, 86, 217, 0.2);
    box-shadow: 0 12px 30px rgba(16, 24, 40, 0.08);
}

.advantage-card__number {
    flex: 0 0 auto;
    padding-top: 2px;
    color: var(--advantages-primary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.advantage-card__title {
    margin: 0 0 8px;
    color: var(--advantages-text);
    font-size: 18px;
    font-weight: 750;
    line-height: 1.3;
}

.advantage-card__text {
    margin: 0;
    color: var(--advantages-muted);
    font-size: 14px;
    line-height: 1.6;
}

.advantages__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: auto;
    padding-top: 32px;
}

.advantages__footer-text {
    max-width: 390px;
    margin: 0;
    color: var(--advantages-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
}

.advantages__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 52px;
    padding: 14px 24px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    background: var(--advantages-primary);
    border: 1px solid var(--advantages-primary);
    border-radius: 10px;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.advantages__button:hover {
    color: #ffffff;
    background: var(--advantages-primary-dark);
    border-color: var(--advantages-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(20, 86, 217, 0.24);
}

.advantages__button:focus-visible {
    outline: 3px solid rgba(20, 86, 217, 0.25);
    outline-offset: 3px;
}

@media (max-width: 1199.98px) {
    .advantages__content {
        padding: 42px;
    }

    .advantages__image {
        min-height: 620px;
    }

    .advantages__footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 991.98px) {
    .advantages__image {
        min-height: 420px;
    }

    .advantages__content {
        padding: 40px 32px;
    }

    .advantages__footer {
        margin-top: 8px;
    }
}

@media (max-width: 575.98px) {
    .advantages {
        border-radius: 18px;
    }

    .advantages__image {
        min-height: 300px;
    }

    .advantages__image-caption {
        right: 22px;
        bottom: 22px;
        left: 22px;
        font-size: 17px;
    }

    .advantages__content {
        padding: 30px 20px;
    }

    .advantages__title {
        font-size: 30px;
    }

    .advantages__description {
        font-size: 15px;
    }

    .advantage-card {
        padding: 19px;
    }

    .advantages__button {
        width: 100%;
    }
}
:root{

    --accent:#aa0100;

    --accent-hover:#870000;

    --ui:#398387;

    --bg:#f8f9fa;

    --border:#e6e8eb;

    --text:#202124;

    --text-light:#6c757d;

    --shadow-sm:0 2px 10px rgba(0,0,0,.05);

    --shadow:0 8px 30px rgba(0,0,0,.08);

    --radius:14px;

    --radius-sm:10px;

    --transition:.25s ease;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:Inter,system-ui,sans-serif;

}

/* ==========================================================
   LINKS
   ========================================================== */

a{

    color:var(--ui);

    transition:var(--transition);

}

a:hover{

    color:var(--accent);

}

/* ==========================================================
   BREADCRUMBS
   ========================================================== */

.breadcrumb{
    font-size:.72rem;
    margin-bottom:2rem;
}

.breadcrumb-item a{

    text-decoration:none;

}

.breadcrumb-item.active{

    color:#666;

}

.breadcrumb-item + .breadcrumb-item::before{

    color:#999;

}

/* ==========================================================
   ARTICLE
   ========================================================== */

article{

    margin-bottom:3rem;

}

/* ==========================================================
   GALLERY
   ========================================================== */

.product-gallery{

    position:sticky;

    top:90px;

}

.gallery-main{

    background:#fff;

    border-radius:var(--radius);

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

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

    overflow:hidden;

    position:relative;

}

.gallery-main img{

    width:100%;

    max-height:190px;

    object-fit:contain;

    transition:.35s;

    cursor:zoom-in;

    background:#fff;

}

.gallery-main:hover img{

    transform:scale(1.04);

}

.gallery-placeholder{

    background:white;

    border:2px dashed #d9d9d9;

    border-radius:var(--radius);

    min-height:220px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:#b8b8b8;

}

.gallery-thumbs{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.gallery-thumb{

    width:64px;

    height:64px;

    object-fit:contain;

    background:white;

    border:2px solid transparent;

    border-radius:10px;

    cursor:pointer;

    transition:.25s;

    padding:6px;

}

.gallery-thumb:hover{

    border-color:var(--ui);

    transform:translateY(-3px);

}

.gallery-thumb.active{

    border-color:var(--accent);

    box-shadow:0 0 0 2px rgba(170,1,0,.08);

}

/* ==========================================================
   PRODUCT INFO
   ========================================================== */

.product-info{

    position:relative;

}

.product-category{

    display:inline-flex;

    align-items:center;

    background:#edf7f7;

    color:var(--ui);

    padding:6px 14px;

    border-radius:50px;

    font-size:.82rem;

    font-weight:600;

}

h1{

    font-size:2.1rem;

    font-weight:700;

    line-height:1.25;

    margin:18px 0;

}

.product-meta{

    display:flex;

    flex-wrap:wrap;

    gap:30px;

    margin-bottom:30px;

}

.meta-item{

    display:flex;

    flex-direction:column;

}

.meta-label{

    font-size:.82rem;

    color:var(--text-light);

    margin-bottom:4px;

}

.meta-value{

    font-weight:600;

}

/* ==========================================================
   PRICE
   ========================================================== */

.product-price{

    display:flex;

    align-items:center;

    gap:10px;

    margin:28px 0;

}

.product-price .value{

    color:var(--accent);

    font-size:2.2rem;

    font-weight:700;

}

.product-price i{

    color:#999;

    cursor:pointer;

}

.stock-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:50px;

    background:#eefaf2;

    color:#198754;

    font-weight:600;

    margin-bottom:28px;

}

/* ==========================================================
   BUTTONS
   ========================================================== */

.btn-primary{

    background:var(--accent);

    border-color:var(--accent);

}

.btn-primary:hover{

    background:var(--accent-hover);

    border-color:var(--accent-hover);

}

.btn-primary:focus{

    box-shadow:0 0 0 .25rem rgba(170,1,0,.18);

}

.btn-add-cart{

    height:56px;

    font-weight:600;

    transition:.25s;

}

.btn-add-cart:hover{

    transform:translateY(-2px);

    box-shadow:var(--shadow);

}

.btn-add-cart.added{

    background:#198754;

    border-color:#198754;

}

/* ==========================================================
   QUICK ORDER
   ========================================================== */

.card{

    border:none;

    border-radius:var(--radius);

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

}

.card-body{

    padding:28px;

}

#quickOrderForm input{

    height:50px;

    border-radius:10px;

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

}

#quickOrderForm input:focus{

    border-color:var(--ui);

    box-shadow:0 0 0 .2rem rgba(57,131,135,.15);

}

#quickOrderForm button{

    height:54px;

    font-weight:600;

}

#quickOrderStatus{

    padding:12px 16px;

    border-radius:10px;

    display:none;

}

#quickOrderStatus.success{

    display:block;

    background:#eefaf2;

    color:#198754;

}

#quickOrderStatus.error{

    display:block;

    background:#fff3f3;

    color:#c0392b;

}

#quickOrderStatus.loading{

    display:block;

    background:#eef7fb;

    color:#0d6efd;

}

/* ==========================================================
   FEATURES
   ========================================================== */

.feature-box{

    display:flex;

    gap:15px;

    align-items:flex-start;

    background:white;

    padding:18px;

    border-radius:12px;

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

    transition:.25s;

    height:100%;

}

.feature-box:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow);

}

.feature-box i{

    color:var(--ui);

    font-size:1.35rem;

    margin-top:2px;

}

/* ==========================================================
   TABS
   ========================================================== */

.nav-pills .nav-link{

    border-radius:50px;

    color:#333;

    font-weight:600;

    padding:5px 15px !important;

}

.nav-pills .nav-link.active{
    background:none;
    color:#333;
    border: 1px solid #999;
}

.tab-pane{

    animation:fadeTab .25s ease;

}

@keyframes fadeTab{

    from{

        opacity:0;

        transform:translateY(6px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.tab-pane .card{

    box-shadow:none;

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

}

/* ==========================================================
   DESCRIPTION
   ========================================================== */

#descriptionTab{

    line-height:1.8;

}

#descriptionTab img{

    max-width:100%;

    height:auto;

}

#descriptionTab table{

    width:100%;

}

/* ==========================================================
   SPECS
   ========================================================== */

#specsTab table{

    width:100%;

    border-collapse:collapse;

}

#specsTab table tr:nth-child(even){

    background:#fafafa;

}

#specsTab table td{

    padding:10px 14px;

    border:1px solid #eee;

}

/* ==========================================================
   RELATED
   ========================================================== */

.product-card{

    transition:.25s;

    overflow:hidden;

}

.product-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

}

.product-card .ratio{

    background:white;

}

.product-card img{

    transition:.3s;

}

.product-card:hover img{

    transform:scale(1.06);

}

.product-card .card-body{

    padding:16px;

}

.product-card .fw-semibold{

    line-height:1.35;

    font-size:.92rem;

}

/* ==========================================================
   RECENT PRODUCTS
   ========================================================== */

#recentProducts .card{

    transition:.25s;

}

#recentProducts .card:hover{

    transform:translateY(-5px);

}

/* ==========================================================
   CTA BLOCK
   ========================================================== */

.bg-light{

    border-radius:18px;

}

.bg-light h2{

    font-weight:700;

}

/* ==========================================================
   FOOTER
   ========================================================== */

footer{

    background:white;

}

footer h5{

    font-weight:700;

}

/* ==========================================================
   TOAST
   ========================================================== */

.cart-toast{

    position:fixed;

    right:24px;

    bottom:24px;

    background:white;

    border-radius:12px;

    padding:18px 24px;

    box-shadow:var(--shadow);

    z-index:9999;

    display:flex;

    gap:12px;

    align-items:center;

    animation:toastShow .3s ease;

}

@keyframes toastShow{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/* ==========================================================
   LOADING
   ========================================================== */

.loading{

    opacity:.65;

    pointer-events:none;

}

.spinner-border-sm{

    width:1rem;

    height:1rem;

}

/* ==========================================================
   IMAGE ZOOM
   ========================================================== */

.zoomed{

    cursor:zoom-out!important;

    transform:scale(1.8)!important;

}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1199px){

.gallery-main img{

height:480px;

}

}

@media(max-width:991px){

.product-gallery{

position:relative;

top:0;

margin-bottom:30px;

}

.gallery-main img{

height:420px;

}

h1{

font-size:1.8rem;

}

}

@media(max-width:767px){

.gallery-main img{

height:340px;

}

.gallery-thumb{

width:68px;

height:68px;

}

.product-price .value{

font-size:1.8rem;

}

.card-body{

padding:20px;

}

.feature-box{

padding:16px;

}

.nav-pills{

overflow:auto;

flex-wrap:nowrap;

}

.nav-pills .nav-link{

white-space:nowrap;

}

}

@media(max-width:575px){

h1{

font-size:1.55rem;

}

.gallery-main img{

height:280px;

}

.btn-add-cart{

height:52px;

}

.product-meta{

gap:16px;

}

}

/* ==========================================================
   TOOLTIP (Bootstrap override)
========================================================== */

.tooltip-inner{
    background:#111827;
    color:#fff;
    border-radius:8px;
    padding:8px 10px;
    font-size:.82rem;
}

/* ==========================================================
   BREADCRUMB IMPROVEMENTS
========================================================== */

.breadcrumb{
    background:transparent;
    padding:0;
}

.breadcrumb-item a{
    color:var(--ui);
    text-decoration:none;
}

.breadcrumb-item a:hover{
    color:var(--accent);
    text-decoration:underline;
}

/* ==========================================================
   STICKY RIGHT COLUMN (Amazon-like behavior)
========================================================== */

@media(min-width:992px){

    .product-info-sticky{
        position:sticky;
        top:90px;
    }

}

/* ==========================================================
   H1 IMPROVEMENTS
========================================================== */

h1{
    letter-spacing:-0.02em;
}

/* ==========================================================
   PRICE INFO ICON
========================================================== */

.product-price i{
    font-size:.95rem;
    transition:.2s;
}

.product-price i:hover{
    color:var(--accent);
}

/* ==========================================================
   CATEGORY BADGE
========================================================== */

.badge{
    font-weight:600;
    padding:6px 12px;
    border-radius:999px;
}

/* ==========================================================
   QUICK ORDER STATUS ANIMATION
========================================================== */

#quickOrderStatus{
    transform:translateY(-5px);
    opacity:0;
    transition:.25s ease;
}

#quickOrderStatus.show{
    opacity:1;
    transform:translateY(0);
}

#quickOrderStatus.success{
    background:#eafaf1;
    color:#1e7e34;
}

#quickOrderStatus.error{
    background:#fdecec;
    color:#c0392b;
}

#quickOrderStatus.loading{
    background:#eef6ff;
    color:#0d6efd;
}

/* ==========================================================
   BUTTON LOADING STATE
========================================================== */

.btn.loading{
    position:relative;
    pointer-events:none;
    opacity:.75;
}

.btn.loading::after{
    content:"";
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    width:16px;
    height:16px;
    border:2px solid rgba(255,255,255,.4);
    border-top-color:#fff;
    border-radius:50%;
    animation:spin .7s linear infinite;
}

@keyframes spin{
    to{ transform:translateY(-50%) rotate(360deg); }
}

/* ==========================================================
   CART BUTTON STATES
========================================================== */

.btn-add-cart.added{
    background:#198754;
    border-color:#198754;
}

.btn-add-cart.added:hover{
    background:#157347;
    border-color:#157347;
}

/* ==========================================================
   RELATED PRODUCTS ENHANCEMENT
========================================================== */

.product-card{
    border-radius:14px;
}

.product-card .card-body{
    padding:14px 12px;
}

.product-card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.product-card img{
    transition:.35s ease;
}

.product-card:hover img{
    transform:scale(1.08);
}

/* ==========================================================
   RECENT PRODUCTS
========================================================== */

#recentProducts .card{
    border-radius:14px;
    overflow:hidden;
}

#recentProducts img{
    transition:.3s;
}

#recentProducts .card:hover img{
    transform:scale(1.06);
}

/* ==========================================================
   EMPTY STATES
========================================================== */

.empty-state{
    text-align:center;
    padding:60px 20px;
    color:var(--text-light);
}

.empty-state i{
    font-size:48px;
    margin-bottom:12px;
    color:#cbd5e1;
}

/* ==========================================================
   RESPONSIVE FIXES
========================================================== */

@media(max-width:991px){

    .product-info-sticky{
        position:relative;
        top:0;
    }

}

@media(max-width:767px){

    h1{
        font-size:1.5rem;
    }

    .product-price .value{
        font-size:1.6rem;
    }

    .gallery-main img{
        height:320px;
    }

    .feature-box{
        padding:14px;
    }

}

@media(max-width:575px){

    .gallery-main img{
        height:260px;
    }

    .btn-add-cart{
        font-size:.95rem;
    }

}