/* Global Beautification for TipTopTailors */

/* ---- Custom xxxl (1680px) breakpoint utilities ---- */
@media (max-width: 1679.98px) {
  .d-xxxl-block { display: none !important; }
  .d-none.d-xxxl-block { display: none !important; }
}
@media (min-width: 1680px) {
  .d-xxxl-block { display: block !important; }
  .d-none.d-xxxl-block { display: block !important; }
  .d-xxxl-none { display: none !important; }
  .d-flex.d-xxxl-none { display: none !important; }
  .offcanvas-toggler-secondary.d-flex.d-xxxl-none,
  .offcanvas-toggler-right.d-flex.d-xxxl-none,
  .offcanvas-toggler-left.d-flex.d-xxxl-none { display: none !important; }
}
/* ---------------------------------------------------- */

:root {
    --primary-color: #000;
    --accent-color: #d4af37; /* Gold accent for tailoring feel */
}

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
}

/* Titles Beautification */
/* h1, h2, h3, h4, .sp-module-title {
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
} */

/* Module Header Accent (Matching what we added in module.php if it's being used) */
.sp-module-header {
    border-left: 5px solid var(--accent-color);
    padding-left: 15px;
    margin-bottom: 25px;
}

/* Image Hover Effects (Smooth and elegant) */
.img-thumbnail {
    transition: all 0.3s ease-in-out;
    border: 1px solid rgba(0,0,0,0.05);
}

.img-thumbnail:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    border-color: var(--accent-color);
}

/* Product Cards Overlays */
.position-absolute.top-0.end-0.bg-dark {
    background-color: rgba(0,0,0,0.85) !important;
    border-bottom-left-radius: 8px;
    backdrop-filter: blur(4px);
}

/* Buttons and Links */
a {
    transition: color 0.2s ease;
}

a:hover {
    text-decoration: none;
    color: var(--accent-color);
}