/* ============================================================
   BRAND COLOR SYSTEM — ONE CRIMSON (single source of truth)
   ------------------------------------------------------------
   The site previously shipped five competing reds (#A8221C,
   #C0122B, #A50D24, #9B1B25, #C5202D) plus pure #FF0000. They are
   now all one hue. Never introduce a new red — use a token below.

   --brand-crimson          #A50D24  PRIMARY. Buttons, links, headings
                                     and accents on LIGHT surfaces.
                                     7.8:1 on white (AA text / AAA large).
   --brand-crimson-dark     #7E0A1B  Hover + pressed state on fills.
   --brand-crimson-deep     #5A0713  Panel gradient — upper stop.
   --brand-crimson-deepest  #350409  Panel gradient — lower stop (oxblood).
   --brand-crimson-light    #E35A6D  Text, borders and focus rings on
                                     DARK surfaces only. 4.9:1 on #1A1A1A.

   Every step above is hue 351° — a tonal ramp of the one crimson,
   not a second red. *-rgb tokens are for rgba() tints.
   ============================================================ */
:root:root:root{
  --brand-crimson:           #A50D24;
  --brand-crimson-rgb:       165, 13, 36;
  --brand-crimson-dark:      #7E0A1B;
  --brand-crimson-deep:      #5A0713;
  --brand-crimson-deepest:   #350409;
  --brand-crimson-light:     #E35A6D;
  --brand-crimson-light-rgb: 227, 90, 109;
}

/* High-Contrast Dark Menu - Option 1 - Updated for Elementor */

/* Main Navigation Dropdown Container */
.elementor-nav-menu--dropdown.elementor-nav-menu__container {
  background-color: rgba(26, 26, 26, 0.98) !important;
  backdrop-filter: blur(5px);
  color: #ffffff !important;
}

/* Menu List */
.elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu {
  background-color: transparent !important;
}

/* Menu Items */
.elementor-nav-menu--dropdown.elementor-nav-menu__container .menu-item > a,
.elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-item {
  color: #ffffff !important;
  font-weight: 500;
  transition: all 0.3s ease;
  background-color: transparent !important;
}

/* Menu Items Hover State */
.elementor-nav-menu--dropdown.elementor-nav-menu__container .menu-item > a:hover,
.elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-item:hover {
  color: var(--brand-crimson-light) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  transition: all 0.3s ease;
}

/* Submenu Items */
.elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu__container {
  background-color: rgba(44, 44, 44, 0.98) !important;
  border-left: 3px solid var(--brand-crimson);
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu__container .menu-item > a,
.elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu__container .elementor-item {
  color: #e8e8e8 !important;
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu__container .menu-item > a:hover,
.elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu__container .elementor-item:hover {
  color: var(--brand-crimson-light) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Menu Toggle Button */
.elementor-menu-toggle {
  background-color: rgba(26, 26, 26, 0.95) !important;
  color: #ffffff !important;
  border: 2px solid var(--brand-crimson) !important;
  border-radius: 0;
  transition: all 0.3s ease;
}

.elementor-menu-toggle:hover,
.elementor-menu-toggle.elementor-active {
  background-color: var(--brand-crimson) !important;
  color: #ffffff !important;
}

/* Active Menu Item */
.elementor-nav-menu--dropdown.elementor-nav-menu__container .menu-item.current-menu-item > a,
.elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-item.elementor-item-active {
  color: var(--brand-crimson-light) !important;
  border-left: 3px solid var(--brand-crimson);
  padding-left: 13px !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .elementor-nav-menu--dropdown.elementor-nav-menu__container .menu-item > a,
  .elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-item {
    padding: 14px 20px !important;
    font-size: 15px !important;
  }
}

@media (min-width: 769px) {
  .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    width: 90% !important;
    max-width: 400px;
  }
}

/* Ensure text is readable */
.elementor-nav-menu--dropdown.elementor-nav-menu__container {
  text-shadow: none !important;
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container a {
  text-decoration: none;
}

/* ============================================
   PREMIUM UPGRADED MENU HEADERS
   ============================================ */

/* Premium Header Styling for Main Categories */
.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > .menu-item > a,
.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > li > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  border-bottom: 2px solid rgba(var(--brand-crimson-light-rgb), 0.35);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Premium Header Hover Effect */
.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > .menu-item > a:hover,
.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > li > a:hover {
  background: linear-gradient(135deg, rgba(var(--brand-crimson-rgb), 0.18) 0%, rgba(var(--brand-crimson-rgb), 0.08) 100%) !important;
  color: #ffcc00 !important;
  border-bottom-color: var(--brand-crimson-light) !important;
  padding-left: 24px !important;
  transform: translateX(4px);
}

/* Premium Header Icons Using CSS */
.elementor-nav-menu--dropdown.elementor-nav-menu__container .menu-item:nth-child(1) > a::before {
  content: "🛍️";
  font-size: 18px;
  display: inline-block;
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container .menu-item:nth-child(2) > a::before {
  content: "✨";
  font-size: 18px;
  display: inline-block;
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container .menu-item:nth-child(3) > a::before {
  content: "👑";
  font-size: 18px;
  display: inline-block;
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container .menu-item:nth-child(4) > a::before {
  content: "🏆";
  font-size: 18px;
  display: inline-block;
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container .menu-item:nth-child(5) > a::before {
  content: "ℹ️";
  font-size: 18px;
  display: inline-block;
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container .menu-item:nth-child(6) > a::before {
  content: "📧";
  font-size: 18px;
  display: inline-block;
}

/* Premium Submenu Items */
.elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu__container .menu-item > a,
.elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu__container .elementor-item {
  color: #e8e8e8 !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: capitalize;
  border-left: 3px solid transparent;
  transition: all 0.3s ease;
}

/* Premium Submenu Hover */
.elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu__container .menu-item > a:hover,
.elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu__container .elementor-item:hover {
  color: #ffcc00 !important;
  background-color: rgba(var(--brand-crimson-rgb), 0.16) !important;
  border-left-color: #ffcc00;
  padding-left: 24px !important;
  transform: translateX(4px);
}

/* Gold Accent Divider */
.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > .menu-item:not(:last-child) {
  position: relative;
}

.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > .menu-item:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 204, 0, 0.4) 50%, transparent 100%);
}

/* Premium Badge for Special Categories */
.elementor-nav-menu--dropdown.elementor-nav-menu__container .menu-item:nth-child(3) > a::after {
  content: 'PREMIUM';
  position: absolute;
  right: 20px;
  font-size: 10px;
  font-weight: 700;
  color: #ffcc00;
  background: rgba(255, 204, 0, 0.2);
  padding: 2px 8px;
  border-radius: 0;
  letter-spacing: 0.5px;
}

/* Active Primary Menu Item */
.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > .menu-item.current-menu-item > a,
.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > li.current-menu-item > a {
  background: linear-gradient(135deg, rgba(var(--brand-crimson-rgb), 0.24) 0%, rgba(var(--brand-crimson-rgb), 0.12) 100%) !important;
  color: #ffcc00 !important;
  border-bottom-color: #ffcc00 !important;
  box-shadow: inset 0 0 20px rgba(var(--brand-crimson-rgb), 0.12);
}

/* Header Typography Enhancement */
.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > .menu-item > a,
.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > li > a {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Luxury Spacing */
.elementor-nav-menu--dropdown.elementor-nav-menu__container {
  padding: 8px 0 !important;
}

/* Mobile Premium Headers */
@media (max-width: 768px) {
  .elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > .menu-item > a,
  .elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > li > a {
    padding: 18px 24px !important;
    font-size: 17px !important;
    gap: 14px;
  }
  
  .elementor-nav-menu--dropdown.elementor-nav-menu__container .menu-item:nth-child(3) > a::after {
    display: none;
  }
  
  .elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > .menu-item > a:hover,
  .elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > li > a:hover {
    padding-left: 28px !important;
  }
}

/* Submenu Section Header Styling */
.elementor-nav-menu__container-inner .elementor-nav-menu > li > a {
  position: relative;
}

/* Gold Gradient Text on Hover */
.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > .menu-item > a:hover::before {
  filter: drop-shadow(0 0 4px rgba(255, 204, 0, 0.4));
}

/* === Astra Header Dark Background + White Text === */
/* Main header background */
.ast-primary-header-bar,
.main-header-bar,
#masthead,
.site-header,
.ast-header-break-point .main-header-bar {
  background-color: #1e1e1e !important;
}

/* Transparent header override - force dark background */
.ast-theme-transparent-header #masthead,
.ast-theme-transparent-header .main-header-bar,
.ast-theme-transparent-header .ast-primary-header-bar {
  background-color: #1e1e1e !important;
}

/* Menu item text color - white */
.main-header-bar .main-navigation a,
.main-header-bar .main-navigation .menu-item a,
.ast-primary-header-bar .main-navigation a,
#site-navigation a,
.main-navigation ul li a {
  color: #ffffff !important;
}

/* Site title color */
.ast-primary-header-bar .site-title a,
.main-header-bar .site-title a {
  color: #ffffff !important;
}

/* === Astra Header Dark Background + White Text === */
.ast-primary-header-bar,
.main-header-bar,
#masthead,
.site-header {
  background-color: #1e1e1e !important;
}

.ast-theme-transparent-header #masthead,
.ast-theme-transparent-header .main-header-bar,
.ast-theme-transparent-header .ast-primary-header-bar {
  background-color: #1e1e1e !important;
}

.main-header-bar .main-navigation a,
.main-header-bar .main-navigation .menu-item a,
.ast-primary-header-bar .main-navigation a,
#site-navigation a,
.main-navigation ul li a {
  color: #ffffff !important;
}

.ast-primary-header-bar .site-title a,
.main-header-bar .site-title a {
  color: #ffffff !important;
}

/* === Elementor Header - Dark Background + White Text === */
/* Target the main Elementor header section */
header.elementor-location-header .elementor-top-section,
header.elementor-location-header .elementor-element-32a623ba,
.elementor-location-header .elementor-top-section {
  background-color: #1e1e1e !important;
  background: #1e1e1e !important;
}

/* Menu navigation text - white */
header.elementor-location-header .elementor-nav-menu a,
header.elementor-location-header .elementor-nav-menu--main .elementor-item,
header.elementor-location-header .elementor-nav-menu > li > a,
header.elementor-location-header nav a,
header.elementor-location-header .elementor-widget-nav-menu a {
  color: #ffffff !important;
}

/* ===== FIX: Desktop sub-menu dropdowns (.sub-menu) ===== */
/* Container: dark background, padding, subtle shadow */
.elementor-nav-menu .sub-menu,
nav.elementor-nav-menu--main .sub-menu,
header.elementor-location-header .sub-menu {
  background-color: rgba(26, 26, 26, 0.98) !important;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35) !important;
  padding: 8px 0 !important;
  min-width: 220px !important;
}

/* Sub-menu items: visible white text */
.elementor-nav-menu .sub-menu li,
nav.elementor-nav-menu--main .sub-menu li,
header.elementor-location-header .sub-menu li {
  background-color: transparent !important;
}

.elementor-nav-menu .sub-menu li > a,
nav.elementor-nav-menu--main .sub-menu li > a,
header.elementor-location-header .sub-menu li > a {
  color: #ffffff !important;
  background-color: transparent !important;
  padding: 10px 18px !important;
  font-weight: 500 !important;
  display: block !important;
  transition: all 0.25s ease !important;
}

/* Hover state for sub-menu items */
.elementor-nav-menu .sub-menu li > a:hover,
.elementor-nav-menu .sub-menu li > a:focus,
.elementor-nav-menu .sub-menu li.current-menu-item > a,
nav.elementor-nav-menu--main .sub-menu li > a:hover,
header.elementor-location-header .sub-menu li > a:hover {
  background-color: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  padding-left: 22px !important;
}


/* ============================================================
   WooCommerce UI — Brand Consistency (Commerce UI fix #15)
   Match default WooCommerce buttons/elements to site palette:
   crimson #A50D24 base, gold #F2C94C hover, Sen font, uppercase,
   sharp corners to match custom Elementor buttons.
   ============================================================ */

/* --- Primary WooCommerce buttons --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .checkout-button,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.wc-block-components-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.woocommerce #place_order,
.woocommerce .wc-forward,
.woocommerce a.wc-backward {
  background-color: var(--brand-crimson) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: "Sen", sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  line-height: 1.2 !important;
  padding: 16px 32px !important;
  transition: background-color 0.25s ease, color 0.25s ease !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* --- Hover / focus: gold state --- */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .checkout-button:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover,
.wc-block-components-button:hover,
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.woocommerce #place_order:hover,
.woocommerce .wc-forward:hover,
.woocommerce a.wc-backward:hover,
.woocommerce a.button:focus,
.woocommerce button.button:focus,
.woocommerce input.button:focus,
.woocommerce #place_order:focus,
.woocommerce .checkout-button:focus {
  background-color: #F2C94C !important;
  color: #1E1E1E !important;
}

/* --- Disabled / greyed-out buttons (e.g. inactive Update Cart) --- */
.woocommerce button.button[disabled],
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce a.button.disabled,
.woocommerce input.button:disabled {
  background-color: var(--brand-crimson-dark) !important;
  color: #FFFFFF !important;
  opacity: 0.55 !important;
}

/* --- WooCommerce notices / messages: brand accents instead of default green/blue --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-noreviews,
.woocommerce p.no-comments {
  border-top-color: var(--brand-crimson) !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--brand-crimson) !important;
}
.woocommerce-error {
  border-top-color: var(--brand-crimson) !important;
}

/* --- Links inside notices (e.g. "Return to shop" / "View cart") --- */
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button {
  background-color: var(--brand-crimson) !important;
  color: #FFFFFF !important;
}
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover {
  background-color: #F2C94C !important;
  color: #1E1E1E !important;
}

/* --- "Return to shop" empty-cart button & generic wc-backward --- */
.woocommerce .cart-empty + .return-to-shop .button,
.woocommerce .return-to-shop .button {
  background-color: var(--brand-crimson) !important;
  color: #FFFFFF !important;
  border-radius: 0 !important;
}
.woocommerce .return-to-shop .button:hover {
  background-color: #F2C94C !important;
  color: #1E1E1E !important;
}

/* --- Onsale badge & price accents to brand crimson --- */
.woocommerce span.onsale {
  background-color: var(--brand-crimson) !important;
  color: #FFFFFF !important;
  border-radius: 0 !important;
}

/* --- Quantity/other inputs focus & misc links --- */
.woocommerce a.remove:hover {
  color: var(--brand-crimson) !important;
  background: var(--brand-crimson) !important;
}

/* --- S4a: Remove uppercase on product titles (render title case) --- */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
	  text-transform: none !important;
}

}

/* =========================================================
   TYPOGRAPHY REFRESH (Claude) — addresses Issues 1.1–1.5
   NOTE: Fraunces + Inter are FREE stand-ins for direction.
   For production, replace Fraunces with your licensed serif
   (Canela / Ogg / Freight Display) via @font-face.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600&display=swap');

:root{
  --tf-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --tf-sans: 'Inter', -apple-system, sans-serif;
  --tf-gold: #9c7c3c;
  --tf-fs-caption: 0.64rem;
  --tf-fs-price: 0.8rem;
  --tf-fs-h3: 1.5625rem;
  --tf-fs-h2: 2.44rem;
  --tf-fs-h1: 3.05rem;
}

/* 1.1 Replace rounded display face (Sen) with high-contrast serif */
h1, h2, h3, h4,
.elementor-heading-title,
.woocommerce-loop-product__title,
.entry-title, .site-title{
  font-family: var(--tf-serif) !important;
  font-optical-sizing: auto;
}

/* Neutral sans for body / UI */
body, p, .elementor-widget-text-editor, .button, button,
.ast-woo-product-category, .price, input, select, textarea{
  font-family: var(--tf-sans) !important;
}

/* 1.2 Strict 1.25 modular type scale */
h1, .entry-title{
  font-size: var(--tf-fs-h1) !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
h2, .elementor-heading-title.elementor-size-xl{
  font-size: var(--tf-fs-h2) !important;
  line-height: 1.15 !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
}
h3{
  font-size: var(--tf-fs-h3) !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size: var(--tf-fs-h3) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: #1a1a1a !important;
}

/* 1.3 Prices must not compete with titles: smaller, lighter, muted gold */
.price, .woocommerce-Price-amount{
  font-size: var(--tf-fs-price) !important;
  font-weight: 400 !important;
  color: var(--tf-gold) !important;
  letter-spacing: 0.02em !important;
}
.price del{ opacity: 0.5; font-weight: 400 !important; }
.price ins{ text-decoration: none; }

/* 1.4 Generous uppercase tracking on labels / buttons / eyebrows */
.button, button, a.button, .wp-block-button__link,
.add_to_cart_button, .ast-on-card-button{
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-weight: 500 !important;
  font-size: 0.72rem !important;
}

/* 1.5 Repetitive category eyebrows: quieter, lighter, tracked */
.ast-woo-product-category{
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: var(--tf-fs-caption) !important;
  font-weight: 500 !important;
  color: #b3a99f !important;
  opacity: 0.85;
}

/* =========================================================
   2. SHOP BY COLLECTION — image-backed tiles (Claude)
   Addresses Issues 2.1 (image tiles), 2.2 (uniform grid),
   2.3 (refined hover). Images reuse existing product/category
   photography from the media library.
   ========================================================= */

/* 2.2 Uniform grid: equal columns and gaps */
.elementor-element-b91fbb18 > .elementor-container{
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
}
.elementor-element-b91fbb18 .elementor-column{
  width: 100% !important;
  flex: unset !important;
}
.elementor-element-b91fbb18 .elementor-widget-wrap{ padding: 0 !important; }
.elementor-element-b91fbb18 .elementor-widget-button{ width: 100% !important; }
.elementor-element-b91fbb18 .elementor-button-wrapper{ width: 100%; }

/* 2.1 Image-backed tiles with uniform aspect ratio */
.elementor-element-b91fbb18 a.elementor-button{
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  padding: 18px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background-color: #2a2320 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: background-size .6s ease !important;
}
.elementor-element-b91fbb18 a.elementor-button::before{
  content:'' !important;
  position:absolute !important; inset:0 !important;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,.08) 100%) !important;
  transition: background .5s ease !important;
  z-index:1 !important;
}
.elementor-element-b91fbb18 a.elementor-button .elementor-button-content-wrapper{
  position: relative !important;
  z-index: 2 !important;
}
/* Small wide-tracked uppercase label */
.elementor-element-b91fbb18 a.elementor-button .elementor-button-text{
  font-family: 'Inter', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  line-height: 1.3 !important;
  text-align: left !important;
  display: block !important;
  transition: transform .4s ease !important;
}

/* 2.3 Refined hover: image zoom + overlay darken + label shift */
.elementor-element-b91fbb18 a.elementor-button:hover{ background-size: 118% !important; }
.elementor-element-b91fbb18 a.elementor-button:hover::before{
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.4) 50%, rgba(0,0,0,.15) 100%) !important;
}
.elementor-element-b91fbb18 a.elementor-button:hover .elementor-button-text{ transform: translateX(6px) !important; }

