/**
 * FTM Page Sections — Theme Token Overrides (annalee-dolls)
 *
 * This file is loaded automatically by the ftm-page-sections plugin after
 * the plugin's own default token definitions.  Any --ftps-* property
 * redefined here overrides the plugin default for this theme.
 */

:root {

	/* Framework-level token overrides */
	--ftps-header-rule-content: "";
	--ftps-header-text-align: center;
	--ftps-actions-link-font: var(--body-small);
	--ftps-section-title-transform: uppercase;

	/* Section spacing — match the classic theme's 40px (--space-xlarge) between
	   sections. The block framework spaces sections with
	   `.page-section { margin-block-start: var(--ftps-space-section-rhythm) }`
	   (default 6rem/96px); override that token, not the legacy --ftps-section-margin. */
	--ftps-space-section-rhythm: var(--space-xlarge);
	--ftps-section-margin: var(--space-xlarge);
	--ftps-section-margin-md: var(--space-xlarge);

	/* Hero block tokens */
	--ftps-hero-title-font-size: var(--label-medium);
	--ftps-hero-title-font-weight: var(--typeface-weight-body-medium-bold, 600);
	--ftps-hero-heading-font-size: var(--display-large);
	--ftps-hero-heading-font-weight: var(--typeface-weight-display-bold, 500);
	--ftps-hero-body-font-size: var(--body-small);
	--ftps-hero-body-font-weight: var(--typeface-weight-body-medium, 400);
}

.page-section-hero {
	--ftps-hero-body-font-size: var(--body-small);
	--ftps-hero-body-font-weight: var(--typeface-weight-body-medium, 400);	
	--ftps-hero-content-max-width: 50%;
	--ftps-hero-spacing-xs: 0;
}

.page-section-hero p {
	--ftps-hero-content-max-width: 50%;
	--ftps-hero-spacing-xs: 0;
    font-size: var(--body-small-size);
    font-family: var(--body-small-font);
    line-height: var(--body-large-line-height);
    letter-spacing: var(--body-small-letter-spacing);
	font-weight: var(--typeface-weight-body-medium, 400);

}

.page-section .ftps-section-title,
.section-title-true.section-text-true h2.ftps-section-title {
    text-transform: uppercase;
    font-size: var(--label-medium-size);
    font-family: var(--label-medium-font);
    line-height: var(--label-medium-line-height);
    letter-spacing: var(--label-medium-letter-spacing);
    font-weight: 700;
    margin: 0;
}

.page-section .ftps-section-text h2 {
    font-size: var(--heading-medium-size);
    font-family: var(--heading-medium-font);
    line-height: var(--heading-medium-line-height);
    letter-spacing: var(--heading-medium-letter-spacing);
	font-weight: 400;
	margin-top: 0;
}

.page-section-hero .ftps-section-text h2,
.page-section-media-content .ftps-section-text h2 {
    font-size: var(--display-large-size);
    font-family: var(--display-large-font);
    line-height: var(--display-large-line-height);
    letter-spacing: var(--display-large-letter-spacing);
	font-weight: 400;
	margin-top: 0;
}

/* Direct rule so that url() resolves relative to this file, not the plugin's framework CSS */
.ftps-header::after,
.page-section-post-grid .ftps-section-text::after {
	content: "";
	display: block;
	width: 70px;
	height: 6px;
	margin: 0.75rem auto;
	background-image: url(../images/zig-zag.svg);
}

/* Classic theme showed product grids 2-up on phones; the plugin default is
   1-up (--ftps-post-grid-cols-mobile: 1). Restore 2-up for parity. */
.page-section-post-grid {
	--ftps-post-grid-cols-mobile: 2;
}

.page-section-post-grid .see-details {
	font: var(--label-medium);
	font-weight: 400;
}

.page-section-simple-callout .actions .button {
	background: rgba(255, 255, 255, 0.15);
}

.page-section-simple-callout .ft-actions {
	--ftps-element-margin: 0;
}

@media (min-width: 45em) {

	.page-section-simple-callout {
        padding: var(--gutter-width);
    }
}

.ft-page-sections .page-section-simple-callout img {
	border-radius: 0;
	border: none;
}

/* First hero image sits flush to the top of the page (moved from the plugin hero block — brand styling). */
.ft-page-sections .page-section-hero:first-child img {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-top: none;
}

.page-section-post-grid .page-section-inner .archive-posts {
	grid-template-columns: repeat(2, 1fr);

	@media (min-width: 37.5em) {
		grid-template-columns: repeat(2, 1fr);
	}

	@media (min-width: 64em) {
		grid-template-columns: repeat(4, 1fr);
	}
}

.ftm_before_site_content .page-section {
	margin: 0;
}

.product-results-inner {
	margin-block-end: var(--space-small);
}

.ft-actions, .page-section-header-title {
	padding-bottom: var(--space-medium);
}

.ftps-hero-image {
	width: 60vw;
	margin: 0 auto;
	padding-top: var(--space-medium);

	@media (min-width: 770px) {
		width: inherit;
		padding: inherit;
		margin: 0;
	}
}

.ft-page-sections .page-section-hero img,
.ft-page-sections .page-section-hero:first-child img {
	border: none;
	border-radius: 10px 10px 10px 10px;

	@media (min-width: 770px) {
		border-radius: 0 0 10px 0;

	}
}

.ftps-hero-content {
	width: 90vw;
	padding-top: 0;
	margin: 0 auto;

	@media (min-width: 770px) {
		width: inherit;
	}
}

.page-section.page-section-product-collection {

    a.add_to_cart_button:not(.button) {
        font: var(--label-small);
		font-weight: var(--typeface-weight-body-medium, 400);
    }
}

.page-section li.ftm-interstitial-section {
    grid-column: 1;
}

.page-section-slider.slider--text-row {
    --ftps-text-row-padding-block: 1rem;
}

.page-section-post-grid .actions button, .page-section-post-grid .actions .button, .page-section-post-grid .actions :where(.wp-element-button, .wp-block-button__link), .page-section-post-grid .ftps-actions button, .page-section-post-grid .ftps-actions .button, .page-section-post-grid .ftps-actions :where(.wp-element-button, .wp-block-button__link) {
    color: var(--color-primary, #3a3a3a);
    background-color: transparent;
    display: inline-flex;
    align-items: center;
 
	&::after {
        --ftps-angle-right-icon-size: 1rem;
        background-color: currentcolor;
        content: '';
        display: inline-block;
        flex-shrink: 0;
        height: var(--ftps-angle-right-icon-size);
        mask-image: var(--ftps-angle-right-icon)
url("data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 347 1024\"><path d=\"M340 536.381c0 4.571-2.286 9.714-5.714 13.143L68 815.81c-3.429 3.429-8.571 5.714-13.143 5.714s-9.714-2.286-13.143-5.714l-28.571-28.571c-3.429-3.429-5.714-8-5.714-13.143 0-4.571 2.286-9.714 5.714-13.143l224.571-224.571L13.143 311.811c-3.429-3.429-5.714-8.571-5.714-13.143s2.286-9.714 5.714-13.143l28.571-28.571c3.429-3.429 8.571-5.714 13.143-5.714s9.714 2.286 13.143 5.714L334.286 523.24c3.429 3.429 5.714 8.571 5.714 13.143z\"/></svg>")
;
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
        width: var(--ftps-angle-right-icon-size);
        -webkit-mask-image: var(--ftps-angle-right-icon);
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
    }
}