/* ==========================================================================
   TABLE OF CONTENTS
   ========================================================================== */
/*
  1. IMPORTS ....................................... Font imports
  2. GLOBAL RESET & VARIABLES ...................... Base styles and CSS variables
  3. LAYOUT STYLES ................................. Structural components
     3.1 Container ................................. Wrapper and grid systems
     3.2 Top Bar ................................... Top notification/utility bar
  4. HEADER ........................................ Main header styles
     4.1 Main Header ............................... Logo, sticky behavior and transparent header
     4.2 Navigation ................................ Primary menu
     4.3 Dropdowns ................................. Nested menus
     4.4 Header Right .............................. Icons (cart, search, etc.)
     4.5 AJAX search ............................... Design Popup and header ajax search
  5. CART COUNT BUTTONS ............................ Global Woocommerce Cart Count button styles
  6. OFF-CANVAS MENU ............................... Mobile/slide-out navigation
  7. SEARCH POPUP .................................. Search modal styles
  8. FOOTER ........................................ Footer sections
     8.1 Footer Top ................................ Widget areas
     8.2 Footer Bottom ............................. Copyright/payment icons
  9. WIDGETS ....................................... WordPress widget styling
  10. BLOG/POST STYLES ............................. Blog archive and single posts
     10.1 Page Hero ................................ Blog archive and single posts hero section design
     10.2 Post Meta ................................ Author/date/category labels
     10.3 Sidebar Layout ........................... Blog archive and single page/posts sidebar layout design
     10.4 Featured Posts ........................... Highlighted content
     10.5 Grid/Masonry/Card Layouts ................ Post listing variations
     10.6 Pagination ............................... Navigation controls
  11. SINGLE POST ELEMENTS ......................... Unique to post pages
     11.1 Post Content Styling ..................... Typography and spacing for main content
     11.2 Tags & Social Share ...................... Post-taxonomy links and sharing options
     11.3 Comments Section ......................... Thread styling and form layout design
     11.4 Author Box ............................... Bio section with avatar
     11.5 Post Navigation .......................... Next/previous article links
     11.6 Related Posts ............................ Content recommendations
     11.7 Post Pagination .......................... In-content navigation
     11.8 Password Protection ...................... Secure content form
  12. UTILITY PAGES ................................ Special templates
     12.1 404 Page ................................. Error page design
     12.2 Author Archive ........................... Profile page with posts grid
     12.3 Back to top Design ....................... Back to top button
     12.4 Elementor Popup design ................... Design Elementor popup (Custom popup)
  13. RESPONSIVE DESIGN ............................ Media queries
     13.1 1440px+ (Large Desktop) .................. Adjustments for extra-wide screens
     13.2 1200px+ (Desktop) ........................ Large screens
     13.3 992px (Tablet Landscape) ................. Mid-sized screens
     13.4 768px (Tablet Portrait) .................. Smaller tablets
     13.5 480px (Mobile) ........................... Phone breakpoints
/*========================================================================= */

/* ========================================================================== 
   1. Import Fonts
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Sen:wght@400;700&display=swap");

/* ========================================================================== 
   2. Global Reset
   ========================================================================== */

:root {
  --font-size-h1: 36px;
  --font-size-h2: 32px;
  --font-size-h3: 28px;
  --font-size-h4: 24px;
  --font-size-h5: 20px;
  --font-size-h6: 18px;
  --font-size-normal: 16px;
  --font-size-small: 14px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  box-sizing: border-box;
  font-family: var(--digi-font-family);
  color: var(--digi-text-color);
}

html {
  scroll-behavior: smooth;
}

p {
  margin-bottom: 1rem;
}

a {
  text-decoration: none;
  color: var(--digi-link-color);
  transition: 0.1s;
  outline: none;
}

a:hover {
  color: var(--digi-link-color-hover);
  outline: none;
}

a:focus {
  outline: none;
}

a:active {
  outline: none;
}

[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

input:hover,
input:active,
input:focus,
button:hover,
button:active,
button:focus {
  text-decoration: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: 0;
}

/* Basic Input Fields */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="date"],
textarea,
select {
  font-family: var(--digi-font-family);
  width: 100%;
  max-width: 100%;
  padding: 11px 14px;
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.5;
  color: var(--digi-text-color);
  transition: border-color 0.3s ease;
}

input[type="file"] {
  font-family: var(--digi-font-family);
  padding: 11px 14px;
  border: 1px dashed var(--digi-border-color);
  width: 100%;
}
/* Focus State */
input:focus,
textarea:focus,
select:focus {
  background-color: #ffffff;
  box-shadow: 0 0 5px #cccccc;
  color: var(--digi-text-color);
  opacity: 1 !important;
  outline: none;
  border: 1px solid transparent;
}

/* Submit Button */
input[type="submit"],
.wp-block-search__button {
  background-color: var(--digi-primary-color);
  color: #ffffff;
  padding: 10px 14px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--digi-font-family);
  font-size: var(--font-size-normal);
  line-height: 1.5;
  transition: background-color 0.3s ease;
}

/* Color picker */
input[type="color"] {
  width: 60px;
  height: 40px;
  padding: 2px 3px;
  border: 1px solid var(--digi-border-color);
  border-radius: 3px;
  cursor: pointer;
}

/* Range slider */
input[type="range"] {
  width: 100%;
  cursor: pointer;
}

/* Checkbox & Radio */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--digi-primary-color);
  cursor: pointer;
}

/* Reset & generic buttons */
input[type="reset"],
input[type="button"],
input[type="submit"],
button[type="submit"],
button[type="reset"] {
  background-color: var(--digi-primary-color);
  color: #ffffff;
  padding: 10px 14px;
  border: 1px solid var(--digi-border-color);
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--digi-font-family);
  font-size: var(--font-size-normal);
  transition: background-color 0.3s ease;
  line-height: 1.5;
}

/* Week, Month, Time, Datetime-local */
input[type="week"],
input[type="month"],
input[type="time"],
input[type="datetime-local"] {
  font-family: var(--digi-font-family);
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--digi-border-color);
  border-radius: 3px;
  font-size: var(--font-size-normal);
  color: var(--digi-text-color);
  line-height: inherit;
}

button {
  font-family: var(--digi-font-family);
  line-height: 1.35em;
}

.wp-block-button__link.wp-element-button {
  font-weight: 600;
}

.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link.wp-element-button {
  letter-spacing: 0.04em;
}

input[type="submit"]:hover,
button:hover:not(
    .offcanvas-toggle:hover,
    .offcanvas-main-menu-toggle.hamburger_in_desktop:hover,
    .offcanvas-close:hover,
    .digishift-popup-close:hover,
    .digi-mini-cart-close:hover,
    .search-popup-content form button[type="submit"]:hover,
    .header-v1 .search-bar .icon:hover,
    .elementor-editor-active .flex-preset-button:hover,
    .elementor-editor-active .flex-preset-button:focus,
    .elementor-editor-active .grid-preset-button:hover,
    .elementor-editor-active .grid-preset-button:focus,
    .e-con-select-preset__list .e-con-preset:hover,
    .e-con-select-preset__list .e-con-preset:focus,
    .elementor-editor-active .elementor-add-section-close:hover,
    .elementor-editor-active .elementor-add-section-close:focus,
    .elementor-editor-active .elementor-add-section-back:hover,
    .elementor-editor-active .elementor-add-section-back:focus,
    .elementor-editor-active .elementor-add-section-area-button:hover,
    .elementor-editor-active .elementor-add-section-area-button:focus
  ) {
  background-color: var(--digi-primary-color);
  box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.2);
}

svg,
object {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

svg.remove-icon {
  width: 14px;
  height: 14px;
  color: #cccccc;
  fill: #cccccc;
}

a:hover svg.remove-icon {
  color: #ffffff;
  fill: #ffffff;
}

svg.remove-icon path {
  color: currentColor;
  fill: currentColor;
  stroke: currentColor;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--digi-title-color);
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: var(--digi-title-color);
}

h1:hover a,
h2:hover a,
h3:hover a,
h4:hover a,
h5:hover a,
h6:hover a {
  color: var(--digi-link-color-hover);
}

h1 {
  font-size: var(--font-size-h1);
  line-height: 1.4em;
}

h2 {
  font-size: var(--font-size-h2);
  line-height: 1.4em;
}

h3 {
  font-size: var(--font-size-h3);
  line-height: 1.4em;
}

h4 {
  font-size: var(--font-size-h4);
  line-height: 1.6em;
}
h5 {
  font-size: var(--font-size-h5);
}
h6 {
  font-size: var(--font-size-h6);
}

ol,
ul {
  list-style-position: inside;
}

summary {
  line-height: 1.6em;
}

.left-align {
  margin-right: auto;
}

