.page-shell {
    width: 100%;
    max-width: 1648px;

    gap: 11px;

    opacity: 1;
    border-top-width: 2px;
    margin: 0 auto;

}

.topbar {
    height: 50px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 14px;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 18px;
}

.brand {
    font-family: "Saira", sans-serif;
    font-size: 23px;
    font-weight: 600;
    color: #c6d2dc;
    letter-spacing: 0.01em;
    line-height: 1;
}

.topbar-nav {
    display: flex;
    align-items: center;
    gap: 14px;
}

.topbar-nav a {
    font-size: 11px;
    font-weight: 500;
    color: #69757f;
}

.topbar-search {
    flex: 1;
    max-width: 312px;
    margin-left: 12px;
}

.topbar-search input {
    width: 100%;
    height: 26px;
    border: 1px solid #b5c3cf;
    border-radius: 4px 15px 15px 4px;
    background-color: #ffffff;
    background-image: url("../images/icons/search.png");
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: right 9px center;
    padding: 0 28px 0 10px;
    font-size: 11px;
    color: #6f7a84;
    outline: none;
}

.topbar-search input:focus {
    border-color: #8aa6bd;
}

.topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-btn {
    position: relative;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #6e7880;
    padding: 0;
    cursor: pointer;
}

.icon-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-btn .badge {
    position: absolute;
    right: -5px;
    top: -4px;
    min-width: 10px;
    height: 10px;
    border-radius: 999px;
    padding: 0 2px;
    background: var(--danger);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
}

.icon-btn .badge--dot {
    min-width: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
}

.auth-btn {
    height: 21px;
    border: 0;
    border-radius: 6px;
    padding: 0 8px;
    font-size: 9px;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
}

.auth-btn--login {
    background: var(--orange);
}

.auth-btn--signup {
    background: var(--blue);
}

.details-layout {
    width: 100%;
    max-width: 1439px;
    margin: 11px auto 0;
    display: grid;
    grid-template-columns: minmax(0, 1.68fr) minmax(0, 1fr);
    gap: 0;
    align-items: start;
}

.gallery-card {
    width: 830px;
    height: 854px;
  
    opacity: 1;
    gap: 25px;
   
    padding-left: 20px;
    border-radius: 8px;
background: #FFFFFF;
box-shadow: 0px 0px 10px 0px #85ADAD59;

}

.gallery-main {
    min-height: 468px;
  
    border-radius: 6px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.gallery-main img {
width: 695px;
height: 695px;

opacity: 1;
border-radius: 8px;



}

.watermark {
    position: absolute;
    right: 14px;
    bottom: 6px;
    font-family: "Saira", sans-serif;
    font-size: 44px;
    font-weight: 800;
    color: rgba(166, 177, 186, 0.2);
    user-select: none;
    pointer-events: none;
}

.thumb-row {
width: 790px;
height: 113px;
display: flex;
opacity: 1;
gap: 20px;
margin-top: 25px;
}

.thumb-btn {
    width: 115px;
    height: 115px;
    border: 1px solid #ccd7e0;
    border-radius: 6px;
    background: #ffffff;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.thumb-btn img {
width: 115px;
height: 115px;

opacity: 1;
border-radius: 3px;
border-width: 2px;
border: 2px solid #FAFAFA;
}

.thumb-btn.is-active {
    border-color: #8ea7bb;
    box-shadow: 0 0 0 2px rgba(142, 167, 187, 0.35);
}

.info-column {
   width: 520px;
    height: 1037px;
  
    opacity: 1;
    gap: 15px;
    border-radius: 8px;

}

.info-card {
   
    opacity: 1;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    border-radius: 8px;
    color: #FFFFFF;
    box-shadow: 1px 1px 10px 0px #85ADAD59;

}

.info-card--brand-padding {
   padding: 20px 30px;
}

.summary-card h1 {
    font-family: Saira;
    font-weight: 500;
    font-style: Medium;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0%;
    color: #4F4F4F;
    box-shadow: -1px 2px 0px 0px #FFFFFF;
    width: 520px;
    height: 70px;
    opacity: 1;
    margin: 0;
    display: flex;
    align-items: center;
}

.buy-row {
   width: 486px;
    height: 55px;

    display: flex;
    align-items: center;
    opacity: 1;
    gap: 30px;
    padding: 15px 17px;
}

.price-chip {
   width: 80px;
height: 55px;

display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 80px;
box-sizing: border-box;
opacity: 1;
gap: 10px;
border-radius: 6px;
border-width: 0.5px;
padding: 10px;
background  : #FFF9E9;
border: 0.5px solid #E58600;
box-shadow: 1.5px 1.5px 3px var(--sds-size-depth-400) #85ADAD59;
font-family: Saira;
font-weight: 800;
font-style: ExtraBold;
font-size: 22px;

line-height: 100%;
letter-spacing: 0%;
color: #00C06A;

}

.favorite-btn {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid #d8e3eb;
    background: #ffffff;
    color: #8f9aa5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.favorite-btn img {
    width: 30px;
    height: 30px;
    display: block;
}

.buy-btn {
    width: 316px;
    height: 55px;
   
    opacity: 1;
    gap: 10px;
    border-radius: 6px;
    border-width: 0.5px;
    padding: 10px;
background: #F2F9FD;
border: 0.5px solid #8EB5C8;
box-shadow: 1.5px 1.5px 3px var(--sds-size-depth-400) #85ADAD59;
font-family: Saira;
font-weight: 600;
font-style: SemiBold;
font-size: 18px;

line-height: 100%;
letter-spacing: 0%;
color: #004A6D;

}


.meta-list {
   width: 312px;
    height: 34px;
   
    opacity: 1;
    gap: 80px;

}

.meta-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
   
    line-height: 1.28;
    width: 312px;
height: 34px;
angle: 0 deg;
opacity: 1;
gap: 80px;

}

