.page-wrapper {
    max-width: var(--max-width-content);
    margin: 0 auto;
    padding: 0 var(--page-side-padding);
}

.content-grid {
    padding: 10px 0 0;
}

.main-column {
    min-width: 0;
}

.main-content {
    background: var(--color-bg-white);
    border-radius: var(--radius-container);
    padding: var(--section-inner-padding-top) var(--section-inner-padding-h) var(--space-2xl);
}

/* Two-column row used on home page (Top Products + Artwork) */
.home-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--section-column-gap);
    margin-top: 52px;
    margin-bottom: var(--space-lg);
}

/* Rows added after the first two-col block need extra top spacing */
.home-section-row {
    margin-top: 72px;
}

@media (min-width: 768px) {
    .content-grid {
        display: grid;
        grid-template-columns: var(--left-column-width) 1fr;
        gap: 32px;
        align-items: start;
    }

    .main-content {
        min-height: var(--main-content-min-height, 600px);
    }
}

/* Neutralise inline font-size injected by TinyMCE paste (Word/Docs/web copy).
   Headings are excluded so h2/h3 sizes from base.css are not affected. */
.page-content p,
.page-content li,
.page-content span,
.page-content td,
.page-content th {
    font-size: inherit !important;
}

/* Page title — used on all inner pages */
.page-title {
    font-size: var(--font-size-section-title);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
    margin: 0 0 var(--space-lg);
}

/* Equal two-column layout for inner pages (e.g. contact) */
.page-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.page-two-col__image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-default);
}

/* 2/3 + 1/3 asymmetric layout — main content with sidebar */
.page-main-aside {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 50px;
    align-items: start;
}

.page-main-aside__sidebar {
    background: var(--color-bg-section-grey);
    border-radius: var(--radius-default);
    padding: 30px var(--space-xl);
    min-height: 200px;
}

/* Article detail page */
.article-detail__hero {
    margin-bottom: var(--space-xl);
}

.article-detail__hero img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-default);
}

.article-detail__header .page-title {
    font-size: calc(var(--font-size-section-title) + 3px);
}

/* Product detail page — images + secondary left, panel right */
.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    row-gap: var(--space-lg);
    align-items: start;
}
.pdg-images    { grid-column: 1; grid-row: 1; }
.pdg-panel     { grid-column: 2; grid-row: 1 / 3; }
.pdg-secondary { grid-column: 1; grid-row: 2; }

/* Row-gap handles spacing — remove bottom margins so both gallery and single-image behave identically */
.pdg-images .product-image-wrap { margin-bottom: 0; }
.pdg-images .product-gallery    { margin-bottom: 0; }

@media (max-width: 767px) {
    .home-two-col {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .page-two-col {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .page-main-aside {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    .pdg-images, .pdg-panel, .pdg-secondary {
        grid-column: auto;
        grid-row: auto;
    }
}

/* ── Search page ─────────────────────────────────────── */
.search-page {
    padding: var(--space-xl) 0;
}

.search-page__form {
    position: relative;
    max-width: 600px;
    margin-bottom: var(--space-2xl);
}

.search-page__input {
    width: 100%;
    height: 58px;
    padding: 0 56px 0 22px;
    border: 2px solid var(--color-border-card);
    border-radius: var(--radius-input);
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    background: var(--color-bg-white);
    color: var(--color-text-heading);
    outline: none;
    transition: border-color 0.15s;
}

.search-page__input:focus {
    border-color: var(--color-primary);
}

.search-page__btn {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-heading);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}

.search-page__hint,
.search-page__no-results {
    color: var(--color-text-body);
    font-size: var(--font-size-body);
}

.search-results {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search-result {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-md);
    background: var(--color-bg-white);
    border-radius: var(--radius-small);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.search-result:hover {
    background: var(--color-accent-blue-light);
}

.search-result--page {
    padding-left: var(--space-md);
}

.search-result__img {
    flex: 0 0 90px;
    width: 90px;
    height: 90px;
    border-radius: var(--radius-small);
    overflow: hidden;
    background: var(--color-bg-section-grey);
}

.search-result__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.search-result__img--placeholder {
    background: var(--color-bg-section-grey);
}

.search-result__body {
    flex: 1;
    min-width: 0;
}

.search-result__title {
    font-size: 19px;
    font-weight: 600;
    color: var(--color-text-heading);
    margin-bottom: 5px;
    line-height: 1.3;
}

.search-result__excerpt {
    font-size: 16px;
    color: var(--color-text-body);
    line-height: 1.5;
    margin: 0;
}

.search-result__title mark,
.search-result__excerpt mark {
    background: none;
    color: inherit;
    font-weight: 700;
}

@media (max-width: 767px) {
    .search-page__input {
        font-size: 16px;
        height: 52px;
    }

    .search-result__img {
        flex: 0 0 56px;
        width: 56px;
        height: 56px;
    }
}