/**
 * Classes page — streamlined booking layout
 * Template: page-classes.php
 *
 * Relies on the brand custom properties defined in main.css
 * (loaded via the happy-family-main dependency).
 */

.mwp-classes {
    --mwp-texture: url('../images/clay-texture.jpg');
    /* Full-bleed: sections manage their own width/background. */
    padding: 0 0 clamp(3rem, 6vw, 5rem);
    background: var(--color-cream);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.mwp-classes__hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: var(--color-charcoal);
    padding-top: calc(var(--space-2xl) + 72px);
    padding-bottom: var(--space-2xl);
}

.mwp-classes__hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--mwp-texture) center / cover;
    opacity: 0.16;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.mwp-classes__hero > .container {
    position: relative;
    z-index: 2;
}

.mwp-classes__hero .section-label {
    display: block;
    color: var(--color-terracotta-light);
    margin-bottom: var(--space-xs);
}

.mwp-classes__hero .page-title {
    font-family: var(--font-display);
    font-size: var(--hero-title);
    font-weight: 400;
    line-height: 1;
    color: var(--color-warm-white);
    margin: 0 0 var(--space-sm);
}

.mwp-classes__hero .page-title em {
    font-style: italic;
    color: var(--color-terracotta-light);
}

.mwp-classes__intro {
    max-width: 560px;
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 1.65;
    color: var(--color-light-gray);
    margin: 0 auto;
}

/* ── Alternating full-bleed class sections ────────────────────────────── */
.mwp-class-section {
    width: 100%;
}

.mwp-class-section--cream {
    background: var(--color-cream);
}

.mwp-class-section--warm-white {
    background: var(--color-warm-white);
}

.mwp-class-section__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}

@media (min-width: 760px) {
    .mwp-class-section__inner {
        grid-template-columns: 42% 1fr;
        gap: clamp(2rem, 4vw, 3.5rem);
    }

    .mwp-class-section--flip .mwp-class-section__inner {
        grid-template-columns: 1fr 42%;
    }

    /* Alternate the image to the opposite side on flipped sections. */
    .mwp-class-section--flip .mwp-class-section__gallery {
        order: 2;
    }
}

.mwp-class-section__gallery {
    min-width: 0;
}

@media (min-width: 760px) {
    .mwp-class-section__gallery {
        align-self: start;
    }
}

@media (min-width: 900px) {
    .mwp-class-section__gallery {
        /* Stick within its own class section, then release at the section end. */
        position: sticky;
        top: calc(72px + 1.5rem);
        justify-self: stretch;
    }
}

.mwp-class-section__media {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    aspect-ratio: 1 / 1;
    background: var(--color-sand);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.mwp-class-section__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── Photo thumbnail strip ────────────────────────────────────────────── */
.mwp-class-section__thumbs {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mwp-class-section__thumb-item {
    margin: 0;
}

.mwp-class-section__thumb {
    display: block;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--color-sand);
    overflow: hidden;
    cursor: pointer;
    opacity: 0.72;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.mwp-class-section__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mwp-class-section__thumb:hover,
.mwp-class-section__thumb:focus-visible {
    opacity: 1;
}

.mwp-class-section__thumb.is-active {
    opacity: 1;
    border-color: var(--color-clay);
}

.mwp-class-section__body {
    display: flex;
    flex-direction: column;
}

.mwp-class-section__title {
    font-family: var(--font-display);
    font-weight: normal;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.15;
    color: var(--color-charcoal);
    margin: 0 0 0.75rem;
}

.mwp-class-section__meta {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.mwp-class-section__meta li {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-charcoal);
}

.mwp-class-section__meta-label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-light-gray);
    margin-right: 0.35rem;
}

.mwp-class-section__desc {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-warm-gray);
    margin-bottom: 1.5rem;
}

.mwp-class-section__desc p:last-child {
    margin-bottom: 0;
}

/* ── Tabs (Dates / About this class) ──────────────────────────────────── */
.mwp-class-tabs {
    margin-top: auto;
}

.mwp-class-tabs__nav {
    display: flex;
    gap: 0.4rem;
    border-bottom: 1px solid var(--color-sand);
    margin-bottom: 1.25rem;
}

.mwp-class-tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 0.55rem 0.15rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-light-gray);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.mwp-class-tab + .mwp-class-tab {
    margin-left: 0.9rem;
}

.mwp-class-tab:hover {
    color: var(--color-warm-gray);
}

.mwp-class-tab.is-active {
    color: var(--color-clay);
    border-bottom-color: var(--color-clay);
}

.mwp-class-tab:focus-visible {
    outline: 2px solid var(--color-clay);
    outline-offset: 2px;
    border-radius: 2px;
}