.right-align {
  margin-left: auto;
}
.center-align {
  margin: auto;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
body.admin-bar .digi-main-header.transparent-header {
  top: 32px;
}

body.admin-bar .digi-main-header.sticky {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .digi-main-header.transparent-header {
    top: 46px;
  }

  body.admin-bar .offcanvas-nav,
  body.admin-bar .digi-mini-cart {
    margin-top: 46px;
  }

  body.admin-bar .digi-main-header.sticky {
    top: 0;
  }
}

/* ==========================================================================
   3. LAYOUT STYLES
   ========================================================================== */

/* 3.1 Container 
   - Core layout wrappers and spacing
-------------------------------------------------------------- */
.digishiftwrapper {
  max-width: calc(1160px + 20px);
  margin: 0 auto;
  gap: 50px;
  padding: 0 20px;
}

#digi-main {
  padding: 80px 0;
}

#digi-main .digishiftwrapper {
  display: inherit;
  box-sizing: border-box;
}

.column-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  width: 100%;
  gap: 30px;
}

.column-wrapper .column {
  width: 100%;
}

/* One-column layout */
.one-column {
  flex-direction: column;
}

/* Two-column layout */
.two-column .column {
  flex: 0 0 calc(50% - 30px);
}

/* Three-column layout */
.three-column .column {
  flex: 0 0 calc(33.33% - 30px);
}

/* Four-column layout */
.four-column .column {
  flex: 0 0 calc(25% - 30px);
}

/* 3.2 Top Bar 
   - Notification, Social media and language or currency switcher bar above header
   - Uses CSS variables for theming
------------------------------------------------------------------------------------ */
.digi-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: var(--font-size-small);
}

.digi-top-bar .digi-top-bar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.digi-top-bar .digi-top-bar-content p {
  margin: 0;
}

.digi-social-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.digi-social-icons a {
  text-decoration: none;
  font-size: var(--font-size-normal);
  color: var(--digi-social-icon-color);
  padding: 0 5px;
  display: flex;
  align-items: center;
}

.digi-social-icons a:first-child {
  padding-left: 0;
}

.digi-social-icons a:last-child {
  padding-right: 0;
}

.digi-social-icons a svg {
  width: 15px;
  height: 15px;
  transition: 0.2s;
}

.digi-top-bar-right {
  display: flex;
}

.digi-top-bar-middle.only-social-media {
  width: 100%;
  text-align: center;
}

.currency-switcher {
  display: flex;
  justify-content: center;
  align-items: center;
}

.language-dropdown select,
.currency-switcher select {
  border: none;
  background-color: inherit;
  cursor: pointer;
  color: currentColor;
}

.language-dropdown select:focus,
.currency-switcher select:focus {
  outline: inherit;
  outline-offset: inherit;
}

/* ==========================================================================
   4. HEADER
   ========================================================================== */

/* 4.1 Main Header 
   - Sticky behavior and header container
   - Transparent header support
   - Logo area and basic structure
-------------------------------------------------------------- */

.digi-main-header {
  position: relative;
  z-index: 998;
}

.digi-main-header.digi-sticky-header {
  position: sticky;
}

/* Transparent Header */
.digi-main-header.transparent-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  z-index: 998; /* ensure it stays on top */
}

.digi-main-header.transparent-header.digi-sticky-header {
  position: fixed;
}

.digi-header-v1.transparent-header .header-v1-top {
  background: transparent;
}
.digi-main-header.sticky {
  top: 0;
  left: 0;
  right: 0;
  z-index: 998;
  box-shadow: none;
}

.digi-main-header .digi-main-header-content {
  min-height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  transition: all 0.3s;
}

.digi-main-header .digi-main-logo .digi-sticky-header-logo,
.digi-main-header.sticky .digi-main-logo .digi-normal-logo {
  display: none;
}

.digi-main-header.sticky .digi-main-logo .digi-sticky-header-logo {
  display: block;
}

/* 4.2 Navigation 
   - Primary menu styling
   - Current page indicators
-------------------------------------------------------------- */
.digi-header-left .digi-main-logo {
  font-size: 24px;
  font-weight: bold;
  color: var(--digi-link-color);
  text-decoration: none;
  display: flex;
  align-items: center;
}

.header-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 0;
}

.header-nav ul li {
  position: relative;
  display: block;
}

.header-nav ul li a {
  text-decoration: none;
  font-size: var(--font-size-normal);
  display: block;
}

/* 4.3 Dropdowns 
   - Multi-level menu system
   - Submenu positioning and animations
-------------------------------------------------------------- */
.has-dropdown .dropdown {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 200px;
  width: max-content;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 998;
}

/* Style for the sub-submenu (submenu inside a submenu) */
.has-dropdown .dropdown .has-dropdown .dropdown {
  top: 0;
  left: 100%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 998;
}

.dropdown li:last-child {
  border-bottom: none;
}

.dropdown a {
  display: block;
  color: var(--digi-primary-color);
  text-decoration: none;
  padding: 15px 10px;
}

/* Dropdown Navigation Arrows */
.has-dropdown > a .dropdown-icon {
  margin-left: 5px;
  display: inline-block;
  transition: transform 0.3s ease;
}
.has-dropdown > a .dropdown-icon svg {
  width: 12px;
  height: 12px;
}

.has-dropdown > a:hover .dropdown-icon {
  transform: rotate(180deg);
}

