/* ==========================================================================
   _pages.css
   PLP, PDP, cart, checkout, account, wishlist, login, modals, CMS.
   Implements THEME_STYLING_GUIDE §D rows 7–14 and Strata page-pattern spec.
   ========================================================================== */

/* ==========================================================================
   PLP — Category + Search results
   ========================================================================== */

.catalog-category-view .page-main,
.catalogsearch-result-index .page-main {
    padding-top: var(--sp-4, 1rem);
    padding-bottom: var(--sp-6, 1.5rem);
}

.catalog-category-view main.page-main,
.catalogsearch-result-index main.page-main {
    padding-top: 0;
}

.catalog-category-view .page-title-wrapper,
.catalogsearch-result-index .page-title-wrapper {
    margin-bottom: var(--sp-3, 0.75rem);
    padding-bottom: var(--sp-3, 0.75rem);
    border-bottom: 1px solid var(--border, rgba(28, 22, 18, 0.1));
}

.catalog-category-view .page-title-wrapper h1,
.catalogsearch-result-index h1 {
    font-size: 3rem;
    font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: var(--sp-2, 0.5rem);
}

.catalog-category-view .category-description,
.catalogsearch-result-index .search.results .message.notice {
    max-width: 48rem;
    color: var(--color-text-muted, #7A6A52);
    font-size: var(--text-md, 1rem);
    line-height: 1.7;
}

.catalog-category-view .category-description p:last-child {
    margin-bottom: 0;
}

.catalog-category-view .page.messages,
.catalogsearch-result-index .page.messages {
    margin: 0;
    padding: 0;
}

.catalog-category-view .columns,
.catalogsearch-result-index .columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 17.5rem);
    gap: var(--sp-6, 1.5rem);
    align-items: start;
}

.catalog-category-view .column.main,
.catalogsearch-result-index .column.main {
    grid-column: 1;
    min-width: 0;
}

.catalog-category-view .sidebar-main,
.catalog-category-view .sidebar-additional,
.catalogsearch-result-index .sidebar-main,
.catalogsearch-result-index .sidebar-additional {
    grid-column: 2;
    width: auto;
    min-width: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.catalog-category-view .sidebar-main,
.catalog-category-view .sidebar-additional,
.catalogsearch-result-index .sidebar-main,
.catalogsearch-result-index .sidebar-additional {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4, 1rem);
}