.mwp-class-tab-panel[hidden] {
    display: none;
}

/* Full description shown inside the About tab. */
.mwp-class-section__desc--full {
    max-width: 60ch;
    margin-bottom: 0;
}

/* Lists pasted into the product description (What's Included, Class Details). */
.mwp-class-section__desc--full ul,
.mwp-class-section__desc--full ol {
    margin: 0 0 1.25rem;
    padding-left: 1.35rem;
}

.mwp-class-section__desc--full ul {
    list-style: disc;
}

.mwp-class-section__desc--full ol {
    list-style: decimal;
}

.mwp-class-section__desc--full li {
    margin-bottom: 0.45rem;
    padding-left: 0.35rem;
    line-height: 1.55;
}

.mwp-class-section__desc--full li::marker {
    color: var(--color-clay);
}

.mwp-class-section__desc--full li:last-child {
    margin-bottom: 0;
}

/* Nested lists — tighter spacing and a distinct marker for hierarchy. */
.mwp-class-section__desc--full li > ul,
.mwp-class-section__desc--full li > ol {
    margin: 0.5rem 0 0.5rem;
}

.mwp-class-section__desc--full ul ul {
    list-style: circle;
}

.mwp-class-section__desc--full ul ul ul {
    list-style: square;
}

/* Tables pasted into the product description (e.g. class schedules). */
.mwp-class-section__desc--full table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
    background: var(--color-warm-white);
    border: 1px solid var(--color-light-gray);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.mwp-class-section__desc--full table:last-child {
    margin-bottom: 0;
}

.mwp-class-section__desc--full th,
.mwp-class-section__desc--full td {
    padding: 0.65rem 0.9rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-light-gray);
}

.mwp-class-section__desc--full thead th {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-clay);
    background: var(--color-cream);
    border-bottom-color: var(--color-clay);
}

.mwp-class-section__desc--full tbody tr:last-child th,
.mwp-class-section__desc--full tbody tr:last-child td {
    border-bottom: none;
}

.mwp-class-section__desc--full tbody tr:nth-child(even) {
    background: var(--color-cream);
}

.mwp-class-section__desc--full td:first-child {
    font-weight: 600;
    color: var(--color-charcoal);
    white-space: nowrap;
}

/* Headings between stacked schedule tables. */
.mwp-class-section__desc--full h3 {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-clay);
    margin: 1.75rem 0 0.75rem;
}

.mwp-class-section__desc--full > h3:first-child {
    margin-top: 0;
}

/* ── Dates ────────────────────────────────────────────────────────────── */
.mwp-class-section__dates {
    margin-top: auto;
    border-top: 1px solid var(--color-sand);
    padding-top: 1.25rem;
}

/* Inside a tab panel the tablist already provides the divider, so drop the
   auto-push and top border the standalone dates block used to carry. */
.mwp-class-tab-panel .mwp-class-section__dates {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

.mwp-class-section__dates-heading {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-clay);
    margin: 0 0 0.85rem;
}

.mwp-date-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mwp-date__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--color-sand);
    border-radius: var(--radius-sm);
    background: var(--color-warm-white);
    text-decoration: none;
    transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

a.mwp-date__link:hover,
a.mwp-date__link:focus-visible {
    border-color: var(--color-terracotta);
    background: var(--color-warm-white);
    transform: translateY(-1px);
    outline: none;
}

.mwp-date__when {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.mwp-date__day {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-charcoal);
    line-height: 1.2;
}

.mwp-date__time {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-warm-gray);
}

.mwp-date__cta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.mwp-date__seats {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-clay);
    background: rgba(196, 112, 75, 0.12);
    padding: 0.2rem 0.55rem;
    border-radius: 100px;
    white-space: nowrap;
}

.mwp-date__book {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-terracotta);
    white-space: nowrap;
}

.mwp-date__book span {
    transition: transform 0.18s ease;
    display: inline-block;
}

a.mwp-date__link:hover .mwp-date__book span {
    transform: translateX(3px);
}

/* Sold-out state */
.mwp-date__link--disabled {
    cursor: not-allowed;
    opacity: 0.6;
    background: var(--color-cream);
}

.mwp-date__status {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-light-gray);
    flex-shrink: 0;
}

.mwp-date.is-sold-out .mwp-date__day {
    text-decoration: line-through;
    text-decoration-color: var(--color-light-gray);
}

.mwp-class-section__no-dates {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-warm-gray);
    margin: 0;
}

.mwp-class-section__no-dates a {
    color: var(--color-terracotta);
    font-weight: 700;
}

