/* ==========================================================================
   Storeberry Footer Cover - Matched Color & Expanded Frame
   ========================================================================== */

/* 1. Expand the parent container so text fits on one line */
footer div:last-child,
.footer-bottom,
[class*="powered-by"],
[class*="copyright"] {
  position: relative !important;
  overflow: visible !important;
  min-height: 60px !important; /* Increased height to stop vertical clipping */
}

/* 2. Style the overlay card to match the site's footer blue */
footer div:last-child::before,
.footer-bottom::before,
[class*="powered-by"]::before,
[class*="copyright"]::before {
  content: "Copyright © Overtime TCG LIMITED. All rights reserved." !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  
  /* Matches OTTCG's footer blue shade */
  background-color: #1b5088 !important; 
  color: #ffffff !important;
  
  /* Flexbox alignment & text sizing */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  white-space: nowrap !important; /* Prevents text from breaking into multiple lines */
  
  z-index: 9999 !important;
}

/* 3. Mobile responsiveness (allows clean wrapping on mobile screens) */
@media (max-width: 768px) {
  footer div:last-child::before,
  .footer-bottom::before,
  [class*="powered-by"]::before,
  [class*="copyright"]::before {
    white-space: normal !important;
    text-align: center !important;
    padding: 10px 16px !important;
    font-size: 0.8rem !important;
  }
}

/* STREAMING_CHUNK:Initializing CSS Design Tokens and Core Variables... /

/ ==========================================================================

OTTCG.HK - Universal Interactive Hover & UI Refinement

With Image Pop-Up Lift & Micro-Interaction Enhancements

========================================================================== */



:root {

/* High-Performance Native UI System Font Stack */

--ottcg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";



/* Brand Color Tokens */

--ottcg-primary: #1b5088;

--ottcg-primary-hover: #2563eb;

--ottcg-primary-light: #f0f6ff;

--ottcg-dark: #0f172a;

--ottcg-border: #cbd5e1;



/* Elevation & Motion Tokens */

--ottcg-shadow-sm: 0 4px 12px rgba(27, 80, 136, 0.12);

--ottcg-shadow-md: 0 10px 25px -5px rgba(27, 80, 136, 0.18);

--ottcg-glow: 0 8px 20px rgba(37, 99, 235, 0.22);

--ottcg-ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);

}



/* STREAMING_CHUNK:Applying Global Typography and Reset Rules... /

/ 1. Global Interactive Transition Setup /

body,

html,

button,

input,

select,

textarea,

a,

h1, h2, h3, h4, h5, h6,

.btn,

[class="btn"] {

font-family: var(--ottcg-font) !important;

letter-spacing: -0.01em;

}



a,

button,

input[type="submit"],

input[type="button"],

select,

[role="button"],

.btn,

[class*="btn"] {

transition: all 0.22s var(--ottcg-ease-smooth) !important;

cursor: pointer;

}



/* 2. Standard Text Links Hover Effect */

a:hover {

color: var(--ottcg-primary-hover) !important;

opacity: 0.9;

}



/* STREAMING_CHUNK:Styling Button Interactive States... /

/ 3. Global Button Hover Effects (Primary, Secondary, Add to Cart) /

button:hover,

input[type="submit"]:hover,

input[type="button"]:hover,

.btn:hover,

[class="btn"]:hover,

[class*="add-to-cart"]:hover {

transform: translateY(-2px) scale(1.01) !important;

box-shadow: 0 6px 18px rgba(27, 80, 136, 0.28) !important;

filter: brightness(1.08) !important;

}



/* Active Click State for Buttons /

button:active,

.btn:active,

input[type="submit"]:active,

[class="add-to-cart"]:active {

transform: translateY(0) scale(0.97) !important;

box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;

}



/* STREAMING_CHUNK:Configuring Clickable Image Pop-Up Movement Effects... /

/ 4. Clickable Images Pop-Up Hover Effect (Banners, Thumbnails, Product Pictures) */

a img,

[role="button"] img,

a picture img,

.clickable-image,

.img-hover-wrapper img,

.product-image-wrap img {

transition: transform 0.35s var(--ottcg-ease-smooth),

filter 0.35s var(--ottcg-ease-smooth),

box-shadow 0.35s var(--ottcg-ease-smooth) !important;

will-change: transform, filter;

cursor: pointer;

}



/* Container Clipping for Rounded Corners and Border Transitions */

a:has(img),

.clickable-image-container,

.product-image-wrap,

class*="product-item" figure,

class*="product-card" figure {

overflow: hidden !important;

position: relative !important;

display: block;

border-radius: 8px;

border: 2px solid transparent;

transition: border-color 0.3s ease, box-shadow 0.3s ease !important;

}



/* Smooth Image Pop-Up Lift & Micro Zoom Expansion */

a:hover img,

[role="button"]:hover img,

a picture:hover img,

.clickable-image:hover,

.img-hover-wrapper:hover img,

.product-image-wrap:hover img {

transform: scale(1.06) translateY(-2px) !important;

filter: brightness(1.04) saturate(1.12) !important;

}



/* Border Accent & Glow Shift on Container Hover */

a:has(img):hover,

.clickable-image-container:hover,

.product-image-wrap:hover {

border-color: var(--ottcg-primary-hover) !important;

box-shadow: var(--ottcg-glow) !important;

}



