.main-wrapper {
	padding: 0 !important;
}

.header {
	background-color: white !important;
}

.main {
	background-color: #FAF9F6;
}

.container {
	/*max-width: unset !important;*/
	padding: 0 !important;
}

.site-logo img {
	width: 150px;
	height: auto;	
}

#block-swirl-socialmediablock {
	height: 20px;
}

.header-main-container > div {
	min-width: 50px;
}

.paragraph--type--image img, #block-swirl-heroimage img {
	width: 100%;
}

.field {
	margin: 0 !important;
}

.center div {
	margin: auto;
}

.webform-submission-form, 
.field-image, 
.product-details, 
.cart-form, 
.commerce-checkout-flow-multistep-default {
	padding: 40px;
}

.form-actions {
	padding-top: 40px;
}


/* Target the internal grid container created by the Responsive Grid format */
.views-view-responsive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 350px));
	justify-content: center; /* This centers the columns themselves */
	justify-items: center;   /* This centers the content inside each cell */
}

/* Optional: If you want the text inside the items to be centered too */
.views-view-responsive-grid__item {
	text-align: center;
	width: 100%;
}

.views-element-container .block-title {
    padding: 40px;
}

.block-title:after, .block-title:before {
    background-color: unset;
}

/**** AI CSS *****/

/* 2. Global Input and Textarea Styling */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
    border: none; /* Remove default borders to make it minimalist */
    border-bottom: 2px solid #E0E0E0; /* Subtle grey bottom border for an understated line */
    background-color: transparent; /* Clear background for the minimalist look */
    color: #999999; /* Text in muted grey */
    font-family: Arial, sans-serif; /* Standard clean sans-serif for entry */
    font-size: 1rem;
    padding: 0.75rem 0.5rem;
    transition: border-bottom-color 0.3s ease-in-out;
}

/* Active and Hover States for Inputs */
input[type="text"]:focus,
textarea:focus {
    border-bottom-color: #A3D9C1; /* Accent with mint/sage on focus */
    outline: none; /* Clean look without default highlight */
}

input[type="text"]:hover,
textarea:hover {
    border-bottom-color: #CCCCCC; /* Lighten on hover */
}

input:focus {
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
}

/* 3. Button and Action Item Styling */
/* Targeted globally, with a specific override for Kart theme submit/RSVP buttons */
.button,
input[type="submit"],
button[type="submit"],
.rsvp-button /* Custom class if applicable for RSVP buttons */ {
    background-color: #A3D9C1 !important; /* Main accent color (mint/sage) for background */
    color: #FFFFFF !important; /* White text for contrast */
    font-family: "Great Vibes", cursive !important; /* Stylized script font for buttons */
    font-size: 1.25rem !important; /* Larger script size for prominence */
    font-weight: normal !important; /* Script is typically naturally bold */
    border: none !important;
    border-radius: 4px !important; /* Optional slight rounding for modern touch, or omit for sharper look */
    padding: 10px 20px !important;
    text-transform: capitalize !important; /* Just the first letter capitalized for the graceful script look */
    cursor: pointer !important;
    transition: background-color 0.3s ease-in-out, transform 0.1s !important;
}

/* Hover and Active States for Buttons */
.button:hover,
input[type="submit"]:hover {
    background-color: #8CC4AC !important; /* Darker sage shade on hover for depth */
}

.button:active,
input[type="submit"]:active {
    transform: scale(0.98) !important; /* Small click effect */
}

/* Special Case: Outline-style button for secondary actions (if needed) */
.button-secondary {
    background-color: transparent;
    border: 2px solid #A3D9C1;
    color: #A3D9C1;
    font-family: Arial, sans-serif; /* Simpler font for secondary actions */
}

.button-secondary:hover {
    background-color: #A3D9C1;
    color: #FFFFFF;
}

/* 4. Other Thematic Touches */
/* RSVP specifically mentioned. If Kart uses a unique class, style it directly */
.rsvp {
    color: #A3D9C1 !important; /* Force RSVP text color */
}

/* Add the stylized cursive to input labels if desired for a soft touch */
label {
    font-family: Arial, sans-serif; /* Labels are clean sans-serif to not overdo script */
    font-size: 0.9rem;
    color: #999999;
}

/* Example styling for thematic headers: "HANNA MARIN AND CALEB RIVERS" */
h1, h2, h3 {
    font-family: "Playfair Display", serif; /* Use a prominent serif font */
    color: #999999; /* Grey headings */
    text-transform: uppercase; /* Match the provided image examples */
    font-weight: normal;
}

/* Styling for script elements: e.g., "and" or "february 14, 2021" */
.script-accent, .and-connector {
    font-family: "Great Vibes", cursive; /* Dedicated stylized script */
    color: #A3D9C1; /* Accent color */
}

/* Target the Title and "View Details" links in your Product Grid */
.views-view-responsive-grid__item a {
	color: #A3D9C1; /* Your mint green accent color */
	text-decoration: none;
	font-weight: 600;
	transition: color 0.3s ease;
}

/* Add a hover effect so guests know it's interactive */
.views-view-responsive-grid__item a:hover {
	color: #82c4a8; /* A slightly darker mint for the hover state */
	text-decoration: underline;
}

/* Specifically style the 'View Product' link if you want it to look even more like a button */
.views-field-view-commerce-product a {
	display: inline-block;
	padding: 8px 16px;
	background-color: #A3D9C1;
	color: #FFFFFF !important; /* White text on the green background */
	border-radius: 4px;
	margin-top: 10px;
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 1px;
}

.views-field-view-commerce-product a:hover {
	background-color: #82c4a8;
	text-decoration: none;
}