/* Category images */
.elementor-element-85b8e181 a.elementor-button{ background-image:url('https://2hypekreations.rovexen.com/wp-content/uploads/2026/05/custom-embroidered-bomber-jacket-navy-crimson-letters-branded-hanger-300x300.png') !important; }
.elementor-element-97cfde81 a.elementor-button{ background-image:url('https://2hypekreations.rovexen.com/wp-content/uploads/2026/05/kappa-alpha-psi-faceted-glass-decanter-set-black-display-stand-angular-tumbler-quartet_1-300x300.png') !important; }
.elementor-element-d52c7960 a.elementor-button{ background-image:url('https://2hypekreations.rovexen.com/wp-content/uploads/2026/03/kappa-alpha-psi-leather-accessories-luxury-product-show-1024x683.png') !important; }
.elementor-element-68211405 a.elementor-button{ background-image:url('https://2hypekreations.rovexen.com/wp-content/uploads/2026/06/custom-etched-crest-whiskey-tumbler-set-600x600.png') !important; }
.elementor-element-58422658 a.elementor-button{ background-image:url('https://2hypekreations.rovexen.com/wp-content/uploads/2026/05/custom-full-color-embroidered-crewneck-sweatshirt-multi-thread-crest-personalized-300x300.png') !important; }

/* Responsive: stack to fewer columns on smaller screens */
@media (max-width: 1024px){
  .elementor-element-b91fbb18 > .elementor-container{ grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 600px){
  .elementor-element-b91fbb18 > .elementor-container{ grid-template-columns: repeat(2, 1fr) !important; }
}

/* === PRODUCT GRID FIXES (3.1-3.4) === */
/* Brand palette: crimson #A50D24, hover crimson #7E0A1B, neutral #F0F5FA */

/* Issue 3.2 — More internal card padding + spacing between elements */
ul.products li.product {
  padding: 28px 24px 32px !important;
  background-color: #ffffff !important;
  border-radius: 0 !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
ul.products li.product .astra-shop-thumbnail-wrap {
  margin-bottom: 20px !important;
  background-color: #F0F5FA !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
ul.products li.product .ast-woo-product-category {
  margin-bottom: 8px !important;
  display: block !important;
}
ul.products li.product .woocommerce-loop-product__title {
  margin-bottom: 10px !important;
}
ul.products li.product .price {
  display: block !important;
  margin-bottom: 18px !important;
}

/* Issue 3.3 — Standardized image aspect ratio, object-fit & brand neutral background */
ul.products li.product .astra-shop-thumbnail-wrap img,
ul.products li.product img.attachment-woocommerce_thumbnail,
ul.products li.product img.wp-post-image {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  background-color: #F0F5FA !important;
  display: block !important;
}

/* Issue 3.1 — Unify ALL card buttons; brand crimson base with darker crimson hover */
ul.products li.product .woocommerce-loop-product__buttons a.button,
ul.products li.product .woocommerce-loop-product__buttons button.button,
ul.products li.product .astra-shop-summary-wrap > a.button,
ul.products li.product .astra-shop-summary-wrap > button.button,
ul.products li.product a.add_to_cart_button,
ul.products li.product a.product_type_variable,
ul.products li.product a.button.product_type_simple {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 14px 20px !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
  background-color: var(--brand-crimson) !important;
  color: #ffffff !important;
  border: 1px solid var(--brand-crimson) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}
ul.products li.product .woocommerce-loop-product__buttons a.button:hover,
ul.products li.product .woocommerce-loop-product__buttons button.button:hover,
ul.products li.product .astra-shop-summary-wrap > a.button:hover,
ul.products li.product .astra-shop-summary-wrap > button.button:hover,
ul.products li.product a.add_to_cart_button:hover,
ul.products li.product a.product_type_variable:hover,
ul.products li.product a.button.product_type_simple:hover {
  background-color: var(--brand-crimson-dark) !important;
  border-color: var(--brand-crimson-dark) !important;
  color: #ffffff !important;
}

/* Issue 3.4 — Refined hover lift: softer distance + crimson-tinted shadow */
ul.products li.product:hover {
  transform: translateY(-4px) scale(1.015) !important;
  box-shadow: 0 10px 26px rgba(var(--brand-crimson-rgb), 0.16) !important;
}


/* ============================================================
   2Hype Refinement Pack — Badges, Color & Finish (Issue 4)
   Primary action color: Crimson #A50D24
   Secondary / accent:   Muted Brass #B08D57
   ============================================================ */

/* ---- 4.1 Elegant Sale badge (replaces the loud sticker) ---- */
.woocommerce span.onsale,
.ast-onsale-card,
.woocommerce ul.products li.product .onsale {
  background: transparent !important;
  color: #8a6d3b !important;
  border: 1px solid #B08D57 !important;
  border-radius: 0 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 5px 9px !important;
  box-shadow: none !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  backdrop-filter: blur(2px);
  transition: color .25s ease, border-color .25s ease;
}
/* Refined wording: keep short + tasteful */
.ast-onsale-card { text-indent: 0 !important; }

/* ---- 4.2 Palette: crimson = primary, brass = secondary/hover ---- */
:root {
  --twohype-crimson: var(--brand-crimson);
  --twohype-crimson-dark: var(--brand-crimson-dark);
  --twohype-brass: #B08D57;
  --twohype-brass-dark: #96733f;
}

/* Primary action = crimson (default add-to-cart / primary buttons) */
.woocommerce ul.products li.product a.button.add_to_cart_button {
  background-color: var(--twohype-crimson) !important;
  border: 1px solid var(--twohype-crimson) !important;
  color: #fff !important;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .2s ease !important;
}
.woocommerce ul.products li.product a.button.add_to_cart_button:hover {
  background-color: var(--twohype-brass) !important;
  border-color: var(--twohype-brass) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(176, 141, 87, 0.30) !important;
}

/* Secondary action = brass outline (Read More / view product links) */
.woocommerce ul.products li.product a.button:not(.add_to_cart_button),
.woocommerce ul.products li.product a.button.product_type_variable,
.woocommerce ul.products li.product a.button.product_type_grouped,
.woocommerce ul.products li.product a.button.product_type_external {
  background-color: transparent !important;
  border: 1px solid var(--twohype-brass) !important;
  color: var(--twohype-brass-dark) !important;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease !important;
}
.woocommerce ul.products li.product a.button:not(.add_to_cart_button):hover,
.woocommerce ul.products li.product a.button.product_type_variable:hover,
.woocommerce ul.products li.product a.button.product_type_grouped:hover,
.woocommerce ul.products li.product a.button.product_type_external:hover {
  background-color: var(--twohype-brass) !important;
  border-color: var(--twohype-brass) !important;
  color: #fff !important;
}

/* Struck-through original price beside sale price (elegant emphasis) */
.woocommerce ul.products li.product .price del {
  color: #9a9a9a !important;
  opacity: .8;
  font-weight: 400 !important;
  margin-right: 6px;
}
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins .amount {
  color: var(--twohype-crimson) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

/* ---- 4.3 Micro-interactions ---- */

/* Nav underline-reveal (custom Elementor header .nav__link) */
.nav__link { position: relative !important; }
.nav__link::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 6px;
  height: 1px;
  background: var(--twohype-brass);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.nav__link:hover::after,
.nav__item--has-children:hover > .nav__link::after {
  transform: scaleX(1);
}

/* Card lift on hover (subtle, crafted) */
.woocommerce ul.products li.product {
  transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s cubic-bezier(.22,.61,.36,1) !important;
  will-change: transform;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 14px 34px rgba(30, 20, 18, 0.14) !important;
}
/* Gentle image zoom within card */
.woocommerce ul.products li.product img {
  transition: transform .35s ease !important;
}
.woocommerce ul.products li.product:hover img {
  transform: scale(1.03) !important;
}
/* End 2Hype Refinement Pack */


/* ============================================
   Multi-column Site Footer (Issue 5.1)
   ============================================ */
#a11y-site-footer { background: #111114; color: #cfd0d6; }
.k2h-footer { background: #111114; color: #cfd0d6; font-size: 15px; line-height: 1.6; }
.k2h-footer a { color: #cfd0d6; text-decoration: none; transition: color .2s ease; }
.k2h-footer a:hover { color: #ffffff; }
.k2h-footer__inner {
  max-width: 1200px; margin: 0 auto; padding: 56px 24px 40px;
  display: grid; grid-template-columns: 1.1fr 1.1fr 1.4fr 1.4fr; gap: 40px;
}
.k2h-footer__heading {
  color: #ffffff; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; margin: 0 0 18px; padding-bottom: 12px;
  border-bottom: 2px solid var(--brand-crimson);
}
.k2h-footer__links { list-style: none; margin: 0; padding: 0; }
.k2h-footer__links li { margin: 0 0 10px; }
.k2h-footer__links a { font-size: 14.5px; color: #b9bac2; }
.k2h-footer__links a:hover { color: #fff; padding-left: 3px; }
.k2h-trust {
  background: linear-gradient(160deg, var(--brand-crimson-dark) 0%, var(--brand-crimson-deep) 100%);
  border: 1px solid rgba(var(--brand-crimson-light-rgb), 0.45); border-radius: 0; padding: 24px 22px;
  box-shadow: 0 8px 26px rgba(0,0,0,.35); height: 100%;
}
.k2h-trust__badge {
  width: 46px; height: 46px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; color: #fff;
  background: rgba(255,255,255,.12); margin-bottom: 14px;
}
.k2h-trust__title { color: #fff !important; border-bottom-color: rgba(255,255,255,.35) !important; }
.k2h-trust__text { color: #f0dede; font-size: 14px; margin: 0 0 16px; }
.k2h-trust__seal {
  display: inline-block; background: #fff; color: var(--brand-crimson); font-weight: 700;
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px;
}
.k2h-news__text { color: #b9bac2; font-size: 14px; margin: 0 0 14px; }
.k2h-news__form { display: flex; margin-bottom: 20px; max-width: 340px; }
.k2h-news__input {
  flex: 1; border: 1px solid #3a3a40; background: #1c1c21; color: #fff;
  padding: 11px 14px; border-radius: 0; font-size: 14px; outline: none; min-width: 0;
}
.k2h-news__input::placeholder { color: #7d7e86; }
.k2h-news__input:focus { border-color: var(--brand-crimson-light); }
.k2h-news__btn {
  border: none; background: var(--brand-crimson); color: #fff; font-weight: 700;
  padding: 0 20px; border-radius: 0; cursor: pointer;
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase; transition: background .2s;
}
.k2h-news__btn:hover { background: var(--brand-crimson-dark); }
.k2h-social { display: flex; gap: 12px; }
.k2h-social__link {
  width: 40px; height: 40px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; color: #cfd0d6;
  background: #1f1f25; border: 1px solid #33333a; transition: all .2s;
}
.k2h-social__link:hover { background: var(--brand-crimson); color: #fff; border-color: var(--brand-crimson); transform: translateY(-2px); }
.k2h-footer__strip { border-top: 1px solid #26262c; background: #0c0c0f; }
.k2h-footer__strip-inner {
  max-width: 1200px; margin: 0 auto; padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.k2h-pay { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.k2h-pay__label { color: #8b8c94; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin-right: 4px; }
.k2h-pay__badge {
  background: #fff; color: #1a1a1a; font-weight: 700; font-size: 12px;
  padding: 6px 12px; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.k2h-secure { display: flex; align-items: center; gap: 8px; color: #9fd0a6; font-size: 13px; font-weight: 600; }
.k2h-footer__bottom {
  max-width: 1200px; margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  border-top: 1px solid #26262c;
}
.k2h-footer__bottom p { margin: 0; color: #8b8c94; font-size: 13px; }
.k2h-footer__legal { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
.k2h-footer__legal a { color: #b9bac2; font-size: 13px; }
@media (max-width: 992px) {
  .k2h-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .k2h-footer__inner { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px 30px; }
  .k2h-footer__strip-inner, .k2h-footer__bottom { flex-direction: column; align-items: flex-start; }
}


/* Footer heading specificity fixes */
.k2h-footer .k2h-footer__heading,
#a11y-site-footer .k2h-footer__heading {
  color: #ffffff !important;
  font-size: 13px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  margin: 0 0 18px !important;
  line-height: 1.3 !important;
}
.k2h-footer .k2h-trust__title,
#a11y-site-footer .k2h-trust__title { color: #ffffff !important; }
.k2h-footer .k2h-footer__links a { color: #b9bac2 !important; }
.k2h-footer .k2h-footer__links a:hover { color:#ffffff !important; }
.k2h-footer .k2h-trust__seal { color: var(--brand-crimson) !important; }
.k2h-footer .k2h-pay__badge { color: #1a1a1a !important; }


/* ============================================================
 *    HERO SECTION FIXES (6.1 - 6.3)
 *    ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,500&display=swap');

/* --- 6.1 Headline & subhead in the new serif --- */
.elementor-element-84e5591 h1,
.elementor-element-84e5591 .elementor-heading-title,
.elementor-element-bf91f56 .elementor-heading-title {
	  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
	  font-weight: 700 !important;
	  letter-spacing: 0.5px !important;
	  line-height: 1.15 !important;
}

/* --- 6.2 Vignette / gradient for text legibility over busy imagery --- */
.elementor-element-84e5591 {
	  position: relative !important;
	  isolation: isolate !important;
	  overflow: hidden !important;
}
.elementor-element-84e5591::before {
	  content: "" !important;
	  position: absolute !important;
	  inset: 0 !important;
	  z-index: 0 !important;
	  pointer-events: none !important;
	  background:above    linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.45) 38%, rgba(0,0,0,0.10) 70%, rgba(0,0,0,0) 100%),
			    radial-gradient(120% 90% at 25% 45%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 60%);
}
.elementor-element-84e5591 > * {
	  position: relative !important;
	  z-index: 1 !important;
}

/* --- 6.3 Refined premium CTA button --- */
.elementor-element-42bdbc9 .elementor-button {
	  padding: 20px 46px !important;
	  letter-spacing: 3px !important;
	  font-weight: 600 !important;
	  text-transform: uppercase !important;
	  border: 1px solid rgba(255,255,255,0.25) !important;
	  border-radius: 0 !important;
	  transition: background-color .35s ease, color .35s ease, box-shadow .35s ease, transform .35s ease, letter-spacing .35s ease !important;
	  box-shadow: 0 6px 22px rgba(0,0,0,0.28) !important;
}
.elementor-element-42bdbc9 .elementor-button:hover {
	  background-color: #ffffff !important;
	  color: var(--brand-crimson) !important;
	  letter-spacing: 4px !important;
	  transform: translateY(-2px) !important;
	  box-shadow: 0 10px 30px rgba(0,0,0,0.35) !important;
}

/* --- 6.3 Hero fills viewport cleanly --- */
.elementor-element-84e5591 {
	  min-height: 100vh !important;
	  background-size: cover !important;
	  background-position: center center !important;
	  padding-top: 120px !important;
	  padding-bottom: 90px !important;
	  justify-content: center !important;
}

/* --- 6.3 Thin scroll cue --- */
.elementor-element-84e5591::after {
	  content: "" !important;
	  position: absolute !important;
	  left: 50% !important;
	  bottom: 26px !important;
	  width: 1px !important;
	  height: 46px !important;
	  z-index: 2 !important;
	  transform: translateX(-50%) !important;
	  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 100%) !important;
	  animation: heroScrollCue 1.8s ease-in-out infinite !important;
}
@keyframes heroScrollCue {
	0%   { opacity: 0.15; transform: translateX(-50%) translateY(-6px); }
	50%  { opacity: 0.9;  transform: translateX(-50%) translateY(0); }
	100% { opacity: 0.15; transform: translateX(-50%) translateY(6px); }
}

}
}
}
}
}
}
}
}
}
/* --- 6.2 override: balanced center-weighted vignette --- */
.elementor-element-84e5591::before {
	  background:above    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.15) 65%, rgba(0,0,0,0.60) 100%),
			    radial-gradient(75% 60% at 50% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0) 100%) !important;
}

}
/* --- 6.2 fix: single-line vignette (multi-line background got stripped) --- */
.elementor-10 .elementor-element.elementor-element-84e5591::before { background-color: transparent !important; background-image: radial-gradient(75% 65% at 50% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.28) 55%, rgba(0,0,0,0.15) 100%), linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.12) 32%, rgba(0,0,0,0.12) 64%, rgba(0,0,0,0.62) 100%) !important; }

/* --- 6.2 fix v2: sanitizer-safe vignette (gradients get stripped by WP) --- */
/* Strengthen Elementor's existing flat overlay for baseline contrast */
.elementor-10 .elementor-element.elementor-element-84e5591 > .elementor-background-overlay,
.elementor-10 .elementor-element.elementor-element-84e5591::before { background-color: rgba(0,0,0,0.42) !important; }
/* Inset box-shadow creates an edge vignette (not stripped by sanitizer) */
.elementor-element-84e5591 { box-shadow: inset 0 0 240px 80px rgba(0,0,0,0.55) !important; }
/* Soft text shadow guarantees legibility of headline & subhead */
.elementor-element-84e5591 .elementor-heading-title { text-shadow: 0 2px 14px rgba(0,0,0,0.65) !important; }

/* --- 6.2 reconcile: gradient overlay now set in Elementor; drop the flat color override & soften vignette --- */
.elementor-10 .elementor-element.elementor-element-84e5591 > .elementor-background-overlay,
.elementor-10 .elementor-element.elementor-element-84e5591::before { background-color: transparent !important; }
.elementor-element-84e5591 { box-shadow: inset 0 0 200px 40px rgba(0,0,0,0.30) !important; }


/* ============================================================
   GLOBAL LAYOUT CONSISTENCY  (added by layout-consistency pass)
   7.1 Section spacing | 7.2 Border radii | 7.3 Gutters/width
   ============================================================ */

/* --- 7.3 Lock a single container width + consistent gutter --- */
.elementor-section > .elementor-container,
.e-con > .e-con-inner {
  max-width: 1170px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
}
/* Uniform grid gutters across product grids & galleries */
.elementor-widget-woocommerce-products ul.products,
ul.products,
.e-gallery-grid,
.elementor-image-gallery .gallery {
  gap: 30px !important;
}

/* --- 7.1 Consistent, generous vertical rhythm on all sections --- */
.elementor-top-section,
.e-con.e-parent {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}
/* Inner sections/containers should not add competing vertical padding */
.elementor-inner-section,
.e-con.e-child {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* --- 7.2 Standardize on one small, near-square radius (luxury) --- */
:root { --lc-radius: 0px; }
.elementor-button,
a.elementor-button,
button,
.button,
.single_add_to_cart_button,
li.product,
.product,
li.product img,
.elementor-widget-image img,
.attachment-woocommerce_thumbnail,
.e-gallery-item,
.elementor-widget-image {
  border-radius: 0 !important;
}

/* Responsive: tighten vertical rhythm on smaller screens */
@media (max-width: 767px) {
  .elementor-top-section,
  .e-con.e-parent {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .elementor-section > .elementor-container,
  .e-con > .e-con-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* --- 7.2 (reinforced) Higher-specificity radius overrides -----
   Beats per-widget (.elementor-element-XXXX) and WooCommerce
   (ul.products li.product) rules that also use !important.       */
body .elementor ul.products li.product,
body ul.products li.product,
body .elementor .elementor-element .elementor-button,
body .elementor-kit-55 .elementor-button,
body .elementor-kit-55 button,
body .elementor .elementor-widget-image img,
body ul.products li.product img,
body .elementor .e-gallery-item,
body .single_add_to_cart_button,
body .woocommerce a.button,
body .woocommerce button.button {
  border-radius: 0 !important;
}


/* --- 7.2 (final) WooCommerce product action buttons --------- */
body .woocommerce ul.products li.product a.button,
body ul.products li.product a.button,
body .woocommerce a.button.add_to_cart_button,
body .woocommerce a.button.product_type_simple,
body a.button.product_type_simple {
  border-radius: 0 !important;
}


/* ===== HEADER / MENU REFINEMENTS (appended) ===== */
/* 1. Nav typography: use Playfair Display to match hero, not Times fallback */
.nav .nav__link {
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: .10em !important;
}
/* 2. Logo legibility on dark header */
.nav__logo img {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)) brightness(1.08) !important;
}
/* 3. Balanced nav spacing (spread instead of bunching right) */
.nav .nav__menu {
  gap: 4px !important;
}
.nav .nav__link {
  padding-left: 14px !important;
  padding-right: 14px !important;
}
/* 4. Sticky header with subtle elevation on the whole Elementor header */
.elementor-location-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  box-shadow: 0 2px 14px rgba(0,0,0,.28) !important;
}
/* 5. Cleaner dropdown: match header charcoal + red top accent */
.nav .nav__dropdown,
.nav__item--has-children .nav__dropdown {
  background: linear-gradient(#1A1C1F, #25282C) !important;
  border-top: 2px solid var(--brand-crimson) !important;
  backdrop-filter: none !important;
}
/* ===== END HEADER REFINEMENTS ===== */


/* === GLOBAL FONT CONSISTENCY: Playfair Display everywhere === */
body,
button, input, select, textarea,
.elementor,
.elementor h1, .elementor h2, .elementor h3, .elementor h4, .elementor h5, .elementor h6,
.elementor p, .elementor a, .elementor span, .elementor li, .elementor div,
.ast-container, .site, .site-content, .site-footer, .site-footer *,
.main-header-menu a, .nav__link, .nav__item,
.woocommerce, .woocommerce *,
.woocommerce-loop-product__title, .ast-loop-product__link,
.ast-woo-product-category, .price, .woocommerce-Price-amount,
.elementor-heading-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
}
/* keep the type-scale variables pointing at Playfair too */
:root {
  --tf-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --tf-sans: 'Playfair Display', Georgia, 'Times New Roman', serif;
}


/* === MATCH HERO FONT (Playfair Display) SITE-WIDE — high-specificity overrides === */
html body .h2v,
html body .h2v .btn,
html body .h2v .eyebrow,
html body .h2v .hero p,
html body .h2v .hero .hero-txt .eyebrow,
html body .h2v .hero .hero-txt p,
html body .elementor-widget-html .h2v .eyebrow,
html body .elementor-widget-html .h2v .hero p,
html body .elementor-widget-html .h2v .hero .hero-txt .eyebrow,
html body .elementor-widget-html .h2v .hero .hero-txt p,
html body .elementor-element-b91fbb18 a.elementor-button .elementor-button-text,
html body .elementor-10 .elementor-element.elementor-element-7c861307 .elementor-heading-title,
html body .woocommerce a.button, html body .woocommerce button.button, html body .woocommerce input.button,
html body .woocommerce #respond input#submit, html body .woocommerce a.button.alt,
html body .woocommerce .checkout-button, html body .woocommerce #place_order,
html body .woocommerce .wc-forward, html body .woocommerce a.wc-backward,
html body .wc-block-components-button {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
}


/* Footer newsletter input width fix */
.k2h-news__form { max-width: 100% !important; width: 100%; }
.k2h-news__input { min-width: 0 !important; flex: 1 1 auto !important; }
.k2h-news__btn { flex: 0 0 auto !important; padding-left: 16px !important; padding-right: 16px !important; white-space: nowrap; }

/* ============================================
   BUTTON SYSTEM CONSOLIDATION
   Primary   = crimson filled (#A50D24)
   Secondary = brass outline (existing --twohype-brass)
   Text link = underline
   Note: collection tiles are image tiles (distinct component, untouched)
   ============================================ */

/* Retire taupe/gold FILLED CTAs --> PRIMARY crimson filled */
.elementor-element-18c5905a .elementor-button,
.elementor-element-4cbc0454 .elementor-button {
  background-color: var(--brand-crimson) !important;
  border-color: var(--brand-crimson) !important;
  color: #fff !important;
}

/* Footer newsletter Subscribe --> PRIMARY crimson filled */
.k2h-news__btn {
  background: var(--brand-crimson) !important;
  color: #fff !important;
}

/* Trust badge pill --> neutral outline (retire competing white filled pill) */
body .k2h-footer span.k2h-trust__seal, .k2h-footer .k2h-trust__seal, span.k2h-trust__seal {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  color: #ffffff !important;
}


/* ===== Homepage fixes (H1, H3, H4) — added via review ===== */

/* H1: Hero placeholder no longer solid crimson — neutral warm taupe matching the lounge photo,
   so no red-ellipse flash before the image paints */
.h2v .hero-img { background: #b9ab99 !important; }

/* H3: CTA tier consistency — "Select options" products must use the SOLID crimson style,
   matching "Add to cart" (purchasable). Info-only ("Read more") stays outline. */
.woocommerce ul.products li.product a.button.ast-select-options-trigger,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product .astra-shop-summary-wrap a.button.product_type_variable,
.woocommerce ul.products li.product .astra-shop-summary-wrap a.button.add_to_cart_button,
.woocommerce ul.products li.product .astra-shop-summary-wrap a.button.ast-select-options-trigger {
  background-color: var(--brand-crimson) !important;
  border: 1px solid var(--brand-crimson) !important;
  color: #ffffff !important;
}
.woocommerce ul.products li.product .astra-shop-summary-wrap a.button.product_type_variable:hover,
.woocommerce ul.products li.product .astra-shop-summary-wrap a.button.add_to_cart_button:hover,
.woocommerce ul.products li.product .astra-shop-summary-wrap a.button.ast-select-options-trigger:hover {
  background-color: var(--brand-crimson-dark) !important;
  border-color: var(--brand-crimson-dark) !important;
  color: #ffffff !important;
}

/* H4: Collection strip tonal consistency — normalize perceived brightness across all five tiles
   (measured luminance: Apparel 28, Drinkware 138, Humidor 69, Home Accents 48, Greek Life 146)
   plus a consistent subtle overlay for label legibility */
.elementor-element-85b8e181 a.elementor-button { filter: brightness(2.6) contrast(0.92); }   /* Apparel (darkest) */
.elementor-element-97cfde81 a.elementor-button { filter: brightness(0.62); }                    /* Drinkware (bright) */
.elementor-element-d52c7960 a.elementor-button { filter: brightness(1.25); }                    /* Humidor */
.elementor-element-68211405 a.elementor-button { filter: brightness(1.75) contrast(0.95); }     /* Modern Home Accents */
.elementor-element-58422658 a.elementor-button { filter: brightness(0.58); }                    /* Greek Life (brightest) */

.elementor-element-85b8e181 a.elementor-button,
.elementor-element-97cfde81 a.elementor-button,
.elementor-element-d52c7960 a.elementor-button,
.elementor-element-68211405 a.elementor-button,
.elementor-element-58422658 a.elementor-button {
  position: relative;
}
.elementor-element-85b8e181 a.elementor-button::before,
.elementor-element-97cfde81 a.elementor-button::before,
.elementor-element-d52c7960 a.elementor-button::before,
.elementor-element-68211405 a.elementor-button::before,
.elementor-element-58422658 a.elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.12) 45%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}


/* ===== PDP FIXES (P1, P4, P5) — added via assistant ===== */

/* P1 — Header 'Product Details' legibility: dark scrim band + high-contrast white text (>=4.5:1) */
.single-product .elementor-element-782ab065 .elementor-widget-heading .elementor-heading-title,
.single-product .elementor-element-159f840a .elementor-heading-title {
  color: #ffffff !important;
  background-color: rgba(17, 17, 17, 0.72);
  display: inline-block;
  padding: 8px 20px;
  border-radius: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* P4 — Remove stray 20px left padding on price widget so it aligns with title/description */
.single-product .elementor-widget-woocommerce-product-price {
  padding-left: 0 !important;
}

/* P5 — Price token: sans-serif 18px / 600 / #111 */
.single-product .elementor-widget-woocommerce-product-price p.price,
.single-product .elementor-widget-woocommerce-product-price p.price .woocommerce-Price-amount,
.single-product .elementor-widget-woocommerce-product-price p.price bdi {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #111111 !important;
}
.single-product .elementor-widget-woocommerce-product-price p.price ins,
.single-product .elementor-widget-woocommerce-product-price p.price ins .woocommerce-Price-amount,
.single-product .elementor-widget-woocommerce-product-price p.price ins bdi {
  color: var(--brand-crimson) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.single-product .elementor-widget-woocommerce-product-price p.price del,
.single-product .elementor-widget-woocommerce-product-price p.price del .woocommerce-Price-amount,
.single-product .elementor-widget-woocommerce-product-price p.price del bdi {
  color: #999999 !important;
  font-weight: 600 !important;
  text-decoration: line-through !important;
}


/* =====================================================================
   CART PAGE GOVERNANCE — C1 (3-tier buttons) & C2 (page header)
   ===================================================================== */

/* ---- C1: 3-TIER BUTTON SYSTEM ON THE CART ----
   Primary = solid crimson  -> Proceed to Checkout
   Secondary = outline       -> Update Cart, Apply Coupon
   No active button may render washed-out/disabled. */

/* PRIMARY (solid crimson) — Proceed to Checkout */
.woocommerce .cart-collaterals .checkout-button,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  background-color: var(--brand-crimson) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 2px solid var(--brand-crimson) !important;
  opacity: 1 !important;
}
.woocommerce .cart-collaterals .checkout-button:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
  background-color: var(--brand-crimson-dark) !important;
  border-color: var(--brand-crimson-dark) !important;
  color: #FFFFFF !important;
}

/* SECONDARY (outline) — Update Cart & Apply Coupon */
.woocommerce table.cart td.actions button[name="update_cart"],
.woocommerce .cart button[name="update_cart"],
.woocommerce table.cart td.actions button[name="apply_coupon"],
.woocommerce .coupon button[name="apply_coupon"],
.woocommerce button.e-apply-coupon {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--brand-crimson) !important;
  border: 2px solid var(--brand-crimson) !important;
  opacity: 1 !important;              /* kill washed-out pink / disabled look */
  cursor: pointer !important;
  box-shadow: none !important;
}
.woocommerce table.cart td.actions button[name="update_cart"]:hover,
.woocommerce .cart button[name="update_cart"]:hover,
.woocommerce table.cart td.actions button[name="apply_coupon"]:hover,
.woocommerce .coupon button[name="apply_coupon"]:hover,
.woocommerce button.e-apply-coupon:hover {
  background-color: var(--brand-crimson) !important;
  color: #FFFFFF !important;
  border-color: var(--brand-crimson) !important;
}
/* Guarantee no active cart button is dimmed */
.woocommerce table.cart td.actions button[name="update_cart"][disabled] {
  opacity: 1 !important;
}

/* ---- C2: GOVERNED PAGE HEADER ("Your Cart", no empty band) ---- */
/* Remove the empty dark dead-space above the cart and inject a title */
body.woocommerce-cart .site-content > .elementor,
body.woocommerce-cart #content > .ast-container {
  padding-top: 0 !important;
}
body.woocommerce-cart .woocommerce {
  position: relative;
}
/* (Pseudo-title removed — replaced by a real Elementor H1 heading on the Cart page) */


/* Cart H1 heading typography enforcement */
body.woocommerce-cart .site-content h1.elementor-heading-title,
body.page-id-39 h1.elementor-heading-title {
  font-family: "Sen", sans-serif !important;
  font-weight: 800 !important;
  font-size: 2rem !important;      /* ~32px, matches prior title */
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--brand-crimson) !important;
  margin: 0 0 24px 0 !important;
}


/* ===== CUSTOM ORDER PAGE GOVERNANCE (CO1-CO5) ===== */
/* Scope: the Custom Order hero/form section (#hero1550) */

/* ---- CO1: Put the form on a solid card/panel over the photo ---- */
.elementor-element-hero1550 .elementor-element-5ed498f {
  background-color: #14110F !important;      /* near-black solid surface */
  padding: 40px !important;                   /* ~space-6 */
  border-radius: 0 !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35) !important;
}
/* keep the fabric photo only as the section background behind the panel */

/* ---- CO2: UI sans-serif (Sen), 48px field height, 4px radius ---- */
.elementor-element-hero1550 .elementor-form .elementor-field-label {
  font-family: "Sen", sans-serif !important;
  font-weight: 700 !important;
  color: #F5F0E6 !important;                  /* light text on near-black card (>=4.5:1) */
}
.elementor-element-hero1550 .elementor-form .elementor-field-group .elementor-field.elementor-field-textual,
.elementor-element-hero1550 .elementor-form input.elementor-field,
.elementor-element-hero1550 .elementor-form select.elementor-field,
.elementor-element-hero1550 .elementor-form textarea.elementor-field {
  font-family: "Sen", sans-serif !important;
  border-radius: 0 !important;
  border: 1px solid #C9C4BC !important;
  color: #14110F !important;
  background-color: #FFFFFF !important;
}
/* 48px height for single-line fields (not textarea) */
.elementor-element-hero1550 .elementor-form input.elementor-field.elementor-field-textual,
.elementor-element-hero1550 .elementor-form select.elementor-field {
  height: 48px !important;
  min-height: 48px !important;
  line-height: 48px !important;
}

/* ---- CO3: SEND button = primary solid crimson, white 600 label ---- */
.elementor-element-hero1550 .elementor-form button[type="submit"].elementor-button {
  background-color: var(--brand-crimson) !important;
  color: #FFFFFF !important;
  font-family: "Sen", sans-serif !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 0 !important;
}
.elementor-element-hero1550 .elementor-form button[type="submit"].elementor-button:hover {
  background-color: var(--brand-crimson-dark) !important;
  color: #FFFFFF !important;
}
/* Crimson checkbox checked state */
.elementor-element-hero1550 .elementor-form input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  accent-color: var(--brand-crimson) !important;           /* native crimson check */
  cursor: pointer !important;
  opacity: 1 !important;
}

