/* ==========================================================================
   BLOCK 1: DESIGN TOKENS, RESPONSIVE WRAPPERS & UTILITY BASICS
   ========================================================================== */

:root {
  --primary-bg: #f8fafc;         /* Modern industrial off-white background */
  --secondary-bg: #ffffff;       /* Solid white surface zones */
  --text-dark: #0f172a;          /* Bold typography weight */
  --text-muted: #475569;         /* Accent slate details */
  --accent-blue: #1d4ed8;        /* High-octane CTA blue */
  --accent-blue-hover: #1e40af;  /* Darker blue hover fill */
  --border-smooth: #f1f5f9;      /* Faint rule lines */
  --border-input: #cbd5e1;       /* Pronounced element frames */
  --radius-modern: 12px;         /* Standard rounded corners */
  --shadow-sm: 0 4px 20px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 20px 38px rgba(15, 23, 42, 0.12);
}

@media (min-width: 1200px) {
  /* Scales the theme grid out to an expansive premium viewport width */
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1440px !important;
  }
}

body {
  background-color: var(--primary-bg);
  color: var(--text-dark);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent-blue);
  text-decoration: none;
  font-weight: 700;
  transition: color 0.15s ease-in-out;
}
a:hover {
  color: var(--accent-blue-hover);
}
/* ==========================================================================
   BLOCK 2: MAIN LOGO BRANDING, SEARCH FILTERS & CATEGORY NAVIGATION MENU
   ========================================================================== */

header {
  background-color: var(--secondary-bg) !important;
  border-bottom: 3px solid var(--text-dark) !important;
  padding: 24px 0;
  box-shadow: none !important;
}

#logo h1 a {
  color: var(--text-dark) !important;
  font-size: 2.25rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.5px;
}
#logo h1 a span {
  color: var(--accent-blue);
}

#search {
  display: flex !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  border: none !important;
}
#search .form-control {
  background-color: var(--secondary-bg);
  border: 2px solid var(--border-input);
  color: var(--text-dark);
  font-size: 1.1rem;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: var(--radius-modern) 0 0 var(--radius-modern);
}
#search .form-control:focus {
  border-color: var(--text-dark);
  box-shadow: none;
}
#search .btn {
  background-color: var(--text-dark);
  border: 2px solid var(--text-dark);
  color: #fff;
  font-weight: 700;
  padding: 0 24px;
  border-radius: 0 var(--radius-modern) var(--radius-modern) 0;
}
#search .btn:hover {
  background-color: var(--accent-blue);
  border-color: var(--accent-blue);
}

#header-cart .btn-inverse {
  background-color: var(--secondary-bg);
  border: 2px solid var(--border-input);
  color: var(--text-dark);
  font-weight: 700;
  border-radius: var(--radius-modern);
}

#menu {
  background-color: var(--text-dark) !important;
  border: none !important;
  border-radius: var(--radius-modern);
  margin-top: 15px;
  padding: 6px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
}
#menu .nav > li > a {
  color: #ffffff !important;
  font-weight: 800;
  font-size: 1.15rem;
  padding: 14px 24px;
  text-transform: uppercase;
}
#menu .nav > li > a:hover, #menu .nav > li.open > a {
  background-color: var(--accent-blue) !important;
  border-radius: calc(var(--radius-modern) - 4px);
}
/* ==========================================================================
   BLOCK 3: HOME DISPLAY SLIDESHOWS & RE-STYLED DIRECTORY THUMBNAILS
   ========================================================================== */

#carousel-banner-0, .carousel, div[id^="carousel-"] {
  margin-bottom: 50px !important;
  padding-bottom: 20px !important;
  clear: both;
}

.carousel-indicators [data-bs-target] {
  background-color: var(--text-dark) !important;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.carousel-indicators .active {
  background-color: var(--accent-blue) !important;
}

.product-thumb {
  background-color: var(--secondary-bg);
  border: none !important; /* Erases harsh default 1px frames */
  border-radius: var(--radius-modern) !important;
  overflow: hidden;
  margin-bottom: 30px;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.product-thumb:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg) !important;
}

