/*
Theme Name: 	       Onage
License:               GNU General Public License v2 or later
License URI:           https://www.gnu.org/licenses/gpl-2.0.html
Author: 		       Themeshawk
Theme URI:             #
Author URI:            #
Description:           Onage is a sleek, modern and high-performance WordPress theme crafted for AI Startup agencies, SaaS, Hosting Agency, portfolios, startups, digital studios, freelancers and professional businesses!
Version: 		       1.0
Requires at least:     5.0
Tested up to: 	       6.6
Requires PHP:          7.4
Text Domain:           onage-theme
Tags:                  custom-colors, custom-menu, featured-images, post-formats, theme-options, threaded-comments, translation-ready
*/ 


:root {
  --glass: rgba(255, 255, 255, 0.12);
  --glass-2: rgba(255, 255, 255, 0.08);
  --stroke: rgba(255, 255, 255, 0.18);
  --shadow-strong: 0 24px 80px rgba(0, 0, 0, .45);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, .25);
}
.price ins {
  text-decoration: none !important;
}
.price del {
  position: relative;
  text-decoration: none; /* remove default line-through */
}
.price del::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px; /* thickness of the diagonal line */
  background: currentColor; /* matches text color */
  transform: rotate(-12deg); /* angle of the diagonal */
  transform-origin: center;
}
/* === WooCommerce Tab Switcher === */ :root {
  --color-tab-switcher-accent: #00ffff;
  --color-tab-switcher-base: rgba(255, 255, 255, 0.07);
  --transition: 0.45s ease-out;
}
.woocommerce div.product .woocommerce-tabs {
  margin-top: 40px;
}
.woocommerce div.product .wc-tabs {
  --bubble-position: 0;
  display: flex;
  justify-content: space-between;
  background-color: var(--color-tab-switcher-base);
  padding: 8px;
  border-radius: 20px;
  list-style: none;
  margin: 0;
  position: relative;
  overflow: hidden;
}
.woocommerce div.product .wc-tabs::before {
  content: "";
  position: absolute;
  top: 8px;
  height: calc(100% - 16px);
  width: calc(100% - 16px);
  max-width: calc((100% - 16px) / 3); /* Adjust for number of tabs */
  border-radius: 20px;
  background-color: var(--color-tab-switcher-accent);
  transform: translateX(var(--bubble-position));
  transition: transform var(--transition);
  z-index: 1;
}
.woocommerce div.product .wc-tabs li {
  flex: 1;
  text-align: center;
  z-index: 2;
}
.woocommerce div.product .wc-tabs li a {
  display: block;
  padding: 20px 10px;
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  color: white;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition);
}
.woocommerce div.product .wc-tabs li.active a {
  color: #050506;
}
.woocommerce div.product .woocommerce-Tabs-panel {
  display: none;
  padding-top: 30px;
}
.woocommerce div.product .woocommerce-Tabs-panel.active {
  display: block;
}
/* Responsive */
@media (max-width: 767px) {
  .woocommerce div.product .wc-tabs {
    border-radius: 12px;
  }
  .woocommerce div.product .wc-tabs::before {
    top: 4px;
    height: calc(100% - 8px);
    width: calc(100% - 8px);
    max-width: calc((100% - 8px) / 3);
    border-radius: 12px;
  }
  .woocommerce div.product .wc-tabs li a {
    font-size: 0.9rem;
    padding: 16px 8px;
  }
}
/*GASP Cursor Animation*/
.cursor {
  position: fixed;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  border-radius: 50%;
  border: 2px solid #800000;
  transition: 0.3s;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1000;
}
.cursor2 {
  position: fixed;
  width: 4px;
  height: 4px;
  margin-left: -20px;
  margin-top: -20px;
  border-radius: 50%;
  background-color: #fff;
  transform: translate(-50%, -50%);
  transition: 0.1s;
  pointer-events: none;
  z-index: 1000;
}
.grow, .grow-small {
  transform: scale(4);
  background: white;
  mix-blend-mode: difference;
  border: none;
}
.grow-small {
  transform: scale(2);
}
/*Text Underline Hover*/
.hover-underline {
  position: relative;
  display: inline-block;
}
.hover-underline::after, .hover-underline::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--color-accent), rgb(var(--color-foreground)));
  bottom: -10px;
  left: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease-out;
}
.hover-underline::before {
  top: -10px;
  transform-origin: left;
}
.hover-underline:hover::after, .hover-underline:hover::before {
  transform: scaleX(1);
}
.th-header-icon-title {
  display: none;
}
/*Contact Form 7*/
.cf7-two-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.cf7-two-columns .cf7-col {
  flex: 1;
  min-width: 250px;
}
.cf7-two-columns label {
  display: block;
  width: 100%;
  font-weight: 500;
  margin-bottom: 15px;
}
.cf7-two-columns input, .cf7-two-columns textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.cf7-submit {
  margin-top: 20px;
  text-align: center;
}
.cf7-submit input[type="submit"] {
  background: #000;
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}
.cf7-submit input[type="submit"]:hover {
  background: #333;
}
.th-rotate {
  animation: rotation 8s infinite linear;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
.round-btn::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 0deg, rgba(var(--color-accent-rgb), 0) 0%, rgba(var(--color-accent-rgb), .95) 15%, rgba(var(--color-accent-rgb), .95) 35%, rgba(var(--color-accent-rgb), .95) 55%, rgba(var(--color-accent-rgb), 0) 70% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  filter: blur(.3px);
  animation: spin 2.4s linear infinite;
}
.round-btn::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(79, 140, 255, .35), rgba(79, 140, 255, 0) 70%);
  opacity: .6;
  filter: blur(10px);
  transition: opacity .25s ease;
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
.card-glass {
  background: linear-gradient(180deg, var(--glass), var(--glass-2));
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 28px 26px 26px;
  box-shadow: var(--shadow-strong);
  backdrop-filter: blur(10px);
  transform: translateY(40px) scale(.98);
  opacity: 0;
  position: relative;
  overflow: hidden;
}
/* Custom Cursor */
.cursor {
  border: 2px solid var(--color-accent);
}
.blur-liquid-glass {
  backdrop-filter: blur(4px);
}
.th-info-card-v2-productInfo {
  gap: 20px;
}
.th-info-card-v2-productInfo .th-info-box-title {
  margin-bottom: 10px !important;
}
.header-5 {
  top: 20%;
  width: 100%;
  max-width: var(--page-width) !important;
  margin: 0 auto;
  border-radius: 100px;
}
.header-5.fixed-top {
  top: 0px;
  width: 100%;
  max-width: 100% !important;
  border-radius: 0px;
}
/*Post card image distortion*/
.card-image {
  position: relative;
  display: flex; /* makes it wrap to image size */
  overflow: hidden;
  border-radius: 0px;
}
.th-post-card-image {
  display: block;
  width: 100%;
  height: auto; /* let image define height */
  transition: 0.5s;
}
.th-post-card-image:nth-child(1) {
  position: absolute;
  top: 0;
  /*left: 0;
    right: 0;*/
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateX(50%) scaleX(2);
  opacity: 0;
  filter: blur(12px);
}
.card-image:hover .th-post-card-image:nth-child(1) {
  transform: translateX(0%) scaleX(1);
  opacity: 1;
  filter: blur(0);
}
.card-image:hover .th-post-card-image:nth-child(2) {
  transform: translateX(-50%) scaleX(2);
  opacity: 0;
  filter: blur(12px);
}
body {
  overscroll-behavior: none;
}
/*404 Page*/
.text-404 {
  font-size: 200px !important;
  line-height: 250px !important;
}
@media (max-width: 767px) {
  .text-404 {
    font-size: 100px !important;
    line-height: 150px !important;
  }
}
@media (max-width: 567px) {
  .text-404 {
    font-size: 50px !important;
    line-height: 75px !important;
  }
}
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .has-megamenu .megamenu {
    position: fixed;
  }
}
/*Glass*/
/* Glass backdrop kit - drop into your theme CSS */
/* Adjustable via CSS variables for quick theming */ :root {
  --glass-bg: rgba(255, 255, 255, 0.35); /* light glass base */
  --glass-bg-dark: rgba(16, 18, 20, 0.35); /* dark glass base */
  --glass-border: rgba(255, 255, 255, 0.28);
  --glass-border-dark: rgba(0, 0, 0, 0.28);
  --glass-blur: 10px;
  --glass-blur-4: 4px;
  --glass-saturate: 120%;
  --glass-contrast: 95%;
  --glass-radius: 14px;
  --glass-padding: 1rem;
  --glass-shadow: 0 6px 20px rgba(13, 14, 18, 0.16);
  --glass-transition: 240ms cubic-bezier(.2, .9, .2, 1);
}
/* Base glass container */
.glass {
  position: relative;
  overflow: hidden;
  transition: background var(--glass-transition), transform var(--glass-transition), box-shadow var(--glass-transition);
  /* Allow children to render above the pseudo-backdrop */
  isolation: isolate;
}
/* Apply the native backdrop-filter when available */
.glass {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) contrast(var(--glass-contrast));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) contrast(var(--glass-contrast));
}
.glass-4 {
  -webkit-backdrop-filter: blur(var(--glass-blur-4)) saturate(var(--glass-saturate)) contrast(var(--glass-contrast));
  backdrop-filter: blur(var(--glass-blur-4)) saturate(var(--glass-saturate)) contrast(var(--glass-contrast));
}
/* Stronger blur / darker tone */
.glass.strong {
  --glass-blur: 18px;
  --glass-bg: rgba(255, 255, 255, 0.22);
  --glass-shadow: 0 10px 32px rgba(13, 14, 18, 0.22);
}
/* Dark glass variant */
.glass.dark {
  background: var(--glass-bg-dark);
  border: 1px solid var(--glass-border-dark);
  color: #fff;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) contrast(1.05);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) contrast(1.05);
}
/* Frosted overlay variant — useful for full-screen hero overlays */
.glass.frosted {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  pointer-events: none; /* so content behind can remain interactive if desired */
}
/* Thin glass panel (like a navbar) */
.glass.nav {
  --glass-radius: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
/* Outline effect for sharper edges */
.glass.outline {
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
}
/* Hover / active interactions */
.glass:hover {
  box-shadow: 0 14px 36px rgba(13, 14, 18, 0.18);
}
/* Small utilities */
.glass.sm {
  --glass-padding: 0.6rem;
  --glass-radius: 10px;
}
.glass.lg {
  --glass-padding: 1.6rem;
  --glass-radius: 18px;
}
/* CONTENT must be rendered normally; ensure high z-index if needed */
.glass > * {
  position: relative;
  z-index: 1;
}
/* FALLBACK: when backdrop-filter isn't supported we'll use a pseudo-element blur approach */
.no-backdrop .glass {
  /* more translucent base when no real backdrop is supported */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.35));
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Optional pseudo-element fallback (slower but works) */
.no-backdrop .glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* fake blurred backdrop using an overlay + CSS blur on the element itself is not possible,
     but this gives a soft frosted look. For heavier blur you would use an SVG or blurred background image. */
  background: inherit;
  filter: blur(6px);
  opacity: 0.9;
  pointer-events: none;
  border-radius: inherit;
}
/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .glass, .glass:hover {
    transition: none;
    transform: none;
  }
  .glass::before {
    transition: none;
  }
}
.th-empty-text {
  min-height: 300px;
}
.th-empty-text p {
  font-size: 20px;
}
/* Width utilities 1% to 100% */
.w-1 {
  width: 1%;
}
.w-2 {
  width: 2%;
}
.w-3 {
  width: 3%;
}
.w-4 {
  width: 4%;
}
.w-5 {
  width: 5%;
}
.w-6-1 {
  width: 6%;
}
.w-7 {
  width: 7%;
}
.w-8 {
  width: 8%;
}
.w-9 {
  width: 9%;
}
.w-10 {
  width: 10%;
}
.w-11 {
  width: 11%;
}
.w-12 {
  width: 12%;
}
.w-13 {
  width: 13%;
}
.w-14 {
  width: 14%;
}
.w-15 {
  width: 15%;
}
.w-16 {
  width: 16%;
}
.w-17 {
  width: 17%;
}
.w-18 {
  width: 18%;
}
.w-19 {
  width: 19%;
}
.w-20 {
  width: 20%;
}
.w-21 {
  width: 21%;
}
.w-22 {
  width: 22%;
}
.w-23 {
  width: 23%;
}
.w-24 {
  width: 24%;
}
.w-25 {
  width: 25%;
}
.w-26 {
  width: 26%;
}
.w-27 {
  width: 27%;
}
.w-28 {
  width: 28%;
}
.w-29 {
  width: 29%;
}
.w-30 {
  width: 30%;
}
.w-31 {
  width: 31%;
}
.w-32 {
  width: 32%;
}
.w-33 {
  width: 33%;
}
.w-34 {
  width: 34%;
}
.w-35 {
  width: 35%;
}
.w-36 {
  width: 36%;
}
.w-37 {
  width: 37%;
}
.w-38 {
  width: 38%;
}
.w-39 {
  width: 39%;
}
.w-40 {
  width: 40%;
}
.w-41 {
  width: 41%;
}
.w-42 {
  width: 42%;
}
.w-43 {
  width: 43%;
}
.w-44 {
  width: 44%;
}
.w-45 {
  width: 45%;
}
.w-46 {
  width: 46%;
}
.w-47 {
  width: 47%;
}
.w-48 {
  width: 48%;
}
.w-49 {
  width: 49%;
}
.w-50 {
  width: 50%;
}
.w-51 {
  width: 51%;
}
.w-52 {
  width: 52%;
}
.w-53 {
  width: 53%;
}
.w-54 {
  width: 54%;
}
.w-55 {
  width: 55%;
}
.w-56 {
  width: 56%;
}
.w-57 {
  width: 57%;
}
.w-58 {
  width: 58%;
}
.w-59 {
  width: 59%;
}
.w-60 {
  width: 60%;
}
.w-61 {
  width: 61%;
}
.w-62 {
  width: 62%;
}
.w-63 {
  width: 63%;
}
.w-64 {
  width: 64%;
}
.w-65 {
  width: 65%;
}
.w-66 {
  width: 66%;
}
.w-67 {
  width: 67%;
}
.w-68 {
  width: 68%;
}
.w-69 {
  width: 69%;
}
.w-70 {
  width: 70%;
}
.w-71 {
  width: 71%;
}
.w-72 {
  width: 72%;
}
.w-73 {
  width: 73%;
}
.w-74 {
  width: 74%;
}
.w-75 {
  width: 75%;
}
.w-76 {
  width: 76%;
}
.w-77 {
  width: 77%;
}
.w-78 {
  width: 78%;
}
.w-79 {
  width: 79%;
}
.w-80 {
  width: 80%;
}
.w-81 {
  width: 81%;
}
.w-82 {
  width: 82%;
}
.w-83 {
  width: 83%;
}
.w-84 {
  width: 84%;
}
.w-85 {
  width: 85%;
}
.w-86 {
  width: 86%;
}
.w-87 {
  width: 87%;
}
.w-88 {
  width: 88%;
}
.w-89 {
  width: 89%;
}
.w-90 {
  width: 90%;
}
.w-91 {
  width: 91%;
}
.w-92 {
  width: 92%;
}
.w-93 {
  width: 93%;
}
.w-94 {
  width: 94%;
}
.w-95 {
  width: 95%;
}
.w-96 {
  width: 96%;
}
.w-97 {
  width: 97%;
}
.w-98 {
  width: 98%;
}
.w-99 {
  width: 99%;
}
.w-100 {
  width: 100%;
}
.btn{
    overflow: hidden !important;
}
/* shadow only on >= md (>= 768px) */
@media (min-width: 768px) {
  .shadow-desktop {
    box-shadow: 0 8px 20px rgb(0 0 0 / .04) !important;
  }
}
.card-image>* {
    padding-block: 0px;
}

