/* =========================================================
   Marston Robing – product detail (.mr-pd), Quick View popup
   (.mr-qv), product page and size guides.
   .mr-pd is used both inside the popup (outside the .mr-home
   brand scope) and on the product page, so it declares the
   brand tokens itself.
   ========================================================= */

.mr-pd,
.mr-qv,
.mr-guides {
    --mr-navy: #002557;
    --mr-navy-900: #001a3f;
    --mr-navy-700: #0a3166;
    --mr-gold: #b69d74;
    --mr-gold-300: #d6c4a3;
    --mr-gold-100: #f3ede2;
    --mr-ink: #1d2433;
    --mr-muted: #5d6577;
    --mr-line: #e4e7ec;
    --mr-page: #f7f6f2;
}

/* ---------------------------------------------------------
   Quick View popup shell
   --------------------------------------------------------- */
.mr-qv.wrap-modal1 {
    padding: 32px 16px;
}

.mr-qv .overlay-modal1 {
    background: var(--mr-navy-900);
    opacity: .7;
}

.mr-qv .mr-qv__dialog {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    padding: 36px;
    background: #fff;
    border-top: 3px solid var(--mr-gold);
    border-radius: 18px;
    box-shadow: 0 40px 80px -30px rgba(0, 26, 63, .7);
}

.mr-qv .mr-qv__close {
    position: absolute;
    z-index: 5;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: var(--mr-page);
    font-size: 22px;
    color: var(--mr-navy);
    cursor: pointer;
    transition: background-color .2s;
}

.mr-qv .mr-qv__close:hover {
    background: var(--mr-gold-100);
}

/* The Theme binds the close click on the button itself */
.mr-qv .mr-qv__close i {
    pointer-events: none;
}

/* ---------------------------------------------------------
   Product detail block
   --------------------------------------------------------- */
.mr-pd {
    --pd-h: 440px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    font-family: Poppins-Regular, Arial, sans-serif;
    color: var(--mr-ink);
}

.mr-pd--page {
    --pd-h: 560px;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 56px;
    padding: 36px 0 12px;
}

/* Gallery (slick builds the thumbnails and arrows) */
.mr-pd .wrap-slick3 {
    position: relative;
    display: flex;
    flex-direction: column;
}

.mr-pd .slick3 {
    order: 1;
    width: 100%;
    border: 1px solid var(--mr-line);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.mr-pd .item-slick3 .wrap-pic-w {
    height: var(--pd-h);
}

.mr-pd .item-slick3 .wrap-pic-w img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mr-pd .mr-pd__zoom {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 12px -4px rgba(0, 37, 87, .4);
    font-size: 15px;
    color: var(--mr-navy);
    transition: background-color .2s, color .2s;
}

.mr-pd .mr-pd__zoom:hover {
    background: var(--mr-navy);
    color: #fff;
}

.mr-pd .wrap-slick3-arrows {
    position: absolute;
    z-index: 3;
    top: calc(var(--pd-h) / 2 - 20px);
    left: 0;
    right: 0;
    width: 100%;
    height: 0;
}

.mr-pd .arrow-slick3 {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 4px 12px -4px rgba(0, 37, 87, .45);
    font-size: 22px;
    color: var(--mr-navy);
}

.mr-pd .arrow-slick3:hover {
    background: var(--mr-navy);
    color: #fff;
}

.mr-pd .prev-slick3 { left: 12px; }
.mr-pd .next-slick3 { right: 12px; }

.mr-pd .wrap-slick3-dots {
    order: 2;
    width: 100%;
}

.mr-pd .slick3-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.mr-pd .slick3-dots li {
    width: 64px;
    height: 80px;
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.mr-pd .slick3-dots li img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mr-pd .slick3-dot-overlay {
    border: 1px solid var(--mr-line);
    border-radius: 8px;
}

.mr-pd .slick3-dots li:hover .slick3-dot-overlay {
    border-color: var(--mr-gold);
}

.mr-pd .slick3-dots .slick-active .slick3-dot-overlay {
    border: 2px solid var(--mr-navy);
}

/* Info column */
.mr-pd .mr-pd__name {
    margin: 0;
    padding-right: 44px;
    font-family: PlayfairDisplay-Bold, Georgia, serif;
    font-weight: normal;
    font-size: 28px;
    line-height: 1.25;
    color: var(--mr-navy);
}

.mr-pd--page .mr-pd__name {
    padding-right: 0;
    font-size: 34px;
}

.mr-pd .mr-pd__pricing {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin-top: 14px;
}

.mr-pd .mr-pd__price {
    font-family: Poppins-Bold, Arial, sans-serif;
    font-size: 28px;
    line-height: 1.1;
    color: var(--mr-navy);
}

.mr-pd .mr-pd__exvat {
    font-family: Poppins-Regular, Arial, sans-serif;
    font-size: 14px;
    color: var(--mr-muted);
}

.mr-pd .mr-pd__desc {
    margin-top: 18px;
    font-family: Poppins-Regular, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--mr-muted);
}

.mr-pd .mr-pd__desc :is(p, span, li, div) {
    font-family: Poppins-Regular, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--mr-muted);
}