/* ---- CO4: sticky-header offset so labels aren't clipped on scroll ---- */
.elementor-element-hero1550 .elementor-field-group,
.elementor-element-hero1550 .elementor-form label,
.elementor-element-hero1550 .elementor-form h1,
.elementor-element-hero1550 .elementor-form h2 {
  scroll-margin-top: 104px;                    /* 88px header + 16px buffer */
}
.elementor-element-hero1550 { position: relative; z-index: 1; }

/* ---- CO5: keep "Custom Order" from breaking awkwardly ---- */
.twohype-custom-hero-cta__title br { display: none !important; }
.twohype-custom-hero-cta__title { text-wrap: balance; }


/* CO2 select fix */
.elementor-element-hero1550 .elementor-form select,
.elementor-element-hero1550 .elementor-form .elementor-select-wrapper select {
  font-family: "Sen", sans-serif !important;
  height: 48px !important;
  min-height: 48px !important;
  line-height: 48px !important;
  border-radius: 0 !important;
  border: 1px solid #C9C4BC !important;
  color: #14110F !important;
  background-color: #FFFFFF !important;
}


/* CO5 spacing fix */
.twohype-custom-hero-cta__title .accent { margin-right: 0.25em !important; }


/* Sticky header: keep nav clear of the WP admin toolbar (logged-in users only) */
body.admin-bar header.elementor-location-header { top: 32px !important; }
@media screen and (max-width: 782px) {
  body.admin-bar header.elementor-location-header { top: 46px !important; }
}
@media screen and (max-width: 600px) {
  body.admin-bar header.elementor-location-header { top: 0 !important; }
}

