/* ==========================================================================
   Little Bit Extra – extra styles
   --------------------------------------------------------------------------
   Everything you see on the site is set in Elementor. This file only covers
   the few things free Elementor has no setting for. Each block says what it
   does and which Elementor CSS class (Advanced → CSS Classes) it targets.
   Colors point at the Global Colors in Elementor → Site Settings, so changing
   a Global Color there updates these too.
   ========================================================================== */

/* --- 1. HEADER: links in the main menu -------------------------------------
   Class "lbx-nav-link". Underlines "Home" while you are on the homepage. */
.lbx-nav-link .elementor-heading-title a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.lbx-nav-home .elementor-heading-title a { min-height: 0; }
body.home .lbx-nav-home .elementor-heading-title a { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--e-global-color-primary, #A95443); text-decoration-thickness: 2px; }

/* --- 2. HEADER: desktop dropdown panels (Shop All, Personalized Gifts) -------
   Class "lbx-dd" on the menu item, "lbx-dd-panel" on its panel. The panel opens
   on hover or keyboard focus. The small chevron after the label is drawn here. */
.lbx-dd { position: relative; }
.lbx-dd-label .elementor-heading-title a::after { content: ""; width: 10px; height: 10px; margin-left: 6px; flex: 0 0 auto; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.6 5 6.6 8 3.6' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.6 5 6.6 8 3.6' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .35s cubic-bezier(.25,.1,.25,1); }
.lbx-dd:hover .lbx-dd-label .elementor-heading-title a::after,
.lbx-dd:focus-within .lbx-dd-label .elementor-heading-title a::after { transform: rotate(180deg); }
.e-con.lbx-dd-panel { position: absolute; top: 100%; left: 50%; width: min(600px, calc(100vw - 48px)); padding-top: 12px; z-index: 40;
	transform: translate(-50%, 8px); opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .32s ease, transform .38s cubic-bezier(.25,.1,.25,1), visibility 0s linear .38s; }
.lbx-dd:hover > .lbx-dd-panel, .lbx-dd:focus-within > .lbx-dd-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
	transition: opacity .32s ease, transform .38s cubic-bezier(.25,.1,.25,1), visibility 0s; }