.mr-pd .mr-pd__desc a {
    color: var(--mr-navy-700);
    text-decoration: underline;
}

.mr-pd .mr-pd__desc:empty {
    display: none;
}

.mr-pd .mr-pd__options {
    margin-top: 22px;
    padding-top: 6px;
    border-top: 1px solid var(--mr-line);
}

.mr-pd .mr-pd__options:empty {
    display: none;
}

.mr-pd .mr-pd__option {
    margin-top: 16px;
}

.mr-pd .mr-pd__label {
    display: block;
    margin-bottom: 10px;
    font-family: Poppins-SemiBold, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mr-muted);
}

.mr-pd .mr-pd__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* btn-outline-dark = not selected, btn-dark = selected (toggled by selectattribute()) */
.mr-pd .mr-pd__choices .btn {
    min-height: 40px;
    margin: 0;
    padding: 6px 16px;
    border: 1px solid #cfd4dc;
    border-radius: 999px;
    background: #fff;
    box-shadow: none;
    font-family: Poppins-Regular, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.3;
    color: var(--mr-ink);
    transition: background-color .2s, border-color .2s, color .2s;
}

.mr-pd .mr-pd__choices .btn:hover:not(:disabled) {
    border-color: var(--mr-gold);
    background: var(--mr-gold-100);
    color: var(--mr-navy);
}

.mr-pd .mr-pd__choices .btn.btn-dark,
.mr-pd .mr-pd__choices .btn.btn-dark:hover:not(:disabled) {
    border-color: var(--mr-navy);
    background: var(--mr-navy);
    font-family: Poppins-Medium, Arial, sans-serif;
    color: #fff;
}

.mr-pd .mr-pd__choices .btn:disabled {
    background: var(--mr-page);
    color: #a0a6b2;
    text-decoration: line-through;
    cursor: not-allowed;
    opacity: 1;
}

.mr-pd :is(.btn, .mr-pd__add, .mr-pd__qty button, .mr-pd__zoom, .mr-pd__more):focus-visible,
.mr-qv .mr-qv__close:focus-visible,
.mr-guides summary:focus-visible {
    outline: 2px solid var(--mr-gold);
    outline-offset: 2px;
    box-shadow: none;
}

/* Quantity + add to cart */
.mr-pd .mr-pd__buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
}

.mr-pd .mr-pd__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid #cfd4dc;
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}

.mr-pd .mr-pd__qty button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 50px;
    border: 0;
    background: none;
    font-size: 16px;
    color: var(--mr-navy);
    cursor: pointer;
    transition: background-color .2s;
}

.mr-pd .mr-pd__qty button:hover {
    background: var(--mr-gold-100);
}

.mr-pd .mr-pd__qty .num-product {
    width: 52px;
    height: 50px;
    padding: 0;
    border: 0;
    background: none;
    font-family: Poppins-Medium, Arial, sans-serif;
    font-size: 16px;
    text-align: center;
    color: var(--mr-ink);
    -moz-appearance: textfield;
    appearance: textfield;
}

.mr-pd .mr-pd__qty .num-product::-webkit-outer-spin-button,
.mr-pd .mr-pd__qty .num-product::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mr-pd .mr-pd__add {
    flex: 1 1 200px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 28px;
    border: 0;
    border-radius: 999px;
    background: var(--mr-navy);
    font-family: Poppins-SemiBold, Arial, sans-serif;
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    transition: background-color .25s, color .25s;
}

.mr-pd .mr-pd__add i {
    font-size: 18px;
}

.mr-pd .mr-pd__add:hover:not(:disabled) {
    background: var(--mr-gold);
    color: var(--mr-navy-900);
}

.mr-pd .mr-pd__add:disabled {
    background: #e4e7ec;
    color: #6f7684;
    cursor: not-allowed;
}

.mr-pd .mr-pd__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-family: Poppins-Medium, Arial, sans-serif;
    font-size: 14px;
    color: var(--mr-navy-700);
    text-decoration: none;
}

.mr-pd .mr-pd__more:hover {
    color: var(--mr-gold);
}

.mr-pd .mr-pd__assure {
    list-style: none;
    margin: 26px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--mr-line);
}

.mr-pd .mr-pd__assure li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
    font-size: 14px;
    color: var(--mr-muted);
}

.mr-pd .mr-pd__assure i {
    width: 20px;
    font-size: 18px;
    text-align: center;
    color: var(--mr-gold);
}

.mr-pd .mr-pd__assure a {
    font-size: 14px;
    color: var(--mr-navy-700);
    text-decoration: underline;
}

/* ---------------------------------------------------------
   Size guides (Components/SizeGuides.razor)
   --------------------------------------------------------- */
.mr-guides {
    margin-top: 24px;
    border: 1px solid var(--mr-line);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.mr-guides .mr-guide + .mr-guide {
    border-top: 1px solid var(--mr-line);
}

.mr-guides summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 50px;
    padding: 10px 16px;
    font-family: Poppins-Medium, Arial, sans-serif;
    font-size: 14px;
    color: var(--mr-navy);
    cursor: pointer;
    list-style: none;
    transition: background-color .2s;
}

