/**
 * Panty Drawer Desktop Styling
 * Makes the drawer only as wide as the image with rounded corners
 */

/* Desktop styles - 769px and up */
@media (min-width: 769px) {
  .nav-overlay {
    width: 400px; /* Fixed width for desktop */
    max-width: 400px;
    border-radius: 0 12px 12px 0; /* Rounded corners on the right side */
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3); /* Add shadow for depth */
    overflow-y: hidden; /* Hide scrollbar on desktop */
    overflow-x: hidden;
  }
  
  .nav-overlay.open {
    transform: translateX(0);
  }
  
  /* Remove all padding/margins from nav-overlay */
  .nav-overlay {
    padding: 0 !important;
  }
  
  /* Ensure the image fits within the drawer width with no margins */
  .panty-graphic-wrap {
    width: 100%;
    max-width: 400px;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .panty-graphic-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0 12px 0 0; /* Round top-right corner to match drawer */
    margin: 0 !important;
  }
  
  /* Adjust inner content padding for narrower drawer */
  .panty-inner {
    max-width: 400px;
    padding: 1.5rem !important;
    overflow-y: auto; /* Allow scrolling within inner content if needed */
    max-height: calc(100vh - 300px); /* Adjust based on image height */
  }
  
  /* Ensure menu items don't overflow */
  .panty-links {
    width: 100%;
  }
  
  .panty-links .menu-link {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* Ensure mobile remains full width */
@media (max-width: 768px) {
  .nav-overlay {
    width: 100%;
    border-radius: 0;
  }
}