.elementor-27768 .elementor-element.elementor-element-11c8038{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:10px;--padding-bottom:10px;--padding-left:50px;--padding-right:50px;}.elementor-27768 .elementor-element.elementor-element-11c8038:not(.elementor-motion-effects-element-type-background), .elementor-27768 .elementor-element.elementor-element-11c8038 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-f58e7a6 );}.elementor-27768 .elementor-element.elementor-element-9d84443{--display:flex;--min-height:590px;--justify-content:center;--gap:30px 30px;--row-gap:30px;--column-gap:30px;--overlay-opacity:1;--border-radius:20px 20px 20px 20px;}.elementor-27768 .elementor-element.elementor-element-9d84443:not(.elementor-motion-effects-element-type-background), .elementor-27768 .elementor-element.elementor-element-9d84443 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://thecoffeehouseplymouth.com/wp-content/uploads/2026/04/storycta.jpeg");background-position:0px -146px;background-repeat:no-repeat;background-size:cover;}.elementor-27768 .elementor-element.elementor-element-9d84443::before, .elementor-27768 .elementor-element.elementor-element-9d84443 > .elementor-background-video-container::before, .elementor-27768 .elementor-element.elementor-element-9d84443 > .e-con-inner > .elementor-background-video-container::before, .elementor-27768 .elementor-element.elementor-element-9d84443 > .elementor-background-slideshow::before, .elementor-27768 .elementor-element.elementor-element-9d84443 > .e-con-inner > .elementor-background-slideshow::before, .elementor-27768 .elementor-element.elementor-element-9d84443 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-a495ec1 );--background-overlay:'';}.elementor-27768 .elementor-element.elementor-element-d378279{text-align:center;}.elementor-27768 .elementor-element.elementor-element-d378279 .elementor-heading-title{color:var( --e-global-color-fa678a6 );}.elementor-27768 .elementor-element.elementor-element-bc791f2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overflow:hidden;}@media(max-width:1366px){.elementor-27768 .elementor-element.elementor-element-9d84443{--min-height:564px;}.elementor-27768 .elementor-element.elementor-element-9d84443:not(.elementor-motion-effects-element-type-background), .elementor-27768 .elementor-element.elementor-element-9d84443 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:initial;}}@media(max-width:1024px){.elementor-27768 .elementor-element.elementor-element-9d84443{--min-height:489px;}.elementor-27768 .elementor-element.elementor-element-9d84443:not(.elementor-motion-effects-element-type-background), .elementor-27768 .elementor-element.elementor-element-9d84443 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}}@media(max-width:767px){.elementor-27768 .elementor-element.elementor-element-11c8038{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:10px;--padding-bottom:10px;--padding-left:0px;--padding-right:0px;}.elementor-27768 .elementor-element.elementor-element-9d84443{--width:85%;--min-height:504px;}.elementor-27768 .elementor-element.elementor-element-9d84443:not(.elementor-motion-effects-element-type-background), .elementor-27768 .elementor-element.elementor-element-9d84443 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center right;}}/* Start custom CSS for shortcode, class: .elementor-element-417c34c *//* ==========================================================================
   The Coffee House: Square shop styling
   Paste into Elementor > Site Settings > Custom CSS (or Appearance >
   Customize > Additional CSS). Requires Square Menu Sync 1.1.1+.
   Pulled from the site's Elementor kit, /menu/ and /contact/.

   Selectors are deliberately one step more specific than the plugin's
   (html:root, doubled classes) because the plugin stylesheet loads in the
   footer, after Elementor's custom CSS. Equal .elementor-27768 .elementor-element.elementor-element-417c34cs would lose.
   ========================================================================== */

