.ahtr-materials {
    --ahtr-material-ink: #272521;
    --ahtr-material-line: #ded8d0;
    --ahtr-material-fill: #f6f3ef;
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 76rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(.75rem, 3vw, 2rem);
    background: #fff;
    color: var(--ahtr-material-ink);
    text-align: center;
    line-height: 1.45;
}

.ahtr-materials h2.ahtr-materials-title {
    margin: 0 0 1.25rem;
    padding: 0;
    color: inherit;
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    font-weight: 500;
    text-transform: none;
}

.ahtr-materials-groups,
.ahtr-materials-filters,
.ahtr-materials-status-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .45rem;
}

.ahtr-materials [hidden] {
    display: none;
}

.ahtr-materials-groups {
    margin-block-end: 1.15rem;
}

.ahtr-materials-filters {
    margin-block-end: 1.65rem;
}

.ahtr-materials button {
    box-sizing: border-box;
    margin: 0;
    border: 0;
    color: inherit;
    font-family: inherit;
    line-height: inherit;
    text-transform: none;
    cursor: pointer;
}

.ahtr-materials-groups button,
.ahtr-materials-filters button,
.ahtr-materials-close,
.ahtr-materials-status-actions button,
.ahtr-materials-status-actions a {
    min-block-size: 44px;
    padding: .55rem .9rem;
    background: var(--ahtr-material-fill);
    color: var(--ahtr-material-ink);
    font-size: .9rem;
}

.ahtr-materials-groups button {
    min-inline-size: 7rem;
    background: #fff;
    border: 1px solid var(--ahtr-material-line);
}

.ahtr-materials button[aria-pressed="true"] {
    background: var(--ahtr-material-ink);
    color: #fff;
}

.ahtr-materials button:not([aria-pressed="true"]):hover {
    background-color: #ebe6df;
}

.ahtr-materials :is(button, a):focus-visible {
    outline: 2px solid #645448;
    outline-offset: 3px;
}

.ahtr-materials-section-title {
    margin: 2.25rem 0 1.5rem;
    padding: 0;
    color: inherit;
    font-size: clamp(1.25rem, 3vw, 2rem);
    font-weight: 500;
    text-transform: none;
}

.ahtr-materials-grid {
    --ahtr-swatches-gap: clamp(.75rem, 2.5vw, 1.8rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.65rem var(--ahtr-swatches-gap);
}

.ahtr-materials-grid .ahtr-materials-card {
    flex: 0 1 calc((100% - 4 * var(--ahtr-swatches-gap)) / 5);
    min-inline-size: min(8rem, calc((100% - var(--ahtr-swatches-gap)) / 2));
    max-inline-size: 13rem;
    align-self: start;
    padding: 0;
    background: transparent;
    text-align: center;
}

.ahtr-materials .ahtr-materials-grid .ahtr-materials-card:hover {
    background: transparent;
}

.ahtr-materials .ahtr-materials-card:focus-visible {
    outline: none;
}

.ahtr-materials-card:focus-visible .ahtr-materials-preview {
    outline: 2px solid #645448;
    outline-offset: 3px;
}

.ahtr-materials-preview {
    display: block;
    box-sizing: border-box;
    aspect-ratio: 1;
    overflow: hidden;
    background: #efebe5;
    border: 1px solid var(--ahtr-material-line);
    border-radius: 50%;
}

.ahtr-materials-preview img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.ahtr-materials-caption {
    display: block;
    padding: .7rem .15rem 0;
    overflow-wrap: anywhere;
    font-size: .875rem;
    font-weight: 400;
}

.ahtr-materials-code {
    margin-inline-end: .3em;
}

.ahtr-materials-status {
    padding: 1rem 0;
}

.ahtr-materials-status-actions {
    margin-block-start: .8rem;
}

.ahtr-materials-dialog {
    box-sizing: border-box;
    inline-size: min(44rem, calc(100% - 2rem));
    max-block-size: calc(100% - 2rem);
    padding: clamp(1rem, 3vw, 1.75rem);
    overflow: auto;
    border: 0;
    background: #fff;
    color: var(--ahtr-material-ink);
    text-align: start;
}

.ahtr-materials-dialog::backdrop {
    background: rgb(20 18 15 / 66%);
}

.ahtr-materials-close {
    display: block;
    margin-inline-start: auto !important;
    margin-block-end: .8rem !important;
}

.ahtr-materials-detail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: 1.25rem;
    align-items: start;
}