/* Search Widget */
.wp-block-search {
    position: relative;
    max-width: 350px;
}

/* Hide Text Button */
.wp-block-search__button {
    font-size: 0;
    padding: 0;
    margin: 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: transparent !important;
    color: transparent !important;
    right: 10px;
    border: none !important;
}

/* Add SVG Icon Inside Button */
.wp-block-search__button::before {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%23000' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
}

/* Style the input so there's space for icon */
.wp-block-search__input {
    padding-right: 45px !important;
    border-radius: 8px;
    height: 45px;
}

/* Hover Effects */
.wp-block-search__button:hover::before {
    opacity: 1;
}



/*Post card image distortion*/
.themeshawk-product-card-image-wrapper {
  position: relative;
  display: flex; /* makes it wrap to image size */
  overflow: hidden;
  border-radius: 4px;
}
.woo-card-primary-image, .woo-card-secondary-image {
  display: block;
  width: 100%;
  height: auto; /* let image define height */
  transition: 0.5s;
}
.woo-card-secondary-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateX(50%) scaleX(2);
  opacity: 0;
  filter: blur(12px);
}
.themeshawk-product-card-image-wrapper:hover .woo-card-secondary-image {
  transform: translateX(0%) scaleX(1);
  opacity: 1;
  filter: blur(0);
}
.themeshawk-product-card-image-wrapper:hover .woo-card-primary-image {
  transform: translateX(-50%) scaleX(2);
  opacity: 0;
  filter: blur(12px);
}