html:root {
	/* Type: inherits Adobe Garamond Pro from the kit */
	--sms-name-size: 1.625rem;
	--sms-name-weight: 600;
	--sms-price-size: 1.125rem;
	--sms-price-weight: 700;
	--sms-desc-size: 1.0625rem;
	--sms-label-size: 1rem;

	/* Color: kit globals */
	--sms-text: #351F01;
	--sms-muted: #351F01; /* Secondary text stays dark brown (15:1) */
	--sms-bg: #FFFEF1;
	--sms-surface: #FFFDE3;
	--sms-line: rgba(53, 31, 1, 0.18);
	--sms-accent: #351F01;
	--sms-accent-text: #FFFEF1;
	--sms-accent-hover: #3A532D;
	--sms-accent-hover-text: #FFFEF1;
	--sms-preorder: #6B5E22; /* Kit olive #83742A darkened for small badge text (6.4:1) */
	--sms-preorder-text: #FFFEF1;
	--sms-sold-out: #351F01;
	--sms-sold-out-text: #FFFEF1;
	--sms-error: #8A2F2F;
	--sms-overlay: rgba(12, 28, 27, 0.55);

	/* Controls: match Gravity Forms on /contact/ */
	--sms-radius: 5px;
	--sms-control-radius: 5px;
	--sms-control-border: 2px;
	--sms-control-border-color: #351F01;
	--sms-control-height: 44px;
	--sms-control-bg: #FFFEF1;

	/* Add to cart: outlined like the Submit button, fills on hover */
	--sms-btn-radius: 0;
	--sms-btn-font-size: 1rem;
	--sms-btn-weight: 700;
	--sms-btn-transform: uppercase;
	--sms-btn-tracking: 0.02em;
	--sms-btn-border: 2px;
	--sms-btn-bg: #FFFEF1;
	--sms-btn-text: #351F01;
	--sms-btn-bg-hover: #351F01;
	--sms-btn-text-hover: #FFFEF1;

	/* Checkout: solid, goes green on hover */
	--sms-primary-bg: #351F01;
	--sms-primary-text: #FFFEF1;
	--sms-primary-bg-hover: #3A532D;
	--sms-primary-text-hover: #FFFEF1;

	/* Badges */
	--sms-badge-radius: 0;
	--sms-badge-transform: uppercase;
	--sms-badge-tracking: 0.08em;

	/* Layout */
	--sms-gap: 40px;
	--sms-row-gap: 64px;
	--sms-drawer-width: 440px;
}

/* Product photos: double brown frame, like the hero images.
   Outer line on the wrapper, a cream gap, then an inner line drawn as an overlay.
   The photo is pinned with absolute insets instead of height: 100%, which Safari
   sizes inconsistently inside a padded aspect-ratio box (it clipped the inner line). */
.sms-product.sms-product .sms-product__main-image {
	position: relative;
	padding: 0;
	border: 2px solid #351F01;
	border-radius: 14px;
	background: var(--sms-bg);
	overflow: hidden;
	-webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari: clip children to the radius */
}
.sms-product.sms-product .sms-product__main-image .sms-product__img {
	position: absolute;
	top: 5px;
	left: 5px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	border: 0;
	border-radius: 9px;
	object-fit: cover;
}
.sms-product.sms-product .sms-product__main-image::after {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	border: 2px solid #351F01;
	border-radius: 9px;
	pointer-events: none;
}

/* No photo yet: same frame around a soft cream panel */
.sms-product.sms-product .sms-product__main-image--empty::after {
	background: var(--sms-surface);
}

/* Cart heading gets the same double rule as the menu section titles */
.sms-cart.sms-cart .sms-cart__header {
	position: relative;
	border-bottom: 0;
	padding-bottom: 20px;
}
.sms-cart.sms-cart .sms-cart__header::after {
	content: "";
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 0;
	border-bottom: 6px double #351F01;
}
.sms-cart.sms-cart .sms-cart__title { font-size: 2rem; }

/* Subtotal row reads like a menu price */
.sms-cart.sms-cart .sms-cart__subtotal { font-size: 1.25rem; }

/* Floating cart button: outlined, uppercase, like the header button */
html button.sms-cart-toggle.sms-cart-fab {
	border-color: #351F01;
	box-shadow: 0 6px 18px rgba(53, 31, 1, 0.18);
}

@media (max-width: 360px) {
	.sms-cart.sms-cart .sms-cart__header::after { left: 16px; right: 16px; }
	.sms-cart.sms-cart .sms-cart__title { font-size: 1.625rem; }
}

/* Hello Elementor turns any focused button pink (#CC3366). Focus returns to the
   Cart button when the cart closes, so keep every shop button in its normal colors
   on mouse focus. Keyboard users still get the focus outline from the plugin. */
html button.sms-cart-toggle:focus:not(:hover) {
	background: var(--sms-bg);
	color: var(--sms-text);
	border-color: #351F01;
}
.sms-product.sms-product .sms-btn:focus:not(:hover):not(:focus-visible) {
	background: var(--sms-btn-bg);
	color: var(--sms-btn-text);
	border-color: var(--sms-btn-text);
}
.sms-cart.sms-cart .sms-btn.sms-cart__checkout:focus:not(:hover):not(:focus-visible) {
	background: var(--sms-primary-bg);
	color: var(--sms-primary-text);
	border-color: var(--sms-primary-bg);
}
.sms-product.sms-product .sms-qty__btn:focus:not(:hover),
.sms-cart.sms-cart .sms-qty__btn:focus:not(:hover),
.sms-cart.sms-cart .sms-cart__close:focus,
.sms-cart.sms-cart .sms-cart-line__remove:focus:not(:hover) {
	background: transparent;
	color: var(--sms-text);
}
.sms-cart.sms-cart .sms-cart-line__remove:focus:not(:hover) { color: var(--sms-muted); }
.sms-product.sms-product .sms-product__thumb:focus { background: var(--sms-surface); }/* End custom CSS */