.mr-guides summary::-webkit-details-marker {
    display: none;
}

.mr-guides summary:hover {
    background: var(--mr-page);
}

.mr-guides summary::after {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-right: 2px solid var(--mr-gold);
    border-bottom: 2px solid var(--mr-gold);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .25s ease;
}

.mr-guides details[open] > summary {
    background: var(--mr-page);
}

.mr-guides details[open] > summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.mr-guides .mr-guide__body {
    padding: 6px 16px 18px;
    overflow-x: auto;
}

.mr-guides .mr-guide__body h5 {
    margin: 16px 0 10px;
    font-family: Poppins-SemiBold, Arial, sans-serif;
    font-weight: normal;
    font-size: 14px;
    color: var(--mr-navy);
}

.mr-guides .mr-guide__table {
    width: 100%;
    border-collapse: collapse;
    font-family: Poppins-Regular, Arial, sans-serif;
    font-size: 13px;
    color: var(--mr-ink);
}

.mr-guides .mr-guide__table th,
.mr-guides .mr-guide__table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--mr-line);
    text-align: left;
    vertical-align: top;
}

.mr-guides .mr-guide__table thead th {
    background: var(--mr-page);
    font-family: Poppins-SemiBold, Arial, sans-serif;
    font-weight: normal;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mr-muted);
}

.mr-guides .mr-guide__table tbody th {
    font-family: Poppins-Medium, Arial, sans-serif;
    font-weight: normal;
    white-space: nowrap;
}

.mr-guides .mr-guide__table tbody tr:last-child :is(th, td) {
    border-bottom: 0;
}

/* ---------------------------------------------------------
   Product page
   --------------------------------------------------------- */
.mr-home .mr-page-head--slim {
    padding: 16px 0;
}

.mr-home .mr-page-head--slim .mr-crumbs {
    margin: 0;
}

.mr-product-page .mr-product-page__lower {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    padding: 36px 0 90px;
}

.mr-product-page .mr-product-page__desc-body,
.mr-product-page .mr-product-page__desc-body :is(p, span, li, div) {
    font-family: Poppins-Regular, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: var(--mr-muted);
}

.mr-product-page .mr-product-page__desc-body a {
    color: var(--mr-navy-700);
    text-decoration: underline;
}

.mr-product-page .mr-product-page__guides .mr-card__title {
    margin-bottom: 0;
}

.mr-product-page .mr-product-page__guides .mr-guides {
    margin-top: 14px;
}

/* Only one child (no long description): let the guides use the full width */
.mr-product-page .mr-product-page__guides:only-child {
    grid-column: 1 / -1;
    max-width: 760px;
}

/* While the product is being fetched */
.mr-product-page.is-loading .mr-pd__name {
    width: 70%;
    min-height: 40px;
    border-radius: 8px;
    background: linear-gradient(90deg, #eef0f3 25%, #f7f8fa 50%, #eef0f3 75%);
    background-size: 200% 100%;
    animation: mr-pd-shimmer 1.4s linear infinite;
}

.mr-product-page.is-loading :is(.mr-pd__pricing, .mr-pd__buy, .mr-pd__assure, .mr-product-page__lower) {
    visibility: hidden;
}

@keyframes mr-pd-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* Full-size image overlay */
.mr-image-overlay {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 26, 63, .92);
}

.mr-image-overlay .mr-image-overlay__box {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

.mr-image-overlay img {
    width: 100%;
    height: auto;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 10px;
}

.mr-image-overlay .mr-image-overlay__close {
    position: absolute;
    top: -46px;
    right: 0;
    border: 0;
    background: none;
    font-size: 40px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 1199px) {
    .mr-pd--page { --pd-h: 480px; gap: 36px; }
    .mr-product-page .mr-product-page__lower { gap: 36px; }
}

@media (max-width: 991px) {
    .mr-pd { --pd-h: 380px; gap: 28px; }
    .mr-pd--page { --pd-h: 440px; }
    .mr-qv .mr-qv__dialog { padding: 28px 22px; }
}

@media (max-width: 767px) {
    .mr-pd,
    .mr-pd--page,
    .mr-product-page .mr-product-page__lower {
        grid-template-columns: minmax(0, 1fr);
    }

    .mr-pd, .mr-pd--page { --pd-h: 360px; gap: 22px; }
    .mr-pd--page { padding-top: 22px; }
    .mr-pd .mr-pd__name { font-size: 24px; }
    .mr-pd--page .mr-pd__name { font-size: 26px; }
    .mr-product-page .mr-product-page__lower { gap: 28px; padding: 28px 0 64px; }
    .mr-qv.wrap-modal1 { padding: 12px 8px; }
    .mr-qv .mr-qv__dialog { padding: 56px 16px 22px; border-radius: 14px; }
    .mr-pd .mr-pd__add { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .mr-product-page.is-loading .mr-pd__name { animation: none; }
}