.pd-page {
padding-top: 130px;
padding-bottom: 20px;
}
.pd-breadcrumbs {
font-size: 13px;
color: #6d6d6d;
margin-bottom: 10px;
}
.pd-breadcrumbs a {
color: #6d6d6d;
text-decoration: none;
}
.pd-breadcrumbs a:hover {
color: var(--deep);
}
.pd-breadcrumbs span[aria-current] {
color: var(--deep);
font-weight: 600;
}
.pd-card {
background: #fff;
border-radius: 18px;
padding: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
transition: 0.25s;
height: 100%;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.pd-card:hover {
transform: translateY(-6px);
color: inherit;
}
.pd-card__media {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 12px;
overflow: hidden;
background: var(--light);
margin-bottom: 12px;
}
.pd-card__media > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.pd-card__placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--blueMid);
font-size: 40px;
}
.pd-card__title {
font-weight: 600;
font-size: 15px;
line-height: 1.35;
margin: 0 0 4px;
color: #222;
transition: color 0.15s;
overflow-wrap: anywhere;
}
.pd-card:hover .pd-card__title {
color: var(--deep);
}
.pd-card__type {
font-size: 12px;
color: #8a8a8a;
margin-bottom: 6px;
}
.pd-card__price {
font-weight: 700;
color: var(--deep);
margin-top: auto;
min-width: 0;
overflow-wrap: anywhere;
}
.pd-card__compare {
color: #999;
font-weight: 400;
text-decoration: line-through;
margin-left: 6px;
font-size: 0.9em;
}
.pd-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 14px 0;
border-bottom: 1px solid rgba(75, 61, 242, 0.12);
margin-bottom: 24px;
}
.pd-chip {
border: 1px solid rgba(75, 61, 242, 0.25);
background: #fff;
color: #444;
border-radius: 999px;
padding: 8px 16px;
font-size: 13px;
text-decoration: none;
display: inline-flex;
align-items: center;
min-height: 36px;
}
.pd-chip:hover {
border-color: var(--deep);
color: var(--deep);
}
.pd-chip[aria-current="true"] {
background: var(--deep);
border-color: var(--deep);
color: #fff;
}
.pd-toolbar__count {
margin-left: auto;
font-size: 13px;
color: #6d6d6d;
}
.pd-pdp__stage {
background: #fff;
border-radius: 20px;
overflow: hidden;
aspect-ratio: 1 / 1;
position: relative;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}
.pd-pdp__stage > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.pd-pdp__empty {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
justify-content: center;
color: var(--blueMid);
}
.pd-pdp__empty i {
font-size: 54px;
}
.pd-pdp__thumbs {
display: flex;
gap: 10px;
margin-top: 12px;
flex-wrap: wrap;
}
.pd-pdp__thumb {
width: 72px;
height: 72px;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(75, 61, 242, 0.15);
background: #fff;
padding: 0;
}
.pd-pdp__thumb[aria-current="true"] {
border-color: var(--deep);
border-width: 2px;
}
.pd-pdp__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pd-pdp__panel {
background: #fff;
border-radius: 20px;
padding: 28px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}
.pd-pdp__title {
font-weight: 800;
font-size: 26px;
margin-bottom: 6px;
}
.pd-pdp__price {
color: var(--deep);
font-weight: 800;
font-size: 30px;
margin: 8px 0 16px;
}
.pd-pdp__option {
margin-bottom: 14px;
}
.pd-pdp__option label {
font-weight: 600;
font-size: 13px;
display: block;
margin-bottom: 6px;
}
.pd-pdp__submit {
width: 100%;
min-height: 48px;
border-radius: 25px;
font-weight: 600;
}
.pd-pdp__note {
font-size: 13px;
color: #6d6d6d;
margin-top: 12px;
}
.pd-pdp__desc {
margin-top: 22px;
color: #555;
font-size: 15px;
}
.pd-cart__row {
background: #fff;
border-radius: 18px;
padding: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
display: grid;
grid-template-columns: 88px 1fr auto;
gap: 16px;
align-items: center;
margin-bottom: 14px;
}
.pd-cart__media {
width: 88px;
height: 88px;
border-radius: 12px;
overflow: hidden;
background: var(--light);
display: flex;
align-items: center;
justify-content: center;
color: var(--blueMid);
}
.pd-cart__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pd-cart__title {
font-weight: 600;
color: #222;
text-decoration: none;
}
.pd-cart__title:hover {
color: var(--deep);
}
.pd-cart__variant {
font-size: 13px;
color: #8a8a8a;
}
.pd-qty {
display: inline-flex;
align-items: center;
border: 1px solid rgba(75, 61, 242, 0.2);
border-radius: 999px;
overflow: hidden;
}
.pd-qty button {
border: 0;
background: transparent;
width: 40px;
height: 40px;
color: var(--deep);
font-size: 18px;
line-height: 1;
}
.pd-qty input {
width: 46px;
border: 0;
text-align: center;
font-size: 15px;
background: transparent;
}
.pd-qty__go {
border: 0;
background: transparent;
color: var(--deep);
font-size: 13px;
padding: 0 10px;
}
.pd-cart__remove {
border: 0;
background: none;
padding: 0;
font-size: 13px;
color: #8a8a8a;
}
.pd-cart__remove:hover {
color: var(--deep);
text-decoration: underline;
}
.pd-cart__summary {
background: #fff;
border-radius: 20px;
padding: 24px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
position: sticky;
top: 110px;
}
.pd-cart__total {
display: flex;
justify-content: space-between;
font-weight: 800;
font-size: 20px;
color: var(--deep);
margin-bottom: 16px;
}
.pd-empty {
background: #fff;
border-radius: 20px;
padding: 48px 28px;
text-align: center;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}
.pd-empty i {
font-size: 46px;
color: var(--blueMid);
display: block;
margin-bottom: 12px;
}
.pd-empty h2 {
font-weight: 700;
font-size: 22px;
}
.pd-empty p {
color: #6d6d6d;
}
.pd-panel {
background: #fff;
border-radius: 20px;
padding: 28px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}
.pd-panel h1,
.pd-panel h2 {
font-weight: 700;
}
.pd-field {
margin-bottom: 14px;
}
.pd-field label {
font-weight: 600;
font-size: 13px;
display: block;
margin-bottom: 6px;
}
.pd-field .form-control,
.pd-field .form-select,
.pd-field textarea {
border-radius: 12px;
min-height: 48px;
}
.pd-search__bar {
display: flex;
gap: 10px;
}
.pd-search__bar .form-control {
border-radius: 12px;
min-height: 48px;
}
.pd-pagination {
display: flex;
gap: 8px;
justify-content: center;
align-items: center;
margin: 32px 0 8px;
flex-wrap: wrap;
}
.pd-pagination a,
.pd-pagination span {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid rgba(75, 61, 242, 0.25);
color: var(--deep);
text-decoration: none;
font-weight: 600;
}
.pd-pagination [aria-current="page"] {
background: var(--deep);
border-color: var(--deep);
color: #fff;
}
.pd-pagination span:not([aria-current]) {
opacity: 0.45;
}
.pd-article {
background: #fff;
border-radius: 20px;
padding: 32px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}
.pd-article__meta {
color: #8a8a8a;
font-size: 13px;
margin-bottom: 18px;
}
.pd-article__body {
color: #444;
line-height: 1.75;
}
.pd-article__body img {
max-width: 100%;
height: auto;
border-radius: 12px;
}
@media (max-width: 767.98px) {
.pd-page {
padding-top: 110px;
}
.pd-cart__row {
grid-template-columns: 72px 1fr;
row-gap: 12px;
}
.pd-cart__row > :last-child {
grid-column: 1 / -1;
}
.pd-cart__summary {
position: static;
}
.pd-pdp__panel,
.pd-panel,
.pd-article {
padding: 20px;
}
}