/* 4.4 Header Right 
   - Cart/account/search icons
   - Notification badges
-------------------------------------------------------------- */
.digi-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.digi-header-right a {
  margin-left: 20px;
  text-decoration: none;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.digi-header-right a svg {
  width: 24px;
  height: 24px;
}

/* 4.5 AJAX Search
   - Design Ajax search
-------------------------------------------------------------- */
.digi-ajax-results {
  background: #ffffff;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 20px;
  z-index: 999;
  max-height: 600px;
  overflow-y: auto;
  border-radius: 3px;
}

.digi-ajax-results .digi-search-group {
  border-top: 1px solid var(--digi-border-color);
  padding: 8px 0;
}

.digi-ajax-results .digi-search-group:first-child {
  border-top: none;
}

.digi-ajax-results .digi-search-group-title {
  font-size: 13px;
  font-weight: 600;
  color: #777777;
  padding: 4px 12px;
  text-transform: uppercase;
}

.digi-ajax-results .digi-search-list {
  display: flex;
  flex-direction: column;
}

.digi-ajax-results .digi-search-item {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  gap: 10px;
  text-decoration: none;
  color: #777777;
  transition: 0.2s;
}

.digi-ajax-results .digi-search-item:hover {
  background: #f5f5f5;
}

.digi-ajax-results .digi-thumb {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 3px;
}

.digi-ajax-results .digi-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.digi-ajax-results .digi-title {
  font-size: var(--font-size-h6);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.digi-ajax-results .digi-price {
  padding: 0;
  white-space: nowrap;
  border: none;
}

.digi-ajax-results .digi-price ins .woocommerce-Price-amount {
  color: #000000;
}

.digi-ajax-results .digi-price del .woocommerce-Price-amount {
  color: #000000;
}

.digi-ajax-results .digi-price del {
  font-size: var(--font-size-normal);
}

.digi-ajax-results .digi-price {
  font-size: var(--font-size-h6);
}

/* ==========================================================================
   5. CART COUNT BUTTON
   ========================================================================== */
.cart-count {
  color: var(--digi-badge-text-color);
  background-color: var(--digi-badge-bg-color);
  border-radius: 50%;
  font-size: var(--font-size-small);
  position: absolute;
  top: -7px;
  left: 15px;
  width: 20px;
  height: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ==========================================================================
   6. OFF-CANVAS MENU
   ========================================================================== */

/* Core Off-Canvas Panel 
   - Mobile menu and mini-cart shared styles
   - Handles scroll behavior and admin bar spacing
-------------------------------------------------------------- */
.offcanvas-nav,
.digi-mini-cart {
  position: fixed;
  top: 0;
  height: 100vh;
  background-color: #fff;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: scroll;
}

.offcanvas-nav {
  padding: 0;
}

.offcanvas-nav p {
  padding: 20px;
}

.offcanvas-nav .offcanvas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.offcanvas-nav .offcanvas-header h3 {
  color: #000000;
  font-size: var(--font-size-h4);
}

.admin-bar .offcanvas-nav,
.admin-bar .digi-mini-cart {
  margin-top: 32px;
}

/* Scrollbar Hidden for All Browsers */
.offcanvas-nav::-webkit-scrollbar,
.digi-mini-cart::-webkit-scrollbar {
  display: none;
}

.offcanvas-nav,
.digi-mini-cart {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Panel Positioning & Animation
   - Handles left/right slide-in effects
-------------------------------------------------------------- */
.offcanvas-nav.position-right,
.digi-mini-cart.position-right {
  right: -100%;
  transition: right 0.3s ease;
}

.offcanvas-nav.position-left,
.digi-mini-cart.position-left {
  left: -100%;
  transition: left 0.3s ease;
}

/* Active State Triggers */
.offcanvas-nav.position-right.active,
.digi-mini-cart.position-right.active {
  right: 0;
}

.offcanvas-nav.position-left.active,
.digi-mini-cart.position-left.active {
  left: 0;
}

/* Menu Structure 
   - Nested dropdown handling
   - Spacing and borders
-------------------------------------------------------------- */

.offcanvas-menu ul {
  list-style: none;
  display: inherit;
}

.offcanvas-menu ul li a {
  border-bottom: 1px solid var(--digi-border-color);
  padding: 10px 10px 10px 20px;
}

.offcanvas-menu ul li .dropdown li a {
  padding-left: 30px;
}

.offcanvas-menu ul li .dropdown .dropdown li a {
  padding-left: 45px;
}

.offcanvas-menu ul li .dropdown .dropdown .dropdown li a {
  padding-left: 60px;
}

.offcanvas-menu ul li .dropdown .dropdown .dropdown .dropdown li a {
  padding-left: 75px;
}

.offcanvas-menu .has-dropdown .dropdown {
  display: none;
  position: initial;
  box-shadow: inherit;
  width: 100%;
}

.offcanvas-menu .has-dropdown .dropdown .has-dropdown .dropdown {
  box-shadow: inherit;
}

.header-nav ul li.menu-item-wishlist .digi-wishlist,
.header-nav ul li.menu-item-login a,
.header-nav ul li.menu-item-account a {
  display: flex;
  align-items: center;
  gap: 5px;
}

.header-nav ul li.menu-item-wishlist .digi-wishlist span,
.header-nav ul li.menu-item-login a span,
.header-nav ul li.menu-item-account a span {
  line-height: 0;
}
/* Content Wrapper 
   - Social icons and switcher elements
-------------------------------------------------------------- */
.offcanvas-content-wraper {
  padding: 20px;
}

.offcanvas-content-wraper .digi-social-icons {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 10px;
}

.offcanvas-content-wraper .switcher-element {
  display: flex;
}

/* Toggle Buttons 
   - Close/hamburger styles
   - Color variables for theme consistency
-------------------------------------------------------------- */
.offcanvas-main-menu-toggle {
  display: none;
}

.offcanvas-main-menu-toggle.hamburger_in_desktop {
  display: flex;
  justify-content: end;
  align-items: center;
  text-align: right;
  margin-left: 5px;
  border-radius: 50%;
  width: 47px;
}

.offcanvas-close,
.digi-mini-cart-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #333;
  cursor: pointer;
  align-self: flex-end;
  color: var(--digi-primary-color);
  transition: 0.2s;
}

.offcanvas-close:hover,
.digi-mini-cart-close:hover {
  background-color: transparent;
  box-shadow: none;
}

.offcanvas-toggle {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--digi-primary-color);
}

.offcanvas-toggle:focus {
  background: none;
  box-shadow: none;
}

/* Overlay 
   - Semi-transparent background layer
   - Visibility transitions
-------------------------------------------------------------- */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 999;
}

.overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Off-canvas elements design 
   - Woocommerce icons design
-------------------------------------------------------------- */
.offcanvas-nav .actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.offcanvas-nav .actions {
  flex-wrap: wrap;
  padding-bottom: 20px;
}

.offcanvas-nav .actions a {
  background: none;
  border: 1px solid var(--digi-border-color);
  border-radius: 50px;
  padding: 8px 15px;
  cursor: pointer;
  font-size: var(--font-size-normal);
  display: flex;
  flex-grow: 1;
  align-items: center;
  gap: 5px;
}

.offcanvas-nav .actions a {
  justify-content: center;
}

.offcanvas-nav .actions .wishlist-count::before {
  content: "(";
}

.offcanvas-nav .actions .wishlist-count::after {
  content: ")";
}

.offcanvas-nav .actions a.account:hover,
.offcanvas-nav .actions .digi-wishlist:hover {
  background-color: var(--digi-primary-color);
  color: #fff;
}

.offcanvas-nav .actions a.cart {
  background: var(--digi-primary-color);
  color: #fff;
}

.offcanvas-nav .actions a.cart:hover {
  background: var(--digi-primary-color);
}

.offcanvas-nav .actions a > span {
  display: flex;
}

/* ==========================================================================
   7. SEARCH POPUP
   ========================================================================== */

/* Search Overlay Container
   - Full-screen search modal
   - Body background
-------------------------------------------------------------- */
.search-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--digi-background-color);
  z-index: 1000;
  display: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Content Wrapper
   - Centers content vertically
   - Uses theme's container class
-------------------------------------------------------------- */
.search-popup .digishiftwrapper {
  height: 100%;
  display: flex;
  align-items: center;
}

/* Search Form Layout
   - Input and close button arrangement
   - Responsive gap between elements
-------------------------------------------------------------- */
.search-popup-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  column-gap: 30px;
}

.search-popup-content .search-content-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Search Input Field
   - Styled text input with icon
   - Border and shadow effects
-------------------------------------------------------------- */
.search-popup-content form {
  position: relative;
  width: 100%;
}

.search-popup-content form input {
  font-size: 16px;
  width: 100%;
  height: 100%;
  padding: 15px 30px;
  border: 1px solid var(--digi-border-color);
  border-radius: 25px;
  color: #777777;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

/* Submit Button (Magnifying Icon)
   - Absolutely positioned within input
   - Centered vertically
-------------------------------------------------------------- */
.search-popup-content form button {
  font-size: 18px;
  border: none;
  cursor: pointer;
  background-color: transparent;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-popup-content form button svg,
.header-v1 .search-bar .icon svg {
  width: 20px;
  height: 20px;
}

/* Close Button
   - Circular button design
   - Matching shadow/border styles
-------------------------------------------------------------- */
#search-close {
  font-size: 33px;
  width: 54px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--digi-border-color);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 10;
  cursor: pointer;
}

#search-close svg {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   8. FOOTER STYLES
   ========================================================================== */

footer .wp-block-group .wp-block-heading,
footer .widget-title {
  margin-bottom: 10px;
}

/**
 * 8.1 Footer Top Section
 * 
 * Contains:
 * - Logo display
 * - Newsletter form (MailChimp integration)
 * - Social media links
 * - Widget areas
 */

.digishift-footer {
  position: relative;
  z-index: 1;
}

.digishift-footer::after {
  content: "";
  display: block;
  clear: both;
  background-color: rgba(0, 0, 0, 0.05);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border: 0;
  z-index: -1;
}

.digishift-footer .footer-top {
  border-bottom: 1px solid var(--digi-border-color);
}

.footer-default .footer-top-bar .digishiftwrapper {
  padding: 50px 20px;
}

.footer-default .footer-top-bar .column-wrapper {
  align-items: center;
}

/* Footer Logo */
.footer-default .footer-top-bar-logo {
  font-size: 0;
  line-height: 0;
}

.footer-default .footer-top-bar-logo img {
  width: 200px;
}

.footer-top-bar .digishiftwrapper {
  padding-bottom: 50px;
}