.product-thumb .image {
  background-color: #ffffff;
  padding: 24px;
  border-bottom: 1px solid var(--border-smooth);
}
.product-thumb .image img {
  max-width: 100%;
  height: auto;
}

.product-thumb .content {
  padding: 24px;
}
.product-thumb h4 a {
  color: var(--text-dark);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.3;
}
.product-thumb .description {
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 500;
  margin: 12px 0;
  line-height: 1.5;
}

.product-thumb .price {
  color: var(--text-dark);
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  margin-top: 15px;
}

.product-thumb .button-group {
  border-top: 1px solid var(--border-smooth);
  display: flex !important;
}
.product-thumb .button-group button {
  background: #ffffff;
  border: none !important;
  color: var(--text-muted);
  padding: 16px;
  font-size: 1.05rem;
  font-weight: 700;
  transition: all 0.15s ease-in-out;
}
.product-thumb .button-group button:first-child {
  color: #fff;
  background-color: var(--accent-blue);
  flex: 2;
}
.product-thumb .button-group button:first-child:hover {
  background-color: var(--accent-blue-hover);
}
/* ==========================================================================
   BLOCK 4: LAYOUT SWITCHERS, CHECKBOX FILTER MODULES & PAGINATION LINKS
   ========================================================================== */

#display-control {
  background-color: var(--secondary-bg);
  border-radius: var(--radius-modern);
  padding: 16px 24px;
  margin-bottom: 30px;
  box-shadow: var(--shadow-sm);
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}
#display-control .btn-group .btn {
  background-color: var(--primary-bg);
  border: 2px solid var(--border-input);
  color: var(--text-dark);
  font-weight: 700;
  padding: 10px 16px;
}
#display-control .btn-group .btn.active {
  background-color: var(--text-dark);
  border-color: var(--text-dark);
  color: #ffffff;
}

.panel-filter {
  background-color: var(--secondary-bg);
  border: none !important;
  border-radius: var(--radius-modern);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 30px;
}
.panel-filter .list-group-item.active, #box-filter .panel-heading {
  background-color: var(--text-dark) !important;
  color: #ffffff !important;
  font-size: 1.2rem;
  font-weight: 900;
  text-transform: uppercase;
  padding: 18px 24px;
  border: none !important;
}

#box-filter .checkbox {
  margin-bottom: 12px;
  font-size: 1.05rem;
  font-weight: 600;
  display: flex !important;
  align-items: center;
}
#box-filter input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-input);
  margin-right: 12px;
}

.pagination {
  display: flex !important;
  justify-content: center;
  gap: 8px;
  margin: 40px 0;
}
.pagination > li > a, .pagination > li > span {
  background-color: var(--secondary-bg);
  border: 2px solid var(--border-input) !important;
  color: var(--text-dark) !important;
  font-size: 1.1rem;
  font-weight: 800;
  padding: 12px 20px;
  border-radius: var(--radius-modern) !important;
}
.pagination > li.active > span, .pagination > li.active > a {
  background-color: var(--accent-blue) !important;
  border-color: var(--accent-blue) !important;
  color: #ffffff !important;
}
/* ==========================================================================
   BLOCK 5: INNER LISTINGS DETAILS, CARD INSETS, BREADCRUMB STRIPS
   ========================================================================== */

#content h1 {
  font-size: 2.75rem;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--text-dark);
  margin-bottom: 20px;
}

ul.list-unstyled {
  font-size: 1.1rem;
}
ul.list-unstyled li {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border-input);
}
ul.list-unstyled li strong {
  font-weight: 800;
  color: var(--text-dark);
}

#product .btn-primary {
  background-color: var(--accent-blue) !important;
  border-color: var(--accent-blue) !important;
  border-radius: var(--radius-modern);
  padding: 14px 30px;
  font-size: 1.15rem;
  font-weight: 800;
  text-transform: uppercase;
}