.meta-key {
    color: var(--muted, #5f6a74);
}

.meta-value {
    color: #55616c;
    font-weight: 700;
    text-align: right;
}

.meta-value--link {
    color: #4f9ed6;
    text-decoration: underline;
    font-weight: 600;
    word-break: break-all;
}

.info-card--brand .meta-list {
    width: 100%;
    height: auto;
    display: grid;
    gap: 10px;
}

.info-card--brand .meta-row {
    align-items: center;
}

.info-card--brand .meta-row--brand {
width: 166px;
height: 34px;
flex: 0 0 166px;

opacity: 1;
gap: 80px;

}

.info-card--brand .meta-row--info {
width: 166px;
height: 34px;
flex: 0 0 166px;

opacity: 1;
gap: 80px;

}

.info-card--brand .meta-key {
font-family: Saira;
font-weight: 600;
font-style: SemiBold;
font-size: 19px;

line-height: 100%;
letter-spacing: 0%;
color: #706965;

}

.info-card--brand .meta-key--brand,
.info-card--brand .meta-key--info {
    min-width: 84px;
}

.info-card--brand .meta-value {
font-family: Saira;
font-weight: 600;
font-style: SemiBold;
font-size: 19px;

line-height: 100%;
letter-spacing: 0%;
color: #4398E9;
text-align: left;
}

.info-card--brand .meta-value--brand {
    min-width: 130px;
}

.info-card--brand .meta-value--link {
font-family: Saira;
font-weight: 400;
font-style: Regular;
font-size: 19px;
color: #5F5FEE;

line-height: 100%;
letter-spacing: 0%;

}

.info-card--brand .meta-value--info {
    display: inline-block;
    width: 260px;
    min-height: 28px;
    text-align: right;
    white-space: nowrap;
   
    text-overflow: ellipsis;
}

.info-card--format {
   margin-top: 12px;
   padding: 20px 30px;
}

.info-card--format .meta-list {
    width: 100%;
    height: auto;
    display: grid;
    gap: 8px;
}

.info-card--format .meta-row {
    width: 100%;
    min-height: 34px;
    display: grid;
    grid-template-columns: 166px minmax(0, 1fr);
    align-items: center;
    column-gap: 0;
}

.info-card--format .meta-key {
    font-family: Saira;
    font-weight: 600;
    font-size: 19px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #706965;
    width: 166px;
    white-space: nowrap;
}

.info-card--format .meta-value {
    text-align: left;
    white-space: nowrap;
}

.info-card--format .format-badge {
    justify-content: flex-start;
    gap: 15px;
font-family: Saira;
font-weight: 600;
font-style: SemiBold;
font-size: 19px;
color: #814141;

line-height: 100%;
letter-spacing: 0%;
}

.info-card--format .meta-value--accent {
font-family: Saira;
font-weight: 700;
font-style: Bold;
font-size: 19px;
color: #FF7F00;

line-height: 100%;
letter-spacing: 0%;

}

.info-card--format .meta-value--good {
font-family: Saira;
font-weight: 700;
font-style: Bold;
font-size: 19px;

line-height: 100%;
letter-spacing: 0%;
color: #4398E9;

}

.info-card--specs {
    margin-top: 12px;
      padding: 20px 30px;
}

.info-card--specs .meta-list {
    width: 100%;
    height: auto;
    display: grid;
    gap: 8px;
}

.info-card--specs .meta-row {
    --spec-key-width: 220px;
    --spec-row-height: 34px;
    width: 100%;
    min-height: var(--spec-row-height);
    display: grid;
    grid-template-columns: var(--spec-key-width) minmax(0, 1fr);
    align-items: center;
    column-gap: 2px;
}

.info-card--specs .meta-row--file-size {
    --spec-key-width: 177px;
    --spec-row-height: 50px;
}

.info-card--specs .meta-row--colors {
    --spec-key-width: 177px;
    --spec-row-height: 34px;
}

.info-card--specs .meta-row--materials {
    --spec-key-width: 177px;
    --spec-row-height: 34px;
}

.info-card--specs .meta-row--size {
    --spec-key-width: 177px;
    --spec-row-height: 34px;
}

.info-card--specs .meta-row--real-price {
    --spec-key-width: 177px;
    --spec-row-height: 34px;
}

.info-card--specs .meta-row--style {
    --spec-key-width: 177px;
    --spec-row-height: 34px;
}

.info-card--specs .meta-row--author {
    --spec-key-width: 177px;
    --spec-row-height: 34px;
}

.info-card--specs .meta-key {
    font-family: Saira;
    font-weight: 600;
    font-size: 19px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #6a6663;
    width: var(--spec-key-width);
    min-height: var(--spec-row-height);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.meta-key-note {
    font-size: 0.82em;
    font-weight: 500;
    color: #7d7773;
}

.info-card--specs .meta-value {
    font-family: Saira;
    font-weight: 700;
    font-size: 19px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #425155;
    text-align: left;
    display: inline-flex;
    align-items: center;
    min-height: var(--spec-row-height);
    white-space: nowrap;
}

.info-card--specs .meta-value--file-size {
    display: inline-flex;
    align-items: center;
    gap: 8px;
font-family: Saira;
font-weight: 700;
font-style: Bold;
font-size: 19px;

line-height: 100%;
letter-spacing: 0%;
color: #3D4D4F;
}

.file-size-icon {
    width: 32px;
    height: 32px;
    display: block;
    flex: 0 0 32px;
}

.file-size-number {
    font-weight: 700;
}

.file-size-unit {
    font-weight: 500;
    letter-spacing: 0.01em;
}

.info-card--specs .color-list--specs {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.spec-dot {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-block;
    border: 2px solid rgba(0, 0, 0, 0.08);
}

.spec-dot--wood {
    background: #8e4f00;
}

.spec-dot--velvet {
    background: #decdb4;
}

.info-card--specs .meta-value--materials {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 14px;
font-family: Saira;
font-weight: 600;
font-style: normal;
font-size: 19px;

line-height: 100%;
letter-spacing: 0%;
color: #B27400;
}

.info-card--specs .meta-value--size {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.info-card--specs .size-part--number {
    font-family: Saira;
font-weight: 600;
font-style: SemiBold;
font-size: 19px;

line-height: 100%;
letter-spacing: 0%;
vertical-align: middle;

    color: #814141;
}

.info-card--specs .size-part--separator {
    color: #814141;
  font-family: Saira;
font-weight: 400;
font-style: Regular;
font-size: 12px;

line-height: 100%;
letter-spacing: 0%;
vertical-align: middle;

}

.info-card--specs .meta-value--real-price {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.info-card--specs .real-price-amount {
    font-family: Saira;
font-weight: 700;
font-style: Bold;
font-size: 19px;

line-height: 100%;
letter-spacing: 0%;
color: #328A79;
}

.info-card--specs .real-price-currency {
   font-family: Saira;
font-weight: 400;
font-style: Regular;
font-size: 19px;

line-height: 100%;
letter-spacing: 0%;
color: #328A79;
}

.info-card--specs .meta-value--style {
   font-family: Saira;
font-weight: 600;
font-style: SemiBold;
font-size: 19px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
color: #3D4D4F;
}

.info-card--specs .meta-value--author {
   font-family: Saira;
font-weight: 700;
font-style: Bold;
font-size: 19px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
color: #4398E9;
}

.meta-value--accent {
    color: #f08532;
}

.meta-value--good {
    color: #67b95f;
}

.format-badge {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    color: #444c55;
    font-weight: 700;
}

.format-mark {
    width: 13px;
    height: 13px;
    border-radius: 2px;
    background: linear-gradient(180deg, #f86852 0%, #ef553e 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.format-icon {
    width: 30px;
    height: 30px;
    display: block;
    flex: 0 0 28px;
}

.color-list {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.flag {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.flag--first {
    background: linear-gradient(to bottom, #df2020 0 33%, #f0f5f7 33% 66%, #1b8f41 66% 100%);
}

.flag--second {
    background: linear-gradient(to bottom, #1d5db4 0 50%, #f8c72a 50% 100%);
}

.swatch {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.13);
}

.swatch--wood {
    background: #7a5f43;
}

.swatch--velvet {
    background: #e5d7bb;
}

.materials {
    color: #8b643d;
    font-style: italic;
}

.size-value {
    color: #9f6f44;
}

.price-value {
    color: #2ca8e8;
}

.author-value {
    color: #3ca3e7;
}

.tags-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.tag {
    height: 24px;
    border-radius: 6px;
    border: 1px solid #c8d9e8;
    background: #f6fbff;
    color: #5e9bc7;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    cursor: pointer;
}

.info-card--tags {
    margin-top: 12px;
    padding: 4px 0px 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
}

.info-card--tags .tags-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    column-gap: 12px;
    row-gap: 12px;
}

.info-card--tags .tag {
    width: auto;
    height: 35px;
    padding: 0 16px;
    border: 0;
    border-radius: 45px;
    background: #4aa7d2;
    box-shadow: 0.5px 0.5px 1px 0 #002337b2;
    font-family: Saira;
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0;
    color: #ffffff;
}

.similar-section {
    margin-top: 30px;
}

.similar-section h2 {
    margin: 0 0 10px;
font-family: Saira;
font-weight: 500;
font-style: Medium;
font-size: 25px;
color: #4F4F4F;
line-height: 100%;
letter-spacing: 0%;

}

.similar-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    
}

.similar-card img {
    width: 280px;
    height: 280;
    opacity: 1;
    top: 1139px;
    border-radius: 4px;
    border-width: 0.5px;
    border: 0.5px solid #D6D6D6;
}

.similar-card p {
   font-family: Saira;
font-weight: 500;
font-style: Medium;
font-size: 20px;

line-height: 100%;
letter-spacing: 0%;
color: #5F5F5F;

}

.footer-box {
    margin-top: 32px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 17px 14px 20px;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
}

.chip {
    height: 28px;
    border-radius: 999px;
    border: 1px solid #d4dde4;
    background: #ffffff;
    color: #5f6a74;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
}

.chip-dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
}

.chip-dot--violet {
    background: #f3ebff;
    color: #8b5cf6;
}

.chip-dot--red {
    background: #ffedf0;
    color: #e85770;
}

.chip-dot--green {
    background: #e7faf0;
    color: #3ea169;
}

.chip-dot--pink {
    background: #ffeef7;
    color: #da65ac;
}

.chip-dot--yellow {
    background: #fff8df;
    color: #bb8f18;
}

.policy-row {
    margin-top: 16px;
}

.policy-chip {
    background: #f6f7f9;
    font-weight: 600;
}

.social-row {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 14px;
}

.social-link {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.social-link--telegram {
    color: #36aee3;
}

.social-link--facebook {
    color: #3b5998;
}

.social-link--instagram {
    color: #ec4899;
}

.social-link--youtube {
    color: #ef4444;
}

@media (max-width: 1040px) {
    .details-layout {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .topbar {
        flex-wrap: wrap;
        height: auto;
        padding: 10px;
    }

    .topbar-search {
        order: 3;
        flex: 1 1 100%;
        max-width: 100%;
        margin: 0;
    }
}

@media (max-width: 720px) {
    .topbar-nav {
        display: none;
    }

    .topbar-right {
        gap: 6px;
    }

    .auth-btn {
        padding: 0 6px;
    }

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

    .thumb-row {
        gap: 8px;
    }

    .thumb-btn {
        width: calc((100% - 16px) / 3);
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .tags-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .similar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .similar-card img {
        height: 120px;
    }
}