/* Toggle button reuses .mwp-date__link visuals but needs the button reset. */
.mwp-date__toggle {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.mwp-date__toggle:hover,
.mwp-date__toggle:focus-visible {
    border-color: var(--color-terracotta);
    background: var(--color-warm-white);
    transform: translateY(-1px);
    outline: none;
}

.mwp-date__chevron {
    display: inline-block;
    transition: transform 0.18s ease;
    font-size: 1.15em;
    line-height: 1;
}

.mwp-date__toggle[aria-expanded="true"] {
    border-color: var(--color-terracotta);
    background: var(--color-warm-white);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.mwp-date__toggle[aria-expanded="true"] .mwp-date__chevron {
    transform: rotate(90deg);
}

.mwp-date__seats.is-few {
    color: #fff;
    background: var(--color-terracotta);
}

/* ── Contrast fix: date buttons on the lighter warm-white sections ─────────
   The warm-white buttons pop against the darker cream sections, but on the
   warm-white sections they're the same color as the background. Give the
   resting buttons the deeper cream there so they stand out. An expanded row
   stays warm-white so it still reads as one piece with the booking panel
   (whose seat chips are cream and would blend on a cream panel). */
.mwp-class-section--warm-white .mwp-date__link {
    background: var(--color-cream);
}

.mwp-class-section--warm-white .mwp-date__toggle:hover,
.mwp-class-section--warm-white .mwp-date__toggle:focus-visible {
    background: var(--color-cream);
}

.mwp-class-section--warm-white .mwp-date__toggle[aria-expanded="true"] {
    background: var(--color-warm-white);
}

/* ── Booking panel (seat picker + students) ───────────────────────────── */
.mwp-date__panel {
    border: 1px solid var(--color-terracotta);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: var(--color-warm-white);
    padding: 1.25rem 1.1rem 1.35rem;
}

.mwp-booking__label {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-charcoal);
    margin: 0 0 0.6rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.mwp-booking__avail {
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--color-warm-gray);
    letter-spacing: 0.02em;
}

.mwp-seat-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.mwp-seat {
    width: 2.5rem;
    height: 2.5rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-charcoal);
    background: var(--color-cream);
    border: 1px solid var(--color-sand);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mwp-seat:hover {
    border-color: var(--color-terracotta);
}

.mwp-seat.is-selected {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
    color: #fff;
}

.mwp-seat--taken {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-sand);
    border: 1px solid var(--color-sand);
    color: var(--color-warm-gray);
    opacity: 0.5;
    cursor: default;
}

.mwp-seat--taken:hover {
    border-color: var(--color-sand);
}

/* ── Per-student age + name rows ──────────────────────────────────────── */
.mwp-booking__students {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.mwp-booking__students:not(:empty) {
    margin-bottom: 1.1rem;
}

.mwp-student {
    display: grid;
    grid-template-columns: auto 5.5rem 1fr;
    align-items: end;
    gap: 0.6rem;
}

@media (max-width: 460px) {
    .mwp-student {
        grid-template-columns: 4.5rem 1fr;
    }
    .mwp-student__num {
        grid-column: 1 / -1;
    }
}

.mwp-student__num {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-clay);
    padding-bottom: 0.6rem;
    white-space: nowrap;
}

.mwp-student__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.mwp-student__label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-warm-gray);
}

.mwp-student__label em {
    font-style: normal;
    color: var(--color-light-gray);
    font-weight: 400;
}

.mwp-student__age,
.mwp-student__name {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-charcoal);
    background: #fff;
    border: 1px solid var(--color-sand);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.65rem;
    width: 100%;
}

.mwp-student__age:focus,
.mwp-student__name:focus {
    outline: none;
    border-color: var(--color-terracotta);
}

/* ── Foot: running total + submit ─────────────────────────────────────── */
.mwp-booking__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.mwp-booking__total {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-charcoal);
}

.mwp-booking__submit {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    background: var(--color-terracotta);
    border: none;
    border-radius: 100px;
    padding: 0.7rem 1.4rem;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.mwp-booking__submit:hover,
.mwp-booking__submit:focus-visible {
    background: var(--color-clay);
    transform: translateY(-1px);
    outline: none;
}

.mwp-booking__submit span {
    display: inline-block;
    transition: transform 0.15s ease;
}

.mwp-booking__submit:hover span {
    transform: translateX(3px);
}

/* ── "More dates available" text link ─────────────────────────────────── */
.mwp-more-dates-toggle {
    display: inline-block;
    margin-top: 0.9rem;
    padding: 0;
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-terracotta);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.mwp-more-dates-toggle:hover,
.mwp-more-dates-toggle:focus-visible {
    color: var(--color-clay);
    outline: none;
}

.mwp-more-dates-list {
    margin-top: 0.75rem;
}

/* The .mwp-date-list `display: flex` (author) otherwise overrides the UA
   [hidden] { display: none } rule, leaving the "more dates" list always
   visible. Re-honor the hidden attribute so the toggle can collapse it. */
.mwp-date-list[hidden] {
    display: none;
}

/* ── Reschedule disclaimer ────────────────────────────────────────────── */
.mwp-class-section__disclaimer {
    margin: 1rem 0 0;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--color-light-gray);
}