/* STREAMING_CHUNK:Styling Product Cards and Grid Tile Components... /

/ 5. Product Cards & Grid Items Hover Effect /

class*="product-item",

class*="product-card",

[class="product-tile"] {

transition: transform 0.3s var(--ottcg-ease-smooth),

box-shadow 0.3s ease,

border-color 0.3s ease,

background-color 0.3s ease !important;

border: 1px solid #e2e8f0 !important;

border-radius: 12px !important;

background: #ffffff !important;

overflow: hidden;

}



[class*="product-tile"]:hover {

transform: translateY(-5px) !important;

box-shadow: var(--ottcg-shadow-md) !important;

border-color: var(--ottcg-primary) !important;

background-color: #fcfdfe !important;

}



/* Zoom product images slightly on card hover */

class*="product-item":hover img,

class*="product-card":hover img {

transform: scale(1.05) translateY(-2px) !important;

filter: saturate(1.12) !important;

}



/* STREAMING_CHUNK:Styling Custom Page Category Card Grids... /

/ 6. Custom Page Category Items Hover Effect (Card Grid) /

main ul,

.custom-page-content ul,

[class="page-content"] ul {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

gap: 12px;

padding: 0;

margin: 16px 0 32px 0;

list-style: none;

}



main ul li,

.custom-page-content ul li,

[class*="page-content"] ul li {

background: #ffffff;

border: 1px solid var(--ottcg-border);

border-radius: 10px;

transition: all 0.25s var(--ottcg-ease-smooth);

}



main ul li:hover,

.custom-page-content ul li:hover,

[class*="page-content"] ul li:hover {

border-color: var(--ottcg-primary-hover);

background-color: var(--ottcg-primary-light);

box-shadow: 0 6px 16px rgba(27, 80, 136, 0.15);

transform: translateY(-3px);

}



main ul li a,

.custom-page-content ul li a,

[class*="page-content"] ul li a {

display: flex;

align-items: center;

justify-content: space-between;

padding: 12px 16px;

color: var(--ottcg-dark);

font-size: 0.92rem;

font-weight: 600;

text-decoration: none;

transition: color 0.2s ease;

}



main ul li a:hover,

.custom-page-content ul li a:hover,

[class*="page-content"] ul li a:hover {

color: var(--ottcg-primary-hover) !important;

}



main ul li a::after,

.custom-page-content ul li a::after {

content: "→";

font-size: 1.1rem;

opacity: 0.4;

transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;

}



main ul li a:hover::after,

.custom-page-content ul li a:hover::after {

opacity: 1;

transform: translateX(4px);

color: var(--ottcg-primary-hover);

}



/* STREAMING_CHUNK:Styling Navigation Links and Section Titles... /

/ 7. Navigation Bar Links & Dropdown Hover Effect /

nav a:hover,

.main-nav a:hover,

[class="nav"] a:hover {

color: var(--ottcg-primary-hover) !important;

background-color: rgba(37, 99, 235, 0.08);

border-radius: 6px;

transform: translateY(-1px);

}



/* 8. Section Titles & Category Headers /

main h2, main h3,

.custom-page-content h2, .custom-page-content h3,

[class="page-content"] h2, [class*="page-content"] h3 {

font-size: 1.25rem;

font-weight: 700;

color: var(--ottcg-dark);

margin-top: 36px;

margin-bottom: 16px;

padding-bottom: 10px;

border-bottom: 2px solid var(--ottcg-primary);

grid-column: 1 / -1;

display: flex;

align-items: center;

}



main h2::before, main h3::before,

.custom-page-content h2::before, .custom-page-content h3::before {

content: "";

display: inline-block;

width: 5px;

height: 20px;

background-color: var(--ottcg-primary);

margin-right: 10px;

border-radius: 4px;

transition: transform 0.2s ease, background-color 0.2s ease;

}



main h2:hover::before, main h3:hover::before {

transform: scaleY(1.25);

background-color: var(--ottcg-primary-hover);

}



/* STREAMING_CHUNK:Configuring Footer Copyright Overlay Rules... /

/ 9. Footer Cover Overlay (Matched Color Fix) /

footer div:last-child,

.footer-bottom,

[class="powered-by"],

[class*="copyright"] {

position: relative !important;

overflow: visible !important;

min-height: 60px !important;

}



footer div:last-child::before,

.footer-bottom::before,

[class*="powered-by"]::before,

[class*="copyright"]::before {

content: "Copyright © Overtime TCG LIMITED. All rights reserved." !important;

position: absolute !important;

top: 0 !important;

left: 0 !important;

width: 100% !important;

height: 100% !important;

background-color: var(--ottcg-primary) !important;

color: #ffffff !important;

display: flex !important;

align-items: center !important;

justify-content: center !important;

font-size: 0.88rem !important;

font-weight: 500 !important;

white-space: nowrap !important;

z-index: 9999 !important;

box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);

}



/* STREAMING_CHUNK:Setting Mobile Responsive Overrides... /

/ 10. Mobile Adjustments /

@media (max-width: 768px) {

main ul,

.custom-page-content ul,

[class="page-content"] ul {

grid-template-columns: 1fr;

gap: 8px;

}



footer div:last-child::before,

.footer-bottom::before,

[class*="powered-by"]::before,

[class*="copyright"]::before {

white-space: normal !important;

text-align: center !important;

padding: 10px 16px !important;

font-size: 0.8rem !important;

}

}