.catalog-category-view .filter.block,
.catalogsearch-result-index .filter.block {
    background: var(--card, #FDFAF4);
    border: 1px solid var(--border, rgba(28, 22, 18, 0.1));
    border-radius: var(--radius-lg, 0.875rem);
    padding: var(--sp-4, 1rem);
    box-shadow: var(--shadow-xs, 0 1px 1px rgba(28, 22, 18, 0.04));
    margin: 0;
}

.catalog-category-view .sidebar .block,
.catalogsearch-result-index .sidebar .block {
    background: var(--card, #FDFAF4);
    border: 1px solid var(--border, rgba(28, 22, 18, 0.1));
    border-radius: var(--radius-lg, 0.875rem);
    box-shadow: var(--shadow-xs, 0 1px 1px rgba(28, 22, 18, 0.04));
    margin: 0;
    padding: var(--sp-4, 1rem);
}

.catalog-category-view .sidebar .block.filter,
.catalogsearch-result-index .sidebar .block.filter {
    padding: var(--sp-4, 1rem);
}

.catalog-category-view .filter-content,
.catalogsearch-result-index .filter-content,
.catalog-category-view .filter-options,
.catalogsearch-result-index .filter-options {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.catalog-category-view .filter-subtitle,
.catalogsearch-result-index .filter-subtitle {
    display: block;
    margin: 0 0 var(--sp-3, 0.75rem);
    padding: 0 0 var(--sp-3, 0.75rem);
    border-bottom: 1px solid var(--border, rgba(28, 22, 18, 0.1));
    color: var(--color-text-muted, #7A6A52);
    font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.catalog-category-view .sidebar .block-title,
.catalogsearch-result-index .sidebar .block-title {
    margin: 0 0 var(--sp-3, 0.75rem);
    padding: 0 0 var(--sp-3, 0.75rem);
    border-bottom: 1px solid var(--border, rgba(28, 22, 18, 0.1));
}

.catalog-category-view .sidebar .block-title strong,
.catalogsearch-result-index .sidebar .block-title strong {
    color: var(--color-text, #1C1612);
    display: block;
    font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.catalog-category-view .sidebar .block-content,
.catalogsearch-result-index .sidebar .block-content,
.catalog-category-view .sidebar .empty,
.catalogsearch-result-index .sidebar .empty {
    color: var(--color-text-muted, #7A6A52);
    font-size: var(--text-sm, 0.8125rem);
    line-height: 1.5;
}

.catalog-category-view .toolbar,
.catalogsearch-result-index .toolbar {
    background: rgba(253, 250, 244, 0.72);
    border: 1px solid var(--border, rgba(28, 22, 18, 0.1));
    border-radius: var(--radius-lg, 0.875rem);
    padding: var(--sp-3, 0.75rem) var(--sp-4, 1rem);
    box-shadow: var(--shadow-xs, 0 1px 1px rgba(28, 22, 18, 0.04));
}

.price-as-configured .price-box .price {
    font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
}


/* ==========================================================================
   PDP — Product detail
   ========================================================================== */

.catalog-product-view .page-main {
    padding-top: var(--sp-6, 1.5rem);
    padding-bottom: var(--sp-8, 2rem);
}

.catalog-product-view .column.main {
    display: flow-root;
}

.catalog-product-view .product.media {
    background: var(--card, #FDFAF4);
    border-radius: var(--radius-xl, 0.875rem);
    border: 1px solid var(--border, rgba(28, 22, 18, 0.1));
    overflow: hidden;
    box-shadow: var(--shadow-xs, 0 1px 1px rgba(28, 22, 18, 0.04));
}

.catalog-product-view .fotorama__stage,
.catalog-product-view .fotorama__nav-wrap {
    background: var(--card, #FDFAF4);
}

.catalog-product-view .fotorama__nav__frame {
    border-radius: var(--radius-sm, 0.5rem);
    overflow: hidden;
}

.catalog-product-view .product-info-main {
    background: rgba(253, 250, 244, 0.72);
    border: 1px solid var(--border, rgba(28, 22, 18, 0.1));
    border-radius: var(--radius-xl, 0.875rem);
    box-shadow: var(--shadow-xs, 0 1px 1px rgba(28, 22, 18, 0.04));
    padding: var(--sp-6, 1.5rem);
}

.page-product-view .product-info-main .page-title-wrapper h1 {
    font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
    font-size: 3rem;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: var(--sp-3, 0.75rem);
    color: var(--color-text, #1C1612);
}

.catalog-product-view .product-info-main .product.attribute.overview,
.catalog-product-view .product-info-main .overview {
    color: var(--color-text-muted, #7A6A52);
    font-size: var(--text-md, 1rem);
    line-height: 1.75;
    margin: var(--sp-4, 1rem) 0;
}

.catalog-product-view .product-info-main .product.attribute.sku,
.catalog-product-view .product-info-main .stock {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(184, 137, 58, 0.22);
    border-radius: var(--radius-full, 9999px);
    background: rgba(184, 137, 58, 0.08);
    color: var(--gold-dark, #8B6220);
    font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
    letter-spacing: 0.04em;
    line-height: 1.2;
    margin: 0 var(--sp-2, 0.5rem) var(--sp-2, 0.5rem) 0;
    padding: 0.25rem 0.625rem;
    text-transform: uppercase;
}

.product.info.detailed .product.data.items {
    border-bottom: 1px solid var(--border, rgba(28, 22, 18, 0.1));
    margin-top: var(--sp-8, 2rem);
}
.product.info.detailed .product.data.items > .item.title {
    border-right: none;
    border-bottom: 2px solid transparent;
}
.product.info.detailed .product.data.items > .item.title > .switch {
    font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
    font-size: var(--text-sm, 0.8125rem);
    font-weight: var(--font-weight-medium, 500);
    letter-spacing: 0.02em;
    padding: var(--sp-3, 0.75rem) var(--sp-4, 1rem);
    color: var(--color-text-muted, #7A6A52);
    text-transform: none;
}
.product.info.detailed .product.data.items > .item.title.active > .switch {
    border-bottom: 2px solid var(--gold, #B8893A);
    color: var(--color-text, #1C1612);
}
.product.info.detailed .product.data.items .content {
    background: var(--card, #FDFAF4);
    border-radius: var(--radius-md, 0.75rem);
    padding: var(--sp-5, 1.25rem);
}

.product.info.detailed .additional-attributes,
.product.info.detailed .data.table.additional-attributes {
    background: transparent;
}

.product.info.detailed .additional-attributes th,
.product.info.detailed .additional-attributes td {
    border-bottom: 1px solid var(--border, rgba(28, 22, 18, 0.1));
    padding: var(--sp-3, 0.75rem) 0;
}

.product.info.detailed .additional-attributes th {
    color: var(--color-text-muted, #7A6A52);
    font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.box-tocart .field.qty .control {
    max-width: 8rem;
}
.box-tocart {
    border-top: 1px solid rgba(184, 137, 58, 0.22);
    margin-top: var(--sp-5, 1.25rem);
    padding-top: var(--sp-5, 1.25rem);
}

.box-tocart .fieldset {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-4, 1rem);
    margin: 0;
}

.box-tocart .field.qty {
    margin: 0;
}

.box-tocart .field.qty .label {
    color: var(--color-text-muted, #7A6A52);
    font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.box-tocart .actions {
    display: flex;
    gap: var(--sp-3, 0.75rem);
    margin: 0;
}

.product-info-price {
    padding: var(--sp-4, 1rem) 0 var(--sp-5, 1.25rem);
    border-bottom: 1px solid rgba(184, 137, 58, 0.22);
    margin-bottom: var(--sp-4, 1rem);
}
.product-info-price .price {
    font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
    font-size: 2.25rem;
    font-weight: 400;
}

.catalog-product-view .product-add-form {
    margin-top: var(--sp-4, 1rem);
}

.catalog-product-view .product-social-links {
    border-top: 1px solid var(--border, rgba(28, 22, 18, 0.1));
    margin-top: var(--sp-5, 1.25rem);
    padding-top: var(--sp-4, 1rem);
}

.catalog-product-view .product-social-links .action {
    color: var(--color-text-muted, #7A6A52);
    font-size: var(--text-sm, 0.8125rem);
}

.catalog-product-view .product-social-links .action:hover {
    color: var(--gold, #B8893A);
}


/* ==========================================================================
   CART
   ========================================================================== */

.cart-index-index .page-main,
.cart-index-index .cart-container {
    max-width: var(--max-w, 80rem);
    margin: 0 auto;
    padding: var(--sp-6, 1.5rem) var(--sp-4, 1rem);
}

.cart.table-wrapper .cart.items tbody tr {
    border-bottom: 1px solid var(--border, rgba(28, 22, 18, 0.1));
}

.cart-summary,
.cart-shipping,
.totals {
    background: var(--card, #FDFAF4);
    border-radius: var(--radius-lg, 0.875rem);
    border: 1px solid var(--border, rgba(28, 22, 18, 0.1));
    padding: var(--sp-5, 1.25rem);
}


/* ==========================================================================
   CHECKOUT
   ========================================================================== */

.checkout-index-index .page-main {
    max-width: var(--max-w, 80rem);
    margin: 0 auto;
    padding: var(--sp-6, 1.5rem) var(--sp-4, 1rem);
}

.opc-wrapper {
    background: var(--card, #FDFAF4);
    border-radius: var(--radius-lg, 0.875rem);
    border: 1px solid var(--border, rgba(28, 22, 18, 0.1));
    padding: var(--sp-5, 1.25rem);
}

.opc-progress-bar {
    gap: 0;
}
.opc-progress-bar-item {
    font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
    font-size: var(--text-sm, 0.8125rem);
}
.opc-progress-bar-item.completed span {
    font-weight: var(--font-weight-medium, 500);
}

.step-title {
    font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--color-text, #1C1612);
}

.checkout-shipping-address input,
.checkout-shipping-address select {
    background: var(--input-background, #FDFAF4);
}

.checkout-payment-method .payment-method-title {
    font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
    font-weight: var(--font-weight-medium, 500);
}


/* ==========================================================================
   ACCOUNT DASHBOARD
   ========================================================================== */

.account .page-main {
    max-width: var(--max-w, 80rem);
    margin: 0 auto;
    padding: var(--sp-6, 1.5rem) var(--sp-4, 1rem);
}

.account .page-title-wrapper h1 {
    font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
    font-size: 2rem;
    font-weight: 400;
}

.account .block-collapsible-nav {
    background: var(--card, #FDFAF4);
    border-radius: var(--radius-lg, 0.875rem);
    border: 1px solid var(--border, rgba(28, 22, 18, 0.1));
    overflow: hidden;
}
.account .block-collapsible-nav .item {
    border-bottom: 1px solid var(--border, rgba(28, 22, 18, 0.1));
}
.account .block-collapsible-nav .item:last-child {
    border-bottom: none;
}
.account .block-collapsible-nav .item.current strong,
.account .block-collapsible-nav .item.current a {
    color: var(--gold, #B8893A);
    font-weight: var(--font-weight-medium, 500);
}

.account .column.main .block {
    background: var(--card, #FDFAF4);
    border-radius: var(--radius-lg, 0.875rem);
    border: 1px solid var(--border, rgba(28, 22, 18, 0.1));
    padding: var(--sp-5, 1.25rem);
    margin-bottom: var(--sp-4, 1rem);
}

.account .orders-history .data.table tbody tr {
    border-bottom: 1px solid var(--border, rgba(28, 22, 18, 0.1));
}
.account .order-status {
    padding: var(--sp-1, 0.25rem) var(--sp-2, 0.5rem);
    border-radius: var(--radius-sm, 0.5rem);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
    font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
}
.account .order-status.complete {
    background: rgba(47, 107, 58, 0.1);
    color: #2F6B3A;
}
.account .order-status.pending {
    background: rgba(184, 137, 58, 0.15);
    color: var(--gold-dark, #8B6220);
}
.account .order-status.canceled {
    background: rgba(139, 47, 47, 0.1);
    color: var(--destructive, #8B2F2F);
}


/* ==========================================================================
   WISHLIST
   ========================================================================== */

.wishlist-index-index .page-main {
    max-width: var(--max-w, 80rem);
    margin: 0 auto;
    padding: var(--sp-6, 1.5rem) var(--sp-4, 1rem);
}
.wishlist-index-index .product-item {
    background: var(--card, #FDFAF4);
    border-radius: var(--radius-xl, 0.875rem);
    border: 1px solid var(--border, rgba(28, 22, 18, 0.1));
    overflow: hidden;
    transition: box-shadow var(--motion-duration-normal, 0.3s) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.wishlist-index-index .product-item:hover {
    box-shadow: var(--shadow-lg, 0 12px 40px rgba(28, 22, 18, 0.15));
}
.wishlist-index-index .product-item-photo {
    overflow: hidden;
}
.wishlist-index-index .product-item-actions {
    padding: 0 var(--sp-4, 1rem) var(--sp-4, 1rem);
}
.wishlist-index-index .product-item-name {
    font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
}


/* ==========================================================================
   LOGIN / REGISTER
   ========================================================================== */

.customer-account-login .page-main,
.customer-account-create .page-main {
    max-width: var(--max-w, 80rem);
    margin: 0 auto;
    padding: var(--sp-8, 2rem) var(--sp-4, 1rem);
}

.customer-account-login .login-container,
.customer-account-create .form-create-account {
    max-width: 28rem;
    background: var(--card, #FDFAF4);
    border-radius: var(--radius-lg, 0.875rem);
    border: 1px solid var(--border, rgba(28, 22, 18, 0.1));
    padding: var(--sp-6, 1.5rem) var(--sp-5, 1.25rem);
    margin: 0 auto;
}

.block-customer-login .block-title strong,
.block-new-customer .block-title strong {
    font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
    font-weight: 400;
    font-size: 1.5rem;
}

.customer-account-login .actions-toolbar .primary,
.customer-account-create .actions-toolbar .primary {
    width: 100%;
}
.customer-account-login .actions-toolbar .primary .action.primary,
.customer-account-create .actions-toolbar .primary .action.primary {
    width: 100%;
}

/* ==========================================================================
   CMS / HOMEPAGE — deferred styling until live markup exists
   Placeholder only — do not edit until Admin HTML content is published.
   ========================================================================== */

.cms-page-view .page-main {
    max-width: var(--max-w, 80rem);
    margin: 0 auto;
    padding: var(--sp-8, 2rem) var(--sp-4, 1rem);
}
.cms-page-view h1 {
    font-size: 2.5rem;
}
.cms-page-view h2 {
    font-size: 2rem;
}
.cms-page-view p {
    max-width: 68ch;
}


/* ==========================================================================
   RESPONSIVE — PAGES
   ========================================================================== */

@media (max-width: 1024px) {
    .catalog-product-view .column.main {
        padding-right: 0;
    }
    .opc-wrapper {
        max-width: 100%;
    }
}
@media (max-width: 768px) {
    .catalog-category-view .columns,
    .catalogsearch-result-index .columns {
        display: block;
    }

    .catalog-category-view .sidebar-main,
    .catalog-category-view .sidebar-additional,
    .catalogsearch-result-index .sidebar-main,
    .catalogsearch-result-index .sidebar-additional {
        margin-top: var(--sp-4, 1rem);
    }

    .catalog-category-view .page-title-wrapper h1,
    .catalogsearch-result-index h1,
    .page-product-view .product-info-main .page-title-wrapper h1 {
        font-size: 2.25rem;
    }

    .product-info-price .price {
        font-size: 1.875rem;
    }

    .catalog-category-view .page-main,
    .catalogsearch-result-index .page-main,
    .catalog-product-view .page-main,
    .checkout-index-index .page-main,
    .account .page-main,
    .wishlist-index-index .page-main,
    .customer-account-login .page-main,
    .customer-account-create .page-main,
    .cart-index-index .page-main {
        padding-left: var(--sp-3, 0.75rem);
        padding-right: var(--sp-3, 0.75rem);
        padding-top: var(--sp-4, 1rem);
        padding-bottom: var(--sp-4, 1rem);
    }
}
@media (max-width: 480px) {
    .catalog-category-view .page-title-wrapper h1,
    .catalogsearch-result-index h1 {
        font-size: 2rem;
    }

    .page-product-view .product-info-main .page-title-wrapper h1 {
        font-size: 1.75rem;
    }
    .product.info.detailed .product.data.items > .item.title > .switch {
        font-size: var(--text-xs, 0.75rem);
        padding: var(--sp-2, 0.5rem);
    }
    .opc-progress-bar-item {
        font-size: var(--text-xs, 0.75rem);
    }
}