/* Full-bleed sticky nav bar (no side gutters for content to show through) */
header.elementor-location-header .elementor-element-668d278 > .e-con-inner {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
header.elementor-location-header .elementor-element-0e85d1e {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Header container: cancel the global 80px section padding + the -80px margin hack
   so the sticky header box always matches the nav height at every breakpoint */
header.elementor-location-header > .e-con.e-parent {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Mobile menu: collapse padding when closed so no sliver shows under the nav */
.nav .nav__menu { padding-top: 0 !important; padding-bottom: 0 !important; }
#nav-check:checked ~ .nav .nav__menu { padding-top: 8px !important; padding-bottom: 22px !important; }

/* Theme adds a default 3em indent to lists - strip it inside the nav */
.nav ul { margin-left: 0 !important; }


/* ==========================================================================
   PREMIUM POLISH PACK  —  added 2026-07-27
   (1) heading scale fix   (2) Playfair -> Inter for body/UI text   (3) logo
   The rules earlier in this file force fonts with !important on deep
   selectors, so these overrides use ':not(#_)' purely to add specificity
   weight - it does not change which elements are matched.
   Delete this entire block to revert all three changes.
   ========================================================================== */

/* ---------- 1. HEADING SCALE ---------------------------------------------
   BUG: an earlier rule declared  h2 { font-size: var(--tf-fs-h2) }  but
   --tf-fs-h2 was never defined, so the declaration was invalid and every H2
   fell back to the inherited body size - every section heading on the home
   page rendered at 15px, the same size as body copy.
   Values are in px because the root font-size is 14.592px, not 16px.
   -------------------------------------------------------------------------- */
:root{ --tf-fs-h1:64px; --tf-fs-h2:40px; --tf-fs-h3:28px; --tf-fs-h4:20px; --tf-fs-base:17px; }

html body:not(#_):not(#_) .elementor-widget-heading h2.elementor-heading-title{
  font-size:40px !important; line-height:1.15; font-weight:700; letter-spacing:-.01em;
}
html body:not(#_):not(#_) .elementor-widget-heading h2.elementor-heading-title.elementor-size-xl{ font-size:44px !important; }
html body:not(#_):not(#_) .elementor-widget-heading h3.elementor-heading-title{ font-size:28px !important; line-height:1.25; }
html body:not(#_):not(#_):not(#_):not(#_) h2.woocommerce-loop-product__title{
  font-size:17px !important; line-height:1.35; font-weight:600; letter-spacing:0;
}
@media (max-width:1024px){
  html body:not(#_):not(#_) .elementor-widget-heading h2.elementor-heading-title{ font-size:34px !important; }
  html body:not(#_):not(#_) .elementor-widget-heading h2.elementor-heading-title.elementor-size-xl{ font-size:36px !important; }
}
@media (max-width:767px){
  html body:not(#_):not(#_) .elementor-widget-heading h2.elementor-heading-title,
  html body:not(#_):not(#_) .elementor-widget-heading h2.elementor-heading-title.elementor-size-xl{ font-size:28px !important; }
}

/* ---------- 2. TYPE PAIRING ----------------------------------------------
   Playfair Display was being forced onto every element by a blanket
   !important rule, including 15px body copy. Playfair now covers display
   headings only; Inter - already enqueued by Elementor - carries body and UI.
   -------------------------------------------------------------------------- */
html body:not(#_):not(#_),
html body:not(#_):not(#_) p,
html body:not(#_):not(#_) li,
html body:not(#_):not(#_) dd,
html body:not(#_):not(#_) dt,
html body:not(#_):not(#_) td,
html body:not(#_):not(#_) th,
html body:not(#_):not(#_) blockquote,
html body:not(#_):not(#_) figcaption,
html body:not(#_):not(#_) small,
html body:not(#_):not(#_) label,
html body:not(#_):not(#_) input,
html body:not(#_):not(#_) textarea,
html body:not(#_):not(#_) select,
html body:not(#_):not(#_) button,
html body:not(#_):not(#_) a,
html body:not(#_):not(#_) span,
html body:not(#_):not(#_) div,
html body:not(#_):not(#_) .elementor-widget-text-editor,
html body:not(#_):not(#_) .elementor-widget-text-editor *,
html body:not(#_):not(#_) .elementor-button,
html body:not(#_):not(#_) .elementor-button-text,
html body:not(#_):not(#_) .elementor-nav-menu .elementor-item,
html body:not(#_):not(#_) .nav__link,
html body:not(#_):not(#_) .nav__item,
html body:not(#_):not(#_) .main-header-menu a,
html body:not(#_):not(#_) .site-footer *,
html body:not(#_):not(#_) .woocommerce *,
html body:not(#_):not(#_) .price,
html body:not(#_):not(#_) .woocommerce-Price-amount,
html body:not(#_):not(#_) .h2v *{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
}
html body:not(#_):not(#_){ font-size:17px !important; line-height:1.65; color:#3A3E44;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* display headings keep the serif (heading tags + widget titles, but not the
    sub-headings) */
html body:not(#_):not(#_):not(#_) h1,
html body:not(#_):not(#_):not(#_) h2,
html body:not(#_):not(#_):not(#_) h3,
html body:not(#_):not(#_):not(#_) h4,
html body:not(#_):not(#_):not(#_) h5,
html body:not(#_):not(#_):not(#_) h6,
html body:not(#_):not(#_):not(#_) .elementor-image-box-title,
html body:not(#_):not(#_):not(#_) .elementor-icon-box-title{
  font-family:"Playfair Display",Georgia,"Times New Roman",serif !important;
}

/* exception: card titles read better in the sans at 17px */
html body:not(#_):not(#_):not(#_):not(#_) h2.woocommerce-loop-product__title{ font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important; }

/* restore the small letterspaced product eyebrow (it inherited the new 17px) */
html body:not(#_):not(#_) .ast-woo-product-category,
html body:not(#_):not(#_) .woocommerce-loop-product__category{
  font-size:12px !important; letter-spacing:.09em; line-height:1.4;
}

/* the 2-line clamp on card titles was sized for 15px Playfair; 17px Inter
   needs a third line (was clipping "Etched Crystal Decanter Set with Stand") */
html body:not(#_):not(#_) h2.woocommerce-loop-product__title{
  display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  height:auto !important; min-height:63px !important; overflow:hidden;
}

/* ---------- 3. LOGO LEGIBILITY -------------------------------------------
   Uses the white-outlined horizontal navbar lockup (media library #2182) and
   renders it at 150-162px wide (was 87px, then 138px) so the "2 Hype
   Kreations" wordmark is actually readable. Brightness/saturation lift plus a
   faint white halo separate the dark-red mark from the near-black header.
   1070x450 source -> 162px wide = 68px tall inside the 88px nav bar.
   -------------------------------------------------------------------------- */
html body:not(#_):not(#_) .nav__logo img{
  content:url("https://2hypekreations.rovexen.com/wp-content/uploads/2026/07/2hype-kreations-navbar-logo-e1785112549385.png");
  width:clamp(140px, 15vw, 162px);
  height:auto;
  max-width:none;
  max-height:none;
  filter:
    brightness(1.22) saturate(1.06)
    drop-shadow(0 0 1.5px rgba(255,255,255,.30))
    drop-shadow(0 1px 3px rgba(0,0,0,.55)) !important;
}

/* ---------- 4. FOOTER TRUST CARD ---------- */

/* Deepen the panel. White type was sitting on a fairly bright red, which
   reads cheaper and lowers *perceived* contrast even though the measured
   ratios were already passing. Oxblood gradient instead. */
html body:not(#_):not(#_) .k2h-trust{
  background-image:linear-gradient(160deg,var(--brand-crimson-deep) 0%,var(--brand-crimson-deepest) 100%);
  border-color:rgba(var(--brand-crimson-light-rgb),.5);
}

/* "QUALITY & CRAFTSMANSHIP" needs 241px but the column is 189px, and it
   only fits on one line if you drop to ~11px, which is too small. So keep
   the two lines but tighten leading + tracking so they read as one lockup
   instead of two loose stray lines. */
html body:not(#_):not(#_):not(#_) .k2h-trust__title.k2h-footer__heading{
  letter-spacing:.085em !important;
  line-height:1.15 !important;
  text-wrap:balance;
}

/* Match the rest of the footer's text size and clear the pink cast. */
html body:not(#_):not(#_) .k2h-trust__text{
  font-size:15px;
  line-height:1.6;
  color:#FBF4F4;
}

/* The pill wanted 199px but only had 189px, so it was breaking into a
   two-line badge. Pull it into the card's 22px padding to buy back 28px.
   Deliberately no white-space:nowrap - if the column ever gets narrower
   than ~210px it should wrap rather than overflow the panel. */
html body:not(#_):not(#_) .k2h-trust__seal{
  font-size:11.5px;
  letter-spacing:.03em;
  padding:7px 12px;
  margin-left:-14px;
  margin-right:-14px;
  border-color:rgba(255,255,255,.7);
}

/* The badge was a block-level flex circle with no side margins, so it sat
   flush left while the title, copy and pill were all centred. */
html body:not(#_):not(#_) .k2h-trust__badge{
  margin-left:auto;
  margin-right:auto;
}



/* ============================================================
   BRAND CRIMSON — LEGACY TOKEN CONSOLIDATION
   ------------------------------------------------------------
   Three components each shipped their own private red variable.
   Rather than leave them to drift, every legacy token is re-pointed
   at the single crimson above. Raised specificity (:root:root:root)
   is required because the Elementor HTML widgets declare their
   :root blocks AFTER this stylesheet in the document.
   ============================================================ */
:root:root:root{
  /* Astra global palette (theme + block editor + Elementor globals) */
  --ast-global-color-0:              var(--brand-crimson);
  --ast-global-color-1:              var(--brand-crimson-dark);
  --e-global-color-astglobalcolor0:  var(--brand-crimson);
  --e-global-color-astglobalcolor1:  var(--brand-crimson-dark);

  /* Additional CSS legacy aliases */
  --twohype-crimson:       var(--brand-crimson);
  --twohype-crimson-dark:  var(--brand-crimson-dark);

  /* Header nav widget (was #9B1B25 / #C5202D) */
  --accent:         var(--brand-crimson);
  --accent-bright:  var(--brand-crimson-light);
}

/* Homepage hero widget (was --red #C0122B / --redt #A50D24 / --redh #9E0F23) */
html body .h2v{
  --red:  var(--brand-crimson);
  --redt: var(--brand-crimson);
  --redh: var(--brand-crimson-dark);
}

/* Product-page snippet labels (were #6A2D2D / #7A1F2B / #5F1721) */
.twohk-type-label,
.woocommerce .twohk-type-label{
  color: var(--brand-crimson);
}
.twohk-custom-order-btn,
.woocommerce a.twohk-custom-order-btn{
  background: var(--brand-crimson);
}
.twohk-custom-order-btn:hover,
.woocommerce a.twohk-custom-order-btn:hover{
  background: var(--brand-crimson-dark);
}

/* About-page hero CTA widget (was #9F1D22 base / #B5242A hover).
   Raised specificity: this widget's  is injected after this sheet. */
html body .twohype-hero-cta .twohype-hero-cta__btn--primary{
  background: var(--brand-crimson);
  box-shadow: 0 10px 30px rgba(var(--brand-crimson-rgb), .35);
}
html body .twohype-hero-cta .twohype-hero-cta__btn--primary:hover{
  background: var(--brand-crimson-dark);
  box-shadow: 0 16px 38px rgba(var(--brand-crimson-rgb), .45);
}



/* ==============================================================
   BUTTON SYSTEM - EXACTLY TWO STYLES, ONE SIZE   (2026-07-28)
   --------------------------------------------------------------
   Replaces five competing button sizes:
     hero "Shop Now"              14px / 16-32 padding
     "Shop New Arrivals"          15px / 14-28 (Elementor size-sm)
     "Shop Personalized Gifts"    15px / 14-28, heavier optically
     product "Add to Cart"        12px / 14-20
     footer "Subscribe"           ~10.5px
   ...plus the 3-tier cart button set. From here there are TWO:

     PRIMARY   - filled crimson. The single committing action in a
                 view: Shop Now, Add to Cart, Select Options,
                 Proceed to Checkout, Place Order, Subscribe,
                 any form submit.
     SECONDARY - outlined crimson. Everything else: Custom Orders,
                 Request a Quote, Read More, Update Cart, Apply
                 Coupon, Continue Shopping, Return to Shop.

   ONE size for both:
     14px / 700 / .08em tracking / uppercase
     15px 32px padding / 1.5px border / 0 radius

   Anything that needs to be quieter than SECONDARY should be a
   text link, not a third button. Do not add a third button.

   SECONDARY is the DEFAULT: the shared rule below paints every
   button as the outlined style, and only the explicit PRIMARY
   list opts into the fill. A new button therefore cannot land
   outside the system.

   RADIUS: 0 site-wide. 4px was an awkward middle ground; sharp
   corners sit better with Playfair and the Greek-life heritage
   positioning, and read more luxury in this category.

   EXCLUDED: the five "Shop by Collection" items inside
   .elementor-element-b91fbb18. They use .elementor-button markup
   but are 3:4 photo tiles - a separate component. Their geometry
   is re-asserted at the end of this block.
   ============================================================== */

:root:root:root{
  --btn-font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --btn-fs:         14px;
  --btn-fw:         700;
  --btn-tracking:   .08em;
  --btn-lh:         1.15;
  --btn-pad-y:      15px;
  --btn-pad-x:      32px;
  --btn-bw:         1.5px;
  --btn-radius:     0px;     /* sharp. see note above */

  /* PRIMARY - filled */
  --btn-fill-bg:          var(--brand-crimson);
  --btn-fill-fg:          #ffffff;
  --btn-fill-bg-hover:    var(--brand-crimson-dark);

  /* SECONDARY - outlined */
  --btn-line-fg:          var(--brand-crimson);
  --btn-line-fg-dark:     var(--brand-crimson-light);  /* on dark surfaces */
}

/* ---------- SHARED: one size, one shape, one type treatment
              (also the SECONDARY / outlined default) ---------- */
html body:not(#_):not(#_) .btn,
html body:not(#_):not(#_) a.btn,
html body:not(#_):not(#_) button.btn,
html body:not(#_):not(#_) .elementor-button,
html body:not(#_):not(#_) a.elementor-button,
html body:not(#_):not(#_) .elementor-widget-button .elementor-button,
html body:not(#_):not(#_) .elementor-form .elementor-button,
html body:not(#_):not(#_) .elementor-field-type-submit .elementor-button,
html body:not(#_):not(#_) .twohk-quote-btn,
html body:not(#_):not(#_) .k2h-news__btn,
html body:not(#_):not(#_) .woocommerce a.button,
html body:not(#_):not(#_) .woocommerce button.button,
html body:not(#_):not(#_) .woocommerce input.button,
html body:not(#_):not(#_) .woocommerce a.button.alt,
html body:not(#_):not(#_) .woocommerce button.button.alt,
html body:not(#_):not(#_) .woocommerce input.button.alt,
html body:not(#_):not(#_) .woocommerce #respond input#submit,
html body:not(#_):not(#_) .woocommerce #place_order,
html body:not(#_):not(#_) .woocommerce .checkout-button,
html body:not(#_):not(#_) .checkout-button,
html body:not(#_):not(#_) .woocommerce .single_add_to_cart_button,
html body:not(#_):not(#_) .single_add_to_cart_button,
html body:not(#_):not(#_) ul.products li.product a.button,
html body:not(#_):not(#_) ul.products li.product button.button,
html body:not(#_):not(#_) .wc-block-components-button,
html body:not(#_):not(#_) .wp-block-woocommerce-cart .wc-block-cart__submit-button,
html body:not(#_):not(#_) input[type="submit"].button {
  font-family:      var(--btn-font) !important;
  font-size:        var(--btn-fs) !important;
  font-weight:      var(--btn-fw) !important;
  line-height:      var(--btn-lh) !important;
  letter-spacing:   var(--btn-tracking) !important;
  text-transform:   uppercase !important;
  text-decoration:  none !important;
  text-align:       center !important;
  padding:          var(--btn-pad-y) var(--btn-pad-x) !important;
  border-style:     solid !important;
  border-width:     var(--btn-bw) !important;
  border-radius:    var(--btn-radius) !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color:     var(--btn-line-fg) !important;
  color:            var(--btn-line-fg) !important;
  box-shadow:       none !important;
  text-shadow:      none !important;
  -webkit-appearance: none !important;
          appearance: none !important;
  cursor:           pointer !important;
  transition:       background-color .18s ease, border-color .18s ease, color .18s ease !important;
}

/* ---------- PRIMARY: filled crimson ---------- */
html body:not(#_):not(#_) .btn.btn-solid,
html body:not(#_):not(#_) .elementor-element-18c5905a .elementor-button,
html body:not(#_):not(#_) .elementor-element-4cbc0454 .elementor-button,
html body:not(#_):not(#_) .elementor-form .elementor-button,
html body:not(#_):not(#_) .elementor-field-type-submit .elementor-button,
html body:not(#_):not(#_) .k2h-news__btn,
html body:not(#_):not(#_) .woocommerce a.button.add_to_cart_button,
html body:not(#_):not(#_) .woocommerce ul.products li.product a.button.add_to_cart_button,
html body:not(#_):not(#_) ul.products li.product a.button.add_to_cart_button,
html body:not(#_):not(#_) ul.products li.product button.button.add_to_cart_button,
html body:not(#_):not(#_) .woocommerce a.button.alt,
html body:not(#_):not(#_) .woocommerce button.button.alt,
html body:not(#_):not(#_) .woocommerce input.button.alt,
html body:not(#_):not(#_) .woocommerce #place_order,
html body:not(#_):not(#_) .woocommerce #respond input#submit,
html body:not(#_):not(#_) .single_add_to_cart_button,
html body:not(#_):not(#_) .woocommerce .single_add_to_cart_button,
html body:not(#_):not(#_) .checkout-button,
html body:not(#_):not(#_) .woocommerce .checkout-button,
html body:not(#_):not(#_) .woocommerce .cart-collaterals .checkout-button,
html body:not(#_):not(#_) .woocommerce .wc-proceed-to-checkout a.checkout-button,
html body:not(#_):not(#_) .wc-block-components-button,
html body:not(#_):not(#_) .wp-block-woocommerce-cart .wc-block-cart__submit-button {
  background-color: var(--btn-fill-bg) !important;
  border-color:     var(--btn-fill-bg) !important;
  color:            var(--btn-fill-fg) !important;
  opacity:          1 !important;
}
html body:not(#_):not(#_) .btn.btn-solid:hover,
html body:not(#_):not(#_) .elementor-element-18c5905a .elementor-button:hover,
html body:not(#_):not(#_) .elementor-element-4cbc0454 .elementor-button:hover,
html body:not(#_):not(#_) .elementor-form .elementor-button:hover,
html body:not(#_):not(#_) .elementor-field-type-submit .elementor-button:hover,
html body:not(#_):not(#_) .k2h-news__btn:hover,
html body:not(#_):not(#_) .woocommerce a.button.add_to_cart_button:hover,
html body:not(#_):not(#_) .woocommerce ul.products li.product a.button.add_to_cart_button:hover,
html body:not(#_):not(#_) ul.products li.product a.button.add_to_cart_button:hover,
html body:not(#_):not(#_) ul.products li.product button.button.add_to_cart_button:hover,
html body:not(#_):not(#_) .woocommerce a.button.alt:hover,
html body:not(#_):not(#_) .woocommerce button.button.alt:hover,
html body:not(#_):not(#_) .woocommerce input.button.alt:hover,
html body:not(#_):not(#_) .woocommerce #place_order:hover,
html body:not(#_):not(#_) .woocommerce #respond input#submit:hover,
html body:not(#_):not(#_) .single_add_to_cart_button:hover,
html body:not(#_):not(#_) .woocommerce .single_add_to_cart_button:hover,
html body:not(#_):not(#_) .checkout-button:hover,
html body:not(#_):not(#_) .woocommerce .checkout-button:hover,
html body:not(#_):not(#_) .woocommerce .cart-collaterals .checkout-button:hover,
html body:not(#_):not(#_) .woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
html body:not(#_):not(#_) .wc-block-components-button:hover,
html body:not(#_):not(#_) .wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
html body:not(#_):not(#_) .btn.btn-solid:focus-visible,
html body:not(#_):not(#_) .elementor-element-18c5905a .elementor-button:focus-visible,
html body:not(#_):not(#_) .elementor-element-4cbc0454 .elementor-button:focus-visible,
html body:not(#_):not(#_) .elementor-form .elementor-button:focus-visible,
html body:not(#_):not(#_) .elementor-field-type-submit .elementor-button:focus-visible,
html body:not(#_):not(#_) .k2h-news__btn:focus-visible,
html body:not(#_):not(#_) .woocommerce a.button.add_to_cart_button:focus-visible,
html body:not(#_):not(#_) .woocommerce ul.products li.product a.button.add_to_cart_button:focus-visible,
html body:not(#_):not(#_) ul.products li.product a.button.add_to_cart_button:focus-visible,
html body:not(#_):not(#_) ul.products li.product button.button.add_to_cart_button:focus-visible,
html body:not(#_):not(#_) .woocommerce a.button.alt:focus-visible,
html body:not(#_):not(#_) .woocommerce button.button.alt:focus-visible,
html body:not(#_):not(#_) .woocommerce input.button.alt:focus-visible,
html body:not(#_):not(#_) .woocommerce #place_order:focus-visible,
html body:not(#_):not(#_) .woocommerce #respond input#submit:focus-visible,
html body:not(#_):not(#_) .single_add_to_cart_button:focus-visible,
html body:not(#_):not(#_) .woocommerce .single_add_to_cart_button:focus-visible,
html body:not(#_):not(#_) .checkout-button:focus-visible,
html body:not(#_):not(#_) .woocommerce .checkout-button:focus-visible,
html body:not(#_):not(#_) .woocommerce .cart-collaterals .checkout-button:focus-visible,
html body:not(#_):not(#_) .woocommerce .wc-proceed-to-checkout a.checkout-button:focus-visible,
html body:not(#_):not(#_) .wc-block-components-button:focus-visible,
html body:not(#_):not(#_) .wp-block-woocommerce-cart .wc-block-cart__submit-button:focus-visible {
  background-color: var(--btn-fill-bg-hover) !important;
  border-color:     var(--btn-fill-bg-hover) !important;
  color:            var(--btn-fill-fg) !important;
}

/* ---------- SECONDARY: outlined crimson (explicit, for clarity -
              the shared rule above already supplies this) ------- */
html body:not(#_):not(#_) .btn.btn-out,
html body:not(#_):not(#_) .twohk-quote-btn,
html body:not(#_):not(#_) ul.products li.product a.button:not(.add_to_cart_button),
html body:not(#_):not(#_) .woocommerce ul.products li.product a.button:not(.add_to_cart_button),
html body:not(#_):not(#_) .woocommerce .cart .button[name="update_cart"],
html body:not(#_):not(#_) .woocommerce button[name="apply_coupon"],
html body:not(#_):not(#_) .woocommerce .return-to-shop a.button,
html body:not(#_):not(#_) .woocommerce a.button.wc-backward,
html body:not(#_):not(#_) .woocommerce-message a.button.wc-forward,
html body:not(#_):not(#_) .woocommerce .woocommerce-info a.button {
  background-color: transparent !important;
  border-color:     var(--btn-line-fg) !important;
  color:            var(--btn-line-fg) !important;
  opacity:          1 !important;
}
/* Outlined fills on hover - no third style, just a state */
html body:not(#_):not(#_) .btn.btn-out:hover,
html body:not(#_):not(#_) .twohk-quote-btn:hover,
html body:not(#_):not(#_) ul.products li.product a.button:not(.add_to_cart_button):hover,
html body:not(#_):not(#_) .woocommerce ul.products li.product a.button:not(.add_to_cart_button):hover,
html body:not(#_):not(#_) .woocommerce .cart .button[name="update_cart"]:hover,
html body:not(#_):not(#_) .woocommerce button[name="apply_coupon"]:hover,
html body:not(#_):not(#_) .woocommerce .return-to-shop a.button:hover,
html body:not(#_):not(#_) .woocommerce a.button.wc-backward:hover,
html body:not(#_):not(#_) .woocommerce-message a.button.wc-forward:hover,
html body:not(#_):not(#_) .woocommerce .woocommerce-info a.button:hover,
html body:not(#_):not(#_) .btn.btn-out:focus-visible,
html body:not(#_):not(#_) .twohk-quote-btn:focus-visible,
html body:not(#_):not(#_) ul.products li.product a.button:not(.add_to_cart_button):focus-visible,
html body:not(#_):not(#_) .woocommerce ul.products li.product a.button:not(.add_to_cart_button):focus-visible,
html body:not(#_):not(#_) .woocommerce .cart .button[name="update_cart"]:focus-visible,
html body:not(#_):not(#_) .woocommerce button[name="apply_coupon"]:focus-visible,
html body:not(#_):not(#_) .woocommerce .return-to-shop a.button:focus-visible,
html body:not(#_):not(#_) .woocommerce a.button.wc-backward:focus-visible,
html body:not(#_):not(#_) .woocommerce-message a.button.wc-forward:focus-visible,
html body:not(#_):not(#_) .woocommerce .woocommerce-info a.button:focus-visible {
  background-color: var(--btn-line-fg) !important;
  border-color:     var(--btn-line-fg) !important;
  color:            #ffffff !important;
}

/* ---------- Outlined buttons on dark surfaces ----------
   Crimson-on-near-black fails contrast, so the outline switches
   to the light crimson token. Size and shape are unchanged. */
html body:not(#_):not(#_) .k2h-footer a.button,
html body:not(#_):not(#_) .k2h-footer button:not(.k2h-news__btn),
html body:not(#_):not(#_) .elementor-element-hero1550 a.elementor-button:not([type="submit"]) {
  border-color: var(--btn-line-fg-dark) !important;
  color:        var(--btn-line-fg-dark) !important;
}
html body:not(#_):not(#_) .k2h-footer a.button:hover,
html body:not(#_):not(#_) .k2h-footer button:not(.k2h-news__btn):hover {
  background-color: var(--btn-line-fg-dark) !important;
  color: #1a1a1a !important;
}

/* ---------- Focus ring (accessibility, both styles) ---------- */
html body:not(#_):not(#_) .btn:focus-visible,
html body:not(#_):not(#_) a.btn:focus-visible,
html body:not(#_):not(#_) button.btn:focus-visible,
html body:not(#_):not(#_) .elementor-button:focus-visible,
html body:not(#_):not(#_) a.elementor-button:focus-visible,
html body:not(#_):not(#_) .elementor-widget-button .elementor-button:focus-visible,
html body:not(#_):not(#_) .elementor-form .elementor-button:focus-visible,
html body:not(#_):not(#_) .elementor-field-type-submit .elementor-button:focus-visible,
html body:not(#_):not(#_) .twohk-quote-btn:focus-visible,
html body:not(#_):not(#_) .k2h-news__btn:focus-visible,
html body:not(#_):not(#_) .woocommerce a.button:focus-visible,
html body:not(#_):not(#_) .woocommerce button.button:focus-visible,
html body:not(#_):not(#_) .woocommerce input.button:focus-visible,
html body:not(#_):not(#_) .woocommerce a.button.alt:focus-visible,
html body:not(#_):not(#_) .woocommerce button.button.alt:focus-visible,
html body:not(#_):not(#_) .woocommerce input.button.alt:focus-visible,
html body:not(#_):not(#_) .woocommerce #respond input#submit:focus-visible,
html body:not(#_):not(#_) .woocommerce #place_order:focus-visible,
html body:not(#_):not(#_) .woocommerce .checkout-button:focus-visible,
html body:not(#_):not(#_) .checkout-button:focus-visible,
html body:not(#_):not(#_) .woocommerce .single_add_to_cart_button:focus-visible,
html body:not(#_):not(#_) .single_add_to_cart_button:focus-visible,
html body:not(#_):not(#_) ul.products li.product a.button:focus-visible,
html body:not(#_):not(#_) ul.products li.product button.button:focus-visible,
html body:not(#_):not(#_) .wc-block-components-button:focus-visible,
html body:not(#_):not(#_) .wp-block-woocommerce-cart .wc-block-cart__submit-button:focus-visible,
html body:not(#_):not(#_) input[type="submit"].button:focus-visible {
  outline: 2px solid var(--brand-crimson) !important;
  outline-offset: 2px !important;
}

/* ---------- Genuinely disabled buttons ----------
   PRIMARY sets opacity:1 so no ACTIVE button renders washed out;
   this restores the dimmed state for real [disabled] buttons. */
html body:not(#_):not(#_) .button[disabled],
html body:not(#_):not(#_) button.button:disabled,
html body:not(#_):not(#_) .elementor-button[disabled] {
  opacity: .45 !important;
  cursor: not-allowed !important;
}

/* ---------- EXCLUSION: "Shop by Collection" photo tiles ----------
   Not buttons. Re-assert the tile component after the shared rule
   above (which would otherwise shrink them to button geometry). */
html body:not(#_):not(#_) .elementor-element-b91fbb18 .elementor-button {
  display:          flex !important;
  align-items:      flex-end !important;
  justify-content:  flex-start !important;
  width:            100% !important;
  aspect-ratio:     3 / 4 !important;
  height:           auto !important;
  padding:          18px !important;
  border:           0 !important;
  border-radius:    0 !important;
  background-color: #2a2320 !important;
  color:            #ffffff !important;
  font-size:        var(--btn-fs) !important;
  font-weight:      var(--btn-fw) !important;
  letter-spacing:   var(--btn-tracking) !important;
  text-align:       left !important;
  overflow:         hidden !important;
}
html body:not(#_):not(#_) .elementor-element-b91fbb18 .elementor-button:hover {
  background-color: #2a2320 !important;
  color: #ffffff !important;
}


/* ---------- FULL-WIDTH CONTEXTS (product cards, cart) ----------
   These buttons already fill their container, so horizontal padding
   no longer defines their size - the container does. They keep the
   SAME type size, SAME vertical padding (identical 49px height),
   SAME 1.5px border and SAME 0 radius; only the now-irrelevant side
   padding is trimmed so labels like "Request a Quote" and "Select
   Options" stay on one line inside a 4-up grid column.
   This is the same style at the same size, stretched to fit - it is
   NOT a third button. Do not fork it into one.                     */
html body:not(#_):not(#_) ul.products li.product a.button,
html body:not(#_):not(#_) ul.products li.product button.button,
html body:not(#_):not(#_) ul.products li.product .twohk-quote-btn,
html body:not(#_):not(#_) .woocommerce ul.products li.product a.button,
html body:not(#_):not(#_) .woocommerce ul.products li.product button.button,
html body:not(#_):not(#_) .wc-proceed-to-checkout a.checkout-button {
  display:       block !important;
  width:         100% !important;
  padding-left:  12px !important;
  padding-right: 12px !important;
  white-space:   nowrap !important;
}

/* ---------- Grid guarantee ----------
   SUPERSEDED: the auto-fit column rule that used to live here has been
   replaced by the explicit per-breakpoint column counts in the
   "L2 - PRODUCT GRID" block near the end of this file. auto-fit made the
   column count depend on available width, which produced 3 columns for a
   4-item related-products row (one orphan) and 1 column on mobile where 2
   were wanted. Only the min-width:0 guard is still needed here. */
html body:not(#_):not(#_) ul.products li.product { min-width: 0 !important; }


/* ---------- Footer newsletter: stack, don't shrink ----------
   The standard button (32px side padding) no longer fits beside the
   email field in a ~235px footer column - the field collapsed to
   ~79px. Stack them instead: the field takes the full column, the
   button sits under it at the standard size, full width. No new
   button size is introduced.                                       */
html body:not(#_):not(#_) .k2h-news__form{
  flex-wrap: wrap !important;
  gap: 10px !important;
}
html body:not(#_):not(#_) .k2h-news__form .k2h-news__input{
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 0 !important;
}
html body:not(#_):not(#_) .k2h-news__form .k2h-news__btn{
  flex: 1 1 100% !important;
  width: 100% !important;
  display: block !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}


/* ---------- Coverage: buttons that live OUTSIDE .woocommerce ----------
   "Start a Custom Order" on the product page (.twohk-custom-order-btn)
   was 11.5px / 16px-32px because it is an a.button rendered outside any
   .woocommerce wrapper, so the scoped rules above never reached it.
   These generic selectors close that gap, so a button anywhere on the
   site lands in the system by default.                                */
html body:not(#_):not(#_) a.button,
html body:not(#_):not(#_) button.button,
html body:not(#_):not(#_) input.button,
html body:not(#_):not(#_) .twohk-custom-order-btn,
html body:not(#_):not(#_) .wp-block-button__link,
html body:not(#_):not(#_) .wpcf7-submit,
html body:not(#_):not(#_) input[type="submit"] {
  font-family:      var(--btn-font) !important;
  font-size:        var(--btn-fs) !important;
  font-weight:      var(--btn-fw) !important;
  line-height:      var(--btn-lh) !important;
  letter-spacing:   var(--btn-tracking) !important;
  text-transform:   uppercase !important;
  text-decoration:  none !important;
  text-align:       center !important;
  padding:          var(--btn-pad-y) var(--btn-pad-x) !important;
  border-style:     solid !important;
  border-width:     var(--btn-bw) !important;
  border-radius:    var(--btn-radius) !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color:     var(--btn-line-fg) !important;
  color:            var(--btn-line-fg) !important;
  box-shadow:       none !important;
  text-shadow:      none !important;
  -webkit-appearance: none !important;
          appearance: none !important;
  cursor:           pointer !important;
}
html body:not(#_):not(#_) .twohk-custom-order-btn,
html body:not(#_):not(#_) .wp-block-button__link,
html body:not(#_):not(#_) .wpcf7-submit,
html body:not(#_):not(#_) input[type="submit"] {
  background-color: var(--btn-fill-bg) !important;
  border-color:     var(--btn-fill-bg) !important;
  color:            var(--btn-fill-fg) !important;
}
html body:not(#_):not(#_) .twohk-custom-order-btn:hover,
html body:not(#_):not(#_) .wp-block-button__link:hover,
html body:not(#_):not(#_) .wpcf7-submit:hover,
html body:not(#_):not(#_) input[type="submit"]:hover,
html body:not(#_):not(#_) .twohk-custom-order-btn:focus-visible,
html body:not(#_):not(#_) .wp-block-button__link:focus-visible,
html body:not(#_):not(#_) .wpcf7-submit:focus-visible,
html body:not(#_):not(#_) input[type="submit"]:focus-visible {
  background-color: var(--btn-fill-bg-hover) !important;
  border-color:     var(--btn-fill-bg-hover) !important;
  color:            var(--btn-fill-fg) !important;
}

/* ---------- Single product: quantity field matches the button ----------
   form.cart is a flex row, so the Add to Cart button was being stretched
   to the 52px quantity field and rendered 55px tall - 6px off every other
   button on the site. Bring the field down to the button's height instead
   of letting it dictate a taller button.                                */
html body:not(#_):not(#_) .woocommerce div.product form.cart{
  align-items: stretch !important;
}
html body:not(#_):not(#_) .woocommerce div.product form.cart .quantity,
html body:not(#_):not(#_) .woocommerce div.product form.cart .quantity input.qty{
  height:        49px !important;
  min-height:    49px !important;
  padding:       0 10px !important;
  font-size:     14px !important;
  line-height:   47px !important;
  border-radius: 0 !important;
  box-sizing:    border-box !important;
}


/* ==============================================================
   PRIMARY - FINAL PASS (authoritative)
   --------------------------------------------------------------
   IMPORTANT for future edits: WooCommerce puts its ".woocommerce"
   class on , so descendant selectors written as
   "body .woocommerce a.button" never match on single-product and
   cart pages. Earlier blocks in this file make that mistake, which
   let the shared outlined default win over the crimson fill.
   This pass restates PRIMARY with unscoped selectors at a higher
   specificity so the fill always lands. Add new primary CTAs HERE.
   ============================================================== */
html body:not(#_):not(#_):not(#_) .btn.btn-solid,
html body:not(#_):not(#_):not(#_) .elementor-element-18c5905a .elementor-button,
html body:not(#_):not(#_):not(#_) .elementor-element-4cbc0454 .elementor-button,
html body:not(#_):not(#_):not(#_) .elementor-form .elementor-button,
html body:not(#_):not(#_):not(#_) .elementor-field-type-submit .elementor-button,
html body:not(#_):not(#_):not(#_) .k2h-news__btn,
html body:not(#_):not(#_):not(#_) a.button.add_to_cart_button,
html body:not(#_):not(#_):not(#_) button.add_to_cart_button,
html body:not(#_):not(#_):not(#_) a.button.alt,
html body:not(#_):not(#_):not(#_) button.button.alt,
html body:not(#_):not(#_):not(#_) input.button.alt,
html body:not(#_):not(#_):not(#_) #place_order,
html body:not(#_):not(#_):not(#_) #respond input#submit,
html body:not(#_):not(#_):not(#_) .single_add_to_cart_button,
html body:not(#_):not(#_):not(#_) .checkout-button,
html body:not(#_):not(#_):not(#_) .wc-block-components-button,
html body:not(#_):not(#_):not(#_) .wc-block-cart__submit-button,
html body:not(#_):not(#_):not(#_) .twohk-custom-order-btn,
html body:not(#_):not(#_):not(#_) .wp-block-button__link,
html body:not(#_):not(#_):not(#_) .wpcf7-submit,
html body:not(#_):not(#_):not(#_) input[type="submit"] {
  background-color: var(--btn-fill-bg) !important;
  background-image: none !important;
  border-color:     var(--btn-fill-bg) !important;
  color:            var(--btn-fill-fg) !important;
  opacity:          1 !important;
}
html body:not(#_):not(#_):not(#_) .btn.btn-solid:hover,
html body:not(#_):not(#_):not(#_) .elementor-element-18c5905a .elementor-button:hover,
html body:not(#_):not(#_):not(#_) .elementor-element-4cbc0454 .elementor-button:hover,
html body:not(#_):not(#_):not(#_) .elementor-form .elementor-button:hover,
html body:not(#_):not(#_):not(#_) .elementor-field-type-submit .elementor-button:hover,
html body:not(#_):not(#_):not(#_) .k2h-news__btn:hover,
html body:not(#_):not(#_):not(#_) a.button.add_to_cart_button:hover,
html body:not(#_):not(#_):not(#_) button.add_to_cart_button:hover,
html body:not(#_):not(#_):not(#_) a.button.alt:hover,
html body:not(#_):not(#_):not(#_) button.button.alt:hover,
html body:not(#_):not(#_):not(#_) input.button.alt:hover,
html body:not(#_):not(#_):not(#_) #place_order:hover,
html body:not(#_):not(#_):not(#_) #respond input#submit:hover,
html body:not(#_):not(#_):not(#_) .single_add_to_cart_button:hover,
html body:not(#_):not(#_):not(#_) .checkout-button:hover,
html body:not(#_):not(#_):not(#_) .wc-block-components-button:hover,
html body:not(#_):not(#_):not(#_) .wc-block-cart__submit-button:hover,
html body:not(#_):not(#_):not(#_) .twohk-custom-order-btn:hover,
html body:not(#_):not(#_):not(#_) .wp-block-button__link:hover,
html body:not(#_):not(#_):not(#_) .wpcf7-submit:hover,
html body:not(#_):not(#_):not(#_) input[type="submit"]:hover,
html body:not(#_):not(#_):not(#_) .btn.btn-solid:focus-visible,
html body:not(#_):not(#_):not(#_) .elementor-element-18c5905a .elementor-button:focus-visible,
html body:not(#_):not(#_):not(#_) .elementor-element-4cbc0454 .elementor-button:focus-visible,
html body:not(#_):not(#_):not(#_) .elementor-form .elementor-button:focus-visible,
html body:not(#_):not(#_):not(#_) .elementor-field-type-submit .elementor-button:focus-visible,
html body:not(#_):not(#_):not(#_) .k2h-news__btn:focus-visible,
html body:not(#_):not(#_):not(#_) a.button.add_to_cart_button:focus-visible,
html body:not(#_):not(#_):not(#_) button.add_to_cart_button:focus-visible,
html body:not(#_):not(#_):not(#_) a.button.alt:focus-visible,
html body:not(#_):not(#_):not(#_) button.button.alt:focus-visible,
html body:not(#_):not(#_):not(#_) input.button.alt:focus-visible,
html body:not(#_):not(#_):not(#_) #place_order:focus-visible,
html body:not(#_):not(#_):not(#_) #respond input#submit:focus-visible,
html body:not(#_):not(#_):not(#_) .single_add_to_cart_button:focus-visible,
html body:not(#_):not(#_):not(#_) .checkout-button:focus-visible,
html body:not(#_):not(#_):not(#_) .wc-block-components-button:focus-visible,
html body:not(#_):not(#_):not(#_) .wc-block-cart__submit-button:focus-visible,
html body:not(#_):not(#_):not(#_) .twohk-custom-order-btn:focus-visible,
html body:not(#_):not(#_):not(#_) .wp-block-button__link:focus-visible,
html body:not(#_):not(#_):not(#_) .wpcf7-submit:focus-visible,
html body:not(#_):not(#_):not(#_) input[type="submit"]:focus-visible {
  background-color: var(--btn-fill-bg-hover) !important;
  border-color:     var(--btn-fill-bg-hover) !important;
  color:            var(--btn-fill-fg) !important;
}

/* Disabled state must still read as disabled */
html body:not(#_):not(#_):not(#_) .button[disabled],
html body:not(#_):not(#_):not(#_) button.button:disabled,
html body:not(#_):not(#_):not(#_) .elementor-button[disabled]{
  opacity: .45 !important;
  cursor: not-allowed !important;
}

/* Single product: quantity field matches the button height exactly
   (form.cart is a flex row and was stretching Add to Cart to 55px) */
html body:not(#_):not(#_):not(#_) form.cart{ align-items: stretch !important; }
html body:not(#_):not(#_):not(#_) form.cart .quantity,
html body:not(#_):not(#_):not(#_) form.cart .quantity input.qty{
  height:        49px !important;
  min-height:    49px !important;
  max-height:    49px !important;
  padding:       0 10px !important;
  font-size:     14px !important;
  border-radius: 0 !important;
  box-sizing:    border-box !important;
}


/* ---------- Astra hover-reveal quick-add on the thumbnail ----------
   .ast-on-card-button has the add_to_cart_button class but NOT .button,
   so it escaped every rule above and was still 12px / 14px-20px.
   Same PRIMARY style, same type size; side padding trimmed to 12px so
   it fits over a narrow thumbnail.                                    */
html body:not(#_):not(#_):not(#_) .ast-on-card-button,
html body:not(#_):not(#_):not(#_) a.ast-on-card-button{
  font-family:      var(--btn-font) !important;
  font-size:        var(--btn-fs) !important;
  font-weight:      var(--btn-fw) !important;
  line-height:      var(--btn-lh) !important;
  letter-spacing:   var(--btn-tracking) !important;
  text-transform:   uppercase !important;
  text-decoration:  none !important;
  text-align:       center !important;
  padding:          var(--btn-pad-y) 12px !important;
  border-style:     solid !important;
  border-width:     var(--btn-bw) !important;
  border-radius:    var(--btn-radius) !important;
  background-color: var(--btn-fill-bg) !important;
  background-image: none !important;
  border-color:     var(--btn-fill-bg) !important;
  color:            var(--btn-fill-fg) !important;
  box-shadow:       none !important;
  white-space:      nowrap !important;
}
html body:not(#_):not(#_):not(#_) .ast-on-card-button:hover,
html body:not(#_):not(#_):not(#_) .ast-on-card-button:focus-visible{
  background-color: var(--btn-fill-bg-hover) !important;
  border-color:     var(--btn-fill-bg-hover) !important;
  color:            var(--btn-fill-fg) !important;
}


/* ---------- RADIUS: the last rounded holdouts ----------
   The custom header widget declares its own private radius scale
   (--radius: 12px) inside an inline :root block, so it survived the
   pass above: nav dropdown panels were 12px, dropdown links 8px and
   the cart chip 10px - the only rounded rectangles left on an
   otherwise square site. Re-point the token at 0.
   True circles (border-radius: 50%) and pills (999px) are shapes,
   not radii, and are intentionally left alone.
   To go back to soft corners, change 0px to 2px here and in
   --btn-radius / --lc-radius. Those three tokens are the only
   places radius is decided.                                       */
:root:root:root{ --radius: 0px; }

html body:not(#_):not(#_):not(#_) .nav__dropdown,
html body:not(#_):not(#_):not(#_) .nav__dropdown a,
html body:not(#_):not(#_):not(#_) .nav__cart,
html body:not(#_):not(#_):not(#_) .nav__cart-btn{
  border-radius: 0 !important;
}

/* Badges + tooltips still at 3px from their own component CSS */
html body:not(#_):not(#_):not(#_) .twohk-type-label,
html body:not(#_):not(#_):not(#_) .ast-card-action-tooltip{
  border-radius: 0 !important;
}
/* (.hero-img keeps its 45%/48% organic blob - that is a shape, not a corner) */


/* ==========================================================================
   LAYOUT ROUND — GRID COMPLETENESS, MIRRORED SECTIONS, FOOTER LEGAL
   --------------------------------------------------------------------------
   Five defects addressed:
   L1  Featured Products rendered 7 cards in a 4-col grid -> 4 + 3 + one
       conspicuous empty slot. Grid must only ever show a complete row.
   L2  Product grid was "repeat(auto-fit, minmax(240px,1fr))" which produced
       an unpredictable column count. Replaced with explicit counts so the
       breakpoints are legible and 4 items always divide evenly.
   L3  "Shop By Collection" has 5 tiles. 5 divides into 5 and 1, never into
       3 or 2 without an orphan. Solved with an intentional mosaic rather
       than a ragged last row.
   L4  The two alternating image/text bands were structurally different
       (missing eyebrow, unequal columns, different image fit, different
       vertical rhythm). They are now exact mirrors of each other.
   L5  Footer bottom-bar legal links were flex-nowrap with zero slack, so
       "Contact" clipped to "Con". They now wrap.
   ========================================================================== */


/* --------------------------------------------------------------------------
   L1 — FEATURED PRODUCTS: SHOW A COMPLETE ROW ONLY (4, never 7)
   --------------------------------------------------------------------------
   The query behind this widget only returns 7 products, so 8 is not
   available. We therefore show 4 — one full row at desktop, two full rows
   of 2 at tablet/mobile.
   NOTE FOR THE DURABLE FIX: set the Elementor Products widget's
   "Products Per Page" to 4 (or add a 5th+ product and use 8). This CSS is
   a presentation-level guard so the empty slot can never come back.
   -------------------------------------------------------------------------- */
html body:not(#_):not(#_) .elementor-element-77c9cd04 ul.products > li.product:nth-child(n+5){
  display: none !important;
}


/* --------------------------------------------------------------------------
   L2 — PRODUCT GRID: EXPLICIT COLUMN COUNTS AT EVERY BREAKPOINT
   --------------------------------------------------------------------------
   Was: grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
   Problem: the column count depended on available width, so it was neither
   predictable nor reviewable, and it could not be reasoned about per
   breakpoint. Counts are now declared, and every count divides 4 evenly.
     >= 1024px : 4 columns
     768-1023  : 2 columns
     <  768px  : 2 columns   (explicitly requested)
   -------------------------------------------------------------------------- */
html body:not(#_):not(#_):not(#_) ul.products,
html body:not(#_):not(#_):not(#_) .elementor-widget-woocommerce-products ul.products,
html body:not(#_):not(#_):not(#_) .related ul.products,
html body:not(#_):not(#_):not(#_) .upsells ul.products{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
html body:not(#_):not(#_) ul.products > li.product{
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}

/* The 4-column switch sits at 1100px, not 1024px. Measured reason: at a
   1024px viewport a 4-up card is 210px, leaving a 162px CTA, and the longest
   label ("REQUEST A QUOTE") needs 164px on one line - it overflowed by a
   couple of pixels. The related-products row on single product pages was
   worse at that width (151px CTA). 1100px gives a 181px CTA, a comfortable
   margin, and keeps the button size fixed rather than shrinking type. */
@media (max-width: 1099px){
  html body:not(#_):not(#_):not(#_) ul.products,
  html body:not(#_):not(#_):not(#_) .elementor-widget-woocommerce-products ul.products,
  html body:not(#_):not(#_):not(#_) .related ul.products,
  html body:not(#_):not(#_):not(#_) .upsells ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Below ~560px a 2-up card is ~150-170px wide inside 24px of card padding,
   which is narrower than the widest CTA label ("REQUEST A QUOTE") can be on
   one line. Rather than shrinking the type or the tap target, the label is
   allowed to wrap and every card CTA is pinned to the same min-height so the
   row of cards still lines up. Tap target grows, it does not shrink. */
@media (max-width: 560px){
  html body:not(#_):not(#_):not(#_):not(#_) ul.products li.product a.button,
  html body:not(#_):not(#_):not(#_):not(#_) ul.products li.product .button{
    white-space: normal !important;
    min-height: 66px !important;
    height: auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.25 !important;
  }
}


/* --------------------------------------------------------------------------
   L3 — SHOP BY COLLECTION: NO ORPHAN TILE AT ANY WIDTH
   --------------------------------------------------------------------------
   5 tiles. Previous rules dropped to 3 columns (3 + 2 orphan) then to
   2 columns (2 + 2 + 1 orphan). Both left a ragged last row.
   New scheme, all rows complete:
     >= 1025px  5 equal columns              -> 5
     601-1024   6-col mosaic: 3 x span2, 2 x span3   -> 3 + 2, both full
      2 + 2 + 1 full
   Because tile widths differ inside the mosaic, the 3/4 aspect-ratio is
   released in that range and replaced with a single uniform height, which
   is what keeps the mosaic reading as deliberate rather than broken.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px){
  html body:not(#_):not(#_) .elementor-element-b91fbb18 > .elementor-container{
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 601px) and (max-width: 1024px){
  html body:not(#_):not(#_) .elementor-element-b91fbb18 > .elementor-container{
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  html body:not(#_):not(#_) .elementor-element-b91fbb18 > .elementor-container > .elementor-column:nth-child(1),
  html body:not(#_):not(#_) .elementor-element-b91fbb18 > .elementor-container > .elementor-column:nth-child(2),
  html body:not(#_):not(#_) .elementor-element-b91fbb18 > .elementor-container > .elementor-column:nth-child(3){
    grid-column: span 2 !important;
  }
  html body:not(#_):not(#_) .elementor-element-b91fbb18 > .elementor-container > .elementor-column:nth-child(4),
  html body:not(#_):not(#_) .elementor-element-b91fbb18 > .elementor-container > .elementor-column:nth-child(5){
    grid-column: span 3 !important;
  }
  html body:not(#_):not(#_):not(#_) .elementor-element-b91fbb18 a.elementor-button{
    aspect-ratio: auto !important;
    height: 300px !important;
  }
}

@media (max-width: 600px){
  html body:not(#_):not(#_) .elementor-element-b91fbb18 > .elementor-container{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body:not(#_):not(#_) .elementor-element-b91fbb18 > .elementor-container > .elementor-column:nth-child(5){
    grid-column: 1 / -1 !important;
  }
  /* The full-width 5th tile gets a banner ratio so it does not become a
     towering 3/4 rectangle at double the width of its siblings. */
  html body:not(#_):not(#_):not(#_) .elementor-element-b91fbb18 > .elementor-container > .elementor-column:nth-child(5) a.elementor-button{
    aspect-ratio: 16 / 9 !important;
  }
}


/* --------------------------------------------------------------------------
   L4 — ALTERNATING BANDS: EXACT MIRRORS
   --------------------------------------------------------------------------
   A = .elementor-element-6c8df003  "Fresh Drops For Greek Life"
       text .elementor-element-76859023 (LEFT) | image .elementor-element-4b6db3f (RIGHT)
   B = .elementor-element-7a2ce117  "Personalized Gifts That Stand Out"
       image .elementor-element-3860a464 (LEFT) | text .elementor-element-6e7a1b69 (RIGHT)

   Before this rule the two bands differed in five ways:
     columns      A 555/555 equal      B 566/544 unequal
     image fit    A object-fit cover   B object-fit fill (distorted)
     image ratio  A 1.43               B 1.50
     image pad    A none               B 30px inner right
     text pad     A 50px 20px 50px 0   B 0 0 0 20px
     text align   A flex-start         B center
     rhythm       A eyebrow+20/20/20   B no eyebrow, body margin -12px
   Now both are 50/50, both images are 3/2 cover, both text columns are
   vertically centred with a single 60px gutter on the image-facing side,
   and both share one vertical rhythm.
   -------------------------------------------------------------------------- */

/* 50/50 columns, no stray container padding */
html body:not(#_):not(#_) .elementor-element-6c8df003 > .elementor-container,
html body:not(#_):not(#_) .elementor-element-7a2ce117 > .elementor-container{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
html body:not(#_):not(#_) .elementor-element-76859023,
html body:not(#_):not(#_) .elementor-element-4b6db3f,
html body:not(#_):not(#_) .elementor-element-3860a464,
html body:not(#_):not(#_) .elementor-element-6e7a1b69{
  width: 50% !important;
  flex: 0 0 50% !important;
  max-width: 50% !important;
}

/* Image columns: flush to the column edge, identical ratio and fit */
html body:not(#_):not(#_) .elementor-element-4b6db3f > .elementor-widget-wrap,
html body:not(#_):not(#_) .elementor-element-3860a464 > .elementor-widget-wrap{
  padding: 0 !important;
  align-content: center !important;
  align-items: center !important;
}
html body:not(#_):not(#_) .elementor-element-4b6db3f .elementor-widget-image,
html body:not(#_):not(#_) .elementor-element-3860a464 .elementor-widget-image{
  width: 100% !important;
  margin: 0 !important;
}
html body:not(#_):not(#_):not(#_) .elementor-element-4b6db3f img,
html body:not(#_):not(#_):not(#_) .elementor-element-3860a464 img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 2 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
}

/* Text columns: centred, with the gutter only on the side facing the image */
html body:not(#_):not(#_) .elementor-element-76859023 > .elementor-widget-wrap,
html body:not(#_):not(#_) .elementor-element-6e7a1b69 > .elementor-widget-wrap{
  align-content: center !important;
  align-items: flex-start !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* A: text left, image right -> gutter on the right */
html body:not(#_):not(#_) .elementor-element-76859023 > .elementor-widget-wrap{
  padding-left: 0 !important;
  padding-right: 60px !important;
}
/* B: image left, text right -> gutter on the left (mirrored) */
html body:not(#_):not(#_) .elementor-element-6e7a1b69 > .elementor-widget-wrap{
  padding-left: 60px !important;
  padding-right: 0 !important;
}

/* One shared vertical rhythm: eyebrow 12 / heading 16 / body 28 / button 0 */
html body:not(#_):not(#_) .elementor-element-7c861307{ margin-bottom: 12px !important; }
html body:not(#_):not(#_) .elementor-element-217d334,
html body:not(#_):not(#_) .elementor-element-6ef525ee{ margin-bottom: 16px !important; }
html body:not(#_):not(#_) .elementor-element-2948b43b,
html body:not(#_):not(#_) .elementor-element-671f2c8a{ margin-bottom: 28px !important; }
html body:not(#_):not(#_) .elementor-element-18c5905a,
html body:not(#_):not(#_) .elementor-element-4cbc0454{ margin-bottom: 0 !important; }

/* Identical heading treatment in both bands */
html body:not(#_):not(#_):not(#_) .elementor-element-217d334 .elementor-heading-title,
html body:not(#_):not(#_):not(#_) .elementor-element-6ef525ee .elementor-heading-title{
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

/* Band B was missing the eyebrow label entirely. It is generated here so the
   two bands are structurally identical. The label reuses the site's own
   collection name; it should be promoted to a real Elementor heading widget
   (a copy of .elementor-element-7c861307) when the page is next edited. */
html body:not(#_):not(#_):not(#_) .elementor-element-6ef525ee .elementor-heading-title::before{
  content: "PERSONALIZED GIFTS";
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgb(0, 0, 0);
  margin: 0 0 12px 0;
}

/* Both bands stack below 900px. Kept at 900 rather than 768 because two
   50% columns minus the 60px gutter leaves only ~290px of copy measure at
   tablet, which is too narrow and also made the two bands wrap to a
   different number of lines (423px vs 463px tall). Stacked, both bands
   measure the same. Image first in each so the reading order stays
   image -> copy and the mirroring is preserved. */
@media (max-width: 900px){
  html body:not(#_):not(#_) .elementor-element-76859023,
  html body:not(#_):not(#_) .elementor-element-4b6db3f,
  html body:not(#_):not(#_) .elementor-element-3860a464,
  html body:not(#_):not(#_) .elementor-element-6e7a1b69{
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  html body:not(#_):not(#_) .elementor-element-76859023 > .elementor-widget-wrap,
  html body:not(#_):not(#_) .elementor-element-6e7a1b69 > .elementor-widget-wrap{
    padding: 28px 0 0 0 !important;
  }
  html body:not(#_):not(#_) .elementor-element-4b6db3f{ order: -1 !important; }
}


/* --------------------------------------------------------------------------
   L5 — FOOTER BOTTOM BAR: LEGAL LINKS WRAP INSTEAD OF CLIPPING
   --------------------------------------------------------------------------
   The list was flex-nowrap with flex: 0 1 auto and no min-width, sitting
   exactly flush against the bar's inner right edge. Any narrowing of the
   viewport clipped the final link ("Contact" -> "Con"). Wrapping plus
   min-width: 0 removes the overflow at every width; the bar also centres
   its two halves once there is no longer room for them side by side.
   -------------------------------------------------------------------------- */
html body:not(#_):not(#_) .k2h-footer__bottom{
  padding: 18px 20px !important;
  gap: 10px 20px !important;
  align-items: center !important;
}
html body:not(#_):not(#_) .k2h-footer__legal{
  display: flex !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  justify-content: flex-end !important;
  gap: 8px 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
html body:not(#_):not(#_) .k2h-footer__legal > li{
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

@media (max-width: 640px){
  html body:not(#_):not(#_) .k2h-footer__bottom{
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 20px 16px !important;
  }
  html body:not(#_):not(#_) .k2h-footer__legal{
    justify-content: center !important;
    flex: 0 1 auto !important;
  }
}
/* ===================== END LAYOUT ROUND ===================== */


/* --------------------------------------------------------------------------
   L2b — NARROW-SCREEN CARD PADDING
   --------------------------------------------------------------------------
   At 375px a 2-up card is ~139px wide; with the standard 24px of inner
   padding on each side only 91px remained for the CTA. Trimming the inner
   padding below 480px recovers ~20px of tap-target width without changing
   the card at any other size.
   -------------------------------------------------------------------------- */
@media (max-width: 480px){
  html body:not(#_):not(#_):not(#_) ul.products li.product{
    padding: 20px 14px 22px !important;
  }
  html body:not(#_):not(#_) .elementor-element-77c9cd04 > .elementor-container,
  html body:not(#_):not(#_) .elementor-element-77c9cd04 .elementor-widget-wrap{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}


/* L2c — pin wrapped card CTAs to the exact two-line height (68px) so single-
   line and two-line labels in the same row are identical, not 66 vs 68. */
@media (max-width: 560px){
  html body:not(#_):not(#_):not(#_):not(#_) ul.products li.product a.button,
  html body:not(#_):not(#_):not(#_):not(#_) ul.products li.product .button{
    min-height: 68px !important;
  }
}


/* --------------------------------------------------------------------------
   L4b — ALTERNATING BANDS: BODY COPY PARITY
   --------------------------------------------------------------------------
   Two mismatches survived the first pass because the two bands use
   different Elementor widget types for their body copy:
     Band A  .elementor-element-2948b43b  = Heading widget  -> 15px / 24px,
             no trailing margin on the inner element.
     Band B  .elementor-element-671f2c8a  = Text Editor widget -> 17px /
             28.05px, and its inner  carried a 32px bottom margin, which
             added a phantom 32px of space above the button that band A did
             not have (74px measured vs 42px).
   15px / 24px is the dominant body setting on the page (5 of 9 body blocks),
   so band B is brought down to it rather than inventing a third value, and
   the paragraph's trailing margin is zeroed so the 28px rhythm below the
   copy is the only spacing in play.
   -------------------------------------------------------------------------- */
html body:not(#_):not(#_):not(#_) .elementor-element-671f2c8a,
html body:not(#_):not(#_):not(#_) .elementor-element-671f2c8a .elementor-widget-container,
html body:not(#_):not(#_):not(#_) .elementor-element-671f2c8a p{
  font-size: 15px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  color: rgba(0, 0, 0, 0.8) !important;
}
html body:not(#_):not(#_):not(#_) .elementor-element-671f2c8a p{
  margin-top: 0 !important;
}
html body:not(#_):not(#_):not(#_) .elementor-element-671f2c8a p:last-child{
  margin-bottom: 0 !important;
}
/* Measure is already identical (both copy blocks compute to 430px wide), so
   no max-width is imposed here. Band B's paragraph still runs to 3 lines vs
   band A's 2 purely because its sentence is 10 characters longer - a copy
   matter, not a layout one. */


/* ==========================================================================
   L2d — SHOP ARCHIVE USES AN ELEMENTOR LOOP GRID, NOT ul.products
   --------------------------------------------------------------------------
   The archive at /shop/ renders through a Loop Grid widget
   (.elementor-element-8e2b98a > .elementor-loop-container.elementor-grid).
   Its ul.products is present but empty/zero-size, so none of the
   ul.products rules above reach it. Two consequences were measured:

   a) Column count came from Elementor's own
      elementor-grid-3 / -tablet-2 / -mobile-1 classes, i.e. ONE column
      below 768px. The brief calls for two columns below 768px, so the
      mobile case is overridden here. Tablet (2) and desktop (3) already
      match and are left alone - the archive has a filter sidebar, so 3 is
      the correct desktop count for its narrower content well.

   b) The CTA inside a loop card kept the standalone 32px side padding
      instead of the 12px in-card padding, so at the 3-column desktop size
      "REQUEST A QUOTE" needed 216px inside a 213px card and wrapped to two
      lines - 65px tall next to 49px "ADD TO CART" buttons in the same row.
      Loop cards are now given the same in-card CTA treatment as
      ul.products cards.
   ========================================================================== */

/* (a) two columns below 768px */
@media (max-width: 767px){
  html body:not(#_):not(#_):not(#_) .elementor-widget-loop-grid .elementor-loop-container.elementor-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* (b) in-card CTA treatment: 12px side padding, full width of the card */
html body:not(#_):not(#_):not(#_):not(#_) .elementor-loop-container a.button,
html body:not(#_):not(#_):not(#_):not(#_) .elementor-loop-container button.button,
html body:not(#_):not(#_):not(#_):not(#_) .elementor-loop-container .e-loop-add-to-cart-form .button{
  padding-left: 12px !important;
  padding-right: 12px !important;
  white-space: nowrap !important;
  width: 100% !important;
  min-height: 49px !important;
  height: 49px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Below 480px a 2-up loop card is ~165px wide, which is narrower than the
   longest label can be on one line. Same treatment as the ul.products cards:
   let it wrap and pin every CTA to the two-line height so the row stays
   aligned and the tap target grows rather than shrinks. */
@media (max-width: 479px){
  html body:not(#_):not(#_):not(#_):not(#_) .elementor-loop-container a.button,
  html body:not(#_):not(#_):not(#_):not(#_) .elementor-loop-container button.button,
  html body:not(#_):not(#_):not(#_):not(#_) .elementor-loop-container .e-loop-add-to-cart-form .button{
    white-space: normal !important;
    height: auto !important;
    min-height: 68px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    text-align: center !important;
    line-height: 1.25 !important;
  }
}


/* L2e — loop-card CTA should fill the card width like the ul.products cards
   do. The add-to-cart widget is a flex item in a row container, so it was
   shrinking to its label: 136px for "ADD TO CART" next to 177px for
   "REQUEST A QUOTE" in the same row. Stretching the widget and its form
   wrappers makes every CTA the width of its card, so the grid reads as one
   system instead of a row of differently sized buttons. */
html body:not(#_):not(#_):not(#_) .elementor-loop-container .elementor-widget-woocommerce-product-add-to-cart,
html body:not(#_):not(#_):not(#_) .elementor-loop-container .elementor-add-to-cart,
html body:not(#_):not(#_):not(#_) .elementor-loop-container .e-loop-add-to-cart-form-container,
html body:not(#_):not(#_):not(#_) .elementor-loop-container .e-loop-add-to-cart-form{
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  align-self: stretch !important;
}


/* --------------------------------------------------------------------------
   L6 — "START A CUSTOM ORDER" ON SINGLE PRODUCT PAGES
   --------------------------------------------------------------------------
   Not part of the layout brief, but it was the last button on the site that
   broke the single-size rule: below ~1100px its container narrows to
   236-285px while the label needs ~272px at the standalone 32px side
   padding, so it wrapped to two lines and measured 65px instead of 49px.
   It already stretches to the full width of its container, which is exactly
   the "full-width in a narrow container" case that the rest of the system
   handles with 12px side padding. Same treatment applied here, so the label
   stays on one line and the button stays 49px.
   -------------------------------------------------------------------------- */
@media (max-width: 1099px){
  html body:not(#_):not(#_):not(#_):not(#_) .twohk-custom-order-btn{
    padding-left: 12px !important;
    padding-right: 12px !important;
    white-space: nowrap !important;
    height: 49px !important;
    min-height: 49px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* ==========================================================================
   L7 — SHOP ARCHIVE PRODUCT TITLES WERE RENDERING AT THE H1 SIZE
   --------------------------------------------------------------------------
   Cause: the modular type scale from the earlier heading pass declares
     h1, .entry-title { font-size: var(--tf-fs-h1) !important; }
   and --tf-fs-h1 is 64px. On this site .entry-title never lands on a real
   H1 - it only ever appears on product titles:
     shop archive card ... 
     single product .... 
   The single product H2 is already caught by the later
   ".elementor-widget-heading h2.elementor-heading-title" rule (40px), so it
   was fine. The archive's H4 had no later rule to catch it, so it inherited
   the 64px H1 size - at 430px that broke "4 Piece Diamond Phi Nu Pi
   Decanter Set" one word per line and left the card almost entirely title.

   Fix: card titles are given the same treatment the other product-card
   title already uses (h2.woocommerce-loop-product__title, 17px Inter /
   1.35 / 600 / 0 tracking), so both grids share one card-title style. The
   .entry-title rule itself is left intact so any real post or page title
   elsewhere on the site keeps the H1 scale; this simply outranks it for
   product titles specifically.
   ========================================================================== */
html body:not(#_):not(#_):not(#_):not(#_) .elementor-loop-container .product_title,
html body:not(#_):not(#_):not(#_):not(#_) .elementor-loop-container h4.product_title,
html body:not(#_):not(#_):not(#_):not(#_) ul.products li.product .product_title,
html body:not(#_):not(#_):not(#_):not(#_) h4.product_title.entry-title{
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* The single product page title stays on the H2 step of the scale. Stated
   explicitly here so it no longer depends on the .entry-title / .elementor-
   widget-heading specificity race that produced this bug in the first place. */
html body:not(#_):not(#_):not(#_):not(#_) h2.product_title.entry-title,
html body:not(#_):not(#_):not(#_):not(#_) h1.product_title.entry-title{
  font-size: 40px !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
@media (max-width: 1024px){
  html body:not(#_):not(#_):not(#_):not(#_) h2.product_title.entry-title,
  html body:not(#_):not(#_):not(#_):not(#_) h1.product_title.entry-title{
    font-size: 34px !important;
  }
}
@media (max-width: 767px){
  html body:not(#_):not(#_):not(#_):not(#_) h2.product_title.entry-title,
  html body:not(#_):not(#_):not(#_):not(#_) h1.product_title.entry-title{
    font-size: 28px !important;
  }
}


/* --------------------------------------------------------------------------
   L7b — CARD CTAs SIT ON A COMMON BASELINE
   --------------------------------------------------------------------------
   With the titles back at 17px, a second problem became visible that the
   64px titles had been hiding: product names run to different line counts,
   so the "Add to Cart" button sat at a different height in each card of the
   same row (measured 535 / 563 / 591px from the top of otherwise
   equal-height cards).
   The loop card is a flex column inside a block-level loop item, and the
   column was only as tall as its content, so there was nothing for the
   button to be pushed against. Giving the card container the full item
   height, letting the text block grow into it, and then pinning the
   add-to-cart widget with margin-top:auto puts every CTA on one baseline
   without truncating any product name.
   -------------------------------------------------------------------------- */
html body:not(#_):not(#_):not(#_) .elementor-loop-container .e-loop-item > .e-con{
  height: 100% !important;
}
html body:not(#_):not(#_):not(#_) .elementor-loop-container .e-loop-item > .e-con > .e-con{
  flex: 1 1 auto !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}
html body:not(#_):not(#_):not(#_) .elementor-loop-container .elementor-widget-woocommerce-product-add-to-cart{
  margin-top: auto !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
}


/* --------------------------------------------------------------------------
   L7c — SAME BASELINE FIX FOR THE ASTRA/WOO CARD GRID
   --------------------------------------------------------------------------
   The homepage Featured Products grid uses Astra's card markup rather than
   an Elementor loop item, and had the same drift: cards were equal height
   (741px) but the summary block was only as tall as its content (155px vs
   195px), so a one-line product name lifted its CTA 40px above its
   neighbours. Same remedy: the summary block grows into the card and the
   CTA is pinned to the bottom.
   -------------------------------------------------------------------------- */
html body:not(#_):not(#_):not(#_) ul.products li.product .astra-shop-summary-wrap{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
html body:not(#_):not(#_):not(#_) ul.products li.product .astra-shop-summary-wrap > a.button,
html body:not(#_):not(#_):not(#_) ul.products li.product .astra-shop-summary-wrap > .button{
  margin-top: auto !important;
  flex: 0 0 auto !important;
}


/* ==========================================================================
   L8 — SHOP SIDEBAR CATEGORY COUNTS LANDED ON THE WRONG LINE
   --------------------------------------------------------------------------
   WooCommerce core floats the count span right:
     .widget_product_categories .product-categories .count { float: right }
   A float can only sit on a line that still has room for it, and the span
   comes after the label in source order. Two of the eighteen categories have
   labels long enough to fill the line ("Greek Life & Social Organizations",
   "Personalized Travel Essentials"), so their counts were pushed down onto
   the following line - measured 24px below their own label, which read as
   the count belonging to the NEXT category.

   The float is replaced with a flex row: label on the left, count pinned
   right with margin-left:auto, both on the same baseline. Long labels now
   wrap under themselves instead of evicting the count. The disc markers were
   also hanging outside the widget (list-style-position: outside with zero
   padding), so they are redrawn inline as a pseudo-element in the same
   colour and everything now sits inside the sidebar box.
   ========================================================================== */
html body:not(#_):not(#_):not(#_) .widget_product_categories .product-categories,
html body:not(#_):not(#_):not(#_) .widget_product_categories .product-categories ul{
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
html body:not(#_):not(#_):not(#_) .widget_product_categories .product-categories li{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  column-gap: 10px !important;
  row-gap: 0 !important;
  list-style: none !important;
}
/* Top-level items only. Sub-category items already have their own marker -
   a chevron built from two borders and rotated 45deg - and forcing a bullet
   into that pseudo-element inherited the rotation, so the sub-item's marker
   rendered as a tilted dot. The child marker is left untouched. */
html body:not(#_):not(#_):not(#_) .widget_product_categories .product-categories > li::before{
  content: "\2022";
  flex: 0 0 auto;
  width: 10px;
  color: rgb(58, 62, 68);
  line-height: inherit;
}
/* flex-basis 0, not auto. With flex-wrap enabled the browser breaks lines
   using each item's *hypothetical* size before it shrinks anything, so an
   "auto" basis let a long label claim the whole line and pushed the count
   down to a second row at 375px. A zero basis means the label never
   contributes to that decision: it grows into whatever space is left after
   the count, and its text wraps instead. */
html body:not(#_):not(#_):not(#_) .widget_product_categories .product-categories li > a{
  flex: 1 1 0% !important;
  min-width: 0 !important;
  overflow-wrap: break-word !important;
}
html body:not(#_):not(#_):not(#_) .widget_product_categories .product-categories .count{
  float: none !important;
  display: block !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  text-align: right !important;
  white-space: nowrap !important;
}
/* a nested sub-category list takes its own full-width row under its parent */
html body:not(#_):not(#_):not(#_) .widget_product_categories .product-categories li > ul{
  flex: 1 1 100% !important;
  padding-left: 20px !important;
  margin: 0 !important;
}


/* L8b — the sub-category chevron marker is absolutely positioned inside its
   (already relative) li with top set to a full line-height. On a single-line
   item that put it on the baseline edge, and once a long sub-category label
   wrapped to two lines it dropped onto the second line, away from its own
   text. Pinned to the vertical centre of the first line instead, so it holds
   whether the label runs to one line or several. */
html body:not(#_):not(#_):not(#_) .widget_product_categories .product-categories li ul li{
  position: relative !important;
}
html body:not(#_):not(#_):not(#_) .widget_product_categories .product-categories li ul li::before{
  top: 11px !important;
  left: 0 !important;
}


/* ============================================================ */
/* L9 - ALTERNATING BANDS: MATCHING MOBILE STACK ORDER */
/* ------------------------------------------------------------ */
/* Both bands carry .elementor-reverse-mobile, but their authored */
/* column order is opposite: New Arrivals is text-then-image and */
/* Personalized Gifts is image-then-text. One shared reverse class */
/* applied to opposite source orders stacked New Arrivals */
/* image-first and Personalized Gifts text-first once the columns */
/* went full width, so the pair stopped reading as a mirrored set */
/* below 768px. Pin Personalized Gifts to image-first so both */
/* bands stack identically and stay exact mirrors at every width. */
/* ============================================================ */
@media (max-width: 767px){ html body:not(#_):not(#_) .elementor-element-7a2ce117 > .elementor-container > .elementor-column.elementor-element-3860a464{ order: -1 !important; } html body:not(#_):not(#_) .elementor-element-7a2ce117 > .elementor-container > .elementor-column.elementor-element-6e7a1b69{ order: 10 !important; } }

/* == POLISH PASS: hero crop / card chip / logo == */

/* 1) HERO IMAGE — retire the circular/blob crop.
   Was: border-radius:45% / 48% (an ellipse). A shallow arch keeps the
   softness but stops fighting the sharp rectangular cards below. */
html body .h2v .hero-img{
  border-radius: 50% 50% 8px 8px / 30% 30% 8px 8px !important;
  overflow: hidden !important;
  box-shadow: 0 28px 60px -28px rgba(53, 4, 9, 0.42) !important;
}

/* 2) PRODUCT CARDS — #F0F5FA was a pale blue-lilac that appears nowhere
   else in the palette. Replaced with a warm bone neutral, and the
   MADE-TO-ORDER chip moved onto charcoal so it reads as deliberate. */
ul.products li.product .astra-shop-thumbnail-wrap,
ul.products li.product .astra-shop-thumbnail-wrap img,
ul.products li.product img.attachment-woocommerce_thumbnail,
ul.products li.product img.wp-post-image{
  background-color: #F7F3EC !important;
}
ul.products li.product .twohk-type-label--card,
.woocommerce ul.products li.product .twohk-type-label--card{
  background-color: #2A2320 !important;
  color: #F3EDE4 !important;
  border: 0 !important;
  letter-spacing: 0.14em !important;
}

/* 3) HEADER LOGO — nudge the render size up so "KREATIONS" is legible
   at 1x. (A cleaner wordmark asset is still the real fix.) */
html body .h2v .nav{
  height: 94px !important;
}
html body .h2v .nav__logo img{
  height: 74px !important;
  width: auto !important;
}
@media (max-width: 767px){
  html body .h2v .nav{ height: 78px !important; }
  html body .h2v .nav__logo img{ height: 58px !important; }
}


/* == TRUST STRIP full-bleed == */
/* The "How Custom Orders Work" + heritage strip lives in one HTML widget.
   Let its tinted bands run edge-to-edge instead of sitting inside the
   1170px content rail. */
html body .elementor-element-1ed16d3 > .elementor-container{
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* == WARM NEUTRAL BAND RHYTHM == */
/* #F0F5FA (pale blue-lilac) was the only cool neutral in an otherwise
   warm crimson/cream/charcoal palette. Retired site-wide in favour of a
   warm bone, and the closing bands now step down in value:
   white -> bone -> charcoal -> footer. */
html body .elementor-element-7a2ce117{
  background-color: #F7F3EC !important;
}
html body .twohk-trust .tk-steps{
  background: #FFFFFF !important;
  border-top: 1px solid rgba(42,35,32,.10);
}


/* == TRUST STRIP zero section padding == */
/* The strip supplies its own vertical rhythm, so drop the section's
   default 80px so the charcoal band meets the footer cleanly. */
html body .elementor-element-1ed16d3{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* == FIX: restore collection tile photography == */
/* BUG: the global button system above uses
   "html body:not(#_):not(#_) .elementor-button { background-image: none !important; }"
   to strip gradients from buttons. The five Shop-by-Collection tiles are
   Elementor buttons, so that reset was silently wiping their category
   photography and leaving flat charcoal chips. Re-assert the tile images
   with one extra :not() so they outrank the reset. */
html body:not(#_):not(#_):not(#_) .elementor-element-85b8e181 a.elementor-button{
  background-image: url('https://2hypekreations.rovexen.com/wp-content/uploads/2026/05/custom-embroidered-bomber-jacket-navy-crimson-letters-branded-hanger-300x300.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
html body:not(#_):not(#_):not(#_) .elementor-element-97cfde81 a.elementor-button{
  background-image: url('https://2hypekreations.rovexen.com/wp-content/uploads/2026/05/kappa-alpha-psi-faceted-glass-decanter-set-black-display-stand-angular-tumbler-quartet_1-300x300.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
html body:not(#_):not(#_):not(#_) .elementor-element-d52c7960 a.elementor-button{
  background-image: url('https://2hypekreations.rovexen.com/wp-content/uploads/2026/03/kappa-alpha-psi-leather-accessories-luxury-product-show-1024x683.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
html body:not(#_):not(#_):not(#_) .elementor-element-68211405 a.elementor-button{
  background-image: url('https://2hypekreations.rovexen.com/wp-content/uploads/2026/06/custom-etched-crest-whiskey-tumbler-set-600x600.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
html body:not(#_):not(#_):not(#_) .elementor-element-58422658 a.elementor-button{
  background-image: url('https://2hypekreations.rovexen.com/wp-content/uploads/2026/05/custom-full-color-embroidered-crewneck-sweatshirt-multi-thread-crest-personalized-300x300.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}


/* == FIX: collection tile tone + label legibility == */
/* The per-tile "filter: brightness()" pass was normalising photo luminance,
   but filter applies to the whole element — so it also dimmed the white
   label (Drinkware's label was rendering at ~62% grey) and washed out the
   scrim. Replaced with: no filter, a flat per-tile wash on ::after for tone,
   and a stronger bottom gradient on ::before for label legibility. */
html body:not(#_):not(#_):not(#_) .elementor-element-85b8e181 a.elementor-button,
html body:not(#_):not(#_):not(#_) .elementor-element-97cfde81 a.elementor-button,
html body:not(#_):not(#_):not(#_) .elementor-element-d52c7960 a.elementor-button,
html body:not(#_):not(#_):not(#_) .elementor-element-68211405 a.elementor-button,
html body:not(#_):not(#_):not(#_) .elementor-element-58422658 a.elementor-button{
  filter: none !important;
}

/* flat tonal wash — evens out the five photos without touching the text */
html body:not(#_):not(#_):not(#_) .elementor-element-85b8e181 a.elementor-button::after,
html body:not(#_):not(#_):not(#_) .elementor-element-97cfde81 a.elementor-button::after,
html body:not(#_):not(#_):not(#_) .elementor-element-d52c7960 a.elementor-button::after,
html body:not(#_):not(#_):not(#_) .elementor-element-68211405 a.elementor-button::after,
html body:not(#_):not(#_):not(#_) .elementor-element-58422658 a.elementor-button::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  transition: background .4s ease !important;
}
html body:not(#_):not(#_):not(#_) .elementor-element-85b8e181 a.elementor-button::after{ background: rgba(0,0,0,0.00); }
html body:not(#_):not(#_):not(#_) .elementor-element-97cfde81 a.elementor-button::after{ background: rgba(0,0,0,0.30); }
html body:not(#_):not(#_):not(#_) .elementor-element-d52c7960 a.elementor-button::after{ background: rgba(0,0,0,0.10); }
html body:not(#_):not(#_):not(#_) .elementor-element-68211405 a.elementor-button::after{ background: rgba(0,0,0,0.06); }
html body:not(#_):not(#_):not(#_) .elementor-element-58422658 a.elementor-button::after{ background: rgba(0,0,0,0.32); }

/* bottom scrim so bottom-left labels stay readable over busy photography */
html body:not(#_):not(#_):not(#_) .elementor-element-85b8e181 a.elementor-button::before,
html body:not(#_):not(#_):not(#_) .elementor-element-97cfde81 a.elementor-button::before,
html body:not(#_):not(#_):not(#_) .elementor-element-d52c7960 a.elementor-button::before,
html body:not(#_):not(#_):not(#_) .elementor-element-68211405 a.elementor-button::before,
html body:not(#_):not(#_):not(#_) .elementor-element-58422658 a.elementor-button::before{
  background: linear-gradient(to top,
      rgba(0,0,0,0.88) 0%,
      rgba(0,0,0,0.62) 22%,
      rgba(0,0,0,0.26) 48%,
      rgba(0,0,0,0.04) 100%) !important;
  z-index: 1 !important;
}

html body:not(#_):not(#_):not(#_) .elementor-element-85b8e181 a.elementor-button .elementor-button-text,
html body:not(#_):not(#_):not(#_) .elementor-element-97cfde81 a.elementor-button .elementor-button-text,
html body:not(#_):not(#_):not(#_) .elementor-element-d52c7960 a.elementor-button .elementor-button-text,
html body:not(#_):not(#_):not(#_) .elementor-element-68211405 a.elementor-button .elementor-button-text,
html body:not(#_):not(#_):not(#_) .elementor-element-58422658 a.elementor-button .elementor-button-text{
  color: #FFFFFF !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55) !important;
}

/* hover: the original hover rules pointed at a stale element id */
html body:not(#_):not(#_):not(#_) .elementor-element-85b8e181 a.elementor-button:hover::before,
html body:not(#_):not(#_):not(#_) .elementor-element-97cfde81 a.elementor-button:hover::before,
html body:not(#_):not(#_):not(#_) .elementor-element-d52c7960 a.elementor-button:hover::before,
html body:not(#_):not(#_):not(#_) .elementor-element-68211405 a.elementor-button:hover::before,
html body:not(#_):not(#_):not(#_) .elementor-element-58422658 a.elementor-button:hover::before{
  background: linear-gradient(to top,
      rgba(0,0,0,0.94) 0%,
      rgba(0,0,0,0.72) 26%,
      rgba(0,0,0,0.38) 52%,
      rgba(0,0,0,0.12) 100%) !important;
}
html body:not(#_):not(#_):not(#_) .elementor-element-85b8e181 a.elementor-button:hover,
html body:not(#_):not(#_):not(#_) .elementor-element-97cfde81 a.elementor-button:hover,
html body:not(#_):not(#_):not(#_) .elementor-element-d52c7960 a.elementor-button:hover,
html body:not(#_):not(#_):not(#_) .elementor-element-68211405 a.elementor-button:hover,
html body:not(#_):not(#_):not(#_) .elementor-element-58422658 a.elementor-button:hover{
  background-size: 110% !important;
}


/* == MADE-TO-ORDER chip: one treatment everywhere == */
/* The home page uses the Woo products widget (ul.products li.product) while
   the shop archive uses an Elementor loop grid, so the chip needed scoping
   per-container before. One rule for the card variant instead — product-page
   labels (.twohk-type-label without --card) are untouched. */
html body .twohk-type-label--card,
html body .woocommerce .twohk-type-label--card{
  background-color: #2A2320 !important;
  color: #F3EDE4 !important;
  border: 0 !important;
  letter-spacing: 0.14em !important;
}

/* ...and the archive loop card's media panel was another cool pale blue
   (#F3F5F8). Warm it to match the rest of the palette. */
html body .e-loop-item .elementor-element-52724e0b{
  background-color: #F7F3EC !important;
}


/* ==============================================================
   NAV DROPDOWN FIXES
   1. Hover bridge across the 14px gap under each parent link
   2. Sticky :hover disabled on non-hover (touch) pointers
   3. Mobile submenus driven by .open (tap) instead of :hover
   NOTE: --nav-dd-gap must match the offset used in
   .nav__dropdown { top: calc(100% + 14px) }
   ============================================================== */
:root { --nav-dd-gap: 14px; }

/* 1. Invisible strip filling the gap between the parent link and
      the panel, so the pointer never leaves the  on the way
      down. It is a child of .nav__dropdown, so it inherits
      pointer-events: none while the panel is closed. */
@media (hover: hover) and (min-width: 961px) {
  .nav__dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--nav-dd-gap) * -1);
    height: var(--nav-dd-gap);
  }
}

/* 2. On touch, :hover latches and is what allows two panels to be
      visible at once. Only .open may open a panel there. */
@media (hover: none) {
  .nav .nav__item--has-children:not(.open) > .nav__dropdown {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .nav .nav__item--has-children:not(.open) > .nav__dropdown::after {
    display: none;
  }
}

/* 3. Mobile drawer: neutralise the :hover / :focus-within
      max-height rule and drive it from .open, which is what the
      tap handler actually sets. */
@media (max-width: 960px) {
  .nav__dropdown::after { display: none; }

  .nav .nav__item--has-children:not(.open) > .nav__dropdown {
    max-height: 0 !important;
  }
  .nav .nav__item--has-children.open > .nav__dropdown {
    max-height: 60vh !important;
    overflow: hidden;
  }
}


/* 1b. The panel is transform: translateY(8px) while it is closed, so
       for the 0.28s of the opening transition it sits 8px lower than
       its resting position. The bridge above is anchored to the panel,
       so it moves down with it and leaves a ~8px dead band directly
       under the link during exactly the moment the pointer is travelling
       through it. Hover is lost, the menu reverses, and you end up having
       to click. This second bridge is anchored to the , so it never
       moves, and it spans only the link's own width so it can never
       cover a neighbouring nav link. */
@media (hover: hover) and (min-width: 961px) {
  .nav__item--has-children::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(var(--nav-dd-gap) + 8px);
  }
}


/* ============================================================
   2HK TOKEN RECONCILIATION  -  added 14 Sep 2026
   Declared last so it settles the earlier :root blocks above.
   Brand red confirmed as #A50D24 (--brand-crimson).
   Do not redeclare these inside Elementor HTML widgets.
   ============================================================ */
:root{
  --brand-cream: #F7F3EC;            /* one cream, replaces #F3F0EC and #F3EDE4 */
  --tf-gold: var(--twohype-brass);   /* was #9c7c3c, collapsed to the brass token */
  --tf-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* was a Playfair serif stack */
}


/* Breadcrumb bar hidden on the shop and category archives, 14 Sep 2026.
   The bar itself is section 2c97e06 in Elementor template 82 (Product Archive).
   Nothing was deleted. Remove this block to bring it back. */
.elementor-82 .elementor-element-2c97e06{ display:none !important; }


/* nav-dropdown-plain - 14 Sep 2026.
   Two coloured lines were being drawn from this stylesheet and were beating the
   header widget's own styles with !important and a :not(#_) specificity hack:
   a brass underline on .nav__link::after, and a 2px red top border on the dropdown.
   Both are off. The dropdown is now a plain charcoal panel with a hairline edge.
   Delete this block to bring them back. */
.nav__link::after{ display:none !important; }
html body:not(#_):not(#_):not(#_) .nav .nav__dropdown,
.nav .nav__dropdown,
.nav__dropdown{
  border: 1px solid rgba(255,255,255,.10) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}


/* ============================================================
   UX-01 (Sep 2026): text contrast on light grounds.
   Brand gold #B08D57 is 3.09:1 on white and the taupe category
   label #B3A99F is 2.31:1, both under the 4.5:1 minimum.
   These darker text tones apply to prices and card labels only;
   the brand gold itself is unchanged for accents and dark grounds.
   #86673A = 5.23:1 on white, 4.73:1 on cream #F7F3EC
   #736B63 = 5.23:1 on white, 4.73:1 on cream #F7F3EC
   ============================================================ */
:root { --tf-gold-text: #86673A; --tf-muted-text: #736B63; }
ul.products li.product .price,
ul.products li.product .price .woocommerce-Price-amount,
.woocommerce div.product .price,
.woocommerce div.product .price .woocommerce-Price-amount,
.woocommerce-variation-price .woocommerce-Price-amount,
table.shop_table .woocommerce-Price-amount { color: var(--tf-gold-text) !important; }
ul.products li.product .ast-woo-product-category { color: var(--tf-muted-text) !important; }