body {
       background-color: #f4f7f9;
       /* Add a very subtle "Grid" pattern to make it look like a technical blueprint */
       background-image: radial-gradient(#d1d9e0 0.5px, transparent 0.5px);
       background-size: 20px 20px;
   }

   /* Container Styling */
   .product-detail-container {
       padding-top: 10rem;
       color: #121212;
   }

   /* The Main Image Module */
   .img-module {
       background: #000;
       padding: 20px;
       border: 2px dashed #333;
       display: flex;
       justify-content: center;
       position: sticky;
       top: 10rem;
   }

   /* Info Module (Replacing Fieldset) */
   .info-module {
       border-top: 3px solid #121212;
       background: #fff;
       padding: 1.5rem;
       margin-bottom: 1.5rem;
       box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.05);
       position: relative;
   }

   .info-module legend {
       float: none;
       width: auto;
       background: #121212;
       color: #00e5ff;
       padding: 5px 15px;
       font-family: 'Rajdhani', sans-serif;
       font-size: 14px;
       font-weight: 800;
       text-transform: uppercase;
       letter-spacing: 2px;
   }

   .social-matrix-wrap {
       display: grid;
       /* This creates 4 columns, but each icon is max 50px */
       grid-template-columns: repeat(auto-fit, minmax(50px, 60px));
       gap: 12px;
       padding: 0;
       margin: 0;
       list-style: none;
       justify-content: center;
       /* Keeps single icons centered in the box */
   }

   .social-matrix-wrap li {
       width: 60px;
       height: 60px;
   }

   .social-matrix-wrap li a {
       width: 100%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       background: #121212;
       color: #ffffff;
       border: 1px solid #333;
       font-size: 20px;
       text-decoration: none;
       transition: all 0.3s ease;
       border-radius: 4px;
       /* Slight round for tech feel */
   }

   .social-matrix-wrap li a:hover {
       background: #00e5ff;
       color: #121212;
       border-color: #00e5ff;
       box-shadow: 0 0 15px rgba(0, 229, 255, 0.5);
       transform: scale(1.1);
   }

   /* The Action Terminal Container */
   .action-terminal {
       background: #121212 !important;
       /* Switch to Obsidian for high contrast */
       border-top: none !important;
       border: 1px solid #333;
       padding: 25px 20px;
       position: relative;
       clip-path: polygon(0 0, 100% 0, 100% 85%, 95% 100%, 0 100%);
       /* Angled corner */
   }

   /* Redesigning the Legend as a HUD Label */
   .action-terminal .hud-label {
       position: absolute;
       top: 0px;
       left: 20px;
       background: #00e5ff;
       color: #000;
       font-family: 'Rajdhani', sans-serif;
       font-weight: 900;
       font-size: 11px;
       padding: 2px 12px;
       letter-spacing: 2px;
       text-transform: uppercase;
   }

   /* Tactical Button Styling */
   .btn-tactical {
       font-family: 'Rajdhani', sans-serif;
       font-weight: 800;
       letter-spacing: 2px;
       text-transform: uppercase;
       border: 2px solid;
       border-radius: 0;
       position: relative;
       overflow: hidden;
       transition: all 0.3s ease;
   }

   /* Share Button (Cyan) */
   .btn-share {
       background: transparent;
       color: #00e5ff;
       border-color: #00e5ff;
   }

   .btn-share:hover {
       background: rgba(0, 229, 255, 0.1);
       box-shadow: 0 0 15px rgba(0, 229, 255, 0.5);
       color: #00e5ff;
   }

   /* WhatsApp Button (Green Neon) */
   .btn-chat {
       background: #25d366;
       color: #000;
       border-color: #25d366;
   }

   .btn-chat:hover {
       background: #121212;
       color: #25d366;
       box-shadow: 0 0 15px rgba(37, 211, 102, 0.5);
   }

   /* The Result Message Styling */
   #result_message {
       font-family: 'monospace';
       color: #00e5ff;
       font-size: 11px;
       text-transform: uppercase;
       margin-top: 10px;
   }