/* MailChimp Newsletter Form */
.digishift-footer .mc4wp-form .mc4wp-form-fields {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.digishift-footer .mc4wp-form .mc4wp-form-fields p:first-child {
  flex: 1;
}

.digishift-footer .mc4wp-form .mc4wp-form-fields label {
  display: none; /* Hide labels for cleaner design */
}

.digishift-footer .mc4wp-form .mc4wp-form-fields input[type="email"] {
  width: 100%;
  padding: 8px;
}

.digishift-footer .mc4wp-form .mc4wp-form-fields input[type="submit"] {
  background: black;
  color: white;
  padding: 8px 15px;
  border: none;
}

/* Social Media Links */
.footer-top-bar-social-links {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.footer-top-bar-social-links h2 {
  padding: 0;
}

.footer-top-bar-social-links a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
}

.footer-top-bar-social-links a svg {
  width: 20px;
  height: 20px;
}

/* Footer Top Widget Areas */
.footer-default .footer-top {
  padding: 50px 0 50px 0;
}

.footer-v1 .footer-top {
  padding: 125px 0;
  /* background-color: var(--digi-background-color); */
}

.footer-v1 .widget h2 {
  font-weight: 300;
  padding-bottom: 10px;
}

.footer-v1 .widget p {
  padding: 2px 0;
}

.footer-v1 .column2 .widget {
  text-align: center;
}

.footer-v1 .column3 .widget {
  text-align: right;
}

.footer-v1 .column2 .footer-social-links {
  text-align: center;
}

/* Social Link Styles */
.footer-default .footer-social-links a,
.footer-v1 .footer-social-links a {
  border: 1px solid var(--digi-primary-color);
  padding: 5px 8px 4px;
  display: inline-block;
}

.footer-default .footer-social-links a:hover,
.footer-v1 .footer-social-links a:hover {
  background: var(--digi-primary-color);
}

.footer-default .footer-social-links a svg,
.footer-v1 .footer-social-links a svg {
  width: 18px;
  height: 18px;
}

.footer-default .footer-social-links a:hover svg,
.footer-v1 .footer-social-links a:hover svg {
  fill: var(--digi-background-color);
}

/* ==========================================================================
   8.2 FOOTER BOTTOM SECTOIN
   ========================================================================== */

/**
 * Footer Bottom Section
 * 
 * Contains:
 * - Copyright text
 * - Footer navigation menu
 * - Payment method icons
 * 
 * @subsection Footer Bottom
 */

.footer-default .footer-bottom {
  padding: 30px 0;
}

.footer-v1 .footer-bottom {
  padding: 10px 0;
}

/* Footer Bottom Content Layout */
.digishift-footer .footer-bottom-content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.digishift-footer .footer-bottom-content.align-center {
  justify-content: center;
}

.digishift-footer .footer-menu {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.digishift-footer .footer-menu nav {
  padding: 20px 0;
}

.digishift-footer .footer-menu nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
}

.digishift-footer .footer-menu ul li a {
  padding: 10px 20px 10px 0;
  display: block;
  text-decoration: none;
  text-transform: uppercase;
}

/* Copyright Text */
.digishift-footer .copyright-text {
  font-size: var(--font-size-normal);
}

.footer-v1 .copyright-text {
  font-size: var(--font-size-small);
}

.copyright-text p {
  margin: 0;
  padding: 0;
}

/* Social Links */
.digishift-footer .footer-bottom .digi-social-icons {
  margin-left: auto;
}

.digishift-footer .footer-bottom .digi-social-icons:has(+ .payment-icons) {
  position: relative;
  padding-right: 10px;
}

.digishift-footer
  .footer-bottom
  .digi-social-icons:has(+ .payment-icons)::after {
  content: "";
  display: block;
  clear: both;
  height: 30px;
  width: 2px;
  background-color: var(--digi-border-color);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
}

/* Payment Method Icons */
.payment-icons {
  display: inline-block;
}
/* If .digi-social-icons is missing, push .payment-icons right */
.digishift-footer .footer-bottom:not(:has(.digi-social-icons)) .payment-icons {
  margin-left: auto;
}

.payment-icons .payment-icon {
  display: inline-block;
  line-height: 0;
  margin: 3px 3px 0;
  padding: 3px 5px 5px;
  border-radius: 5px;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.payment-icons .payment-icon svg {
  height: 20px;
  vertical-align: middle;
  width: auto !important;
}

/* ==========================================================================
   9. WORDPRESS WIDGET DESIGN
   ========================================================================== */

/* Core Widget Styling
   - Base styles for all widget containers
   - Heading and text formatting
-------------------------------------------------------------- */

.widget h1,
.widget h2,
.widget h3,
.widget h4,
.widget h5,
.widget h6,
.wp-block-search__label {
  font-size: 24px;
}

.wp-block-search__label {
  color: var(--digi-title-color);
}

.wp-block-search__inside-wrapper {
  padding-top: 0.5rem;
}

.widget li:has(> a) {
  color: var(--digi-link-color);
}

.widget li:has(> a):hover {
  color: var(--digi-link-color-hover);
}

.footer-widget {
  margin-bottom: 20px;
}

.widget a {
  text-decoration: none;
}

.widget ul {
  list-style: none;
}

.widget.widget_categories ul li a,
.wp-block-categories-list li a {
  text-transform: capitalize;
}

/* List Items & Content
   - Custom bullet points
   - Spacing and typography
-------------------------------------------------------------- */
.widget ul li,
.widget p {
  padding: 5px 0;
}

.digi-sidebar .widget ul li:not(.wp-social-link)::before,
.digi-sidebar ul.wp-block-list li::before,
.digishift-footer .widget ul li:not(.wp-social-link)::before,
.digishift-footer ul.wp-block-list li::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  margin-right: 10px;
}

.digi-sidebar ul,
.digishift-footer ul {
  padding-left: 0;
}

.digi-sidebar ol.wp-block-latest-comments {
  padding: 0;
}

/* Nested Menus & Categories
   - Indentation for sub-items
   - Special case for widget categories
-------------------------------------------------------------- */
.widget.widget_categories ul li a,
.wp-block-categories-list li a {
  text-transform: capitalize;
}

.widget.widget_categories ul .cat-item ul,
.widget .menu .sub-menu {
  padding-left: 17px;
}

/* Footer-Specific Widgets
   - Payment icons and description blocks
-------------------------------------------------------------- */
.widget.footer-description {
  padding: 35px 0;
}

.widget .payment-icons {
  padding: 10px 0;
}

/* Core Block Styling
   - File, code, calendar and quote blocks
-------------------------------------------------------------- */
.wp-block-file__button {
  background-color: var(--digi-primary-color);
  border-radius: 2em;
  display: inline-block;
  padding: 0.5em 1em;
}

.wp-block-file {
  margin-bottom: 10px;
}

.wp-block-code code {
  padding: 15px;
  background: rgba(0, 0, 0, 0.1);
}

ul.wp-block-rss.wp-block-rss li,
.wp-block-latest-posts.wp-block-latest-posts__list li {
  border-bottom: 1px solid var(--digi-border-color);
}

.wp-block-calendar caption {
  margin-bottom: 10px;
}

.wp-block-latest-posts.wp-block-latest-posts__list li > a::before,
.wp-block-social-links li > a::before {
  display: none;
}

blockquote.wp-block-quote {
  border-left: 4px solid var(--digi-primary-color);
  padding: 15px;
  margin-bottom: 20px;
  background-color: rgba(0, 0, 0, 0.05);
}

blockquote.wp-block-quote.is-style-plain {
  background-color: transparent;
}

blockquote.wp-block-quote p {
  margin: 0;
  font-style: italic;
}

blockquote.wp-block-quote p + p {
  margin-top: 1rem;
}

/* List-Based Blocks
   - RSS, latest posts, and archives
-------------------------------------------------------------- */
ul.wp-block-rss li,
.wp-block-latest-posts__list li {
  border-bottom: 1px solid var(--digi-border-color);
}

.wp-block-latest-posts__list li > a::before,
.wp-block-social-links li > a::before {
  display: none;
}

.wp-block-details summary {
  text-transform: uppercase;
  font-weight: bold;
}

.wp-block-pullquote {
  font-size: 18px;
  margin: 0;
  padding: 0;
}

.wp-block-pullquote p {
  padding: 15px;
}
.wp-block-pullquote cite {
  font-weight: bold;
}

.wp-block-archives li a {
  position: relative;
}

:where(.wp-block-search__button) {
  border: 1px solid var(--digi-border-color);
  padding: 6px 10px;
}

/* Tag Cloud & Categories
   - Color variants and hover states
-------------------------------------------------------------- */
.wp-block-tag-cloud a,
.widget_tag_cloud a {
  display: inline-block;
  font-size: var(--font-size-small) !important;
  text-transform: capitalize;
  color: #ffffff;
  background-color: var(--digi-primary-color);
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 3px;
  margin: 5px 0;
}

.wp-block-tag-cloud a:hover,
.widget_tag_cloud a:hover {
  color: var(--digi-primary-color);
  background-color: #ffffff;
  border: 1px solid var(--digi-primary-color);
}

.is-style-outline {
  display: inline-block;
}

.wp-block-tag-cloud .is-style-outline a,
.widget_tag_cloud .is-style-outline a {
  color: var(--digi-primary-color);
  background-color: transparent;
  border: 1px solid var(--digi-primary-color);
}

.wp-block-tag-cloud .is-style-outline a:hover,
.widget_tag_cloud .is-style-outline a:hover {
  color: #ffffff;
  background-color: var(--digi-primary-color);
}

/* Calendar Widget
   - Table styling and structure
-------------------------------------------------------------- */
.calendar_wrap {
  text-align: center;
}

.calendar_wrap table {
  border-collapse: collapse;
  width: 100%;
}

:where(.calendar_wrap table:not(.has-background) th) {
  background: #ddd;
}

.calendar_wrap caption {
  background-color: inherit;
}

.calendar_wrap table:where(:not(.has-text-color)) {
  color: #40464d;
}

.calendar_wrap table:where(:not(.has-text-color)) td,
.calendar_wrap table:where(:not(.has-text-color)) th {
  border-color: #ddd;
}

.calendar_wrap th {
  font-weight: 400;
}

.calendar_wrap td,
.calendar_wrap th {
  border: 1px solid #ddd;
  padding: 0.25em;
}

:where(.calendar_wrap table:not(.has-background) th) {
  background: #ddd;
}

.wp-block-avatar img {
  border-radius: 50%;
}
/* Search Widget
   - Form layout and input styling
-------------------------------------------------------------- */
.widget_search .search-form .search-field {
  width: 100%;
  appearance: none;
  border: 1px solid var(--digi-border-color);
  flex-grow: 1;
  margin-left: 0;
  margin-right: 0;
  padding: 8px;
  text-decoration: unset;
}

.widget_search .search-form label {
  display: block;
  width: 70%;
  float: left;
}

.widget_search .search-form .search-submit {
  margin-left: 10px;
  word-break: normal;
  width: calc(30% - 10px);
  cursor: pointer;
}

:where(.search-submit),
:where(.wp-block-search__input) {
  border: 1px solid var(--digi-border-color);
  padding: 8px 10px;
}

:where(.search-submit) {
  font-family: "Sen";
  margin: 10px 0;
  float: left;
  background: var(--digi-primary-color);
  color: #fff;
  border-radius: 3px;
}

/* Gallery Widget
   - Image grid layout
-------------------------------------------------------------- */
.widget .gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.widget .gallery .gallery-item a {
  font-size: 0;
  line-height: 0;
}

.widget .gallery .gallery-item img {
  width: 100%;
  object-fit: cover;
}
/* ==========================================================================
   10. BLOG PAGE DESIGN
   ========================================================================== */

/* 10.1 Page Hero 
   - Full-width header section with breadcrumbs
   - Centered and alternate layout options
-------------------------------------------------------------- */
.digishift-page-hero {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-top: 20px;
  padding-bottom: 20px;
}

.digishift-page-hero::before {
  position: absolute;
  content: "";
  display: block;
  clear: both;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.digishift-page-hero .digishiftwrapper {
  height: 100%;
  z-index: 2;
}

.digishift-page-hero .page-hero-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.digishift-page-hero .page-hero-wrapper.left {
  flex-direction: column;
  align-items: flex-start;
}

.digishift-page-hero .page-hero-wrapper.center {
  flex-direction: column;
  align-items: center;
}
.digishift-page-hero .page-hero-wrapper.right {
  flex-direction: column;
  align-items: flex-end;
}

.digishift-page-hero .page-hero-wrapper.left .hero-title,
.digishift-page-hero .page-hero-wrapper.center .hero-title,
.digishift-page-hero .page-hero-wrapper.right .hero-title {
  line-height: 1.2em;
  margin-bottom: 5px;
}

.digi-search-products:has(+ .digi-search-posts) {
  padding-bottom: 2rem;
}

.digi-search-products + .digi-search-posts {
  padding-top: 1rem;
  border-top: 1px solid var(--digi-border-color);
}

.search-section-title {
  padding-bottom: 0.5em;
}

/* Centered Title Variants */
.digishift-page-hero .page-hero-wrapper.blog-title-center,
.digishift-page-hero .page-hero-wrapper.shop-title-center {
  flex-direction: column;
}

/* Breadcrumb Navigation */
.page-hero-wrapper .digi-breadcrumb-list {
  list-style: none;
  display: flex;
  flex-flow: wrap;
  padding: 0;
}

.page-hero-wrapper .digi-breadcrumb-list li {
  vertical-align: middle;
  display: flex;
  position: relative;
  align-items: center;
  padding-left: 8px;
  padding-right: 17px;
}

.page-hero-wrapper .digi-breadcrumb-list li:first-child {
  padding: 0 17px 0 0;
}

.page-hero-wrapper .digi-breadcrumb-list li:last-child {
  padding: 0 0 0 8px;
}

.page-hero-wrapper .digi-breadcrumb-list li:first-child object {
  margin-right: 7px;
}

.page-hero-wrapper .digi-breadcrumb-list li::after {
  content: "/";
  display: block;
  clear: both;
  float: right;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.page-hero-wrapper .digi-breadcrumb-list li:last-child::after {
  display: none;
}

.page-hero-wrapper .digi-breadcrumb-list li a {
  text-decoration: none;
  text-transform: capitalize;
  display: inline-block;
}

/* Hero Title */
.digishift-page-hero .digi-hero-title {
  font-size: 42px;
}

/* 10.2 Post Meta 
   - Author, date, category and comment info
   - Icon integration and hover states
-------------------------------------------------------------- */
.digi-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  font-size: 14px;
  color: var(--digi-text-color);
  align-items: center;
}

.digi-post-meta span {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.digi-post-meta span.digi-meta-category {
  gap: 0;
}

.digi-post-meta span.digi-meta-category svg {
  margin-right: 8px;
}

.digi-post-meta .fill-none {
  fill: none;
}

.digi-post-meta span.digi-meta-category a {
  padding-left: 6px;
  padding-right: 1px;
}

.digi-post-meta a {
  color: var(--digi-link-color);
  text-decoration: none;
  line-height: 0;
}

.digi-meta-category a {
  line-height: inherit;
}

.digi-post-meta a:hover {
  color: var(--digi-link-color-hover);
}

.digi-meta-icon {
  width: 16px;
  height: 16px;
  fill: var(--digi-link-color);
}

.digi-meta-sticky {
  font-weight: bold;
  color: var(--digi-text-color);
}

/* 10.3 Sidebar Layout 
   - Left/right sidebar configurations
   - Sticky widget behavior
-------------------------------------------------------------- */
.digi-blog-layout.right-sidebar,
.digi-blog-layout.left-sidebar {
  display: flex;
  justify-content: space-between;
  gap: 50px;
}

.digi-blog-layout.left-sidebar {
  flex-direction: row-reverse;
}

/* Content Area */
.right-sidebar .content,
.left-sidebar .content {
  width: 70%;
}

/* Sidebar Widgets */
.right-sidebar .digi-sidebar,
.left-sidebar .digi-sidebar {
  width: 30%;
}

.digi-sidebar-content {
  position: sticky;
  top: 20px;
}

.digi-sidebar .widget {
  padding: 0 25px 25px 25px;
  border-radius: 3px;
}

.digi-sidebar .widget:first-child {
  margin-top: 0;
}

/* 10.4 Featured Post 
   - Highlighted content with image
   - Alternate no-thumbnail layout
-------------------------------------------------------------- */
.digi-featured-post {
  display: flex;
  background-color: rgba(0, 0, 0, 0.05);
  margin-bottom: 50px;
  border-radius: 3px;
  overflow: hidden;
}

.digi-featured-thumbnail {
  display: flex;
  width: 50%;
}

.digi-featured-thumbnail img {
  width: 100%;
  object-fit: cover;
  height: 100%;
}

.digi-featured-content-wrapper {
  width: 50%;
  display: flex;
  align-items: center;
}

.digi-featured-content-wrapper.no-thumb {
  width: 100%;
}

.digi-featured-content {
  padding: 100px;
}

.right-sidebar .digi-featured-content,
.left-sidebar .digi-featured-content {
  padding: 50px;
}

.digi-featured-content h2 {
  margin-bottom: 15px;
}

/* Read More Button */
.digi-featured-content .read-more {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  border: 2px solid var(--digi-primary-color);
  border-radius: 3px;
  color: var(--digi-primary-color);
  background-color: transparent;
  text-decoration: none;
  transition: 0.2s;
}

.digi-featured-content .read-more:hover {
  background-color: var(--digi-primary-color);
  color: #ffffff;
}

/* 10.5 Grid/Masonry Layouts
   - Responsive column layouts
   - Hover effects and typography
-------------------------------------------------------------- */
.digi-posts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  gap: 30px;
}

.no-sidebar .digi-posts-grid {
  grid-template-columns: repeat(3, minmax(auto, 1fr));
}

.digi-posts-grid .digi-post-item {
  background-color: #ffffff;
  border-radius: 3px;
}

.digi-posts-grid .digi-post-item h2 {
  margin: 15px 0;
}
.digi-posts-grid.card-layout .digi-post-item h2 {
  margin: 0;
}

.digi-featured-thumbnail a,
.digi-post-thumbnail a {
  display: block;
  font-size: 0;
  width: 100%;
  height: 100%;
}

/* Post Thumbnail Effects */

.digi-post-thumbnail,
.digi-featured-thumbnail {
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

.digi-post-thumbnail img,
.digi-featured-thumbnail img {
  -webkit-transform: translate3d(0, 0, 0);
  transition: transform 500ms ease-in-out;
  transform-origin: 50% 50%;
}

.digi-post-thumbnail img {
  width: 100%;
  height: auto;
}

.digi-posts-grid.card-layout .digi-post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.digi-post-thumbnail:hover img,
.digi-featured-thumbnail:hover img {
  transform: scale(1.1);
}

.digi-post-item p,
.digi-featured-content p {
  margin: 0 0 15px 0;
}

.digi-post-item .read-more {
  font-weight: bold;
  text-decoration: none;
}

/* Masonry Layout 
   - Pinterest-style column flow
-------------------------------------------------------------- */
.digi-posts-grid.masonry-layout {
  display: inherit;
  column-count: 2;
}

.no-sidebar .digi-posts-grid.masonry-layout {
  column-count: 3;
}

.digi-posts-grid.masonry-layout .digi-post-item {
  break-inside: avoid;
  margin-bottom: 30px;
}

/* Card Layout 
   - Horizontal post cards
   - Image/content side-by-side
-------------------------------------------------------------- */
.digi-posts-grid.card-layout {
  grid-template-columns: repeat(1, 1fr);
}

.digi-posts-grid.card-layout .digi-post-item {
  display: flex;
  background-color: rgba(0, 0, 0, 0.05);
}

.digi-posts-grid.card-layout .digi-post-thumbnail {
  width: 40%;
}

.digi-posts-grid.card-layout .digi-post-content {
  width: 60%;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.digi-featured-content .digi-post-title,
.digi-post-content .digi-post-title {
  font-size: 21px;
  line-height: 1.3em;
}

.digi-featured-content .digi-post-title a,
.digi-post-content .digi-post-title a {
  line-height: inherit;
}

/* 10.6 Pagination 
   - Numbered navigation
   - Active/hover states
-------------------------------------------------------------- */
.digi-pagination {
  text-align: center;
  margin-top: 30px;
}

.digi-pagination .page-numbers {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid var(--digi-primary-color);
  color: var(--digi-primary-color);
  border-radius: 3px;
  transition: 0.2s;
}

.digi-pagination .page-numbers.current {
  cursor: pointer;
  background-color: var(--digi-primary-color);
  color: #ffffff;
  border: 1px solid transparent;
}

.digi-pagination .page-numbers:hover {
  border: 1px solid var(--digi-primary-color);
  background-color: var(--digi-primary-color);
  color: #ffffff;
}
/* ==========================================================================
   11. SINGLE BLOG PAGE DESIGN
   ========================================================================== */

/* 11.1 Post Content Styling 
   - Typography and spacing for main content
-------------------------------------------------------------- */
.digi-single-post .digi-post-content p,
.digi-single-post .digi-post-content h1,
.digi-single-post .digi-post-content h2,
.digi-single-post .digi-post-content h3,
.digi-single-post .digi-post-content h4,
.digi-single-post .digi-post-content h5,
.digi-single-post .digi-post-content h6 {
  margin: 14px 0;
}

.digi-single-post .digi-post-meta {
  margin: 30px 0 15px 0;
}

.digi-single-post .digi-post-content ul.wp-block-list li::before {
  content: none;
  display: none;
}

.digi-single-post-content .digi-post-content ul,
.digi-single-post-content .digi-post-content ol {
  padding-left: 25px;
  margin-bottom: 14px;
}

.digi-single-post-content .digi-post-thumbnail {
  font-size: 0;
  line-height: 0;
  margin-bottom: 1rem;
}

.digi-single-post-content .digi-post-thumbnail img {
  width: 100%;
  height: auto;
}

.wp-block-separator {
  margin: 20px 0;
}

/* 11.2 Tags & Social Share 
   - Post-taxonomy links and sharing options
-------------------------------------------------------------- */

.digi-tags-share {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 50px 0;
  border-bottom: 1px solid var(--digi-border-color);
}

.digi-tags,
.digi-social-share {
  display: flex;
  align-items: center;
}

.digi-social-share {
  justify-content: flex-end;
}

.digi-tags-title,
.digi-share-title {
  font-size: var(--font-size-normal);
  font-weight: bold;
  margin: 0;
}

.digi-tags-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.digi-tags-list li {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 5px 16px;
  border-radius: 20px;
  font-size: var(--font-size-small);
  color: var(--digi-primary-color);
  transition: background-color 0.1s ease, color 0.1s ease;
}

.digi-tags-list li:hover {
  background-color: var(--digi-primary-color);
}
.digi-tags-list li:hover a {
  color: #ffffff;
}

/* Social Share Section */
.digi-share-icons {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

.digi-share-icons li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--digi-social-icon-color);
  transition: background-color 0.1s ease, transform 0.1s ease;
}

.digi-share-icons li a:hover {
  background-color: var(--digi-primary-color);
  color: #ffffff;
}

.digi-share-icons li svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* 11.3 Comments Section 
   - Thread styling and form layout
-------------------------------------------------------------- */
.comments-area .comments-title {
  margin-bottom: 20px;
}

.digi-leave-comment {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 20px;
  border: 1px solid var(--digi-border-color);
  margin-top: 30px;
}

.digi-leave-comment .comment-title {
  font-size: 24px;
  margin-bottom: 10px;
  font-weight: bold;
}

.digi-leave-comment .comment-subtitle {
  font-size: 14px;
  margin-bottom: 20px;
}

.digi-leave-comment .form-group {
  margin-bottom: 15px;
}

.digi-leave-comment .form-control {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--digi-border-color);
  border-radius: 3px;
  font-size: 14px;
  background: #ffffff;
}

.digi-leave-comment .form-control:focus {
  border-color: var(--digi-primary-color);
  outline: none;
}

.digi-leave-comment input[type="submit"] {
  background-color: var(--digi-primary-color);
  color: #ffffff;
  padding: 11px 14px;
  font-size: 16px;
  border-radius: 3px;
  cursor: pointer;
  transition: 0.3s;
}

.digi-leave-comment input[type="submit"]:hover {
  box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.2);
}
.digi-leave-comment .comment-form-cookies-consent {
  margin-bottom: 15px;
}

/* General Comment List Styling */
.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment-list li {
  margin-bottom: 20px;
  padding: 15px;
  background-color: var(--digi-background-color);
  border: 1px solid var(--digi-border-color);
}

/* Author and Date Styling */
.comment-list .comment-author {
  display: flex;
  align-items: center;
  font-family: var(--digi-font-family);
  margin-bottom: 8px;
}

.comment-list .comment-author img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border: 2px solid var(--digi-border-color);
}

