body.site { background: #2b2b2b url('/templates/yougrids/images/mesablack.png') repeat !important; } .container-header { background: transparent !important; box-shadow: none !important; } .cs-header { max-width: 1200px; height: 180px; margin: 0 auto; background: linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.28)), url('/templates/yougrids/images/woodgrain2.png') repeat; border-radius: 12px; border: 2px solid #a47536; box-shadow: inset 0 0 18px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; } .cs-logo { text-decoration: none !important; } .cs-logo-text { font-family: Georgia, serif; font-size: clamp(34px, 6vw, 72px); color: #f6dcb5; letter-spacing: 2px; text-shadow: 0 2px 0 #5a3e20, 0 4px 8px rgba(0,0,0,.75), 0 0 18px rgba(255,220,170,.35); } body.site { background: #2b2b2b url('/templates/yougrids/images/mesablack.png') repeat !important; } .site-grid { max-width: 1200px; margin: 0 auto; background: #f6efe5 !important; padding: 0 18px 28px; box-shadow: 0 0 24px rgba(0,0,0,.45); } .container-component, .container-sidebar-left, .container-sidebar-right { background: #f6efe5 !important; } main, main * { color: #2b2b2b; } h1, h2, h3, h4, h5, h6 { color: #5a2e1e !important; } /* Center Cassiopeia top navigation */ .container-header .mod-menu { justify-content: center !important; width: 100%; } .container-header nav { width: 100%; } .container-header .container-nav { justify-content: center !important; } .container-header .mod-menu > li { text-align: center; } /* Casesmith left wood menu panel */ .container-sidebar-left { background: url('/templates/yougrids/images/woodgrain2.png') repeat-y !important; border-radius: 12px; padding: 14px 10px !important; box-shadow: inset 0 0 8px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.35); } .container-sidebar-left .sidebar-left { background: transparent !important; } .container-sidebar-left .mod-menu, .container-sidebar-left ul.mod-menu { list-style: none; padding: 0; margin: 0; } .container-sidebar-left .mod-menu li { margin: 7px 0; } .container-sidebar-left .mod-menu li a { display: block; width: 100%; padding: 11px 14px 11px 18px; font-family: Georgia, serif; font-size: 14px; font-weight: 700; color: #f3e8d1 !important; text-decoration: none !important; background: rgba(255,255,255,.05); border-left: 2px solid #c19865; border-top: 1px solid rgba(255,230,180,.35); border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); text-shadow: 0 2px 3px rgba(0,0,0,.8), 0 0 6px rgba(255,210,150,.25); transition: all .25s ease; } .container-sidebar-left .mod-menu li a:hover, .container-sidebar-left .mod-menu li.active > a { color: #fff8d0 !important; transform: translateY(-2px); box-shadow: 0 0 10px rgba(230,200,130,.45), 0 6px 16px rgba(0,0,0,.45); } /* Child menu items */ .container-sidebar-left .mod-menu li ul { list-style: none; margin: 6px 0 0 8px; padding: 0; } .container-sidebar-left .mod-menu li ul li a { font-size: 13px; font-style: italic; color: #ffeeb0 !important; padding-left: 28px; position: relative; } .container-sidebar-left .mod-menu li ul li a::before { content: ''; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 30% 30%, #e0e0e0, #8a8a8a, #4f4f4f); box-shadow: inset 0 2px 3px rgba(255,255,255,.4), inset 0 -2px 4px rgba(0,0,0,.45), 0 0 5px rgba(255,255,255,.25); } /* Clean left sidebar backdrop */ .site-grid .container-sidebar-left, .site-grid .container-sidebar-left > *, .site-grid .sidebar-left, .site-grid .sidebar-left > * { background-color: transparent !important; } .container-sidebar-left { align-self: start; background: transparent !important; padding: 0 !important; } .container-sidebar-left .moduletable, .container-sidebar-left .card, .container-sidebar-left .mod-menu { background: url('/templates/yougrids/images/woodgrain2.png') repeat-y !important; border-radius: 12px; padding: 14px 10px !important; } /* Casesmith layout: dark outer, cream center, flush left rail */ body.site { background: #2b2b2b url('/templates/yougrids/images/mesablack.png') repeat !important; } .site-grid { max-width: 1200px; margin: 0 auto; background: #f6efe5 !important; padding: 0 !important; box-shadow: 0 0 24px rgba(0,0,0,.45); } /* FORCE Casesmith old-style 3-column layout */ .site-grid { max-width: 1200px !important; margin: 0 auto !important; display: grid !important; grid-template-columns: 230px minmax(0, 1fr) 230px !important; column-gap: 0 !important; row-gap: 0 !important; background: transparent !important; } /* keep top/header/banner/nav full width */ .container-header, .container-below-top, .container-top-a, .container-banner, .container-topbar { grid-column: 1 / -1 !important; } /* left sidebar flush */ .container-sidebar-left { grid-column: 1 !important; background: transparent !important; margin: 0 !important; padding: 0 !important; } /* center cream content */ .container-component { grid-column: 2 !important; background: #f6efe5 !important; margin: 0 !important; padding: 18px 24px 30px !important; } /* right sidebar if used */ .container-sidebar-right { grid-column: 3 !important; background: transparent !important; margin: 0 !important; padding: 0 !important; } /* left menu wood panel */ .container-sidebar-left .mod-menu { margin: 0 !important; width: 100% !important; background: url('/templates/yougrids/images/woodgrain2.png') repeat-y !important; border-radius: 0 12px 12px 0 !important; padding: 14px 10px !important; } /* remove module/card padding around left menu */ .container-sidebar-left .card, .container-sidebar-left .moduletable, .container-sidebar-left .sidebar-left { margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Make the entire left rail wood, not just the menu list */ .site-grid { background: #f6efe5 !important; } .container-sidebar-left { background: url('/templates/yougrids/images/woodgrain2.png') repeat-y left top !important; background-size: auto !important; padding: 0 !important; margin: 0 !important; border-radius: 0 12px 12px 0 !important; overflow: hidden !important; } .container-sidebar-left > *, .container-sidebar-left .sidebar-left, .container-sidebar-left .card, .container-sidebar-left .moduletable { background: transparent !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; } .container-sidebar-left .mod-menu { background: transparent !important; padding: 14px 10px !important; margin: 0 !important; } /* HikaShop account/register links only */ .container-sidebar-left li.item-119 > a, .container-sidebar-left li.item-120 > a { display: block !important; position: relative !important; padding: 10px 14px 10px 28px !important; margin: 7px 10px !important; font-family: Georgia, serif !important; font-size: 13px !important; font-weight: 700 !important; color: #f3e8d1 !important; background: rgba(255,255,255,.05) !important; border-left: 2px solid #c19865 !important; border-top: 1px solid rgba(255,230,180,.35) !important; border-radius: 10px !important; text-decoration: none !important; box-shadow: 0 2px 6px rgba(0,0,0,.45) !important; text-shadow: 0 2px 3px rgba(0,0,0,.8); } .container-sidebar-left li.item-119 > a::before, .container-sidebar-left li.item-120 > a::before { content: ''; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 30% 30%, #e0e0e0, #8a8a8a, #4f4f4f); box-shadow: inset 0 2px 3px rgba(255,255,255,.4), inset 0 -2px 4px rgba(0,0,0,.45), 0 0 5px rgba(255,255,255,.25); } .container-sidebar-left li.item-119 > a:hover, .container-sidebar-left li.item-120 > a:hover { color: #fff8d0 !important; transform: translateY(-2px); box-shadow: 0 0 10px rgba(230,200,130,.45), 0 6px 16px rgba(0,0,0,.45) !important; } /* Left sidebar section headers */ .container-sidebar-left h3 { font-family: Georgia, serif; font-size: 16px; text-align: center; color: #f6dcb5 !important; text-transform: uppercase; letter-spacing: 1px; margin: 12px 0 6px !important; text-shadow: 0 2px 3px rgba(0,0,0,.8), 0 0 8px rgba(255,220,170,.3); } /* Casesmith right sidebar */ .container-sidebar-right { background: linear-gradient(to bottom, #eee3d2, #e4d7c2) !important; border-radius: 12px 0 0 12px !important; padding: 14px 12px !important; box-shadow: inset 0 0 8px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.25); } .container-sidebar-right .card, .container-sidebar-right .moduletable { background: transparent !important; border: 0 !important; box-shadow: none !important; margin-bottom: 18px !important; } .container-sidebar-right h3, .container-sidebar-right .card-header { font-family: Georgia, serif; font-size: 17px; color: #a47536 !important; text-align: center; text-transform: uppercase; letter-spacing: 1px; background: transparent !important; border: 0 !important; text-shadow: 1px 1px 2px rgba(0,0,0,.35), 0 0 4px rgba(255,230,190,.25); } .container-sidebar-right, .container-sidebar-right p, .container-sidebar-right li, .container-sidebar-right div { color: #2b2b2b !important; font-family: Georgia, serif; } .whybuy-list { list-style: none; padding: 0; margin: 0; } .whybuy-list li { position: relative; padding-left: 24px; margin-bottom: 10px; font-size: 14px; } .whybuy-list li::before { content: ''; position: absolute; left: 0; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #d8b87a, #a47536, #5a3e20); box-shadow: inset 0 2px 3px rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.35), 0 0 5px rgba(255,224,170,.35); } .secure-checkout { background: rgba(255,255,255,.35); border: 1px solid rgba(164,117,54,.35); border-radius: 10px; padding: 14px; font-size: 14px; line-height: 1.5; } /* Right sidebar polish */ .container-sidebar-right { min-width: 220px; } .container-sidebar-right .card-body { padding: 10px 8px !important; } .container-sidebar-right a { color: #8b642a !important; font-weight: 700; text-decoration: none !important; } .container-sidebar-right a:hover { color: #5a2e1e !important; text-decoration: underline !important; } .container-sidebar-right .hikashop_cart_module, .container-sidebar-right .hikashop_cart_module * { color: #2b2b2b !important; font-family: Georgia, serif !important; } .container-sidebar-right .btn, .container-sidebar-right button, .container-sidebar-right input[type="submit"] { background: linear-gradient(to bottom, #f2d7ad, #a47536) !important; border: 1px solid #7f5c1b !important; border-radius: 10px !important; color: #2b2b2b !important; font-family: Georgia, serif !important; font-weight: 700 !important; box-shadow: 0 2px 6px rgba(0,0,0,.35) !important; } .payment-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 12px 0; } .payment-badges span { display: inline-block; padding: 5px 8px; border-radius: 6px; background: #fff; border: 1px solid rgba(164,117,54,.35); color: #2b2b2b !important; font-size: 12px; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.18); } .secure-note { font-size: 12px; text-align: center; margin-bottom: 0; } .payment-badges { text-align: center; background: #fff; border: 1px solid rgba(164,117,54,.35); border-radius: 8px; padding: 8px; color: #2b2b2b !important; font-size: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.18); } .payment-badges strong { color: #2b2b2b !important; } .container-sidebar-right .hikashop_cart_module::before { content: '🛒'; display: block; text-align: center; font-size: 26px; margin: 0 auto 8px; } .payment-badge-row { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; justify-content: center !important; margin: 12px 0 !important; } .payment-badge { display: inline-block !important; background: #ffffff !important; color: #2b2b2b !important; border: 1px solid rgba(164,117,54,.45) !important; border-radius: 6px !important; padding: 5px 8px !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; box-shadow: 0 1px 4px rgba(0,0,0,.2) !important; } .cs-payment-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 12px 0; } .cs-pay { display: inline-flex; align-items: center; justify-content: center; min-width: 50px; height: 28px; padding: 0 9px; border-radius: 6px; font-family: Arial, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .4px; color: #fff !important; border: 1px solid rgba(255,255,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 5px rgba(0,0,0,.28); } .cs-pay-paypal { background: linear-gradient(135deg, #003087, #009cde); } .cs-pay-visa { background: linear-gradient(135deg, #1a1f71, #2d57a1); } .cs-pay-mc { background: linear-gradient(135deg, #eb001b, #f79e1b); } .cs-pay-amex { background: linear-gradient(135deg, #2e77bb, #63b7e6); } .cs-testimonials blockquote { margin: 0 0 14px; padding: 12px 14px; background: rgba(255,255,255,.38); border-left: 3px solid #a47536; border-radius: 10px; color: #2b2b2b !important; font-family: Georgia, serif; font-size: 13px; line-height: 1.45; box-shadow: inset 0 0 5px rgba(0,0,0,.05); } .cs-testimonials cite { display: block; margin-top: 8px; color: #8b642a !important; font-size: 12px; font-style: italic; text-align: right; } /* Rivets only on hover/current in left menu */ .container-sidebar-left .mod-menu li a::before { opacity: 0; transition: opacity .25s ease; } .container-sidebar-left .mod-menu li a:hover::before, .container-sidebar-left .mod-menu li.current > a::before, .container-sidebar-left .mod-menu li.active > a::before { opacity: 1; } /* Parent menu gold rivets: hidden until hover/current */ .container-sidebar-left .mod-menu > li > a { position: relative !important; padding-left: 34px !important; } .container-sidebar-left .mod-menu > li > a::before { content: ''; position: absolute; left: 13px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 30% 30%, #f8e6c1 0%, #d8b87a 30%, #a47536 70%, #5a3e20 100%); box-shadow: 0 0 6px rgba(255,224,170,.5), inset 0 2px 4px rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.45), 1px 1px 2px rgba(0,0,0,.6); opacity: 0; transition: opacity .25s ease; } .container-sidebar-left .mod-menu > li > a:hover::before, .container-sidebar-left .mod-menu > li.current > a::before, .container-sidebar-left .mod-menu > li.active > a::before { opacity: 1; } /* Left sidebar login colors */ .container-sidebar-left form, .container-sidebar-left form * { color: #f3e8d1 !important; font-family: Georgia, serif !important; } .container-sidebar-left input, .container-sidebar-left .form-control { background: rgba(255,255,255,.12) !important; border: 1px solid #c19865 !important; color: #f3e8d1 !important; } .container-sidebar-left button, .container-sidebar-left .btn, .container-sidebar-left input[type="submit"] { background: linear-gradient(to bottom, #f2d7ad, #a47536) !important; border: 1px solid #7f5c1b !important; color: #2b2b2b !important; font-weight: 700 !important; } .container-sidebar-left form a { color: #ffeeb0 !important; } /* Casesmith top navigation polish */ .container-header { background: transparent !important; box-shadow: none !important; } .container-header .container-nav { justify-content: center !important; width: 100%; background: rgba(0,0,0,.28); border-top: 1px solid rgba(193,152,101,.45); border-bottom: 1px solid rgba(193,152,101,.45); } .container-header .mod-menu { justify-content: center !important; gap: 4px; } .container-header .mod-menu > li > a, .container-header .mod-menu > li > span { font-family: Georgia, serif !important; color: #f3e8d1 !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .5px; padding: 10px 14px !important; text-shadow: 0 2px 3px rgba(0,0,0,.75); } .container-header .mod-menu > li > a:hover, .container-header .mod-menu > li.active > a { color: #ffe8b0 !important; background: rgba(255,255,255,.08); border-radius: 8px; } /* Top-left social buttons */ .cs-social-left { display: flex; justify-content: center; gap: 8px; padding: 12px 8px 6px; } .cs-social-left a { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(to bottom, #f2d7ad, #a47536); border: 1px solid #7f5c1b; color: #2b2b2b !important; font-family: Georgia, serif; font-weight: 700; text-decoration: none !important; box-shadow: 0 2px 6px rgba(0,0,0,.45); } .cs-social-left a:hover { color: #fff8d0 !important; transform: translateY(-2px); } /* Tighten top navigation so it fits */ .container-header .mod-menu { flex-wrap: wrap !important; justify-content: center !important; gap: 2px !important; } .container-header .mod-menu > li > a, .container-header .mod-menu > li > span { padding: 7px 7px !important; font-size: 15px !important; letter-spacing: 0.2px !important; white-space: nowrap !important; } .container-header .container-nav { padding-left: 4px !important; padding-right: 4px !important; } /* Banner + top nav alignment */ .container-below-top, .container-below-top > .grid-child, .container-below-top .moduletable, .container-below-top .mod-custom, .container-below-top .custom { max-width: 1200px !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; } .cs-banner-wrap { max-width: 1200px !important; margin: 0 auto !important; padding: 0 !important; line-height: 0 !important; } .cs-banner-wrap a { display: block !important; line-height: 0 !important; } .cs-banner-img { display: block !important; width: 100% !important; height: auto !important; margin: 0 auto !important; padding: 0 !important; } .container-header .container-nav { display: flex !important; justify-content: center !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; } .container-header .mod-menu { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 4px 8px !important; background: rgba(0,0,0,.28) !important; border-top: 1px solid rgba(193,152,101,.55) !important; border-bottom: 1px solid rgba(193,152,101,.45) !important; border-radius: 0 0 8px 8px !important; } body.site { background-color: #0b0b0b !important; background-image: linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.78)), url('https://casesmithcustoms.com/images/textures/51KtMjw0XoL.jpg?1777047220000') !important; background-repeat: repeat !important; background-size: 180px auto !important; } /* HikaShop product page polish */ .hikashop_product_page, .hikashop_product_main, .hikashop_product_left_part, .hikashop_product_right_part, .hikashop_product_description_main, .hikashop_products_listing { background: #f6efe5 !important; color: #2b2b2b !important; font-family: Georgia, serif !important; } .hikashop_product_page h1, .hikashop_product_page h2, .hikashop_product_page h3, .hikashop_product_name, .hikashop_product_name_main { color: #5a2e1e !important; font-family: Georgia, serif !important; font-weight: 700 !important; } .hikashop_product_price_full, .hikashop_product_price { color: #a47536 !important; font-family: Georgia, serif !important; font-size: 20px !important; font-weight: 700 !important; text-align: center !important; text-shadow: 0 1px 1px rgba(255,255,255,.45); } .hikashop_product_description_main { line-height: 1.65 !important; font-size: 15px !important; padding: 12px 0 !important; } .hikashop_product_image, .hikashop_product_main_image, .hikashop_product_image img { border-radius: 10px !important; } .hikashop_product_image img, .hikashop_product_main_image img { box-shadow: 0 6px 18px rgba(0,0,0,.28) !important; border: 1px solid rgba(164,117,54,.35) !important; } /* ========================================================= CaseSmith Customs - HikaShop Product Buttons Add to Cart = Red Wishlist = Dark with Heart Other Hika buttons = Brass ========================================================= */ /* ----------------------------------------- Default HikaShop buttons — brass style Keep this for checkout, account, misc buttons BUT do not let it control product cart/wishlist ----------------------------------------- */ .hikashop_checkout_next_button, .hikashop_checkout_cart .btn, .hikashop_checkout_cart .hikabtn, .hikashop_cart_button { background: linear-gradient(to bottom, #f2d7ad, #a47536) !important; border: 1px solid #7f5c1b !important; border-radius: 10px !important; color: #2b2b2b !important; font-family: Georgia, serif !important; font-weight: 700 !important; padding: 10px 18px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 8px rgba(0,0,0,.35) !important; text-shadow: 0 1px 1px rgba(255,255,255,.45); } .hikashop_checkout_next_button:hover, .hikashop_checkout_cart .btn:hover, .hikashop_checkout_cart .hikabtn:hover, .hikashop_cart_button:hover { background: linear-gradient(to bottom, #ffe8b0, #b5864f) !important; transform: translateY(-1px); box-shadow: 0 0 10px rgba(255,240,200,.45), 0 5px 12px rgba(0,0,0,.4) !important; } /* ----------------------------------------- Product Add to Cart — red with cart icon ----------------------------------------- */ .hikashop_product_page .hikashop_cart_input_button, .hikashop_product_page input.hikashop_cart_input_button, .hikashop_product_page button.hikashop_cart_input_button, .hikashop_product_page .hikashop_add_to_cart_button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 44px !important; padding: 11px 24px 11px 48px !important; background-color: #8f1717 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23f3e8d1' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h8.9a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E"), linear-gradient(to bottom, #c73434, #8f1717) !important; background-repeat: no-repeat, no-repeat !important; background-position: 20px center, center !important; background-size: 18px 18px, 100% 100% !important; border: 1px solid #5b0d0d !important; border-radius: 10px !important; color: #f3e8d1 !important; font-family: Georgia, serif !important; font-weight: 700 !important; font-size: 1rem !important; text-shadow: 0 1px 1px rgba(0,0,0,.65) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 8px rgba(0,0,0,.45) !important; cursor: pointer !important; transition: transform .18s ease, box-shadow .18s ease, background-size .18s ease !important; } .hikashop_product_page .hikashop_cart_input_button:hover, .hikashop_product_page input.hikashop_cart_input_button:hover, .hikashop_product_page button.hikashop_cart_input_button:hover, .hikashop_product_page .hikashop_add_to_cart_button:hover { background-color: #a91f1f !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23f3e8d1' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h8.9a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E"), linear-gradient(to bottom, #dd3b3b, #a91f1f) !important; background-repeat: no-repeat, no-repeat !important; background-position: 20px center, center !important; background-size: 20px 20px, 100% 100% !important; color: #fff7e6 !important; transform: translateY(-1px); box-shadow: 0 0 10px rgba(190,30,30,.45), 0 5px 12px rgba(0,0,0,.45) !important; } /* ----------------------------------------- Wishlist — regular dark button with heart ----------------------------------------- */ .hikashop_product_page .hikashop_wishlist_button, .hikashop_product_page .hikashop_wishlist_input_button, .hikashop_product_page input.hikashop_wishlist_button, .hikashop_product_page input.hikashop_wishlist_input_button, .hikashop_product_page button.hikashop_wishlist_button, .hikashop_product_page button.hikashop_wishlist_input_button, .hikashop_product_page .hikashop_product_wishlist .hikabtn { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 40px !important; padding: 9px 20px 9px 43px !important; background-color: #2b2b2b !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23a47536' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6c-1.7-1.7-4.4-1.7-6.1 0L12 7.3 9.3 4.6c-1.7-1.7-4.4-1.7-6.1 0-1.8 1.8-1.7 4.7.2 6.5L12 20l8.6-8.9c1.9-1.8 2-4.7.2-6.5z'/%3E%3C/svg%3E"), linear-gradient(to bottom, #3b3b3b, #222) !important; background-repeat: no-repeat, no-repeat !important; background-position: 17px center, center !important; background-size: 15px 15px, 100% 100% !important; border: 1px solid rgba(164,117,54,.65) !important; border-radius: 10px !important; color: #f3e8d1 !important; font-family: Georgia, serif !important; font-weight: 700 !important; text-shadow: 0 1px 1px rgba(0,0,0,.55) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 8px rgba(0,0,0,.35) !important; cursor: pointer !important; transition: transform .18s ease, background-size .18s ease, box-shadow .18s ease !important; } .hikashop_product_page .hikashop_wishlist_button:hover, .hikashop_product_page .hikashop_wishlist_input_button:hover, .hikashop_product_page input.hikashop_wishlist_button:hover, .hikashop_product_page input.hikashop_wishlist_input_button:hover, .hikashop_product_page button.hikashop_wishlist_button:hover, .hikashop_product_page button.hikashop_wishlist_input_button:hover, .hikashop_product_page .hikashop_product_wishlist .hikabtn:hover { background-color: #303030 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='%23c72a2a' stroke='%23c72a2a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6c-1.7-1.7-4.4-1.7-6.1 0L12 7.3 9.3 4.6c-1.7-1.7-4.4-1.7-6.1 0-1.8 1.8-1.7 4.7.2 6.5L12 20l8.6-8.9c1.9-1.8 2-4.7.2-6.5z'/%3E%3C/svg%3E"), linear-gradient(to bottom, #424242, #252525) !important; background-repeat: no-repeat, no-repeat !important; background-position: 17px center, center !important; background-size: 21px 21px, 100% 100% !important; color: #f3e8d1 !important; transform: translateY(-1px); box-shadow: 0 0 10px rgba(199,42,42,.35), 0 5px 12px rgba(0,0,0,.42) !important; } /* ----------------------------------------- Quantity plus/minus controls Keep centered, but do NOT style like main buttons ----------------------------------------- */ .hikashop_product_quantity_main, #hikashop_product_quantity_main { text-align: center !important; } .hikashop_product_quantity_main .btn, .hikashop_product_quantity_main button { background: #2b2b2b !important; color: #f3e8d1 !important; border: 1px solid rgba(164,117,54,.6) !important; border-radius: 8px !important; padding: 6px 10px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important; } .hikashop_product_quantity_main .btn:hover, .hikashop_product_quantity_main button:hover { background: #363636 !important; color: #fff4dc !important; } /* Product listing cards */ .hikashop_products_listing .hikashop_product { background: rgba(255,255,255,.32) !important; border: 1px solid rgba(164,117,54,.25) !important; border-radius: 12px !important; padding: 14px !important; box-shadow: inset 0 0 5px rgba(0,0,0,.04); } /* Product bottom section spacing */ .hikashop_product_bottom_part { margin-top: 30px !important; } /* Description block */ #hikashop_product_description_main { margin-bottom: 30px !important; padding: 0 10px !important; } /* Wrap them visually together */ #hikashop_product_options, .hikashop_product_characteristics, .hikashop_product_quantity_main { background: rgba(255,255,255,.42) !important; border: 1px solid rgba(164,117,54,.38) !important; border-radius: 12px !important; padding: 16px 18px !important; box-shadow: inset 0 0 6px rgba(0,0,0,.05), 0 3px 10px rgba(0,0,0,.08) !important; } /* Tighten spacing between them */ .hikashop_product_characteristics + #hikashop_product_options, #hikashop_product_options + .hikashop_product_quantity_main { margin-top: 10px !important; } /* Center add-to-cart */ .hikashop_product_quantity_main { text-align: center !important; } /* HikaShop option fields - CaseSmith styling */ #hikashop_product_options { max-width: 780px !important; margin: 24px auto 18px !important; padding: 18px 20px !important; background: rgba(255,255,255,.42) !important; border: 1px solid rgba(164,117,54,.38) !important; border-radius: 12px !important; } #hikashop_product_options table, #hikashop_product_options .hikashop_product_options_table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 10px !important; background: transparent !important; border: 0 !important; } #hikashop_product_options td { border: 0 !important; padding: 6px 8px !important; vertical-align: middle !important; } #hikashop_product_options .hikashop_option_name_td { width: 34% !important; text-align: right !important; } #hikashop_product_options .hikashop_option_name { display: inline-block !important; font-family: Georgia, serif !important; font-size: 14px !important; font-weight: 700 !important; color: #5a2e1e !important; text-transform: uppercase !important; letter-spacing: .35px !important; } #hikashop_product_options .hikashop_option_selector_td { width: 66% !important; } #hikashop_product_options select, #hikashop_product_options .form-select { width: 100% !important; max-width: 100% !important; min-height: 40px !important; background-color: #fffaf0 !important; border: 1px solid rgba(164,117,54,.6) !important; border-radius: 8px !important; color: #2b2b2b !important; font-family: Georgia, serif !important; font-size: 14px !important; padding: 8px 36px 8px 10px !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.65) !important; } #hikashop_product_options select:focus, #hikashop_product_options .form-select:focus { outline: none !important; border-color: #c19865 !important; box-shadow: 0 0 8px rgba(193,152,101,.35), inset 0 1px 2px rgba(0,0,0,.08) !important; } /* text/custom item fields if present */ .hikashop_product_custom_item_info input, .hikashop_product_custom_item_info textarea, .hikashop_product_custom_item_info select, .hikashop_product_custom_item_info .form-control, .hikashop_product_custom_item_info .form-select { width: 100% !important; background: #fffaf0 !important; border: 1px solid rgba(164,117,54,.6) !important; border-radius: 8px !important; color: #2b2b2b !important; font-family: Georgia, serif !important; padding: 9px 11px !important; } /* Product image centered */ #hikashop_product_left_part, .hikashop_product_left_part { text-align: center !important; } #hikashop_product_left_part img, .hikashop_product_left_part img, .hikashop_product_main_image img { display: block !important; margin: 0 auto !important; } /* Price centered and not jammed beside image */ #hikashop_product_price_main, .hikashop_product_price_main, .hikashop_product_price_full { display: block !important; width: 100% !important; text-align: center !important; margin: 12px auto 18px !important; } .hikashop_product_price, .hikashop_product_price_0 { display: inline-block !important; color: #a47536 !important; font-family: Georgia, serif !important; font-size: 22px !important; font-weight: 700 !important; text-align: center !important; } /* Product headings / labels */ #hikashop_product_top_part h1, #hikashop_product_name_main, .hikashop_product_name_main, .hikashop_product_page h1, .hikashop_product_page h2, .hikashop_product_page h3 { color: #5a2e1e !important; font-family: Georgia, serif !important; font-weight: 700 !important; text-align: center !important; text-shadow: 0 1px 1px rgba(255,255,255,.45); } /* Dark charcoal product option fields */ #hikashop_product_options select, #hikashop_product_options .form-select, .hikashop_product_custom_item_info input, .hikashop_product_custom_item_info textarea, .hikashop_product_custom_item_info select, .hikashop_product_custom_item_info .form-control, .hikashop_product_custom_item_info .form-select { background: #2b2b2b !important; color: #f3e8d1 !important; border: 1px solid #c19865 !important; border-radius: 8px !important; font-family: Georgia, serif !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.15) !important; } /* Dropdown options readable */ #hikashop_product_options select option, #hikashop_product_options .form-select option { background: #2b2b2b !important; color: #f3e8d1 !important; } /* Product headings bronze/gold */ #hikashop_product_top_part h1, #hikashop_product_name_main, .hikashop_product_name_main, .hikashop_product_page h1, .hikashop_product_page h2, .hikashop_product_page h3, .hikashop_product_bottom_part h1, .hikashop_product_bottom_part h2, .hikashop_product_bottom_part h3, #hikashop_product_description_main h1, #hikashop_product_description_main h2, #hikashop_product_description_main h3 { color: #a47536 !important; font-family: Georgia, serif !important; font-weight: 700 !important; text-shadow: 1px 1px 2px rgba(0,0,0,.35), 0 0 5px rgba(255,230,190,.22) !important; } /* Center product image + price together in body */ #hikashop_product_left_part, .hikashop_product_left_part { width: 100% !important; max-width: 760px !important; margin: 0 auto 24px !important; float: none !important; text-align: center !important; } #hikashop_product_left_part .hikashop_product_main_image, #hikashop_product_left_part img, .hikashop_product_left_part img { display: block !important; margin-left: auto !important; margin-right: auto !important; } #hikashop_product_price_main, .hikashop_product_price_main { display: block !important; width: 100% !important; margin: 14px auto 0 !important; text-align: center !important; } #hikashop_product_right_part, .hikashop_product_right_part { width: 100% !important; max-width: 760px !important; margin: 0 auto !important; float: none !important; text-align: center !important; } /* CaseSmith product top layout override */ .cs-product-top-wrap { display: block !important; width: 100% !important; text-align: center !important; } .cs-product-image-price { display: block !important; width: 100% !important; max-width: 760px !important; margin: 0 auto 24px !important; float: none !important; text-align: center !important; } .cs-product-image-price img { display: block !important; margin: 0 auto !important; } .cs-product-info-area { display: block !important; width: 100% !important; max-width: 760px !important; margin: 0 auto !important; float: none !important; text-align: center !important; } #hikashop_product_price_main { display: block !important; text-align: center !important; margin: 14px auto 18px !important; } #hikashop_product_price_main .hikashop_product_price { color: #a47536 !important; font-size: 24px !important; font-weight: 700 !important; } /* Hide duplicate HikaShop characteristics/variant selector block */ #hikashop_product_characteristics, .hikashop_product_characteristics, .hikashop_product_characteristics_table { display: none !important; } /* FINAL heading color override */ main h1, main h2, main h3, main h4, main h5, main h6, main h1 *, main h2 *, main h3 *, main h4 *, main h5 *, main h6 *, #hikashop_product_top_part h1, #hikashop_product_top_part h1 *, #hikashop_product_description_main h1, #hikashop_product_description_main h1 *, #hikashop_product_description_main h2, #hikashop_product_description_main h2 *, #hikashop_product_description_main h3, #hikashop_product_description_main h3 *, #hikashop_product_name_main { color: #a47536 !important; } /* Main content bullet lists - brass rivets */ .container-component ul, #hikashop_product_description_main ul { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; } .container-component ul li, #hikashop_product_description_main ul li { position: relative !important; padding-left: 26px !important; margin-bottom: 9px !important; color: #2b2b2b !important; line-height: 1.55 !important; } .container-component ul li::before, #hikashop_product_description_main ul li::before { content: ''; position: absolute; left: 0; top: .55em; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #f8e6c1 0%, #d8b87a 30%, #a47536 70%, #5a3e20 100%); box-shadow: 0 0 6px rgba(255,224,170,.45), inset 0 2px 4px rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.45), 1px 1px 2px rgba(0,0,0,.5); } /* ========================================================= CaseSmith Customs - Proceed to Checkout Button Exact target: ========================================================= */ a.hikabtn.hikashop_cart_proceed_to_checkout { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 245px !important; min-height: 46px !important; margin: 14px auto 8px !important; padding: 11px 18px 11px 48px !important; background-color: #8f1717 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23f3e8d1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3Cpath d='M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z'/%3E%3C/svg%3E"), linear-gradient(to bottom, #c73434 0%, #8f1717 48%, #5b0d0d 100%) !important; background-repeat: no-repeat, no-repeat !important; background-position: 19px center, center !important; background-size: 19px 19px, 100% 100% !important; border: 1px solid rgba(243, 232, 209, 0.38) !important; border-radius: 12px !important; color: #f3e8d1 !important; font-family: Georgia, serif !important; font-size: 0.98rem !important; font-weight: 700 !important; letter-spacing: 0.02em !important; line-height: 1.2 !important; text-align: center !important; text-decoration: none !important; text-shadow: 0 1px 1px rgba(0,0,0,.7) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 3px 0 #3b0909, 0 12px 22px rgba(0,0,0,.45) !important; cursor: pointer !important; transition: transform .18s ease, box-shadow .18s ease, background-size .18s ease, background-color .18s ease !important; } a.hikabtn.hikashop_cart_proceed_to_checkout span { color: #f3e8d1 !important; display: inline-block !important; } a.hikabtn.hikashop_cart_proceed_to_checkout:hover { background-color: #a91f1f !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23fff4dc' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3Cpath d='M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z'/%3E%3C/svg%3E"), linear-gradient(to bottom, #df3a3a 0%, #a91f1f 48%, #681111 100%) !important; background-repeat: no-repeat, no-repeat !important; background-position: 19px center, center !important; background-size: 22px 22px, 100% 100% !important; color: #fff4dc !important; text-decoration: none !important; transform: translateY(-1px); box-shadow: 0 0 13px rgba(199,42,42,.48), 0 4px 0 #3b0909, 0 16px 26px rgba(0,0,0,.5) !important; } a.hikabtn.hikashop_cart_proceed_to_checkout:hover span { color: #fff4dc !important; } /* ========================================================= CaseSmith Customs - Product Add to Cart Button Exact target: ========================================================= */ .hikashop_product_page a.hikabtn.hikacart, #hikashop_product_form a.hikabtn.hikacart, a#hikashop_product_quantity_field_1_add_to_cart_button.hikabtn.hikacart { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 165px !important; min-height: 46px !important; margin: 12px auto !important; padding: 11px 22px 11px 50px !important; background-color: #8f1717 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23f3e8d1' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h8.9a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E"), linear-gradient(to bottom, #c73434 0%, #8f1717 48%, #5b0d0d 100%) !important; background-repeat: no-repeat, no-repeat !important; background-position: 20px center, center !important; background-size: 19px 19px, 100% 100% !important; border: 1px solid rgba(243, 232, 209, 0.38) !important; border-radius: 12px !important; color: #f3e8d1 !important; font-family: Georgia, serif !important; font-size: 1rem !important; font-weight: 700 !important; letter-spacing: 0.02em !important; line-height: 1.2 !important; text-align: center !important; text-decoration: none !important; text-shadow: 0 1px 1px rgba(0,0,0,.7) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 3px 0 #3b0909, 0 12px 22px rgba(0,0,0,.45) !important; cursor: pointer !important; transition: transform .18s ease, box-shadow .18s ease, background-size .18s ease, background-color .18s ease !important; } .hikashop_product_page a.hikabtn.hikacart span, #hikashop_product_form a.hikabtn.hikacart span, a#hikashop_product_quantity_field_1_add_to_cart_button.hikabtn.hikacart span { color: #f3e8d1 !important; display: inline-block !important; } .hikashop_product_page a.hikabtn.hikacart:hover, #hikashop_product_form a.hikabtn.hikacart:hover, a#hikashop_product_quantity_field_1_add_to_cart_button.hikabtn.hikacart:hover { background-color: #a91f1f !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23fff4dc' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h8.9a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E"), linear-gradient(to bottom, #df3a3a 0%, #a91f1f 48%, #681111 100%) !important; background-repeat: no-repeat, no-repeat !important; background-position: 20px center, center !important; background-size: 22px 22px, 100% 100% !important; color: #fff4dc !important; text-decoration: none !important; transform: translateY(-1px); box-shadow: 0 0 13px rgba(199,42,42,.48), 0 4px 0 #3b0909, 0 16px 26px rgba(0,0,0,.5) !important; } .hikashop_product_page a.hikabtn.hikacart:hover span, #hikashop_product_form a.hikabtn.hikacart:hover span, a#hikashop_product_quantity_field_1_add_to_cart_button.hikabtn.hikacart:hover span { color: #fff4dc !important; } /* ========================================================= FINAL FIX - Center HikaShop Quantity + Add to Cart Block Targets actual HikaShop output: .hikashop_quantity_form a.hikashop_product_quantity_field_change a.hikabtn.hikacart ========================================================= */ /* Center HikaShop's actual quantity wrapper */ .hikashop_quantity_form { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin: 0 auto 14px auto !important; padding: 0 !important; text-align: center !important; } /* Center the internal HikaShop table */ .hikashop_quantity_form table { margin: 0 auto !important; border-collapse: separate !important; border-spacing: 7px 0 !important; width: auto !important; } /* Clean table cell alignment */ .hikashop_quantity_form td { padding: 0 !important; margin: 0 !important; text-align: center !important; vertical-align: middle !important; border: 0 !important; } /* Quantity input - dark charcoal builder look */ .hikashop_quantity_form input.hikashop_product_quantity_field, input#hikashop_product_quantity_field_1.hikashop_product_quantity_field, .hikashop_product_quantity_main input.hikashop_product_quantity_field { display: inline-block !important; width: 64px !important; max-width: 64px !important; height: 44px !important; padding: 0 !important; margin: 0 !important; text-align: center !important; background: #2b2b2b !important; color: #f3e8d1 !important; border: 1px solid rgba(164,117,54,.8) !important; border-radius: 9px !important; font-family: Georgia, serif !important; font-size: 1.05rem !important; font-weight: 700 !important; line-height: 44px !important; box-shadow: inset 0 1px 4px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.28) !important; } /* Plus/minus links - actual HikaShop anchor buttons */ .hikashop_quantity_form a.hikashop_product_quantity_field_change, .hikashop_quantity_form a.hikashop_product_quantity_field_change_plus, .hikashop_quantity_form a.hikashop_product_quantity_field_change_minus { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; min-width: 32px !important; height: 21px !important; min-height: 21px !important; padding: 0 !important; margin: 0 !important; background: linear-gradient(to bottom, #3a3a3a, #1f1f1f) !important; color: #f3e8d1 !important; border: 1px solid rgba(164,117,54,.75) !important; border-radius: 6px !important; font-family: Georgia, serif !important; font-size: 1rem !important; font-weight: 700 !important; line-height: 1 !important; text-align: center !important; text-decoration: none !important; text-shadow: 0 1px 1px rgba(0,0,0,.7) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 5px rgba(0,0,0,.38) !important; cursor: pointer !important; transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease !important; } /* Plus/minus hover */ .hikashop_quantity_form a.hikashop_product_quantity_field_change:hover, .hikashop_quantity_form a.hikashop_product_quantity_field_change_plus:hover, .hikashop_quantity_form a.hikashop_product_quantity_field_change_minus:hover { background: linear-gradient(to bottom, #4a4a4a, #282828) !important; color: #fff4dc !important; text-decoration: none !important; transform: translateY(-1px); box-shadow: 0 0 8px rgba(164,117,54,.35), 0 3px 7px rgba(0,0,0,.45) !important; } /* Center Add to Cart directly under the quantity control */ #hikashop_product_quantity_field_1_add_to_cart_button, .hikashop_product_page a.hikabtn.hikacart, #hikashop_product_form a.hikabtn.hikacart { display: inline-flex !important; margin: 12px auto 0 auto !important; } /* Keep the Add to Cart span centered */ #hikashop_product_quantity_field_1_add_to_cart_button span, .hikashop_product_page a.hikabtn.hikacart span, #hikashop_product_form a.hikabtn.hikacart span { display: inline-block !important; text-align: center !important; } /* Prevent generic hikabtn styles from ruining plus/minus sizing */ .hikashop_quantity_form a.hikabtn { padding: 0 !important; } /* ========================================================= CaseSmith Customs - Product Conversion Trust Badge Place under Add to Cart / Wishlist and above Contact button ========================================================= */ .cs-product-promise { max-width: 430px; padding: 16px 16px 15px; position: relative; overflow: hidden; background: radial-gradient(circle at 18% 0%, rgba(255, 230, 170, .18), transparent 34%), linear-gradient(135deg, #343434 0%, #242424 48%, #171717 100%); border: 1px solid rgba(164, 117, 54, .72); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.75), 0 12px 24px rgba(0,0,0,.32); color: #f3e8d1; font-family: Georgia, serif; text-align: center; } /* subtle brass top shine */ .cs-product-promise::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient( 90deg, transparent, rgba(242,215,173,.75), rgba(164,117,54,.95), rgba(242,215,173,.75), transparent ); opacity: .9; } /* tiny red amp pilot light */ .cs-product-promise::after { content: ""; position: absolute; top: 15px; right: 16px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffb2b2, #d12d2d 45%, #6f1010 100%); box-shadow: 0 0 8px rgba(209,45,45,.9), 0 0 16px rgba(209,45,45,.38), inset 0 1px 1px rgba(255,255,255,.5); } /* Gold "Custom shop confidence" pill */ .cs-product-promise-kicker { display: inline-block; margin-bottom: 14px !important; padding: 5px 12px; color: #2b2b2b; background: linear-gradient(to bottom, #f2d7ad, #a47536); border: 1px solid rgba(255,240,200,.5); border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .08em; line-height: 1; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 6px rgba(0,0,0,.35); } /* Main badge headline under the gold pill */ .cs-product-promise-title { margin: 0 auto 16px !important; max-width: 340px; color: #f6dcb5; font-size: 18px; font-weight: 700; line-height: 1.35; text-shadow: 0 2px 2px rgba(0,0,0,.75), 0 0 10px rgba(255,220,170,.18); } .cs-product-promise-grid { display: grid; grid-template-columns: 1fr; gap: 8px; } .cs-product-promise-item { display: flex; align-items: center; justify-content: flex-start; gap: 9px; min-height: 39px; padding: 9px 11px; background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); border: 1px solid rgba(193,152,101,.34); border-radius: 11px; color: #f3e8d1; font-size: 14px; font-weight: 700; line-height: 1.25; text-align: left; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 7px rgba(0,0,0,.22); } .cs-product-promise-item::before { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 25px; width: 25px; height: 25px; border-radius: 50%; color: #2b2b2b; background: radial-gradient(circle at 32% 28%, #fff0c9, #c99a4b 58%, #7f5c1b 100%); border: 1px solid rgba(255,240,200,.52); font-family: Georgia, serif; font-size: 13px; font-weight: 900; box-shadow: inset 0 1px 1px rgba(255,255,255,.55), inset 0 -2px 3px rgba(0,0,0,.32), 0 2px 5px rgba(0,0,0,.35); } .cs-product-promise-item.cs-secure::before { content: "✓"; } .cs-product-promise-item.cs-built::before { content: "★"; } .cs-product-promise-item.cs-shipping::before { content: "→"; } .cs-product-promise-item span { color: #f3e8d1 !important; } /* Hover polish */ .cs-product-promise-item:hover { border-color: rgba(242,215,173,.62); background: linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.035)); transform: translateY(-1px); box-shadow: 0 0 10px rgba(164,117,54,.22), 0 4px 10px rgba(0,0,0,.3); } /* Mobile */ @media (max-width: 600px) { .cs-product-promise { max-width: 100%; padding: 15px 13px; } .cs-product-promise-title { font-size: 16px; } .cs-product-promise-item { font-size: 13px; } } /* ========================================================= CaseSmith Customs - Wishlist Button Styles existing frontend wishlist button wherever HikaShop outputs it ========================================================= */ /* Wishlist button - catch actual frontend output */ .hikashop_product_page a[href*="wishlist"], .hikashop_product_page a[class*="wishlist"], .hikashop_product_page .hikashop_product_wishlist a, .hikashop_product_page .hikashop_wishlist a, .hikashop_product_page .hikashop_wishlist_button, .hikashop_product_page .hikashop_wishlist_input_button, .hikashop_product_page .hikashop_add_to_wishlist, .hikashop_product_page .hikashop_add_wishlist { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 155px !important; min-height: 46px !important; margin: 12px 6px 0 6px !important; padding: 11px 20px 11px 46px !important; background-color: #2b2b2b !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a47536' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6c-1.7-1.7-4.4-1.7-6.1 0L12 7.3 9.3 4.6c-1.7-1.7-4.4-1.7-6.1 0-1.8 1.8-1.7 4.7.2 6.5L12 20l8.6-8.9c1.9-1.8 2-4.7.2-6.5z'/%3E%3C/svg%3E"), linear-gradient(to bottom, #3b3b3b 0%, #2b2b2b 52%, #1d1d1d 100%) !important; background-repeat: no-repeat, no-repeat !important; background-position: 18px center, center !important; background-size: 16px 16px, 100% 100% !important; border: 1px solid rgba(164,117,54,.7) !important; border-radius: 12px !important; color: #f3e8d1 !important; font-family: Georgia, serif !important; font-size: 0.96rem !important; font-weight: 700 !important; letter-spacing: .01em !important; line-height: 1.2 !important; text-align: center !important; text-decoration: none !important; text-shadow: 0 1px 1px rgba(0,0,0,.65) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 0 #111, 0 10px 18px rgba(0,0,0,.34) !important; cursor: pointer !important; transition: transform .18s ease, box-shadow .18s ease, background-size .18s ease, background-color .18s ease !important; } .hikashop_product_page a[href*="wishlist"] span, .hikashop_product_page a[class*="wishlist"] span, .hikashop_product_page .hikashop_product_wishlist a span, .hikashop_product_page .hikashop_wishlist a span { color: #f3e8d1 !important; } /* Wishlist hover - heart turns red and gets bigger */ .hikashop_product_page a[href*="wishlist"]:hover, .hikashop_product_page a[class*="wishlist"]:hover, .hikashop_product_page .hikashop_product_wishlist a:hover, .hikashop_product_page .hikashop_wishlist a:hover, .hikashop_product_page .hikashop_wishlist_button:hover, .hikashop_product_page .hikashop_wishlist_input_button:hover, .hikashop_product_page .hikashop_add_to_wishlist:hover, .hikashop_product_page .hikashop_add_wishlist:hover { background-color: #303030 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%23c72a2a' stroke='%23c72a2a' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6c-1.7-1.7-4.4-1.7-6.1 0L12 7.3 9.3 4.6c-1.7-1.7-4.4-1.7-6.1 0-1.8 1.8-1.7 4.7.2 6.5L12 20l8.6-8.9c1.9-1.8 2-4.7.2-6.5z'/%3E%3C/svg%3E"), linear-gradient(to bottom, #424242 0%, #303030 52%, #202020 100%) !important; background-repeat: no-repeat, no-repeat !important; background-position: 18px center, center !important; background-size: 22px 22px, 100% 100% !important; color: #fff4dc !important; text-decoration: none !important; transform: translateY(-1px); box-shadow: 0 0 10px rgba(199,42,42,.35), 0 4px 0 #111, 0 14px 24px rgba(0,0,0,.42) !important; } /* ========================================================= CaseSmith Customs - Product Action Buttons Side by Side ========================================================= */ .hikashop_product_page a.hikabtn.hikacart, #hikashop_product_form a.hikabtn.hikacart, #hikashop_product_quantity_field_1_add_to_cart_button, .hikashop_product_page a[href*="wishlist"], .hikashop_product_page a[class*="wishlist"], .hikashop_product_page .hikashop_product_wishlist, .hikashop_product_page .hikashop_wishlist { vertical-align: middle !important; } /* Add to cart button */ .hikashop_product_page a.hikabtn.hikacart, #hikashop_product_form a.hikabtn.hikacart, #hikashop_product_quantity_field_1_add_to_cart_button { display: inline-flex !important; margin: 12px 6px 0 6px !important; } /* Wishlist wrapper if HikaShop wraps it separately */ .hikashop_product_page .hikashop_product_wishlist, .hikashop_product_page .hikashop_wishlist, .hikashop_product_page .hikashop_wishlist_button_div { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; } /* Keep the whole action area centered */ .hikashop_product_quantity_main, #hikashop_product_quantity_main, .hikashop_product_stock, .hikashop_product_quantity_div { text-align: center !important; } /* Mobile stack */ @media (max-width: 520px) { .hikashop_product_page a.hikabtn.hikacart, #hikashop_product_form a.hikabtn.hikacart, #hikashop_product_quantity_field_1_add_to_cart_button, .hikashop_product_page a[href*="wishlist"], .hikashop_product_page a[class*="wishlist"] { display: flex !important; width: 100% !important; max-width: 260px !important; margin: 8px auto 0 auto !important; } } /* ========================================================= FINAL CLEANUP - Quantity, Add to Cart, Wishlist Layout No styled box. Blends into product background. ========================================================= */ /* Remove panel/box look from quantity/cart area */ #hikashop_product_quantity_main, .hikashop_product_quantity_main, .hikashop_product_stock, .hikashop_product_quantity_div { width: 100% !important; max-width: 760px !important; margin: 22px auto 12px auto !important; padding: 0 !important; display: block !important; text-align: center !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* Keep quantity control centered above buttons */ .hikashop_quantity_form { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin: 0 auto 14px auto !important; padding: 0 !important; text-align: center !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .hikashop_quantity_form table { width: auto !important; margin: 0 auto !important; border-collapse: separate !important; border-spacing: 7px 0 !important; background: transparent !important; border: 0 !important; } .hikashop_quantity_form td { padding: 0 !important; margin: 0 !important; border: 0 !important; text-align: center !important; vertical-align: middle !important; } /* Quantity input */ .hikashop_quantity_form input.hikashop_product_quantity_field, input#hikashop_product_quantity_field_1.hikashop_product_quantity_field, .hikashop_product_quantity_main input.hikashop_product_quantity_field { width: 64px !important; max-width: 64px !important; height: 42px !important; padding: 0 !important; margin: 0 !important; text-align: center !important; background: #2b2b2b !important; color: #f3e8d1 !important; border: 1px solid rgba(164,117,54,.75) !important; border-radius: 9px !important; font-family: Georgia, serif !important; font-size: 1.05rem !important; font-weight: 700 !important; box-shadow: inset 0 1px 4px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.25) !important; } /* Plus/minus links */ .hikashop_quantity_form a.hikashop_product_quantity_field_change, .hikashop_quantity_form a.hikashop_product_quantity_field_change_plus, .hikashop_quantity_form a.hikashop_product_quantity_field_change_minus { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; min-width: 32px !important; height: 21px !important; min-height: 21px !important; padding: 0 !important; margin: 0 !important; background: linear-gradient(to bottom, #3a3a3a, #1f1f1f) !important; color: #f3e8d1 !important; border: 1px solid rgba(164,117,54,.75) !important; border-radius: 6px !important; font-family: Georgia, serif !important; font-size: 1rem !important; font-weight: 700 !important; line-height: 1 !important; text-align: center !important; text-decoration: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 5px rgba(0,0,0,.35) !important; } .hikashop_quantity_form a.hikashop_product_quantity_field_change:hover, .hikashop_quantity_form a.hikashop_product_quantity_field_change_plus:hover, .hikashop_quantity_form a.hikashop_product_quantity_field_change_minus:hover { background: linear-gradient(to bottom, #4a4a4a, #282828) !important; color: #fff4dc !important; text-decoration: none !important; transform: translateY(-1px); } /* Make the Add to Cart button inline, not full-row stacked */ #hikashop_product_quantity_field_1_add_to_cart_button, .hikashop_product_page a.hikabtn.hikacart, #hikashop_product_form a.hikabtn.hikacart { display: inline-flex !important; vertical-align: middle !important; margin: 10px 7px 0 7px !important; } /* Make wishlist button inline beside Add to Cart */ .hikashop_product_page a[href*="wishlist"], .hikashop_product_page a[class*="wishlist"], .hikashop_product_page .hikashop_product_wishlist a, .hikashop_product_page .hikashop_wishlist a, .hikashop_product_page .hikashop_wishlist_button, .hikashop_product_page .hikashop_wishlist_input_button, .hikashop_product_page .hikashop_add_to_wishlist, .hikashop_product_page .hikashop_add_wishlist { display: inline-flex !important; vertical-align: middle !important; margin: 10px 7px 0 7px !important; } /* If wishlist is wrapped in its own div, make that wrapper inline */ .hikashop_product_page .hikashop_product_wishlist, .hikashop_product_page .hikashop_wishlist, .hikashop_product_page .hikashop_wishlist_button_div, .hikashop_product_page [class*="wishlist"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; margin: 0 !important; } /* Prevent generic hikabtn styling from resizing plus/minus */ .hikashop_quantity_form a.hikabtn { padding: 0 !important; min-width: 32px !important; min-height: 21px !important; } /* Mobile: stack only on narrow screens */ @media (max-width: 520px) { #hikashop_product_quantity_field_1_add_to_cart_button, .hikashop_product_page a.hikabtn.hikacart, #hikashop_product_form a.hikabtn.hikacart, .hikashop_product_page a[href*="wishlist"], .hikashop_product_page a[class*="wishlist"], .hikashop_product_page .hikashop_product_wishlist a, .hikashop_product_page .hikashop_wishlist a { display: flex !important; width: 100% !important; max-width: 260px !important; margin: 8px auto 0 auto !important; } .hikashop_product_page .hikashop_product_wishlist, .hikashop_product_page .hikashop_wishlist, .hikashop_product_page .hikashop_wishlist_button_div { display: flex !important; width: 100% !important; } } /* ========================================================= CaseSmith Customs - Product Promise Badge Final Layout Wider, shorter, centered ========================================================= */ .cs-product-promise { width: 100% !important; max-width: 560px !important; margin: 18px auto 18px auto !important; padding: 13px 16px 13px !important; text-align: center !important; } /* Center the gold pill and give it breathing room */ .cs-product-promise-kicker { display: inline-block !important; margin: 0 auto 12px auto !important; padding: 5px 13px !important; text-align: center !important; } /* Center headline and tighten height */ .cs-product-promise-title { max-width: 100% !important; margin: 0 auto 12px auto !important; font-size: 17px !important; line-height: 1.25 !important; text-align: center !important; } /* Make the three promise items sit across instead of stacking tall */ .cs-product-promise-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; } /* Make each item shorter and cleaner */ .cs-product-promise-item { min-height: 34px !important; padding: 7px 8px !important; gap: 6px !important; font-size: 12.5px !important; line-height: 1.15 !important; justify-content: center !important; text-align: center !important; } /* Smaller icon circles so the row stays narrow */ .cs-product-promise-item::before { flex: 0 0 22px !important; width: 22px !important; height: 22px !important; font-size: 12px !important; } /* Keep text centered inside each promise item */ .cs-product-promise-item span { text-align: center !important; } /* Mobile: stack neatly if screen is too narrow */ @media (max-width: 620px) { .cs-product-promise { max-width: 430px !important; } .cs-product-promise-grid { grid-template-columns: 1fr !important; } .cs-product-promise-item { justify-content: flex-start !important; text-align: left !important; font-size: 13px !important; } .cs-product-promise-item span { text-align: left !important; } } /* ========================================================= CaseSmith Customs - Exact Price With Options Styling Exact HTML: #hikashop_product_price_with_options_main ========================================================= */ #hikashop_product_price_with_options_main.hikashop_product_price_with_options_main { display: block !important; width: 100% !important; max-width: 760px !important; margin: 22px auto 22px auto !important; padding: 0 !important; text-align: center !important; clear: both !important; font-family: Georgia, serif !important; line-height: 1.2 !important; } #hikashop_product_price_with_options_main .hikashop_option_price_title { display: inline-block !important; margin-right: 8px !important; color: #5a2e1e !important; font-family: Georgia, serif !important; font-size: 24px !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: center !important; } #hikashop_product_price_with_options_main .hikashop_option_price_value { display: inline-block !important; color: #a47536 !important; font-family: Georgia, serif !important; font-size: 34px !important; font-weight: 800 !important; line-height: 1.1 !important; text-align: center !important; text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 2px 4px rgba(0,0,0,.25) !important; } /* ========================================================= CaseSmith Customs - Left Sidebar Accordion Menu Starts closed. Opens only when clicked via .cs-open class. ========================================================= */ /* Hide all left sidebar child menus by default */ .container-sidebar-left .mod-menu li ul, .container-sidebar-left ul.mod-menu li ul { display: none !important; max-height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; transform: translateY(-4px); transition: max-height .28s ease, opacity .22s ease, transform .22s ease, margin .22s ease, padding .22s ease !important; } /* Open only when JS adds .cs-open */ .container-sidebar-left .mod-menu li.cs-open > ul, .container-sidebar-left ul.mod-menu li.cs-open > ul { display: block !important; max-height: 900px !important; opacity: 1 !important; transform: translateY(0); margin: 7px 0 8px 10px !important; padding: 3px 0 4px !important; } /* Parent items with children get a little brass arrow */ .container-sidebar-left .mod-menu li.parent > a, .container-sidebar-left .mod-menu li.deeper > a, .container-sidebar-left .mod-menu li:has(ul) > a { position: relative !important; padding-right: 34px !important; } /* Closed arrow */ .container-sidebar-left .mod-menu li.parent > a::after, .container-sidebar-left .mod-menu li.deeper > a::after, .container-sidebar-left .mod-menu li:has(ul) > a::after { content: "▸"; position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: #f2d7ad; font-size: 13px; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 8px rgba(255,220,170,.35); transition: transform .22s ease, color .22s ease; } /* Open arrow */ .container-sidebar-left .mod-menu li.cs-open > a::after { transform: translateY(-50%) rotate(90deg); color: #fff8d0; } /* Child links: compact boutique submenu look */ .container-sidebar-left .mod-menu li.cs-open > ul > li > a { margin: 5px 8px 5px 12px !important; padding: 8px 10px 8px 28px !important; font-size: 13px !important; font-style: italic !important; color: #ffeeb0 !important; background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.08)) !important; border-left: 1px solid rgba(242,215,173,.48) !important; border-top: 1px solid rgba(255,230,180,.18) !important; border-radius: 8px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 5px rgba(0,0,0,.32) !important; } /* Child hover */ .container-sidebar-left .mod-menu li.cs-open > ul > li > a:hover { color: #fff8d0 !important; background: linear-gradient(180deg, rgba(164,117,54,.28), rgba(0,0,0,.16)) !important; transform: translateX(2px); } /* ========================================================= CaseSmith Customs - Top Navigation Dropdowns Hover open + dark wood/brass custom-shop style ========================================================= */ /* Make parent items able to position dropdowns */ .container-header .mod-menu > li, .container-header .metismenu.mod-menu > li, .container-header .navbar-nav > li { position: relative !important; } /* Hide dropdowns by default */ .container-header .mod-menu > li > ul, .container-header .metismenu.mod-menu > li > ul, .container-header .navbar-nav > li > ul, .container-header .mod-menu .mod-menu__sub, .container-header .metismenu.mod-menu .mm-collapse { display: block !important; position: absolute !important; top: calc(100% + 8px) !important; left: 50% !important; transform: translateX(-50%) translateY(8px) !important; min-width: 225px !important; max-width: 280px !important; margin: 0 !important; padding: 9px !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; background: radial-gradient(circle at 18% 0%, rgba(255,230,170,.14), transparent 35%), linear-gradient(135deg, #343434 0%, #242424 48%, #171717 100%) !important; border: 1px solid rgba(164,117,54,.74) !important; border-radius: 14px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.75), 0 18px 32px rgba(0,0,0,.46) !important; z-index: 99999 !important; transition: opacity .18s ease, visibility .18s ease, transform .18s ease !important; } /* Open dropdown on hover/focus */ .container-header .mod-menu > li:hover > ul, .container-header .mod-menu > li:focus-within > ul, .container-header .metismenu.mod-menu > li:hover > ul, .container-header .metismenu.mod-menu > li:focus-within > ul, .container-header .navbar-nav > li:hover > ul, .container-header .navbar-nav > li:focus-within > ul, .container-header .mod-menu > li:hover > .mod-menu__sub, .container-header .mod-menu > li:focus-within > .mod-menu__sub, .container-header .metismenu.mod-menu > li:hover > .mm-collapse, .container-header .metismenu.mod-menu > li:focus-within > .mm-collapse { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0) !important; } /* Brass shine line on dropdown */ .container-header .mod-menu > li > ul::before, .container-header .metismenu.mod-menu > li > ul::before, .container-header .navbar-nav > li > ul::before, .container-header .mod-menu .mod-menu__sub::before, .container-header .metismenu.mod-menu .mm-collapse::before { content: ""; position: absolute; inset: 0 12px auto 12px; height: 2px; background: linear-gradient( 90deg, transparent, rgba(242,215,173,.75), rgba(164,117,54,.95), rgba(242,215,173,.75), transparent ); } /* Dropdown list cleanup */ .container-header .mod-menu > li > ul li, .container-header .metismenu.mod-menu > li > ul li, .container-header .navbar-nav > li > ul li, .container-header .mod-menu .mod-menu__sub li, .container-header .metismenu.mod-menu .mm-collapse li { display: block !important; width: 100% !important; margin: 4px 0 !important; padding: 0 !important; text-align: left !important; } /* Dropdown links */ .container-header .mod-menu > li > ul li a, .container-header .metismenu.mod-menu > li > ul li a, .container-header .navbar-nav > li > ul li a, .container-header .mod-menu .mod-menu__sub li a, .container-header .metismenu.mod-menu .mm-collapse li a { display: block !important; width: 100% !important; padding: 10px 13px 10px 30px !important; position: relative !important; color: #f3e8d1 !important; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important; border: 1px solid rgba(193,152,101,.28) !important; border-radius: 10px !important; font-family: Georgia, serif !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: .02em !important; text-transform: none !important; text-decoration: none !important; white-space: normal !important; text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 8px rgba(255,220,170,.12) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.22) !important; transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease !important; } /* Little brass rivet on dropdown links */ .container-header .mod-menu > li > ul li a::before, .container-header .metismenu.mod-menu > li > ul li a::before, .container-header .navbar-nav > li > ul li a::before, .container-header .mod-menu .mod-menu__sub li a::before, .container-header .metismenu.mod-menu .mm-collapse li a::before { content: ""; position: absolute; left: 12px; top: 50%; width: 9px; height: 9px; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 30% 30%, #f8e6c1 0%, #d8b87a 34%, #a47536 70%, #5a3e20 100%); box-shadow: 0 0 6px rgba(255,224,170,.42), inset 0 1px 2px rgba(255,255,255,.45), inset 0 -2px 3px rgba(0,0,0,.42); } /* Dropdown hover */ .container-header .mod-menu > li > ul li a:hover, .container-header .metismenu.mod-menu > li > ul li a:hover, .container-header .navbar-nav > li > ul li a:hover, .container-header .mod-menu .mod-menu__sub li a:hover, .container-header .metismenu.mod-menu .mm-collapse li a:hover { color: #fff8d0 !important; background: linear-gradient(180deg, rgba(164,117,54,.34), rgba(90,46,30,.22)) !important; border-color: rgba(242,215,173,.62) !important; text-decoration: none !important; transform: translateX(3px); box-shadow: 0 0 12px rgba(164,117,54,.25), 0 4px 10px rgba(0,0,0,.35) !important; } /* Parent top links with dropdown get a subtle arrow */ .container-header .mod-menu > li.parent > a::after, .container-header .mod-menu > li.deeper > a::after, .container-header .mod-menu > li:has(ul) > a::after, .container-header .metismenu.mod-menu > li:has(ul) > a::after { content: "▾"; display: inline-block; margin-left: 6px; color: #f2d7ad; font-size: 11px; transform: translateY(-1px); } /* Keep dropdown above banner/content */ .container-header, .container-header .container-nav, .container-header nav, .container-header .mod-menu { overflow: visible !important; z-index: 9999 !important; } /* Mobile: don't force hover dropdown behavior */ @media (max-width: 768px) { .container-header .mod-menu > li > ul, .container-header .metismenu.mod-menu > li > ul, .container-header .navbar-nav > li > ul, .container-header .mod-menu .mod-menu__sub, .container-header .metismenu.mod-menu .mm-collapse { position: static !important; transform: none !important; min-width: 100% !important; max-width: 100% !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; margin-top: 6px !important; } } /* ========================================================= CaseSmith Customs - Tight Left Sidebar Menu Buttons Makes buttons sit closer together like the old site ========================================================= */ /* Tighten main menu item spacing */ .container-sidebar-left .mod-menu li { margin: 0 !important; } /* Tighten main button height */ .container-sidebar-left .mod-menu > li > a { padding: 8px 12px 8px 32px !important; margin: 1px 8px !important; line-height: 1.15 !important; min-height: 0 !important; } /* Keep rivet aligned after reducing height */ .container-sidebar-left .mod-menu > li > a::before { left: 12px !important; width: 10px !important; height: 10px !important; } /* Keep submenu arrow aligned */ .container-sidebar-left .mod-menu li.parent > a::after, .container-sidebar-left .mod-menu li.deeper > a::after, .container-sidebar-left .mod-menu li:has(ul) > a::after { right: 10px !important; } /* Tighten child submenu container */ .container-sidebar-left .mod-menu li.cs-open > ul, .container-sidebar-left ul.mod-menu li.cs-open > ul { margin: 3px 0 5px 8px !important; padding: 1px 0 2px !important; } /* Tighten child submenu links */ .container-sidebar-left .mod-menu li.cs-open > ul > li > a, .container-sidebar-left .mod-menu li ul li a { margin: 2px 6px 2px 10px !important; padding: 6px 9px 6px 25px !important; line-height: 1.15 !important; font-size: 12.5px !important; } /* Smaller child rivets */ .container-sidebar-left .mod-menu li ul li a::before { left: 9px !important; width: 7px !important; height: 7px !important; } /* ========================================================= CaseSmith Customs - Final Image Radius + Tighter Left Menu ========================================================= */ /* Product image DIV / wrapper radius, not just the image */ #hikashop_product_left_part, .hikashop_product_left_part, .hikashop_product_image, .hikashop_product_main_image, .hikashop_product_image_subdiv, .hikashop_product_image_thumb, .cs-product-image, .cs-product-image-price { border-radius: 14px !important; overflow: hidden !important; } /* Image itself still gets radius too */ #hikashop_product_left_part img, .hikashop_product_left_part img, .hikashop_product_image img, .hikashop_product_main_image img, .hikashop_product_image_subdiv img, .cs-product-image img, .cs-product-image-price img { border-radius: 14px !important; display: block !important; } /* ========================================================= CaseSmith Customs - Extra Tight Left Sidebar Buttons Makes the wood menu buttons sit much closer together ========================================================= */ /* Reduce padding inside the whole wood menu panel */ .container-sidebar-left .mod-menu { padding-top: 8px !important; padding-bottom: 8px !important; } /* Almost no vertical gap between parent buttons */ .container-sidebar-left .mod-menu li { margin: 0 !important; } /* Tighter main buttons */ .container-sidebar-left .mod-menu > li > a { margin: 1px 8px !important; padding: 7px 11px 7px 31px !important; line-height: 1.08 !important; min-height: 0 !important; border-radius: 8px !important; } /* Slightly smaller main menu text if needed */ .container-sidebar-left .mod-menu > li > a { font-size: 13.5px !important; } /* Keep main rivets aligned after tightening */ .container-sidebar-left .mod-menu > li > a::before { left: 12px !important; width: 9px !important; height: 9px !important; } /* Keep submenu arrow aligned */ .container-sidebar-left .mod-menu li.parent > a::after, .container-sidebar-left .mod-menu li.deeper > a::after, .container-sidebar-left .mod-menu li:has(ul) > a::after { right: 10px !important; font-size: 12px !important; } /* Tighten opened submenu spacing */ .container-sidebar-left .mod-menu li.cs-open > ul, .container-sidebar-left ul.mod-menu li.cs-open > ul { margin: 2px 0 3px 8px !important; padding: 0 !important; } /* Tighten child buttons */ .container-sidebar-left .mod-menu li.cs-open > ul > li > a, .container-sidebar-left .mod-menu li ul li a { margin: 1px 6px 1px 8px !important; padding: 5px 8px 5px 24px !important; line-height: 1.08 !important; font-size: 12px !important; border-radius: 7px !important; } /* Smaller child rivets */ .container-sidebar-left .mod-menu li ul li a::before { left: 8px !important; width: 6px !important; height: 6px !important; } /* ========================================================= CaseSmith Customs - Option / Field Label + Info Icon Spacing Fixes "Rack Spaces" label crowding hover/info icon ========================================================= */ /* Left-side option label cell */ #hikashop_product_options .hikashop_option_name_td, #hikashop_product_options td.hikashop_option_name_td, .hikashop_product_custom_item_info td:first-child, .hikashop_product_custom_info td:first-child { text-align: right !important; vertical-align: middle !important; padding-right: 22px !important; white-space: nowrap !important; } /* Create spacing between label text and hover/info icon */ #hikashop_product_options .hikashop_option_name_td > *, .hikashop_product_custom_item_info td:first-child > *, .hikashop_product_custom_info td:first-child > * { vertical-align: middle !important; } /* Actual option/field title text */ #hikashop_product_options .hikashop_option_name, #hikashop_product_options label, .hikashop_product_custom_item_info label, .hikashop_product_custom_info label { display: inline-block !important; margin-right: 14px !important; line-height: 1.35 !important; vertical-align: middle !important; } /* Tooltip / hover info icon spacing */ #hikashop_product_options .hasTooltip, #hikashop_product_options [data-bs-toggle="tooltip"], #hikashop_product_options [data-toggle="tooltip"], #hikashop_product_options .hikashop_field_description, #hikashop_product_options .hikashop_option_info, #hikashop_product_options .icon-info, #hikashop_product_options .fa-info, #hikashop_product_options .fa-info-circle, #hikashop_product_options .fa-question-circle, .hikashop_product_custom_item_info .hasTooltip, .hikashop_product_custom_item_info [data-bs-toggle="tooltip"], .hikashop_product_custom_item_info [data-toggle="tooltip"], .hikashop_product_custom_item_info .hikashop_field_description, .hikashop_product_custom_item_info .icon-info, .hikashop_product_custom_item_info .fa-info, .hikashop_product_custom_item_info .fa-info-circle, .hikashop_product_custom_item_info .fa-question-circle { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-left: 8px !important; margin-right: 0 !important; position: relative !important; top: -1px !important; vertical-align: middle !important; } /* Add more room between label column and dropdown/input column */ #hikashop_product_options .hikashop_option_selector_td, #hikashop_product_options td.hikashop_option_selector_td, .hikashop_product_custom_item_info td:nth-child(2), .hikashop_product_custom_info td:nth-child(2) { padding-left: 18px !important; vertical-align: middle !important; } /* Give each option row more breathing room */ #hikashop_product_options table, #hikashop_product_options .hikashop_product_options_table, .hikashop_product_custom_item_info table, .hikashop_product_custom_info table { border-collapse: separate !important; border-spacing: 0 14px !important; } /* ========================================================= CaseSmith Customs - Cassiopeia Dropdown Scroll Fix Forces top dropdowns to stay open and actually scroll ========================================================= */ /* Keep header/nav from clipping dropdowns */ .container-header, .container-header .container-nav, .container-header .mod-menu, .container-header .metismenu, .container-header .metismenu.mod-menu, .container-header .metismenu.mod-menu > li, .container-header .metismenu.mod-menu .metismenu-item { overflow: visible !important; z-index: 999999 !important; } /* Parent menu item must anchor submenu */ .container-header .metismenu.mod-menu .metismenu-item { position: relative !important; } /* Force dropdown open on hover/focus */ .container-header .metismenu.mod-menu .metismenu-item:hover > ul, .container-header .metismenu.mod-menu .metismenu-item:focus-within > ul, .container-header .metismenu.mod-menu .metismenu-item:hover > .mm-collapse, .container-header .metismenu.mod-menu .metismenu-item:focus-within > .mm-collapse { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; pointer-events: auto !important; } /* The actual dropdown box */ .container-header .metismenu.mod-menu .metismenu-item > ul, .container-header .metismenu.mod-menu .metismenu-item > .mm-collapse { position: absolute !important; top: 100% !important; left: 0 !important; min-width: 260px !important; max-height: 420px !important; overflow-y: scroll !important; overflow-x: hidden !important; overscroll-behavior: contain !important; margin: 0 !important; padding: 8px 0 !important; background: radial-gradient(circle at 20% 0%, rgba(255,230,170,.13), transparent 36%), linear-gradient(135deg, #343434 0%, #242424 52%, #151515 100%) !important; border: 1px solid rgba(164,117,54,.72) !important; border-radius: 0 0 14px 14px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 24px rgba(0,0,0,.45) !important; z-index: 999999 !important; scrollbar-width: thin !important; scrollbar-color: #a47536 #1c1c1c !important; } /* Visible scrollbar in Chrome/Edge */ .container-header .metismenu.mod-menu .metismenu-item > ul::-webkit-scrollbar, .container-header .metismenu.mod-menu .metismenu-item > .mm-collapse::-webkit-scrollbar { width: 10px !important; } .container-header .metismenu.mod-menu .metismenu-item > ul::-webkit-scrollbar-track, .container-header .metismenu.mod-menu .metismenu-item > .mm-collapse::-webkit-scrollbar-track { background: #1c1c1c !important; } .container-header .metismenu.mod-menu .metismenu-item > ul::-webkit-scrollbar-thumb, .container-header .metismenu.mod-menu .metismenu-item > .mm-collapse::-webkit-scrollbar-thumb { background: #a47536 !important; border-radius: 999px !important; } /* Bridge the hover gap so it does not close before reaching submenu */ .container-header .metismenu.mod-menu .metismenu-item > ul::before, .container-header .metismenu.mod-menu .metismenu-item > .mm-collapse::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; background: transparent; } /* Dropdown links */ .container-header .metismenu.mod-menu .metismenu-item > ul li, .container-header .metismenu.mod-menu .metismenu-item > .mm-collapse li { margin: 0 !important; padding: 0 !important; list-style: none !important; } .container-header .metismenu.mod-menu .metismenu-item > ul a, .container-header .metismenu.mod-menu .metismenu-item > .mm-collapse a { display: block !important; padding: 9px 16px !important; line-height: 1.25 !important; color: #f3e8d1 !important; font-family: Georgia, serif !important; font-weight: 700 !important; text-decoration: none !important; white-space: nowrap !important; background: transparent !important; } .container-header .metismenu.mod-menu .metismenu-item > ul a:hover, .container-header .metismenu.mod-menu .metismenu-item > .mm-collapse a:hover { color: #fff4dc !important; background: rgba(164,117,54,.24) !important; padding-left: 20px !important; } /* ========================================================= CaseSmith Customs - TOP NAV Dropdown Rivet/Text Spacing Fixes rivets/bullets pushing into dropdown link text ========================================================= */ /* Remove default list bullets from top dropdowns */ .container-header .metismenu.mod-menu .metismenu-item > ul, .container-header .metismenu.mod-menu .metismenu-item > .mm-collapse { list-style: none !important; padding-left: 0 !important; } /* Each dropdown row gets room for the rivet */ .container-header .metismenu.mod-menu .metismenu-item > ul li, .container-header .metismenu.mod-menu .metismenu-item > .mm-collapse li { position: relative !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } /* Dropdown links: push text right so rivet has its own lane */ .container-header .metismenu.mod-menu .metismenu-item > ul li > a, .container-header .metismenu.mod-menu .metismenu-item > .mm-collapse li > a { position: relative !important; display: block !important; padding: 9px 16px 9px 38px !important; line-height: 1.25 !important; color: #f3e8d1 !important; font-family: Georgia, serif !important; font-weight: 700 !important; text-decoration: none !important; white-space: nowrap !important; } /* Rivet / brass bullet */ .container-header .metismenu.mod-menu .metismenu-item > ul li > a::before, .container-header .metismenu.mod-menu .metismenu-item > .mm-collapse li > a::before { content: "" !important; position: absolute !important; left: 15px !important; top: 50% !important; transform: translateY(-50%) !important; width: 9px !important; height: 9px !important; border-radius: 50% !important; background: radial-gradient(circle at 35% 30%, #fff3c8 0%, #d2a35a 35%, #7f5520 100%) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.45), 0 1px 2px rgba(0,0,0,.65) !important; } /* Hover state: text moves slightly, rivet stays clean */ .container-header .metismenu.mod-menu .metismenu-item > ul li > a:hover, .container-header .metismenu.mod-menu .metismenu-item > .mm-collapse li > a:hover { padding-left: 42px !important; color: #fff4dc !important; background: rgba(164,117,54,.24) !important; } /* Keep hover rivet aligned */ .container-header .metismenu.mod-menu .metismenu-item > ul li > a:hover::before, .container-header .metismenu.mod-menu .metismenu-item > .mm-collapse li > a:hover::before { left: 17px !important; } /* ========================================================= CaseSmith Customs - Registration Right Column Emergency Fix ONLY registration form page, not account pages ========================================================= */ @media (min-width: 1100px) { body.itemid-120.view-user.layout-form.task-form .site-grid { position: relative !important; } body.itemid-120.view-user.layout-form.task-form .container-component { min-width: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } body.itemid-120.view-user.layout-form.task-form .container-sidebar-right { position: absolute !important; top: 260px !important; right: max(12px, calc((100vw - 1120px) / 2)) !important; transform: translateX(55px) !important; width: 280px !important; max-width: 280px !important; min-width: 0 !important; margin: 0 !important; z-index: 20 !important; box-sizing: border-box !important; } body.itemid-120.view-user.layout-form.task-form .container-sidebar-right > *, body.itemid-120.view-user.layout-form.task-form .container-sidebar-right .card, body.itemid-120.view-user.layout-form.task-form .container-sidebar-right .module, body.itemid-120.view-user.layout-form.task-form .container-sidebar-right .moduletable { width: 100% !important; max-width: 280px !important; box-sizing: border-box !important; } } /* Mobile/tablet: let everything stack normally */ @media (max-width: 1099px) { body.itemid-120.view-user.layout-form.task-form .container-sidebar-right { position: static !important; width: 100% !important; max-width: 720px !important; margin: 24px auto 0 !important; } body.itemid-120.view-user.layout-form.task-form .container-component { padding-right: 0 !important; } } /* ========================================================= CaseSmith Customs - HikaShop Account Area Polish For logged-in account pages: control panel, wishlist, carts, addresses, orders, downloads Likely menu item: itemid-119 ========================================================= */ body.itemid-119.com_hikashop .container-component { background: #f6efe5 !important; color: #2b2b2b !important; font-family: Georgia, serif !important; padding: 22px 26px 34px !important; box-sizing: border-box !important; } /* Main account headings */ body.itemid-119.com_hikashop .container-component h1, body.itemid-119.com_hikashop .container-component h2, body.itemid-119.com_hikashop .container-component h3, body.itemid-119.com_hikashop #hikashopcpanel h1, body.itemid-119.com_hikashop #hikashopcpanel h2, body.itemid-119.com_hikashop #hikashopcpanel h3 { color: #a47536 !important; font-family: Georgia, serif !important; font-weight: 700 !important; text-align: center !important; text-shadow: 1px 1px 2px rgba(0,0,0,.28), 0 0 5px rgba(255,230,190,.22) !important; } /* Account page wrapper panels */ body.itemid-119.com_hikashop #hikashopcpanel, body.itemid-119.com_hikashop .hikashopcpanel, body.itemid-119.com_hikashop .hikashop_carts, body.itemid-119.com_hikashop #hikashop_cart_listing, body.itemid-119.com_hikashop #hikashop_cart_product_listing, body.itemid-119.com_hikashop .hikashop_address_listing_div, body.itemid-119.com_hikashop .hikashop_orders { width: 100% !important; max-width: 100% !important; margin: 18px auto 28px !important; padding: 18px !important; background: rgba(255,255,255,.34) !important; border: 1px solid rgba(164,117,54,.32) !important; border-radius: 14px !important; box-shadow: inset 0 0 6px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.10) !important; color: #2b2b2b !important; font-family: Georgia, serif !important; box-sizing: border-box !important; } /* Tables in account/wishlist/cart/order pages */ body.itemid-119.com_hikashop .container-component table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; background: transparent !important; color: #2b2b2b !important; font-family: Georgia, serif !important; } /* Table headers */ body.itemid-119.com_hikashop .container-component table th, body.itemid-119.com_hikashop .container-component table thead td { background: linear-gradient(to bottom, #f2d7ad, #a47536) !important; color: #2b2b2b !important; font-family: Georgia, serif !important; font-weight: 700 !important; padding: 10px 12px !important; border: 0 !important; text-align: left !important; } /* Table cells */ body.itemid-119.com_hikashop .container-component table td { padding: 10px 12px !important; border-bottom: 1px solid rgba(164,117,54,.22) !important; color: #2b2b2b !important; background: rgba(255,255,255,.24) !important; vertical-align: middle !important; } /* Alternate rows */ body.itemid-119.com_hikashop .container-component table tr.row0 td { background: rgba(255,255,255,.36) !important; } body.itemid-119.com_hikashop .container-component table tr.row1 td { background: rgba(246,239,229,.55) !important; } /* Hover rows */ body.itemid-119.com_hikashop .container-component table tr:hover td { background: rgba(242,215,173,.30) !important; } /* HikaShop account icons / cpanel boxes */ body.itemid-119.com_hikashop #hikashopcpanel div.icon { width: 50% !important; padding: 8px !important; box-sizing: border-box !important; } body.itemid-119.com_hikashop #hikashopcpanel div.icon a { display: block !important; min-height: 118px !important; padding: 16px 12px !important; background: radial-gradient(circle at 18% 0%, rgba(255,230,170,.18), transparent 34%), linear-gradient(135deg, #343434 0%, #242424 48%, #171717 100%) !important; border: 1px solid rgba(164,117,54,.72) !important; border-radius: 14px !important; color: #f3e8d1 !important; text-decoration: none !important; font-family: Georgia, serif !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.28) !important; } body.itemid-119.com_hikashop #hikashopcpanel div.icon:hover a { transform: translateY(-2px); box-shadow: 0 0 10px rgba(164,117,54,.35), 0 10px 22px rgba(0,0,0,.34) !important; } /* Account icon descriptions */ body.itemid-119.com_hikashop .hikashop_cpanel_button_description { color: #f3e8d1 !important; font-family: Georgia, serif !important; font-size: 14px !important; font-weight: 700 !important; text-shadow: 0 2px 2px rgba(0,0,0,.7) !important; } /* Links */ body.itemid-119.com_hikashop .container-component a { color: #8f642a !important; font-weight: 700 !important; text-decoration: none !important; } body.itemid-119.com_hikashop .container-component a:hover { color: #5a2e1e !important; text-decoration: underline !important; } /* Buttons */ body.itemid-119.com_hikashop .container-component .hikabtn, body.itemid-119.com_hikashop .container-component .hikashop_cart_button, body.itemid-119.com_hikashop .container-component .btn, body.itemid-119.com_hikashop .container-component button, body.itemid-119.com_hikashop .container-component input[type="submit"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(to bottom, #f2d7ad, #a47536) !important; border: 1px solid #7f5c1b !important; border-radius: 10px !important; color: #2b2b2b !important; font-family: Georgia, serif !important; font-weight: 700 !important; padding: 9px 15px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 8px rgba(0,0,0,.28) !important; text-shadow: 0 1px 1px rgba(255,255,255,.45) !important; text-decoration: none !important; } body.itemid-119.com_hikashop .container-component .hikabtn:hover, body.itemid-119.com_hikashop .container-component .hikashop_cart_button:hover, body.itemid-119.com_hikashop .container-component .btn:hover, body.itemid-119.com_hikashop .container-component button:hover, body.itemid-119.com_hikashop .container-component input[type="submit"]:hover { background: linear-gradient(to bottom, #ffe8b0, #b5864f) !important; transform: translateY(-1px); } /* Inputs/selects inside account/address pages */ body.itemid-119.com_hikashop .container-component input[type="text"], body.itemid-119.com_hikashop .container-component input[type="email"], body.itemid-119.com_hikashop .container-component input[type="password"], body.itemid-119.com_hikashop .container-component input[type="tel"], body.itemid-119.com_hikashop .container-component select, body.itemid-119.com_hikashop .container-component textarea { background: #2b2b2b !important; color: #f3e8d1 !important; border: 1px solid rgba(164,117,54,.78) !important; border-radius: 9px !important; font-family: Georgia, serif !important; padding: 8px 10px !important; box-shadow: inset 0 1px 5px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.08) !important; } /* Empty messages / notices */ body.itemid-119.com_hikashop .hikashop_not_authorized, body.itemid-119.com_hikashop .hikashop_messages, body.itemid-119.com_hikashop .alert, body.itemid-119.com_hikashop .alert-message { font-family: Georgia, serif !important; border-radius: 10px !important; } /* Mobile */ @media (max-width: 800px) { body.itemid-119.com_hikashop #hikashopcpanel div.icon { width: 100% !important; } body.itemid-119.com_hikashop .container-component { padding: 16px 12px 28px !important; } body.itemid-119.com_hikashop .container-component table, body.itemid-119.com_hikashop .container-component thead, body.itemid-119.com_hikashop .container-component tbody, body.itemid-119.com_hikashop .container-component th, body.itemid-119.com_hikashop .container-component td, body.itemid-119.com_hikashop .container-component tr { display: block !important; width: 100% !important; } body.itemid-119.com_hikashop .container-component table td { box-sizing: border-box !important; } } /* ========================================================= CaseSmith Customs - HikaShop Logged-In Account Pages BROAD FIX for account/cart/wishlist/address/order pages Does NOT touch product pages or registration form ========================================================= */ /* Main logged-in account/content area */ body.com_hikashop:not(.view-product):not(.layout-form) .container-component, body[class*="view-cart"] .container-component, body[class*="layout-listing"] .container-component { background: #f6efe5 !important; color: #2b2b2b !important; font-family: Georgia, serif !important; padding: 22px 24px 34px !important; box-sizing: border-box !important; } /* Catch the actual HikaShop account/cart/wishlist output even if IDs differ */ body.com_hikashop:not(.view-product):not(.layout-form) .container-component [id*="hikashop"], body.com_hikashop:not(.view-product):not(.layout-form) .container-component [class*="hikashop"], body[class*="view-cart"] .container-component [id*="hikashop"], body[class*="view-cart"] .container-component [class*="hikashop"], body[class*="layout-listing"] .container-component [id*="hikashop"], body[class*="layout-listing"] .container-component [class*="hikashop"] { font-family: Georgia, serif !important; color: #2b2b2b !important; box-sizing: border-box !important; } /* Main HikaShop account panels */ body.com_hikashop:not(.view-product):not(.layout-form) .container-component > div[id*="hikashop"], body.com_hikashop:not(.view-product):not(.layout-form) .container-component > div[class*="hikashop"], body[class*="view-cart"] .container-component > div[id*="hikashop"], body[class*="view-cart"] .container-component > div[class*="hikashop"], body[class*="layout-listing"] .container-component > div[id*="hikashop"], body[class*="layout-listing"] .container-component > div[class*="hikashop"] { width: 100% !important; max-width: 100% !important; margin: 18px auto 28px !important; padding: 18px !important; background: rgba(255,255,255,.38) !important; border: 1px solid rgba(164,117,54,.35) !important; border-radius: 14px !important; box-shadow: inset 0 0 6px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.12) !important; } /* Headings */ body.com_hikashop:not(.view-product):not(.layout-form) .container-component h1, body.com_hikashop:not(.view-product):not(.layout-form) .container-component h2, body.com_hikashop:not(.view-product):not(.layout-form) .container-component h3, body[class*="view-cart"] .container-component h1, body[class*="view-cart"] .container-component h2, body[class*="view-cart"] .container-component h3, body[class*="layout-listing"] .container-component h1, body[class*="layout-listing"] .container-component h2, body[class*="layout-listing"] .container-component h3 { color: #8f642a !important; font-family: Georgia, serif !important; font-weight: 700 !important; text-align: center !important; text-shadow: 0 1px 0 rgba(255,245,220,.35), 0 2px 2px rgba(0,0,0,.20) !important; } /* Tables */ body.com_hikashop:not(.view-product):not(.layout-form) .container-component table, body[class*="view-cart"] .container-component table, body[class*="layout-listing"] .container-component table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; overflow: hidden !important; border-radius: 12px !important; background: rgba(255,255,255,.45) !important; border: 1px solid rgba(164,117,54,.28) !important; } /* Table headers */ body.com_hikashop:not(.view-product):not(.layout-form) .container-component th, body.com_hikashop:not(.view-product):not(.layout-form) .container-component thead td, body[class*="view-cart"] .container-component th, body[class*="view-cart"] .container-component thead td, body[class*="layout-listing"] .container-component th, body[class*="layout-listing"] .container-component thead td { background: linear-gradient(to bottom, #f2d7ad, #a47536) !important; color: #2b2b2b !important; font-family: Georgia, serif !important; font-weight: 700 !important; padding: 11px 12px !important; border: 0 !important; text-align: left !important; text-shadow: 0 1px 1px rgba(255,255,255,.35) !important; } /* Table cells */ body.com_hikashop:not(.view-product):not(.layout-form) .container-component td, body[class*="view-cart"] .container-component td, body[class*="layout-listing"] .container-component td { padding: 11px 12px !important; border-bottom: 1px solid rgba(164,117,54,.22) !important; color: #2b2b2b !important; background: rgba(255,255,255,.34) !important; vertical-align: middle !important; font-family: Georgia, serif !important; } /* Row hover */ body.com_hikashop:not(.view-product):not(.layout-form) .container-component tr:hover td, body[class*="view-cart"] .container-component tr:hover td, body[class*="layout-listing"] .container-component tr:hover td { background: rgba(242,215,173,.32) !important; } /* Links */ body.com_hikashop:not(.view-product):not(.layout-form) .container-component a, body[class*="view-cart"] .container-component a, body[class*="layout-listing"] .container-component a { color: #8f642a !important; font-family: Georgia, serif !important; font-weight: 700 !important; text-decoration: none !important; } body.com_hikashop:not(.view-product):not(.layout-form) .container-component a:hover, body[class*="view-cart"] .container-component a:hover, body[class*="layout-listing"] .container-component a:hover { color: #5a2e1e !important; text-decoration: underline !important; } /* Buttons */ body.com_hikashop:not(.view-product):not(.layout-form) .container-component .hikabtn, body.com_hikashop:not(.view-product):not(.layout-form) .container-component .btn, body.com_hikashop:not(.view-product):not(.layout-form) .container-component button, body.com_hikashop:not(.view-product):not(.layout-form) .container-component input[type="submit"], body[class*="view-cart"] .container-component .hikabtn, body[class*="view-cart"] .container-component .btn, body[class*="view-cart"] .container-component button, body[class*="view-cart"] .container-component input[type="submit"], body[class*="layout-listing"] .container-component .hikabtn, body[class*="layout-listing"] .container-component .btn, body[class*="layout-listing"] .container-component button, body[class*="layout-listing"] .container-component input[type="submit"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(to bottom, #f2d7ad, #a47536) !important; border: 1px solid #7f5c1b !important; border-radius: 10px !important; color: #2b2b2b !important; font-family: Georgia, serif !important; font-weight: 700 !important; padding: 8px 13px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 8px rgba(0,0,0,.25) !important; text-decoration: none !important; } /* Inputs/selects */ body.com_hikashop:not(.view-product):not(.layout-form) .container-component input, body.com_hikashop:not(.view-product):not(.layout-form) .container-component select, body.com_hikashop:not(.view-product):not(.layout-form) .container-component textarea, body[class*="view-cart"] .container-component input, body[class*="view-cart"] .container-component select, body[class*="view-cart"] .container-component textarea, body[class*="layout-listing"] .container-component input, body[class*="layout-listing"] .container-component select, body[class*="layout-listing"] .container-component textarea { background: #2b2b2b !important; color: #f3e8d1 !important; border: 1px solid rgba(164,117,54,.78) !important; border-radius: 8px !important; font-family: Georgia, serif !important; padding: 7px 9px !important; } /* HikaShop header/title buttons */ body.com_hikashop:not(.view-product):not(.layout-form) .hikashop_header_title, body[class*="view-cart"] .hikashop_header_title, body[class*="layout-listing"] .hikashop_header_title { float: none !important; text-align: center !important; width: 100% !important; } body.com_hikashop:not(.view-product):not(.layout-form) .hikashop_header_buttons, body[class*="view-cart"] .hikashop_header_buttons, body[class*="layout-listing"] .hikashop_header_buttons { float: none !important; text-align: center !important; width: 100% !important; margin: 10px auto 18px !important; } /* ========================================================= CaseSmith Customs - HikaShop Wishlist Listing Fix Exact page: body.itemid-119.view-cart.layout-listing.task-listing ========================================================= */ /* Hide frontend edit buttons/tooltips while styling/logged in */ body.itemid-119.view-cart.layout-listing.task-listing .jmodedit, body.itemid-119.view-cart.layout-listing.task-listing [role="tooltip"] { display: none !important; } /* Main wishlist wrapper */ body.itemid-119.view-cart.layout-listing.task-listing #hikashop_carts_listing { width: 100% !important; max-width: 100% !important; margin: 0 auto 28px !important; padding: 20px 22px 24px !important; background: rgba(255,255,255,.42) !important; border: 1px solid rgba(164,117,54,.35) !important; border-radius: 14px !important; box-shadow: inset 0 0 6px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.12) !important; color: #2b2b2b !important; font-family: Georgia, serif !important; box-sizing: border-box !important; } /* Title */ body.itemid-119.view-cart.layout-listing.task-listing #hikashop_carts_listing .hikashop_header_title, body.itemid-119.view-cart.layout-listing.task-listing #hikashop_carts_listing .hikashop_header_title h1 { float: none !important; width: 100% !important; margin: 0 auto 16px !important; padding: 0 !important; color: #8f642a !important; font-family: Georgia, serif !important; font-weight: 700 !important; text-align: center !important; text-shadow: 0 1px 0 rgba(255,245,220,.45), 0 2px 2px rgba(0,0,0,.20) !important; } /* Toolbar area */ body.itemid-119.view-cart.layout-listing.task-listing #hikashop_carts_listing .hika_toolbar { float: none !important; width: 100% !important; margin: 0 auto 18px !important; text-align: center !important; } body.itemid-119.view-cart.layout-listing.task-listing #hikashop_carts_listing .hika_toolbar_btn { float: none !important; display: flex !important; justify-content: center !important; gap: 10px !important; flex-wrap: wrap !important; } /* Toolbar buttons */ body.itemid-119.view-cart.layout-listing.task-listing #hikashop_carts_listing .hika_toolbar .hikabtn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; min-height: 42px !important; padding: 9px 15px !important; background: linear-gradient(to bottom, #f2d7ad, #a47536) !important; border: 1px solid #7f5c1b !important; border-radius: 10px !important; color: #2b2b2b !important; font-family: Georgia, serif !important; font-weight: 700 !important; text-decoration: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 8px rgba(0,0,0,.25) !important; } body.itemid-119.view-cart.layout-listing.task-listing #hikashop_carts_listing .hika_toolbar .hikabtn:hover { background: linear-gradient(to bottom, #ffe8b0, #b5864f) !important; color: #2b2b2b !important; transform: translateY(-1px); } /* Kill huge admin-style icon layout inside toolbar buttons */ body.itemid-119.view-cart.layout-listing.task-listing #hikashop_carts_listing .btnIcon, body.itemid-119.view-cart.layout-listing.task-listing #hikashop_carts_listing .btnName { display: inline-flex !important; align-items: center !important; color: #2b2b2b !important; font-size: 14px !important; line-height: 1 !important; } body.itemid-119.view-cart.layout-listing.task-listing #hikashop_carts_listing .btnIcon i { font-size: 16px !important; } /* Wishlist table */ body.itemid-119.view-cart.layout-listing.task-listing #hikashop_cart_listing { width: 100% !important; margin: 0 auto !important; border-collapse: separate !important; border-spacing: 0 !important; overflow: hidden !important; background: rgba(255,255,255,.50) !important; border: 1px solid rgba(164,117,54,.30) !important; border-radius: 12px !important; color: #2b2b2b !important; font-family: Georgia, serif !important; } /* Table header */ body.itemid-119.view-cart.layout-listing.task-listing #hikashop_cart_listing thead th { background: linear-gradient(to bottom, #f2d7ad, #a47536) !important; color: #2b2b2b !important; font-family: Georgia, serif !important; font-weight: 700 !important; font-size: 14px !important; padding: 12px 10px !important; border: 0 !important; text-align: left !important; text-shadow: 0 1px 1px rgba(255,255,255,.35) !important; } /* Table body/footer cells */ body.itemid-119.view-cart.layout-listing.task-listing #hikashop_cart_listing td { padding: 12px 10px !important; border: 0 !important; border-bottom: 1px solid rgba(164,117,54,.22) !important; background: rgba(255,255,255,.36) !important; color: #2b2b2b !important; font-family: Georgia, serif !important; vertical-align: middle !important; } /* Footer / no records area */ body.itemid-119.view-cart.layout-listing.task-listing #hikashop_cart_listing tfoot td { background: rgba(246,239,229,.72) !important; text-align: center !important; border-bottom: 0 !important; } body.itemid-119.view-cart.layout-listing.task-listing .hikashop_results_counter { display: block !important; margin: 12px auto 0 !important; color: #5a2e1e !important; font-family: Georgia, serif !important; font-weight: 700 !important; text-align: center !important; } /* Pagination/display selector */ body.itemid-119.view-cart.layout-listing.task-listing #hikashop_cart_listing .list-footer, body.itemid-119.view-cart.layout-listing.task-listing #hikashop_cart_listing .pagination-toolbar { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; flex-wrap: wrap !important; margin: 0 auto !important; padding: 8px 0 !important; } body.itemid-119.view-cart.layout-listing.task-listing #hikashop_cart_listing .limit { color: #5a2e1e !important; font-family: Georgia, serif !important; font-weight: 700 !important; } /* Dropdown */ body.itemid-119.view-cart.layout-listing.task-listing #hikashop_cart_listing select, body.itemid-119.view-cart.layout-listing.task-listing #hikashop_cart_listing .form-select { background: #2b2b2b !important; color: #f3e8d1 !important; border: 1px solid rgba(164,117,54,.78) !important; border-radius: 8px !important; font-family: Georgia, serif !important; padding: 7px 28px 7px 9px !important; } /* Links inside wishlist table */ body.itemid-119.view-cart.layout-listing.task-listing #hikashop_cart_listing a { color: #8f642a !important; font-family: Georgia, serif !important; font-weight: 700 !important; text-decoration: none !important; } body.itemid-119.view-cart.layout-listing.task-listing #hikashop_cart_listing a:hover { color: #5a2e1e !important; text-decoration: underline !important; } /* Keep the center content clean */ body.itemid-119.view-cart.layout-listing.task-listing .container-component { background: #f6efe5 !important; color: #2b2b2b !important; font-family: Georgia, serif !important; padding: 22px 24px 34px !important; box-sizing: border-box !important; } /* Mobile */ @media (max-width: 800px) { body.itemid-119.view-cart.layout-listing.task-listing #hikashop_carts_listing { padding: 14px 12px 20px !important; } body.itemid-119.view-cart.layout-listing.task-listing #hikashop_cart_listing, body.itemid-119.view-cart.layout-listing.task-listing #hikashop_cart_listing thead, body.itemid-119.view-cart.layout-listing.task-listing #hikashop_cart_listing tbody, body.itemid-119.view-cart.layout-listing.task-listing #hikashop_cart_listing tfoot, body.itemid-119.view-cart.layout-listing.task-listing #hikashop_cart_listing tr, body.itemid-119.view-cart.layout-listing.task-listing #hikashop_cart_listing th, body.itemid-119.view-cart.layout-listing.task-listing #hikashop_cart_listing td { display: block !important; width: 100% !important; box-sizing: border-box !important; } } /* ========================================================= CaseSmith Customs - Wishlist Page Width / Banner Alignment Makes account wishlist layout line up with 1200px top banner ========================================================= */ @media (min-width: 1100px) { body.itemid-119.view-cart.layout-listing.task-listing .site-grid { max-width: 1200px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; display: grid !important; grid-template-columns: 210px minmax(0, 780px) 210px !important; column-gap: 0 !important; } body.itemid-119.view-cart.layout-listing.task-listing .container-sidebar-left { grid-column: 1 !important; width: 210px !important; max-width: 210px !important; } body.itemid-119.view-cart.layout-listing.task-listing .container-component { grid-column: 2 !important; width: 100% !important; max-width: 780px !important; min-width: 0 !important; padding: 22px 22px 34px !important; box-sizing: border-box !important; } body.itemid-119.view-cart.layout-listing.task-listing .container-sidebar-right { grid-column: 3 !important; width: 210px !important; max-width: 210px !important; } body.itemid-119.view-cart.layout-listing.task-listing #hikashop_carts_listing, body.itemid-119.view-cart.layout-listing.task-listing #hikashop_cart_listing { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } } /* ========================================================= CaseSmith Customs - Account Login Redirect Page Fix For clicking User Account while logged out Exact body: com_users view-login itemid-101 ========================================================= */ @media (min-width: 1100px) { body.com_users.view-login.itemid-101 .site-grid { max-width: 1200px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; display: grid !important; grid-template-columns: 210px minmax(0, 780px) 210px !important; column-gap: 0 !important; background: #f6efe5 !important; box-sizing: border-box !important; } body.com_users.view-login.itemid-101 .container-sidebar-left { grid-column: 1 !important; width: 210px !important; max-width: 210px !important; } body.com_users.view-login.itemid-101 .container-component { grid-column: 2 !important; width: 100% !important; max-width: 780px !important; min-width: 0 !important; padding: 22px 24px 34px !important; box-sizing: border-box !important; background: #f6efe5 !important; } body.com_users.view-login.itemid-101 .container-sidebar-right { grid-column: 3 !important; width: 210px !important; max-width: 210px !important; } } /* Main login wrapper */ body.com_users.view-login.itemid-101 .container-component .com-users-login { width: 100% !important; max-width: 620px !important; margin: 20px auto 28px !important; padding: 0 !important; color: #2b2b2b !important; font-family: Georgia, serif !important; box-sizing: border-box !important; } /* System message: Please Login First */ body.com_users.view-login.itemid-101 #system-message-container { max-width: 620px !important; margin: 0 auto 18px !important; } body.com_users.view-login.itemid-101 #system-message-container .joomla-alert, body.com_users.view-login.itemid-101 #system-message-container .alert { border-radius: 12px !important; border: 1px solid rgba(164,117,54,.35) !important; background: rgba(255,255,255,.42) !important; color: #5a2e1e !important; font-family: Georgia, serif !important; box-shadow: inset 0 0 6px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.10) !important; } /* Login form panel */ body.com_users.view-login.itemid-101 .container-component .com-users-login__form, body.com_users.view-login.itemid-101 .container-component form.com-users-login__form, body.com_users.view-login.itemid-101 .container-component .well { width: 100% !important; max-width: 560px !important; margin: 18px auto 20px !important; padding: 24px 26px !important; background: rgba(255,255,255,.42) !important; border: 1px solid rgba(164,117,54,.35) !important; border-radius: 14px !important; box-shadow: inset 0 0 6px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.12) !important; color: #2b2b2b !important; font-family: Georgia, serif !important; box-sizing: border-box !important; } /* Field rows */ body.com_users.view-login.itemid-101 .container-component .control-group { margin-bottom: 14px !important; } /* Labels */ body.com_users.view-login.itemid-101 .container-component .control-label label, body.com_users.view-login.itemid-101 .container-component .form-check-label, body.com_users.view-login.itemid-101 .container-component .com-users-login label { color: #8f642a !important; font-family: Georgia, serif !important; font-weight: 700 !important; text-shadow: 0 1px 0 rgba(255,245,220,.40), 0 2px 2px rgba(0,0,0,.18) !important; } /* Inputs */ body.com_users.view-login.itemid-101 .container-component .com-users-login input[type="text"], body.com_users.view-login.itemid-101 .container-component .com-users-login input[type="password"], body.com_users.view-login.itemid-101 .container-component .com-users-login input[type="email"], body.com_users.view-login.itemid-101 .container-component .com-users-login .form-control { background: #2b2b2b !important; color: #f3e8d1 !important; border: 1px solid rgba(164,117,54,.78) !important; border-radius: 9px !important; font-family: Georgia, serif !important; font-size: 14px !important; padding: 9px 11px !important; box-shadow: inset 0 1px 5px rgba(0,0,0,.68), 0 1px 0 rgba(255,255,255,.08) !important; } /* Input group buttons/icons */ body.com_users.view-login.itemid-101 .container-component .input-group-text, body.com_users.view-login.itemid-101 .container-component .input-password-toggle { background: linear-gradient(to bottom, #3b3b3b, #222) !important; color: #f3e8d1 !important; border: 1px solid rgba(164,117,54,.65) !important; border-radius: 9px !important; } /* Login buttons */ body.com_users.view-login.itemid-101 .container-component .com-users-login .btn, body.com_users.view-login.itemid-101 .container-component .com-users-login button[type="submit"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 44px !important; padding: 10px 18px !important; background: linear-gradient(to bottom, #f2d7ad, #a47536) !important; border: 1px solid #7f5c1b !important; border-radius: 10px !important; color: #2b2b2b !important; font-family: Georgia, serif !important; font-weight: 700 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 8px rgba(0,0,0,.28) !important; text-shadow: 0 1px 1px rgba(255,255,255,.45) !important; text-decoration: none !important; } body.com_users.view-login.itemid-101 .container-component .com-users-login .btn:hover, body.com_users.view-login.itemid-101 .container-component .com-users-login button[type="submit"]:hover { background: linear-gradient(to bottom, #ffe8b0, #b5864f) !important; color: #2b2b2b !important; transform: translateY(-1px); } /* Login options links */ body.com_users.view-login.itemid-101 .container-component .com-users-login__options { max-width: 560px !important; margin: 16px auto 0 !important; border-radius: 12px !important; overflow: hidden !important; border: 1px solid rgba(164,117,54,.28) !important; } body.com_users.view-login.itemid-101 .container-component .com-users-login__options a, body.com_users.view-login.itemid-101 .container-component .list-group-item { background: rgba(255,255,255,.36) !important; color: #8f642a !important; font-family: Georgia, serif !important; font-weight: 700 !important; border-color: rgba(164,117,54,.22) !important; text-decoration: none !important; } body.com_users.view-login.itemid-101 .container-component .com-users-login__options a:hover, body.com_users.view-login.itemid-101 .container-component .list-group-item:hover { background: rgba(242,215,173,.32) !important; color: #5a2e1e !important; } /* Mobile */ @media (max-width: 800px) { body.com_users.view-login.itemid-101 .container-component { padding: 18px 12px 28px !important; } body.com_users.view-login.itemid-101 .container-component .com-users-login__form, body.com_users.view-login.itemid-101 .container-component form.com-users-login__form, body.com_users.view-login.itemid-101 .container-component .well { padding: 18px 14px !important; } } /* ========================================================= CaseSmith Customs — Sidebar Button Override Drop into: user.css (or your Joomla custom CSS field) Features: - Black Tolex pebble texture (SVG data URI — no external file) - Brass hardware border + rivet - Red indicator stripe (left edge) - Spring-slide hover with rivet pop - Amber glow on hover - Physical click-dent active state ========================================================= */ /* ── TOLEX TEXTURE (inline SVG — no file needed) ── */ /* Mesa-style tight pebble pattern in dark charcoal */ :root { --cs-tolex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.18' intercept='0.04'/%3E%3CfeFuncG type='linear' slope='0.18' intercept='0.04'/%3E%3CfeFuncB type='linear' slope='0.18' intercept='0.04'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)'/%3E%3C/svg%3E"); --cs-brass-border: rgba(168, 122, 48, 0.62); --cs-brass-hover: rgba(218, 178, 80, 0.82); --cs-red-stripe: rgba(190, 22, 22, 0.88); --cs-red-hot: rgba(228, 35, 35, 1); --cs-glow-amber: rgba(190, 135, 30, 0.42); --cs-glow-hot: rgba(210, 80, 20, 0.28); } /* ========================================================= MAIN SIDEBAR BUTTONS — rest state ========================================================= */ body.site .site-grid .container-sidebar-left .mod-menu li > a, body.site .site-grid .container-sidebar-left .mod-menu li ul li > a, body.site .site-grid .container-sidebar-left .mod-menu__sub li > a, body.site .site-grid .container-sidebar-left .list-unstyled.small li > a, body.site .site-grid .container-sidebar-left li.item-119 > a, body.site .site-grid .container-sidebar-left li.item-120 > a { display: block !important; position: relative !important; overflow: hidden !important; width: auto !important; margin: 0 !important; padding: 10px 13px 10px 20px !important; font-family: Georgia, serif !important; font-size: 13.5px !important; font-weight: 700 !important; line-height: 1.22 !important; letter-spacing: 0.18px !important; color: #ddd0b0 !important; text-decoration: none !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.6) !important; /* Tolex texture over dark base */ background-color: #1e1c1a !important; background-image: var(--cs-tolex), linear-gradient(90deg, rgba(110, 14, 14, 0.65) 0%, rgba(90, 12, 12, 0.32) 28%, rgba(0, 0, 0, 0.00) 62% ), linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(0, 0, 0, 0.22) 100% ) !important; background-size: 80px 80px, auto, auto !important; background-blend-mode: overlay, normal, normal !important; border: 1px solid var(--cs-brass-border) !important; border-radius: 10px !important; box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.13), inset 0 -1px 0 rgba(0, 0, 0, 0.80), inset 4px 0 0 var(--cs-red-stripe), 0 3px 7px rgba(0, 0, 0, 0.50) !important; transform: translateX(0) !important; transition: color 0.18s ease, padding-left 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.20s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.18s ease, box-shadow 0.20s ease, background-color 0.18s ease !important; } /* ── BRASS SHEEN OVERLAY (::after) ── */ body.site .site-grid .container-sidebar-left .mod-menu li > a::after, body.site .site-grid .container-sidebar-left .mod-menu li ul li > a::after, body.site .site-grid .container-sidebar-left .mod-menu__sub li > a::after, body.site .site-grid .container-sidebar-left .list-unstyled.small li > a::after { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; border-radius: 10px !important; background: linear-gradient(90deg, transparent 55%, rgba(210, 175, 90, 0.09) 100% ), linear-gradient(180deg, rgba(255, 244, 210, 0.10) 0%, transparent 40%, transparent 68%, rgba(0, 0, 0, 0.20) 100% ) !important; opacity: 0.7 !important; transition: opacity 0.18s ease !important; } /* ── BRASS RIVET (::before) — hidden at rest ── */ body.site .site-grid .container-sidebar-left .mod-menu li > a::before, body.site .site-grid .container-sidebar-left .mod-menu li ul li > a::before, body.site .site-grid .container-sidebar-left .mod-menu__sub li > a::before, body.site .site-grid .container-sidebar-left .list-unstyled.small li > a::before { content: "" !important; position: absolute !important; left: 10px !important; top: 50% !important; transform: translateY(-50%) scale(0.65) !important; width: 11px !important; height: 11px !important; border-radius: 50% !important; background: radial-gradient( circle at 34% 28%, #fffae0 0%, #e2b84a 32%, #9a6820 62%, #4a2c08 100% ) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.62), inset 0 -1px 2px rgba(0, 0, 0, 0.58), 0 0 7px rgba(220, 170, 60, 0.40), 1px 1px 2px rgba(0, 0, 0, 0.78) !important; opacity: 0 !important; transition: opacity 0.18s ease, transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) !important; z-index: 2 !important; } /* ========================================================= HOVER STATE — the money shot ========================================================= */ body.site .site-grid .container-sidebar-left .mod-menu li > a:hover, body.site .site-grid .container-sidebar-left .mod-menu li ul li > a:hover, body.site .site-grid .container-sidebar-left .mod-menu__sub li > a:hover, body.site .site-grid .container-sidebar-left .list-unstyled.small li > a:hover { color: #fff8e0 !important; padding-left: 36px !important; transform: translateX(4px) !important; border-color: var(--cs-brass-hover) !important; background-color: #252220 !important; background-image: var(--cs-tolex), linear-gradient(90deg, rgba(168, 22, 22, 0.90) 0%, rgba(130, 16, 16, 0.44) 34%, rgba(0, 0, 0, 0.00) 68% ), linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.25) 100% ) !important; background-size: 80px 80px, auto, auto !important; box-shadow: inset 0 1px 0 rgba(255, 244, 200, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.85), inset 4px 0 0 var(--cs-red-hot), 0 0 16px var(--cs-glow-amber), 0 0 6px var(--cs-glow-hot), 0 6px 14px rgba(0, 0, 0, 0.58) !important; text-shadow: 0 0 16px rgba(255, 210, 100, 0.50), 0 1px 3px rgba(0, 0, 0, 0.92) !important; } /* Rivet pops in on hover */ body.site .site-grid .container-sidebar-left .mod-menu li > a:hover::before, body.site .site-grid .container-sidebar-left .mod-menu li ul li > a:hover::before, body.site .site-grid .container-sidebar-left .mod-menu__sub li > a:hover::before, body.site .site-grid .container-sidebar-left .list-unstyled.small li > a:hover::before { opacity: 1 !important; transform: translateY(-50%) scale(1) !important; } /* Sheen brightens on hover */ body.site .site-grid .container-sidebar-left .mod-menu li > a:hover::after, body.site .site-grid .container-sidebar-left .mod-menu li ul li > a:hover::after, body.site .site-grid .container-sidebar-left .mod-menu__sub li > a:hover::after, body.site .site-grid .container-sidebar-left .list-unstyled.small li > a:hover::after { opacity: 1 !important; } /* ========================================================= ACTIVE STATE — physical click dent ========================================================= */ body.site .site-grid .container-sidebar-left .mod-menu li > a:active, body.site .site-grid .container-sidebar-left .mod-menu li ul li > a:active, body.site .site-grid .container-sidebar-left .mod-menu__sub li > a:active, body.site .site-grid .container-sidebar-left .list-unstyled.small li > a:active { transform: translateX(2px) translateY(1px) !important; color: #fff0c8 !important; box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.65), inset 0 -1px 0 rgba(0, 0, 0, 0.80), inset 4px 0 0 var(--cs-red-hot), 0 1px 3px rgba(0, 0, 0, 0.50) !important; transition: transform 0.06s ease, box-shadow 0.06s ease !important; } /* ========================================================= CURRENT PAGE / ARIA-CURRENT STATE ========================================================= */ body.site .site-grid .container-sidebar-left .mod-menu li.current > a, body.site .site-grid .container-sidebar-left .mod-menu li.active > a, body.site .site-grid .container-sidebar-left .mod-menu li > a[aria-current="page"], body.site .site-grid .container-sidebar-left .mod-menu li ul li.current > a, body.site .site-grid .container-sidebar-left .mod-menu li ul li.active > a, body.site .site-grid .container-sidebar-left .mod-menu li ul li > a[aria-current="page"] { color: #fff8e0 !important; padding-left: 36px !important; border-color: rgba(200, 160, 60, 0.72) !important; background-color: #232120 !important; background-image: var(--cs-tolex), linear-gradient(90deg, rgba(148, 20, 20, 0.88) 0%, rgba(110, 14, 14, 0.38) 34%, rgba(0, 0, 0, 0.00) 70% ), linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(0, 0, 0, 0.24) 100% ) !important; background-size: 80px 80px, auto, auto !important; box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.82), inset 4px 0 0 rgba(200, 25, 25, 0.95), 0 0 11px rgba(160, 105, 28, 0.30), 0 4px 10px rgba(0, 0, 0, 0.52) !important; } body.site .site-grid .container-sidebar-left .mod-menu li.current > a::before, body.site .site-grid .container-sidebar-left .mod-menu li.active > a::before, body.site .site-grid .container-sidebar-left .mod-menu li > a[aria-current="page"]::before, body.site .site-grid .container-sidebar-left .mod-menu li ul li.current > a::before, body.site .site-grid .container-sidebar-left .mod-menu li ul li.active > a::before, body.site .site-grid .container-sidebar-left .mod-menu li ul li > a[aria-current="page"]::before { opacity: 1 !important; transform: translateY(-50%) scale(1) !important; } /* ========================================================= SUBMENU CONTAINER RESET — strip any inherited wood/bg ========================================================= */ body.site .site-grid .container-sidebar-left .mod-menu li ul, body.site .site-grid .container-sidebar-left .mod-menu__sub, body.site .site-grid .container-sidebar-left ul.mod-menu__sub, body.site .site-grid .container-sidebar-left .list-unstyled.small { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; margin: 5px 0 7px 14px !important; padding: 0 !important; list-style: none !important; } body.site .site-grid .container-sidebar-left .mod-menu li ul li, body.site .site-grid .container-sidebar-left .mod-menu__sub li, body.site .site-grid .container-sidebar-left .list-unstyled.small li { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; margin: 5px 0 !important; padding: 0 !important; } /* ========================================================= HOVER-OPEN SUBMENU SYSTEM ========================================================= */ body.site .container-sidebar-left li.nav-item.deeper, body.site .container-sidebar-left li.nav-item.parent, body.site .container-sidebar-left li.nav-item.cs-has-submenu { position: relative !important; } body.site .container-sidebar-left li.nav-item.deeper > ul.mod-menu__sub, body.site .container-sidebar-left li.nav-item.parent > ul.mod-menu__sub, body.site .container-sidebar-left li.nav-item.cs-has-submenu > ul.mod-menu__sub, body.site .container-sidebar-left li.nav-item.deeper > ul.list-unstyled, body.site .container-sidebar-left li.nav-item.parent > ul.list-unstyled, body.site .container-sidebar-left li.nav-item.cs-has-submenu > ul.list-unstyled { display: none !important; visibility: hidden !important; opacity: 0 !important; max-height: 0 !important; overflow: hidden !important; } body.site .container-sidebar-left li.nav-item.deeper:hover > ul.mod-menu__sub, body.site .container-sidebar-left li.nav-item.parent:hover > ul.mod-menu__sub, body.site .container-sidebar-left li.nav-item.cs-has-submenu:hover > ul.mod-menu__sub, body.site .container-sidebar-left li.nav-item.deeper:hover > ul.list-unstyled, body.site .container-sidebar-left li.nav-item.parent:hover > ul.list-unstyled, body.site .container-sidebar-left li.nav-item.cs-has-submenu:hover > ul.list-unstyled, body.site .container-sidebar-left li.nav-item.deeper:focus-within > ul.mod-menu__sub, body.site .container-sidebar-left li.nav-item.parent:focus-within > ul.mod-menu__sub, body.site .container-sidebar-left li.nav-item.cs-has-submenu:focus-within > ul.mod-menu__sub, body.site .container-sidebar-left li.nav-item.deeper:focus-within > ul.list-unstyled, body.site .container-sidebar-left li.nav-item.parent:focus-within > ul.list-unstyled, body.site .container-sidebar-left li.nav-item.cs-has-submenu:focus-within > ul.list-unstyled, body.site .container-sidebar-left li.nav-item.cs-open > ul.mod-menu__sub, body.site .container-sidebar-left li.nav-item.cs-open > ul.list-unstyled { display: block !important; visibility: visible !important; opacity: 1 !important; max-height: 900px !important; overflow: visible !important; margin: 5px 0 7px 14px !important; padding: 0 !important; background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; list-style: none !important; } /* ========================================================= CaseSmith Customs - Checkout + Left Social Corrective Patch Safer version: does NOT affect top nav hamburger ========================================================= */ /* --------------------------------------------------------- 2. Protect top nav hamburger from checkout button styling --------------------------------------------------------- */ @media (min-width: 992px) { .container-header .navbar-toggler, .container-header .navbar-toggler-right, .container-nav .navbar-toggler, .container-nav .navbar-toggler-right { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; overflow: hidden !important; } .container-header .navbar-collapse, .container-nav .navbar-collapse { display: flex !important; flex-basis: auto !important; width: auto !important; height: auto !important; visibility: visible !important; opacity: 1 !important; } .container-header .mod-menu, .container-nav .mod-menu { display: flex !important; } } @media (max-width: 991px) { .container-header .navbar-toggler, .container-header .navbar-toggler-right, .container-nav .navbar-toggler, .container-nav .navbar-toggler-right { display: inline-flex !important; align-items: center !important; justify-content: center !important; } } /* --------------------------------------------------------- 3. Checkout buttons only — excludes navbar toggler --------------------------------------------------------- */ body.itemid-138.com_hikashop .container-component input[type="submit"], body.itemid-138.com_hikashop .container-component input[type="button"], body.itemid-138.com_hikashop .container-component button:not(.navbar-toggler):not(.navbar-toggler-right):not(.input-password-toggle), body.itemid-138.com_hikashop .container-component .hikabtn, body.itemid-138.com_hikashop .container-component .btn:not(.navbar-toggler):not(.navbar-toggler-right):not(.input-password-toggle), body.com_hikashop.view-checkout .container-component input[type="submit"], body.com_hikashop.view-checkout .container-component input[type="button"], body.com_hikashop.view-checkout .container-component button:not(.navbar-toggler):not(.navbar-toggler-right):not(.input-password-toggle), body.com_hikashop.view-checkout .container-component .hikabtn, body.com_hikashop.view-checkout .container-component .btn:not(.navbar-toggler):not(.navbar-toggler-right):not(.input-password-toggle) { width: auto !important; max-width: none !important; min-width: 145px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 10px 8px !important; padding: 10px 18px !important; line-height: 1.2 !important; white-space: normal !important; box-sizing: border-box !important; } /* Hidden fallback submit should stay hidden */ body.itemid-138.com_hikashop .container-component input[type="submit"][style*="display:none"], body.itemid-138.com_hikashop .container-component input[type="submit"][style*="display: none"], body.com_hikashop.view-checkout .container-component input[type="submit"][style*="display:none"], body.com_hikashop.view-checkout .container-component input[type="submit"][style*="display: none"] { display: none !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Radio / checkbox should stay small */ body.itemid-138.com_hikashop input[type="radio"], body.itemid-138.com_hikashop input[type="checkbox"], body.com_hikashop.view-checkout input[type="radio"], body.com_hikashop.view-checkout input[type="checkbox"] { width: auto !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 8px 0 0 !important; padding: 0 !important; box-shadow: none !important; accent-color: #8f1717 !important; } /* --------------------------------------------------------- 4. Checkout Login / Register / Guest selector Keep it centered ABOVE the fields --------------------------------------------------------- */ body.itemid-138.com_hikashop .container-component .control-group:has(input[type="radio"]), body.itemid-138.com_hikashop .container-component .hkform-group:has(input[type="radio"]), body.com_hikashop.view-checkout .container-component .control-group:has(input[type="radio"]), body.com_hikashop.view-checkout .container-component .hkform-group:has(input[type="radio"]) { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 12px 22px !important; width: 100% !important; max-width: 620px !important; margin: 0 auto 24px !important; padding: 14px 16px !important; background: rgba(255,255,255,.34) !important; border: 1px solid rgba(164,117,54,.28) !important; border-radius: 12px !important; box-shadow: inset 0 0 5px rgba(0,0,0,.04), 0 3px 10px rgba(0,0,0,.08) !important; text-align: center !important; box-sizing: border-box !important; } /* Hide empty left label column in radio selector rows */ body.itemid-138.com_hikashop .container-component .control-group:has(input[type="radio"]) .control-label, body.itemid-138.com_hikashop .container-component .hkform-group:has(input[type="radio"]) .hkcontrol-label, body.com_hikashop.view-checkout .container-component .control-group:has(input[type="radio"]) .control-label, body.com_hikashop.view-checkout .container-component .hkform-group:has(input[type="radio"]) .hkcontrol-label { display: none !important; } /* Full-width radio choice container */ body.itemid-138.com_hikashop .container-component .control-group:has(input[type="radio"]) .controls, body.itemid-138.com_hikashop .container-component .hkform-group:has(input[type="radio"]) .hkc-sm-8, body.com_hikashop.view-checkout .container-component .control-group:has(input[type="radio"]) .controls, body.com_hikashop.view-checkout .container-component .hkform-group:has(input[type="radio"]) .hkc-sm-8 { width: 100% !important; max-width: 100% !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 12px 22px !important; text-align: center !important; } /* Login/Register/Guest labels as centered choice buttons */ body.itemid-138.com_hikashop .container-component .control-group:has(input[type="radio"]) label, body.itemid-138.com_hikashop .container-component .hkform-group:has(input[type="radio"]) label, body.com_hikashop.view-checkout .container-component .control-group:has(input[type="radio"]) label, body.com_hikashop.view-checkout .container-component .hkform-group:has(input[type="radio"]) label { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 110px !important; min-height: 38px !important; margin: 0 !important; padding: 8px 14px !important; background: linear-gradient(to bottom, #3b3b3b, #222) !important; border: 1px solid rgba(164,117,54,.65) !important; border-radius: 10px !important; color: #f3e8d1 !important; font-family: Georgia, serif !important; font-weight: 700 !important; text-align: center !important; text-shadow: 0 1px 1px rgba(0,0,0,.65) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 8px rgba(0,0,0,.28) !important; cursor: pointer !important; } /* Actual radio dot remains small */ body.itemid-138.com_hikashop .container-component .control-group:has(input[type="radio"]) input[type="radio"], body.itemid-138.com_hikashop .container-component .hkform-group:has(input[type="radio"]) input[type="radio"], body.com_hikashop.view-checkout .container-component .control-group:has(input[type="radio"]) input[type="radio"], body.com_hikashop.view-checkout .container-component .hkform-group:has(input[type="radio"]) input[type="radio"] { width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 7px 0 0 !important; padding: 0 !important; box-shadow: none !important; accent-color: #8f1717 !important; } /* --------------------------------------------------------- 5. Checkout action rows below fields --------------------------------------------------------- */ body.itemid-138.com_hikashop .hikashop_registration_button_line, body.itemid-138.com_hikashop .hikashop_checkout_buttons, body.itemid-138.com_hikashop .hikashop_checkout_login_buttons, body.itemid-138.com_hikashop .hikashop_checkout_registration_buttons, body.itemid-138.com_hikashop .hika_toolbar, body.itemid-138.com_hikashop .buttons, body.com_hikashop.view-checkout .hikashop_registration_button_line, body.com_hikashop.view-checkout .hikashop_checkout_buttons, body.com_hikashop.view-checkout .hikashop_checkout_login_buttons, body.com_hikashop.view-checkout .hikashop_checkout_registration_buttons, body.com_hikashop.view-checkout .hika_toolbar, body.com_hikashop.view-checkout .buttons { clear: both !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 12px !important; width: 100% !important; max-width: 620px !important; margin: 24px auto 6px !important; padding-top: 14px !important; border-top: 1px solid rgba(164,117,54,.25) !important; text-align: center !important; } /* Hika registration button row has an empty label column — hide it */ body.itemid-138.com_hikashop .hikashop_registration_button_line .hkcontrol-label, body.com_hikashop.view-checkout .hikashop_registration_button_line .hkcontrol-label { display: none !important; } body.itemid-138.com_hikashop .hikashop_registration_button_line .hkc-sm-8, body.com_hikashop.view-checkout .hikashop_registration_button_line .hkc-sm-8 { width: 100% !important; max-width: 100% !important; text-align: center !important; } /* Any loose visible submit button inside checkout should not float at top */ body.itemid-138.com_hikashop .container-component input[type="submit"]:not([style*="display:none"]):not([style*="display: none"]), body.itemid-138.com_hikashop .container-component button[type="submit"], body.com_hikashop.view-checkout .container-component input[type="submit"]:not([style*="display:none"]):not([style*="display: none"]), body.com_hikashop.view-checkout .container-component button[type="submit"] { float: none !important; clear: both !important; vertical-align: middle !important; } /* --------------------------------------------------------- 6. Primary checkout continuation button --------------------------------------------------------- */ body.itemid-138.com_hikashop .hikashop_checkout_next_button, body.itemid-138.com_hikashop .hikashop_next_button, body.itemid-138.com_hikashop button[name="next"], body.itemid-138.com_hikashop input[name="next"], body.com_hikashop.view-checkout .hikashop_checkout_next_button, body.com_hikashop.view-checkout .hikashop_next_button, body.com_hikashop.view-checkout button[name="next"], body.com_hikashop.view-checkout input[name="next"] { min-width: 175px !important; background-color: #8f1717 !important; background-image: linear-gradient(to bottom, #c73434 0%, #8f1717 48%, #5b0d0d 100%) !important; border: 1px solid rgba(243,232,209,.38) !important; color: #f3e8d1 !important; text-shadow: 0 1px 1px rgba(0,0,0,.7) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 3px 0 #3b0909, 0 12px 22px rgba(0,0,0,.38) !important; } /* ========================================================= CaseSmith Customs - Checkout Login/Register/Guest Button Fix Exact target: #data_register_registration_method ========================================================= */ /* Main Login / Registration / Guest selector row */ body.itemid-138.com_hikashop #data_register_registration_method, body.com_hikashop.view-checkout #data_register_registration_method { clear: both !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 14px !important; width: 100% !important; max-width: 560px !important; margin: 10px auto 42px !important; padding: 16px 18px !important; background: rgba(255,255,255,.34) !important; border: 1px solid rgba(164,117,54,.28) !important; border-radius: 14px !important; box-shadow: inset 0 0 5px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.10) !important; float: none !important; text-align: center !important; box-sizing: border-box !important; } /* Hide actual radio inputs */ body.itemid-138.com_hikashop #data_register_registration_method input[type="radio"], body.com_hikashop.view-checkout #data_register_registration_method input[type="radio"] { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Style Login / Registration / Guest labels as clean buttons */ body.itemid-138.com_hikashop #data_register_registration_method label, body.com_hikashop.view-checkout #data_register_registration_method label { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 135px !important; min-height: 42px !important; margin: 0 !important; padding: 10px 16px !important; background: linear-gradient(to bottom, #3b3b3b, #222) !important; border: 1px solid rgba(164,117,54,.70) !important; border-radius: 10px !important; color: #f3e8d1 !important; font-family: Georgia, serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.1 !important; text-align: center !important; text-shadow: 0 1px 1px rgba(0,0,0,.65) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 8px rgba(0,0,0,.28) !important; cursor: pointer !important; white-space: normal !important; box-sizing: border-box !important; } /* Hover */ body.itemid-138.com_hikashop #data_register_registration_method label:hover, body.com_hikashop.view-checkout #data_register_registration_method label:hover { background: linear-gradient(to bottom, #4a4a4a, #282828) !important; color: #fff4dc !important; border-color: rgba(242,215,173,.86) !important; transform: translateY(-1px) !important; box-shadow: 0 0 10px rgba(164,117,54,.35), 0 5px 12px rgba(0,0,0,.38) !important; } /* Checked/current choice */ body.itemid-138.com_hikashop #data_register_registration_method input[type="radio"]:checked + label, body.com_hikashop.view-checkout #data_register_registration_method input[type="radio"]:checked + label { background: linear-gradient(to bottom, #c73434 0%, #8f1717 48%, #5b0d0d 100%) !important; border-color: rgba(243,232,209,.45) !important; color: #fff4dc !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 0 #3b0909, 0 10px 18px rgba(0,0,0,.38) !important; } /* Force the login username row below the selector */ body.itemid-138.com_hikashop input#username, body.itemid-138.com_hikashop input[name="login[username]"], body.com_hikashop.view-checkout input#username, body.com_hikashop.view-checkout input[name="login[username]"] { margin-top: 0 !important; } /* Add space above the row that contains username */ body.itemid-138.com_hikashop form:has(#data_register_registration_method) .control-group:has(input#username), body.itemid-138.com_hikashop form:has(#data_register_registration_method) .control-group:has(input[name="login[username]"]), body.itemid-138.com_hikashop form:has(#data_register_registration_method) .hkform-group:has(input#username), body.itemid-138.com_hikashop form:has(#data_register_registration_method) .hkform-group:has(input[name="login[username]"]), body.com_hikashop.view-checkout form:has(#data_register_registration_method) .control-group:has(input#username), body.com_hikashop.view-checkout form:has(#data_register_registration_method) .control-group:has(input[name="login[username]"]), body.com_hikashop.view-checkout form:has(#data_register_registration_method) .hkform-group:has(input#username), body.com_hikashop.view-checkout form:has(#data_register_registration_method) .hkform-group:has(input[name="login[username]"]) { margin-top: 26px !important; clear: both !important; } /* Mobile */ @media (max-width: 700px) { body.itemid-138.com_hikashop #data_register_registration_method, body.com_hikashop.view-checkout #data_register_registration_method { display: block !important; max-width: 100% !important; margin-bottom: 32px !important; } body.itemid-138.com_hikashop #data_register_registration_method label, body.com_hikashop.view-checkout #data_register_registration_method label { display: flex !important; width: 100% !important; margin: 0 0 10px !important; } } /* ========================================================= CaseSmith Customs - Center HikaShop Category Images For div-style category/product listings ========================================================= */ body.com_hikashop .hikashop_products_listing .hikashop_product, body.com_hikashop .hikashop_products_listing .hikashop_subcontainer, body.com_hikashop .hikashop_categories_listing .hikashop_category, body.com_hikashop .hikashop_categories_listing .hikashop_subcontainer { text-align: center !important; } body.com_hikashop .hikashop_products_listing .hikashop_product_image, body.com_hikashop .hikashop_products_listing .hikashop_product_image_subdiv, body.com_hikashop .hikashop_categories_listing .hikashop_category_image, body.com_hikashop .hikashop_categories_listing .hikashop_category_image_subdiv { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } body.com_hikashop .hikashop_products_listing img.hikashop_product_listing_image, body.com_hikashop .hikashop_categories_listing img.hikashop_category_image { display: block !important; margin-left: auto !important; margin-right: auto !important; } /* Hide giant custom-field / option / characteristic dumps in product listings only */ body.com_hikashop .hikashop_products_listing [class*="field"], body.com_hikashop .hikashop_products_listing [class*="custom"], body.com_hikashop .hikashop_products_listing [class*="characteristic"], body.com_hikashop .hikashop_products_listing [class*="variant"], body.com_hikashop .hikashop_products_listing [class*="option"] { display: none !important; } /* Restore the parts we actually want visible */ body.com_hikashop .hikashop_products_listing .hikashop_product_image, body.com_hikashop .hikashop_products_listing .hikashop_product_image *, body.com_hikashop .hikashop_products_listing .hikashop_product_name, body.com_hikashop .hikashop_products_listing .hikashop_product_name *, body.com_hikashop .hikashop_products_listing .hikashop_product_price_full, body.com_hikashop .hikashop_products_listing .hikashop_product_price_full *, body.com_hikashop .hikashop_products_listing .hikabtn, body.com_hikashop .hikashop_products_listing .hikabtn * { display: revert !important; } /* ========================================================= CaseSmith Customs - Account Navigation Visibility Module can be assigned to all pages, but only shows on account pages ========================================================= */ /* Hide account nav everywhere by default */ .cs-account-nav { display: none !important; } /* Show only on HikaShop user/account/cart/wishlist/order/address pages */ body.com_hikashop.itemid-119 .cs-account-nav, body.com_hikashop.view-user .cs-account-nav, body.com_hikashop.view-cart .cs-account-nav, body.com_hikashop.view-order .cs-account-nav, body.com_hikashop.view-address .cs-account-nav { width: 100% !important; max-width: 780px !important; margin: 18px auto 24px !important; padding: 14px 16px !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 10px !important; background: radial-gradient(circle at 16% 0%, rgba(255,230,170,.12), transparent 34%), linear-gradient(135deg, #343434 0%, #242424 50%, #151515 100%) !important; border: 1px solid rgba(164,117,54,.65) !important; border-radius: 16px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.75), 0 8px 18px rgba(0,0,0,.28) !important; box-sizing: border-box !important; } .cs-account-nav-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 40px !important; padding: 9px 15px !important; background: linear-gradient(90deg, rgba(92,14,14,.60), rgba(92,14,14,.14) 62%, rgba(92,14,14,0)), linear-gradient(135deg, #3b3936 0%, #252423 48%, #111 100%) !important; border: 1px solid rgba(164,117,54,.72) !important; border-radius: 10px !important; color: #f3e8d1 !important; font-family: Georgia, serif !important; font-size: 13.5px !important; font-weight: 700 !important; line-height: 1.1 !important; text-align: center !important; text-decoration: none !important; text-shadow: 0 1px 1px rgba(0,0,0,.75) !important; box-shadow: inset 0 1px 0 rgba(255,240,200,.14), inset 0 -1px 0 rgba(0,0,0,.75), inset 3px 0 0 rgba(143,23,23,.85), 0 3px 7px rgba(0,0,0,.35) !important; } .cs-account-nav-link:hover { color: #fff4dc !important; border-color: rgba(242,215,173,.85) !important; transform: translateY(-1px) !important; box-shadow: inset 0 1px 0 rgba(255,240,200,.20), inset 3px 0 0 rgba(199,42,42,.95), 0 0 12px rgba(164,117,54,.35), 0 5px 12px rgba(0,0,0,.42) !important; } @media (max-width: 800px) { body.com_hikashop.itemid-119 .cs-account-nav, body.com_hikashop.view-user .cs-account-nav, body.com_hikashop.view-cart .cs-account-nav, body.com_hikashop.view-order .cs-account-nav, body.com_hikashop.view-address .cs-account-nav { display: block !important; padding: 14px !important; } .cs-account-nav-link { display: flex !important; width: 100% !important; margin: 0 0 9px !important; } } /* ========================================================= CaseSmith Customs - Account Nav Joomla Profile + Hide Old CPanel Add below existing Account Navigation CSS ========================================================= */ /* Show custom account nav on Joomla profile edit page */ body.com_users.view-profile .cs-account-nav, body.com_users.view-profile.layout-edit .cs-account-nav, body.itemid-101.com_users.view-profile .cs-account-nav { width: 100% !important; max-width: 780px !important; margin: 18px auto 24px !important; padding: 14px 16px !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 10px !important; background: radial-gradient(circle at 16% 0%, rgba(255,230,170,.12), transparent 34%), linear-gradient(135deg, #343434 0%, #242424 50%, #151515 100%) !important; border: 1px solid rgba(164,117,54,.65) !important; border-radius: 16px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.75), 0 8px 18px rgba(0,0,0,.28) !important; box-sizing: border-box !important; } /* Hide old HikaShop account icon grid on the main account page */ body.itemid-119.com_hikashop .hika_cpanel_icons, body.com_hikashop.view-user .hika_cpanel_icons { display: none !important; } /* Mobile for Joomla profile account nav */ @media (max-width: 800px) { body.com_users.view-profile .cs-account-nav, body.com_users.view-profile.layout-edit .cs-account-nav, body.itemid-101.com_users.view-profile .cs-account-nav { display: block !important; padding: 14px !important; } } /* ========================================================= CaseSmith Customs - Account Nav Plain Background Override Keeps buttons, removes dark panel/backdrop ========================================================= */ body.com_hikashop.itemid-119 .cs-account-nav, body.com_hikashop.view-user .cs-account-nav, body.com_hikashop.view-cart .cs-account-nav, body.com_hikashop.view-order .cs-account-nav, body.com_hikashop.view-address .cs-account-nav, body.com_users.view-profile .cs-account-nav, body.com_users.view-profile.layout-edit .cs-account-nav, body.itemid-101.com_users.view-profile .cs-account-nav { background: #f6efe5!important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 8px 0 18px !important; margin: 12px auto 20px !important; max-width: 780px !important; } /* Slightly cleaner spacing on plain background */ .cs-account-nav-link { margin: 0 !important; } /* Optional: make buttons a little brighter since wrapper is gone */ .cs-account-nav-link { background: linear-gradient(90deg, rgba(92,14,14,.62), rgba(92,14,14,.14) 62%, rgba(92,14,14,0)), linear-gradient(135deg, #3b3936 0%, #252423 48%, #111 100%) !important; border: 1px solid rgba(164,117,54,.78) !important; box-shadow: inset 0 1px 0 rgba(255,240,200,.16), inset 0 -1px 0 rgba(0,0,0,.75), inset 3px 0 0 rgba(143,23,23,.85), 0 3px 8px rgba(0,0,0,.28) !important; } /* Account Navigation module wrapper: remove white card backdrop */ body.com_hikashop.itemid-119 .main-top.card, body.com_hikashop.view-user .main-top.card, body.com_hikashop.view-cart .main-top.card, body.com_hikashop.view-order .main-top.card, body.com_hikashop.view-address .main-top.card, body.com_users.view-profile .main-top.card, body.com_users.view-profile.layout-edit .main-top.card, body.itemid-101.com_users.view-profile .main-top.card { background: #f6efe5 !important; background-image: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } body.com_hikashop.itemid-119 .main-top.card .card-body, body.com_hikashop.view-user .main-top.card .card-body, body.com_hikashop.view-cart .main-top.card .card-body, body.com_hikashop.view-order .main-top.card .card-body, body.com_hikashop.view-address .main-top.card .card-body, body.com_users.view-profile .main-top.card .card-body, body.com_users.view-profile.layout-edit .main-top.card .card-body, body.itemid-101.com_users.view-profile .main-top.card .card-body { background: #f6efe5 !important; background-image: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } /* Hide frontend edit pencil/tooltip on account nav module while logged in */ body.com_hikashop.itemid-119 .main-top.card .jmodedit, body.com_hikashop.itemid-119 .main-top.card [role="tooltip"], body.com_hikashop.view-user .main-top.card .jmodedit, body.com_hikashop.view-user .main-top.card [role="tooltip"], body.com_hikashop.view-cart .main-top.card .jmodedit, body.com_hikashop.view-cart .main-top.card [role="tooltip"], body.com_hikashop.view-order .main-top.card .jmodedit, body.com_hikashop.view-order .main-top.card [role="tooltip"], body.com_hikashop.view-address .main-top.card .jmodedit, body.com_hikashop.view-address .main-top.card [role="tooltip"], body.com_users.view-profile .main-top.card .jmodedit, body.com_users.view-profile .main-top.card [role="tooltip"] { display: none !important; } /* ========================================================= CaseSmith Customs - Dark Field Readability Fix Fixes quantity field, checkout title, country/select fields ========================================================= */ /* Product quantity number */ .hikashop_quantity_form input.hikashop_product_quantity_field, input#hikashop_product_quantity_field_1, .hikashop_product_quantity_main input.hikashop_product_quantity_field { color: #f3e8d1 !important; -webkit-text-fill-color: #f3e8d1 !important; background: #2b2b2b !important; caret-color: #f3e8d1 !important; } /* Checkout text/select fields */ body.com_hikashop.view-checkout input, body.com_hikashop.view-checkout select, body.com_hikashop.view-checkout textarea, body.com_hikashop.view-checkout .form-control, body.com_hikashop.view-checkout .hkform-control, body.itemid-138.com_hikashop input, body.itemid-138.com_hikashop select, body.itemid-138.com_hikashop textarea, body.itemid-138.com_hikashop .form-control, body.itemid-138.com_hikashop .hkform-control { color: #f3e8d1 !important; -webkit-text-fill-color: #f3e8d1 !important; background-color: #2b2b2b !important; caret-color: #f3e8d1 !important; } /* Dropdown option text */ body.com_hikashop.view-checkout select option, body.itemid-138.com_hikashop select option { color: #f3e8d1 !important; background: #2b2b2b !important; } /* Placeholder text */ body.com_hikashop.view-checkout input::placeholder, body.com_hikashop.view-checkout textarea::placeholder, body.itemid-138.com_hikashop input::placeholder, body.itemid-138.com_hikashop textarea::placeholder { color: rgba(243,232,209,.72) !important; -webkit-text-fill-color: rgba(243,232,209,.72) !important; } /* Browser autofill fix */ body.com_hikashop.view-checkout input:-webkit-autofill, body.itemid-138.com_hikashop input:-webkit-autofill, .hikashop_quantity_form input:-webkit-autofill { -webkit-text-fill-color: #f3e8d1 !important; box-shadow: 0 0 0 1000px #2b2b2b inset !important; caret-color: #f3e8d1 !important; } /* If country/title uses a styled select library */ body.com_hikashop.view-checkout .choices__inner, body.com_hikashop.view-checkout .choices__item, body.com_hikashop.view-checkout .chosen-container-single .chosen-single, body.com_hikashop.view-checkout .select2-selection__rendered, body.itemid-138.com_hikashop .choices__inner, body.itemid-138.com_hikashop .choices__item, body.itemid-138.com_hikashop .chosen-container-single .chosen-single, body.itemid-138.com_hikashop .select2-selection__rendered { color: #f3e8d1 !important; -webkit-text-fill-color: #f3e8d1 !important; background: #2b2b2b !important; } /* ========================================================= CaseSmith Customs - Registration Page Final Fix Keeps right sidebar anchored right, not low/left Centers/narrows registration fields Page: /index.php/hikashop-menu-for-hikashop-registration ========================================================= */ @media (min-width: 1100px) { /* Anchor point for the right sidebar */ body.itemid-120.view-user.layout-form.task-form .site-grid, body.com_hikashop.view-user.layout-form.task-form .site-grid { position: relative !important; max-width: 1200px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; } /* Keep the center content from running into the right sidebar */ body.itemid-120.view-user.layout-form.task-form .container-component, body.com_hikashop.view-user.layout-form.task-form .container-component { grid-column: 2 !important; width: 100% !important; max-width: 740px !important; min-width: 0 !important; margin: 0 auto !important; padding: 24px 18px 36px !important; padding-right: 18px !important; background: #f6efe5 !important; box-sizing: border-box !important; } /* Put right sidebar on the actual right side */ body.itemid-120.view-user.layout-form.task-form .container-sidebar-right, body.com_hikashop.view-user.layout-form.task-form .container-sidebar-right { position: absolute !important; top: 375px !important; right: max(12px, calc((100vw - 1120px) / 2)) !important; transform: translateX(55px) !important; width: 280px !important; max-width: 280px !important; min-width: 0 !important; margin: 0 !important; padding: 14px 12px !important; z-index: 20 !important; box-sizing: border-box !important; } body.itemid-120.view-user.layout-form.task-form .container-sidebar-right > *, body.itemid-120.view-user.layout-form.task-form .container-sidebar-right .card, body.itemid-120.view-user.layout-form.task-form .container-sidebar-right .module, body.itemid-120.view-user.layout-form.task-form .container-sidebar-right .moduletable, body.com_hikashop.view-user.layout-form.task-form .container-sidebar-right > *, body.com_hikashop.view-user.layout-form.task-form .container-sidebar-right .card, body.com_hikashop.view-user.layout-form.task-form .container-sidebar-right .module, body.com_hikashop.view-user.layout-form.task-form .container-sidebar-right .moduletable { width: 100% !important; max-width: 280px !important; box-sizing: border-box !important; } /* Registration form: narrower and centered */ body.itemid-120.view-user.layout-form.task-form .cs-register-panel, body.com_hikashop.view-user.layout-form.task-form .cs-register-panel, body.itemid-120.view-user.layout-form.task-form .hikashop_contentpane, body.com_hikashop.view-user.layout-form.task-form .hikashop_contentpane { width: 100% !important; max-width: 610px !important; margin: 0 auto 32px !important; box-sizing: border-box !important; } /* Field rows */ body.itemid-120.view-user.layout-form.task-form .cs-register-panel .hkform-group.control-group, body.com_hikashop.view-user.layout-form.task-form .cs-register-panel .hkform-group.control-group { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 570px !important; margin: 0 auto 14px !important; gap: 14px !important; transform: translateX(-28px) !important; box-sizing: border-box !important; } /* Labels */ body.itemid-120.view-user.layout-form.task-form .cs-register-panel .hkcontrol-label, body.com_hikashop.view-user.layout-form.task-form .cs-register-panel .hkcontrol-label { flex: 0 0 145px !important; width: 145px !important; max-width: 145px !important; text-align: right !important; margin: 0 !important; box-sizing: border-box !important; } /* Field column */ body.itemid-120.view-user.layout-form.task-form .cs-register-panel .hkc-sm-8, body.itemid-120.view-user.layout-form.task-form .cs-register-panel .hikashop_address_field_input, body.com_hikashop.view-user.layout-form.task-form .cs-register-panel .hkc-sm-8, body.com_hikashop.view-user.layout-form.task-form .cs-register-panel .hikashop_address_field_input { flex: 1 1 auto !important; width: auto !important; max-width: 340px !important; min-width: 0 !important; box-sizing: border-box !important; } /* Actual fields */ body.itemid-120.view-user.layout-form.task-form .cs-register-panel input[type="text"], body.itemid-120.view-user.layout-form.task-form .cs-register-panel input[type="email"], body.itemid-120.view-user.layout-form.task-form .cs-register-panel input[type="password"], body.itemid-120.view-user.layout-form.task-form .cs-register-panel input[type="tel"], body.itemid-120.view-user.layout-form.task-form .cs-register-panel select, body.itemid-120.view-user.layout-form.task-form .cs-register-panel textarea, body.com_hikashop.view-user.layout-form.task-form .cs-register-panel input[type="text"], body.com_hikashop.view-user.layout-form.task-form .cs-register-panel input[type="email"], body.com_hikashop.view-user.layout-form.task-form .cs-register-panel input[type="password"], body.com_hikashop.view-user.layout-form.task-form .cs-register-panel input[type="tel"], body.com_hikashop.view-user.layout-form.task-form .cs-register-panel select, body.com_hikashop.view-user.layout-form.task-form .cs-register-panel textarea { width: 100% !important; max-width: 340px !important; box-sizing: border-box !important; } } /* Mobile/tablet: normal stacking */ @media (max-width: 1099px) { body.itemid-120.view-user.layout-form.task-form .container-sidebar-right, body.com_hikashop.view-user.layout-form.task-form .container-sidebar-right { position: static !important; width: 100% !important; max-width: 720px !important; margin: 24px auto 0 !important; transform: none !important; } body.itemid-120.view-user.layout-form.task-form .container-component, body.com_hikashop.view-user.layout-form.task-form .container-component { padding: 18px 12px 28px !important; } } /* ========================================================= CaseSmith Customs - Registration Final Field Centering Moves registration fields left and hides account nav here ========================================================= */ /* Registration page should NOT show the custom account nav buttons */ body.itemid-120.view-user.layout-form.task-form .cs-account-nav, body.com_hikashop.view-user.layout-form.task-form .cs-account-nav { display: none !important; } /* Move the whole registration form body slightly left */ @media (min-width: 1100px) { body.itemid-120.view-user.layout-form.task-form .cs-register-panel, body.com_hikashop.view-user.layout-form.task-form .cs-register-panel, body.itemid-120.view-user.layout-form.task-form .hikashop_contentpane, body.com_hikashop.view-user.layout-form.task-form .hikashop_contentpane { transform: translateX(-28px) !important; } /* Move each field row left too, in case the inner rows are overriding the panel */ body.itemid-120.view-user.layout-form.task-form .cs-register-panel .hkform-group.control-group, body.com_hikashop.view-user.layout-form.task-form .cs-register-panel .hkform-group.control-group { transform: translateX(-24px) !important; } /* Slightly tighter label column so fields do not drift right */ body.itemid-120.view-user.layout-form.task-form .cs-register-panel .hkcontrol-label, body.com_hikashop.view-user.layout-form.task-form .cs-register-panel .hkcontrol-label { flex: 0 0 135px !important; width: 135px !important; max-width: 135px !important; } /* Give field column a firm max width */ body.itemid-120.view-user.layout-form.task-form .cs-register-panel .hkc-sm-8, body.itemid-120.view-user.layout-form.task-form .cs-register-panel .hikashop_address_field_input, body.com_hikashop.view-user.layout-form.task-form .cs-register-panel .hkc-sm-8, body.com_hikashop.view-user.layout-form.task-form .cs-register-panel .hikashop_address_field_input { max-width: 335px !important; } body.itemid-120.view-user.layout-form.task-form .cs-register-panel input[type="text"], body.itemid-120.view-user.layout-form.task-form .cs-register-panel input[type="email"], body.itemid-120.view-user.layout-form.task-form .cs-register-panel input[type="password"], body.itemid-120.view-user.layout-form.task-form .cs-register-panel input[type="tel"], body.itemid-120.view-user.layout-form.task-form .cs-register-panel select, body.itemid-120.view-user.layout-form.task-form .cs-register-panel textarea, body.com_hikashop.view-user.layout-form.task-form .cs-register-panel input[type="text"], body.com_hikashop.view-user.layout-form.task-form .cs-register-panel input[type="email"], body.com_hikashop.view-user.layout-form.task-form .cs-register-panel input[type="password"], body.com_hikashop.view-user.layout-form.task-form .cs-register-panel input[type="tel"], body.com_hikashop.view-user.layout-form.task-form .cs-register-panel select, body.com_hikashop.view-user.layout-form.task-form .cs-register-panel textarea { max-width: 335px !important; } } /*/* ========================================================= CaseSmith Customs - Final Social Share Buttons Bronze/gold buttons, dark icons, red glow hover Copy-link uses one controlled icon only ========================================================= */ .cs-social-left a, .cs-social-left button.cs-copy-link { width: 30px !important; height: 30px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; overflow: hidden !important; border-radius: 50% !important; border: 1px solid rgba(255,232,176,.75) !important; background: radial-gradient(circle at 35% 25%, #fff0c6 0%, #d8b87a 34%, #a47536 66%, #5a3e20 100%) !important; color: #171717 !important; -webkit-text-fill-color: #171717 !important; font-family: Georgia, serif !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1 !important; text-decoration: none !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.68), inset 0 -1px 2px rgba(0,0,0,.42), 0 0 7px rgba(242,215,173,.45), 0 0 12px rgba(164,117,54,.42), 0 3px 7px rgba(0,0,0,.48) !important; cursor: pointer !important; transition: transform .18s ease, box-shadow .18s ease, color .18s ease, background .18s ease !important; } /* Normal social icons stay dark */ .cs-social-left a, .cs-social-left a *, .cs-social-left a::before, .cs-social-left a::after { color: #171717 !important; fill: currentColor !important; stroke: currentColor !important; -webkit-text-fill-color: #171717 !important; } /* Copy-link: hide original icon/text completely */ .cs-social-left button.cs-copy-link { font-size: 0 !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } .cs-social-left button.cs-copy-link > *, .cs-social-left button.cs-copy-link svg, .cs-social-left button.cs-copy-link path, .cs-social-left button.cs-copy-link use, .cs-social-left button.cs-copy-link i, .cs-social-left button.cs-copy-link span { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; } /* Copy-link: one controlled chain icon */ .cs-social-left button.cs-copy-link::before { content: "\f0c1" !important; font-family: "Font Awesome 5 Free", "FontAwesome", Arial, sans-serif !important; font-weight: 900 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; font-size: 13px !important; line-height: 1 !important; color: #171717 !important; -webkit-text-fill-color: #171717 !important; opacity: 1 !important; visibility: visible !important; z-index: 2 !important; text-shadow: none !important; } .cs-social-left button.cs-copy-link::after { content: none !important; display: none !important; } /* Hover: stronger bronze outside glow + reddish icon */ .cs-social-left a:hover, .cs-social-left button.cs-copy-link:hover, .cs-social-left button.cs-copy-link:focus { background: radial-gradient(circle at 35% 25%, #fff7d6 0%, #f0cc85 30%, #b98532 64%, #6b471d 100%) !important; border-color: rgba(255,240,200,.95) !important; color: #8f1717 !important; -webkit-text-fill-color: #8f1717 !important; transform: translateY(-2px) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.78), inset 0 -1px 2px rgba(0,0,0,.45), 0 0 9px rgba(255,232,176,.75), 0 0 18px rgba(196,145,55,.68), 0 0 26px rgba(164,117,54,.46), 0 5px 12px rgba(0,0,0,.52) !important; } /* Hover icon color/glow */ .cs-social-left a:hover, .cs-social-left a:hover *, .cs-social-left a:hover::before, .cs-social-left a:hover::after, .cs-social-left button.cs-copy-link:hover::before, .cs-social-left button.cs-copy-link:focus::before { color: #8f1717 !important; fill: currentColor !important; stroke: currentColor !important; -webkit-text-fill-color: #8f1717 !important; text-shadow: 0 0 4px rgba(255,190,150,.75), 0 0 8px rgba(199,42,42,.62), 0 0 13px rgba(143,23,23,.45) !important; } .cs-social-left button.cs-copy-link.cs-copied { box-shadow: inset 0 1px 1px rgba(255,255,255,.78), inset 0 -1px 2px rgba(0,0,0,.45), 0 0 12px rgba(255,232,176,.85), 0 0 22px rgba(196,145,55,.75), 0 0 28px rgba(143,23,23,.55) !important; } .cs-social-left button.cs-copy-link { pointer-events: auto !important; cursor: pointer !important; z-index: 50 !important; } /* ========================================================= CaseSmith Customs - Homepage Polaroid Image Cards Restores old framed/photo-card look for yjt_polaroid images ========================================================= */ .yjpopover { display: inline-block !important; text-decoration: none !important; } /* Main Polaroid / framed image button */ .yjt_polaroid { appearance: none !important; -webkit-appearance: none !important; display: inline-block !important; position: relative !important; width: auto !important; max-width: 100% !important; margin: 10px auto 18px !important; padding: 12px 12px 30px !important; background: linear-gradient(to bottom, #fffaf0, #eee3d2) !important; border: 1px solid rgba(164,117,54,.45) !important; border-radius: 8px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 20px rgba(0,0,0,.34), 0 2px 6px rgba(0,0,0,.22) !important; cursor: pointer !important; overflow: visible !important; transform: rotate(-1deg) !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important; } /* Alternate tilt when multiple cards appear together */ td:nth-child(even) .yjt_polaroid, .yjt_polaroid:nth-of-type(even) { transform: rotate(1deg) !important; } /* Image inside card */ .yjt_polaroid img { display: block !important; width: 270px !important; max-width: 100% !important; height: auto !important; margin: 0 auto !important; border-radius: 5px !important; border: 1px solid rgba(90,62,32,.32) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 4px 10px rgba(0,0,0,.26) !important; filter: saturate(.98) contrast(1.04) !important; } /* Brass pin / corner detail */ .yjt_polaroid::before, .yjt_polaroid::after { content: "" !important; position: absolute !important; top: 9px !important; width: 10px !important; height: 10px !important; border-radius: 50% !important; background: radial-gradient(circle at 35% 30%, #f8e6c1 0%, #d8b87a 34%, #a47536 70%, #5a3e20 100%) !important; box-shadow: inset 0 1px 2px rgba(255,255,255,.55), inset 0 -1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.45) !important; opacity: .9 !important; pointer-events: none !important; } .yjt_polaroid::before { left: 10px !important; } .yjt_polaroid::after { right: 10px !important; } /* Hover: custom-shop glow, not boring flat image */ .yjpopover:hover .yjt_polaroid, .yjt_polaroid:hover { transform: rotate(0deg) translateY(-4px) !important; border-color: rgba(242,215,173,.82) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 0 14px rgba(164,117,54,.36), 0 0 22px rgba(143,23,23,.22), 0 16px 28px rgba(0,0,0,.42) !important; } .yjpopover:hover .yjt_polaroid img, .yjt_polaroid:hover img { filter: saturate(1.08) contrast(1.07) !important; } /* Optional subtle bottom label strip if title attribute is present */ .yjt_polaroid[title]::selection { background: transparent !important; } /* Keep table homepage cells from making the images feel awkward */ td .yjt_polaroid { vertical-align: middle !important; } /* Mobile */ @media (max-width: 700px) { .yjt_polaroid { padding: 10px 10px 26px !important; transform: none !important; } .yjt_polaroid img { width: 100% !important; } } /* ========================================================= CaseSmith Customs - RESTORE Left Sidebar Hover Menu Working setup: hover opens submenu, parent links stay clickable ========================================================= */ body.site .container-sidebar-left, body.site .container-sidebar-left .sidebar-left, body.site .container-sidebar-left .moduletable, body.site .container-sidebar-left .card, body.site .container-sidebar-left .mod-menu { position: relative !important; z-index: 30 !important; pointer-events: auto !important; overflow: visible !important; } /* Parent and child links clickable */ body.site .container-sidebar-left .mod-menu li, body.site .container-sidebar-left .mod-menu li > a, body.site .container-sidebar-left .mod-menu li ul li > a { position: relative !important; z-index: 40 !important; pointer-events: auto !important; cursor: pointer !important; } /* Decorative rivets do not block clicks */ body.site .container-sidebar-left .mod-menu li > a::before, body.site .container-sidebar-left .mod-menu li > a::after { pointer-events: none !important; } /* Parent items can contain dropdowns */ body.site .container-sidebar-left .mod-menu li.parent, body.site .container-sidebar-left .mod-menu li.deeper, body.site .container-sidebar-left .mod-menu li.nav-item.parent, body.site .container-sidebar-left .mod-menu li.nav-item.deeper { position: relative !important; overflow: visible !important; z-index: 45 !important; } /* Closed by default */ body.site .container-sidebar-left .mod-menu li.parent > ul, body.site .container-sidebar-left .mod-menu li.deeper > ul, body.site .container-sidebar-left .mod-menu li.nav-item.parent > ul, body.site .container-sidebar-left .mod-menu li.nav-item.deeper > ul { display: none !important; visibility: hidden !important; opacity: 0 !important; max-height: 0 !important; overflow: hidden !important; } /* Open on hover/focus */ body.site .container-sidebar-left .mod-menu li.parent:hover > ul, body.site .container-sidebar-left .mod-menu li.deeper:hover > ul, body.site .container-sidebar-left .mod-menu li.nav-item.parent:hover > ul, body.site .container-sidebar-left .mod-menu li.nav-item.deeper:hover > ul, body.site .container-sidebar-left .mod-menu li.parent:focus-within > ul, body.site .container-sidebar-left .mod-menu li.deeper:focus-within > ul, body.site .container-sidebar-left .mod-menu li.nav-item.parent:focus-within > ul, body.site .container-sidebar-left .mod-menu li.nav-item.deeper:focus-within > ul { display: block !important; visibility: visible !important; opacity: 1 !important; max-height: 900px !important; overflow: visible !important; margin: 5px 0 7px 12px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; list-style: none !important; z-index: 60 !important; } /* Hide left-menu toggler buttons if Joomla puts them over parent links */ body.site .container-sidebar-left .mod-menu li > button, body.site .container-sidebar-left .mod-menu li > .mm-toggler, body.site .container-sidebar-left .mod-menu li > .mm-toggler-link, body.site .container-sidebar-left .mod-menu li > button.mm-toggler { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; pointer-events: none !important; overflow: hidden !important; } /* ========================================================= CaseSmith Customs - Top Nav Dropdown Rivets Hover Only Hides submenu rivets until hover/current ========================================================= */ /* Hide rivets/bullets in top nav dropdowns by default */ body.site .container-header .mod-menu li ul li > a::before, body.site .container-header .mod-menu__sub li > a::before, body.site .container-header .metismenu li ul li > a::before, body.site .container-header .metismenu .mm-collapse li > a::before { opacity: 0 !important; visibility: hidden !important; transition: opacity .18s ease, visibility .18s ease !important; pointer-events: none !important; } /* Show rivets only when hovering/focusing dropdown links */ body.site .container-header .mod-menu li ul li > a:hover::before, body.site .container-header .mod-menu li ul li > a:focus::before, body.site .container-header .mod-menu__sub li > a:hover::before, body.site .container-header .mod-menu__sub li > a:focus::before, body.site .container-header .metismenu li ul li > a:hover::before, body.site .container-header .metismenu li ul li > a:focus::before, body.site .container-header .metismenu .mm-collapse li > a:hover::before, body.site .container-header .metismenu .mm-collapse li > a:focus::before { opacity: 1 !important; visibility: visible !important; } /* Also show on active/current dropdown item */ body.site .container-header .mod-menu li ul li.current > a::before, body.site .container-header .mod-menu li ul li.active > a::before, body.site .container-header .mod-menu__sub li.current > a::before, body.site .container-header .mod-menu__sub li.active > a::before, body.site .container-header .metismenu li ul li.current > a::before, body.site .container-header .metismenu li ul li.active > a::before { opacity: 1 !important; visibility: visible !important; } /* ========================================================= CaseSmith Customs - Hide Account Nav Module Wrapper Prevents empty white module box on non-account pages ========================================================= */ /* Hide the whole Joomla module card by default */ body.site .main-top.card:has(.cs-account-nav), body.site .main-top.card .card-body:has(.cs-account-nav) { display: none !important; } /* Show the account nav module only on account pages */ body.com_hikashop.itemid-119 .main-top.card:has(.cs-account-nav), body.com_hikashop.view-user:not(.layout-form) .main-top.card:has(.cs-account-nav), body.com_hikashop.view-cart .main-top.card:has(.cs-account-nav), body.com_hikashop.view-order .main-top.card:has(.cs-account-nav), body.com_hikashop.view-address .main-top.card:has(.cs-account-nav), body.com_users.view-profile .main-top.card:has(.cs-account-nav), body.com_users.view-profile.layout-edit .main-top.card:has(.cs-account-nav), body.itemid-101.com_users.view-profile .main-top.card:has(.cs-account-nav) { display: block !important; background: #f6efe5 !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } /* Show the card body only on account pages */ body.com_hikashop.itemid-119 .main-top.card .card-body:has(.cs-account-nav), body.com_hikashop.view-user:not(.layout-form) .main-top.card .card-body:has(.cs-account-nav), body.com_hikashop.view-cart .main-top.card .card-body:has(.cs-account-nav), body.com_hikashop.view-order .main-top.card .card-body:has(.cs-account-nav), body.com_hikashop.view-address .main-top.card .card-body:has(.cs-account-nav), body.com_users.view-profile .main-top.card .card-body:has(.cs-account-nav), body.com_users.view-profile.layout-edit .main-top.card .card-body:has(.cs-account-nav), body.itemid-101.com_users.view-profile .main-top.card .card-body:has(.cs-account-nav) { display: block !important; background: #f6efe5 !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } /* ========================================================= PayPal / HikaShop Pay Now Button - Final Clean Version ========================================================= */ #paypal_pay_button.paypal_pay_button, button#paypal_pay_button.hikabtn, button#paypal_pay_button.hikabtn-success { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; background: linear-gradient(135deg, #c01818, #7f0d0d) !important; color: #fff7e8 !important; border: 1px solid #6f0b0b !important; border-radius: 9px !important; padding: 13px 28px !important; min-width: 200px !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24) !important; cursor: pointer !important; transition: background 0.22s ease, transform 0.18s ease, box-shadow 0.18s ease, color 0.18s ease !important; } #paypal_pay_button, #paypal_pay_button span, #paypal_pay_button i { color: #fff7e8 !important; } #paypal_pay_button i, button#paypal_pay_button.hikabtn i, button#paypal_pay_button.hikabtn-success i { margin-left: 8px !important; font-size: 16px !important; color: #fff7e8 !important; } #paypal_pay_button.paypal_pay_button:hover, button#paypal_pay_button.hikabtn:hover, button#paypal_pay_button.hikabtn-success:hover { background: linear-gradient(135deg, #dd1d1d, #961111) !important; color: #fff7e8 !important; transform: translateY(-2px) !important; box-shadow: 0 9px 20px rgba(0, 0, 0, 0.32) !important; text-decoration: none !important; } #paypal_pay_button:hover, #paypal_pay_button:hover span, #paypal_pay_button:hover i { color: #fff7e8 !important; } #paypal_pay_button.paypal_pay_button:active, button#paypal_pay_button.hikabtn:active, button#paypal_pay_button.hikabtn-success:active { transform: translateY(1px) scale(0.98) !important; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28) !important; color: #fff7e8 !important; } #paypal_pay_button:active, #paypal_pay_button:active span, #paypal_pay_button:active i { color: #fff7e8 !important; } #paypal_pay_button.paypal_pay_button:focus, button#paypal_pay_button.hikabtn:focus, button#paypal_pay_button.hikabtn-success:focus { outline: 2px solid #fff7e8 !important; outline-offset: 3px !important; }