.form-control, .form-select {
  border: 2px solid var(--border-input) !important;
  color: var(--text-dark) !important;
  font-weight: 600 !important;
  padding: 12px !important;
  border-radius: var(--radius-modern) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--text-dark) !important;
  box-shadow: none !important;
}

.card {
  background-color: var(--secondary-bg) !important;
  border: none !important;
  border-radius: var(--radius-modern) !important;
  box-shadow: var(--shadow-sm) !important;
}
.card-header {
  background-color: rgba(15, 23, 42, 0.02) !important;
  border-bottom: 1px solid var(--border-smooth) !important;
  color: var(--text-dark);
  font-weight: 800;
}

.breadcrumb-item a {
  color: var(--text-muted);
  font-weight: 600;
}
.breadcrumb-item.active {
  color: var(--text-dark);
  font-weight: 800;
}
/* ==========================================================================
   BLOCK 6: BOOTSTRAP 5 FLUID CHECKOUT GRID WITH INLINE RE-PROPORTIONS
   ========================================================================== */

@media (min-width: 1200px) {
  /* Corrects OpenCart 4's nested templates by grouping columns toward the layout center */
  .route-checkout-checkout #checkout-checkout .row,
  .route-checkout-checkout .row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 40px !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
  }

  /* Left Columns - Form Entry Zones */
  .route-checkout-checkout .col-lg-8,
  .route-checkout-checkout .col-md-7 {
    flex: 0 0 calc(60% - 20px) !important;
    max-width: 60% !important;
  }

  /* Right Columns - Sticky Calculations Invoice Summary */
  .route-checkout-checkout .col-lg-4,
  .route-checkout-checkout .col-md-5 {
    flex: 0 0 calc(40% - 20px) !important;
    max-width: 40% !important;
    position: sticky !important;
    top: 40px !important;
    height: fit-content !important;
  }

  /* Extends form control fields to wrap flush with the left parent column */
  .route-checkout-checkout .form-control,
  .route-checkout-checkout .form-select,
  .route-checkout-checkout .form-floating {
    max-width: 720px !important;
    width: 100% !important;
  }

  .route-checkout-checkout legend,
  .route-checkout-checkout h2,
  .route-checkout-checkout h3,
  .route-checkout-checkout #checkout-payment-method h5,
  .route-checkout-checkout #checkout-shipping-method h5 {
    max-width: 720px !important;
    width: 100% !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    border-bottom: 2px solid var(--border-input);
    padding-bottom: 8px;
    margin-top: 35px !important;
    margin-bottom: 20px !important;
  }

  /* Native Bootstrap 5 row overrides to preserve side-by-side elements */
  .route-checkout-checkout .row .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 15px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 720px !important;
  }

  /* Splits nested side-by-side columns (First Name, Last Name) exactly in half */
  .route-checkout-checkout .row .row > .col-sm-10,
  .route-checkout-checkout .row .row > [class*="col-"] {
    flex: 1 1 50% !important;
    max-width: 50% !important;
    width: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Form Action Buttons Configuration */
#checkout-checkout #button-confirm,
.route-checkout-checkout .btn-primary[id^="button-confirm"] {
  width: 100% !important;
  height: 52px !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  border-radius: var(--radius-modern) !important;
  background-color: var(--accent-blue) !important;
  border: none !important;
}

#checkout-checkout .btn-primary:not(#button-confirm),
#checkout-checkout .input-group .btn {
  height: 50px !important;
  padding: 0 20px !important;
  font-weight: 700 !important;
  border-radius: var(--radius-modern) !important;
}

.route-checkout-checkout .input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
}
.route-checkout-checkout .input-group .form-control {
  border-radius: var(--radius-modern) 0 0 var(--radius-modern) !important;
}
.route-checkout-checkout .input-group .btn {
  border-radius: 0 var(--radius-modern) var(--radius-modern) 0 !important;
  margin-left: -2px !important;
}
/* ==========================================================================
   BLOCK 7: FOUL-PROOF ISOLATED FOOTER GRID BLOCK
   ========================================================================== */