.comment-list .comment-author-name {
  font-size: var(--font-size-normal);
  color: var(--digi-primary-color);
  font-weight: bold;
}

.comment-list .comment-metadata {
  font-size: var(--font-size-small);
  margin-left: 5px;
}

.comment-meta .says {
  padding-left: 4px;
}

/* Comment Content Styling */
.comment-list .comment-content {
  font-size: var(--font-size-normal);
  color: var(--digi-text-color);
  line-height: 1.6;
  margin-bottom: 10px;
}

.comment-list .comment-content a {
  color: var(--digi-link-color);
  text-decoration: underline;
  transition: color 0.3s ease;
}

.comment-list .comment-content a:hover {
  color: var(--digi-link-color-hover);
}

/* Reply Link Styling */
.comment-list .reply {
  margin-top: 10px;
}

.comment-list .reply a {
  font-size: var(--font-size-small);
  font-weight: bold;
  color: var(--digi-primary-color);
  background-color: var(--digi-background-color);
  padding: 5px 10px;
  border: 1px solid var(--digi-primary-color);
  border-radius: 3px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.comment-list .reply a:hover {
  color: #ffffff;
  background-color: var(--digi-primary-color);
  border-color: var(--digi-primary-color);
}

/* Nested Comments */
.comment-list .children {
  margin-left: 40px;
  padding-left: 20px;
}

/* 11.4 Author Box 
   - Bio section with avatar
-------------------------------------------------------------- */
.author-box {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--digi-border-color);
}