.lbx-dd-right > .e-con.lbx-dd-panel { left: auto; right: -12px; transform: translateY(8px); }
.lbx-dd-right:hover > .lbx-dd-panel, .lbx-dd-right:focus-within > .lbx-dd-panel { transform: none; }
.lbx-menu-list .elementor-icon-list-item a, .lbx-menu-list .elementor-icon-list-item > .elementor-icon-list-text { padding: 6px 0; }
.lbx-menu-list .elementor-icon-list-icon { display: none; }
.lbx-pg-col:hover .elementor-heading-title, .lbx-pg-col:focus-within .elementor-heading-title { color: var(--e-global-color-primary, #A95443); }
.lbx-pg-col:hover .lbx-pg-go .lbx-arr { transform: translateX(4px); }
.lbx-pg-col .elementor-widget-heading:nth-child(2) .elementor-heading-title { color: var(--e-global-color-accent, #5E5953) !important; }
@media (prefers-reduced-motion: reduce) { .e-con.lbx-dd-panel, .lbx-dd-label .elementor-heading-title a::after { transition: none !important; } }

/* --- 3. HEADER: tablet & mobile menu (Nested Accordion, class "lbx-m-dd") ----
   Opens as a full-width panel under the header bar instead of pushing the menu. */
.lbx-header-main { position: relative; }
.lbx-header-main .lbx-nav, .lbx-m-dd, .lbx-m-dd .e-n-accordion, .lbx-m-dd .e-n-accordion-item { position: static !important; }
.lbx-m-group .e-n-accordion-item { position: relative !important; }
.lbx-m-dd .e-n-accordion-item > .e-con { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; box-shadow: 0 18px 30px -20px rgba(74,47,42,.3); }
.lbx-m-dd .e-n-accordion-item-title { min-height: 44px; padding: 0; border: 0; background: none; }
.lbx-m-dd .e-n-accordion-item-title-icon, .lbx-m-group .e-n-accordion-item-title-icon { display: none; }
.lbx-m-dd .e-n-accordion-item-title-text::after, .lbx-m-group .e-n-accordion-item-title-text::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 6px; background: currentColor; vertical-align: middle;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.6 5 6.6 8 3.6' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.6 5 6.6 8 3.6' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.lbx-m-group .e-n-accordion-item-title-text { display: flex; width: 100%; justify-content: space-between; align-items: center; }
.lbx-m-dd .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-text::after, .lbx-m-group .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-text::after { transform: rotate(180deg); }
.lbx-m-group .e-n-accordion-item { border-bottom: 1px solid var(--e-global-color-lbxbord, #E4DDD3); }
.lbx-m-group, .lbx-m-group .e-n-accordion-item-title-header, .lbx-m-group .e-n-accordion-item-title-text { width: 100%; }
.lbx-m-group .e-n-accordion-item-title { min-height: 52px; width: 100%; justify-content: space-between; padding: 0; border: 0; background: none; }
.lbx-m-group .e-n-accordion-item > .e-con { position: static; box-shadow: none; }
.lbx-menu-list-m .elementor-icon-list-item a { padding: 9px 0; }

/* --- 4. HEADER: live favorites and cart (Shortcode widgets) ----------------- */
.lbx-sc-inline .elementor-shortcode { display: flex; align-items: center; }
.lbx-favh { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 44px; min-width: 24px; margin-right: 4px; color: var(--e-global-color-primary, #A95443); }
.lbx-favh svg { width: 16px; height: 24px; overflow: visible; }
.lbx-favh .lbx-heart-line, .lbx-fav .lbx-heart-line { fill: currentColor; }
.lbx-favh .lbx-heart-fill, .lbx-fav .lbx-heart-fill { fill: var(--e-global-color-primary, #A95443); }
.lbx-cart { height: 44px; display: flex; align-items: center; gap: 8px; text-decoration: none; }
.lbx-cart-total { color: var(--e-global-color-primary, #A95443); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; font-size: 15px; }
.lbx-cart-ico { position: relative; display: inline-flex; color: var(--e-global-color-primary, #A95443); }
.lbx-cart:hover .lbx-cart-total, .lbx-cart:hover .lbx-cart-ico { color: var(--e-global-color-lbxhovr, #934535); }
.lbx-count { position: absolute; background: var(--e-global-color-primary, #A95443); color: var(--e-global-color-lbxwhit, #FFFFFF); border-radius: 999px; font-size: 10.5px; font-weight: 600; line-height: 1; min-width: 17px; height: 17px;
	padding: 0 4px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--e-global-color-lbxivry, #F6F2EC); }
.lbx-cart .lbx-count { top: -7px; right: -9px; }
.lbx-favh .lbx-count { top: 1px; right: -15px; }

/* --- 5. Text links with an arrow (class "lbx-arrow-link") -------------------
   The arrow nudges right on hover, as in the approved design. */
.lbx-arr { display: inline-block; margin-left: 4px; transition: transform .35s cubic-bezier(.25,.1,.25,1); }
.lbx-arrow-link a:hover .lbx-arr, .lbx-card-link:hover .lbx-card-cta .lbx-arr { transform: translateX(4px); }
.lbx-card-link:hover .lbx-card-cta .elementor-heading-title { color: var(--e-global-color-primary, #A95443); }
.lbx-arrow-link .elementor-heading-title a { text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .lbx-arr { transition: none; } .lbx-arrow-link a:hover .lbx-arr, .lbx-card-link:hover .lbx-card-cta .lbx-arr { transform: none; } }

/* --- 6. "Find Your Little Extra" heading: the small logo heart after "Extra" -- */
.lbx-nowrap { white-space: nowrap; }
.elementor .lbx-title-heart, .lbx-title-heart { display: inline-block; max-width: none; height: 1.32em; width: auto; aspect-ratio: 160 / 236; margin-left: .18em; vertical-align: -.2em; }

/* --- 7. Cards that are links (class "lbx-card-link") ------------------------ */
a.lbx-card-link, a.lbx-card-link:hover { color: inherit; text-decoration: none; }

/* --- 8. Phone layout: one narrow column for the Find / Better Together cards (class "lbx-grid-narrow-mobile") */
@media (max-width: 640px) { .lbx-grid-narrow-mobile { max-width: 440px; margin-left: auto; margin-right: auto; width: 100%; } }

/* --- 9. "Little Extras We're Loving": filter pills and design cards ---------- */
.lbx-filter-tabs .e-n-tab-title { min-height: 46px; }
.lbx-design-card { height: 100%; }
.lbx-design-link { height: 100%; }
.lbx-art-frame { aspect-ratio: 1 / 1; overflow: hidden; }
.lbx-art-frame .lbx-art-img, .lbx-art-frame .lbx-art-img img { width: 100%; height: 100%; }
.lbx-art-img img { object-fit: contain; border-radius: 8px; }
.lbx-pill-row { margin-top: auto !important; }
.lbx-pill .elementor-heading-title { display: block; width: fit-content; margin: 0 auto; padding: 6px 11px; border-radius: 999px; background: var(--e-global-color-lbxclay, #9A5B49); border: 1px solid var(--e-global-color-lbxclay, #9A5B49); }
.lbx-fav { width: 40px; height: 40px; border-radius: 50%; background: rgba(246,242,236,.94); box-shadow: inset 0 0 0 1px var(--e-global-color-lbxbord, #E4DDD3); display: flex; align-items: center; justify-content: center; color: var(--e-global-color-lbxcoco, #4A2F2A); transition: color .3s ease; }
.lbx-fav svg { width: 17px; height: 25px; overflow: visible; }
.lbx-fav:hover, .lbx-fav.on { color: var(--e-global-color-primary, #A95443); }
.lbx-design-link:hover .lbx-art-frame { box-shadow: 0 18px 40px -28px rgba(43,41,38,.35); }
.lbx-design-link .lbx-art-img img { transition: transform 1.2s cubic-bezier(.25,.1,.25,1); }
.lbx-design-link:hover .lbx-art-img img { transform: scale(1.025); }
.lbx-design-link:hover .elementor-widget-heading h3 .elementor-heading-title, .lbx-design-link:hover h3.elementor-heading-title { color: var(--e-global-color-lbxclay, #9A5B49); }
@media (prefers-reduced-motion: reduce) { .lbx-design-link .lbx-art-img img { transition: none; } .lbx-design-link:hover .lbx-art-img img { transform: none; } }
/* Phones: the four cards scroll sideways (class "lbx-scroll-row-mobile") */
@media (max-width: 640px) {
	.e-con.lbx-scroll-row-mobile { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-bottom: 10px; margin: 0 -18px; padding-left: 18px; padding-right: 18px; scroll-padding-left: 18px; width: calc(100% + 36px); max-width: none; }
	.e-con.lbx-scroll-row-mobile > .e-con { flex: 0 0 72%; scroll-snap-align: start; }
}

/* --- 10. Buttons with the approved hover motion (class "lbx-btn-motion") -----
   Lift, soft shadow and one shimmer on hover; press-in on click. Off when the
   visitor prefers reduced motion. "lbx-btn-wide" = 320px button (full width up to 360px on tablet/phone). */
.lbx-btn-motion .elementor-button { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 56px;
	transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s cubic-bezier(.22,.61,.36,1), background-color .45s ease; }
.lbx-btn-wide .elementor-button { width: 320px; min-height: 58px; }
.lbx-btn-motion .elementor-button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	background: linear-gradient(105deg, rgba(255,244,232,0) 35%, rgba(255,244,232,.2) 50%, rgba(255,244,232,0) 65%); transform: translateX(-120%); }
@media (hover: hover) {
	.lbx-btn-motion .elementor-button:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 18px 30px -16px rgba(126,58,45,.6), 0 4px 10px -4px rgba(74,47,42,.25) !important; }
	.lbx-btn-motion .elementor-button:hover::after { animation: lbxShimmer 1.1s cubic-bezier(.4,0,.2,1) .05s 1 both; }
}
.lbx-btn-motion .elementor-button:active { transform: translateY(0) scale(.98); transition-duration: .12s; }
@keyframes lbxShimmer { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@media (max-width: 900px) { .lbx-btn-wide { width: 100%; } .lbx-btn-wide .elementor-button { width: 100%; max-width: 360px; } }
@media (max-width: 640px) { .lbx-btn-motion:not(.lbx-btn-wide) .elementor-button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .lbx-btn-motion .elementor-button { transition: none !important; } .lbx-btn-motion .elementor-button:hover, .lbx-btn-motion .elementor-button:active { transform: none; } .lbx-btn-motion .elementor-button:hover::after { animation: none !important; } }

/* --- 11. "Join the List": photo fills its side; MailPoet form styled to match */
.lbx-join-media .lbx-fill-img, .lbx-join-media .lbx-fill-img img { height: 100%; width: 100%; }
.lbx-join-media .lbx-fill-img img { object-fit: cover; display: block; }
@media (max-width: 900px) {
	.e-con.lbx-join-media { aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; }
	.lbx-join-media > .elementor-widget, .lbx-join-media .elementor-widget-container { height: 100%; }
}
.lbx-join-form .mailpoet_form { padding: 0 !important; margin: 6px 0 0 !important; }
.lbx-join-form .mailpoet_form form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.lbx-join-form .mailpoet_paragraph { margin: 0 !important; }
.lbx-join-form .mailpoet_paragraph:has(.mailpoet_text) { flex: 1 1 302px; }
.lbx-join-form input.mailpoet_text { box-sizing: border-box; width: 100% !important; min-height: 56px; padding: 0 20px !important; border-radius: 999px !important; border: 1px solid #D9CBBE !important;
	background: #FFFDF9 !important; font: inherit; font-size: 16px; color: var(--e-global-color-text, #2B2926); }
.lbx-join-form input.mailpoet_text:focus { outline: none; border-color: var(--e-global-color-primary, #A95443) !important; box-shadow: 0 0 0 4px rgba(169,84,67,.14); }
.lbx-join-form input.mailpoet_submit { min-height: 56px; padding: 0 30px !important; border-radius: 999px !important; border: 0 !important; background: var(--e-global-color-primary, #A95443) !important; color: var(--e-global-color-lbxwhit, #FFFFFF) !important;
	font: inherit; font-size: 16px; font-weight: 600; letter-spacing: .01em; cursor: pointer; transition: background-color .3s ease; }
.lbx-join-form input.mailpoet_submit:hover { background: var(--e-global-color-lbxhovr, #934535) !important; }
.lbx-join-form .mailpoet_validate_success { font-size: 15px; color: #3F6B4A; flex-basis: 100%; }
.lbx-join-form .mailpoet_validate_error { font-size: 14px; color: #9B2C1C; flex-basis: 100%; }
@media (max-width: 640px) { .lbx-join-form input.mailpoet_submit, .lbx-join-form .mailpoet_paragraph { width: 100%; } }
.lbx-admin-note { margin: 0; padding: 10px 14px; border: 1px dashed var(--e-global-color-primary, #A95443); border-radius: 10px; font-size: 14px; color: var(--e-global-color-lbxcoco, #4A2F2A); background: #FFFDF9; }

/* --- 12. Keyboard focus rings (accessibility) --------------------------------- */
.lbx-site-header a:focus-visible, .lbx-card-link:focus-visible, .lbx-fav:focus-visible, .lbx-btn-motion .elementor-button:focus-visible, .lbx-filter-tabs .e-n-tab-title:focus-visible { outline: 2px solid var(--e-global-color-text, #2B2926); outline-offset: 3px; }