webupdate
This commit is contained in:
Local Server
@@ -340,10 +340,14 @@ body {
|
||||
@media (max-width: 576px) {
|
||||
.section {
|
||||
padding: var(--spacing-xl) 0 !important;
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 var(--spacing-md) !important;
|
||||
max-width: 100% !important;
|
||||
overflow-x: hidden !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@@ -358,10 +362,14 @@ body {
|
||||
@media (min-width: 577px) and (max-width: 768px) {
|
||||
.section {
|
||||
padding: var(--spacing-xl) 0 !important;
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 var(--spacing-lg) !important;
|
||||
max-width: 100% !important;
|
||||
overflow-x: hidden !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@@ -372,6 +380,8 @@ body {
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.container {
|
||||
padding: 0 var(--spacing-xl) !important;
|
||||
max-width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@@ -382,25 +392,63 @@ body {
|
||||
/* === PRODUCT GRID RESPONSIVE === */
|
||||
@media (max-width: 480px) {
|
||||
.products-grid {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
gap: var(--spacing-sm) !important;
|
||||
gap: 10px !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
border-radius: var(--radius-md) !important;
|
||||
overflow: hidden !important;
|
||||
box-sizing: border-box !important;
|
||||
background: #ffffff !important;
|
||||
}
|
||||
|
||||
.product-card img,
|
||||
.product-image img {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
height: 100% !important;
|
||||
display: block !important;
|
||||
object-fit: cover !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
overflow: hidden !important;
|
||||
background: #ffffff !important;
|
||||
aspect-ratio: 1 / 1 !important;
|
||||
flex-shrink: 0 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
padding: var(--spacing-sm) !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
overflow: hidden !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 0.85rem !important;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
overflow: hidden;
|
||||
font-size: 0.8rem !important;
|
||||
word-break: break-word !important;
|
||||
hyphens: auto !important;
|
||||
overflow-wrap: break-word !important;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
@@ -420,14 +468,45 @@ body {
|
||||
|
||||
@media (min-width: 481px) and (max-width: 768px) {
|
||||
.products-grid {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
gap: var(--spacing-md) !important;
|
||||
gap: 12px !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
overflow: hidden !important;
|
||||
box-sizing: border-box !important;
|
||||
background: #ffffff !important;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
background: #ffffff !important;
|
||||
aspect-ratio: 1 / 1 !important;
|
||||
}
|
||||
|
||||
.product-image img {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: cover !important;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 0.9rem !important;
|
||||
word-break: break-word !important;
|
||||
hyphens: auto !important;
|
||||
overflow-wrap: break-word !important;
|
||||
}
|
||||
|
||||
|
||||
.product-price {
|
||||
font-size: 1.1rem !important;
|
||||
}
|
||||
@@ -435,8 +514,35 @@ body {
|
||||
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.products-grid {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(3, 1fr) !important;
|
||||
gap: var(--spacing-lg) !important;
|
||||
gap: 16px !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
background: #ffffff !important;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
background: #ffffff !important;
|
||||
aspect-ratio: 1 / 1 !important;
|
||||
}
|
||||
|
||||
.product-image img {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: cover !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -506,80 +612,187 @@ body {
|
||||
padding: 12px 0 10px !important;
|
||||
margin-bottom: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.page-header .container {
|
||||
padding: 0 16px !important;
|
||||
text-align: center !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 1.3rem !important;
|
||||
margin-bottom: 2px !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
font-size: 0.78rem !important;
|
||||
margin-bottom: 4px !important;
|
||||
text-align: center !important;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
/* Center everything in page header container */
|
||||
.page-header .container,
|
||||
.about-hero .container,
|
||||
.contact-hero .container {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
/* Breadcrumb INLINE - All breadcrumbs on same line */
|
||||
.breadcrumb,
|
||||
.page-header .breadcrumb,
|
||||
.container .breadcrumb,
|
||||
.section .breadcrumb {
|
||||
display: inline-flex !important;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: nowrap !important;
|
||||
align-items: center !important;
|
||||
gap: 6px !important;
|
||||
.about-hero .breadcrumb,
|
||||
.contact-hero .breadcrumb {
|
||||
display: block !important;
|
||||
width: auto !important;
|
||||
max-width: 100% !important;
|
||||
text-align: center !important;
|
||||
margin: 6px auto 0 auto !important;
|
||||
padding: 0 !important;
|
||||
background: none !important;
|
||||
font-size: 0 !important;
|
||||
line-height: 0 !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.breadcrumb a,
|
||||
.breadcrumb span,
|
||||
.page-header .breadcrumb a,
|
||||
.page-header .breadcrumb span,
|
||||
.container .breadcrumb a,
|
||||
.container .breadcrumb span {
|
||||
.breadcrumb *,
|
||||
.breadcrumb > *,
|
||||
.page-header .breadcrumb *,
|
||||
.page-header .breadcrumb > *,
|
||||
.about-hero .breadcrumb *,
|
||||
.about-hero .breadcrumb > *,
|
||||
.contact-hero .breadcrumb *,
|
||||
.contact-hero .breadcrumb > * {
|
||||
display: inline !important;
|
||||
white-space: nowrap !important;
|
||||
font-size: 0.85rem !important;
|
||||
line-height: 1.2 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
vertical-align: baseline !important;
|
||||
flex: none !important;
|
||||
flex-shrink: 0 !important;
|
||||
float: none !important;
|
||||
position: static !important;
|
||||
}
|
||||
|
||||
/* Product page breadcrumb - left aligned */
|
||||
.section .breadcrumb,
|
||||
.container .breadcrumb {
|
||||
justify-content: flex-start !important;
|
||||
.breadcrumb a,
|
||||
.page-header .breadcrumb a,
|
||||
.about-hero .breadcrumb a,
|
||||
.contact-hero .breadcrumb a {
|
||||
color: var(--text-secondary) !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
/* Page header breadcrumb - center aligned */
|
||||
.page-header .breadcrumb {
|
||||
justify-content: center !important;
|
||||
margin-top: 2px !important;
|
||||
.breadcrumb span,
|
||||
.page-header .breadcrumb span,
|
||||
.about-hero .breadcrumb span,
|
||||
.contact-hero .breadcrumb span {
|
||||
color: var(--text-light) !important;
|
||||
}
|
||||
|
||||
/* Page breadcrumbs - centered on mobile for hero sections */
|
||||
.page-header .breadcrumb,
|
||||
.about-hero .breadcrumb,
|
||||
.contact-hero .breadcrumb {
|
||||
text-align: center !important;
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
margin: 6px auto 0 auto !important;
|
||||
}
|
||||
|
||||
/* Minimal section spacing */
|
||||
.section {
|
||||
padding: 8px 0 20px !important;
|
||||
}
|
||||
|
||||
/* === SHOP LAYOUT === */
|
||||
.shop-layout {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 10px !important;
|
||||
}
|
||||
|
||||
/* === EXTRA SMALL SCREENS - More compact breadcrumb === */
|
||||
@media (max-width: 375px) {
|
||||
.breadcrumb,
|
||||
.page-header .breadcrumb,
|
||||
.about-hero .breadcrumb,
|
||||
.contact-hero .breadcrumb {
|
||||
font-size: 0.8rem !important;
|
||||
}
|
||||
|
||||
/* Sidebar - use flexbox with wrap for horizontal filter chips */
|
||||
.shop-sidebar {
|
||||
.breadcrumb > *,
|
||||
.page-header .breadcrumb > *,
|
||||
.about-hero .breadcrumb > *,
|
||||
.contact-hero .breadcrumb > * {
|
||||
font-size: 0.8rem !important;
|
||||
}
|
||||
|
||||
.breadcrumb span,
|
||||
.page-header .breadcrumb span,
|
||||
.about-hero .breadcrumb span,
|
||||
.contact-hero .breadcrumb span {
|
||||
padding: 0 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 376px) and (max-width: 992px) {
|
||||
.breadcrumb span,
|
||||
.page-header .breadcrumb span,
|
||||
.about-hero .breadcrumb span,
|
||||
.contact-hero .breadcrumb span {
|
||||
padding: 0 3px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
/* === SHOP LAYOUT === */
|
||||
.shop-layout {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
align-items: flex-start !important;
|
||||
gap: 8px !important;
|
||||
margin-bottom: 8px !important;
|
||||
max-width: 100% !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* Shop main content area - prevent overflow */
|
||||
.shop-main {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* Products grid - ensure it fits within container */
|
||||
.shop-main .products-grid,
|
||||
.shop-layout .products-grid {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
gap: 12px !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* Sidebar - stacked layout for mobile */
|
||||
.shop-sidebar {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
padding: 0 !important;
|
||||
margin-bottom: 16px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* Search card - FULL WIDTH, first row */
|
||||
@@ -608,76 +821,93 @@ body {
|
||||
/* FILTER CHIPS - Same row, auto width */
|
||||
.shop-sidebar .filter-card:nth-child(2),
|
||||
.shop-sidebar .filter-card:nth-child(3),
|
||||
.shop-sidebar .filter-card:nth-child(4) {
|
||||
.shop-sidebar .filter-card:nth-child(4),
|
||||
.shop-sidebar details.filter-dropdown {
|
||||
flex: 0 0 auto !important;
|
||||
width: auto !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
margin: 0 !important;
|
||||
margin: 0 4px 0 0 !important;
|
||||
padding: 0 !important;
|
||||
order: 2 !important;
|
||||
position: relative !important; /* For dropdown positioning */
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
/* Filter chip button style */
|
||||
.shop-sidebar .filter-card:not(:first-child) .filter-title {
|
||||
/* ===== DETAILS/SUMMARY DROPDOWN STYLES ===== */
|
||||
|
||||
/* Hide default marker */
|
||||
details.filter-dropdown > summary {
|
||||
list-style: none !important;
|
||||
}
|
||||
details.filter-dropdown > summary::-webkit-details-marker {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Summary button styling */
|
||||
details.filter-dropdown > summary.filter-title {
|
||||
display: inline-flex !important;
|
||||
visibility: visible !important;
|
||||
align-items: center !important;
|
||||
padding: 8px 14px !important;
|
||||
margin: 0 !important;
|
||||
font-size: 0.72rem !important;
|
||||
justify-content: center !important;
|
||||
padding: 10px 16px !important;
|
||||
font-size: 0.85rem !important;
|
||||
font-weight: 600 !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 0.3px !important;
|
||||
background: #fff !important;
|
||||
border: 1px solid #ddd !important;
|
||||
border-radius: 20px !important;
|
||||
color: #555 !important;
|
||||
font-family: inherit !important;
|
||||
background: #ffffff !important;
|
||||
border: 2px solid #d0d0d0 !important;
|
||||
border-radius: 8px !important;
|
||||
color: #333 !important;
|
||||
cursor: pointer !important;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
|
||||
white-space: nowrap !important;
|
||||
min-height: 44px !important;
|
||||
user-select: none !important;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
|
||||
}
|
||||
|
||||
.shop-sidebar .filter-card:not(:first-child) .filter-title:hover {
|
||||
background: #fff5f8 !important;
|
||||
details.filter-dropdown > summary.filter-title:active {
|
||||
background: #f0f0f0 !important;
|
||||
transform: scale(0.98) !important;
|
||||
}
|
||||
|
||||
details.filter-dropdown[open] > summary.filter-title {
|
||||
background: #fff !important;
|
||||
border-color: #f8c8dc !important;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
|
||||
}
|
||||
|
||||
.shop-sidebar .filter-card:not(:first-child) .filter-title::after {
|
||||
content: '▼' !important;
|
||||
font-size: 8px !important;
|
||||
margin-left: 8px !important;
|
||||
margin-right: 0 !important;
|
||||
transition: transform 0.2s ease !important;
|
||||
display: inline-block !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
border: none !important;
|
||||
/* Dropdown CLOSED - hide options */
|
||||
details.filter-dropdown:not([open]) > .filter-options {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Rotate arrow when open */
|
||||
.shop-sidebar .filter-card:not(:first-child):not(.collapsed) .filter-title::after {
|
||||
transform: rotate(180deg) !important;
|
||||
}
|
||||
|
||||
/* Filter dropdown - visible when NOT collapsed */
|
||||
.shop-sidebar .filter-card:not(:first-child):not(.collapsed) .filter-options {
|
||||
/* Dropdown OPEN - show options */
|
||||
details.filter-dropdown[open] > .filter-options {
|
||||
display: block !important;
|
||||
position: absolute !important;
|
||||
top: 100% !important;
|
||||
top: calc(100% + 6px) !important;
|
||||
left: 0 !important;
|
||||
z-index: 1000 !important;
|
||||
z-index: 9999 !important;
|
||||
min-width: 200px !important;
|
||||
width: max-content !important;
|
||||
max-width: 280px !important;
|
||||
padding: 12px !important;
|
||||
margin-top: 6px !important;
|
||||
background: #fff !important;
|
||||
background: #ffffff !important;
|
||||
border: 1px solid #ddd !important;
|
||||
border-radius: 12px !important;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
|
||||
}
|
||||
|
||||
/* Filter dropdown - hidden when collapsed */
|
||||
.shop-sidebar .filter-card:not(:first-child).collapsed .filter-options {
|
||||
display: none !important;
|
||||
/* Filter option items */
|
||||
details.filter-dropdown .filter-option {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
padding: 10px 8px !important;
|
||||
border-bottom: 1px solid #eee !important;
|
||||
gap: 8px !important;
|
||||
}
|
||||
details.filter-dropdown .filter-option:last-child {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
/* Shop main section */
|
||||
@@ -824,8 +1054,14 @@ body {
|
||||
.about-content-wrapper .container,
|
||||
.about-hero .container,
|
||||
.policy-container {
|
||||
padding-left: 20px !important;
|
||||
padding-right: 20px !important;
|
||||
padding-left: 12px !important;
|
||||
padding-right: 12px !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
/* Dynamic content section - even wider */
|
||||
.about-dynamic-content {
|
||||
padding: 0 15px !important;
|
||||
}
|
||||
|
||||
/* Make policy container wider */
|
||||
@@ -854,18 +1090,35 @@ body {
|
||||
}
|
||||
|
||||
.about-content-wrapper .container {
|
||||
padding-left: 15px !important;
|
||||
padding-right: 15px !important;
|
||||
padding-left: 10px !important;
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
|
||||
.about-hero .container {
|
||||
padding-left: 15px !important;
|
||||
padding-right: 15px !important;
|
||||
padding-left: 10px !important;
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
|
||||
.policy-container {
|
||||
padding-left: 15px !important;
|
||||
padding-right: 15px !important;
|
||||
padding-left: 10px !important;
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
|
||||
.about-dynamic-content {
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
|
||||
/* Remove extra space above cat logo */
|
||||
.about-dynamic-content .about-cat-logo,
|
||||
.about-dynamic-content img.about-cat-logo {
|
||||
margin-top: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
/* Remove top padding from container as well */
|
||||
.about-dynamic-content #aboutTextContent {
|
||||
padding-top: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.about-text h2 {
|
||||
@@ -907,6 +1160,8 @@ body {
|
||||
.product-gallery,
|
||||
.product-details {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.product-gallery-main {
|
||||
@@ -920,6 +1175,60 @@ body {
|
||||
.product-price-main {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
|
||||
/* Product detail container fixes */
|
||||
.product-detail {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
padding: var(--spacing-md) 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.product-detail .product-gallery {
|
||||
position: static !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
margin-bottom: var(--spacing-lg) !important;
|
||||
}
|
||||
|
||||
.product-detail .main-image {
|
||||
position: relative !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
height: 0 !important;
|
||||
padding-bottom: 100% !important;
|
||||
overflow: hidden !important;
|
||||
border-radius: var(--radius-lg) !important;
|
||||
}
|
||||
|
||||
.product-detail .main-image img {
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: cover !important;
|
||||
}
|
||||
|
||||
.product-detail .thumbnail-gallery {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
|
||||
.product-detail .product-details {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.product-detail h1,
|
||||
.product-detail #productName {
|
||||
font-size: 1.4rem !important;
|
||||
word-break: break-word !important;
|
||||
overflow-wrap: break-word !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* === LANDSCAPE MODE FIXES (Mobile) === */
|
||||
@@ -1688,18 +1997,76 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
/* === PRODUCT PAGE RECOMMENDATIONS === */
|
||||
@media (max-width: 768px) {
|
||||
/* === PRODUCT PAGE RECOMMENDATIONS - HORIZONTAL SCROLL === */
|
||||
@media (max-width: 992px) {
|
||||
/* Related products section container */
|
||||
#relatedProducts.products-grid {
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
gap: var(--spacing-sm) !important;
|
||||
display: flex !important;
|
||||
flex-wrap: nowrap !important;
|
||||
overflow-x: auto !important;
|
||||
overflow-y: hidden !important;
|
||||
scroll-behavior: smooth !important;
|
||||
-webkit-overflow-scrolling: touch !important;
|
||||
scroll-snap-type: x mandatory !important;
|
||||
gap: 12px !important;
|
||||
padding: 8px 0 16px 0 !important;
|
||||
margin: 0 -12px !important;
|
||||
padding-left: 12px !important;
|
||||
padding-right: 12px !important;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for cleaner look but keep functionality */
|
||||
#relatedProducts.products-grid::-webkit-scrollbar {
|
||||
height: 6px !important;
|
||||
}
|
||||
|
||||
#relatedProducts.products-grid::-webkit-scrollbar-track {
|
||||
background: #f1f1f1 !important;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
#relatedProducts.products-grid::-webkit-scrollbar-thumb {
|
||||
background: var(--primary-pink-dark, #fcb1d8) !important;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
#relatedProducts.products-grid::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--primary-pink, #ffd0d0) !important;
|
||||
}
|
||||
|
||||
/* Each product card in the horizontal scroll */
|
||||
#relatedProducts.products-grid .product-card {
|
||||
flex: 0 0 auto !important;
|
||||
width: 160px !important;
|
||||
min-width: 160px !important;
|
||||
max-width: 160px !important;
|
||||
scroll-snap-align: start !important;
|
||||
}
|
||||
|
||||
#relatedProducts.products-grid .product-card .product-name {
|
||||
font-size: 0.8rem !important;
|
||||
-webkit-line-clamp: 2 !important;
|
||||
line-clamp: 2 !important;
|
||||
}
|
||||
|
||||
#relatedProducts.products-grid .product-card .product-price {
|
||||
font-size: 0.95rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
#relatedProducts.products-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: var(--spacing-md) !important;
|
||||
#relatedProducts.products-grid .product-card {
|
||||
width: 140px !important;
|
||||
min-width: 140px !important;
|
||||
max-width: 140px !important;
|
||||
}
|
||||
|
||||
#relatedProducts.products-grid .product-card .product-name {
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
|
||||
#relatedProducts.products-grid .product-card .product-price {
|
||||
font-size: 0.9rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1816,4 +2183,24 @@ body {
|
||||
transform: scale(0.98) !important;
|
||||
opacity: 0.9 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* === GLOBAL PRODUCT CARD FIX - Remove pink divider === */
|
||||
.product-card {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
background: #ffffff !important;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
background: #ffffff !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
.product-image img {
|
||||
display: block !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
Reference in New Issue
Block a user