.digi-single-post .content > div {
  margin-bottom: 50px;
}

/* Author Avatar */
.author-avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--digi-border-color);
  margin-right: 20px;
}

/* Author Details */
.author-details {
  flex: 1;
}

.author-name {
  font-family: var(--digi-font-family);
  font-size: var(--font-size-h1);
  margin-bottom: 10px;
}

.author-bio {
  font-size: var(--font-size-normal);
  line-height: 1.6;
  margin-bottom: 15px;
}

/* 11.5 Post Navigation 
   - Next/previous article links
-------------------------------------------------------------- */
/* Next Prev Post in single page */
.digi-single-navigation {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 20px;
}

.digi-prev-post,
.digi-next-post {
  flex: 1;
  display: flex;
  align-items: center; /* Align text and image vertically */
}

.digi-prev-post {
  flex-direction: row; /* Image on the left, text on the right */
}

.digi-next-post {
  flex-direction: row-reverse; /* Image on the right, text on the left */
}

.digi-nav-thumb {
  width: 100px;
  height: 100px;
  border-radius: 3px;
  overflow: hidden;
  margin-right: 20px;
}

.digi-next-post .digi-nav-thumb {
  margin-right: 0;
  margin-left: auto;
}

.digi-nav-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.digi-nav-text {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centers text vertically next to the image */
  align-items: flex-start;
  text-align: left;
}

.digi-next-post .digi-nav-text {
  align-items: flex-end;
  text-align: right;
}

.digi-nav-label {
  font-size: var(--font-size-small);
  color: var(--digi-link-color);
}

.digi-nav-label:hover {
  color: var(--digi-link-color-hover);
}

.digi-nav-title {
  font-size: var(--font-size-normal);
  font-weight: bold;
  margin: 0;
  transition: color 0.3s ease;
}

.digi-nav-link:hover .digi-nav-title {
  color: var(--digi-primary-color);
}

/* 11.6 Related Posts 
   - Content recommendations
-------------------------------------------------------------- */

.digi-related-posts {
  margin-bottom: 50px;
}

.digi-related-title {
  margin-bottom: 20px;
  font-weight: bold;
}

.digi-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(auto, 1fr));
  gap: 20px;
}

.digi-related-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--digi-background-color);
  border: 1px solid var(--digi-border-color);
  border-radius: 3px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.digi-related-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Thumbnail */