footer {
  background-color: var(--text-dark) !important;
  border-top: none !important;
  color: #cbd5e1;
  padding: 80px 0 40px !important;
  margin-top: 80px !important;
  position: relative;
  z-index: 10;
  clear: both !important; /* Forces the footer element completely clear of dynamic checkout floats */
}

footer h5 {
  color: #ffffff;
  font-weight: 900;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 25px;
}

footer a {
  color: #94a3b8;
  font-weight: 600;
  transition: all 0.15s ease-in-out;
}
footer a:hover {
  color: #ffffff;
  padding-left: 6px;
}

footer hr {
  border-color: #334155 !important;
}
/* ==========================================================================
   BLOCK 8: OPENCART 4.1.0.3 SHOPPING CART CONTAINER ARCHITECTURES
   ========================================================================== */

@media (min-width: 1200px) {
  .route-checkout-cart #content,
  .route-checkout-cart .table-responsive {
    max-width: 1320px !important;
    margin: 0 auto !important;
  }
}

.route-checkout-cart .table {
  background-color: var(--secondary-bg);
  border-radius: var(--radius-modern);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid var(--border-input) !important;
}

.route-checkout-cart .table th {
  background-color: var(--primary-bg);
  color: var(--text-dark);
  font-weight: 800;
  text-transform: uppercase;
  padding: 16px;
  border-bottom: 2px solid var(--border-input);
}

.route-checkout-cart .table td {
  padding: 20px 16px;
  font-weight: 600;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-smooth);
}

.route-checkout-cart .input-group {
  max-width: 140px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
}
.route-checkout-cart .input-group .form-control {
  text-align: center; font-weight: 700; height: 40px !important; padding: 6px !important;
  border-radius: var(--radius-modern) 0 0 var(--radius-modern) !important;
}
.route-checkout-cart .input-group .btn {
  height: 40px !important; padding: 0 12px !important;
  background-color: var(--primary-bg); border: 2px solid var(--border-input); border-left: none;
}
.route-checkout-cart .input-group .btn-danger {
  border-radius: 0 var(--radius-modern) var(--radius-modern) 0 !important;
  background-color: #ef4444 !important; border-color: #ef4444 !important; color: #ffffff !important;
}

a.btn-primary, .float-start, .float-end { float: initial; }

#shopping-cart .d-flex, #checkout-cart .buttons, .route-checkout-cart .buttons {
  max-width: 1320px !important; margin: 40px auto !important; width: 100% !important; gap: 20px !important;
  display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important;
}

