/******* Do not edit this file ******* Simple Custom CSS and JS - by Silkypress.com Saved: Aug 09 2026 | 03:43:48 */ /* ========================================================== CUSTOM GUITAR ATELIER — PREMIUM FLATSOME HEADER WooCommerce / Flatsome Paste directly into a CSS field without wrapper tags. Custom CSS & JS plugin settings: - Linking type: External - Where on page: In the element - Where in site: In Frontend only ========================================================== */ :root { --cga-brown: #3a281f; --cga-gold: #c49a45; --cga-gold-light: #dfbd74; --cga-ivory: #f5f1ea; --cga-dark: #16120f; } /* ========================================================== SAFARI-SAFE TOLL-FREE LINK Prevents iPhone Safari's automatic phone-number styling from recoloring only the number inside Header HTML 1. ========================================================== */ #header .html_topbar_left a.cga-topbar-phone, #header .html_topbar_left a.cga-topbar-phone:link, #header .html_topbar_left a.cga-topbar-phone:visited, #header .html_topbar_left a[x-apple-data-detectors] { display: inline-flex; max-width: 100%; align-items: center; justify-content: center; gap: 0.28em; margin: 0; padding: 0; color: var(--cga-ivory, #f5f1ea) !important; -webkit-text-fill-color: var(--cga-ivory, #f5f1ea) !important; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(223, 189, 116, 0.22); font: inherit; letter-spacing: inherit; line-height: inherit; text-decoration: none !important; white-space: nowrap; cursor: pointer; touch-action: manipulation; } #header .html_topbar_left a.cga-topbar-phone > *, #header .html_topbar_left a[x-apple-data-detectors] > * { color: inherit !important; -webkit-text-fill-color: inherit !important; pointer-events: none; } #header .html_topbar_left .cga-topbar-phone__label { font-weight: 700; } #header .html_topbar_left .cga-topbar-phone__number { font-variant-numeric: tabular-nums; font-weight: 600; } #header .html_topbar_left a.cga-topbar-phone:focus-visible { outline: 2px solid var(--cga-gold-light); outline-offset: 3px; } @media screen and (max-width: 360px) { #header .html_topbar_left a.cga-topbar-phone { gap: 0.2em; font-size: 10px; } } /* ========================================================== DESKTOP HEADER AND MAIN MENU Flatsome switches to the desktop header at 850px. ========================================================== */ @media screen and (min-width: 850px) { /* ======================================================== PREMIUM DESKTOP TOP BAR Keeps the complete menu on one polished, scrollable row. ======================================================== */ #header .header-top { height: auto !important; min-height: 38px; background: linear-gradient( 135deg, #4a3329 0%, #2d1f19 100% ) !important; border-bottom: 1px solid rgba(196, 154, 69, 0.58); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.025), 0 3px 12px rgba(38, 25, 18, 0.10); } #header .header-top > .flex-row.container { display: flex; flex-wrap: nowrap; align-items: center; width: 100%; max-width: none; height: auto !important; min-height: 38px; padding: 0 15px; } #header .header-top .flex-col.hide-for-medium.flex-left { flex: 0 0 auto; min-width: 0; } #header .header-top .flex-col.hide-for-medium.flex-center { flex: 0 0 auto; min-width: 0; } #header .header-top .flex-col.hide-for-medium.flex-right { flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden; } #header .header-top .flex-col.hide-for-medium.flex-left .html_topbar_left { display: inline-flex; align-items: center; min-height: 28px; margin: 0 !important; padding: 0 12px; color: var(--cga-ivory) !important; background: rgba(196, 154, 69, 0.10); border: 1px solid rgba(223, 189, 116, 0.30); border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; line-height: 1; white-space: nowrap; } #header .header-top .top-bar-nav { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 3px; width: max-content; max-width: 100%; min-width: 0; min-height: 34px; margin: 0 0 0 auto; padding: 2px 0 2px 10px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scrollbar-color: rgba(223, 189, 116, 0.58) transparent; scrollbar-width: thin; } #header .header-top .top-bar-nav::-webkit-scrollbar { height: 3px; } #header .header-top .top-bar-nav::-webkit-scrollbar-track { background: transparent; } #header .header-top .top-bar-nav::-webkit-scrollbar-thumb { background: rgba(223, 189, 116, 0.52); border-radius: 999px; } #header .header-top .top-bar-nav > li { flex: 0 0 auto; margin: 0 !important; } #header .header-top .top-bar-nav > li > a.nav-top-link { display: inline-flex; align-items: center; min-height: 30px; padding: 0 6px !important; color: rgba(245, 241, 234, 0.86) !important; border: 1px solid transparent; border-radius: 999px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.012em; line-height: 1; text-transform: none; white-space: nowrap; transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease; } #header .header-top .top-bar-nav > li.current-menu-item > a.nav-top-link, #header .header-top .top-bar-nav > li.current_page_item > a.nav-top-link, #header .header-top .top-bar-nav > li > a.nav-top-link[aria-current="page"] { color: var(--cga-gold-light) !important; background: rgba(196, 154, 69, 0.12); border-color: rgba(223, 189, 116, 0.30); } #header .header-top .top-bar-nav > li > a.nav-top-link:focus-visible { outline: 2px solid var(--cga-gold-light); outline-offset: 1px; } /* ======================================================== PREMIUM DESKTOP HEADER SEARCH FORM Targets only the Search Form element in the main header. ======================================================== */ #header .header-main .header-nav-main > li.header-search-form { margin: 0 !important; padding: 0; } #header .header-main .header-nav-main > li.header-search-form form.searchform { margin: 0; } #header .header-main .header-nav-main > li.header-search-form form.searchform > .flex-row { position: relative; display: flex; align-items: center; width: 100%; min-height: 50px; background: linear-gradient( 135deg, #ffffff 0%, #f7f2ea 100% ); border: 1px solid rgba(196, 154, 69, 0.52); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -1px 0 rgba(58, 40, 31, 0.04), 0 7px 20px rgba(58, 40, 31, 0.10); transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } #header .header-main .header-nav-main > li.header-search-form input.search-field[type="search"] { display: block; box-sizing: border-box; width: 100%; height: 48px; min-height: 48px; margin: 0; padding: 0 60px 0 20px !important; color: var(--cga-brown) !important; caret-color: var(--cga-brown); background: transparent !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; font-family: inherit; font-size: 15px; font-weight: 500; letter-spacing: 0.01em; } #header .header-main .header-nav-main > li.header-search-form input.search-field[type="search"]::placeholder { color: rgba(58, 40, 31, 0.56); opacity: 1; } #header .header-main .header-nav-main > li.header-search-form form.searchform > .flex-row:focus-within { border-color: var(--cga-gold) !important; background: #ffffff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 0 0 3px rgba(196, 154, 69, 0.15), 0 10px 26px rgba(58, 40, 31, 0.14); } #header .header-main .header-nav-main > li.header-search-form input.search-field[type="search"]:focus { outline: none; color: #251912 !important; } #header .header-main .header-nav-main > li.header-search-form .ux-search-submit { display: flex; align-items: center; justify-content: center; width: 42px; min-width: 42px; height: 42px; min-height: 42px; margin: 0 !important; padding: 0 !important; color: #1b1209 !important; background: linear-gradient( 135deg, var(--cga-gold-light) 0%, var(--cga-gold) 100% ) !important; border: 1px solid rgba(134, 90, 34, 0.34) !important; border-radius: 50% !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40), 0 4px 12px rgba(58, 40, 31, 0.22); text-shadow: none; transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } #header .header-main .header-nav-main > li.header-search-form .ux-search-submit:focus-visible { outline: 2px solid var(--cga-brown); outline-offset: 2px; } /* ======================================================== PREMIUM DESKTOP ACCOUNT BUTTON Supports Flatsome's direct account link and the newer .header-button wrapper used by Login / Register. ======================================================== */ #header .header-main ul.header-nav-main.nav-right > li.account-item > .header-button { flex: 0 0 auto; margin: 0; } #header .header-main ul.header-nav-main.nav-right > li.account-item > a.nav-top-link, #header .header-main ul.header-nav-main.nav-right > li.account-item > .header-button > a.nav-top-link { display: inline-flex !important; box-sizing: border-box; align-items: center; justify-content: center; flex: 0 0 auto; width: auto !important; min-width: 146px; max-width: none !important; min-height: 44px; height: auto !important; margin: 0 !important; padding: 0 clamp(10px, 1vw, 18px) !important; color: var(--cga-brown) !important; -webkit-text-fill-color: var(--cga-brown) !important; background: linear-gradient( 135deg, #ffffff 0%, #f7f2ea 100% ) !important; border: 1px solid rgba(196, 154, 69, 0.52) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 6px 18px rgba(58, 40, 31, 0.10); font-size: 14px !important; font-weight: 700; letter-spacing: 0.055em; line-height: 1; text-align: center; text-shadow: none; text-transform: uppercase; white-space: nowrap; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } #header .header-main ul.header-nav-main.nav-right > li.account-item > a.nav-top-link > span, #header .header-main ul.header-nav-main.nav-right > li.account-item > .header-button > a.nav-top-link > span { display: block; min-width: 0; overflow: hidden; color: inherit !important; -webkit-text-fill-color: inherit !important; font: inherit; letter-spacing: inherit; line-height: inherit; text-overflow: ellipsis; white-space: nowrap; } #header .header-main ul.header-nav-main.nav-right > li.account-item > a.nav-top-link:focus-visible, #header .header-main ul.header-nav-main.nav-right > li.account-item > .header-button > a.nav-top-link:focus-visible { outline: 2px solid var(--cga-brown); outline-offset: 3px; } #header .header-main ul.header-nav-main.nav-right > li.account-item.current-dropdown > a.nav-top-link, #header .header-main ul.header-nav-main.nav-right > li.account-item.current-dropdown > .header-button > a.nav-top-link, #header .header-main ul.header-nav-main.nav-right > li.account-item > a.nav-top-link[aria-expanded="true"], #header .header-main ul.header-nav-main.nav-right > li.account-item > .header-button > a.nav-top-link[aria-expanded="true"], body.woocommerce-account #header .header-main ul.header-nav-main.nav-right > li.account-item > a.nav-top-link, body.woocommerce-account #header .header-main ul.header-nav-main.nav-right > li.account-item > .header-button > a.nav-top-link { color: #1b1209 !important; background: linear-gradient( 135deg, var(--cga-gold-light) 0%, var(--cga-gold) 100% ) !important; border-color: rgba(134, 90, 34, 0.48) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40), 0 7px 20px rgba(58, 40, 31, 0.18); } /* ======================================================== PREMIUM DESKTOP CART Preserves the WooCommerce total and mini-cart dropdown. ======================================================== */ #header .header-main ul.header-nav-main.nav-right > li.cart-item.has-icon > a.header-cart-link.nav-top-link { display: inline-flex; box-sizing: border-box; align-items: center; justify-content: center; gap: 10px; width: auto; min-height: 50px; padding: 0 6px 0 16px !important; color: var(--cga-brown) !important; background: linear-gradient( 135deg, #ffffff 0%, #f7f2ea 100% ) !important; border: 1px solid rgba(196, 154, 69, 0.52); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 6px 18px rgba(58, 40, 31, 0.10); font-size: 14px !important; font-weight: 700; letter-spacing: 0.035em; line-height: 1; text-shadow: none; text-transform: uppercase; white-space: nowrap; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } #header .header-main ul.header-nav-main.nav-right > li.cart-item.has-icon > a.header-cart-link.nav-top-link > .header-cart-title, #header .header-main ul.header-nav-main.nav-right > li.cart-item.has-icon > a.header-cart-link.nav-top-link .cart-price { color: inherit !important; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: 1; white-space: nowrap; } #header .header-main ul.header-nav-main.nav-right > li.cart-item.has-icon > a.header-cart-link.nav-top-link > .cart-icon.image-icon { display: inline-flex !important; flex: 0 0 42px; align-items: center; justify-content: center; width: 42px; height: 42px; margin: 0 !important; overflow: visible; color: #1b1209 !important; background: linear-gradient( 135deg, var(--cga-gold-light) 0%, var(--cga-gold) 100% ); border: 1px solid rgba(134, 90, 34, 0.38); border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46), 0 4px 12px rgba(58, 40, 31, 0.18); } #header .header-main ul.header-nav-main.nav-right > li.cart-item.has-icon > a.header-cart-link.nav-top-link > .cart-icon.image-icon > strong { position: relative; display: inline-flex; box-sizing: border-box; align-items: center; justify-content: center; width: 25px; min-width: 25px; height: 23px; margin: 4px 0 0; padding: 0 2px; color: #1b1209 !important; background: rgba(255, 255, 255, 0.16); border: 2px solid #2f2018; border-radius: 3px 3px 5px 5px; font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; } #header .header-main ul.header-nav-main.nav-right > li.cart-item.has-icon > a.header-cart-link.nav-top-link > .cart-icon.image-icon > strong::after { content: ""; position: absolute; top: -8px; right: auto; bottom: auto; left: 50%; display: block; box-sizing: border-box; width: 12px; height: 8px; background: transparent; border: 2px solid #2f2018; border-bottom: 0; border-radius: 99px 99px 0 0; transform: translateX(-50%); } #header .header-main ul.header-nav-main.nav-right > li.cart-item.has-icon > a.header-cart-link.nav-top-link:focus-visible { outline: 2px solid var(--cga-brown); outline-offset: 3px; } #header .header-main ul.header-nav-main.nav-right > li.cart-item.has-icon.current-dropdown > a.header-cart-link.nav-top-link, #header .header-main ul.header-nav-main.nav-right > li.cart-item.has-icon > a.header-cart-link.nav-top-link[aria-expanded="true"] { color: var(--cga-gold-light) !important; background: linear-gradient( 135deg, #3f2b22 0%, #1b120e 100% ) !important; border-color: rgba(196, 154, 69, 0.78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 22px rgba(38, 25, 18, 0.20); } /* Main navigation bar */ #wide-nav.header-bottom { background: linear-gradient( 180deg, #17120f 0%, #090706 100% ) !important; border-top: 1px solid rgba(196, 154, 69, 0.45); border-bottom: 1px solid rgba(196, 154, 69, 0.72); box-shadow: 0 7px 20px rgba(36, 27, 23, 0.18); } #wide-nav .header-bottom-nav { min-height: 54px; align-items: stretch; } #wide-nav .header-bottom-nav > li { margin: 0 !important; } /* Main menu links */ #wide-nav .header-bottom-nav > li > a { display: flex; align-items: center; min-height: 54px; padding: 0 12px !important; color: var(--cga-ivory) !important; font-size: clamp(11px, 0.68vw, 13px) !important; font-weight: 600 !important; letter-spacing: 0.035em; line-height: 1.2; white-space: nowrap; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } /* Gold separators */ #wide-nav .header-bottom-nav.nav-divided > li + li > a::after { border-color: rgba(223, 189, 116, 0.30) !important; opacity: 0.8; } /* Current and parent menu items */ #wide-nav .header-bottom-nav > li.active > a, #wide-nav .header-bottom-nav > li.current-menu-item > a, #wide-nav .header-bottom-nav > li.current-menu-ancestor > a { color: var(--cga-gold-light) !important; background: linear-gradient( 180deg, rgba(139, 101, 72, 0.24), rgba(196, 154, 69, 0.08) ) !important; box-shadow: inset 0 -2px 0 var(--cga-gold); } /* Dropdown arrows */ #wide-nav .header-bottom-nav > li > a .icon-angle-down { margin-left: 5px; color: var(--cga-gold) !important; opacity: 0.95; } /* Dropdown menus */ #wide-nav .nav-dropdown { min-width: 245px; margin-top: 0 !important; padding: 8px 0 !important; background: var(--cga-dark) !important; border: 1px solid rgba(196, 154, 69, 0.45) !important; border-top: 3px solid var(--cga-gold) !important; border-radius: 0 0 8px 8px; box-shadow: 0 18px 38px rgba(0, 0, 0, 0.30) !important; } /* Dropdown links */ #wide-nav .nav-dropdown > li > a, #wide-nav .nav-dropdown .nav-column > li > a { padding: 10px 18px !important; color: #eee7dd !important; font-size: 12.5px !important; font-weight: 500; letter-spacing: 0.02em; border-bottom: 1px solid rgba(223, 189, 116, 0.12) !important; transition: color 0.18s ease, background-color 0.18s ease, padding-left 0.18s ease; } } /* Desktop hover styles for devices with a precise pointer */ @media screen and (min-width: 850px) and (hover: hover) and (pointer: fine) { #header .header-top .top-bar-nav > li > a.nav-top-link:hover { color: var(--cga-gold-light) !important; background: rgba(196, 154, 69, 0.12); border-color: rgba(223, 189, 116, 0.30); } #header .header-main .header-nav-main > li.header-search-form form.searchform > .flex-row:hover { border-color: rgba(196, 154, 69, 0.78) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 9px 24px rgba(58, 40, 31, 0.13); } #header .header-main .header-nav-main > li.header-search-form .ux-search-submit:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46), 0 6px 16px rgba(58, 40, 31, 0.28); } #header .header-main ul.header-nav-main.nav-right > li.account-item a.nav-top-link:hover { color: #1b1209 !important; background: linear-gradient( 135deg, var(--cga-gold-light) 0%, var(--cga-gold) 100% ) !important; border-color: rgba(134, 90, 34, 0.48); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44), 0 8px 22px rgba(58, 40, 31, 0.18); filter: brightness(1.025); } #header .header-main ul.header-nav-main.nav-right > li.cart-item.has-icon:not(.current-dropdown) > a.header-cart-link.nav-top-link:not([aria-expanded="true"]):hover { color: var(--cga-gold-light) !important; background: linear-gradient( 135deg, #3f2b22 0%, #1b120e 100% ) !important; border-color: rgba(196, 154, 69, 0.78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 22px rgba(38, 25, 18, 0.20); } #wide-nav .header-bottom-nav > li:hover > a { color: var(--cga-gold-light) !important; background: linear-gradient( 180deg, rgba(139, 101, 72, 0.24), rgba(196, 154, 69, 0.08) ) !important; box-shadow: inset 0 -2px 0 var(--cga-gold); } #wide-nav .nav-dropdown > li > a:hover, #wide-nav .nav-dropdown .nav-column > li > a:hover { padding-left: 22px !important; color: #f2cd7d !important; background: rgba(196, 154, 69, 0.12) !important; } } /* ========================================================== LOGIN / REGISTER LIGHTBOX Scoped to Flatsome's existing WooCommerce account popup. Appearance only: forms, nonces, validation, and submission behavior remain controlled by WooCommerce. ========================================================== */ #login-form-popup.lightbox-content { width: min(860px, calc(100vw - 32px)) !important; max-width: 860px !important; padding: 0 !important; overflow: hidden; color: #3a281f; background: radial-gradient( circle at 94% 4%, rgba(196, 154, 69, 0.12), transparent 31% ), linear-gradient(135deg, #fffdf9 0%, #f7f0e6 100%); border: 1px solid rgba(196, 154, 69, 0.48); border-radius: 18px; box-shadow: 0 28px 70px rgba(24, 16, 12, 0.32), 0 8px 24px rgba(24, 16, 12, 0.16); } #login-form-popup .account-container.lightbox-inner { padding: 0; background: transparent; } #login-form-popup #customer_login { margin: 0; } #login-form-popup #customer_login > .col { padding: 30px 30px 26px; } #login-form-popup #customer_login > .col + .col { border-left: 1px solid rgba(196, 154, 69, 0.24); } #login-form-popup h2, #login-form-popup h2.uppercase.h3 { margin: 0 0 20px; color: #302119; font-size: 20px; font-weight: 800; letter-spacing: 0.075em; line-height: 1.25; text-transform: uppercase; } #login-form-popup h2::after { content: ""; display: block; width: 38px; height: 2px; margin-top: 10px; background: linear-gradient( 90deg, var(--cga-gold), rgba(196, 154, 69, 0.10) ); } #login-form-popup form { margin: 0; } #login-form-popup .form-row { margin: 0 0 14px; } #login-form-popup label { display: inline-block; margin-bottom: 6px; color: #4a352b; font-size: 12.5px; font-weight: 700; letter-spacing: 0.015em; line-height: 1.35; } #login-form-popup .required { color: #a84b35; } #login-form-popup input[type="text"], #login-form-popup input[type="email"], #login-form-popup input[type="password"] { box-sizing: border-box; width: 100%; height: 46px; min-height: 46px; margin: 0; padding: 0 13px; color: #2f211a; caret-color: var(--cga-gold); background: rgba(255, 255, 255, 0.90); border: 1px solid rgba(128, 101, 81, 0.34); border-radius: 10px; box-shadow: inset 0 1px 2px rgba(48, 33, 25, 0.05), 0 1px 0 rgba(255, 255, 255, 0.75); font-family: inherit; font-size: 15px; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } #login-form-popup .password-input { display: block; width: 100%; } #login-form-popup input[type="text"]:focus, #login-form-popup input[type="email"]:focus, #login-form-popup input[type="password"]:focus { outline: none; background: #ffffff; border-color: var(--cga-gold); box-shadow: 0 0 0 3px rgba(196, 154, 69, 0.15), inset 0 1px 2px rgba(48, 33, 25, 0.04); } #login-form-popup .woocommerce-invalid input { border-color: #a84b35; box-shadow: 0 0 0 3px rgba(168, 75, 53, 0.11); } #login-form-popup .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 0; cursor: pointer; } #login-form-popup .woocommerce-form-login__rememberme input { width: 16px; height: 16px; margin: 0; accent-color: var(--cga-gold); } #login-form-popup .woocommerce-form-login__rememberme span { color: #5f4b40; font-size: 12px; font-weight: 600; } #login-form-popup .woocommerce-button, #login-form-popup button[type="submit"] { display: inline-flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; margin: 12px 0 0; padding: 0 20px; color: #1b1209 !important; background: linear-gradient( 135deg, var(--cga-gold-light) 0%, var(--cga-gold) 100% ) !important; border: 1px solid rgba(134, 90, 34, 0.48) !important; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 7px 18px rgba(58, 40, 31, 0.17); font-size: 12px; font-weight: 800; letter-spacing: 0.075em; line-height: 1.2; text-align: center; text-transform: uppercase; text-shadow: none; transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } #login-form-popup .lost_password { margin: 13px 0 0; text-align: center; } #login-form-popup a { color: #95631d; font-weight: 650; text-decoration: none; } #login-form-popup .woocommerce-privacy-policy-text { margin-top: 4px; color: #716056; font-size: 10.75px; line-height: 1.5; } #login-form-popup .woocommerce-privacy-policy-text p { margin-bottom: 0; } #login-form-popup .mfp-close { color: #3a281f; opacity: 0.72; } @media (hover: hover) and (pointer: fine) { #login-form-popup .woocommerce-button:hover, #login-form-popup button[type="submit"]:hover { color: #120d08 !important; filter: brightness(1.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48), 0 10px 24px rgba(58, 40, 31, 0.23); transform: translateY(-2px); } #login-form-popup a:hover { color: #6f4612; text-decoration: underline; text-underline-offset: 2px; } } #login-form-popup a:focus-visible, #login-form-popup input:focus-visible, #login-form-popup button:focus-visible { outline: 2px solid var(--cga-gold); outline-offset: 2px; } @media screen and (max-width: 849px) { #login-form-popup.lightbox-content { width: min(720px, calc(100vw - 20px)) !important; max-height: calc(100vh - 20px); max-height: calc(100svh - 20px); overflow-x: hidden; overflow-y: auto; border-radius: 14px; } #login-form-popup #customer_login { display: block; } #login-form-popup #customer_login > .col { width: 100%; max-width: none; padding: 22px 22px 20px; border-left: 0; } #login-form-popup #customer_login > .col + .col { border-top: 1px solid rgba(196, 154, 69, 0.24); } } @media screen and (max-width: 549px) { #login-form-popup #customer_login > .col { padding: 19px 16px 17px; } #login-form-popup h2, #login-form-popup h2.uppercase.h3 { margin-bottom: 15px; font-size: 17px; } #login-form-popup input[type="text"], #login-form-popup input[type="email"], #login-form-popup input[type="password"] { height: 44px; min-height: 44px; font-size: 16px; } } /* ========================================================== MOBILE / TABLET MY ACCOUNT — LOGIN AND REGISTRATION Styles the standalone WooCommerce /my-account/ page shown to signed-out visitors. The logged-in account dashboard, checkout forms, and Flatsome popup remain unaffected. ========================================================== */ @media screen and (max-width: 849px) { body.woocommerce-account:not(.logged-in) .my-account-header.page-title { color: var(--cga-ivory); background: radial-gradient( circle at 88% 8%, rgba(223, 189, 116, 0.16), transparent 36% ), linear-gradient(135deg, #3a281f 0%, #1b120e 100%) !important; border-top: 1px solid rgba(196, 154, 69, 0.42); border-bottom: 1px solid rgba(196, 154, 69, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 8px 22px rgba(38, 25, 18, 0.13); } body.woocommerce-account:not(.logged-in) .my-account-header .page-title-inner { min-height: 88px; justify-content: center; padding: 20px 16px !important; } body.woocommerce-account:not(.logged-in) .my-account-header h1 { margin: 0; color: var(--cga-ivory) !important; font-size: clamp(25px, 7vw, 32px) !important; font-weight: 800; letter-spacing: 0.08em; line-height: 1.2; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32); } body.woocommerce-account:not(.logged-in) .my-account-header h1::after { content: ""; display: block; width: 42px; height: 2px; margin: 11px auto 0; background: linear-gradient( 90deg, transparent, var(--cga-gold-light), transparent ); } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account { box-sizing: border-box; padding: 26px 12px calc(118px + env(safe-area-inset-bottom)) !important; background: radial-gradient( circle at 100% 0%, rgba(196, 154, 69, 0.08), transparent 28% ), linear-gradient(180deg, #faf7f2 0%, #ffffff 48%); } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account > .container, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account .woocommerce, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account .account-container { box-sizing: border-box; width: 100%; max-width: 760px; margin-right: auto; margin-left: auto; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account > .container { padding-right: 0 !important; padding-left: 0 !important; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account .account-container.lightbox-inner { padding: 0; background: transparent; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 20px; box-sizing: border-box; width: 100%; margin: 0 !important; padding: 0; border: 0; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login > .col, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login > .col-1, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login > .col-2, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login > .u-column1, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login > .u-column2 { box-sizing: border-box; width: 100% !important; min-width: 0; max-width: none !important; flex-basis: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .account-login-inner, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .account-register-inner { position: relative; box-sizing: border-box; width: 100%; padding: 23px 20px 21px; overflow: hidden; background: radial-gradient( circle at 100% 0%, rgba(196, 154, 69, 0.10), transparent 34% ), linear-gradient(145deg, #fffdf9 0%, #f8f1e8 100%); border: 1px solid rgba(196, 154, 69, 0.40); border-top: 3px solid var(--cga-gold); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 12px 28px rgba(58, 40, 31, 0.10); scroll-margin-top: 18px; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login h2, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login h2.uppercase.h3 { margin: 0 0 20px; color: #302119; font-size: clamp(21px, 5.8vw, 25px); font-weight: 800; letter-spacing: 0.075em; line-height: 1.25; text-transform: uppercase; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login h2::after { content: ""; display: block; width: 38px; height: 2px; margin-top: 10px; background: linear-gradient( 90deg, var(--cga-gold), rgba(196, 154, 69, 0.08) ); } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login form { margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .form-row { margin: 0 0 15px; padding: 0; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login label { display: inline-block; margin: 0 0 7px; color: #49342a; font-size: 13.5px; font-weight: 700; letter-spacing: 0.012em; line-height: 1.4; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .required { color: #9b4b34; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login input[type="text"], body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login input[type="email"], body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login input[type="password"] { display: block; box-sizing: border-box; width: 100%; height: 50px; min-height: 50px; margin: 0 !important; padding: 0 14px !important; appearance: none; -webkit-appearance: none; color: #2f211a !important; -webkit-text-fill-color: #2f211a; caret-color: var(--cga-gold); background: rgba(255, 255, 255, 0.94) !important; border: 1px solid rgba(111, 83, 65, 0.34) !important; border-radius: 11px !important; box-shadow: inset 0 1px 2px rgba(48, 33, 25, 0.055), 0 1px 0 rgba(255, 255, 255, 0.76) !important; font-family: inherit; font-size: 16px !important; font-weight: 500; line-height: normal; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login input[type="text"]:focus, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login input[type="email"]:focus, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login input[type="password"]:focus { outline: none; background: #ffffff !important; border-color: var(--cga-gold) !important; box-shadow: 0 0 0 3px rgba(196, 154, 69, 0.17), inset 0 1px 2px rgba(48, 33, 25, 0.04) !important; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-invalid input.input-text { border-color: #a64b38 !important; box-shadow: 0 0 0 3px rgba(166, 75, 56, 0.12) !important; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login input:-webkit-autofill, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login input:-webkit-autofill:hover, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login input:-webkit-autofill:focus { -webkit-text-fill-color: #2f211a !important; box-shadow: 0 0 0 1000px #ffffff inset !important; transition: background-color 9999s ease-out 0s; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .password-input { position: relative; display: block; width: 100%; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .password-input input { padding-right: 54px !important; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .show-password-input { position: absolute !important; top: 50% !important; right: 3px !important; display: inline-flex; width: 44px; min-width: 44px; height: 44px; min-height: 44px; align-items: center; justify-content: center; margin: 0 !important; padding: 0 !important; color: #49342a !important; background: transparent !important; border: 0 !important; border-radius: 9px !important; box-shadow: none !important; transform: translateY(-50%); } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .show-password-input:focus-visible { outline: 2px solid var(--cga-gold); outline-offset: -3px; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-form-login__rememberme { display: inline-flex !important; min-height: 44px; align-items: center; gap: 9px; margin: 0 !important; cursor: pointer; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-form-login__rememberme input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--cga-gold); } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-form-login__rememberme span { color: #49342a; font-size: 14px; font-weight: 650; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-form-login__submit, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-form-register__submit { display: inline-flex !important; box-sizing: border-box; width: 100%; min-height: 50px; float: none !important; align-items: center; justify-content: center; margin: 10px 0 0 !important; padding: 0 20px !important; appearance: none; -webkit-appearance: none; color: #1b1209 !important; -webkit-text-fill-color: #1b1209 !important; background: linear-gradient( 135deg, var(--cga-gold-light) 0%, var(--cga-gold) 100% ) !important; border: 1px solid rgba(134, 90, 34, 0.50) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44), 0 8px 20px rgba(58, 40, 31, 0.18); font-family: inherit; font-size: 13px !important; font-weight: 800; letter-spacing: 0.075em; line-height: 1.2; text-align: center; text-shadow: none; text-transform: uppercase; transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-form-login__submit:active, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-form-register__submit:active { filter: brightness(0.96); transform: translateY(1px); } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-form-login__submit:focus-visible, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-form-register__submit:focus-visible { outline: 2px solid #3a281f; outline-offset: 3px; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .lost_password { margin: 13px 0 0; text-align: center; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login a { color: #825416; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login a:focus-visible { outline: 2px solid var(--cga-gold); outline-offset: 3px; border-radius: 3px; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-privacy-policy-text { margin: 4px 0 16px; color: #66544a; font-size: 12.5px; line-height: 1.58; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-privacy-policy-text p { margin: 0; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-password-strength { box-sizing: border-box; margin-top: 8px; padding: 7px 9px; border-radius: 8px; font-size: 12px; line-height: 1.35; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account .woocommerce-notices-wrapper > ul, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account .woocommerce-notices-wrapper > div { box-sizing: border-box; max-width: 760px; margin: 0 auto 18px !important; padding: 13px 15px !important; color: #3a281f; background: #fffaf3; border: 1px solid rgba(196, 154, 69, 0.38); border-left: 4px solid var(--cga-gold); border-radius: 10px; box-shadow: 0 7px 18px rgba(58, 40, 31, 0.08); font-size: 13px; line-height: 1.5; } } @media screen and (max-width: 479px) { body.woocommerce-account:not(.logged-in) .page-wrapper.my-account { padding-right: 10px !important; padding-left: 10px !important; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login { gap: 16px; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .account-login-inner, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .account-register-inner { padding: 20px 16px 18px; border-radius: 14px; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login h2, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login h2.uppercase.h3 { margin-bottom: 17px; font-size: 21px; } } /* ========================================================== DESKTOP MY ACCOUNT — LOGIN AND REGISTRATION Two balanced cards for the standalone guest account page. ========================================================== */ @media screen and (min-width: 850px) { body.woocommerce-account:not(.logged-in) .my-account-header.page-title { color: var(--cga-ivory); background: radial-gradient( circle at 88% 8%, rgba(223, 189, 116, 0.17), transparent 34% ), linear-gradient(135deg, #3a281f 0%, #1b120e 100%) !important; border-top: 1px solid rgba(196, 154, 69, 0.42); border-bottom: 1px solid rgba(196, 154, 69, 0.76); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 9px 24px rgba(38, 25, 18, 0.14); } body.woocommerce-account:not(.logged-in) .my-account-header .page-title-inner { min-height: 96px; justify-content: center; padding: 20px 24px !important; } body.woocommerce-account:not(.logged-in) .my-account-header h1 { margin: 0; color: var(--cga-ivory) !important; font-size: clamp(32px, 2.15vw, 39px) !important; font-weight: 800; letter-spacing: 0.09em; line-height: 1.15; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.34); } body.woocommerce-account:not(.logged-in) .my-account-header h1::after { content: ""; display: block; width: 48px; height: 2px; margin: 13px auto 0; background: linear-gradient( 90deg, transparent, var(--cga-gold-light), transparent ); } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account { box-sizing: border-box; padding: clamp(38px, 4vw, 58px) 24px 104px !important; background: radial-gradient( circle at 100% 0%, rgba(196, 154, 69, 0.085), transparent 29% ), linear-gradient(180deg, #faf7f2 0%, #ffffff 55%); } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account > .container, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account .woocommerce, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account .account-container { box-sizing: border-box; width: 100%; max-width: 1240px; margin-right: auto; margin-left: auto; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account > .container { padding-right: 0 !important; padding-left: 0 !important; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account .account-container.lightbox-inner { padding: 0; background: transparent; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: clamp(22px, 2.2vw, 34px); box-sizing: border-box; width: 100%; margin: 0 !important; padding: 0; border: 0; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login > .col, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login > .col-1, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login > .col-2, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login > .u-column1, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login > .u-column2 { display: flex; box-sizing: border-box; width: auto !important; min-width: 0; max-width: none !important; height: 100%; flex-basis: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .account-login-inner, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .account-register-inner { position: relative; display: flex; box-sizing: border-box; width: 100%; min-width: 0; height: 100%; flex: 1 1 auto; flex-direction: column; padding: clamp(29px, 2.4vw, 39px); overflow: hidden; color: #3a281f; background: radial-gradient( circle at 100% 0%, rgba(196, 154, 69, 0.12), transparent 34% ), linear-gradient(145deg, #fffdf9 0%, #f8f1e8 100%); border: 1px solid rgba(196, 154, 69, 0.40); border-top: 3px solid var(--cga-gold); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 18px 42px rgba(58, 40, 31, 0.11), 0 4px 12px rgba(58, 40, 31, 0.055); } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login h2, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login h2.uppercase.h3 { margin: 0 0 24px; color: #302119; font-size: clamp(24px, 1.65vw, 28px); font-weight: 800; letter-spacing: 0.075em; line-height: 1.2; text-transform: uppercase; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login h2::after { content: ""; display: block; width: 42px; height: 2px; margin-top: 11px; background: linear-gradient( 90deg, var(--cga-gold), rgba(196, 154, 69, 0.08) ); } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login form { margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .form-row { width: 100%; margin: 0 0 17px; padding: 0; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login label { display: inline-block; margin: 0 0 7px; color: #49342a; font-size: 14px; font-weight: 700; letter-spacing: 0.012em; line-height: 1.4; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .required { color: #9b4b34; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login input[type="text"], body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login input[type="email"], body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login input[type="password"] { display: block; box-sizing: border-box; width: 100%; height: 52px; min-height: 52px; margin: 0 !important; padding: 0 15px !important; appearance: none; -webkit-appearance: none; color: #2f211a !important; -webkit-text-fill-color: #2f211a; caret-color: var(--cga-gold); background: rgba(255, 255, 255, 0.95) !important; border: 1px solid rgba(111, 83, 65, 0.34) !important; border-radius: 11px !important; box-shadow: inset 0 1px 2px rgba(48, 33, 25, 0.05), 0 1px 0 rgba(255, 255, 255, 0.78) !important; font-family: inherit; font-size: 16px !important; font-weight: 500; line-height: normal; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login input[type="text"]:focus, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login input[type="email"]:focus, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login input[type="password"]:focus { outline: none; background: #ffffff !important; border-color: var(--cga-gold) !important; box-shadow: 0 0 0 3px rgba(196, 154, 69, 0.17), inset 0 1px 2px rgba(48, 33, 25, 0.04) !important; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-invalid input.input-text { border-color: #a64b38 !important; box-shadow: 0 0 0 3px rgba(166, 75, 56, 0.12) !important; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login input:-webkit-autofill, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login input:-webkit-autofill:hover, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login input:-webkit-autofill:focus { -webkit-text-fill-color: #2f211a !important; box-shadow: 0 0 0 1000px #ffffff inset !important; transition: background-color 9999s ease-out 0s; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .password-input { position: relative; display: block; width: 100%; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .password-input input { padding-right: 56px !important; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .show-password-input { position: absolute !important; top: 50% !important; right: 4px !important; display: inline-flex; width: 44px; min-width: 44px; height: 44px; min-height: 44px; align-items: center; justify-content: center; margin: 0 !important; padding: 0 !important; color: #49342a !important; background: transparent !important; border: 0 !important; border-radius: 9px !important; box-shadow: none !important; transform: translateY(-50%); } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .show-password-input:focus-visible { outline: 2px solid var(--cga-gold); outline-offset: -3px; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-form-login__rememberme { display: inline-flex !important; min-height: 44px; align-items: center; gap: 9px; margin: 0 !important; cursor: pointer; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-form-login__rememberme input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--cga-gold); } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-form-login__rememberme span { color: #49342a; font-size: 14px; font-weight: 650; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-form-login__submit, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-form-register__submit { display: inline-flex !important; box-sizing: border-box; width: 100%; min-height: 52px; float: none !important; align-items: center; justify-content: center; margin: 11px 0 0 !important; padding: 0 22px !important; appearance: none; -webkit-appearance: none; color: #1b1209 !important; -webkit-text-fill-color: #1b1209 !important; background: linear-gradient( 135deg, var(--cga-gold-light) 0%, var(--cga-gold) 100% ) !important; border: 1px solid rgba(134, 90, 34, 0.50) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46), 0 9px 22px rgba(58, 40, 31, 0.19); font-family: inherit; font-size: 13px !important; font-weight: 800; letter-spacing: 0.08em; line-height: 1.2; text-align: center; text-shadow: none; text-transform: uppercase; transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-form-login__submit:focus-visible, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-form-register__submit:focus-visible { outline: 2px solid #3a281f; outline-offset: 3px; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-form-login__submit:active, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-form-register__submit:active { filter: brightness(0.96); transform: translateY(1px); } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .lost_password { margin: 15px 0 0; text-align: center; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login a { color: #825416; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login a:focus-visible { outline: 2px solid var(--cga-gold); outline-offset: 3px; border-radius: 3px; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-privacy-policy-text { margin: 5px 0 17px; color: #66544a; font-size: 13px; line-height: 1.6; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-privacy-policy-text p { margin: 0; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-password-strength { box-sizing: border-box; margin-top: 8px; padding: 7px 9px; border-radius: 8px; font-size: 12px; line-height: 1.35; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account .woocommerce-notices-wrapper > ul, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account .woocommerce-notices-wrapper > div { box-sizing: border-box; max-width: 1240px; margin: 0 auto 20px !important; padding: 14px 16px !important; color: #3a281f; background: #fffaf3; border: 1px solid rgba(196, 154, 69, 0.38); border-left: 4px solid var(--cga-gold); border-radius: 10px; box-shadow: 0 7px 18px rgba(58, 40, 31, 0.08); font-size: 13px; line-height: 1.5; } } @media screen and (min-width: 850px) and (hover: hover) and (pointer: fine) { body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-form-login__submit:hover, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .woocommerce-form-register__submit:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.50), 0 12px 27px rgba(58, 40, 31, 0.24); transform: translateY(-2px); } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login a:hover { color: #633e0e; } } @media screen and (min-width: 850px) and (max-width: 1099px) { body.woocommerce-account:not(.logged-in) .page-wrapper.my-account { padding-right: 18px !important; padding-left: 18px !important; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login { gap: 20px; } body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .account-login-inner, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login .account-register-inner { padding: 26px 24px; } } /* Keep the gold focus ring visible on Safari autofilled fields. */ body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login input:-webkit-autofill:focus { border-color: var(--cga-gold) !important; -webkit-text-fill-color: #2f211a !important; box-shadow: 0 0 0 3px rgba(196, 154, 69, 0.17), 0 0 0 1000px #ffffff inset !important; } @media (prefers-reduced-motion: reduce) { body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login input, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login button, body.woocommerce-account:not(.logged-in) .page-wrapper.my-account #customer_login a { transition: none !important; } } /* ========================================================== MY ACCOUNT — PREMIUM GOOGLE LOGIN Targets only the Google provider button in the signed-out My Account title band. Login, Register and popup controls remain unchanged. ========================================================== */ body.woocommerce-account:not(.logged-in) .my-account-header.page-title .page-title-inner { min-height: 112px; } body.woocommerce-account:not(.logged-in) .my-account-header.page-title .social-login { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; box-sizing: border-box; width: min(100%, 430px); margin: 0 auto !important; padding: 9px !important; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.085), rgba(223, 189, 116, 0.045) ); border: 1px solid rgba(223, 189, 116, 0.30); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 26px rgba(0, 0, 0, 0.18); } body.woocommerce-account:not(.logged-in) .my-account-header.page-title .social-login::before, body.woocommerce-account:not(.logged-in) .my-account-header.page-title .social-login::after { content: none; display: none; } body.woocommerce-account:not(.logged-in) .my-account-header.page-title .social-login > a.button[data-provider="google"] { display: inline-flex !important; box-sizing: border-box; width: 100% !important; max-width: 350px; min-width: 0 !important; min-height: 52px; align-items: center; justify-content: center; gap: 10px; margin: 0 !important; padding: 10px 20px !important; border-radius: 999px !important; box-shadow: 0 7px 18px rgba(0, 0, 0, 0.22) !important; font-size: 14px !important; letter-spacing: 0 !important; line-height: 20px !important; text-align: center; text-decoration: none !important; text-transform: none !important; text-shadow: none !important; white-space: nowrap; cursor: pointer; touch-action: manipulation; transition: box-shadow 0.2s ease, transform 0.2s ease; } body.woocommerce-account:not(.logged-in) .my-account-header.page-title .social-login > a.button[data-provider="google"] > i { display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important; font-size: 16px; line-height: 1; } body.woocommerce-account:not(.logged-in) .my-account-header.page-title .social-login > a.button[data-provider="google"]:focus-visible { outline: 3px solid var(--cga-gold-light, #dfbd74); outline-offset: 4px; box-shadow: 0 7px 18px rgba(0, 0, 0, 0.22) !important; } body.woocommerce-account:not(.logged-in) .my-account-header.page-title .social-login > a.button[data-provider="google"]:active { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20) !important; transform: translateY(1px); } @media (hover: hover) and (pointer: fine) { body.woocommerce-account:not(.logged-in) .my-account-header.page-title .social-login > a.button[data-provider="google"]:hover { box-shadow: 0 10px 23px rgba(0, 0, 0, 0.27) !important; transform: translateY(-1px); } } @media screen and (max-width: 849px) { body.woocommerce-account:not(.logged-in) .my-account-header.page-title .page-title-inner { min-height: 100px; padding: 15px 12px !important; } body.woocommerce-account:not(.logged-in) .my-account-header.page-title .social-login { width: min(100%, 380px); padding: 7px !important; border-radius: 17px; } body.woocommerce-account:not(.logged-in) .my-account-header.page-title .social-login > a.button[data-provider="google"] { max-width: none; min-height: 50px; padding: 9px 16px !important; font-size: 14px !important; } body.woocommerce-account:not(.logged-in) .my-account-header.page-title .social-login > a.button[data-provider="google"] > i { font-size: 14px; } } @media (prefers-reduced-motion: reduce) { body.woocommerce-account:not(.logged-in) .my-account-header.page-title .social-login > a.button[data-provider="google"] { transition: none !important; } } /* ========================================================== SMALL DESKTOP AND LANDSCAPE TABLET Compact values keep the seven long menu labels on one line. ========================================================== */ @media screen and (min-width: 850px) and (max-width: 1249px) { #header .header-main ul.header-nav-main.nav-right > li.account-item a.nav-top-link { min-width: 130px; padding-right: 9px !important; padding-left: 9px !important; font-size: 12px !important; letter-spacing: 0.025em; } #header .header-main ul.header-nav-main.nav-right > li.cart-item.has-icon > a.header-cart-link.nav-top-link { gap: 7px; min-height: 46px; padding-right: 5px !important; padding-left: 10px !important; font-size: 12.5px !important; letter-spacing: 0.025em; } #header .header-main ul.header-nav-main.nav-right > li.cart-item.has-icon > a.header-cart-link.nav-top-link > .cart-icon.image-icon { flex-basis: 38px; width: 38px; height: 38px; } #wide-nav .header-bottom-nav > li > a { min-height: 48px; padding-right: 7px !important; padding-left: 7px !important; font-size: 10.5px !important; letter-spacing: 0.015em; } #wide-nav .nav-dropdown { min-width: 220px; } } /* ========================================================== PORTRAIT TABLET AND MOBILE Flatsome switches to the mobile header below 850px. ========================================================== */ @media screen and (max-width: 849px) { /* ======================================================== PREMIUM MOBILE / TABLET TOP BAR Styles the mobile HTML 1 toll-free element only. The desktop Top Bar Menu remains hidden below 850px. ======================================================== */ #header .header-top { height: auto !important; min-height: 38px; padding: 0; background: linear-gradient( 135deg, #4a3329 0%, #2d1f19 100% ) !important; border-bottom: 1px solid rgba(196, 154, 69, 0.58); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.025), 0 3px 12px rgba(38, 25, 18, 0.10); } #header .header-top > .flex-row.container { display: flex; flex-wrap: nowrap; align-items: center; width: 100%; max-width: none; height: auto !important; min-height: 38px; padding: 0 12px; } #header .header-top > .flex-row.container > .flex-col.show-for-medium.flex-grow { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 38px; padding: 4px 0; } #header .header-top .flex-col.show-for-medium.flex-grow .html_topbar_left { display: inline-flex; align-items: center; min-height: 28px; margin: 0 !important; padding: 0 12px; color: var(--cga-ivory) !important; background: rgba(196, 154, 69, 0.10); border: 1px solid rgba(223, 189, 116, 0.30); border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; line-height: 1; white-space: nowrap; } /* Keep the desktop Top Bar Menu out of tablet/mobile. */ #header .header-top > .flex-row.container > .flex-col.hide-for-medium.flex-right { display: none !important; } /* Mobile header */ #header .header-main { background: #ffffff; border-bottom: 2px solid var(--cga-gold); box-shadow: 0 5px 18px rgba(38, 25, 18, 0.10); } /* Mobile header icons */ #header .mobile-nav > li > a { color: var(--cga-brown) !important; } /* ======================================================== PREMIUM MOBILE / TABLET CART BUTTON Keeps Flatsome's off-canvas cart and WooCommerce count. ======================================================== */ #header .header-main ul.mobile-nav.nav-right > li.cart-item.has-icon > a.header-cart-link.nav-top-link { display: inline-flex; box-sizing: border-box; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0 !important; color: #1b1209 !important; background: linear-gradient( 135deg, var(--cga-gold-light) 0%, var(--cga-gold) 100% ) !important; border: 1px solid rgba(134, 90, 34, 0.46); border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46), 0 5px 15px rgba(58, 40, 31, 0.20); text-shadow: none; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } #header .header-main ul.mobile-nav.nav-right > li.cart-item.has-icon > a.header-cart-link.nav-top-link > .cart-icon.image-icon { position: relative; display: inline-flex !important; flex: 0 0 44px; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 !important; overflow: visible; color: inherit !important; background: transparent; border: 0; border-radius: 50%; box-shadow: none; } #header .header-main ul.mobile-nav.nav-right > li.cart-item.has-icon > a.header-cart-link.nav-top-link > .cart-icon.image-icon > strong { position: relative; display: inline-flex; box-sizing: border-box; align-items: center; justify-content: center; width: 25px; min-width: 25px; height: 23px; margin: 4px 0 0; padding: 0 2px; color: #1b1209 !important; background: rgba(255, 255, 255, 0.16); border: 2px solid #2f2018; border-radius: 3px 3px 5px 5px; font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; } #header .header-main ul.mobile-nav.nav-right > li.cart-item.has-icon > a.header-cart-link.nav-top-link > .cart-icon.image-icon > strong::after { content: ""; position: absolute; top: -8px; right: auto; bottom: auto; left: 50%; display: block; box-sizing: border-box; width: 12px; height: 8px; background: transparent; border: 2px solid #2f2018; border-bottom: 0; border-radius: 99px 99px 0 0; transform: translateX(-50%); } #header .header-main ul.mobile-nav.nav-right > li.cart-item.has-icon > a.header-cart-link.nav-top-link:focus-visible { outline: 2px solid var(--cga-brown); outline-offset: 2px; } #header .header-main ul.mobile-nav.nav-right > li.cart-item.has-icon > a.header-cart-link.off-canvas-toggle[aria-expanded="true"] { color: var(--cga-gold-light) !important; background: linear-gradient( 135deg, #3f2b22 0%, #1b120e 100% ) !important; border-color: rgba(196, 154, 69, 0.82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 18px rgba(38, 25, 18, 0.24); } #header .header-main ul.mobile-nav.nav-right > li.cart-item.has-icon > a.header-cart-link.off-canvas-toggle[aria-expanded="true"] > .cart-icon.image-icon > strong { color: var(--cga-gold-light) !important; background: rgba(196, 154, 69, 0.10); border-color: var(--cga-gold-light); } #header .header-main ul.mobile-nav.nav-right > li.cart-item.has-icon > a.header-cart-link.off-canvas-toggle[aria-expanded="true"] > .cart-icon.image-icon > strong::after { border-color: var(--cga-gold-light); border-bottom: 0; } #header .header-main ul.mobile-nav.nav-right > li.cart-item.has-icon > a.header-cart-link.nav-top-link:active { filter: brightness(0.96); } /* ======================================================== PREMIUM MOBILE / TABLET MENU BUTTON Uses Flatsome's existing Menu label without the icon. ======================================================== */ #header .header-main .mobile-nav.nav-right > li.nav-icon.has-icon > a[aria-controls="main-menu"] { display: inline-flex; box-sizing: border-box; align-items: center; justify-content: center; gap: 0; width: auto; min-width: 68px; height: 44px; min-height: 44px; margin: 0; padding: 0 14px !important; color: #1b1209 !important; background: linear-gradient( 135deg, var(--cga-gold-light) 0%, var(--cga-gold) 100% ) !important; border: 1px solid rgba(134, 90, 34, 0.46); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46), 0 5px 15px rgba(58, 40, 31, 0.20); font-size: 11.5px !important; font-weight: 800; letter-spacing: 0.10em; line-height: 1; text-shadow: none; text-transform: uppercase; white-space: nowrap; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } #header .header-main .mobile-nav.nav-right > li.nav-icon.has-icon > a[aria-controls="main-menu"] > .icon-menu { display: none !important; } #header .header-main .mobile-nav.nav-right > li.nav-icon.has-icon > a[aria-controls="main-menu"] > .menu-title { display: inline-flex !important; align-items: center; margin: 0 !important; color: inherit !important; font-size: inherit !important; font-weight: inherit; letter-spacing: inherit; line-height: 1; opacity: 1; visibility: visible; } #header .header-main .mobile-nav.nav-right > li.nav-icon.has-icon > a[aria-controls="main-menu"]:focus-visible { outline: 2px solid var(--cga-brown); outline-offset: 2px; } #header .header-main .mobile-nav.nav-right > li.nav-icon.has-icon > a[aria-controls="main-menu"][aria-expanded="true"] { color: var(--cga-gold-light) !important; background: linear-gradient( 135deg, #3f2b22 0%, #1b120e 100% ) !important; border-color: rgba(196, 154, 69, 0.82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 18px rgba(38, 25, 18, 0.24); } #header .header-main .mobile-nav.nav-right > li.nav-icon.has-icon > a[aria-controls="main-menu"]:active { filter: brightness(0.96); } /* ======================================================== PREMIUM MOBILE / TABLET HEADER SEARCH FORM Targets the Search Form element placed in Header Builder. ======================================================== */ #wide-nav.header-bottom { padding: 12px 0 13px !important; background: linear-gradient( 180deg, #17110e 0%, #090706 100% ) !important; border-top: 1px solid rgba(196, 154, 69, 0.48); border-bottom: 1px solid rgba(196, 154, 69, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 8px 22px rgba(22, 16, 12, 0.16); } #wide-nav .header-bottom-nav.mobile-nav { align-items: center; width: 100%; min-height: 0; } #wide-nav .header-bottom-nav.mobile-nav > li.header-search-form { flex: 1 1 100%; width: 100%; margin: 0 !important; padding: 0; } #wide-nav .mobile-nav .header-search-form-wrapper, #wide-nav .mobile-nav .searchform-wrapper { width: 100%; } #wide-nav .mobile-nav .searchform-wrapper { max-width: 720px; margin: 0 auto; } #wide-nav .mobile-nav form.searchform { margin: 0; } #wide-nav .mobile-nav form.searchform > .flex-row { position: relative; display: block; width: 100%; } #wide-nav .mobile-nav form.searchform > .flex-row > .flex-col.flex-grow { width: 100%; } #wide-nav .mobile-nav form.searchform > .flex-row > .flex-col:not(.flex-grow) { position: absolute; top: 4px; right: 4px; z-index: 2; } #wide-nav .mobile-nav input.search-field[type="search"] { display: block; box-sizing: border-box; width: 100%; height: 52px; min-height: 52px; margin: 0; padding: 0 62px 0 20px !important; appearance: none; color: var(--cga-ivory) !important; caret-color: var(--cga-gold-light); background: linear-gradient( 135deg, rgba(58, 40, 31, 0.96) 0%, rgba(26, 20, 17, 0.98) 100% ) !important; border: 1px solid rgba(223, 189, 116, 0.50) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(0, 0, 0, 0.30), 0 8px 22px rgba(0, 0, 0, 0.22); font-family: inherit; font-size: 16px; font-weight: 500; letter-spacing: 0.015em; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } #wide-nav .mobile-nav input.search-field[type="search"]::placeholder { color: rgba(245, 241, 234, 0.68); opacity: 1; } #wide-nav .mobile-nav input.search-field[type="search"]:focus { outline: none; color: #ffffff !important; border-color: var(--cga-gold-light) !important; background: linear-gradient( 135deg, rgba(70, 48, 36, 0.98) 0%, rgba(30, 23, 19, 1) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 0 0 3px rgba(196, 154, 69, 0.16), 0 10px 28px rgba(0, 0, 0, 0.26); } #wide-nav .mobile-nav input.search-field[type="search"]:focus-visible { outline: 2px solid var(--cga-gold-light); outline-offset: 2px; } #wide-nav .mobile-nav .ux-search-submit { display: flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: 0 !important; padding: 0 !important; color: #1b1209 !important; background: linear-gradient( 135deg, var(--cga-gold-light) 0%, var(--cga-gold) 100% ) !important; border: 1px solid rgba(255, 232, 175, 0.58) !important; border-radius: 50% !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 5px 14px rgba(0, 0, 0, 0.30); text-shadow: none; transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } #wide-nav .mobile-nav .ux-search-submit:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; } /* Slide-out mobile menu */ #main-menu.mobile-sidebar { color: var(--cga-ivory); background: linear-gradient( 180deg, #241914 0%, #100c0a 100% ); } #main-menu .sidebar-menu { padding: 18px 16px 30px; } #main-menu .nav-sidebar { margin: 0; } #main-menu .nav-sidebar > li { border-bottom: 1px solid rgba(223, 189, 116, 0.20); } /* Main mobile-menu links */ #main-menu .nav-sidebar > li > a { padding: 14px 10px; color: var(--cga-ivory) !important; font-size: 15px; font-weight: 700; letter-spacing: 0.045em; line-height: 1.35; transition: color 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease; } #main-menu .nav-sidebar > li.current-menu-item > a, #main-menu .nav-sidebar > li.current-menu-ancestor > a { padding-left: 14px; color: var(--cga-gold-light) !important; background: rgba(196, 154, 69, 0.08); } #main-menu .nav-sidebar > li.current-menu-item > .toggle, #main-menu .nav-sidebar > li.current-menu-ancestor > .toggle { background: rgba(196, 154, 69, 0.08); } /* * Keep long category names and their submenu arrows on one * flex row. The link may wrap internally, but the arrow keeps * its own fixed column instead of dropping below the label. */ #main-menu .nav-sidebar > li.menu-item-has-children { display: flex; flex-wrap: wrap; align-items: stretch; } #main-menu .nav-sidebar > li.menu-item-has-children > a { flex: 1 1 calc(100% - 48px); width: calc(100% - 48px); max-width: calc(100% - 48px); min-width: 0; } /* Submenu expand/collapse controls */ #main-menu .nav-sidebar > li.menu-item-has-children > .toggle { display: flex; flex: 0 0 48px; align-self: stretch; align-items: center; justify-content: center; width: 48px; height: auto; min-height: 48px; margin: 0; padding: 0 !important; color: var(--cga-gold-light) !important; transition: color 0.2s ease, background-color 0.2s ease; } /* Mobile submenus */ #main-menu .nav-sidebar .sub-menu { box-sizing: border-box; flex: 0 0 calc(100% - 12px); width: calc(100% - 12px); margin: 0 0 10px 12px; padding: 5px 0; background: rgba(255, 255, 255, 0.035); border-left: 2px solid var(--cga-gold); } #main-menu .nav-sidebar .sub-menu a { padding: 10px 14px; color: rgba(245, 241, 234, 0.84) !important; font-size: 13px; line-height: 1.4; } #main-menu .nav-sidebar .sub-menu .current-menu-item > a { color: var(--cga-gold-light) !important; background: rgba(196, 154, 69, 0.08); } /* Mobile search */ #main-menu .searchform { margin: 0 0 18px; } #main-menu .searchform input[type="search"] { color: var(--cga-ivory); caret-color: var(--cga-gold-light); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(223, 189, 116, 0.42); border-radius: 999px; } #main-menu .searchform input[type="search"]::placeholder { color: rgba(245, 241, 234, 0.62); } #main-menu .searchform button { color: var(--cga-gold-light); } /* Social-media icons, when enabled in Flatsome */ #main-menu .social-icons a { color: var(--cga-ivory) !important; border-color: rgba(223, 189, 116, 0.45); } } /* Mobile hover styles for devices that support hover */ @media screen and (max-width: 849px) and (hover: hover) and (pointer: fine) { #wide-nav .mobile-nav .ux-search-submit:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 7px 18px rgba(0, 0, 0, 0.34); } #header .mobile-nav > li > a:hover { color: var(--cga-gold) !important; } #header .header-main ul.mobile-nav.nav-right > li.cart-item.has-icon > a.header-cart-link.nav-top-link:not([aria-expanded="true"]):hover { color: #1b1209 !important; border-color: rgba(134, 90, 34, 0.62); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52), 0 7px 19px rgba(58, 40, 31, 0.24); filter: brightness(1.055); } #header .header-main .mobile-nav.nav-right > li.nav-icon.has-icon > a[aria-controls="main-menu"]:not([aria-expanded="true"]):hover { color: #1b1209 !important; border-color: rgba(134, 90, 34, 0.62); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52), 0 7px 19px rgba(58, 40, 31, 0.24); filter: brightness(1.055); } #main-menu .nav-sidebar > li > a:hover { padding-left: 14px; color: var(--cga-gold-light) !important; background: rgba(196, 154, 69, 0.08); } #main-menu .nav-sidebar > li:hover > .toggle { background: rgba(196, 154, 69, 0.08); } #main-menu .nav-sidebar .sub-menu a:hover { color: var(--cga-gold-light) !important; background: rgba(196, 154, 69, 0.08); } } /* Smaller mobile phones */ @media screen and (max-width: 549px) { #wide-nav.header-bottom { padding-top: 10px !important; padding-bottom: 11px !important; } #wide-nav .mobile-nav input.search-field[type="search"] { height: 48px; min-height: 48px; padding-right: 58px !important; padding-left: 17px !important; } #wide-nav .mobile-nav form.searchform > .flex-row > .flex-col:not(.flex-grow) { top: 4px; right: 4px; } #wide-nav .mobile-nav .ux-search-submit { width: 40px; min-width: 40px; height: 40px; min-height: 40px; } #main-menu .sidebar-menu { padding: 14px 12px 26px; } #main-menu .nav-sidebar > li > a { padding-top: 13px; padding-bottom: 13px; font-size: 14px; } } /* Extra-narrow phones: retain a compact text-only Menu button */ @media screen and (max-width: 359px) { #header .header-main .mobile-nav.nav-right > li.nav-icon.has-icon > a[aria-controls="main-menu"] { flex-direction: row; gap: 0; width: auto; min-width: 56px; height: 44px; min-height: 44px; padding: 0 9px !important; border-radius: 999px; } #header .header-main .mobile-nav.nav-right > li.nav-icon.has-icon > a[aria-controls="main-menu"] > .menu-title { font-size: 9.5px !important; letter-spacing: 0.08em; } } /* ========================================================== ACCESSIBILITY ========================================================== */ #wide-nav a:focus-visible, #main-menu a:focus-visible, #main-menu button:focus-visible, #main-menu input:focus-visible { outline: 2px solid var(--cga-gold-light); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { #header .header-top .top-bar-nav > li > a.nav-top-link, #header .header-main .header-nav-main > li.header-search-form form.searchform > .flex-row, #header .header-main .header-nav-main > li.header-search-form input, #header .header-main .header-nav-main > li.header-search-form button, #header .header-main ul.header-nav-main.nav-right > li.account-item a.nav-top-link, #header .header-main ul.header-nav-main.nav-right > li.cart-item.has-icon > a.header-cart-link.nav-top-link, #header .header-main ul.mobile-nav.nav-right > li.cart-item.has-icon > a.header-cart-link.nav-top-link, #header .header-main .mobile-nav.nav-right > li.nav-icon.has-icon > a[aria-controls="main-menu"], #wide-nav a, #wide-nav input, #wide-nav button, #main-menu a { transition: none !important; } #header .header-main .header-nav-main > li.header-search-form .ux-search-submit, #wide-nav .mobile-nav .ux-search-submit { transform: none !important; } }