.wc-block-components-quantity-selector > .wc-block-components-quantity-selector__button--minus ,
.wc-block-components-quantity-selector > .wc-block-components-quantity-selector__button--plus {
    height: 50px !important;
}

.wc-block-components-quantity-selector__input {
    border: 0px !important;
}

.wp-post-image {
    border-radius: 10px;
}

.card-post-date-on-image {
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: auto !important;
}

.transparent-form *:not(.btn) {
    background: transparent !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Placeholder white */
.transparent-form *:not(.btn)::placeholder {
    color: #ffffff !important;
    opacity: 1;
}

/*Animations*/
@keyframes floatUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* Move up */
  }
  100% {
    transform: translateY(0); /* Back to original */
  }
}
@keyframes floatDownUp {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(10px); /* Move up */
  }
  100% {
    transform: translateY(0px); /* Back to original */
  }
}
.float-animation {
  animation: floatUpDown 3s ease-in-out infinite;
}
.float-animation-down-up {
  animation: floatDownUp 3s ease-in-out infinite;
}

table.woocommerce-table th, table.woocommerce-table td {
    padding: 12px 16px !important;
    text-align: start;
    vertical-align: middle;
}

table.woocommerce-table .woocommerce-Price-amount {
    font-size: 16px;
}

.woocommerce table.shop_table td {
    padding: 12px 16px !important;
}

a:where(:not(.wp-element-button)) {
    text-decoration: none !important;
}