.digi-related-thumb {
  width: 100%;
  height: 180px;
  overflow: hidden;
  position: relative;
}

.digi-related-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures full cover of the image */
  object-position: center;
}

/* Related Content */
.digi-related-content {
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px; /* Adds spacing between each element */
}

/* Post Meta */
.digi-related-meta {
  font-size: var(--font-size-small);
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.digi-post-date,
.digi-post-author {
  font-size: var(--font-size-small);
  color: var(--digi-link-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.digi-post-date:hover,
.digi-post-author:hover {
  color: var(--digi-link-color-hover);
}

.digi-meta-separator {
  font-size: var(--font-size-small);
  color: var(--digi-primary-color);
}

/* Post Title */
.digi-related-post-title {
  font-size: var(--font-size-normal);
  font-weight: bold;
  margin: 0;
}

.digi-related-post-title a {
  text-decoration: none;
  transition: color 0.3s ease;
}

.digi-related-post-title a:hover {
  color: var(--digi-link-color-hover);
}

/* Excerpt */
.digi-related-excerpt {
  font-size: var(--font-size-small);
  color: var(--digi-text-color);
  text-align: left;
}

/* Continue Reading Link */
.digi-related-read-more {
  font-size: var(--font-size-small);
  color: var(--digi-link-color);
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.digi-related-read-more:hover {
  color: var(--digi-link-color-hover);
}

/* 11.7 Post Pagination 
   - In-content navigation
-------------------------------------------------------------- */

.digi-post-pagination {
  margin: 20px 0;
  text-align: center;
  font-family: var(--digi-font-family);
}

.digi-post-pagination nav {
  display: inline-block;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--digi-border-color);
  border-radius: 3px;
  padding: 10px;
}

.digi-post-pagination span {
  display: inline-block;
  margin: 0 5px;
  padding: 8px 12px;
  font-size: var(--font-size-small);
  font-weight: bold;
  color: var(--digi-link-color);
  background: var(--digi-background-color);
  border: 1px solid var(--digi-border-color);
  border-radius: 3px;
  transition: all 0.3s ease;
}

.digi-post-pagination span:hover {
  color: #ffffff;
  background: var(--digi-primary-color);
}

.digi-post-pagination span.current {
  background: var(--digi-primary-color);
  padding: 0;
  border: none;
}

.digi-post-pagination span span {
  background-color: inherit;
  margin: 0;
  border: none;
  color: #ffffff;
}

/* 11.8 Password Protection 
   - Secure content form
-------------------------------------------------------------- */
.post-password-form {
  padding: 20px;
  font-family: var(--digi-font-family);
  background-color: var(--digi-background-color);
  border: 1px solid var(--digi-border-color);
}

.post-password-form p {
  font-size: var(--font-size-normal);
  margin-bottom: 15px;
}

.post-password-form input[type="password"] {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  font-size: var(--font-size-normal);
  border: 1px solid var(--digi-border-color);
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.05);
}

.post-password-form input[type="submit"] {
  padding: 10px 20px;
  font-size: var(--font-size-small);
  font-weight: bold;
  color: #ffffff;
  background-color: var(--digi-primary-color);
  border: 2px solid var(--digi-primary-color);
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.post-password-form input[type="submit"]:hover {
  color: var(--digi-primary-color);
  background-color: transparent;
}

/* ==========================================================================
   12. UTILITY PAGES
   ========================================================================== */

/* 12.1 404 Page 
   - Error page design with search and home button
-------------------------------------------------------------- */
.error-404-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
  color: #333;
  padding: 20px;
}

.error-404-page .error-content {
  width: 100%;
}

.error-404-page .error-title {
  font-size: 10rem;
  font-weight: bold;
  color: var(--digi-primary-color);
  margin-bottom: 20px;
}

.error-404-page .error-message {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--digi-primary-color);
}

.error-404-page .error-description {
  font-size: 1.2rem;
  color: var(--digi-primary-color);
}

.error-404-page .error-actions,
.search .error-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

.search .error-actions {
  align-items: flex-start;
}

.error-404-page .error-home-btn,
.search .error-home-btn {
  display: inline-block;
  margin: 30px 0;
  padding: 12px 25px;
  font-size: 1rem;
  background: transparent;
  color: var(--digi-primary-color);
  border: 2px solid var(--digi-primary-color);
  border-radius: 3px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.error-404-page .error-home-btn:hover,
.search .error-home-btn:hover {
  color: #ffffff;
  background: var(--digi-primary-color);
}

.error-404-page .error-search-form,
.search .error-search-form {
  width: 100%;
}

.error-search-form .search-form {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.error-search-form .search-form label {
  flex-grow: 1;
}

.error-404-page .error-search-form input[type="search"],
.search .error-search-form input[type="search"] {
  padding: 15px;
  width: 100%;
  font-size: 1rem;
  border: 1px solid var(--digi-border-color);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: rgba(0, 0, 0, 0.05);
  flex-grow: 1;
}

.error-search-form .search-form .search-submit {
  margin: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* 12.2 Author Archive 
   - Profile page with posts grid
-------------------------------------------------------------- */

.author-page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 15px;
}

.author-info-section {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  background-color: rgba(0, 0, 0, 0.05);
  padding: 20px;
  border-radius: 8px;
}

.author-avatar img {
  border-radius: 50%;
  width: 120px;
  height: 120px;
}

.author-details {
  margin-left: 20px;
}

.author-name {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.author-bio {
  font-size: 16px;
  color: var(--digi-text-color);
}

.author-meta {
  list-style: none;
  padding: 0;
  margin-top: 10px;
  display: flex;
  gap: 15px;
}

.author-meta li a {
  font-size: 14px;
  color: var(--digi-link-color);
  text-decoration: none;
}

.author-meta li a:hover {
  color: var(--digi-link-color-hover);
  text-decoration: underline;
}

.author-posts-section {
  margin-top: 40px;
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.author-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.author-post-item {
  background-color: #ffffff;
  border: 1px solid var(--digi-border-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.author-post-item:hover {
  transform: translateY(-5px);
}

/* 12.3 Back to top Design 
   - Back to top button
-------------------------------------------------------------- */
.back-to-top {
  background-color: var(--digi-primary-color);
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  width: 56px;
  height: 56px;
  z-index: 998;
  position: fixed;
  right: 32px;
  bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 100%;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.2);
}
.back-to-top:hover {
  background-color: var(--digi-secondary-color);
}

.back-to-top svg.icon__arrow-up {
  fill: currentColor;
  width: 24px;
  height: 24px;
}

.back-to-top:hover svg.icon__arrow-up {
  fill: currentColor;
}

/* 12.4 Elementor popup design
-------------------------------------------------------------- */

/* Digishift Popup */
.digishift-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.digishift-popup {
  display: flex;
}

.digishift-popup-h-left {
  justify-content: flex-start;
}

.digishift-popup-h-center {
  justify-content: center;
}

.digishift-popup-h-right {
  justify-content: flex-end;
}

.digishift-popup-v-top {
  align-items: flex-start;
}

.digishift-popup-v-middle {
  align-items: center;
}

.digishift-popup-v-bottom {
  align-items: flex-end;
}

.digishift-popup.active {
  opacity: 1;
}

.digishift-popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
}

.digishift-popup-content {
  background: var(--digi-background-color);
  width: 900px;
  position: relative;
  z-index: 1;
}

.digishift-popup-content .e-con.e-flex > .e-con-inner {
  max-width: 100vw;
  max-height: 100vh;
}

.digishift-popup-close {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 15px;
  right: 15px;
  cursor: pointer;
  font-size: 28px;
  font-weight: 300;
  z-index: 2;
  background: none;
  border: none;
  padding: 0;
  color: #000000;
}

/* Accessibility improvements */
.digishift-popup[aria-hidden="true"] {
  visibility: hidden;
}

.digishift-popup[aria-hidden="false"] {
  visibility: visible;
}

/* ==========================================================================
   13. RESPONSIVE DESIGN
   ========================================================================== */

/* 13.1 1440px+ (Large Desktop) 
   - Adjustments for extra-wide screens
-------------------------------------------------------------- */
@media (max-width: 1440px) {
  .digishiftwrapper {
    padding: 0 20px; /* Add side padding on large screens */
  }
}

/* 13.2 1200px (Desktop) 
   - Main desktop breakpoint adjustments
-------------------------------------------------------------- */
@media (max-width: 1200px) {
  .digishiftwrapper {
    width: 95%; /* Slightly narrower container */
  }

  /* Blog single page elements */
  .digi-single-tags-and-share {
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

/* 13.3 992px (Tablet Landscape) 
   - Tablet-sized devices in landscape
-------------------------------------------------------------- */
@media (max-width: 992px) {
  .digishiftwrapper {
    gap: 20px;
  }
  /* Global layout changes */
  .column-wrapper {
    flex-wrap: wrap; /* Allow columns to wrap */
  }

  /* Header/navigation changes */
  .digi-main-header .header-nav {
    display: none; /* Hide main nav */
  }

  .digi-main-header .digi-main-header-content .digi-header-right {
    margin-left: auto;
  }

  .offcanvas-main-menu-toggle {
    display: flex;
    justify-content: end;
    align-items: center;
    margin-left: 20px;
  }

  .offcanvas-main-menu-toggle.hamburger_in_desktop {
    display: none !important;
  }

  .search-popup-content {
    column-gap: 0;
  }

  .search-popup-content form button {
    right: 60px;
  }

  #search-close {
    margin-left: -54px;
  }

  /* blog layout */

  .digi-posts-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  .no-sidebar .digi-posts-grid {
    grid-template-columns: repeat(2, minmax(auto, 1fr));
  }
  .digi-posts-grid {
    gap: 25px;
  }
  .digi-featured-post {
    margin-bottom: 25px;
  }

  .digi-posts-grid.card-layout .digi-post-item .digi-post-content {
    padding: 25px;
  }
  .digi-featured-post {
    flex-direction: column;
    flex-wrap: wrap;
  }
  .digi-featured-post .digi-featured-content-wrapper,
  .digi-featured-post .digi-featured-thumbnail {
    width: 100%;
  }
  .digi-featured-thumbnail img,
  .digi-post-thumbnail img {
    height: auto;
  }

  /* masonry design */
  .no-sidebar .digi-posts-grid.masonry-layout {
    display: inherit;
    column-count: 2;
  }

  /* Sidebar Design */
  .digi-blog-layout.right-sidebar {
    flex-direction: column;
  }

  .digi-blog-layout.left-sidebar {
    flex-direction: column;
  }

  .right-sidebar .content,
  .left-sidebar .content {
    width: 100%;
  }

  .right-sidebar .digi-sidebar,
  .left-sidebar .digi-sidebar {
    width: 100%;
  }

  /* Related Post design */
  .digi-related-grid {
    grid-template-columns: repeat(2, minmax(300px, 1fr));
  }

  .widget h2 {
    padding-bottom: 5px;
  }

  .footer-default .widget p {
    padding: 5px 0;
  }

  .footer-default .footer-bottom-content {
    flex-wrap: wrap;
    flex-direction: column;
  }

  .digi-top-bar .digi-top-bar-middle {
    display: none;
  }

  /* Footer grid adjustments */
  .footer-default .footer-top .four-column .column {
    margin-top: 20px;
    flex-basis: calc(50% - 30px); /* 2-column footer layout */
  }

  .digishift-footer .footer-bottom .digi-social-icons {
    margin: 10px 0 0 0;
  }

  .digishift-footer .footer-bottom .digi-social-icons:has(+ .payment-icons) {
    padding: 0;
  }
  .digishift-footer .footer-bottom .digi-social-icons::after {
    display: none !important;
  }

  .footer-default .payment-icons {
    margin-top: 10px;
  }

  /* If .digi-social-icons is missing, push .payment-icons right */
  .digishift-footer
    .footer-bottom:not(:has(.digi-social-icons))
    .payment-icons {
    margin: auto;
  }
}

/* 13.4 768px (Tablet Portrait) 
   - Tablet-sized devices in portrait
-------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Global layout */
  .digishiftwrapper {
    width: 100%;
    padding: 0 20px;
  }

  .digi-top-bar {
    display: none;
  }

  .has-dropdown .dropdown {
    position: static;
    box-shadow: none;
  }

  .search-popup {
    padding: 0;
  }

  #search-close {
    width: 52px;
    height: 50px;
  }

  .digi-header-right a {
    margin-left: 10px;
  }

  .offcanvas-main-menu-toggle {
    margin-left: 15px;
  }

  .offcanvas-nav {
    width: 100% !important;
  }

  /* Footer top bar */
  .footer-top-bar
    .digishiftwrapper
    .two-column
    .column2
    .footer-top-bar-social-links {
    justify-content: flex-start;
    padding-top: 20px;
    flex-wrap: wrap;
  }

  .column-wrapper {
    flex-direction: column;
    gap: 0;
  }

  .footer-default .three-column .column2,
  .footer-v1 .three-column .column2 {
    padding: 60px 0;
  }

  .footer-default .three-column .widget,
  .footer-v1 .three-column .widget {
    text-align: center;
  }

  .digishift-footer .footer-menu {
    flex-direction: column;
    padding-bottom: 30px;
  }

  .digishift-footer .footer-bottom-content {
    flex-direction: column;
  }

  .digishift-footer .copyright-text {
    text-align: center;
  }

  .footer-default .payment-icons {
    margin-top: 10px;
    margin-left: 0;
    text-align: center;
  }

  /* Default Page hero */
  .digishift-page-hero .page-hero-wrapper {
    align-items: flex-start;
    flex-direction: column;
  }

  /* Blog Layout */
  .digi-featured-content {
    padding: 25px;
  }

  /* blog post Card layout */
  .digi-posts-grid.card-layout {
    grid-template-columns: repeat(auto-fit, minmax(250, 1fr));
  }

  .digi-posts-grid.card-layout .digi-post-item {
    display: initial;
  }
  .digi-posts-grid.card-layout .digi-post-item .digi-post-content {
    width: 100%;
  }
  .digi-posts-grid.card-layout .digi-post-item .digi-post-thumbnail {
    width: initial;
  }

  .digi-posts-grid.card-layout .digi-post-item .digi-post-thumbnail img {
    min-height: inherit;
    max-height: inherit;
  }

  /* Blog Post masonry layout */

  .no-sidebar .digi-posts-grid {
    display: flex;
    flex-direction: column;
  }

  .no-sidebar .digi-posts-grid.masonry-layout {
    column-count: 1;
  }

  .digi-posts-grid.masonry-layout {
    column-count: 1;
  }

  /* Comment list design */
  .comment-list li {
    padding: 10px;
  }

  .comment-list .comment-author img {
    width: 30px;
    height: 30px;
    margin-right: 8px;
  }

  .comment-list .comment-author-name {
    font-size: var(--font-size-small);
  }

  .comment-list .comment-metadata {
    font-size: 12px;
  }

  .comment-list .comment-content {
    font-size: var(--font-size-small);
  }

  .comment-list .children {
    margin-left: 20px;
    padding-left: 10px;
  }

  .comment-list .reply a {
    font-size: var(--font-size-small);
    padding: 4px 8px;
  }

  /* Post Autor Box */
  .author-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .author-avatar img {
    margin-right: 0;
    margin-bottom: 15px;
  }

  .author-details {
    text-align: center;
  }

  /* Related Post design */
  .digi-related-grid {
    grid-template-columns: repeat(1, minmax(300px, 1fr));
  }
  /* Tags and share icon in single page */
  .digi-tags-share {
    flex-direction: column;
    gap: 15px;
  }

  .digi-share-icons {
    justify-content: flex-start;
  }

  .digi-header-right a svg {
    width: 23px;
    height: 23px;
  }
  .cart-count {
    left: 10px;
  }

  .error-404-page .error-title {
    font-size: 6rem;
  }

  .error-404-page .error-message {
    font-size: 1.5rem;
  }

  /* Author Page Design */
  .author-info-section {
    flex-direction: column;
  }

  .author-meta {
    justify-content: center;
  }
}

/* 13.5 480px (Mobile) 
   - Phone-sized devices
-------------------------------------------------------------- */
@media (max-width: 480px) {
  .comment-list li {
    padding: 8px;
  }

  .comment-list .comment-author img {
    width: 25px;
    height: 25px;
    margin-right: 6px;
  }

  .comment-list .children {
    margin-left: 10px;
    padding-left: 8px;
  }

  .digi-single-navigation {
    flex-direction: column;
    gap: 20px;
  }

  /* Single page Next Pre Post */

  .digi-prev-post,
  .digi-next-post {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .digi-prev-post .digi-nav-thumb,
  .digi-next-post .digi-nav-thumb {
    margin-right: 15px;
    margin-left: 0;
  }

  .digi-next-post .digi-nav-text {
    align-items: flex-start;
    text-align: left;
  }

  .digi-next-post .digi-nav-text {
    align-items: flex-start;
  }

  /* single post password protected */
  .post-password-form {
    padding: 15px;
  }

  .post-password-form p {
    font-size: var(--font-size-small);
  }

  .post-password-form input[type="password"],
  .post-password-form input[type="submit"] {
    font-size: var(--font-size-small);
  }

  .digi-header-right a:nth-child(3) {
    display: none;
  }
}
/* 13.6 400px (Small Mobile) 
   - Very small screen adjustments
-------------------------------------------------------------- */
@media all and (max-width: 400px) {
  .footer-top-bar-social-links {
    flex-wrap: wrap;
  }

  .footer-top-bar-social-links h2 {
    width: 100%;
    padding-bottom: 10px;
  }

  /* Blog Layout */
  .digi-featured-content {
    padding: 30px;
  }
}