.ahtr-materials-detail img {
    inline-size: 100%;
    max-block-size: 55vh;
    object-fit: contain;
}

.ahtr-materials-detail h3 {
    margin: 0 0 .75rem;
    color: inherit;
    overflow-wrap: anywhere;
}

.ahtr-materials-detail dl {
    display: grid;
    grid-template-columns: minmax(5rem, .8fr) minmax(0, 1.2fr);
    gap: .5rem .8rem;
    margin: 0;
    font-size: .9rem;
}

.ahtr-materials-detail dt {
    font-weight: 600;
}

.ahtr-materials-detail dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.odoo-iframe-wrapper:has(> .ahtr-materials) {
    height: auto;
    min-height: 0;
}

.ahtr-materials-intro,
.ahtr-materials-notes {
    max-inline-size: 65ch;
    margin-inline: auto;
    color: #5f554c;
    font-size: .9rem;
    overflow-wrap: anywhere;
}

.ahtr-materials-intro {
    margin-block-end: 1.5rem;
}

.ahtr-materials-notes {
    margin-block-start: 1.5rem;
}

.ahtr-materials-examples {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-block-end: 1.5rem;
}

.ahtr-materials-examples figure {
    flex: 0 1 8rem;
    margin: 0;
    font-size: .85rem;
}

.ahtr-materials-examples img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    margin-block-end: .4rem;
    border-radius: 50%;
}

@font-face {
    font-family: "AH Materials Beausite";
    src: url("https://ahcorp.odoo.com/ahcorp_sample_request/static/src/fonts/beausite-classic-clear.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "AH Materials Raleway";
    src: url("https://ahcorp.odoo.com/ahcorp_sample_request/static/src/fonts/Raleway-Regular.ttf") format("truetype");
    font-display: swap;
}

.ahtr-materials h2.ahtr-materials-title,
.ahtr-materials .ahtr-materials-section-title,
.ahtr-materials-groups button,
.ahtr-materials-filters button {
    font-family: "AH Materials Beausite", Arial, sans-serif;
    text-transform: uppercase;
}

.ahtr-materials-intro,
.ahtr-materials-notes,
.ahtr-materials-caption,
.ahtr-materials-examples figcaption {
    font-family: "AH Materials Raleway", Raleway, Arial, sans-serif;
    text-transform: uppercase;
}

.ahtr-materials p.ahtr-materials-intro,
.ahtr-materials p.ahtr-materials-notes {
    max-inline-size: 72rem;
    margin: 1.65rem auto;
    padding: 0;
    color: #666;
    line-height: 1.5;
}

.ahtr-materials-detail dt {
    text-transform: uppercase;
}

.ahtr-materials-carousel-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .15rem;
    margin-block-start: .9rem;
}

.ahtr-materials-carousel-controls button {
    display: grid;
    place-items: center;
    min-inline-size: 2rem;
    min-block-size: 2rem;
    padding: 0;
    background: transparent;
}

.ahtr-materials-carousel-controls .ahtr-materials-arrow {
    font-size: 1.55rem;
}

.ahtr-materials-carousel-controls .ahtr-materials-dot {
    color: #b5ada3;
}

.ahtr-materials-carousel-controls .ahtr-materials-dot[aria-pressed="true"] {
    background: transparent;
    color: var(--ahtr-material-ink);
}

.ahtr-materials-dot::before {
    inline-size: .45rem;
    block-size: .45rem;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

:dir(rtl) .ahtr-materials-arrow {
    transform: scaleX(-1);
}