/* ===== Product description (body_html from Shopify) ===== */
.tf-product-description p {
    margin-bottom: 1rem;
}
.tf-product-description ul,
.tf-product-description ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.tf-product-description li {
    margin-bottom: 0.25rem;
}
.tf-product-description h1,
.tf-product-description h2,
.tf-product-description h3,
.tf-product-description h4,
.tf-product-description h5,
.tf-product-description h6 {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.tf-product-description a {
    color: var(--primary);
    text-decoration: underline;
}
.tf-product-description blockquote {
    border-left: 3px solid var(--line);
    padding-left: 1rem;
    margin: 1rem 0;
    color: var(--text-3);
    font-style: italic;
}
.tf-product-description strong {
    font-weight: 700;
}

/* ===== Checkout: shipping/payment radio layout ===== */
/* Ecomus scopes these rules to .widget-wrap-checkout .wd-check-payment,
   which isn't the wrapper used in our checkout form. */
.fieldset-radio {
    display: flex;
    align-items: center;
    gap: 10px;
}
.fieldset-radio input[type="radio"].tf-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}
.fieldset-radio label {
    font-weight: 400;
    color: var(--text);
    margin-top: 0;
}

/* ===== Product grid: uniform card height ===== */
/* Title line-height is 19.2px; clamp is already 2 lines max.
   Forcing height = 2 × 19.2px makes 1-line titles take the same space as 2-line ones. */
.tf-grid-layout .card-product .card-product-info .title {
    height: 38.4px;
}

/* ===== Book details table ===== */
.tf-pr-attrs th.tf-attr-label {
    min-width: 140px;
    background-color: var(--bg-2, #f5f5f5);
}
.tf-pr-attrs td.tf-attr-value p {
    margin-bottom: 0;
}

/* ===== Rounded buttons — client requirement ===== */
.tf-btn {
    border-radius: 60px !important;
}

/* ===== Page title: gradient background ===== */
/* The bundled page-title-blog.png is near-transparent; replace with a CSS gradient. */
.tf-page-title {
    background-image: linear-gradient(180deg, #f2f1ee 0%, #ffffff 100%) !important;
}

/* ===== Header nav dropdown: align to menu item left edge ===== */
/* Ecomus default left: -110px centres the dropdown for centred menus;
   our nav is left-aligned so we reset to 0. */
.header-bottom .box-nav-ul .submenu-default {
    left: 0;
}