/**
 * Product description block — Description / Delivery & Returns tabs
 *
 * Lifted out of product-page.css so the product page and the clip sheet on the
 * home page load the same rules rather than two copies that drift apart. Both
 * markups use the same classes; only the container around them differs
 * (#product-description on the product page, .tiktok-sheet-desc in the sheet),
 * and that stays with each.
 *
 * @package Qatarshoes
 */

.desc-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.desc-tabs::-webkit-scrollbar {
    display: none;
}

.desc-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 14px 0px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #999;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -1px;
    white-space: nowrap;
}

.desc-tab:hover {
    color: #2d1f1f;
}

.desc-tab.active {
    color: #2d1f1f;
    font-weight: 700;
    border-bottom-color: #2d1f1f;
}

/* The product page hides its panels with an inline display, the sheet with the
   hidden attribute; this covers the second. */
.tab-panel[hidden] {
    display: none;
}

/* The catalogue writes each field as a bare label inside a <div> with its
   value in a <p>, so the element alone tells the two apart: the label inherits
   the container's size, the value sits a step down and in grey. */
.tab-panel .desc-content {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
    margin: 0;
}

.tab-panel p {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    margin: 0;
}

.desc-content h3 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

/* Merchant-entered copy, so it has to be held inside its column whatever it
   turns out to contain. */
.desc-content,
.desc-content * {
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

.desc-content img {
    height: auto;
}

.delivery-returns-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    font-size: 14px;
    line-height: 1.5;
    color: #444;
}