/* ── Booking error notices ────────────────────────────────────────────── */
.mwp-classes__notices {
    max-width: 640px;
    margin: 0 auto 2rem;
}

/* ── Empty state ──────────────────────────────────────────────────────── */
.mwp-classes__empty {
    text-align: center;
    font-family: var(--font-body);
    font-size: 1.125rem;
    color: var(--color-warm-gray);
}

/* ── Reviews tab ──────────────────────────────────────────────────────────
   Mirrors the .mwp-tutorial-review family from tutorials.css so class reviews
   look identical to tutorial/product reviews. tutorials.css/woocommerce.css
   aren't enqueued on page-classes.php, so the styles are duplicated here. */

.mwp-class-reviews {
    max-width: 60ch;
}

.mwp-tutorial-review {
    padding: var(--space-md) 0;
    border-bottom: 1.5px solid var(--color-sand);
}

.mwp-tutorial-review:last-child {
    border-bottom: none;
}

.mwp-tutorial-review__stars {
    float: left;
    display: flex;
    gap: 1px;
    color: var(--color-terracotta);
    margin-bottom: 0;
}

.mwp-tutorial-review__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--color-light-gray);
    float: right;
}

.mwp-tutorial-review__meta strong {
    color: var(--color-charcoal);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: normal;
}

.mwp-tutorial-review__meta .mwp-review-avatar {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.mwp-tutorial-review__meta .mwp-review-initial {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

.mwp-tutorial-review__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: flex-start;
    clear: both;
    padding-top: 0.5rem;
}

.mwp-tutorial-review__text {
    width: 100%;
}

.mwp-tutorial-review__text p {
    font-size: 0.95rem;
    color: var(--color-warm-gray);
    line-height: 1.7;
    margin: 0;
}

.mwp-tutorial-review__photos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mwp-tutorial-review__photos img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-md);
    transition: opacity 0.2s;
}

.mwp-tutorial-review__photos img:hover {
    opacity: 0.8;
}

.mwp-tutorial-review__photos .mwp-review-video__thumb {
    position: relative;
    display: block;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
}

.mwp-tutorial-review__photos .mwp-review-video__thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.mwp-play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
}

.mwp-play-icon::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 0 9px 16px;
    border-color: transparent transparent transparent #fff;
    margin-left: 3px;
}

/* Threaded response to a review */
.mwp-tutorial-review__response {
    clear: both;
    margin: var(--space-sm) 0 0 var(--space-md);
    padding-left: var(--space-md);
    border-left: 2px solid var(--color-sand);
}

.mwp-tutorial-review__response-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.mwp-tutorial-review__response--owner .mwp-tutorial-review__response-meta::before {
    content: "Response from the owner";
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-light-gray);
    margin-right: auto;
}

.mwp-tutorial-review__response-meta strong {
    color: #000;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: normal;
}

.mwp-tutorial-review__response-meta time {
    font-size: 0.82rem;
    color: var(--color-light-gray);
}

.mwp-tutorial-review__response-text {
    background: var(--color-cream);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
}

.mwp-tutorial-review__response-text p {
    font-size: 0.95rem;
    color: var(--color-warm-gray);
    line-height: 1.7;
    margin: 0;
}

.mwp-review-owner-avatar {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mwp-review-owner-avatar img {
    width: 68%;
    height: 68%;
    object-fit: contain;
}

/* Lightbox — shared gallery modal (lightbox.js is enqueued globally, but its
   CSS lives in woocommerce.css which isn't loaded on this template). */
.mwp-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.mwp-lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}

.mwp-lightbox__img,
.mwp-lightbox__video {
    max-width: 85vw;
    max-height: 85vh;
    border-radius: var(--radius-md);
    object-fit: contain;
    user-select: none;
}

.mwp-lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    line-height: 1;
}

.mwp-lightbox__close:hover {
    opacity: 1;
}

.mwp-lightbox__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.2s, background 0.2s;
}

.mwp-lightbox__arrow:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}

.mwp-lightbox__arrow--prev {
    left: 1.2rem;
}

.mwp-lightbox__arrow--next {
    right: 1.2rem;
}

.mwp-lightbox__counter {
    position: absolute;
    bottom: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    .mwp-lightbox__arrow {
        width: 36px;
        height: 36px;
    }

    .mwp-lightbox__arrow--prev { left: 0.5rem; }
    .mwp-lightbox__arrow--next { right: 0.5rem; }
}