/* CG Size Guide. The off-canvas panel around it supplies the orange background. White on
   orange (#FC4C02) is only 3.4:1, so white text is kept to the large title, and the tables
   sit on white cards with dark text. */

/* Products without a size guide (the caps): hide buttons that open an off-canvas panel. */
body.cg-no-size-guide .elementor-widget-button:has(a[href*="off_canvas"]) {
    display: none;
}

/* The template paints the panel orange with a background gradient. Elementor's "lazy load
   background images" removes gradients inside the template's lower containers until they
   scroll near the screen, and the panel sits in the bottom one, so it opened see-through.
   A background colour isn't lazy-loaded. Beats the template's 0,4,0 transparent colour. */
.elementor .elementor-element.elementor-widget-off-canvas:has(.cg-size-guide) .e-off-canvas__content {
    background-color: var(--e-global-color-secondary, #FC4C02);
}

/* The template sets the panel to 50vw, too narrow for the tables below desktop width. */
@media (max-width: 1024px) {
    .elementor .elementor-element.elementor-widget-off-canvas:has(.cg-size-guide) {
        --e-off-canvas-width: min(100vw, 560px);
    }
}

.cg-size-guide {
    --cg-sg-orange: var(--e-global-color-secondary, #FC4C02);
    --cg-sg-ink: var(--e-global-color-background, #1f1f1f);
    --cg-sg-line: #e4e4e4;
    container-type: inline-size;
    padding: 32px;
    color: #fff;
    line-height: 1.5;
}

.cg-size-guide .cg-sg__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.cg-size-guide .cg-sg__title {
    margin: 0;
    color: #fff;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.15;
}

.cg-size-guide button {
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
}

.cg-size-guide .cg-sg__close {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 1px solid #fff;
    border-radius: 50%;
    background: transparent;
    color: #fff;
}

.cg-size-guide .cg-sg__close:hover,
.cg-size-guide .cg-sg__close:focus-visible {
    background: #fff;
    color: var(--cg-sg-ink);
}

/* Unit switch: a white pill, the chosen unit in dark ink. */
.cg-size-guide .cg-sg__units {
    display: inline-flex;
    gap: 2px;
    margin-bottom: 20px;
    padding: 3px;
    border-radius: 999px;
    background: #fff;
}

.cg-size-guide .cg-sg__unit {
    min-width: 56px;
    min-height: 36px;
    padding: 6px 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--cg-sg-ink);
    font-weight: 600;
}

.cg-size-guide .cg-sg__unit[aria-pressed="true"] {
    background: var(--cg-sg-ink);
    color: #fff;
}

.cg-size-guide .cg-sg__unit:focus-visible,
.cg-size-guide .cg-sg__close:focus-visible,
.cg-size-guide .cg-sg__how summary:focus-visible {
    outline: 2px solid var(--cg-sg-ink);
    outline-offset: 2px;
}

.cg-size-guide .cg-sg__card {
    margin: 0 0 20px;
    padding: 20px;
    border-radius: 15px;
    background: #fff;
    color: var(--cg-sg-ink);
}

.cg-size-guide .cg-sg__card:last-child {
    margin-bottom: 0;
}

.cg-size-guide .cg-sg__heading {
    margin: 0 0 8px;
    color: var(--cg-sg-ink);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

.cg-size-guide .cg-sg__text {
    margin: 0 0 16px;
    font-size: 0.95rem;
}

.cg-size-guide .cg-sg__text p {
    margin: 0 0 8px;
}

.cg-size-guide .cg-sg__text p:last-child {
    margin-bottom: 0;
}

.cg-size-guide .cg-sg__layout {
    display: grid;
    gap: 16px;
}

.cg-size-guide .cg-sg__diagram {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin: 0 auto;
}

.cg-size-guide .cg-sg__table-wrap {
    overflow-x: auto;
}

/* Selectors start with .cg-size-guide to beat Hello Elementor's table reset (borders,
   15px padding and striped rows). */
.cg-size-guide .cg-sg__table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.cg-size-guide .cg-sg__table th,
.cg-size-guide .cg-sg__table td,
.cg-size-guide .cg-sg__table tbody tr > * {
    padding: 9px 10px;
    border: 0;
    border-bottom: 1px solid var(--cg-sg-line);
    background: transparent;
    color: inherit;
    line-height: 1.4;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.cg-size-guide .cg-sg__table thead th {
    white-space: normal;
    border-bottom: 2px solid var(--cg-sg-orange);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cg-size-guide .cg-sg__table thead th:first-child,
.cg-size-guide .cg-sg__table tbody th {
    text-align: left;
}

.cg-size-guide .cg-sg__table tbody th {
    font-weight: 700;
}

.cg-size-guide .cg-sg__table tbody tr:last-child > * {
    border-bottom: 0;
}

/* The size picked on the product form. */
.cg-size-guide .cg-sg__table tbody tr.is-selected > * {
    background: #fde4d8;
    font-weight: 700;
}

.cg-size-guide[data-unit="inch"] .cg-sg__v:not([data-unit="inch"]),
.cg-size-guide[data-unit="centimeter"] .cg-sg__v:not([data-unit="centimeter"]) {
    display: none;
}

.cg-size-guide .cg-sg__how {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--cg-sg-line);
}

.cg-size-guide .cg-sg__how summary {
    color: var(--cg-sg-ink);
    font-weight: 600;
    cursor: pointer;
}

.cg-size-guide .cg-sg__how-body {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.cg-size-guide .cg-sg__how-body img {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
}

.cg-size-guide .cg-sg__how-body .cg-sg__text {
    margin: 0;
}

/* Side by side once the panel is wide enough (desktop's 50vw). */
@container (min-width: 600px) {
    .cg-size-guide .cg-sg__card--garment .cg-sg__layout {
        grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
        align-items: start;
    }
    .cg-size-guide .cg-sg__how-body {
        grid-template-columns: 180px minmax(0, 1fr);
        align-items: start;
    }
}

@media (max-width: 767px) {
    .cg-size-guide {
        padding: 20px 16px;
    }
    .cg-size-guide .cg-sg__card {
        padding: 16px 12px;
    }
    .cg-size-guide .cg-sg__title {
        font-size: 1.6rem;
    }
}

.cg-sg__placeholder {
    padding: 16px;
    border: 1px dashed currentColor;
    border-radius: 8px;
    font-size: 0.9rem;
}