/* hiladerm 6.3.0 (https: //hiladerm.me/)*/
:root {
--bs-body-font-family: "Vazirmatn UI FD", sans-serif;
--bs-body-font-size: 14px;
}
@media (max-width:767.98px) {
#wpadminbar {
position: fixed
}
}
.logged-in.admin-bar .fixed-top, .logged-in.admin-bar .sticky-top, .logged-in.admin-bar .offcanvas:not(.offcanvas-bottom), .logged-in.admin-bar .offcanvas-md, .logged-in.admin-bar .offcanvas-lg, .logged-in.admin-bar .offcanvas-xl, .logged-in.admin-bar .offcanvas-xxl, .logged-in.admin-bar .modal-dialog {
top: var(--wp-admin--admin-bar--height, 32px)
}
@media (max-width:920px) {
.logged-in.admin-bar .fixed-top, .logged-in.admin-bar .sticky-top, .logged-in.admin-bar .offcanvas:not(.offcanvas-bottom), .logged-in.admin-bar .offcanvas-md, .logged-in.admin-bar .offcanvas-lg, .logged-in.admin-bar .offcanvas-xl, .logged-in.admin-bar .offcanvas-xxl, .logged-in.admin-bar .modal-dialog {
top: var(--wp-admin--admin-bar--height, 32px);
bottom: 50px;
}
}
@media (max-width:920px) {
.offcanvas{
bottom: 50px;
}
}
.logged-in.admin-bar .modal-fullscreen, .logged-in.admin-bar .modal-fullscreen-sm-down, .logged-in.admin-bar .modal-fullscreen-md-down, .logged-in.admin-bar .modal-fullscreen-lg-down, .logged-in.admin-bar .modal-fullscreen-xl-down, .logged-in.admin-bar .modal-fullscreen-xxl-down {
height: calc(100% - var(--wp-admin--admin-bar--height, 32px))
}
.alert-icon, .woocommerce-error, .woocommerce-info, .woocommerce-noreviews, .woocommerce-message, .woocommerce-thankyou-order-details, .wc-stripe-error {
padding-right: 3.25rem
}
.alert-icon::before, .woocommerce-error::before, .woocommerce-info::before, .woocommerce-noreviews::before, .woocommerce-message::before, .woocommerce-thankyou-order-details::before, .wc-stripe-error::before {
position: absolute;
right: 1.25rem;
top: 50%;
transform: translate(0, -50%);
mask-position: center;
mask-repeat: no-repeat;
mask-size: 16px;
mask-image: var(--alert-icon);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 16px;
-webkit-mask-image: var(--alert-icon);
width: 16px;
height: 16px;
background-color: var(--bs-alert-color)
}
.alert-danger-icon::before, .woocommerce-error::before, .wc-stripe-error::before {
content: " ";
--alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E")
}
.alert-warning-icon::before {
content: " ";
--alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/svg%3E")
}
.alert-info-icon::before,
.woocommerce-info::before,
.woocommerce-noreviews::before {
content: " ";
--alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E")
}
.alert-success-icon::before,
.woocommerce-message::before,
.woocommerce-thankyou-order-details::before {
content: " ";
--alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E")
}
.alert a:not(.alert a.btn),
.must-log-in a:not(.alert a.btn),
.woocommerce-error a:not(.alert a.btn),
.woocommerce-info a:not(.alert a.btn),
.woocommerce-noreviews a:not(.alert a.btn),
.woocommerce-message a:not(.alert a.btn),
.woocommerce-thankyou-order-details a:not(.alert a.btn),
.wc-stripe-error a:not(.alert a.btn) {
color: inherit;
font-weight: 700
}
.must-log-in {
margin-top: 1rem
}
.overflow-x-auto {
scrollbar-color: rgba(var(--bs-body-color-rgb), 0.16) transparent
}
.overflow-x-auto .breadcrumb-item.active {
padding-right: 1rem
}
.overflow-x-auto .breadcrumb-item+.breadcrumb-item::before {
float: none
}
::selection {
color: var(--bs-white);
background-color: var(--bs-primary)
}
::-moz-selection {
color: var(--bs-white);
background-color: var(--bs-primary)
}
.comment-list,
.children {
list-style: none;
padding-bottom: 1rem;
}
.commentlist img.avatar {
border-radius: var(--bs-border-radius);
corner-shape: squircle;
}
.comment-list>.children {
padding-left: 96px
}
@media (min-width:768px) {
.comment-list>.children>.children {
padding-left: 96px
}
}
@media (min-width:992px) {
.comment-list>.children>.children>.children {
padding-left: 96px
}
}
@media (min-width:1200px) {
.comment-list>.children>.children>.children>.children {
padding-left: 96px
}
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
word-wrap: normal !important
}
#cancel-comment-reply-link {
margin-left: 0.5rem
}
.comment-content {
width: calc(100% - 96px)
}
.comment-content a {
word-wrap: break-word
}
.bypostauthor {
display: block
}
.comment-content .card p:last-child {
margin-bottom: 0
}
.comment-respond {
margin-bottom: 1.5rem
}
.is-layout-flow:not(.hide-wp-block-classes.is-layout-flow)>* {
margin-block-start: 0
}
.is-layout-flow:not(.hide-wp-block-classes.is-layout-flow)>p:not(:last-child) {
margin-block-end: 1rem
}
html,
body {
height: 100%;
font-size: 14px;
}
#page {
display: flex;
flex-direction: column
}
#content {
flex: 1;
margin-bottom: 30px;
min-height: calc(80vh - 100px);
}
#footer-menu li a {
padding-left: 0
}
:root {
--valid-icon: url("data:image/svg+xml,");
--invalid-icon: url("data:image/svg+xml,")
}
[id] {
scroll-margin-top: var(--bs-scroll-margin-top, 55px)
}
@media (max-width:991.98px) {
.card-img-lg-start {
border-top-left-radius: var(--bs-card-inner-border-radius);
border-top-right-radius: var(--bs-card-inner-border-radius)
}
}
@media (min-width:992px) {
.card-img-lg-start {
border-top-left-radius: var(--bs-card-inner-border-radius);
border-bottom-left-radius: var(--bs-card-inner-border-radius);
object-fit: cover;
height: 100%
}
}
body {
word-break: break-word;
overflow-x: hidden
}
a{
text-decoration: none;
}
img {
height: auto;
max-width: 100%
}
iframe {
max-width: 100%
}
.alignleft {
display: inline;
float: left;
margin-right: 1.5em
}
.alignright {
display: inline;
float: right;
margin-left: 1.5em
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto
}
.wp-caption {
margin-bottom: 1.5em;
max-width: 100%
}
.wp-caption img[class*="wp-image-"] {
display: block;
margin-left: auto;
margin-right: auto
}
.wp-caption .wp-caption-text {
margin: 0.8075em 0
}
.wp-caption-text {
text-align: center
}
.gallery {
margin-bottom: 1.5em
}
.gallery-item {
display: inline-block;
text-align: center;
vertical-align: top;
width: 100%
}
.gallery-columns-2 .gallery-item {
max-width: 50%
}
.gallery-columns-3 .gallery-item {
max-width: 33.33%
}
.gallery-columns-4 .gallery-item {
max-width: 25%
}
.gallery-columns-5 .gallery-item {
max-width: 20%
}
.gallery-columns-6 .gallery-item {
max-width: 16.66%
}
.gallery-columns-7 .gallery-item {
max-width: 14.28%
}
.gallery-columns-8 .gallery-item {
max-width: 12.5%
}
.gallery-columns-9 .gallery-item {
max-width: 11.11%
}
.gallery-caption {
display: block
}
.blocks-gallery-grid .blocks-gallery-image figcaption,
.blocks-gallery-grid .blocks-gallery-item figcaption {
overflow: auto;
padding: 0.5rem;
font-size: 1rem;
background: rgba(0, 0, 0, 0.5)
}
.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figcaption {
overflow: auto;
padding: 0.5rem;
font-size: 1rem;
background: rgba(0, 0, 0, 0.5)
}
.pw_form .btn {
border-top-right-radius: var(--bs-border-radius) !important;
border-bottom-right-radius: var(--bs-border-radius) !important
}
.wp-post-image {
width: 100%
}
.featured-full-width-img {
background-size: cover;
background-position: center;
background-repeat: no-repeat
}
[rel="prev"]:before {
content: "« "
}
[rel="next"]:after {
content: " »"
}
.table-responsive .table {
white-space: nowrap
}
@media (max-width:575.98px) {
.table-responsive-sm .table {
white-space: nowrap
}
}
@media (max-width:767.98px) {
.table-responsive-md .table {
white-space: nowrap
}
}
@media (max-width:991.98px) {
.table-responsive-lg .table {
white-space: nowrap
}
}
@media (max-width:1199.98px) {
.table-responsive-xl .table {
white-space: nowrap
}
}
@media (max-width:1399.98px) {
.table-responsive-xxl .table {
white-space: nowrap
}
}
.top-button {
right: 5%;
bottom: 30px;
opacity: 0;
visibility: hidden;
transition: visibility 0s linear 0.3s, opacity 0.3s
}
.top-button.visible {
opacity: 1;
transition: visibility 0s linear 0s, opacity 0.3s
}
@media (max-width:767.98px) {
.top-button {
right: 15px;
bottom: 70px;
}
}
.width-100 {
position: relative;
width: 100vw;
margin-left: -50vw;
left: 50%
}
.clear-both {
clear: both
}
.zi-1000 {
z-index: 1000 !important
}
.zi-1020 {
z-index: 1020 !important
}
.zi-1030 {
z-index: 1030 !important
}
.zi-1040 {
z-index: 1040 !important
}
.zi-1050 {
z-index: 1050 !important
}
.zi-1060 {
z-index: 1060 !important
}
.zi-1070 {
z-index: 1070 !important
}
.zi-n1 {
z-index: -1 !important
}
.cursor-pointer {
cursor: pointer
}
.focus-none {
box-shadow: none !important;
outline: 0 !important
}
.scrollbar-none {
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
scrollbar-width: none
}
.scrollbar-none::-webkit-scrollbar {
display: none
}
.d-tl-none {
display: none
}
[data-bs-theme="dark"] .d-td-none {
display: none
}
[data-bs-theme="dark"] .d-tl-none {
display: block
}
.widget .menu {
padding: 0;
list-style: none;
margin-bottom: 0
}
figure.w-100 img {
width: 100%
}
figure.rounded img {
border-radius: var(--bs-border-radius)
}
figure.rounded-lg img {
border-radius: var(--bs-border-radius-lg)
}
figure.rounded-xl img {
border-radius: var(--bs-border-radius-xl)
}
figure.rounded-xxl img {
border-radius: var(--bs-border-radius-xxl)
}
figure.rounded-circle img {
border-radius: 50%
}
figure.card-img-top img {
border-top-left-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
border-top-right-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)))
}
.wp-block-separator {
border-top: var(--bs-border-width) solid
}
.bs-list-group .list-group-item-action a {
color: var(--bs-body-color)
}
.bs-list-group .list-group-item-action:hover a {
color: var(--bs-emphasis-color)
}
.bs-list-group .list-group-item-action.active a {
color: #fff
}
.card .bs-list-group.list-group-flush .list-group-item:last-child {
border-bottom-left-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
border-bottom-right-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)))
}
.wp-lightbox-overlay .scrim {
background-color: var(--bs-body-bg) !important
}
[data-bs-theme="dark"] .close-button {
filter: invert(1)
}
.blockquote p:last-of-type {
margin-bottom: 0
}
.wp-block-categories .wp-block-categories__label {
width: auto
}
/*!
* hiladerm WooCommerce 6.3.0 (https://hiladerm.me/)
*/
#offcanvas-cart .cart-list {
height: 100%
}
#offcanvas-cart .widget_shopping_cart_content {
height: 100%;
display: flex;
flex-direction: column
}
#offcanvas-cart .woocommerce-mini-cart {
flex: 1;
overflow-y: auto
}
#offcanvas-cart .woocommerce-message:first-child,
#offcanvas-cart .woocommerce-error:first-child {
margin-top: var(--bs-offcanvas-padding-y)
}
#offcanvas-cart .woocommerce-message,
#offcanvas-cart .woocommerce-error,
#offcanvas-cart .woocommerce-info {
margin-right: var(--bs-offcanvas-padding-x);
margin-left: var(--bs-offcanvas-padding-x)
}
#offcanvas-cart span.quantity {
display: block;
margin-top: 0.25rem;
margin-bottom: 0.25rem
}
#offcanvas-cart dl.variation {
display: flex;
color: var(--bs-secondary-color);
font-size: 0.875em;
margin-bottom: 0
}
#offcanvas-cart dl.variation dt {
font-weight: normal;
margin-right: 0.25rem
}
#offcanvas-cart dl.variation dd,
#offcanvas-cart dl.variation p {
margin-bottom: 0
}
#offcanvas-cart .cart-footer strong {
font-weight: inherit
}
.woocommerce div.product {
margin-bottom: 0;
position: relative;
}
.woocommerce div.product div.images.woocommerce-product-gallery {
position: relative;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
background: #fff;
border: none;
box-sizing: content-box;
border-radius: 100%;
cursor: pointer;
font-size: 1.5em;
height: 36px;
width: 36px;
padding: 0;
position: absolute;
left: .5em;
top: .5em;
z-index: 99;
text-indent: 0;
font-family: 'Font Awesome 7 Pro';
font-weight: 300;
color: #000;
line-height: 36px;
text-align: center;
}
.alert .button.wc-forward,
.must-log-in .button.wc-forward,
.woocommerce-error .button.wc-forward,
.woocommerce-info .button.wc-forward,
.woocommerce-noreviews .button.wc-forward,
.woocommerce-message .button.wc-forward,
.woocommerce-thankyou-order-details .button.wc-forward,
.wc-stripe-error .button.wc-forward {
display: none
}
.woocommerce a.added_to_cart,
a.added_to_cart {
display: none
}
.single_add_to_cart_button,
.ajax_add_to_cart {
position: relative
}
.single_add_to_cart_button .btn-loader,
.ajax_add_to_cart .btn-loader {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
justify-content: center;
align-items: center;
background-color: inherit;
border-radius: inherit
}
.single_add_to_cart_button.loading .btn-loader,
.ajax_add_to_cart.loading .btn-loader {
display: flex
}
.woocommerce #respond input#submit.loading::after,
.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after,
.woocommerce input.button.loading::after,
.woocommerce #respond input#submit.added::after,
.woocommerce a.button.added::after,
.woocommerce button.button.added::after,
.woocommerce input.button.added::after {
display: none
}
.woocommerce #respond input#submit.loading,
.woocommerce a.button.loading,
.woocommerce button.button.loading,
.woocommerce input.button.loading {
opacity: 1;
padding-left: 0;
padding-right: 0
}
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before,
.wc-stripe-error::before {
color: inherit
}
.wc-stripe-error {
margin-top: 1rem
}
.woocommerce-error a.woocommerce-Button.button,
.woocommerce-info a.woocommerce-Button.button,
.woocommerce-message a.woocommerce-Button.button {
display: none
}
.wc-breadcrumb .breadcrumb-item:last-child {
color: var(--bs-breadcrumb-item-active-color);
padding-right: 1rem
}
.woocommerce a.remove {
position: relative;
text-indent: -9999px;
border: 0
}
.woocommerce a.remove:hover {
background: none
}
.woocommerce a.remove::before {
content: " ";
text-indent: 0;
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
mask-position: center;
mask-repeat: no-repeat;
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'%3e%3c!--! Font Awesome Free 6.4.0 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons%2c Inc. --%3e%3cpath d='M170.5 51.6L151.5 80h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6H177.1c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80H368h48 8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-8V432c0 44.2-35.8 80-80 80H112c-44.2 0-80-35.8-80-80V128H24c-13.3 0-24-10.7-24-24S10.7 80 24 80h8H80 93.8l36.7-55.1C140.9 9.4 158.4 0 177.1 0h93.7c18.7 0 36.2 9.4 46.6 24.9zM80 128V432c0 17.7 14.3 32 32 32H336c17.7 0 32-14.3 32-32V128H80zm80 64V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3e%3c/svg%3e");
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'%3e%3c!--! Font Awesome Free 6.4.0 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons%2c Inc. --%3e%3cpath d='M170.5 51.6L151.5 80h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6H177.1c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80H368h48 8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-8V432c0 44.2-35.8 80-80 80H112c-44.2 0-80-35.8-80-80V128H24c-13.3 0-24-10.7-24-24S10.7 80 24 80h8H80 93.8l36.7-55.1C140.9 9.4 158.4 0 177.1 0h93.7c18.7 0 36.2 9.4 46.6 24.9zM80 128V432c0 17.7 14.3 32 32 32H336c17.7 0 32-14.3 32-32V128H80zm80 64V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3e%3c/svg%3e");
width: 1rem;
height: 1rem;
background-color: var(--bs-remove-invalid, var(--bs-danger))
}
@media (max-width:768px) {
.woocommerce-cart-form .product-quantity .quantity .input-group {
margin-left: auto
}
.cart td.actions .coupon .button {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.shop_table_responsive .actions button:not(.input-group button) {
width: 100%
}
.woocommerce .cart-collaterals ul#shipping_method,
.woocommerce .cart-collaterals .shipping.recurring-total ul {
clear: both;
text-align: left;
margin-top: 2rem
}
.woocommerce .cart-collaterals .woocommerce-shipping-destination,
.woocommerce .cart-collaterals .woocommerce-shipping-calculator,
.woocommerce .cart-collaterals .woocommerce-shipping-contents,
.woocommerce .cart-collaterals .first-payment-date {
text-align: left
}
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
width: 100%
}
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button:disabled,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button:disabled[disabled] {
padding: 0.375rem 0.75rem;
color: var(--bs-primary)
}
.cross-sells {
margin-bottom: 1rem
}
.includes_tax {
display: block
}
.woocommerce div.product form.cart .button,
.woocommerce button.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce button.button.alt,
.woocommerce a.button,
.woocommerce a.button-alt,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button {
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
user-select: none;
text-decoration: none;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
padding: 0.375rem 0.75rem;
border: var(--bs-border-width) solid;
border-radius: var(--bs-border-radius);
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce button.button.alt {
padding: 0.5rem 1rem;
font-size: 1.25rem;
border-radius: var(--bs-border-radius-lg)
}
.woocommerce .shop_table a.button,
.woocommerce .shop_table a.woocommerce-MyAccount-downloads-file.button.alt {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
border-radius: var(--bs-border-radius-sm)
}
.woocommerce div.product form.cart .button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce button.button.alt,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button {
color: #fff !important;
background-color: var(--bs-primary);
border-color: var(--bs-primary)
}
.woocommerce div.product form.cart .button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce button.button.alt:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button:hover {
color: #fff;
background-color: #0c63e4;
border-color: #0c63e4;
text-decoration: none
}
.woocommerce button.button,
.woocommerce .shop_table a.button,
.woocommerce .shop_table a.woocommerce-MyAccount-downloads-file.button.alt,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit {
color: var(--bs-primary);
background-color: transparent;
border-color: var(--bs-primary)
}
.woocommerce button.button:hover,
.woocommerce .shop_table a.button:hover,
.woocommerce .shop_table a.woocommerce-MyAccount-downloads-file.button.alt:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:hover {
color: #fff;
background-color: var(--bs-primary)
}
.woocommerce button.button:disabled[disabled]:hover {
color: var(--bs-primary) !important;
background: transparent
}
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
border: none;
padding: 0;
margin: 0
}
#account_password {
background-position: right 2.25rem center
}
#ship-to-different-address {
font-size: var(--bs-body-font-size);
font-weight: normal;
line-height: 1.5;
margin-bottom: 1rem
}
table.shop_table.woocommerce-checkout-review-order-table tr {
vertical-align: top
}
.woocommerce-checkout #payment {
background: var(--bs-body-bg);
border: var(--bs-border-width) solid var(--bs-border-color-translucent);
border-radius: var(--bs-border-radius);
padding: 1rem 1rem
}
.woocommerce-checkout #payment ul.payment_methods {
border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
padding: 0;
margin-bottom: 1rem
}
.woocommerce-checkout #payment ul.payment_methods::after {
margin-top: 1rem
}
.woocommerce-checkout #payment ul.payment_methods li {
line-height: inherit;
padding-left: 0
}
.woocommerce-checkout #payment ul.payment_methods li input {
margin-left: 0.5em;
margin-right: 0;
margin-top: 0.25em
}
.woocommerce-checkout #payment ul.payment_methods li:last-child div.payment_box {
margin-bottom: 0
}
.woocommerce-checkout #payment ul.payment_methods div.payment_box {
border-radius: 0.375rem;
font-size: 1rem
}
.woocommerce-checkout #payment ul.payment_methods .payment_method_paypal img,
.woocommerce-checkout #payment ul.payment_methods .payment_method_paypal .about_paypal {
display: none
}
.woocommerce-checkout #payment ul.payment_methods .woocommerce-info {
margin-bottom: 0
}
.woocommerce-checkout #payment div.form-row {
padding: 0;
margin: 0
}
.woocommerce-checkout #payment #place_order {
width: 100%;
margin-bottom: 0 !important
}
.woocommerce form .form-row .input-checkbox {
margin-left: -1.5em !important
}
.woocommerce .woocommerce-terms-and-conditions,
.woocommerce-page .woocommerce-terms-and-conditions {
border: none;
box-shadow: none;
border-radius: 0.375rem;
margin-bottom: 1rem;
padding: 1rem
}
.woocommerce-SavedPaymentMethods.wc-saved-payment-methods {
padding-left: 0
}
.woocommerce-SavedPaymentMethods.wc-saved-payment-methods li {
padding-left: 0
}
.woocommerce-SavedPaymentMethods.wc-saved-payment-methods li input {
width: 1em !important;
margin-top: 0.25em !important;
margin-right: 0.5em !important;
margin-bottom: 0 !important;
margin-left: 0 !important
}
.wc-stripe-elements-field,
.wc-stripe-iban-element-field {
padding: 0.375rem 0.75rem !important;
background-color: var(--bs-body-bg) !important;
border-radius: 0.375rem;
border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important
}
.form-row.woocommerce-SavedPaymentMethods-saveNew.woocommerce-validated input {
width: 1em !important
}
.woocommerce-SavedPaymentMethods-saveNew label {
padding-left: 1.5em;
display: block !important
}
.woocommerce form .form-row label.checkbox {
display: inline-block
}
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select,
.woocommerce form .form-row.woocommerce-validated textarea,
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid textarea {
background-repeat: no-repeat
}
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated textarea,
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid textarea {
padding-right: calc(1.5em + 0.75rem);
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)
}
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-invalid input.input-text {
background-position: right calc(0.375em + 0.1875rem) center
}
.woocommerce form .form-row.woocommerce-validated select,
.woocommerce form .form-row.woocommerce-invalid select {
padding-right: 4.125rem;
background-position: right 0.75rem center, center right 2.25rem;
background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)
}
.woocommerce form .form-row.woocommerce-validated textarea,
.woocommerce form .form-row.woocommerce-invalid textarea {
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem)
}
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated textarea {
background-image: var(--valid-icon)
}
.woocommerce form .form-row.woocommerce-validated select {
--bs-form-select-bg-icon: var(--valid-icon)
}
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated textarea,
.woocommerce form .form-row.woocommerce-validated select {
border-color: var(--bs-form-valid-border-color)
}
.woocommerce form .form-row.woocommerce-validated input.input-text:focus,
.woocommerce form .form-row.woocommerce-validated textarea:focus,
.woocommerce form .form-row.woocommerce-validated select:focus {
box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
border-color: var(--bs-form-valid-border-color)
}
.woocommerce form .form-row.woocommerce-validated input#terms {
border-color: var(--bs-form-valid-color);
background-color: var(--bs-form-valid-color)
}
.woocommerce form .form-row.woocommerce-validated input#terms:focus {
box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25)
}
.woocommerce form .form-row.woocommerce-validated .woocommerce-terms-and-conditions-checkbox-text {
color: var(--bs-form-valid-color)
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid textarea {
background-image: var(--invalid-icon)
}
.woocommerce form .form-row.woocommerce-invalid select {
--bs-form-select-bg-icon: var(--invalid-icon)
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid textarea,
.woocommerce form .form-row.woocommerce-invalid select {
border-color: var(--bs-form-invalid-border-color)
}
.woocommerce form .form-row.woocommerce-invalid input.input-text:focus,
.woocommerce form .form-row.woocommerce-invalid textarea:focus,
.woocommerce form .form-row.woocommerce-invalid select:focus {
box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
border-color: var(--bs-form-invalid-border-color)
}
.woocommerce form .form-row.woocommerce-invalid label {
color: var(--bs-body-color)
}
.woocommerce form .form-row.woocommerce-invalid .woocommerce-form__label-for-checkbox .woocommerce-terms-and-conditions-checkbox-text {
color: var(--bs-form-invalid-color)
}
.woocommerce form .form-row.woocommerce-invalid .woocommerce-form__label-for-checkbox input {
border-color: var(--bs-form-invalid-color)
}
.woocommerce form .form-row.woocommerce-invalid .woocommerce-form__label-for-checkbox input:focus {
box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25)
}
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
font-size: 1rem;
font-weight: 400;
padding: 0.375rem 0.75rem;
background-color: var(--bs-body-bg);
border: var(--bs-border-width) solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
color: var(--bs-body-color);
line-height: 1.5
}
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus {
border-color: #86b7fe
}
.woocommerce form .form-row select {
background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
background-size: 16px 12px;
background-position: right 0.75rem center
}
.woocommerce form .form-row.woocommerce-invalid select:focus {
border-color: var(--bs-form-invalid-border-color)
}
.woocommerce form .form-row.woocommerce-validated select:focus {
border-color: var(--bs-form-valid-color)
}
.checkout-inline-error-message {
display: none
}
[data-bs-theme="dark"] .woocommerce .select2-container--default .select2-selection--single {
--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")
}
.woocommerce .select2-container--default .select2-selection--single {
--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
background-color: var(--bs-body-bg);
border: var(--bs-border-width) solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
background-size: 16px 12px;
background-position: right 0.75rem center;
background-repeat: no-repeat
}
.woocommerce .select2-container .select2-selection--single {
height: auto;
margin: 0;
min-height: 38px
}
.woocommerce .select2-selection__placeholder {
color: var(--bs-body-color) !important
}
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
padding: 0.375rem 2.25rem 0.375rem 0.75rem;
line-height: 1.5;
color: var(--bs-body-color);
font-weight: 400
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
display: none
}
.select2-container {
width: auto
}
.woocommerce form .form-row.woocommerce-validated .select2-container:not(.select2-container--open) .select2-selection,
.woocommerce form .form-row.woocommerce-invalid .select2-container:not(.select2-container--open) .select2-selection {
background-image: var(--bs-form-select-bg-img);
padding-right: 4.125rem;
background-position: right 0.75rem center, center right 2.25rem;
background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)
}
.woocommerce form .form-row.woocommerce-validated .select2-container:not(.select2-container--open) .select2-selection {
border-color: var(--bs-form-valid-color);
background-image: var(--bs-form-select-bg-img), var(--valid-icon)
}
.woocommerce form .form-row.woocommerce-validated .select2-container:not(.select2-container--open) .select2-selection:focus-visible {
box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
outline: 0
}
.woocommerce form .form-row.woocommerce-invalid .select2-container:not(.select2-container--open) .select2-selection {
border-color: var(--bs-form-invalid-border-color);
background-image: var(--bs-form-select-bg-img), var(--invalid-icon)
}
.select2-container .select2-dropdown,
.select2-container .select2-selection {
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
border: var(--bs-border-width) solid var(--bs-border-color-translucent);
border-radius: var(--bs-border-radius)
}
.select2-container .select2-results {
padding: 0.5rem 0
}
.select2-container--default .select2-search--dropdown {
padding: 1rem !important
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border: var(--bs-border-width) solid var(--bs-border-color) !important;
background-color: var(--bs-body-bg);
border-radius: var(--bs-border-radius) !important;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus-visible {
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
border-color: #86b7fe !important;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25)
}
.select2-container--default .select2-results__option {
padding: 0.25rem 1rem !important
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
background-color: var(--bs-tertiary-bg) !important
}
.select2-container--default .select2-results__option[aria-selected="true"]:focus-visible,
.select2-container--default .select2-results__option[data-selected="true"]:focus-visible {
outline: 0
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
background-color: var(--bs-primary) !important;
color: #fff !important
}
@media (max-width:768px) {
.woocommerce-cart table.cart td.actions .coupon {
display: flex
}
.woocommerce-cart table.cart td.actions .coupon .input-text {
flex: 1 1 auto
}
}
@media (min-width:769px) {
.woocommerce-cart table.cart td.actions .coupon .input-text {
width: auto !important
}
}
.woocommerce-cart table.cart td.actions .coupon .input-text {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
margin: 0
}
.woocommerce-cart table.cart td.actions .coupon .input-text::placeholder {
color: var(--bs-secondary-color);
opacity: 1
}
.woocommerce-cart table.cart td.actions .coupon .input-text:focus {
z-index: 5
}
.woocommerce-cart table.cart td.actions .coupon button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-left: calc(var(--bs-border-width) * -1)
}
.woocommerce form.checkout_coupon {
display: flex;
flex-wrap: wrap
}
.woocommerce form.checkout_coupon .form-row-first {
padding-right: 0;
flex: 1 1 auto
}
.woocommerce form.checkout_coupon .form-row-first .input-text {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.woocommerce form.checkout_coupon .form-row-first .input-text:focus {
z-index: 5
}
.woocommerce form.checkout_coupon .form-row-first .input-text::placeholder {
color: var(--bs-secondary-color);
opacity: 1
}
.woocommerce form.checkout_coupon .form-row-last {
padding-left: 0;
width: auto
}
.woocommerce form.checkout_coupon .form-row-last button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-left: calc(var(--bs-border-width) * -1)
}
@media (max-width:768px) {
.woocommerce form.checkout_coupon .form-row-last button {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px
}
}
.coupon-error-notice {
display: none !important
}
.checkout_coupon input.input-text,
.coupon input.input-text {
position: relative
}
.checkout_coupon input.input-text.has-error,
.coupon input.input-text.has-error {
background-image: var(--invalid-icon);
border-color: var(--bs-form-invalid-border-color) !important;
background-repeat: no-repeat;
padding-right: calc(1.5em + 0.75rem) !important;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
background-position: right calc(0.375em + 0.1875rem) center;
box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25) !important
}
#woo-comments .comment-list>li>.children:first-of-type {
padding-left: 96px
}
#woo-comments .star-rating {
float: right;
margin: 0
}
.woocommerce p.stars a {
font-size: inherit
}
.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme {
display: block;
margin-bottom: 1rem
}
@media (max-width:769px) {
.woocommerce form.login .form-row-first,
.woocommerce form.register .form-row-first {
padding-right: 0
}
.woocommerce form.login .form-row-last,
.woocommerce form.register .form-row-last {
padding-left: 0
}
}
.woocommerce form .form-row {
padding: 0;
margin: 0 0 1rem
}
.woocommerce form .form-row label {
line-height: 1.5;
margin-bottom: 0.5rem
}
[data-bs-theme="dark"] .woocommerce form .show-password-input::before,
[data-bs-theme="dark"] .woocommerce-page form .show-password-input::before {
filter: invert(1)
}
.woocommerce form .form-row-first {
width: 50%;
padding-left: 0.5rem;
float: right;
}
.woocommerce form .form-row-last {
width: 50%;
float: left;
padding-right: 0.5rem;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-cart table.cart td.actions .coupon .input-text {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: var(--bs-body-color);
appearance: none;
background-color: var(--bs-body-bg);
background-clip: padding-box;
border: var(--bs-border-width) solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
}
@media (prefers-reduced-motion:reduce) {
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-cart table.cart td.actions .coupon .input-text {
transition: none
}
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-cart table.cart td.actions .coupon .input-text:focus {
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25)
}
.woocommerce form .form-row textarea:focus {
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25)
}
.woocommerce form .form-row textarea,
.woocommerce textarea#order_comments,
.woocommerce #reviews #comment {
height: 7rem
}
.woocommerce form .form-row .input-checkbox {
margin: 0.25em 0 0 0
}
.checkbox,
.woocommerce-form-login__rememberme,
.comment-form-cookies-consent,
.woocommerce-SavedPaymentMethods-saveNew {
display: block;
min-height: 1.5rem;
padding-left: 1.5em;
margin-bottom: 0.125rem
}
.checkbox input,
.woocommerce-form-login__rememberme input,
.comment-form-cookies-consent input,
.woocommerce-SavedPaymentMethods-saveNew input {
float: left;
margin-left: -1.5em;
--bs-form-check-bg: var(--bs-body-bg);
flex-shrink: 0;
width: 1em;
height: 1em;
margin-top: 0.25em;
vertical-align: top;
appearance: none;
background-color: var(--bs-form-check-bg);
background-image: var(--bs-form-check-bg-image);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: var(--bs-border-width) solid var(--bs-border-color);
print-color-adjust: exact;
transition: all 0.2s ease-in-out
}
@media (prefers-reduced-motion:reduce) {
.checkbox input,
.woocommerce-form-login__rememberme input,
.comment-form-cookies-consent input,
.woocommerce-SavedPaymentMethods-saveNew input {
transition: none
}
}
.checkbox input[type="checkbox"],
.woocommerce-form-login__rememberme input[type="checkbox"],
.comment-form-cookies-consent input[type="checkbox"],
.woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"] {
border-radius: 0.25em
}
.checkbox input:active,
.woocommerce-form-login__rememberme input:active,
.comment-form-cookies-consent input:active,
.woocommerce-SavedPaymentMethods-saveNew input:active {
filter: brightness(90%)
}
.checkbox input:focus,
.woocommerce-form-login__rememberme input:focus,
.comment-form-cookies-consent input:focus,
.woocommerce-SavedPaymentMethods-saveNew input:focus {
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25)
}
.checkbox input:checked,
.woocommerce-form-login__rememberme input:checked,
.comment-form-cookies-consent input:checked,
.woocommerce-SavedPaymentMethods-saveNew input:checked {
background-color: #0d6efd;
border-color: #0d6efd
}
.checkbox input:checked[type="checkbox"],
.woocommerce-form-login__rememberme input:checked[type="checkbox"],
.comment-form-cookies-consent input:checked[type="checkbox"],
.woocommerce-SavedPaymentMethods-saveNew input:checked[type="checkbox"] {
--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")
}
ul.wc_payment_methods.payment_methods.methods li,
.woocommerce-shipping-methods li,
.shipping.recurring-total ul {
font-weight: normal;
display: block;
min-height: 1.5rem;
padding-left: 1.5em;
margin-bottom: 0.125rem
}
/*
ul.wc_payment_methods.payment_methods.methods li input,
.woocommerce-shipping-methods li input,
.shipping.recurring-total ul input {
float: right;
margin-left: -1.5em;
--bs-form-check-bg: var(--bs-body-bg);
flex-shrink: 0;
width: 1em;
height: 1em;
margin-top: 0.25em;
vertical-align: top;
appearance: none;
background-color: var(--bs-form-check-bg);
background-image: var(--bs-form-check-bg-image);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: var(--bs-border-width) solid var(--bs-border-color);
print-color-adjust: exact;
transition: all 0.2s ease-in-out
}
ul.wc_payment_methods.payment_methods.methods li input[type="text"], ul.wc_payment_methods.payment_methods.methods li input[type="file"]{
width: 100%;
height: 3.2rem;
padding: 10px 30px 10px 5px;
margin: 5px 0 !important;
}
*/
@media (prefers-reduced-motion:reduce) {
ul.wc_payment_methods.payment_methods.methods li input,
.woocommerce-shipping-methods li input,
.shipping.recurring-total ul input {
transition: none
}
}
ul.wc_payment_methods.payment_methods.methods li input[type="radio"],
.woocommerce-shipping-methods li input[type="radio"],
.shipping.recurring-total ul input[type="radio"] {
border-radius: 50%
}
ul.wc_payment_methods.payment_methods.methods li input:active,
.woocommerce-shipping-methods li input:active,
.shipping.recurring-total ul input:active {
filter: brightness(90%)
}
ul.wc_payment_methods.payment_methods.methods li input:focus,
.woocommerce-shipping-methods li input:focus,
.shipping.recurring-total ul input:focus {
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25)
}
ul.wc_payment_methods.payment_methods.methods li input:checked,
.woocommerce-shipping-methods li input:checked,
.shipping.recurring-total ul input:checked {
background-color: #0d6efd;
border-color: #0d6efd
}
ul.wc_payment_methods.payment_methods.methods li input:checked[type="radio"],
.woocommerce-shipping-methods li input:checked[type="radio"],
.shipping.recurring-total ul input:checked[type="radio"] {
--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")
}
.woocommerce ul#shipping_method li {
padding-left: 1.5em;
margin-bottom: 0.125rem
}
.woocommerce ul#shipping_method li input {
margin: 4px 0 0 -1.5em
}
.shipping.recurring-total ul {
padding-left: 0
}
.shipping.recurring-total ul li {
padding: 0 0 0 1.5em;
margin-bottom: 0.125rem;
text-indent: 0
}
.shipping.recurring-total ul li input {
margin: 4px 0 0 -1.5em
}
.woocommerce .blockUI.blockOverlay:before,
.woocommerce .loader:before,
#offcanvas-cart .blockUI.blockOverlay:before,
#offcanvas-cart .loader:before {
position: absolute;
top: 50%;
left: 50%;
margin-left: -0.5em;
margin-top: -0.5em;
content: "";
background: none;
line-height: 1;
text-align: center;
font-size: 2em
}
.woocommerce .blockUI.blockOverlay:before,
.woocommerce .loader:before,
#offcanvas-cart .blockUI.blockOverlay:before,
#offcanvas-cart .loader:before {
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: text-bottom;
border: 0.13em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spinner-border 0.75s linear infinite;
animation: spinner-border 0.75s linear infinite
}
.woocommerce .card a.woocommerce-LoopProduct-link.woocommerce-loop-product__link {
text-decoration: none
}
.woocommerce .card a.woocommerce-LoopProduct-link.woocommerce-loop-product__link:hover {
text-decoration: none
}
.woocommerce .card .woocommerce-loop-product__title {
font-size: 1.25rem
}
.woocommerce .card .star-rating {
float: none;
margin: 1rem auto
}
.woocommerce .card .star-rating span::before {
text-align: left
}
.woocommerce .card .price {
display: block;
margin-bottom: 1rem
}
.product-category .card-body a {
margin-top: auto
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
float: none;
width: 100%
}
.woocommerce-account .addresses .title .edit {
float: none
}
@media (min-width:769px) {
.woocommerce-MyAccount-downloads-file {
width: 100%
}
}
@media (max-width:768px) {
.woocommerce .shop_table a.button.invoice {
margin-left: 0.25rem
}
}
@media (min-width:769px) and (max-width:991px) {
.woocommerce .shop_table a.button.invoice {
margin-top: 0.25rem
}
}
@media (min-width:992px) {
.woocommerce .shop_table a.button.invoice {
margin-left: 0.25rem
}
}
.woocommerce .woocommerce-customer-details address {
background: var(--bs-body-bg);
border: var(--bs-border-width) solid var(--bs-border-color-translucent);
border-radius: var(--bs-border-radius);
padding: 1rem 1rem
}
.woocommerce .u-columns {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(-1 * var(--bs-gutter-y));
margin-right: calc(-.5 * var(--bs-gutter-x));
margin-left: calc(-.5 * var(--bs-gutter-x));
width: auto
}
.woocommerce .u-columns .u-column1.col-1,
.woocommerce .u-columns .u-column2.col-2 {
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-top: var(--bs-gutter-y);
margin-bottom: 1rem
}
@media (min-width:992px) {
.woocommerce .u-columns .u-column1.col-1,
.woocommerce .u-columns .u-column2.col-2 {
flex: 0 0 auto;
width: 50%;
float: none
}
}
.woocommerce .u-column1.col-1 {
width: 100%
}
@media (max-width:769px) {
.woocommerce .woocommerce-customer-details address {
margin-bottom: 1rem !important
}
}
.woocommerce td.product-name .wc-item-meta {
padding-left: 0
}
#offcanvas-user .woocommerce .col2-set .col-1,
#offcanvas-user .woocommerce .col2-set .col-2 {
width: 100%
}
#offcanvas-user .woocommerce-MyAccount-content p:last-child {
display: none
}
#offcanvas-user .col-md-4,
#offcanvas-user .col-md-8 {
width: 100%
}
#offcanvas-user .col-md-8 {
order: -1
}
.ajax-login-loader {
display: none
}
.ajax-login .ajax-login-loader {
display: flex
}
.quantity .input-group {
width: 140px
}
.quantity .form-control {
text-align: center;
appearance: textfield;
-webkit-appearance: none;
-moz-appearance: textfield
}
.quantity .form-control::-webkit-outer-spin-button,
.quantity .form-control::-webkit-inner-spin-button {
display: none;
margin: 0
}
.woocommerce-variation-add-to-cart-disabled .quantity .input-group-text {
pointer-events: none
}
.woocommerce-variation-add-to-cart-disabled .quantity .form-control {
background-color: var(--bs-secondary-bg);
pointer-events: none
}
.quantity input[readonly="readonly"] {
background-color: var(--bs-secondary-bg);
pointer-events: none
}
ins {
text-decoration: none
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
font-weight: 700
}
.woocommerce-price-suffix {
display: block;
font-size: 0.875rem
}
.woocommerce-product-gallery__image, .woocommerce div.product div.images .flex-control-thumbs img {
border-radius: var(--bs-border-radius);
corner-shape: squircle;
}
.woocommerce div.product div.images .flex-control-thumbs {
display: flex;
margin-top: 0.5rem;
gap: 0.5rem;
list-style: none;
padding: 0;
}
.woocommerce div.product form.cart {
display: flex;
flex-wrap: wrap
}
.woocommerce div.product form.cart div.quantity {
float: none;
margin-left: 1rem
}
.woocommerce div.product form.cart .button {
flex-grow: 1
}
.product_meta .sku_wrapper::after,
.product_meta .posted_in::after {
content: "\a";
white-space: pre
}
.woocommerce table.shop_attributes td {
font-style: normal
}
.related.products {
clear: both
}
.woocommerce div.product form.cart .group_table td:first-child {
width: 140px;
text-align: left
}
.woocommerce-grouped-product-list a.button {
width: 100%
}
form.cart.grouped_form {
flex-direction: column
}
.woocommerce div.product form.cart .variations select {
margin-right: 0
}
.woocommerce div.product form.cart .variations .reset_variations {
display: block;
border: none;
background: none;
padding: 0;
margin-top: 10px;
color: var(--bs-link-color)
}
form.variations_form.cart {
flex-direction: column
}
.woocommerce-variation-add-to-cart.variations_button {
display: flex
}
.woocommerce button.disabled.button,
.woocommerce div.product form.cart button.disabled.button {
pointer-events: auto;
cursor: inherit
}
.woocommerce-variation-price {
margin: 1rem 0
}
.woocommerce div.product form.cart .variations select {
background: var(--bs-form-select-bg-img);
background-size: 16px 12px;
-webkit-background-size: 16px 12px;
background-repeat: no-repeat;
background-position: left 0.75rem center
}
.woocommerce form.checkout_coupon p:first-child:not(.form-row-first) {
width: 100%
}
:root {
--wc-form-color-text: var(--bs-body-color)
}
.woocommerce ul#shipping_method li:has(input[type="hidden"]) {
padding-left: 0
}
.shipping-calculator-form button {
width: 100%
}
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count,
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
float: none
}
.woocommerce .woocommerce-ordering {
margin: 0
}
.woocommerce table {
vertical-align: top
}
.woocommerce table.shop_table {
border: var(--bs-border-width) solid var(--bs-border-color)
}
.woocommerce table.shop_attributes,
.woocommerce table.shop_table td,
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
border-top: var(--bs-border-width) solid var(--bs-border-color)
}
.woocommerce table.shop_attributes td,
.woocommerce table.shop_attributes th {
border-bottom: var(--bs-border-width) solid var(--bs-border-color)
}
.woocommerce-cart .cart-collaterals .cart_totals tr td,
.woocommerce-cart .cart-collaterals .cart_totals tr th {
border-top: var(--bs-border-width) solid var(--bs-border-color)
}
.woocommerce table.shop_table {
border-radius: 0.375rem
}
@media (max-width:768px) {
.shop_table_responsive td.actions {
border-bottom-right-radius: 0.375rem;
border-bottom-left-radius: 0.375rem
}
}
.woocommerce ul.order_details::before {
content: ""
}
@media (max-width:767.98px) {
.woocommerce ul.order_details li {
border-right: none
}
li.woocommerce-order-overview__order.order,
li.woocommerce-order-overview__date.date,
li.woocommerce-order-overview__email.email {
margin-bottom: 1rem
}
.woocommerce ul.order_details li {
float: none
}
}
@media (min-width:768px) {
.woocommerce ul.order_details li {
border-right: 1px solid
}
}
.woocommerce ul.product_list_widget li .star-rating {
float: none;
margin: 0.5rem 0
}
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.card .price {
color: var(--bs-wc-price, var(--bs-secondary-color));
font-size: 1.6rem;
font-weight: 700;
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del,
.card .price {
font-size: 1rem;
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins,
ins {
color: var(--bs-wc-price-sale, var(--bs-danger))
}
.woocommerce form .form-row .required {
color: var(--bs-wc-form-invalid, var(--bs-danger))
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
opacity: 1
}
.card a.woocommerce-LoopProduct-link.woocommerce-loop-product__link {
color: var(--bs-body-color)
}
.woocommerce .star-rating::before {
color: var(--bs-secondary-color)
}
@media (max-width:767.98px) {
.woocommerce table.shop_table_responsive tr:nth-child(2n) td,
.woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
background-color: var(--bs-shop-table-responsive, var(--bs-tertiary-bg))
}
}
#add_payment_method .cart-collaterals .cart_totals table small,
#add_payment_method .cart-collaterals .cart_totals table .small,
.woocommerce-cart .cart-collaterals .cart_totals table small,
.woocommerce-cart .cart-collaterals .cart_totals table .small,
.woocommerce-checkout .cart-collaterals .cart_totals table small,
.woocommerce-checkout .cart-collaterals .cart_totals table .small,
small.includes_tax,
.includes_tax.small {
color: var(--bs-wc-shop-table-small, var(--bs-secondary-color))
}
#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
background-color: var(--bs-wc-payment-box, var(--bs-tertiary-bg));
color: currentColor
}
#add_payment_method #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
border-bottom-color: var(--bs-wc-payment-box, var(--bs-tertiary-bg))
}
.woocommerce-terms-and-conditions {
background: var(--bs-terms, var(--bs-tertiary-bg))
}
.pswp__bg {
background-color: rgba(0, 0, 0, 0.8)
}
.woocommerce .blockUI.blockOverlay,
.woocommerce .loader,
#offcanvas-cart .blockUI.blockOverlay,
#offcanvas-cart .loader {
background-color: var(--bs-wc-loader-bg, var(--bs-body-bg)) !important;
opacity: 1 !important
}
.woocommerce .blockUI.blockOverlay:before,
.woocommerce .loader:before,
#offcanvas-cart .blockUI.blockOverlay:before,
#offcanvas-cart .loader:before {
color: var(--bs-wc-loader-color, var(--bs-primary))
}
.woocommerce table.shop_attributes tr:nth-child(even) td,
.woocommerce table.shop_attributes tr:nth-child(even) th {
background: var(--bs-wc-attributes-tr, var(--bs-tertiary-bg))
}
.pswp__ui--fit .pswp__caption,
.pswp__ui--fit .pswp__top-bar {
background-color: rgba(0, 0, 0, 0) !important
}
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
background-color: var(--bs-wc-price-slider-bg, var(--bs-dark))
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle,
.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
background-color: var(--bs-wc-price-slider, var(--bs-primary))
}
.woocommerce-invalid #terms {
outline: none;
outline-offset: 0
}
.list-group-flush .bs-list-group {
border-radius: 0
}
.list-group-flush .bs-list-group>.list-group-item {
border-width: 0 0 var(--bs-list-group-border-width)
}
.list-group-flush .bs-list-group>.list-group-item:last-child {
border-bottom-left-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
border-bottom-right-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
border-bottom-width: 0
}
.wc-cat-img img {
max-width: 28px
}
.wc-block-product-categories .form-select,
.wc-block-product-categories select {
margin-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.wc-block-product-categories__dropdown:has(.form-select:focus),
.wc-block-product-categories__dropdown:has(select:focus) {
z-index: 5
}
/*!
* hiladerm custom styles
*/
/* =============================================================================
SECTION: Definitive Header, Mega Menu & Accordion Styles
============================================================================= */
/* 1. Header Structure & Main Menu
/* -------------------------------------------------------------------------- */
.header-top-row {
height: 80px;
}
@media (max-width: 991.98px) {
.header-top-row {
height: 60px;
}
}
.header-top-row .header-logo {
flex-shrink: 0;
}
.header-bottom-row .main-navigation .navbar-nav {
flex-direction: row;
gap: 1.5rem;
}
.header-logo img {
max-height: 50px;
width: auto;
}
.megamenu-toggler {
border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
}
.main-navigation .nav-item .nav-link {
padding: 0.5rem 0;
font-size: 0.9rem;
font-weight: 500;
position: relative;
text-decoration: none;
color: var(--bs-body-color);
}
.main-navigation .nav-item .nav-link::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 2px;
background-color: var(--bs-primary);
transition: width 0.3s ease-in-out;
}
.main-navigation .nav-item:hover .nav-link::after,
.main-navigation .nav-item.current-menu-item .nav-link::after,
.main-navigation .nav-item.current-menu-ancestor .nav-link::after {
width: 100%;
}
/* 2. Desktop Mega Menu (Dropdown Style)
/* -------------------------------------------------------------------------- */
@media (min-width: 992px) {
.megamenu-wrapper {
position: relative;
}
.megamenu-container {
position: absolute;
top: 100%;
right: 0;
width: 1200px;
max-width: 90vw;
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-top: none;
border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
box-shadow: var(--bs-box-shadow-lg);
z-index: 1030;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.megamenu-container.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.hiladerm-megamenu {
display: flex;
min-height: 400px;
max-height: 70vh;
}
.megamenu-parents {
flex: 0 0 240px;
border-left: 1px solid var(--bs-border-color);
list-style: none;
padding: 0.5rem 0;
margin: 0;
overflow-y: auto;
}
.megamenu-parent-item a {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.9rem 1.25rem;
text-decoration: none;
color: var(--bs-body-color);
font-weight: 500;
transition: all 0.2s ease;
}
.megamenu-parent-item.active>a,
.megamenu-parent-item:hover>a {
background-color: var(--bs-tertiary-bg);
color: var(--bs-primary);
}
.megamenu-submenus {
flex-grow: 1;
position: relative;
}
.megamenu-submenu-panel {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 1.5rem 2rem;
overflow-y: auto;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s;
display: none;
}
.megamenu-submenu-panel.active {
opacity: 1;
visibility: visible;
display: block;
}
.megamenu-subtitle a {
font-size: 1rem;
font-weight: 700;
color: var(--bs-body-color);
text-decoration: none;
display: inline-block;
margin-bottom: 0.75rem;
}
.megamenu-child-list {
list-style: none;
padding: 0;
}
.megamenu-child-list a {
font-size: 0.9rem;
padding: 0.3rem 0;
display: block;
text-decoration: none;
color: var(--bs-secondary-color);
transition: color 0.2s ease, padding-right 0.2s ease;
}
.megamenu-child-list a:hover {
color: var(--bs-primary);
padding-right: 0.25rem;
}
}
/* 3. Mobile Offcanvas Accordion & Tabs
/* -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
#offcanvas-mobile-menu .nav-tabs .nav-link {
font-size: 0.9rem;
padding: 0.75rem 0.5rem;
color: var(--bs-secondary-color);
}
#offcanvas-mobile-menu .nav-tabs .nav-link.active {
color: var(--bs-primary);
font-weight: 500;
}
.hiladerm-megamenu {
padding: 0;
margin: 0;
}
.megamenu-parents {
list-style: none;
padding: 0;
margin: 0;
}
.megamenu-submenus {
display: none;
}
.megamenu-parent-item {
border-bottom: 1px solid var(--bs-border-color-translucent);
}
.megamenu-parent-item:last-child {
border-bottom: none;
}
.megamenu-parent-item a {
text-decoration: none;
color: var(--bs-body-color);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.8rem 0.25rem;
}
.megamenu-arrow {
transition: transform 0.3s ease;
padding: 0.5rem;
/* Larger click area */
}
.megamenu-parent-item.submenu-open>a>.megamenu-arrow {
transform: rotate(-90deg);
}
.megamenu-submenu-panel {
background-color: var(--bs-tertiary-bg);
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease-out, padding 0.35s ease-out;
}
}
/* =============================================================================
Custom Container Widths for Larger Screens
============================================================================= */
/**
* By default, Bootstrap's container has a max-width of 1140px on xl screens
* and 1320px on xxl screens. We are increasing these values here for a wider layout
* and adding a new custom breakpoint for ultra-wide screens.
* You can adjust all max-width values to your preference.
*/
/* For Extra Large screens (desktops, >= 1200px) */
@media (min-width: 1200px) {
.container, .container-lg, .container-md, .container-sm, .container-xl {
max-width: 1320px;
/* Default is 1140px */
}
}
/* For Extra Extra Large screens (large desktops, >= 1400px) */
@media (min-width: 1400px) {
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
max-width: 1500px;
/* Default is 1320px */
}
}
/* NEW: For Ultra-Wide screens (e.g., > 2K monitors, >= 1600px) */
@media (min-width: 1600px) {
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
max-width: 1640px;
/* مقدار جدید برای صفحات بسیار بزرگ */
}
}
/* =============================================================================
Styles for Single Post Content & Components (Adapted for Hiladerm Theme)
============================================================================= */
/* ==========================================================================
1. General Content Styles (for .entry-content)
========================================================================== */
article.type-post .entry-content p,
.product-stacked-content .entry-content p {
line-height: 1.8;
}
article.type-post .entry-content a,
.product-stacked-content .entry-content a {
font-weight: 600;
color: var(--bs-primary);
text-decoration: none;
border-bottom: 2px solid rgba(var(--bs-primary-rgb), 0.2);
transition: all 0.2s ease-in-out;
}
article.type-post .entry-content a:hover,
.product-stacked-content .entry-content a:hover {
background-color: rgba(var(--bs-primary-rgb), 0.1);
}
article.type-post .entry-content strong,
article.type-post .entry-content b,
.product-stacked-content .entry-content strong,
.product-stacked-content .entry-content b {
color: var(--bs-emphasis-color);
}
article.type-post .entry-content h2,
article.type-post .entry-content h3,
article.type-post .entry-content h4,
.product-stacked-content .entry-content h2,
.product-stacked-content .entry-content h3,
.product-stacked-content .entry-content h4 {
font-weight: 700;
margin-bottom: 1.5rem;
line-height: 1.5;
position: relative;
color: var(--bs-heading-color);
}
article.type-post .entry-content h2,
.product-stacked-content .entry-content h2 {
font-size: 1.75rem;
padding-right: 1.5rem;
}
article.type-post .entry-content h2::before,
.product-stacked-content .entry-content h2::before {
content: '';
position: absolute;
right: 0;
top: 5px;
bottom: 5px;
width: 5px;
background-color: var(--bs-primary);
border-radius: var(--bs-border-radius);
}
article.type-post .entry-content h3,
.product-stacked-content .entry-content h3 {
font-size: 1.5rem;
display: inline-block;
padding-bottom: 1rem;
}
article.type-post .entry-content h3::after,
.product-stacked-content .entry-content h3::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 30px;
height: 4px;
background-color: var(--bs-primary);
border-radius: var(--bs-border-radius);
}
article.type-post .entry-content ul,
article.type-post .entry-content ol,
.product-stacked-content .entry-content ul,
.product-stacked-content .entry-content ol {
padding-right: 2.5rem;
margin-bottom: 1.5rem;
list-style: none;
}
article.type-post .entry-content li,
.product-stacked-content .entry-content li {
margin-bottom: 1rem;
position: relative;
}
article.type-post .entry-content ul>li::before,
.product-stacked-content .entry-content ul>li::before {
content: '';
position: absolute;
right: -2.5rem;
top: 4px;
width: 20px;
height: 20px;
background-color: var(--bs-primary);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}
article.type-post .entry-content ol,
.product-stacked-content .entry-content ol {
counter-reset: hiladerm-list-counter;
}
article.type-post .entry-content ol>li::before,
.product-stacked-content .entry-content ol>li::before {
content: counter(hiladerm-list-counter);
counter-increment: hiladerm-list-counter;
color: var(--bs-primary);
font-weight: bold;
position: absolute;
right: -3rem;
top: 2px;
width: 1.75rem;
height: 1.75rem;
border: 2px solid rgba(var(--bs-primary-rgb), 0.25);
border-radius: 50%;
text-align: center;
line-height: 1.5rem;
background-color: rgba(var(--bs-primary-rgb), 0.1);
corner-shape: squircle;
}
article.type-post .entry-content blockquote,
.product-stacked-content .entry-content blockquote {
padding: 1.5rem 2rem;
margin: 2rem 0;
border-right: 4px solid var(--bs-primary);
background-color: var(--bs-tertiary-bg);
border-radius: var(--bs-border-radius);
corner-shape: squircle;
}
article.type-post .entry-content blockquote p,
.product-stacked-content .entry-content blockquote p {
margin-bottom: 0;
font-size: 1.1rem;
color: var(--bs-emphasis-color);
}
/* =============================================================================
Final WooCommerce Bootstrap Grid Compatibility Fix (High Priority)
============================================================================= */
/**
* This code uses a more specific selector and the !important flag to ensure
* it overrides the default WooCommerce float-based styles, which can be
* persistent due to high specificity or load order issues.
*/
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images, .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
float: unset;
width: unset;
}
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals {
float: unset;
width: unset;
}
.entry-content>.woocommerce {
margin-top: 20px;
}
.woocommerce .woocommerce-result-count {
margin: 0;
}
.product_title {
background-image: linear-gradient(45deg, transparent, #45c1d53d);
padding: 0.8rem 1.2rem !important;
border-radius: 1.5rem;
font-size: 1.4rem;
font-weight: 700;
corner-shape: squircle;
}
/* ==========================================================================
2. Single Post Components Styles
========================================================================== */
.entry-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
color: var(--bs-secondary-color);
}
.entry-meta .meta-item {
display: flex;
align-items: center;
gap: 6px;
}
.entry-meta a {
color: var(--bs-secondary-color);
text-decoration: none;
}
.entry-meta a:hover {
color: var(--bs-primary);
}
.tags-links {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.tags-links .tags-title-wrap {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 500;
}
.tags-links .tags-title-wrap svg {
width: 20px;
height: 20px;
}
.tags-links a {
display: inline-block;
padding: 0.25rem 0.75rem;
background-color: var(--bs-tertiary-bg);
color: var(--bs-tertiary-color);
border-radius: var(--bs-border-radius-sm);
font-size: 0.8rem;
border: 1px solid var(--bs-border-color);
text-decoration: none;
transition: all 0.2s ease-in-out;
}
.tags-links a:hover {
background-color: var(--bs-primary);
color: var(--bs-white);
border-color: var(--bs-primary);
}
.entry-footer {
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid var(--bs-border-color-translucent);
}
.author-box {
background-color: var(--bs-tertiary-bg);
border-radius: var(--bs-border-radius-lg);
padding: 2rem;
margin: 3rem 0;
border: 1px solid var(--bs-border-color);
}
.author-box-layout {
display: flex;
align-items: flex-start;
gap: 1.5rem;
}
.author-box-avatar .avatar {
border-radius: 50%;
border: 3px solid var(--bs-body-bg);
box-shadow: var(--bs-box-shadow-sm);
}
.author-box-content {
flex-grow: 1;
}
.author-box-title {
margin: 0 0 0.5rem;
font-size: 1.2rem;
font-weight: 700;
}
.author-box-title a {
color: var(--bs-body-color);
text-decoration: none;
}
.author-box-bio {
font-size: 0.9rem;
line-height: 1.7;
color: var(--bs-secondary-color);
margin: 0;
}
.post-navigation {
margin: 3rem 0;
}
.post-navigation .nav-links {
display: flex;
justify-content: space-between;
gap: 1.5rem;
}
.post-navigation a {
display: block;
width: 50%;
padding: 1rem 1.5rem;
border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius-md);
text-decoration: none;
transition: all 0.2s ease-in-out;
}
.post-navigation a:hover {
border-color: var(--bs-primary);
background-color: var(--bs-tertiary-bg);
box-shadow: var(--bs-box-shadow-sm);
}
.post-navigation .nav-previous {
text-align: right;
}
.post-navigation .nav-next {
text-align: left;
}
.post-navigation .meta-nav {
display: block;
font-size: 0.85rem;
color: var(--bs-secondary-color);
margin-bottom: 0.25rem;
}
.post-navigation .post-title {
font-weight: 700;
color: var(--bs-body-color);
}
/*DarkMode Style*/
#hiladerm-theme-toggle {
.theme-icon-light,
.theme-icon-dark {
display: inline-block;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.theme-icon-light {
display: none;
}
.theme-icon-dark {
display: inline-block;
}
}
[data-bs-theme="dark"] {
#hiladerm-theme-toggle {
.theme-icon-light {
display: inline-block;
}
.theme-icon-dark {
display: none;
}
}
.d-td-none {
display: none !important;
}
.d-tl-none {
display: block !important;
}
}
[data-bs-theme="light"] {
.d-td-none {
display: block !important;
}
.d-tl-none {
display: none !important;
}
}
/*
* Front Page Sections Styling
* -------------------------------------------------- */
/* General Section Styling */
.homepage-section {}
.section-title {
margin-bottom: 2rem;
text-align: center;
font-weight: bold;
}
/* 1. Main Slider Section */
.main-slider-section {
padding-top: 0;
padding-bottom: 3rem;
}
.swiper {
border-radius: var(--bs-border-radius);
corner-shape: squircle;
}
.main-slider-swiper .swiper-slide {
height: 100%;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
position: relative;
}
/*
.main-slider-swiper .swiper-slide::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1;
}
*/
.main-slider-swiper .slide-caption {
text-align: center;
position: relative;
z-index: 2;
}
.main-slider-swiper .slide-title {
font-size: 3rem;
margin-bottom: 1rem;
}
/* 2. Product & Post Carousel Styling */
.product-swiper .woocommerce ul.products,
.post-swiper ul.products {
/* WooCommerce applies this class */
display: flex;
/* Override default WooCommerce flex wrapper */
}
.product-swiper .swiper-slide,
.post-swiper .swiper-slide {
height: auto;
}
/* 3. Brands Carousel */
.brand-swiper .swiper-slide {
height: 120px;
display: flex;
align-items: center;
justify-content: center;
}
.brand-swiper img {
max-width: 150px;
max-height: 80px;
object-fit: contain;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.brand-swiper a:hover img {
opacity: 1;
}
/* 4. Post Carousel Item */
.post-slide-item {
border: 1px solid #eee;
border-radius: 5px;
overflow: hidden;
}
.post-slide-thumbnail img {
width: 100%;
height: auto;
display: block;
}
.post-slide-content {
padding: 1rem;
}
.post-slide-title {
font-size: 1.1rem;
margin: 0 0 0.5rem;
}
.post-slide-title a {
text-decoration: none;
color: inherit;
}
.post-slide-meta {
font-size: 0.85rem;
color: #777;
}
/* Universal Swiper Navigation Styling */
.swiper-button-next,
.swiper-button-prev {
color: var(--bs-primary);
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
corner-shape: squircle;
width: 50px;
height: 50px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.swiper-button-next::after,
.swiper-button-prev::after {
font-size: 1.2rem;
font-weight: bold;
}
/* مرحله ۱: دکمهها را در حالت عادی مخفی کن */
.swiper .swiper-button-next,
.swiper .swiper-button-prev {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* مرحله ۲: وقتی ماوس روی کل اسلایدر رفت، دکمهها را نمایش بده */
.swiper:hover .swiper-button-next,
.swiper:hover .swiper-button-prev {
opacity: 1;
visibility: visible;
}
/*
=========================================
CSS Styles for Professional WooCommerce My Account Panel v2.0
=========================================
*/
/* 1. Stat Card Enhancements
-----------------------------------------*/
.stat-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
color: #fff;
}
.stat-card .card-title {
color: rgba(255, 255, 255, 0.85);
}
.stat-card .display-4 {
color: #fff;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}
.stat-card.bg-gradient-primary {
background-color: #4c66ff;
background-image: linear-gradient(315deg, #4c66ff 0%, #3a54e9 74%);
}
.stat-card.bg-gradient-success {
background-color: #28c76f;
background-image: linear-gradient(315deg, #28c76f 0%, #22ab5f 74%);
}
.stat-card.bg-gradient-warning {
background-color: #ff9f43;
background-image: linear-gradient(315deg, #ff9f43 0%, #e88b2e 74%);
}
.stat-card.bg-gradient-info {
background-color: #00cfe8;
background-image: linear-gradient(315deg, #00cfe8 0%, #00b6cd 74%);
}
.stat-card .stat-icon-wrapper {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.stat-card:hover .stat-icon-wrapper {
transform: rotate(15deg) scale(1.1);
background-color: rgba(255, 255, 255, 0.3);
}
/* 2. Navigation Menu Enhancements
-----------------------------------------*/
.woocommerce-MyAccount-navigation .card-body .avatar {
border: 3px solid #dee2e6;
}
.woocommerce-MyAccount-navigation .list-group-item.active {
background-color: #0d6efd;
border-color: #0d6efd;
font-weight: 500;
color: #fff;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .075);
}
.woocommerce-MyAccount-navigation .list-group-item-action:not(.active):hover {
color: #0d6efd;
}
/* 3. General Content & Layout Styling
-----------------------------------------*/
.dashboard-header {
border: 1px solid var(--bs-border-color-translucent);
}
.woocommerce-MyAccount-content .card {
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
border: 1px solid var(--bs-border-color-translucent);
}
.woocommerce-MyAccount-content .card-header {
background-color: var(--bs-body-bg);
border-bottom: 1px solid var(--bs-border-color-translucent);
font-weight: 500;
}
.woocommerce-MyAccount-content .card-body.p-0 .table {
margin-bottom: 0;
}
.woocommerce-MyAccount-content .table-hover tbody tr:hover {
background-color: var(--bs-tertiary-bg);
}
/* 4. Profile Completion Widget
-----------------------------------------*/
.profile-completion-widget .progress {
height: 10px;
}
.profile-completion-widget .completion-text {
font-size: 0.875rem;
font-weight: 500;
}
/* 5. "My Products" Page Styling
-----------------------------------------*/
.my-products-item .product-image {
max-width: 80px;
}
.my-products-item .product-actions .btn {
font-size: 0.8rem;
}
/* 6. Styling for Internal Pages (Orders, Address, etc.)
-----------------------------------------*/
/* Make WC tables Bootstrap-friendly */
.woocommerce-orders-table, .woocommerce-table--order-details, .woocommerce-table--customer-details {
width: 100% !important;
}
/* Style WC form rows for Bootstrap */
.woocommerce-address-fields .form-row, .woocommerce-EditAccountForm .form-row {
margin-bottom: 1rem;
}
.woocommerce-address-fields .form-row label, .woocommerce-EditAccountForm .form-row label {
display: block;
margin-bottom: .5rem;
font-weight: 500;
}
.woocommerce-address-fields .form-row .input-text, .woocommerce-EditAccountForm .form-row .input-text, .woocommerce-EditAccountForm .form-row select {
display: block;
width: 100%;
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
background-clip: padding-box;
border: 1px solid var(--bs-border-color);
border-radius: .375rem;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.woocommerce-address-fields .form-row .input-text:focus, .woocommerce-EditAccountForm .form-row .input-text:focus, .woocommerce-EditAccountForm .form-row select:focus {
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
.woocommerce-EditAccountForm fieldset {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid var(--bs-border-color-translucent);
}
/*
=========================================
DARK MODE COMPATIBILITY
=========================================
*/
[data-bs-theme="dark"] {
.woocommerce-MyAccount-navigation .card-body .avatar {
border-color: #495057;
}
.woocommerce-MyAccount-content .card, .dashboard-header {
border-color: rgba(255, 255, 255, 0.1);
}
.woocommerce-MyAccount-content .card-header {
background-color: var(--bs-tertiary-bg);
border-bottom-color: rgba(255, 255, 255, 0.1);
}
.woocommerce-MyAccount-content .table-hover tbody tr:hover {
background-color: rgba(255, 255, 255, 0.075);
}
.woocommerce-MyAccount-content .table {
--bs-table-border-color: var(--bs-border-color-translucent);
}
.woocommerce-MyAccount-navigation .list-group-item.active {
background-color: #0d6efd;
border-color: #0d6efd;
}
}
/*
=========================================
Offcanvas Account - FINAL Light & Dark Mode Styles
=========================================
*/
/* --- Base Styles (Light Mode) --- */
.offcanvas-user-header {
background-color: var(--bs-tertiary-bg);
}
.offcanvas-user-header .avatar {
border: 3px solid var(--bs-white);
}
/* --- Dark Mode Overrides --- */
[data-bs-theme="dark"] .offcanvas-user-header {
background-color: var(--bs-gray-800);
}
[data-bs-theme="dark"] .offcanvas-user-header .avatar {
border-color: var(--bs-gray-600);
}
/* =============================================================================
Hiladerm Custom Card Styles v3.0 (Unified & High Specificity)
========================================================================== */
/*
* Filename: bootstrap-custom-styles.css
* Description: Overrides Bootstrap's default border-radius to be larger
* and sets the corner shape to squircle for all relevant elements.
*/
/* 1. Increase Bootstrap's default border-radius values */
:root {
--bs-border-radius: 1.5rem;
/* مقدار پایه جدید */
--bs-border-radius-sm: 1.2rem;
/* کمی کوچکتر از پایه */
--bs-border-radius-lg: 2rem;
/* بزرگتر از پایه */
--bs-border-radius-xl: 2.5rem;
/* بسیار بزرگ */
--bs-border-radius-xxl: 3.5rem;
/* فوقالعاده بزرگ */
--bs-border-radius-pill: 50rem;
/* برای شکل قرصی */
}
/* 2. Apply squircle corner shape to all elements with border-radius */
/*
* Note: `corner-shape` is still an experimental property.
* The code below is for browsers that support it.
*/
@supports (corner-shape: squircle) {
/* Selects any element that has a border-radius style attribute */
[style*="border-radius:"],
[style*="border-top-left-radius:"],
[style*="border-top-right-radius:"],
[style*="border-bottom-left-radius:"],
[style*="border-bottom-right-radius:"] {
corner-shape: squircle;
}
/* Selects all Bootstrap components and utilities with rounded corners */
.rounded, .rounded-0, .rounded-1, .rounded-2, .rounded-3, .rounded-4, .rounded-5,
.rounded-top, .rounded-bottom, .rounded-start, .rounded-end, .rounded-circle, .rounded-pill,
.btn,
.card,
.modal-content,
.alert,
.badge,
.popover,
.toast,
.list-group-item:first-child,
.list-group-item:last-child,
.form-control,
.form-select,
input, button, select, optgroup, textarea,
.pagination,
.page-item:first-child .page-link,
.page-item:last-child .page-link,
.progress .alert, .must-log-in, .woocommerce-error, .woocommerce-info, .woocommerce-noreviews, .woocommerce-message, .woocommerce-thankyou-order-details, .wc-stripe-error {
corner-shape: squircle;
}
}
/* General Card Style */
.product.hl-card, .post.hl-card {
border: 1px solid var(--bs-border-color-translucent);
border-radius: var(--bs-border-radius-lg);
corner-shape: squircle;
background-color: var(--bs-card-bg);
transition: all 0.3s ease-in-out;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
/* Ensures card fills the parent flex container (.swiper-slide or .col-*) */
}
.product.hl-card:hover, .post.hl-card:hover {
transform: translateY(-5px);
box-shadow: var(--bs-box-shadow);
}
/* Image Wrapper & Badges */
.product.hl-card .hl-card__image-wrapper, .post.hl-card .hl-card__image-wrapper {
position: relative;
overflow: hidden;
aspect-ratio: 1 / 1;
}
.product.hl-card .hl-card__image-wrapper img, .post.hl-card .hl-card__image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.product.hl-card:hover .hl-card__image-wrapper img, .post.hl-card:hover .hl-card__image-wrapper img {
transform: scale(1.05);
}
.product.hl-card.outofstock .hl-card__image-wrapper img {
filter: grayscale(100%);
opacity: 0.7;
}
.product.hl-card .hl-card__badges {
position: absolute;
top: 0.75rem;
right: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
z-index: 2;
}
.product.hl-card .hl-card__badge {
padding: 0.25em 0.6em;
font-size: 1rem;
font-weight: 400;
border-radius: var(--bs-border-radius-pill);
background: var(--bs-pink);
}
/* Card Body & Footer */
.product.hl-card .hl-card__body, .post.hl-card .hl-card__body {
padding: 1rem;
flex-grow: 1;
}
.product.hl-card .hl-card__title, .post.hl-card .hl-card__title {
font-size: 1rem;
font-weight: 600;
color: var(--bs-body-color);
text-decoration: none;
display: block;
min-height: 48px;
}
.product.hl-card .hl-card__title:hover, .post.hl-card .hl-card__title:hover {
color: var(--bs-primary);
}
.product.hl-card .hl-card__footer, .post.hl-card .hl-card__footer {
padding: 0 1rem 1rem;
}
/* Price Styles */
.product.hl-card .sale-price-wrapper {
display: flex;
align-items: center;
gap: 0.75rem;
justify-content: flex-end;
}
.product.hl-card .sale-price-wrapper .price-column {
display: flex;
flex-direction: column;
align-items: flex-end;
line-height: 1.3;
}
.product.hl-card .sale-price-wrapper .sale-badge {
font-size: 0.9rem;
font-weight: 700;
padding: 0.8em 0.7em;
border-radius: var(--bs-border-radius);
}
.product.hl-card .sale-price-wrapper .regular-price-on-sale {
font-size: 0.85rem;
color: var(--bs-secondary-color);
text-decoration: line-through;
}
.product.hl-card .sale-price-wrapper .sale-price {
font-size: 1.1rem;
font-weight: 700;
color: var(--bs-body-color);
text-decoration: none;
}
.product.hl-card .variable-price-wrap {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.25rem;
}
.product.hl-card .variable-price-item {
display: flex;
align-items: center;
gap: 0.4rem;
}
.product.hl-card .variable-price-item .price-label {
font-size: 0.75rem;
font-weight: 500;
color: var(--bs-secondary-color);
background-color: var(--bs-tertiary-bg);
padding: 0.1em 0.5em;
border-radius: var(--bs-border-radius-sm);
}
.product.hl-card .variable-price-item .price {
font-size: 0.9rem;
font-weight: 600;
}
.product.hl-card .price-wrapper .price {
font-size: 1.1rem;
font-weight: 700;
color: var(--bs-body-color);
}
/* Add to Cart Button & Sonar Animation */
@keyframes sonar-effect {
0% {
transform: scale(1);
opacity: 0.5;
}
100% {
transform: scale(1.6);
opacity: 0;
}
}
.product.hl-card .hl-add-to-cart-btn .button {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
border-radius: var(--bs-border-radius);
corner-shape: squircle;
background-color: var(--bs-primary);
color: #fff;
border: none;
position: relative;
transition: all 0.2s ease-in-out;
text-decoration: none;
}
.product.hl-card .hl-add-to-cart-btn.on-sale .button {
background-color: var(--bs-pink);
}
.product.hl-card .hl-add-to-cart-btn.out-of-stock .button {
background-color: var(--bs-gray-500);
}
.product.hl-card .hl-add-to-cart-btn .button:hover {
filter: brightness(1.1);
transform: scale(1.05);
}
.product.hl-card .hl-add-to-cart-btn .button::before,
.product.hl-card .hl-add-to-cart-btn .button::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: var(--bs-border-radius);
background-color: var(--bs-primary);
animation: none;
opacity: 0;
z-index: -1;
}
.product.hl-card .hl-add-to-cart-btn.on-sale .button::before,
.product.hl-card .hl-add-to-cart-btn.on-sale .button::after {
background-color: var(--bs-pink);
}
.product.hl-card .hl-add-to-cart-btn.out-of-stock .button::before,
.product.hl-card .hl-add-to-cart-btn.out-of-stock .button::after {
background-color: var(--bs-gray-500);
}
.product.hl-card .hl-add-to-cart-btn .button:hover::before,
.product.hl-card .hl-add-to-cart-btn .button:hover::after {
animation: sonar-effect 1.5s infinite cubic-bezier(0.075, 0.82, 0.165, 1);
}
.product.hl-card .hl-add-to-cart-btn .button:hover::after {
animation-delay: 0.75s;
}
.product.hl-card .hl-add-to-cart-btn .add_to_cart_button.loading {
opacity: 0.7;
color: transparent;
}
.product.hl-card .hl-add-to-cart-btn .btn-loader {
font-size: 1rem;
}
/* Post Card Specifics */
.post.hl-card .hl-post-card__excerpt {
font-size: 0.9rem;
color: var(--bs-secondary-color);
min-height: 63px;
}
/* =============================================================================
Hiladerm Custom Post Card Styles
========================================================================== */
/* The main card container for posts. The `.post` class is added by WordPress. */
.post.hl-card {
border: 1px solid var(--bs-border-color-translucent);
border-radius: var(--bs-border-radius-lg);
background-color: var(--bs-card-bg);
transition: all 0.3s ease-in-out;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
}
.post.hl-card:hover {
transform: translateY(-5px);
box-shadow: var(--bs-box-shadow);
}
/* Image container. 16:9 is a standard aspect ratio for blog thumbnails. */
.post.hl-card .hl-card__image-wrapper {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 9;
}
.post.hl-card .hl-card__image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.post.hl-card:hover .hl-card__image-wrapper img {
transform: scale(1.05);
}
/* Card body, which contains the title and excerpt */
.post.hl-card .hl-card__body {
padding: 1rem;
flex-grow: 1;
/* This makes the body expand and pushes the footer down. */
display: flex;
flex-direction: column;
}
/* Post Title */
.post.hl-card .hl-card__title {
font-size: 1.1rem;
/* Slightly larger font for post titles */
font-weight: 600;
color: var(--bs-body-color);
text-decoration: none;
display: block;
min-height: 52px;
/* Ensures consistent height for 2-line titles */
}
.post.hl-card .hl-card__title:hover {
color: var(--bs-primary);
}
/* Post Excerpt */
.post.hl-card .hl-post-card__excerpt {
font-size: 0.9rem;
color: var(--bs-secondary-color);
margin-top: 0.5rem;
min-height: 63px;
/* Consistent height for 3 lines of text */
}
/* Card footer, which contains the 'Read More' button */
.post.hl-card .hl-card__footer {
padding: 0 1rem 1rem;
margin-top: auto;
/* Ensures the footer is always at the bottom */
}
/* New Styles for On-Sale Products Price Display */
.sale-price-wrapper {
display: flex;
align-items: center;
gap: 0.75rem;
justify-content: flex-end;
/* Aligns the whole block to the end (right in RTL) */
}
.sale-price-wrapper .price-column {
display: flex;
flex-direction: column;
align-items: flex-end;
/* Aligns prices to the end (right in RTL) */
line-height: 1.3;
}
.sale-price-wrapper .sale-badge {
font-size: 0.9rem;
font-weight: 700;
padding: 0.8em 0.7em;
/* Makes the badge vertically taller */
border-radius: var(--bs-border-radius);
}
.sale-price-wrapper .regular-price-on-sale {
font-size: 0.85rem;
color: var(--bs-secondary-color);
text-decoration: line-through;
}
.sale-price-wrapper .sale-price {
font-size: 1.1rem;
font-weight: 700;
color: var(--bs-body-color);
text-decoration: none;
}
/* =============================================================================
Hiladerm Subcategory Browser v7.2 (Styled & Visible Scrollbar)
========================================================================== */
.hl-subcats__header {
margin-bottom: 1rem;
}
/* --- Scrollbar Container --- */
.hl-subcats__nav {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* --- Scrollbar Styling for Firefox --- */
scrollbar-width: thin;
scrollbar-color: var(--bs-primary) var(--bs-tertiary-bg);
}
/* --- Scrollbar Styling for Webkit Browsers (Chrome, Safari, Edge) --- */
/* 1. The scrollbar track (the background) */
.hl-subcats__nav::-webkit-scrollbar {
height: 8px;
}
.hl-subcats__nav::-webkit-scrollbar-track {
background-color: var(--bs-tertiary-bg);
border-radius: 8px;
}
/* 2. The scrollbar thumb (the draggable part) */
.hl-subcats__nav::-webkit-scrollbar-thumb {
background-color: var(--bs-primary);
border-radius: 8px;
border: 2px solid var(--bs-tertiary-bg);
/* Creates a nice padding effect */
}
.hl-subcats__nav::-webkit-scrollbar-thumb:hover {
background-color: var(--bs-primary-text-emphasis);
}
.hl-subcats__grid {
list-style: none;
padding-right: 0;
margin: 0;
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(140px, 1fr);
gap: 0.75rem;
padding-bottom: 1rem;
}
/* Card Base Styles */
.hl-subcats__card {
display: flex;
flex-direction: column;
border-radius: var(--bs-border-radius-lg);
border: 1px solid var(--bs-border-color-translucent);
background-color: var(--bs-tertiary-bg);
text-align: center;
transition: all 0.2s ease-in-out;
height: 100%;
}
.hl-subcats__card:hover {
transform: translateY(-4px);
box-shadow: var(--bs-box-shadow);
border-color: var(--bs-primary);
background-color: var(--bs-body-bg);
}
.hl-subcats__card .card-img-top {
aspect-ratio: 1 / 1;
object-fit: cover;
}
.hl-subcats__card .card-body {
padding: 0.75rem;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
.hl-subcats__card .card-title {
color: var(--bs-body-color);
font-size: 0.9rem;
line-height: 1.4;
}
.hl-subcats__card--text-only .card-title {
color: var(--bs-emphasis-color);
}
.hl-subcats__card--text-only:hover .card-title {
color: var(--bs-body-color);
}
/* On Desktop: Switch to a responsive, auto-filling grid */
@media (min-width: 768px) {
.hl-subcats__nav {
overflow-x: visible;
}
.hl-subcats__grid {
grid-auto-flow: row;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 1rem;
padding-bottom: 0;
}
}
/* Description styles remain the same and are correct */
.archive-description-wrapper {
border-top: 1px solid var(--bs-border-color-translucent);
padding-top: 2rem;
}
.description-content {
position: relative;
max-height: 100px;
overflow: hidden;
transition: max-height 0.5s ease-out;
}
.description-content:not(.expanded)::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background: linear-gradient(to top, var(--bs-body-bg), transparent);
}
.description-content.expanded {
max-height: 2000px;
transition: max-height 0.7s ease-in;
}
.description-content.expanded::after {
opacity: 0;
}
/* 1. Apply rounded corners to Bootstrap select fields AND WooCommerce variation selects */
.form-select,
table.variations select {
/* Targetting raw select elements in WooCommerce tables */
border-radius: var(--bs-border-radius-lg, 0.5rem);
}
/* Optional: Attempt to round the dropdown options (Limited by OS/Browser) */
/* This mainly styles the edges of the visible options list if the browser allows it */
table.variations select option,
.form-select option {
border-radius: var(--bs-border-radius-lg, 0.5rem);
}
/* 2. Dark Mode Fix for Select Dropdowns */
/* We target both .form-select (Bootstrap) and the raw select element (WooCommerce) */
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] table.variations select {
/* Style the select element itself in dark mode */
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
border-color: var(--bs-border-color);
/* The arrow icon needs to be light in dark mode */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
/* 3. Style Options/Dropdown Menu in Dark Mode (Limited by OS, but helps if the browser allows it) */
[data-bs-theme="dark"] select.form-select option,
[data-bs-theme="dark"] table.variations select option {
background-color: var(--bs-body-bg);
/* Ensure options use a dark background */
color: var(--bs-body-color);
/* Ensure options use light text */
}
/* --- End Custom Form Styles --- */
.commentlist {
padding-right: 0;
max-height: 500px;
overflow-y: auto;
}
li.review {
list-style: none;
}
.comment-form-rating #rating {
display: none
}
.comment-form-rating p.stars span {
display: flex;
flex-wrap: wrap;
white-space: nowrap;
align-items: center;
column-gap: 10px;
row-gap: 10px;
}
.comment-form-rating p.stars a {
cursor: pointer;
text-decoration: none;
padding: 0 .1rem;
font-weight: 300;
color: #ccc;
transition: all .1s ease-in-out;
text-align: center;
min-width: 80px;
}
.comment-form-rating p.stars a::before {
content: "\f005";
text-indent: 0;
font-family: 'Font Awesome 7 Pro','Font Awesome',sans-serif;
display: inline-block;
color: inherit;
font-size: 1rem;
margin-left: 5px;
}
.comment-form-rating p.stars a:hover {
color: #ffc107;
font-weight: 900
}
.comment-form-rating p.stars a:hover~a, .comment-form-rating p.stars a:not(:hover) {
color: #ccc;
font-weight: 300
}
.comment-form-rating p.stars.selected a {
color: #ccc;
font-weight: 300
}
.comment-form-rating p.stars.selected a.active {
color: #ffc107;
font-weight: 900
}
/* ========================================= */
/* --- Mobile Bottom Navigation Bar --- */
/* ========================================= */
/* Ensure the bar is fixed at the bottom, only on mobile (d-lg-none class handles desktop hiding) */
#mobile-bottom-bar {
z-index: 1050; /* بالاتر از نوار ناوبری اصلی (Navbars) و پایینتر از Offcanvas و Modal */
padding-top: 5px;
padding-bottom: 5px;
/* برای جلوگیری از دیده شدن کد ادمین وردپرس، بهتر است از bg-body-tertiary استفاده شود.
اگر با bg-body به مشکل خوردید، آن را به bg-body-tertiary تغییر دهید. */
background-color: var(--bs-body-bg) !important;
}
/* Style for each button/item link */
.bottom-nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
color: var(--bs-secondary-color); /* رنگ پیشفرض خاکستری */
padding: 0.5rem 0.25rem;
line-height: 1;
font-size: 0.7rem; /* اندازه متن کوچک */
transition: all 0.2s ease;
}
.bottom-nav-item:hover,
.bottom-nav-item:focus {
color: var(--bs-primary); /* رنگ اصلی تم در هاور */
background-color: transparent; /* حذف پسزمینه هاور در صورت وجود */
}
/* Icon style (Font Awesome 7 Pro Light) */
.bottom-nav-item i {
font-size: 1.25rem; /* اندازه آیکون */
margin-bottom: 4px;
font-weight: 300; /* وزن Light برای fa-light */
transition: all 0.2s ease;
}
/* Active state for current page item (مثل دکمه خانه وقتی در صفحه اصلی هستیم) */
.bottom-nav-item.active {
color: var(--bs-primary);
font-weight: 500; /* کمی پررنگتر برای حالت فعال */
}
/* 4. پدینگ برای جلوگیری از پنهان شدن محتوا پشت نوار */
@media (max-width: 991.98px) {
body {
/* 70px تقریبا ارتفاع نوار است. */
padding-bottom: 70px;
}
/* اگر نوار مدیریت وردپرس (Admin Bar) در موبایل نمایش داده میشود: */
.logged-in.admin-bar body {
padding-bottom: 70px !important;
}
}
/* ----------------------------------------------------------- */
/* استایلهای جستجوی AJAX سفارشی HD */
/* ----------------------------------------------------------- */
header .hd-ajax-search-wrapper {
max-width: 600px;
}
.hd-ajax-search-wrapper {
position: relative;
}
button.btn.btn-primary.hd-search-button {
border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius) !important;
corner-shape: squircle;
}
/* استایل Dropdown نتایج */
.hd-ajax-results-dropdown {
width: 100%;
position: absolute;
z-index: 1050;
margin-top: 5px;
padding: 0;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
max-height: 400px;
overflow-y: auto;
border-radius: 0.5rem;
border: none;
background-color: var(--bs-body-bg, #fff);
top: 35px; /* Adjust as needed */
right: 0;
left: auto;
}
/* Header محصولات و مقالات */
.hd-ajax-results-dropdown .dropdown-header {
font-size: 0.75rem;
padding: 0.75rem 1rem 0.25rem;
text-transform: uppercase;
color: var(--bs-secondary-color, #6c757d);
font-weight: 600;
}
/* آیتمهای محصول و مقاله */
.hd-product-item,
.hd-post-item {
font-size: 0.9rem;
padding: 0.5rem 1rem;
display: flex;
align-items: center;
border-color: rgba(0, 0, 0, 0.05);
}
/* پوشش تصویر */
.hd-product-image-wrap,
.hd-post-image-wrap {
width: 50px;
height: 50px;
flex-shrink: 0;
overflow: hidden;
border-radius: 6px;
background-color: #f8f9fa;
border: 1px solid #eee;
}
/* تگ ![]()
*/
.hd-ajax-product-image,
.hd-ajax-post-image {
width: 100% !important;
height: 100% !important;
object-fit: cover;
margin: 0;
padding: 0;
transition: transform 0.2s ease;
}
/* آیکون جایگزین تصویر */
.hd-placeholder-icon {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
color: #999;
font-size: 1.5rem;
}
/* جزئیات متن */
.hd-product-details,
.hd-post-details {
overflow: hidden;
min-width: 0;
}
.hd-product-price {
font-size: 0.85rem;
font-weight: 600;
}
.hd-post-date {
font-size: 0.75rem;
}
/* استایل دکمه بستن */
.hd-close-ajax-search {
position: absolute;
top: 0.75rem;
z-index: 2;
}
/* برای سایتهای راستچین */
[dir="rtl"] .hd-close-ajax-search {
right: auto;
left: 0.75rem;
}
/* برای سایتهای چپچین */
[dir="ltr"] .hd-close-ajax-search {
right: 0.75rem;
left: auto;
}
/* ریسپانسیو برای موبایل */
@media (max-width: 767.98px) {
.hd-ajax-results-dropdown {
width: 95%;
left: 2.5% !important;
right: 2.5% !important;
}
}
/* Hiladerm Custom Product Meta Styles */
.hl-product-meta {
border: 1px solid;
border-radius: var(--bs-border-radius);
padding: 0.75rem 1rem;
display: flex;
align-items: center;
background-color: var(--bs-body-bg);
corner-shape: squircle;
}
.hl-product-meta i {
font-size: 1.25rem;
margin-right: 0.75rem;
}
.hl-product-meta--expiration {
border-color: #27ae60; /* Emerald */
color: #27ae60;
background-color: #2ecc711a; /* Light Emerald */
}
.hl-product-meta--expiration i {
color: #27ae60;
}
.hl-product-meta--note {
border-color: #8e44ad; /* Amethyst */
color: #8e44ad;
background-color: #9b59b61a; /* Light Amethyst */
}
.hl-product-meta--note i {
color: #8e44ad;
}
.hl-product-meta--free-shipping {
border-color: #2980b9; /* Peter River */
color: #2980b9;
background-color: #3498db1a; /* Light Peter River */
}
.hl-product-meta--free-shipping i {
color: #2980b9;
}
.hl-product-meta--shipping {
border-color: #d35400; /* Carrot */
color: #d35400;
background-color: #e67e221a; /* Light Carrot */
}
.hl-product-meta--shipping i {
color: #d35400;
}
.whatsapp-float {
/* موقعیت ثابت و چسبان */
position: fixed;
/* اندازه دکمه */
width: 60px;
height: 60px;
/* پایین و راست صفحه */
bottom: 40px;
right: 40px; /* برای نمایش در سمت راست */
/* استایل دایره ای */
background-color: #25d366; /* رنگ واتساپ */
color: #FFF;
border-radius: 50px;
text-align: center;
/* سایه و عمق */
box-shadow: 2px 2px 3px #999;
z-index: 100; /* اطمینان از قرارگیری در بالا */
/* حذف زیر خط و تنظیم نمایش */
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
.whatsapp-icon {
/* اندازه آیکون */
font-size: 30px;
}
/* برای نمایش بهتر در موبایل (اختیاری) */
@media screen and (max-width: 768px) {
.whatsapp-float {
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
}
.whatsapp-icon {
font-size: 24px;
}
}