#shopping-cart a.btn-primary, #checkout-cart .buttons a.btn-primary,
.route-checkout-cart .buttons a.btn-primary, .route-checkout-cart a[href*="route=checkout/checkout"] {
  height: 52px !important; padding: 0 36px !important; font-size: 1.1rem !important; font-weight: 800 !important;
  text-transform: uppercase !important; letter-spacing: 0.5px; border-radius: var(--radius-modern, 12px) !important;
  background-color: var(--accent-blue, #1d4ed8) !important; border: none !important;
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.25) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
#shopping-cart a.btn-primary:hover, #checkout-cart .buttons a.btn-primary:hover { background-color: var(--accent-blue-hover, #1e40af) !important; }

#shopping-cart a.btn-light, #shopping-cart a.btn-secondary, #checkout-cart .buttons a.btn-light, #checkout-cart .buttons a.btn-secondary,
.route-checkout-cart .buttons a.btn-light, .route-checkout-cart a[href*="route=common/home"] {
  height: 52px !important; padding: 0 30px !important; font-size: 1rem !important; font-weight: 700 !important;
  text-transform: uppercase !important; border-radius: var(--radius-modern, 12px) !important; background-color: var(--secondary-bg, #ffffff) !important;
  border: 2px solid var(--border-input, #cbd5e1) !important; color: var(--text-dark, #0f172a) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
}
#shopping-cart a.btn-light:hover, #checkout-cart .buttons a.btn-light:hover { background-color: var(--primary-bg, #f8fafc) !important; color: var(--text-dark) !important; }
.route-checkout-cart .float-start, .route-checkout-cart .float-end { float: none !important; }
/* ==========================================================================
   BLOCK 9: OPENCART 4.1.0.3 PRODUCT DETAIL INNER VIEW & INLINE THUMBNAILS
   ========================================================================== */

.route-product-product #product .form-control {
  max-width: 120px !important; height: 48px !important; text-align: center; font-weight: 700; display: inline-block;
}

.route-product-product #product .mb-3 .btn-group,
.route-product-product #product .btn-group {
  display: flex !important; flex-direction: row !important; gap: 12px !important;
  margin-top: 20px !important; margin-bottom: 20px !important; width: 100% !important; max-width: 680px !important;
}

.route-product-product #product .btn-group .btn-light,
.route-product-product #product .btn-group .btn {
  flex: 0 0 46px !important; width: 46px !important; height: 46px !important; padding: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background-color: var(--secondary-bg, #ffffff) !important; border: 2px solid var(--border-input, #cbd5e1) !important;
  color: var(--text-dark, #0f172a) !important; border-radius: 50% !important; box-shadow: var(--shadow-sm, 0 4px 20px rgba(15, 23, 42, 0.06)) !important;
}
.route-product-product #product .btn-group .btn:hover { background-color: var(--text-dark, #0f172a) !important; color: #ffffff !important; }

.route-product-product #button-cart {
  height: 48px !important; padding: 0 35px !important; font-size: 1.05rem !important; font-weight: 800 !important;
  text-transform: uppercase !important; letter-spacing: 0.5px; border-radius: var(--radius-modern, 12px) !important;
  background-color: var(--accent-blue, #1d4ed8) !important; border: none !important; box-shadow: 0 4px 14px rgba(29, 78, 216, 0.25) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
.route-product-product #button-cart:hover { background-color: var(--accent-blue-hover, #1e40af) !important; }

.route-product-product .nav-tabs { border-bottom: 2px solid var(--border-input, #cbd5e1) !important; margin-top: 40px !important; gap: 8px; }
.route-product-product .nav-tabs .nav-link {
  font-size: 1.1rem !important; font-weight: 800 !important; color: var(--text-muted, #475569) !important; border: none !important; padding: 12px 20px !important; text-transform: uppercase;
}
.route-product-product .nav-tabs .nav-link.active {
  color: var(--text-dark, #0f172a) !important; background: none !important; border-bottom: 3px solid var(--text-dark, #0f172a) !important; border-radius: 0 !important;
}

.product-thumb, .route-product-product .product-thumb {
  background-color: var(--secondary-bg, #ffffff) !important; border: 2px solid var(--border-input, #cbd5e1) !important;
  border-radius: var(--radius-modern, 12px) !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; height: 100% !important;
}

.product-thumb .image, .route-product-product .product-thumb .image {
  text-align: center !important; padding: 24px !important; background-color: #ffffff !important; width: 100% !important; display: block !important;
}
.product-thumb .image img { margin: 0 auto !important; max-width: 100% !important; height: auto !important; }
.product-thumb .content, .route-product-product .product-thumb .content { padding: 20px !important; text-align: left !important; }

.product-thumb .button-group, .route-product-product .product-thumb .button-group, .product-thumb div[class*="button-group"] {
  display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important;
  width: 100% !important; margin-top: auto !important; border-top: 1px solid var(--border-smooth, #f1f5f9) !important; background-color: var(--secondary-bg, #ffffff) !important;
}

.product-thumb .button-group button, .product-thumb .button-group .btn,
.route-product-product .product-thumb .button-group button, .route-product-product .product-thumb .button-group .btn {
  flex: 1 !important; height: 48px !important; background: none !important; border: none !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  color: var(--text-muted, #475569) !important; border-right: 1px solid var(--border-smooth, #f1f5f9) !important;
}
.product-thumb .button-group button:last-child { border-right: none !important; }

.product-thumb .button-group button:first-child, .product-thumb .button-group .btn:first-child {
  background-color: rgba(29, 78, 216, 0.05) !important; color: var(--accent-blue, #1d4ed8) !important; font-weight: 800 !important;
}
.product-thumb .button-group button:first-child:hover { background-color: var(--accent-blue, #1d4ed8) !important; color: #ffffff !important; }
/* ==========================================================================
   BLOCK 14: ACTUAL OPENCART 4 NATIVE HTML CARD REALIGNMENT
   ========================================================================== */

/* --- 1. Global Product Thumb Structure --- */
.product-thumb {
  background-color: var(--secondary-bg, #ffffff) !important;
  border: 2px solid var(--border-input, #cbd5e1) !important;
  border-radius: var(--radius-modern, 12px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important; /* Makes all grid cards uniform height */
  box-shadow: var(--shadow-sm, 0 4px 20px rgba(15, 23, 42, 0.06)) !important;
  margin-bottom: 24px !important;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

.product-thumb:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg, 0 20px 38px rgba(15, 23, 42, 0.12)) !important;
}

/* --- 2. Center Image Windows --- */
.product-thumb .image {
  text-align: center !important;
  padding: 24px !important;
  background-color: #ffffff !important;
  width: 100% !important;
  display: block !important;
}
.product-thumb .image img {
  margin: 0 auto !important;
  max-width: 100% !important;
  height: auto !important;
}

/* --- 3. Content Block Spacing --- */
.product-thumb .content {
  padding: 20px !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important; /* Pushes the utility bar to the bottom */
}

/* --- 4. Target the Actual OpenCart 4 Bottom Flex Bar --- */
.product-thumb .content > .d-flex.justify-content-between.align-items-center {
  display: flex !important;
  flex-direction: row !important;
  width: calc(100% + 40px) !important; /* Spans full card width past text padding */
  margin-left: -20px !important;        /* Pulls back to left edge flush */
  margin-right: -20px !important;       /* Pulls back to right edge flush */
  margin-bottom: -20px !important;      /* Snaps flush onto card bottom floor */
  margin-top: auto !important;          /* Anchors row downwards */
  border-top: 1px solid var(--border-smooth, #f1f5f9) !important;
  background-color: var(--secondary-bg, #ffffff) !important;
}

/* --- 5. Format the Form Submission Action Buttons --- */
.product-thumb .content > .d-flex.justify-content-between.align-items-center button {
  flex: 1 !important;                  /* Spreads links completely evenly 33.3% wide */
  height: 48px !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-muted, #475569) !important;
  border-right: 1px solid var(--border-smooth, #f1f5f9) !important;
  font-size: 1.15rem !important;        /* Makes small icons easily touchable */
  margin: 0 !important;
  padding: 0 !important;
}

.product-thumb .content > .d-flex.justify-content-between.align-items-center button:last-child {
  border-right: none !important;        /* Clears out trailing edge border */
}

/* --- 6. Accentuate the Shopping Cart Action Button Option --- */
.product-thumb .content > .d-flex.justify-content-between.align-items-center button:first-child {
  background-color: rgba(29, 78, 216, 0.05) !important; /* Soft premium blue hue overlay */
  color: var(--accent-blue, #1d4ed8) !important;
}

.product-thumb .content > .d-flex.justify-content-between.align-items-center button:first-child:hover {
  background-color: var(--accent-blue, #1d4ed8) !important;
  color: #ffffff !important;
}

.product-thumb .content > .d-flex.justify-content-between.align-items-center button:not(:first-child):hover {
  background-color: var(--primary-bg, #f8fafc) !important;
  color: var(--text-dark, #0f172a) !important;
}