@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600&display=swap');

/* Framework */
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

body {
    line-height: 1;
    display: block
}

* {
    margin: 0;
    padding: 0
}

html {
    display: block
}

blockquote,
q {
    quotes: none
}

blockquote::after,
blockquote::before,
q::after,
q::before {
    content: '';
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

.section,
.widget {
    margin: 0;
    padding: 0
}

#backlinks-container,
.blog-feeds,
.blog-mobile-link,
.feed-links,
.navbar,
a.home-link,
.status-msg-body a {
    display: none
}

.edit-post,
.item-control,
.quickedit,
.sosmedimut h3,
.displaynone,
.authorschema-product {
    display: none
}

.post-body .separator>a,
.post-body .separator>span {
    margin-left: 0 !important
}

b,
strong {
    font-weight: 700
}

cite,
em,
i {
    font-style: italic
}

a {
    color: #3699ff;
    text-decoration: none;
    outline: 0
}

a:visited {
    text-decoration: none
}

a:hover {
    text-decoration: none
}

a img {
    border: none;
    border-width: 0;
    outline: 0
}

abbr,
acronym {
    border-bottom: 1px dotted;
    cursor: help
}

sub,
sup {
    vertical-align: baseline;
    position: relative;
    top: -.4em;
    font-size: 86%
}

sub {
    top: .4em
}

small {
    font-size: 86%
}

kbd {
    font-size: 80%;
    border: 1px solid #777;
    padding: 2px 5px;
    border-bottom-width: 2px;
    border-radius: 3px
}

mark {
    background-color: #ffce00;
    color: #000
}

blockquote,
dl,
figure,
form,
hr,
ol,
p,
pre,
table,
ul {
    margin: 0 0 1.5em
}

hr {
    height: 1px;
    border: none;
    background-color: #666
}

h1 {
    font-size: 1.8rem
}

h2 {
    font-size: 1.6rem
}

h3 {
    font-size: 1.4rem
}

h4 {
    font-size: 1.2rem
}

h5 {
    font-size: 1rem
}

h6 {
    font-size: .9rem
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 .6em;
    font-weight: 700
}

dl,
ol,
ul {
    margin: .5em 0 .5em 3em
}

li {
    margin: .5em 0
}

dt {
    font-weight: 700
}

dd {
    margin: 0 0 .5em 2em
}

select {
    font: inherit;
    font-size: 100%;
    line-height: normal;
    vertical-align: baseline
}

textarea {
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

code,
pre {
    font-family: "Courier New", Courier, Monospace;
    color: inherit
}

pre {
    white-space: pre;
    word-wrap: normal;
    overflow: auto
}

table[border="1"] td,
table[border="1"] th {
    vertical-align: top;
    text-align: left;
    font-size: 13px;
    padding: 3px 5px;
    border: 1px solid #f6f6f6
}

table[border="1"] th {
    background: #f4f5f9
}

img,
table {
    max-width: 100%;
    height: auto
}

iframe {
    max-width: 100%
}

td.tr-caption {
    color: #444
}

.clear {
    clear: both
}

.clear::after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0
}

a:link,
#menu-blanter li a i {
    transition: all .2s;
    -moz-transition: all .2s;
    -webkit-transition: all .2s
}

.floatleft {
    float: left
}

.floatright {
    float: right !important
}

.page-box img,
.navbar img,
.footer-logo img,
.carousel-item img,
.product-image img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none
}

form#logout-form {
    display: none
}

/* Custom CSS */
body {
    font-family: 'Rubik', Arial, Helvetica, sans-serif;
    line-height: 1.5;
    background: #fff
}

body.guestarea {
    background: #fff;
    min-height: 100vh
}

.container {
    max-width: 1350px;
    margin: 0 auto
}

.container-sm {
    max-width: 940px;
    margin: 0 auto
}

/* ==== Auth screens v2 (login, register, forgot/reset password) — split layout ==== */
.authpage {
    background: #fff
}

.auth-wrap {
    display: flex;
    min-height: 100vh
}

.auth-visual {
    flex: 0 0 44%;
    max-width: 44%;
    background: #14161a;
    color: #fff;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden
}

.auth-visual-inner {
    padding: 60px;
    max-width: 460px;
    position: relative;
    z-index: 2
}

.auth-ring {
    position: absolute;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 50%
}

.auth-ring.r1 {
    width: 420px;
    height: 420px;
    right: -160px;
    bottom: -160px
}

.auth-ring.r2 {
    width: 260px;
    height: 260px;
    right: -60px;
    bottom: -60px
}

.auth-ring.r3 {
    width: 90px;
    height: 90px;
    left: 60px;
    top: 70px;
    border-color: rgb(225 52 65 / 18%);
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    margin: 0 0 60px
}

.auth-brand img {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    object-fit: cover
}

.auth-visual h2 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin: 0 0 16px
}

.auth-visual p.auth-lead {
    color: rgb(255 255 255 / 65%);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 34px
}

.auth-points {
    list-style: none;
    padding: 0;
    margin: 0
}

.auth-points li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: rgb(255 255 255 / 85%);
    padding: 0 0 18px
}

.auth-points li i {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 9px;
    color: #e13441;
    font-size: 13px
}

.auth-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px
}

.auth-panel-inner {
    width: 100%;
    max-width: 380px
}

.auth-panel-head {
    margin: 0 0 30px
}

.auth-panel-head h1 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #14161a;
    margin: 0 0 8px
}

.auth-panel-head p {
    color: #8a8a8a;
    font-size: 14.5px;
    margin: 0
}

.auth-back {
    display: none
}

#auth-form {
    margin: 0
}

.field {
    position: relative;
    margin: 0 0 18px
}

.field input.form-control,
.field select {
    width: 100%;
    height: 54px;
    padding: 22px 16px 6px;
    background: #fff;
    border: 2px solid #e6e6e6;
    border-radius: 10px;
    font-size: 14.5px;
    color: #14161a;
    transition: border-color .15s ease
}

.field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer
}

.field textarea.form-control {
    width: 100%;
    min-height: 120px;
    padding: 30px 16px 12px;
    background: #fff;
    border: 2px solid #e6e6e6;
    border-radius: 10px;
    font-size: 14.5px;
    color: #14161a;
    resize: vertical;
    transition: border-color .15s ease
}

.field label {
    position: absolute;
    left: 16px;
    top: 17px;
    font-size: 14.5px;
    color: #999;
    pointer-events: none;
    transition: all .15s ease;
    background: transparent
}

.field input.form-control:focus,
.field select:focus,
.field textarea.form-control:focus {
    border-color: #14161a;
    box-shadow: none;
    outline: none
}

.field input.form-control:focus~label,
.field input.form-control:not(:placeholder-shown)~label,
.field select:focus~label,
.field textarea.form-control:focus~label,
.field textarea.form-control:not(:placeholder-shown)~label,
.field.filled label {
    top: 7px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #14161a
}

.field input.form-control.is-invalid,
.field select.is-invalid,
.field textarea.form-control.is-invalid {
    border-color: #e13441
}

.field small.field-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #999
}

.field .toggle-password {
    position: absolute;
    right: 14px;
    top: 15px;
    color: #b5b5b5;
    font-size: 14px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer
}

.field .invalid-feedback {
    display: block;
    margin-top: 6px
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -4px 0 22px;
    font-size: 13.5px
}

.auth-row .form-check {
    display: flex;
    align-items: center;
    color: #666;
    padding-left: 0;
}

.auth-row .form-check-input {
    width: 17px;
    height: 17px;
    margin: 0 8px 0 0;
    border-radius: 5px;
    border: 1.5px solid #d5d5d5
}

.auth-row .form-check-input:checked {
    background-color: #14161a;
    border-color: #14161a
}

button.btn.auth-submit {
    display: block;
    width: 100%;
    background: #e13441;
    border: none;
    color: #fff;
    padding: 15px;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    border-radius: 999px;
    transition: background .15s ease
}

button.btn.auth-submit:hover,
button.btn.auth-submit:focus {
    background: #c92735
}

button.btn.auth-submit:active {
    background: #a91f2b
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 26px 0;
    color: #b0b0b0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #ececec
}

p.ada-akun a {
    color: #14161a;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid #e13441
}

p.ada-akun a:hover {
    color: #e13441
}

p.ada-akun {
    margin: 26px 0 0;
    font-size: 13.5px;
    font-weight: 500;
    color: #8a8a8a
}

.auth-panel .alert {
    margin: 0 0 20px;
    border-radius: 10px;
    font-size: 13.5px;
    padding: 12px 16px;
    border: none
}

.alert-success {
    font-size: 15px;
    font-weight: 500;
    border: none;
    padding: 15px 20px
}

.form-data label {
    font-size: 13px;
    font-weight: 500
}

.form-data input.form-control,
.form-data select,
.form-data textarea {
    background-color: #fff;
    font-size: 14.5px;
    padding: 10px 15px;
    border-radius: 8px
}

.form-data input.form-control[disabled] {
    background: #eee
}

.navbar {
    display: block;
    background-color: #131313 !important;
    margin: 0;
    padding: 0;
    border-bottom: 0
}

.navbar ul.navbar-nav {
    margin: 0
}

.navbar ul.navbar-nav li a.nav-link {
    font-weight: 500;
    font-size: 13.5px;
    color: #eee;
    padding: 5px 15px !important;
    border-radius: 8px
}

.navbar ul.navbar-nav li a.nav-link:hover {
    background: #e13441 !important;
    color: #eee
}

.navbar-nav .dropdown-menu {
    padding: 0;
    font-size: 15px;
    border: 1px solid #444;
    border-bottom: 3px solid #444;
    background: #131313
}

.navbar-nav .dropdown-menu a {
    font-weight: 500;
    color: #eee
}

.navbar-nav .dropdown-menu a:hover {
    background: #2b2b2b
}

.mynote {
    background: #fff;
    padding: 17px;
    margin: 15px 10px;
    border-radius: 10px;
    box-shadow: 1px 2px 3px #ddd;
    border-left: 5px solid #131313;
    font-size: 15px;
    color: #444
}

.mynote h2 {
    font-size: 17px
}

h1.welcome-note {
    font-size: 17px;
    font-weight: 600
}

.navbar .navbar-brand img {
    max-width: 150px
}

.welcome-header {
    position: relative;
    background: #131313;
    padding: 25px 0;
    color: #2b2b2b
}

.welcome-header .container {
    position: relative;
    display: grid;
    grid-template-columns: 2fr 6fr 1.5fr;
    gap: 50px
}

.shopping-cart {
    display: flex;
    gap: 10px
}

.welcome-header .shopping-cart a {
    width: 100%;
    height: 42.5px;
    font-size: 20px;
    line-height: 42.5px;
    background: transparent;
    text-align: center;
    border-radius: 7px;
    color: #fff
}

.welcome-header .shopping-cart a:hover {
    background: #e13441
}

.welcome-header a.home-login {
    display: block;
    height: 42.5px;
    line-height: 42.5px;
    background: #2b2b2b;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .3px;
    text-align: center;
    border-radius: 7px;
    color: #fff
}

.welcome-header a.home-login:hover {
    background: #e13441
}

.info-boxinput {
    display: flex;
    grid-gap: 10px
}

.filter-boxinput select {
    cursor: pointer
}

.filter-boxinput {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px
}

#search-box {
    margin: 0
}

.search-home {
    display: none;
    margin: 15px 0 0 !important
}

#filter-form {
    margin: 15px 0 0;
    overflow: hidden
}

#filter-form button {
    float: right;
    margin: 10px 0 0
}

#search-box input.form-control {
    border: none;
    outline: none;
    padding: 10px 25px;
    padding-right: 60px
}

#search-box input.form-control,
#search-box select.form-select {
    font-size: 15px;
    border: none
}

button#button-search svg {
    fill: #2b2b2b;
    margin: 0 2px
}

button#button-search {
    display: flex;
    align-items: center;
    color: #2b2b2b;
    background: #fff;
    font-weight: 600;
    margin: 5px;
    margin-left: -65px;
    border-radius: 5px
}

#search-box a.btn {
    color: #fff;
    background: #2b2b2b;
    display: flex;
    align-items: center
}

#search-box a.btn i {
    margin: 0 5px 0 0
}

#product-section {
    margin: 0 0 40px
}

#product-section .card {
    border: none;
    border: 1px solid #ddd;
    height: 100%
}

#product-section p.card-text {
    margin: 0;
    font-size: 13.2px;
    color: #555
}

#product-section p.info-harga {
    font-weight: 700;
    color: #000;
    padding: 0;
    margin: 5px 0 0;
    border-radius: 5px;
    font-size: 17px
}

#product-section p.harga-discount .red-zone,
.show-product p.harga-discount .red-zone {
    color: #E91E63;
    margin: 0 5px;
    font-weight: 500
}

#product-section p.harga-discount,
.show-product p.harga-discount {
    font-weight: 400;
    font-size: 13.5px;
    opacity: .6
}

#product-section .ribbon {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    top: -55px;
    right: -40px
}

#product-section .ribbon.coming-soon span {
    background: #555;
    color: #fff;
    z-index: 2
}

#product-section .ribbon span {
    position: absolute;
    display: block;
    width: 150px;
    padding: 3px 0;
    background: rgb(93 104 160 / 67%);
    color: #fff;
    bottom: 50px;
    font-size: 11px;
    text-align: center;
    font-weight: 500;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    box-shadow: 0 3px 10px -5px rgb(0 0 0 / 53%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px)
}

h1.mytitle,
h2.mytitle,
h3.mytitle {
    margin: 10px 0 0;
    padding: 10px 0;
    font-size: 22px
}

.mytitle i {
    background: #e13441;
    color: #fff;
    padding: 7px;
    border-radius: 7px;
    margin: 0 7px 0 0
}

.mybox .collapse,
.mybox .collapsing {
    margin-top: 30px
}

#footer-section .footer-credit {
    font-size: 14px;
    color: #2b2b2b
}

#footer-section .footer-logo img {
    max-width: 150px;
    margin: 0 0 20px
}

#footer-section {
    padding: 35px 0;
    margin: 50px 0 0;
    text-align: center;
    background: #fff;
    border-top: 1px solid #ddd
}

.hijab-info {
    position: absolute;
    z-index: 1;
    background: rgb(233 156 156 / 67%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    margin: 5px;
    border-radius: 5px
}

.outofstock {
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 10px;
    display: flex;
    background: #131313;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 15px;
    margin: 0;
    border-radius: 5px;
    text-align: center;
    align-items: center;
    justify-content: center
}

#product-section img.card-img-top {
    border-radius: 7px;
    background: #ddd;
    width: 100%;
    height: auto;
    object-fit: cover
}

.category-menu ul {
    display: flex;
    list-style: none;
    margin: 10px 0 0
}

.category-menu ul li a {
    font-size: 14.5px;
    font-weight: 500;
    padding: 8px 15px;
    margin: 0 2px;
    border-radius: 7px;
    color: #eee
}

.category-menu ul li a.active,
.category-menu ul li a:hover {
    background: #e13441 !important;
    color: #fff !important
}

.category-menu .mega-box .column ul li a.active {
    padding: 5px 10px
}

.category-menu .mega-box .column ul li a.active:hover {
    background: #313131 !important;
    color: #fff !important
}

a.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #14161a;
    border-radius: 999px;
    color: #14161a;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: .01em;
    padding: 13px;
    background: #fff;
    transition: background .15s ease, color .15s ease
}

.btn-google img {
    width: 18px;
    height: 18px;
    margin: 0 8px 0 0
}

a.btn-google:hover {
    background: #14161a;
    color: #fff
}

a.btn-reset-password {
    font-size: 13px;
    font-weight: 700;
    color: #e13441;
    text-decoration: none
}

a.btn-reset-password:hover {
    text-decoration: underline
}

h3.mytitle.mx-title {
    margin-top: 0;
    padding: 0 10px;
    padding-top: 0
}

.smalltitle {
    font-size: 13px;
    font-weight: 500;
    padding: 0 10px
}

.sale-feature {
    position: relative;
    font-family: 'Outfit', sans-serif;
    overflow: hidden;
    height: 37px;
    text-align: center;
    background: #b92631;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    padding: 8px
}

.sale-item {
    position: absolute;
    width: 100%;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.6s ease
}

.sale-item.active {
    opacity: 1;
    transform: translateY(0)
}

.sale-item.exit {
    opacity: 0;
    transform: translateY(-100%)
}

.logo-header.desktop-only {
    height: 100%;
    display: flex;
    align-items: center
}

.title-header h1 {
    margin: 0 1px 0;
    font-size: 18px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
    letter-spacing: .4px
}

.dropdown-profile {
    display: none;
    position: absolute;
    z-index: 10;
    right: 10px;
    top: 42px;
    background: #222;
    padding: 5px;
    min-width: 160px;
    border-radius: 10px;
    border: 1px solid #333
}

.dropdown-profile a {
    display: block;
    font-size: 14px;
    padding: 8px 12px;
    color: #fff;
    margin: 2px 0;
    border-radius: 7px
}

.dropdown-profile a:hover {
    background: #333
}

main.mycontent {
    overflow: hidden
}

span.cart-count {
    font-size: 13px;
    position: absolute;
    top: -5px;
    background: #e13441;
    height: 20px;
    line-height: 20px;
    width: 20px;
    border-radius: 100%
}

#custom-filters {
    margin: 30px 0 10px
}

#custom-filters label.form-label {
    font-size: 15px;
    font-weight: 500
}

.data-sorting {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.data-sorting form {
    margin: 0;
    padding: 0
}

/* Mega Menu Box */
.category-menu .mega-box {
    position: absolute;
    left: 0;
    top: 97%;
    width: 100%;
    background: #fff;
    box-shadow: 0 4px 10px rgb(0 0 0 / .1);
    padding: 30px 0;
    display: none;
    z-index: 1000;
    border-radius: 7px
}

.mega-brands {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px
}

.mega-brands .brand-item:hover {
    opacity: .8
}

.category-menu .mega-box .container {
    width: 90%;
    margin: 0 auto;
    display: block
}

.category-menu .mega-box .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
}

.category-menu .mega-box .column h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px
}

.category-menu .mega-box .column ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block
}

.category-menu .mega-box .column ul li {
    margin: 5px 0
}

.category-menu .mega-box .column ul li a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s;
    padding: 2px 0
}

.category-menu .mega-box .column ul li a:hover {
    color: #000 !important;
    background: #fff !important;
    text-decoration: underline
}

.category-menu li.has-mega:hover>.mega-box {
    display: block
}

@media (max-width:980px) {
    .category-menu .mega-box .grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:768px) {
    span.cart-count {
        font-size: 11px;
        width: 18px;
        height: 18px;
        line-height: 18px;
        top: 0;
        margin-left: -5px
    }

    .category-menu {
        display: none;
        position: fixed;
        z-index: 99;
        bottom: 0;
        top: 130px;
        left: 0;
        right: 0;
        overflow: hidden;
        overflow-y: scroll;
        background: #131313;
        padding: 0 10px
    }

    .mega-brands img {
        border-radius: 10px
    }

    .mega-brands a {
        width: 100%
    }

    .mega-brands {
        grid-template-columns: repeat(2, 1fr);
        gap: 5px
    }

    .category-menu .mega-box .grid {
        grid-template-columns: 1fr 1fr
    }
}

.mega-brands .brand-item a,
.mega-brands .brand-item a:hover,
.mega-brands .brand-item a.active {
    background: transparent !important
}

/* Old Product CSS */
#dashboard-section .col a {
    background: #fff;
    box-shadow: 1px 2px 3px #ddd;
    display: block;
    padding: 15px;
    border-radius: 8px
}

#dashboard-section a span {
    font-weight: 500;
    color: #333;
    font-size: 14px
}

#dashboard-section i {
    color: #2b2b2b;
    display: block;
    font-size: 40px;
    margin: 0 0 15px
}

#dashboard-section {
    margin: 10px 0 40px;
    text-align: center
}

.filter-section {
    display: none
}

.filter-section select {
    font-size: 14px;
    border: none;
    color: #444;
    padding: 10px 15px
}

.form-box,
.mybox {
    background: #fff;
    display: block;
    padding: 25px 0;
    margin: 15px 0;
    border-radius: 8px
}

.mybox .form-box {
    padding: 5px 0
}

.form-box.form-dotted {
    box-shadow: none;
    border: 3px dotted #eee
}

.form-box.form-clean {
    box-shadow: none;
    border: none
}

.filter-download button.btn.btn-secondary,
.filter-download a.btn.btn-secondary {
    color: #fff;
    font-weight: 600;
    padding: 10px 30px
}

button.btn.btn-primary,
a.btn.btn-primary,
.action-buttons .btn {
    background: #2b2b2b;
    border-color: #2b2b2b;
    color: #fff;
    font-weight: 500;
    padding: 10px 30px;
    font-size: 14px
}

button.btn.btn-colored,
a.btn.btn-colored,
.action-buttons .btn {
    background: #e13441;
    border-color: #e13441;
    color: #fff;
    font-weight: 600;
    padding: 10px 30px
}

button.btn.btn-danger,
a.btn.btn-danger {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
    font-weight: 500;
    padding: 10px 30px
}

button.btn.btn-stay {
    background: #2b2b2b;
    border-color: #2b2b2b;
    color: #fff
}

.form-data .form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0 20px
}

.form-data .form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 0 20px
}

.alert-fixed {
    position: fixed;
    z-index: 9999;
    right: 25px;
    bottom: 25px;
    z-index: 99;
    min-width: 300px;
    max-width: 480px;
    margin: 0;
    padding-right: 50px
}

a.edit-product {
    position: absolute;
    z-index: 3;
    right: 0;
    top: 0;
    background: #009688;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px 8px 12px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-bottom-left-radius: 20px;
    border-top-right-radius: 7px;
    opacity: .8
}

a.edit-product:hover {
    opacity: 1
}

#product-section .card {
    position: relative;
    overflow: hidden;
    padding-bottom: 50px
}

#product-section .card-title {
    color: #111;
    margin-top: -5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600
}

.product-image img {
    width: 100%;
    transition: all .6s ease-in-out
}

#product-section .product-image:hover img {
    transform: scale(1.05)
}

.product-image {
    position: relative;
    overflow: hidden;
    margin: 0;
    border-radius: 0;
    display: flex;
    border-bottom: 1px solid #ddd
}

.product-description {
    border: 1px solid #ddd;
    margin: 30px 0 0
}

.form-flex {
    display: flex;
    align-items: center;
    justify-content: space-between
}

a.forgot-password {
    float: right;
    font-size: 14px;
    color: #777
}

a.forgot-password:hover {
    text-decoration: underline
}

.ck-content {
    height: 200px
}

.ck-editor p {
    margin: 0
}

span.ck-file-dialog-button {
    display: none
}

.ck.ck-toolbar {
    border: 1px solid #dee2e6 !important;
    background: #f9fafb;
    border-bottom: 2px dotted #ddd !important;
    border-radius: 7px 7px 0 0 !important
}

.ck.ck-content {
    border-color: #dee2e6 !important;
    border-top: 0 !important;
    border-radius: 0 0 7px 7px !important
}

.profile-card {
    position: relative;
    display: grid;
    grid-template-columns: .8fr 2fr;
    align-items: center
}

.profile-img {
    width: 120px;
    height: 120px;
    border-radius: 100%;
    object-fit: cover;
    margin-bottom: 20px
}

.profile-name {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 5px
}

.profile-info {
    margin-bottom: 20px
}

.profile-info p {
    margin: 0
}

.profile-card #email {
    font-size: 14px;
    opacity: .7;
    font-weight: 500
}

.footer-menu ul li a,
.profile-menu a,
a.button-grey {
    margin: 0 5px;
    padding: 10px 15px;
    color: #333;
    background: #f9fafb;
    border: 1px solid #eee;
    font-size: 13.5px;
    border-radius: 7px;
    text-decoration: none;
    cursor: pointer
}

.footer-menu ul li a:hover,
.profile-menu a:hover,
a.button-grey:hover {
    border-color: #ddd
}

.footer-menu ul li i,
.profile-menu i {
    margin: 0 2px 0 0
}

.footer-menu ul {
    margin: 0 0 30px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center
}

.profile-menu a {
    display: block;
    text-align: center
}

.show-product {
    padding: 0;
    margin: 40px 0 0;
    border-radius: 10px;
    position: relative
}

.detail-product-column {
    background: #fff;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    padding: 60px 20px;
    box-shadow: 0 5px 10px 0 rgb(41 41 41 / 10%);
    border-radius: 20px
}

.product-info {
    color: #555;
    font-size: 15px;
    line-height: 1.7;
    margin: 20px 0
}

.product-info h1 {
    font-size: 25px;
    color: #111;
    margin: 0 0 5px;
    line-height: 1.5
}

.product-thumbnail img {
    border-radius: 10px
}

.product-info .info-harga {
    padding: 10px 0;
    border-top: 2.5px solid #eee;
    font-weight: 700;
    font-size: 24px;
    margin: 15px 0;
    color: #222
}

.product-info .info-more {
    margin: 0 0 20px
}

.product-info h3,
.product-description h3 {
    font-size: 17px;
    color: #222;
    margin: 10px 0;
    padding: 10px 0 0;
    border-top: 1px solid #eee
}

.product-description h3 {
    font-size: 17px;
    padding: 10px 15px;
    border-top: 0;
    margin: 0;
    border-bottom: 1px solid #ddd
}

.data-description {
    padding: 10px 15px
}

.product-info .product-description {
    padding: 0 0 10px;
    margin: 0 0 10px;
    border-bottom: 1px solid #eee
}

.product-description p {
    margin: 5px 0
}

.image-preview,
.current-preview {
    display: flex;
    flex-wrap: wrap
}

.image-preview img,
.current-preview img {
    max-width: 150px;
    margin: 10px
}

#imagePreview img,
#current-preview img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
    margin: 15px 0 5px
}

#imagePreview,
#current-preview {
    display: flex;
    grid-gap: 10px
}

.thumbnail-container {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0 5px;
    margin: 0;
    flex-wrap: wrap;
    width: 100%;
    height: fit-content
}

.thumbnail-newsec {
    max-height: 500px;
    overflow: hidden;
    overflow-y: scroll;
    border-radius: 10px
}

.thumbnail-newsec::-webkit-scrollbar {
    display: none
}

.thumbnail-container img {
    width: 150px;
    height: 90px;
    object-fit: cover;
    cursor: pointer
}

a.auto-scrolldown {
    position: absolute;
    bottom: 0;
    background: rgb(255 255 255 / 52%);
    left: 0;
    right: 0;
    text-align: center;
    color: #222
}

.col.product-thumbnail {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    gap: 10px;
    padding-left: 0
}

.product-thumbnail .carousel {
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    height: fit-content
}

.carousel-item.active img {
    transition: all .4s ease-in-out
}

.carousel-item.active:hover img {
    transform: scale(1.1)
}

.column-current-image .hapus-gambar {
    position: absolute;
    right: 0;
    top: 15px;
    color: #fff;
    background: #E91E63;
    padding: 0 5px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px
}

.column-current-image {
    position: relative
}

.video-popup {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgb(15 15 15 / .8);
    backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center
}

.video-popup-content {
    position: relative;
    background: rgb(255 255 255 / .1);
    border-radius: 20px;
    padding: 15px;
    box-shadow: 0 10px 40px rgb(0 0 0 / .5);
    animation: zoomIn 0.3s ease
}

.video-wrapper {
    overflow: hidden;
    border-radius: 15px
}

.video-popup iframe {
    border-radius: 15px;
    display: block
}

.video-close {
    position: absolute;
    top: -15px;
    right: 0;
    background: crimson;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 5px 15px rgb(0 0 0 / .3);
    transition: 0.3s;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center
}

.video-close:hover {
    background: darkred
}

.video-thumbnail {
    position: relative;
    cursor: pointer;
    display: inline-block
}

.video-thumbnail img {
    border-radius: 12px;
    max-width: 100%;
    height: 450px;
    object-fit: cover
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: crimson;
    color: #fff;
    font-size: 32px;
    padding: 0;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgb(0 0 0 / .3);
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center
}

@keyframes zoomIn {
    from {
        transform: scale(.7);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.product-thumbnail iframe,
.video-thumbnail {
    border-radius: 10px;
    height: 450px
}

.thumbnail-container .ada-video {
    width: 100%;
    height: 90px;
    object-fit: cover;
    cursor: pointer;
    background: #eee;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px
}

.thumbnail-container:hover img {
    opacity: .7
}

.thumbnail-container img:hover {
    opacity: 1
}

.my-pagination {
    margin: 0 10px
}

/* jarak paginasi pada daftar transaksi (user & admin) */
.trxc-list+.my-pagination,
.q-noresult-box+.my-pagination {
    margin-top: 22px
}

.my-pagination .active span {
    background: #131313;
    border-color: #131313;
    color: #fff
}

.my-pagination a.page-link {
    color: #000
}

.info-product-button .outofstock {
    position: relative;
    color: #fff;
    background: #b92631;
    padding: 10px;
    margin: 5px 0;
    height: auto;
    left: 0;
    top: 0
}

.info-product-button .btn-block {
    margin: 5px 0;
    display: block
}

table.responsive-table {
    font-size: 14px;
    color: #222
}

.table thead th {
    font-weight: 600;
    background: #f9fafb
}

.table tr {
    border-bottom: 1px solid #eee
}

.table td,
.table th {
    padding: 15px 5px
}

.table .btn {
    font-size: 13px;
    padding: 4px 10px !important;
    color: #fff;
    margin: 0 2px
}

.table .btn.btn-success {
    background: #009688
}

.table form,
.table .row,
.table .col {
    margin: 0;
    padding: 0
}

body .select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #dee2e6;
    font-size: 14.5px;
    padding: 8px 13px;
    border-radius: 8px;
    height: 100%
}

body .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 10px;
    right: 10px
}

body .select2-results__option {
    font-size: 14.5px !important;
    margin: 2px 0 !important;
    padding: 7px 15px !important
}

body .select2-container--default .select2-results__group {
    padding: 0
}

body span.select2-selection.select2-selection--multiple {
    height: 45px;
    background-color: #fff !important;
    border: 1px solid #dee2e6 !important
}

.page-box img {
    border-radius: 7px
}

.input-minplus input {
    text-align: center
}

.input-minplus .btn-minus,
.input-minplus .btn-plus {
    padding: 7px 15px;
    background: #2b2b2b;
    border-color: #2b2b2b;
    color: #fff;
    font-size: 20px
}

form.check-jadwal {
    margin: 0
}

button.navbar-toggler {
    border: none
}

.my-pagination p.small.text-muted {
    display: none
}

a.whatsapp-button {
    position: fixed;
    z-index: 8;
    right: 30px;
    bottom: 50px;
    background: #009688;
    color: #fff;
    font-size: 30px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 100%;
    box-shadow: 2px 3px 8px rgb(0 0 0 / 8%)
}

.header-box #search-box input.form-control {
    background: #f9fafb;
    padding-right: 60px
}

.row.header-box {
    align-items: center
}

.header-box .col-md-2 {
    width: 100px;
    margin: 0 10px 0 0
}

.header-box .col-md-2 .col {
    padding: 0;
    margin: 0
}

.label-date {
    position: relative
}

.label-date label:before {
    content: '-Pilih Tanggal Pakai-';
    position: absolute;
    background: #f9fafb;
    padding: 5px;
    bottom: 7px;
    left: 10px;
    visibility: hidden
}

.label-date.filled label:before {
    visibility: hidden
}

#ongkir-result ul.list-group {
    margin: 0
}

.tags-design {
    display: flex;
    gap: 5px;
    margin: 0 0 10px
}

.tags-design .tags-label {
    background: #FFDF97;
    color: #444;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 14px
}

button.add-to-cart-home {
    background: #e13441;
    color: #fff;
    font-size: 13.5px;
    margin: 10px;
    font-weight: 500;
    width: 100%
}

.myproduct-buttons {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex
}

button.add-to-cart-home:hover {
    background: #e13441;
    color: #fff;
    opacity: .8
}

.btn-favorite {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: #999;
    transition: color 0.3s
}

button.btn-favorite {
    font-size: 22px;
    margin: 10px;
    margin-left: 0;
    font-weight: 500;
    width: 40px
}

button.btn-favorite:hover,
.btn-favorite.favorited {
    color: #e13441
}

#product-section p.info-harga.potong-harga {
    align-items: center;
    color: #d01927;
    font-size: 14px;
    padding: 5px;
    background: #ffedee;
    display: inline-block
}

.potong-harga span.red-zone {
    font-size: 12px;
    font-weight: 500;
    color: #e13441;
    opacity: .8;
    margin-left: 3px
}

/* === Lightbox core === */
.lb-overlay {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / .9);
    display: none;
    z-index: 1080
}

.lb-ui {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: auto 1fr auto
}

.lb-topbar,
.lb-bottombar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    color: #fff;
    user-select: none
}

.lb-topbar {
    justify-content: flex-end
}

.lb-bottombar {
    justify-content: center
}

.lb-stage {
    position: relative;
    overflow: hidden;
    touch-action: none
}

.lb-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    will-change: transform;
    cursor: grab;
    max-width: none
}

.lb-btn {
    background: rgb(255 255 255 / .12);
    border: 1px solid rgb(255 255 255 / .2);
    padding: .4rem .6rem;
    border-radius: .5rem;
    color: #fff;
    font-size: .95rem
}

.lb-btn:hover {
    background: rgb(255 255 255 / .2)
}

.lb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgb(255 255 255 / .12);
    border: 1px solid rgb(255 255 255 / .2);
    color: #fff;
    padding: .6rem .7rem;
    border-radius: .5rem
}

.lb-arrow:hover {
    background: rgb(255 255 255 / .2)
}

.lb-prev {
    left: .75rem
}

.lb-next {
    right: .75rem
}

@media (max-width:640px) {

    .product-thumbnail iframe,
    .video-thumbnail,
    .video-thumbnail img {
        height: 350px
    }

    .thumbnail-container .ada-video {
        width: auto
    }

    .lb-btn {
        padding: .35rem .5rem
    }
}

.carousel-item img {
    pointer-events: auto;
    cursor: zoom-in
}

.control-filter .available-only label input {
    width: 15px;
    height: 15px;
    margin: 0 5px 0 0
}

.control-filter .available-only label {
    background: #2b2b2b;
    color: #fff;
    padding: 7px 8px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    cursor: pointer
}

.control-filter .btn {
    background: #2b2b2b;
    color: #fff;
    font-size: 15px
}

.control-filter {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    font-size: 15px
}

/* Caro */
.my-newcarousel {
    margin: 0;
    display: flex
}

.my-newcarousel .owl-stage {
    display: flex;
    max-height: 620px
}

.owl-carousel .card {
    border: 0
}

.owl-carousel .card img {
    border-radius: 0
}

.owl-carousel .owl-item img {
    width: 100%;
    height: auto
}

.owl-myslide .owl-item img {
    background: #ddd
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: #e13441 !important
}

.our-clients {
    padding: 20px 0
}

.our-clients .item img {
    max-height: 120px;
    object-fit: contain;
    margin: auto;
    display: block
}

.image-category {
    display: grid;
    padding: 25px 0 5px;
    grid-template-columns: 1fr 1fr 1fr 1fr
}

.image-category img {
    background: #ddd
}

.image-category a {
    display: flex
}

@media screen and (max-width:680px) {
    .owl-carousel .owl-item img {
        height: 50vh;
        object-fit: cover
    }

    .our-clients .owl-carousel .owl-item img {
        height: auto;
        max-height: 80px;
        object-fit: contain;
    }
}

.owl-theme .owl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px
}

/* NEW */
.logo-header img {
    width: 100%;
    max-width: 230px;
    height: auto
}

.logo-header {
    max-width: 230px;
    overflow: hidden;
    position: relative;
    margin: 0
}

.search-category {
    overflow: hidden
}

#box-cart p {
    text-align: center;
    margin: 15px 0
}

#box-cart {
    display: none;
    position: absolute;
    right: 12px;
    top: 45px;
    z-index: 9;
    background: #fff;
    width: 380px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 1px 2px 3px rgb(0 0 0 / 22%);
    font-size: 15px;
    font-weight: 500
}

.empty-box {
    text-align: center
}

.empty-box i {
    font-size: 30px;
    margin: 0;
}

.action-buttons {
    display: flex;
    gap: 15px;
    margin: 15px 0;
    align-items: center
}

.action-buttons .btn {
    width: 100%;
    font-size: 14px;
    background: #e13441;
    border-color: #e13441
}

#color-options {
    display: flex;
    margin: 5px 0;
    gap: 10px
}

.color-option {
    cursor: pointer;
    padding: 5px 20px;
    background: #f9fafb;
    color: #444;
    display: inline-block;
    border-radius: 5px;
    transition: all .2s ease-in-out
}

.color-option:hover,
.color-option.active {
    background: #2b2b2b;
    color: #fff
}

.quantity-selector {
    margin: 10px 0;
    min-width: 145px
}

input#quantity {
    text-align: center;
}

.quantity-selector button {
    text-align: center;
    border: none;
    font-weight: 700
}

.info-product-button {
    margin: 20px auto;
    padding: 0;
    background: #fff;
    border-radius: 16px;
    font-family: 'Rubik', sans-serif;
    color: #333
}

.color-selector label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #000
}

#color-options {
    display: flex;
    gap: 10px;
    margin-bottom: 20px
}

.color-option {
    padding: 7px 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    background: #f9f9f9;
    transition: all 0.3s ease
}

.color-option:hover {
    background: #000;
    color: #fff;
    border-color: #000
}

.color-option.active {
    background: #000;
    color: #fff;
    border-color: #000
}

.qty-btn {
    background: #000;
    color: #fff;
    border: none;
    width: 43px;
    height: 43px;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.3s ease
}

.qty-btn:disabled {
    background: #ccc;
    cursor: not-allowed
}

.qty-btn:hover:not(:disabled) {
    background: #333
}

.qty-input {
    width: 50px;
    text-align: center;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 6px;
    background: #fff
}

img.dark-logo {
    background: #131313;
    width: 100%;
    max-width: 400px;
    padding: 10px;
    border-radius: 20px
}

/* List item */
#cart-items-container h4 {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 600;
    color: #111;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 8px
}

.cart-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f7f7f7
}

.cart-item:last-child {
    border-bottom: none
}

.cart-item-thumb {
    flex: 0 0 60px
}

.cart-item-thumb img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #eee
}

.cart-item-info {
    flex: 1
}

.cart-item-name .product-link {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    text-decoration: none;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s
}

.cart-item-name .product-link:hover {
    color: #e13441
}

.cart-item-details {
    font-size: 12.5px;
    color: #555;
    margin-top: 6px;
    line-height: 1.4
}

.remove-cart-item {
    flex: 0 0 auto;
    cursor: pointer;
    color: #888;
    font-size: 16px;
    margin-left: 6px;
    transition: color 0.2s
}

.remove-cart-item:hover {
    color: #e74c3c
}

.cart-total {
    margin-top: 15px;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.cart-total a.btn {
    padding: 5px 15px;
    font-size: 13.5px;
    font-weight: 500;
    border-radius: 8px;
    background: #111;
    color: #fff;
    text-decoration: none;
    transition: background 0.2s
}

.cart-total a.btn:hover {
    background: #000
}

form.form-data {
    margin: 0
}

/* ===== Cart Page Custom CSS ===== */
.mycart-title {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin: 35px 0;
    color: #000
}

.mycart-empty {
    text-align: center;
    padding: 40px 0;
    color: #666
}

.mycart-btn-link {
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
    color: #111 !important;
    font-weight: 700;
    border: 1px solid #000;
    padding: 10px 20px;
    border-radius: 6px;
    transition: all 0.3s ease
}

.mycart-btn-link:hover {
    background: #000;
    color: #fff !important
}

.mycart-items {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.mycart-item {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 6px rgb(0 0 0 / .05);
    position: relative;
    transition: box-shadow 0.2s ease-in-out;
    margin: 10px 0
}

.mycart-item:hover {
    box-shadow: 0 4px 10px rgb(0 0 0 / .08)
}

.mycart-thumb {
    width: 110px;
    height: 110px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ddd;
    flex-shrink: 0
}

.mycart-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.mycart-info {
    flex: 1;
    margin-left: 15px
}

.mycart-name a {
    font-size: 15px;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    transition: color 0.2s
}

.mycart-name a:hover {
    color: #e13441
}

.mycart-details {
    font-size: 14px;
    color: #666;
    margin-top: 5px
}

.mycart-remove {
    margin-left: 10px
}

.mycart-remove button {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #e53e3e;
    transition: color 0.2s
}

.mycart-remove button:hover {
    color: #c53030
}

.mycart-total {
    margin-top: 25px;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 6px rgb(0 0 0 / .05)
}

.mycart-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px
}

.mycart-btn-checkout {
    display: block;
    width: 100%;
    text-align: center;
    background: #000;
    color: #fff;
    font-weight: 700;
    padding: 12px 0;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s ease
}

.mycart-btn-checkout:hover {
    background: #333
}

@media (max-width:600px) {
    .mycart-item {
        align-items: flex-start
    }

    .mycart-thumb {
        width: 80px;
        height: 80px;
        max-height: 200px
    }

    .mycart-info {
        margin-left: 10px;
        margin-top: 0
    }

    .mycart-remove {
        position: absolute;
        top: 10px;
        right: 10px
    }

    .mycart-name a {
        font-size: 13px
    }
}

.mycart-checkout-wrap {
    text-align: right;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.quantity-control {
    display: inline-flex;
    align-items: center;
    margin: 8px 0
}

.halaman-cart .qty-btn {
    width: 30px;
    height: 30px;
    background: #000;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 700;
    transition: background 0.3s ease
}

.halaman-cart .qty-btn:hover {
    background: #333
}

.halaman-cart .qty-input {
    width: 40px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 0 5px;
    font-size: 16px;
    padding: 2px
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
    background: #2b2b2b !important;
    padding: 10px 30px !important;
    border-radius: 8px !important
}

.coupon-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    max-width: 350px;
    margin: 0;
    border-radius: 8px;
    padding: 0
}

#coupon-code {
    font-size: 13px
}

#check-coupon {
    font-size: 13px;
    white-space: nowrap;
    border-radius: 5px;
    transition: background-color .3s
}

.mycart-total-shadow {
    font-size: 13px;
    font-weight: 600;
    opacity: .8
}

.cart-buttons {
    text-align: right
}

#mycart-items .mycart-name b {
    font-size: 14px;
    font-weight: 600;
    padding: 0 0 5px;
    display: block
}

#mycart-items .mycart-price b {
    color: #e13451
}

/* Footer Styles */
.footer {
    background: #fff;
    color: #333;
    padding: 0;
    border-top: 1px solid #ddd
}

.footer-container {
    display: grid;
    grid-template-columns: 1fr .8fr .5fr 1fr;
    gap: 35px;
    margin: 0 auto;
    padding: 50px 15px
}

.footer-column h3 {
    font-size: 18px;
    margin-bottom: 15px
}

.footer-column p,
.footer-column li,
.footer-column a {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    color: #333;
    text-decoration: none;
    line-height: 1.6;
    margin: 0
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.footer-column ul li {
    margin-bottom: 8px
}

.footer-column ul li a:hover {
    text-decoration: underline
}

.contact-info {
    list-style: none;
    padding: 0;
    margin: 0
}

.contact-info li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px
}

.contact-info i {
    font-size: 16px;
    min-width: 20px;
    color: #333;
    margin-top: 3px
}

.subscribe-form {
    display: flex;
    gap: 10px;
    margin-top: 10px
}

.subscribe-form input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px
}

.subscribe-form button {
    padding: 8px 14px;
    border: 1px solid #e13441;
    background: #e13441;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer
}

.subscribe-form button:hover {
    opacity: .8
}

.footer-bottom {
    font-family: 'Outfit', sans-serif;
    border-top: 1px solid #ddd;
    margin-top: 30px;
    padding: 20px 0
}

.footer-bottom .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap
}

.footer-left p {
    font-size: 14px;
    margin: 0
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 15px
}

.social-icons a {
    color: #333;
    font-size: 18px;
    margin-right: 10px;
    transition: color 0.3s;
    padding: 3px
}

.social-icons a:hover {
    color: #555
}

.download-btn {
    background: #131313;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.3s, border-color 0.3s
}

.download-btn:hover {
    background: #333
}

/* PMT STATUS BOX */
.pmt-section {
    padding: 60px 15px;
    display: flex;
    justify-content: center
}

.pmt-status-box {
    --pmt-accent: #e13441;
    --pmt-accent-dark: #c92735;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgb(20 22 26 / .1);
    overflow: hidden
}

.pmt-status-header {
    background: #14161a;
    color: #fff;
    padding: 40px 30px 32px;
    text-align: center
}

.pmt-status-icon {
    text-align: center;
    margin-bottom: 18px
}

.pmt-icon-circle {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    background: rgb(255 255 255 / .08);
    border: 2px solid rgb(255 255 255 / .15)
}

.pmt-status-success .pmt-icon-circle {
    background: rgb(16 185 129 / .15);
    border-color: rgb(16 185 129 / .35);
    color: #34d399
}

.pmt-status-pending .pmt-icon-circle {
    background: rgb(225 52 65 / .12);
    border-color: rgb(225 52 65 / .3);
    color: var(--pmt-accent)
}

.pmt-status-failed .pmt-icon-circle {
    background: rgb(225 52 65 / .15);
    border-color: rgb(225 52 65 / .35);
    color: var(--pmt-accent)
}

.pmt-status-title {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: .2px;
    margin: 0 0 6px
}

.pmt-status-message {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .3px;
    text-transform: uppercase;
    margin: 0;
    color: rgb(255 255 255 / .6)
}

.pmt-status-success .pmt-status-message {
    color: #34d399
}

.pmt-status-pending .pmt-status-message,
.pmt-status-failed .pmt-status-message {
    color: var(--pmt-accent)
}

.pmt-status-content {
    padding: 32px 30px 30px
}

.pmt-status-description {
    font-size: 14px;
    color: #64748b;
    text-align: center;
    line-height: 1.65;
    margin: 0 0 28px
}

.pmt-transaction-details {
    background: #f8f9fb;
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 26px;
    border: 1px solid #ececef
}

.pmt-detail-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px
}

.pmt-detail-row:last-child {
    margin-bottom: 0
}

.pmt-divider {
    border-top: 1px dashed #dcdde2;
    margin: 16px 0
}

.pmt-detail-label {
    flex: 0 0 auto;
    font-size: 13px;
    color: #7a7f8a;
    font-weight: 500
}

.pmt-btn,
.pmt-detail-value {
    font-size: 14px;
    font-weight: 600
}

.pmt-detail-value {
    color: #14161a;
    text-align: right;
    word-break: break-word
}

.pmt-value-total {
    font-size: 19px;
    font-weight: 700;
    color: var(--pmt-accent-dark)
}

.pmt-action-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.pmt-btn {
    flex: 1;
    padding: 14px 20px;
    border: 2px solid transparent;
    border-radius: 10px;
    font-family: Rubik, sans-serif;
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-align: center;
    text-decoration: none;
    min-width: 120px
}

.pmt-btn-primary {
    background: var(--pmt-accent);
    color: #fff;
    box-shadow: 0 4px 15px rgb(225 52 65 / .3)
}

.pmt-btn-primary:hover {
    background: var(--pmt-accent-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgb(225 52 65 / .4)
}

.pmt-btn-secondary {
    background: transparent;
    color: #14161a;
    border-color: #e2e3e8
}

.pmt-btn-secondary:hover {
    background: #14161a;
    color: #fff;
    border-color: #14161a;
    transform: translateY(-1px)
}

.pmt-loading-animation {
    display: inline-block;
    width: 26px;
    height: 26px;
    border: 3px solid rgb(255 255 255 / .15);
    border-radius: 50%;
    border-top-color: var(--pmt-accent);
    animation: 1s ease-in-out infinite pmt-spin
}

@keyframes pmt-spin {
    to {
        transform: rotate(360deg)
    }
}

@media (max-width:576px) {
    .pmt-section {
        padding: 30px 12px
    }

    .pmt-status-header {
        padding: 32px 20px 26px
    }

    .pmt-status-content {
        padding: 26px 20px 24px
    }

    .pmt-icon-circle {
        width: 64px;
        height: 64px;
        font-size: 24px
    }

    .pmt-status-title {
        font-size: 19px
    }

    .pmt-status-message {
        font-size: 13px
    }

    .pmt-transaction-details {
        padding: 18px
    }

    .pmt-detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px
    }

    .pmt-detail-value {
        text-align: left
    }

    .pmt-action-buttons {
        flex-direction: column
    }

    .pmt-btn {
        min-width: auto
    }

    .pmt-status-description,
    .pmt-detail-value {
        font-size: 13px
    }

    .pmt-detail-label {
        font-size: 12px
    }
}

.payment-content {
    padding: 15px 15px 40px
}

.total-price {
    color: #059669 !important;
    font-size: 18px !important
}

.payment-actions {
    margin-top: 0;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px
}

.pay-btn {
    width: 100%;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: .5px;
    box-shadow: 0 4px 15px rgb(5 150 105 / .3)
}

.pay-btn:hover {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgb(5 150 105 / .4)
}

.pay-btn:active {
    transform: translateY(0)
}

.pay-btn {
    margin: 5px 0
}

.pay-btn svg {
    width: 20px;
    float: left;
    fill: #fff
}

.payment-actions .status-btn {
    background: linear-gradient(135deg, #535353 0%, #3d3d3d 100%);
    box-shadow: 0 4px 15px rgb(90 90 90 / 30%)
}

.call-to-action.full-action form h3 {
    text-align: center;
    padding: 0 0 15px;
    margin: 10px 0;
    border-bottom: 1px solid #eee
}

.call-to-action.full-action form {
    text-align: left;
    width: 100%
}

.detail-value .hero-date {
    margin: 0
}

@media (max-width:480px) {
    .payment-content {
        padding: 24px
    }

    .order-summary {
        padding: 20px
    }

    .payment-header {
        padding: 20px 24px
    }

    .payment-header h3 {
        font-size: 18px
    }

    .payment-actions .pay-btn {
        font-size: 13px !important
    }

    .order-item .item-label {
        font-size: 13px
    }

    .order-item .item-value {
        display: block;
        font-size: 14px
    }

    .order-item {
        display: block
    }

    .pay-btn svg {
        display: none
    }
}

/* Tabs and Review */
.product-tab-wrapper {
    margin-top: 35px;
    border-radius: 8px;
    overflow: hidden
}

.product-tab-links {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #ddd;
    padding: 0;
    margin: 0;
    text-align: center
}

.product-tab-links li {
    padding: 15px 20px;
    cursor: pointer;
    font-size: 13.5px;
    margin: 0;
    text-transform: uppercase;
    border-bottom: 3px solid #fff0;
    transition: all .3s;
    font-weight: 600
}

.product-tab-links li.active {
    border-bottom: 3px solid #222;
    color: #222
}

.product-tab {
    display: none;
    font-family: 'Outfit', sans-serif;
    line-height: 1.8;
    font-size: 15.5px;
    color: #444;
    padding: 20px 0
}

.product-tab.active {
    display: block
}

.product-tab-review-form {
    margin-top: 20px;
    border-radius: 12px;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgb(0 0 0 / .08)
}

.product-tab-review-form .form-group {
    margin-bottom: 15px
}

.product-tab-review-form textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    resize: vertical
}

.btn-submit-review {
    background: #e13441;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: .3s
}

.btn-submit-review:hover {
    background: #e13441
}

.login-reminder {
    margin-top: 15px;
    font-size: 14px
}

.interactive-stars {
    display: flex;
    gap: 5px;
    font-size: 30px;
    cursor: pointer;
    user-select: none
}

.star {
    color: #ccc;
    transition: color .2s
}

.star.hovered,
.star.active {
    color: #f59e0b
}

.product-tab img {
    border-radius: 10px
}

#product-tab-details h2 {
    font-size: 22px
}

/* ============================================================
   DASHBOARD ADMIN — aligned with storefront/auth theme
   (dark #14161a, red accent #e13441, Rubik, soft rounded cards)
   ============================================================ */
.sidebar-header img {
    width: 100px
}

.mobile-header {
    display: none;
    background: #fff;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #ececec;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    box-shadow: 0 2px 12px rgba(20, 22, 26, 0.06)
}

.mobile-toggle {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    color: #14161a;
    text-decoration: none
}

.mobile-toggle i {
    font-size: 1.15rem
}

.mobile-toggle span {
    font-weight: 700;
    font-size: 1rem;
    font-family: 'Rubik', Arial, sans-serif
}

.sidebar-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    background: #fff;
    border-right: 1px solid #ececec;
    z-index: 1000;
    overflow-y: auto;
    transition: transform 0.3s ease;
    box-shadow: 0 0 0 1px rgba(20, 22, 26, 0.02)
}

.sidebar-header {
    background: #fff;
    padding: 18px 0;
    border-bottom: 1px solid #f1f1f1;
    text-align: center
}

.sidebar-header img {
    border-radius: 10px
}

.sidebar-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #14161a;
    text-align: center;
    letter-spacing: -0.025em
}

.nav-menu {
    padding: 10px 10px 90px;
    max-height: calc(100vh - 76px);
    overflow-y: auto
}

.sidebar-nav .nav-item {
    display: block;
    padding: 0.7rem 0.85rem;
    margin-bottom: 2px;
    color: #14161a;
    text-decoration: none;
    transition: var(--transition, all 0.2s ease);
    border-left: 3px solid transparent;
    border-radius: 10px
}

.sidebar-nav .nav-item:hover {
    background-color: #f8f8f8;
    border-left-color: #e13441
}

.sidebar-nav .nav-item.active {
    background-color: rgba(225, 52, 65, 0.07);
    border-left-color: #e13441
}

.sidebar-nav .nav-item.active .nav-title {
    color: #e13441
}

.sidebar-nav .nav-item-content {
    display: flex;
    align-items: center;
    gap: 0.65rem
}

.nav-icon-wrapper {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0
}

.nav-icon {
    font-size: 0.95rem;
    color: #8a8a8a;
    transition: color 0.2s ease
}

.sidebar-nav .nav-item:hover .nav-icon,
.sidebar-nav .nav-item.active .nav-icon {
    color: #e13441
}

.nav-text {
    flex: 1;
    min-width: 0
}

.nav-title {
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
    display: flex;
    align-items: center;
    gap: 6px
}

.nav-subtitle {
    font-size: 0.72rem;
    color: #8a8a8a;
    font-weight: 400
}

.nav-title .badge {
    background: #e13441 !important;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.25em 0.55em
}

/* Sidebar icons are flat/monochrome now — no per-item colored backgrounds */

.main-content {
    margin-left: 280px;
    min-height: 100vh;
    padding: 2rem;
    background-color: #f7f7f8;
    transition: margin-left 0.3s ease
}

.content-header {
    background: #fff;
    padding: 1.75rem 2rem;
    border-radius: 16px;
    margin-bottom: 1.5rem;
    border: 1px solid #f1f1f1;
    box-shadow: 0 2px 10px rgba(20, 22, 26, 0.04)
}

.content-title {
    font-size: 1.7rem;
    font-weight: 700;
    font-family: 'Rubik', Arial, sans-serif;
    color: #14161a;
    letter-spacing: -0.02em;
    margin-bottom: 0
}

.content-subtitle {
    color: #8a8a8a;
    margin: 0;
    font-size: 1rem
}

.content-body {
    background: #fff;
    padding: 1.8rem 2rem;
    border-radius: 16px;
    border: 1px solid #f1f1f1;
    box-shadow: 0 2px 10px rgba(20, 22, 26, 0.04);
    min-height: 400px
}

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(20, 22, 26, 0.5);
    backdrop-filter: blur(2px);
    z-index: 999
}

.welcome-title {
    margin-bottom: 0.5rem;
    color: #14161a;
    font-family: 'Rubik', Arial, sans-serif;
    font-weight: 700
}

.welcome-subtitle {
    color: #8a8a8a;
    font-size: 14.5px;
    line-height: 1.6;
    margin-bottom: 1.5rem
}

.product-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 2rem
}

.stat-card {
    background: #fff;
    padding: 1.5rem;
    border-radius: 16px;
    text-align: center;
    border: 1px solid #ececec;
    text-decoration: none;
    display: block;
    transition: var(--transition, all 0.25s ease)
}

.stat-card:hover {
    border-color: #e13441;
    box-shadow: 0 10px 26px rgba(225, 52, 65, 0.12);
    transform: translateY(-3px)
}

.stat-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .75rem;
    border-radius: 14px;
    font-size: 1.3rem
}

.icon-blue {
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.1)
}

.icon-green {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1)
}

.icon-yellow {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1)
}

.stat-label {
    font-weight: 600;
    color: #8a8a8a;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: .02em
}

.stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    font-family: 'Rubik', Arial, sans-serif;
    color: #14161a;
    margin-top: .25rem
}

@media(max-width:768px) {
    .mobile-header {
        display: block
    }

    .sidebar-nav {
        transform: translateX(-100%);
        top: 0;
        padding-top: 60px;
        height: 100vh
    }

    .sidebar-nav.open {
        transform: translateX(0);
        box-shadow: 0 0 30px rgba(20, 22, 26, 0.25)
    }

    .sidebar-overlay.show {
        display: block
    }

    .main-content {
        margin-top: 60px;
        margin-left: 0;
        padding: 1rem
    }

    .content-header {
        padding: 1.25rem 1.5rem
    }

    .content-title {
        font-size: 1.4rem
    }

    .content-subtitle {
        font-size: 0.9rem
    }

    .content-body {
        padding: 1.25rem
    }

    .nav-icon-wrapper {
        width: 24px;
        height: 24px
    }

    .nav-icon {
        font-size: 1rem
    }
}

@media(max-width:480px) {
    .main-content {
        padding: 0.75rem
    }

    .content-header {
        padding: 1rem 1.1rem;
        border-radius: 12px
    }

    .content-body {
        padding: 1rem;
        border-radius: 12px
    }

    .product-stats {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: .65rem
    }

    .stat-card {
        padding: 1.1rem .75rem
    }

    .sidebar-nav {
        width: 280px
    }
}

.nav-menu::-webkit-scrollbar {
    width: 6px
}

.nav-menu::-webkit-scrollbar-track {
    background: transparent
}

.nav-menu::-webkit-scrollbar-thumb {
    background: #e2e2e2;
    border-radius: 3px
}

.nav-menu::-webkit-scrollbar-thumb:hover {
    background: #cccccc
}

.nav-item-content .nav-title .badge {
    float: right
}

/* Dashboard Content */
.q-page-head {
    padding-bottom: 18px;
    border-bottom: 1px solid #f1f1f1
}

.q-page-head h2.mytitle {
    margin: 0;
    padding: 0
}

.q-page-sub {
    margin: 8px 0 0;
    font-size: .875rem;
    color: #8a8a8a;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px
}

.q-page-count {
    background: #f7f7f8;
    color: #14161a;
    border-radius: 20px;
    padding: 3px 11px;
    font-size: .75rem;
    font-weight: 600
}

.zealous-viewport {
    padding: 25px 0
}

.majestic-header {
    margin-bottom: 2rem
}

.sovereign-title {
    font-size: 2rem;
    font-weight: 600;
    color: #14161a;
    margin-bottom: .5rem
}

.ethereal-subtitle {
    color: #666;
    font-size: 1rem
}

.celestial-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.obsidian-tile {
    background-color: #fff;
    border: 1px solid #f1f1f1;
    border-radius: 14px;
    padding: 1.25rem;
    display: grid;
    grid-template-columns: 130px 1fr auto;
    gap: 1.5rem;
    align-items: center;
    transition: all 0.25s ease;
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 10px rgba(20, 22, 26, 0.03)
}

.obsidian-tile:hover {
    border-color: #f6d3d6;
    box-shadow: 0 10px 26px rgba(225, 52, 65, 0.1);
    transform: translateY(-2px);
    z-index: 2
}

.mystical-avatar-wrap {
    position: relative;
    width: 130px;
    flex-shrink: 0
}

.mystical-avatar {
    display: block;
    width: 130px;
    height: 130px;
    border-radius: 12px;
    object-fit: cover;
    background-color: #f7f7f8;
    border: 1px solid #f1f1f1;
    flex-shrink: 0
}

.q-discount-flag {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #e13441;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: .02em;
    box-shadow: 0 2px 8px rgba(225, 52, 65, 0.3)
}

.luminous-details {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    min-width: 0
}

.radiant-name {
    font-family: 'Rubik', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #14161a;
    margin-bottom: 0;
    line-height: 1.35
}

.radiant-name a {
    color: #14161a;
    text-decoration: none;
    transition: color 0.2s ease
}

.radiant-name a:hover {
    color: #e13441
}

.cosmic-metadata {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem
}

.stellar-attribute {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    color: #666
}

.quantum-icon {
    color: #e13441;
    width: 14px;
    font-size: .75rem
}

.pristine-value {
    font-family: 'Rubik', Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #14161a;
    margin-bottom: .1rem
}

.phantom-original {
    text-decoration: line-through;
    color: #b5b5b5;
    margin-right: .6rem;
    font-size: .8rem;
    font-weight: 500
}

.aurora-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem
}

.nebula-chip {
    background-color: #fdf2f3;
    color: #e13441;
    padding: .3rem .7rem;
    border-radius: 20px;
    font-size: .68rem;
    border: 1px solid #f6d3d6;
    font-weight: 600
}

.divine-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .75rem;
    flex-shrink: 0
}

.q-status-badge {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 4px 10px;
    border-radius: 20px;
    line-height: 1.4
}

.q-status-live {
    background: rgba(46, 125, 50, 0.1);
    color: #2e7d32
}

.q-status-draft {
    background: #f1f1f1;
    color: #8a8a8a
}

.q-action-group {
    display: flex;
    align-items: center;
    gap: 8px
}

/* Action buttons inside the admin product list */
.divine-controls .q-action-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #14161a;
    font-size: .85rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease
}

.divine-controls .q-action-btn:hover {
    background: #fdf2f3;
    border-color: #e13441;
    color: #e13441
}

/* Neutralize the storefront's absolutely-positioned edit badge in this list */
.divine-controls a.edit-product.q-action-edit {
    position: static;
    right: auto;
    top: auto;
    opacity: 1;
    backdrop-filter: none;
    -webkit-backdrop-filter: none
}

.custom-dropdown {
    position: relative
}

.custom-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 9999;
    background: #fff;
    min-width: 190px;
    border: 1px solid #f1f1f1;
    border-radius: 12px;
    padding: 6px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(20, 22, 26, 0.12)
}

.custom-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    background: transparent;
    text-align: left;
    border-radius: 8px;
    font-size: .82rem;
    font-family: 'Outfit', Arial, sans-serif;
    color: #14161a;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease
}

.custom-dropdown-menu .dropdown-item i {
    width: 15px;
    font-size: .8rem;
    color: #8a8a8a;
    transition: color 0.2s ease
}

.custom-dropdown-menu .dropdown-item:hover {
    background: #f7f7f8
}

.custom-dropdown-menu .dropdown-item:hover i {
    color: #e13441
}

.custom-dropdown-menu .dropdown-item.is-danger {
    color: #e13441
}

.custom-dropdown-menu .dropdown-item.is-danger i {
    color: #e13441
}

.custom-dropdown-menu .dropdown-item.is-danger:hover {
    background: #fdf2f3
}

.custom-dropdown-divider {
    height: 1px;
    background: #f1f1f1;
    margin: 5px 4px
}

.transcendent-badge {
    padding: .4rem 1rem;
    border-radius: 25px;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    border: 2px solid
}

.zenith-active {
    background-color: #fdf2f3;
    color: #e13441;
    border-color: #e13441
}

.void-inactive {
    background-color: #f5f5f5;
    color: #666;
    border-color: #ccc
}

.imperial-button {
    background-color: #14161a;
    color: #fff;
    border: 1px solid #14161a;
    border-radius: 8px;
    padding: .6rem 1.2rem;
    font-size: .9rem;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 500
}

.imperial-button:hover {
    background-color: #e13441;
    border-color: #e13441;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px)
}

.melancholy-void {
    text-align: center;
    padding: 4rem 2rem;
    color: #666
}

.solitude-symbol {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #e2e2e2
}

.stock-badge {
    display: inline-block;
    padding: 3px 12px;
    font-size: .72rem;
    font-weight: 600;
    border-radius: 30px;
    background: #eee;
    color: #555;
    transition: all 0.25s ease
}

.stock-low {
    background: rgba(183, 28, 28, 0.12);
    color: #b71c1c
}

.stock-medium {
    background: rgba(251, 192, 45, 0.18);
    color: #8a6300
}

.stock-high {
    background: rgba(46, 125, 50, 0.12);
    color: #2e7d32
}

@media (max-width:992px) {
    .obsidian-tile {
        grid-template-columns: 100px 1fr auto;
        gap: 1rem;
        padding: 1rem
    }

    .mystical-avatar-wrap {
        width: 100px
    }

    .mystical-avatar {
        width: 100px;
        height: 100px
    }
}

@media (max-width:768px) {

    h2.mytitle,
    .zealous-viewport {
        padding: .5rem 0
    }

    .obsidian-tile {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 1rem
    }

    .divine-controls {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: .75rem;
        border-top: 1px solid #f1f1f1;
        width: 100%
    }

    .cosmic-metadata {
        gap: .5rem 1rem
    }

    .stellar-attribute {
        font-size: .8rem
    }

    .mystical-avatar-wrap {
        width: 100%
    }

    .mystical-avatar {
        width: 100%;
        height: 180px;
        border-radius: 10px
    }
}

@media (max-width:480px) {
    .obsidian-tile {
        padding: .85rem
    }

    .mystical-avatar {
        height: 150px
    }

    .radiant-name {
        font-size: .92rem
    }

    .pristine-value {
        font-size: .95rem
    }
}

#swal2-title {
    font-size: 20px;
    font-weight: 700;
    color: #111
}

#swal2-html-container input.swal2-input {
    font-size: 17px !important
}

.product-info code {
    background: #ddd;
    padding: 5px;
    border-radius: 10px
}

/* Additional Toolbar */
.q-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px
}

.q-toolbar-actions,
.q-toolbar-search {
    display: flex;
    align-items: center;
    gap: 8px
}

.q-toolbar-search {
    flex: 1 1 340px;
    justify-content: flex-end
}

.q-btn {
    color: #e13441;
    padding: 0 16px;
    height: 40px;
    font-size: .875rem;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
    line-height: 1;
    font-family: 'Outfit', Arial, sans-serif
}

.q-btn i {
    font-size: .8rem
}

.q-btn-primary {
    background: #e13441;
    border-color: #e13441;
    color: #fff;
    box-shadow: 0 4px 12px rgba(225, 52, 65, 0.22)
}

.q-btn-primary:hover {
    background: #c62a43;
    border-color: #c62a43;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(225, 52, 65, 0.28)
}

.q-btn-secondary {
    background: #fff;
    border-color: #e2e2e2;
    color: #14161a
}

.q-btn-secondary:hover {
    background: #fafafa;
    border-color: #14161a;
    color: #14161a;
    transform: translateY(-1px)
}

.q-btn-search {
    background: #14161a;
    border-color: #14161a;
    color: #fff
}

.q-btn-search:hover {
    background: #2c2f36;
    border-color: #2c2f36;
    color: #fff
}

.q-btn-filter {
    background: #fff;
    color: #14161a;
    border-color: #e2e2e2;
    position: relative
}

.q-btn-filter:hover,
.q-btn-filter.is-open {
    border-color: #e13441;
    color: #e13441;
    background: #fdf2f3
}

.q-filter-count {
    background: #e13441;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px
}

.q-btn-reset {
    background: #f1f1f1;
    border-color: #f1f1f1;
    color: #555
}

.q-btn-reset:hover {
    background: #e5e5e5;
    border-color: #e5e5e5;
    color: #14161a
}

.q-search-form {
    display: flex;
    margin: 0;
    gap: 8px;
    flex: 1 1 auto;
    max-width: 420px
}

.q-search-wrap {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0
}

.q-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #b5b5b5;
    font-size: .8rem;
    pointer-events: none;
    transition: color 0.2s ease
}

.q-search-wrap:focus-within .q-search-icon {
    color: #e13441
}

.q-search {
    flex: 1;
    width: 100%;
    height: 40px;
    padding: 0 14px 0 34px;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    font-size: .875rem;
    color: #14161a;
    background: #fff;
    font-family: 'Outfit', Arial, sans-serif;
    transition: border-color 0.2s ease, box-shadow 0.2s ease
}

.q-search::placeholder {
    color: #b5b5b5
}

.q-search:focus {
    outline: none;
    border-color: #e13441;
    box-shadow: 0 0 0 3px rgba(225, 52, 65, 0.1)
}

.q-filter-box {
    display: none;
    background: #fafafa;
    border: 1px solid #f1f1f1;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 22px;
    animation: fadeIn 0.3s ease
}

.q-filter-form {
    display: flex;
    margin: 0;
    flex-wrap: wrap;
    gap: 14px
}

.q-filter-item {
    flex: 1 1 180px;
    display: flex;
    flex-direction: column
}

.q-filter-item label {
    margin-bottom: 6px;
    font-weight: 600;
    font-size: .75rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #8a8a8a
}

.q-filter-item select,
.q-filter-item input {
    height: 40px;
    padding: 0 12px;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    font-size: .875rem;
    color: #14161a;
    font-family: 'Outfit', Arial, sans-serif;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease
}

.q-filter-item select:focus,
.q-filter-item input:focus {
    outline: none;
    border-color: #e13441;
    box-shadow: 0 0 0 3px rgba(225, 52, 65, 0.1)
}

.q-filter-actions {
    width: 100%;
    display: flex;
    gap: 10px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid #ececec
}

.q-noresult-box {
    font-family: 'Outfit', sans-serif;
    text-align: center;
    padding: 48px 20px;
    border: 1px dashed #e2e2e2;
    border-radius: 14px;
    background: #fafafa;
    color: #333;
    margin: 20px 0;
    animation: fadeIn 0.3s ease
}

.q-noresult-box i {
    font-size: 38px;
    color: #e13441;
    margin-bottom: 12px
}

.q-noresult-box h3 {
    font-family: 'Rubik', Arial, sans-serif;
    font-size: 1.15rem;
    margin: 10px 0;
    font-weight: 600;
    color: #14161a
}

.q-noresult-box p {
    font-size: .875rem;
    color: #888
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media (max-width:768px) {
    .q-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px
    }

    .q-toolbar-actions>.q-btn {
        flex: 1
    }

    .q-toolbar-search {
        flex: 1 1 auto;
        justify-content: stretch
    }

    .q-search-form {
        max-width: 100%
    }

    .q-btn-search span,
    .q-btn-filter span {
        display: none
    }

    .q-btn-search,
    .q-btn-filter {
        padding: 0 14px;
        flex-shrink: 0
    }

    .q-filter-actions .q-btn {
        flex: 1
    }
}

@media (max-width:400px) {
    .q-toolbar-actions {
        flex-direction: column;
        align-items: stretch
    }
}

.ck.ck-powered-by {
    display: none !important
}

.ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content {
    border: none !important
}

.info-tag-color.mb-3,
.product-info .info-name,
.product-reviews,
.cart-item-details,
.cart-total,
.content-body {
    font-family: 'Outfit', Arial, sans-serif
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Rubik', Arial, sans-serif
}

.content-body b,
.content-body strong {
    font-weight: 500
}

blockquote.wp-block-quote p {
    margin: 0
}

blockquote.wp-block-quote {
    border-left: 4px solid #bb2649;
    padding-left: 20px
}

/* Add on Transaction */
.transactions-container {
    display: block
}

.transaction-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eee;
    padding: 15px;
    display: flex;
    flex-direction: column;
    margin: 10px 0;
    justify-content: space-between;
    transition: transform .2s, box-shadow .2s
}

.transaction-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12)
}

.transaction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px
}

.transactions-container .order-id {
    font-size: 13.5px;
    font-weight: 500;
    color: #333
}

.transactions-container .status-badge {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase
}

.transactions-container .status-pending {
    background: #f0ad4e
}

.transactions-container .status-success {
    background: #28a745
}

.transactions-container .status-failed {
    background: #dc3545
}

.transactions-container .customer-info {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #444;
    margin-bottom: 16px
}

.transactions-container .customer-info i {
    margin-right: 8px;
    color: #555
}

.transactions-container .transaction-products {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.transactions-container .product-item {
    display: flex;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px
}

.transactions-container .product-item:last-child {
    border-bottom: none
}

.transactions-container .product-img {
    width: 75px;
    height: 75px;
    object-fit: cover;
    border-radius: 10px;
    background: #fafafa;
    border: 1px solid #eee
}

.transactions-container .product-info {
    flex: 1;
    font-size: 12px;
    margin: 0
}

.transactions-container .product-info p {
    margin: 0
}

.transactions-container .product-title {
    font-weight: 700;
    font-size: 14px;
    color: #333;
    text-decoration: none
}

.transactions-container .product-title:hover {
    text-decoration: underline
}

.transactions-container .product-brand {
    font-size: 12px;
    color: #666
}

.transactions-container .price {
    font-weight: 700;
    color: #222
}

.transactions-container .shipping {
    background: #f9f9f9;
    border-radius: 10px;
    padding: 8px 15px
}

.transactions-container .product-icon {
    width: 30px;
    text-align: center;
    font-size: 20px;
    color: #666
}

.transactions-container .transaction-footer {
    margin-top: 14px;
    text-align: right
}

.transactions-container .total-price {
    font-size: 16px !important;
    font-weight: 700;
    color: #000;
    margin: 0 0 1em
}

.trx-buttons {
    text-align: right
}

.trx-buttons a.btn {
    font-size: 14px
}

a.btn-secondary {
    font-weight: 500;
    padding: 10px 30px
}

.status-badge {
    color: #fff;
    padding: 5px 15px;
    border-radius: 30px;
    font-size: .85rem;
    font-weight: 700;
    display: inline-block;
    text-transform: capitalize
}

.status-0 {
    background-color: #d9534f
}

.status-1 {
    background-color: #f0ad4e
}

.status-2 {
    background-color: #df2a2a
}

.status-3 {
    background-color: #5bc0de
}

.status-4 {
    background-color: #5cb85c
}

.shipping-details {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 10px;
    font-size: 14px;
    color: #374151
}

.shipping-details h5 {
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #111827
}

.shipping-details p {
    margin: 3px 0;
    line-height: 1.4
}

.btn-collapsex {
    font-size: 12px;
    background: #e13441;
    color: #fff;
    font-weight: 500;
    padding: 5px 10px
}

/* Brands */
.brand-listing-title {
    font-size: 2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px
}

.brand-listing-subtitle {
    color: #666;
    font-weight: 400
}

.brand-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px
}

.brand-card-item {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgb(0 0 0 / .08)
}

.brand-card-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgb(0 0 0 / .12)
}

.brand-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px
}

.brand-card-number {
    background: #f8f9fa;
    color: #666;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: .85rem;
    font-weight: 500
}

.brand-card-date {
    color: #999;
    font-size: .8rem;
    font-weight: 400
}

.brand-image-container {
    text-align: center;
    margin-bottom: 20px;
    padding: 15px;
    background: #fafafa;
    border-radius: 8px;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center
}

.brand-card-image {
    max-width: 100%;
    max-height: 100px;
    object-fit: contain;
    border-radius: 6px
}

.brand-no-image {
    color: #999;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 8px
}

.brand-actions-container {
    display: flex;
    gap: 10px;
    justify-content: center
}

.brand-action-btn {
    padding: 8px 15px;
    border: none;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.brand-edit-btn {
    background: #e13441;
    color: #fff
}

.brand-edit-btn:hover {
    background: #c42a40;
    transform: translateY(-1px)
}

.brand-claim-btn {
    background: #198754;
    color: #fff
}

.brand-claim-btn:hover {
    background: #157347;
    color: #fff;
    transform: translateY(-1px)
}

.brand-action-btn.flex-fill {
    justify-content: center
}

.brand-delete-btn {
    background: #e13441;
    color: #fff
}

.brand-delete-btn:hover {
    background: #c42a40;
    transform: translateY(-1px)
}

.brand-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #666
}

.brand-empty-icon {
    font-size: 3rem;
    color: #ddd;
    margin-bottom: 20px
}

form.brand-delete-form {
    margin: 0
}

.custom-dropdown-menu form {
    margin: 0;
}

@media (max-width:768px) {
    .brand-listing-container {
        padding: 15px
    }

    .brand-cards-grid {
        grid-template-columns: 1fr;
        gap: 15px
    }

    .brand-listing-title {
        font-size: 1.5rem
    }

    .brand-card-item {
        padding: 15px
    }

    .brand-actions-container {
        flex-direction: column
    }

    .brand-action-btn {
        width: 100%;
        justify-content: center
    }
}

@media (max-width:480px) {
    .brand-card-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start
    }

    .brand-image-container {
        min-height: 100px;
        padding: 10px
    }

    .brand-card-image {
        max-height: 80px
    }
}

/* Reviews */
.review-box {
    border: 1px solid #e0e0e0;
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
    transition: transform .2s, box-shadow .2s
}

.review-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08)
}

.review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 1rem;
    font-weight: 600
}

.review-stars i {
    color: #f59e0b;
    margin-left: 2px;
    font-size: 1rem
}

.review-content {
    font-size: .95rem;
    margin-bottom: 8px;
    line-height: 1.4;
    color: #333
}

.review-product a {
    color: #131313;
    font-weight: 500;
    text-decoration: none
}

.review-product a:hover {
    text-decoration: underline
}

.admin-reply {
    margin-top: 10px;
    padding: 10px;
    background: #f9f9f9;
    border-left: 4px solid #131313;
    border-radius: 6px;
    font-size: .9rem;
    color: #444
}

.review-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.review-actions form {
    display: inline-block;
    margin: 0;
    width: 100%;
    max-width: 100%
}

.review-actions textarea {
    width: 100%;
    border-radius: 6px;
    resize: none
}

.admin-reply p {
    margin: 0
}

p.review-product {
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 10px;
    margin: 0
}

p.review-product i {
    background: #e13441;
    padding: 10px;
    color: #fff;
    border-radius: 10px;
    margin: 0 5px 0 0
}

p.review-product a {
    color: #131313;
    font-size: 14px
}

.review-stars form i {
    color: #fff;
    margin: 0
}

.review-stars form {
    margin: 0 0 0 5px
}

.review-stars {
    display: flex;
    align-items: center
}

.column-reviews {
    background: #fff;
    padding: 30px 25px;
    border-radius: 20px;
    box-shadow: 0 5px 10px 0 rgb(41 41 41 / 10%)
}

.rating-summary-box {
    background: #fff;
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0 5px 10px 0 rgb(41 41 41 / 10%)
}

.rating-summary-container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 48px;
    max-width: 100%
}

.rating-average {
    text-align: center;
    min-width: 150px
}

.rating-average .stars {
    color: #f59e0b;
    font-size: 24px;
    margin-bottom: 8px;
    letter-spacing: 2px
}

.rating-average .stars i {
    margin-right: 2px
}

.rating-average p:first-of-type {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px
}

.rating-average p:last-of-type {
    font-size: 14px;
    color: #6b7280;
    margin: 0
}

.rating-distribution {
    flex: 1;
    max-width: 400px
}

.rating-distribution .flex {
    display: flex;
    align-items: center;
    margin-bottom: 8px
}

.rating-distribution .stars {
    color: #f59e0b;
    width: 80px;
    font-size: 14px;
    display: flex;
    gap: 1px
}

.rating-distribution .stars i {
    width: 14px;
    height: 14px
}

.progress-bar-container {
    flex: 1;
    background-color: #e5e7eb;
    border-radius: 50px;
    height: 8px;
    margin: 0 12px;
    overflow: hidden
}

.progress-bar {
    height: 8px;
    background: #131313;
    border-radius: 50px;
    transition: width 0.3s ease
}

.rating-distribution span {
    width: 20px;
    font-size: 14px;
    color: #374151;
    text-align: right;
    min-width: 20px
}

.rating-action {
    text-align: center;
    min-width: 150px
}

.btn-post-review {
    background: #bb2649;
    color: #fff;
    padding: 12px 24px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .5px;
    display: inline-block;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer
}

.btn-post-review:hover {
    background: #bb2649;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgb(241 99 99 / 30%)
}

.rating-summary-box .fas.fa-star {
    color: #f59e0b
}

.rating-summary-box .far.fa-star {
    color: #d1d5db
}

.product-reviews {
    display: none
}

@media (max-width:768px) {
    .rating-summary-container {
        flex-direction: column;
        gap: 24px
    }

    .rating-summary-box {
        padding: 20px
    }

    .rating-average,
    .rating-distribution,
    .rating-action {
        width: 100%;
        max-width: none;
        min-width: auto
    }

    .rating-distribution .flex {
        margin-bottom: 12px
    }
}

/* Subscribers */
.sub-container {
    margin: 30px auto
}

.sub-title {
    font-size: 28px;
    margin-bottom: 20px;
    color: #333;
    text-align: center
}

.sub-table-container {
    overflow-x: auto
}

.sub-table {
    width: 100%;
    border-collapse: collapse
}

.sub-table td,
.sub-table th {
    font-size: 15px;
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left
}

.sub-table th {
    background: #f3f4f6;
    font-weight: 700
}

.sub-badge {
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 13px;
    color: #fff
}

.sub-verified {
    background: #16a34a
}

.sub-notverified {
    background: #dc2626
}

.sub-empty {
    text-align: center;
    color: #999
}

.sub-pagination {
    margin-top: 15px;
    display: flex;
    justify-content: center
}

/* --- UI/UX Modern: Admin Articles & Events --- */
.modern-article-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 24px;
}

.modern-article-card {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
}

.modern-article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.08);
}

.modern-article-thumb {
    width: 180px;
    height: 120px;
    border-radius: 14px;
    overflow: hidden;
    margin-right: 24px;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    position: relative;
}

.modern-article-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.modern-article-card:hover .modern-article-thumb img {
    transform: scale(1.05);
}

.modern-article-content {
    flex: 1;
}

.modern-title {
    font-size: 20px;
    font-weight: 700;
    color: #1a1f36;
    text-decoration: none;
    margin-bottom: 8px;
    display: inline-block;
    transition: color 0.2s;
}

.modern-title:hover {
    color: #007bff;
}

.modern-meta {
    font-size: 14px;
    color: #697386;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.modern-meta i {
    color: inherit;
    margin-right: 6px;
}

.modern-actions {
    display: flex;
    gap: 10px;
}

.modern-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
    text-decoration: none;
    background: #f7fafc;
    color: #4a5568;
}

.modern-btn:hover {
    transform: scale(1.1);
}

.modern-btn.view:hover {
    background: #e3f2fd;
    color: #007bff;
}

.modern-btn.edit:hover {
    background: #e8f5e9;
    color: #28a745;
}

.modern-btn.delete:hover {
    background: #ffebee;
    color: #dc3545;
}

.modern-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
    letter-spacing: 0.5px;
}

/* Admin Events Grid */
.modern-event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 28px;
    margin-top: 24px;
}

.modern-event-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.02);
    height: 100%;
}

.modern-event-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.modern-event-thumb {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
}

.modern-event-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.modern-event-card:hover .modern-event-thumb img {
    transform: scale(1.08);
}

.modern-event-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.modern-event-card .modern-actions {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #f0f2f5;
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .modern-article-card {
        flex-direction: column;
        align-items: stretch;
    }

    .modern-article-thumb {
        width: 100%;
        height: 200px;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .modern-actions {
        justify-content: flex-start;
    }
}

/* Coupons */
.coupon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem
}

.coupon-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: .3s
}

.coupon-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    transform: translateY(-3px)
}

.coupon-header {
    text-align: center;
    margin-bottom: .5rem
}

.coupon-code {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333
}

.status-badge {
    padding: .3rem .6rem;
    font-size: .75rem;
    border-radius: 8px;
    font-weight: 700;
    text-transform: uppercase
}

.badge-active {
    background-color: #d4f8e8;
    color: #1b7a3d
}

.badge-inactive {
    background-color: #ffe3e3;
    color: #9e1c1c
}

.coupon-body p {
    margin: .2rem 0;
    font-size: .9rem;
    color: #444
}

.coupon-body .desc {
    color: #694208;
    text-align: center;
    background: #ffeacb;
    font-size: 13px;
    padding: 10px;
    border-radius: 10px;
    margin: 10px 0 0
}

.coupon-footer {
    margin-top: .5rem;
    display: flex;
    justify-content: flex-end
}

/* Blog Article */
.blogpage-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px
}

.blogpage-title {
    font-size: 2.5rem;
    font-weight: 300;
    color: #2c3e50;
    text-align: center;
    margin: 40px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px
}

.blogpage-title i {
    color: #e13441
}

.blogpage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px
}

.blogpage-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0, 0, 0, .08);
    transition: .3s;
    border: 1px solid #f1f2f6
}

.blogpage-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .12)
}

.blogpage-thumbnail {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative
}

.blogpage-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s
}

.blogpage-card:hover .blogpage-thumbnail img {
    transform: scale(1.05)
}

.blogpage-content {
    padding: 25px
}

.blogpage-article-title {
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    text-decoration: none;
    line-height: 1.4;
    display: block;
    margin-bottom: 15px;
    transition: color .3s
}

.blogpage-article-title:hover {
    color: #e13441;
    text-decoration: none
}

.blogpage-date {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #7f8c8d;
    font-size: .85rem;
    margin-bottom: 15px
}

.blogpage-date i {
    color: #95a5a6
}

.blogpage-label {
    display: inline-block;
    background: #ecf0f1;
    color: #34495e;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 500
}

.blogpage-pagination {
    display: flex;
    justify-content: center;
    margin: 50px 0
}

@media (max-width:992px) {
    .blogpage-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px
    }

    .blogpage-title {
        font-size: 2.2rem;
        margin: 30px 0
    }
}

@media (max-width:768px) {
    .blogpage-container {
        padding: 0 15px
    }

    .blogpage-grid {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .blogpage-title {
        font-size: 2rem;
        margin: 25px 0;
        flex-direction: column;
        gap: 10px
    }

    .blogpage-thumbnail {
        height: 180px
    }

    .blogpage-content {
        padding: 20px
    }

    .blogpage-article-title {
        font-size: 1.15rem
    }
}

@media (max-width:480px) {
    .blogpage-title {
        font-size: 1.8rem
    }

    .blogpage-thumbnail {
        height: 160px
    }

    .blogpage-content {
        padding: 15px
    }

    .blogpage-article-title {
        font-size: 1.1rem
    }
}

.showarticle-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    line-height: 1.6;
    color: #333;
    background: #fff
}

.showarticle-header {
    margin-bottom: 30px
}

.showarticle-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 20px;
    line-height: 1.2
}

.showarticle-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 25px;
    align-items: center
}

.showarticle-date {
    color: #666;
    font-size: .95rem;
    display: flex;
    align-items: center;
    gap: 8px
}

.showarticle-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center
}

.showarticle-label {
    background: #f0f0f0;
    color: #555;
    padding: 4px 12px;
    border-radius: 20px;
    text-decoration: none;
    font-size: .85rem;
    font-weight: 500;
    transition: .2s
}

.showarticle-label:hover {
    background: #e0e0e0;
    color: #333;
    transform: translateY(-1px)
}

.showarticle-more-labels {
    background: #ddd;
    color: #666;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 500
}

.showarticle-thumbnail {
    margin-bottom: 30px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .1)
}

.showarticle-thumbnail img {
    width: 100%;
    height: auto;
    display: block
}

.showarticle-content {
    font-family: 'Outfit', Arial, sans-serif;
    font-size: 15.5px;
    line-height: 1.8;
    margin-bottom: 40px
}

.showarticle-content p {
    margin-bottom: 20px
}

.showarticle-content h1,
.showarticle-content h2,
.showarticle-content h3,
.showarticle-content h4 {
    margin-top: 30px;
    margin-bottom: 15px;
    color: #1a1a1a
}

.showarticle-content h1 {
    font-size: 2rem
}

.showarticle-content h2 {
    font-size: 1.7rem
}

.showarticle-content h3 {
    font-size: 1.4rem
}

.showarticle-content h4 {
    font-size: 1.2rem
}

.showarticle-content ol,
.showarticle-content ul {
    margin: 20px 0;
    padding-left: 30px
}

.showarticle-content li {
    margin-bottom: 8px
}

.showarticle-content blockquote {
    border-left: 4px solid #ddd;
    margin: 25px 0;
    padding-left: 20px;
    color: #666;
    font-style: italic
}

.showarticle-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0
}

.showarticle-content table td,
.showarticle-content table th {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left
}

.showarticle-content table th {
    background: #f8f8f8;
    font-weight: 600
}

.showarticle-share,
.show-comments {
    border-top: 1px solid #eee;
    padding-top: 30px;
    margin: 40px 0
}

.showarticle-share-title,
.show-comments h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: #111
}

.showarticle-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.showarticle-share-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    transition: .2s;
    min-width: 120px;
    justify-content: center
}

.showarticle-share-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15)
}

.showarticle-share-facebook {
    background: #1877f2
}

.showarticle-share-twitter {
    background: #000
}

.showarticle-share-linkedin {
    background: #0077b5
}

.showarticle-share-whatsapp {
    background: #009688
}

.showarticle-share-telegram {
    background: #08c
}

@media (max-width:768px) {
    .showarticle-page {
        padding: 15px
    }

    .showarticle-title {
        font-size: 2rem;
        margin-bottom: 15px
    }

    .showarticle-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px
    }

    .showarticle-content {
        font-size: 14px
    }

    .showarticle-content h1 {
        font-size: 1.7rem
    }

    .showarticle-content h2 {
        font-size: 1.5rem
    }

    .showarticle-content h3 {
        font-size: 1.3rem
    }

    .showarticle-content h4 {
        font-size: 1.1rem
    }

    .showarticle-share-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        flex-direction: column
    }

    .showarticle-share-title {
        font-size: 1rem
    }

    .showarticle-share-button {
        font-size: 12px;
        min-width: 100%
    }
}

@media (max-width:480px) {
    .showarticle-page {
        padding: 12px
    }

    .showarticle-title {
        font-size: 1.7rem
    }

    .showarticle-content table,
    .showarticle-date {
        font-size: .9rem
    }

    .showarticle-label {
        font-size: .8rem;
        padding: 3px 10px
    }

    .showarticle-content table td,
    .showarticle-content table th {
        padding: 8px
    }
}

.showevent-page {
    margin: 50px 0
}

.showevent-content img {
    border-radius: 20px;
    border: 2px solid #eee;
    height: 100%;
    object-fit: cover
}

.showevent-content img:hover {
    border-color: #131313
}

/* Ongkir */
button#btn-check-ongkir,
button#btn-save-address {
    font-size: 13px;
    font-weight: 600;
    padding: 7px 15px;
    background: #e13441;
    border-color: #e13441
}

button#btn-save-address {
    background: #131313;
    border-color: #131313
}

#loading-ongkir,
#notif-ongkir {
    font-weight: 600;
    text-align: center;
    margin-top: 15px;
    font-size: 14px;
    padding: 10px;
    border-radius: 10px
}

#ongkir-result h5 {
    font-size: 15px;
    color: #333;
    margin: 15px 0;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px
}

#ongkir-result ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0
}

.ongkir-item {
    padding: 15px 20px;
    margin: 0;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    font-size: 13.5px;
    color: #444
}

.ongkir-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
    border-color: #131313
}

.ongkir-item.selected {
    border: 2px solid #007bff;
    background-color: #eaf4ff;
    font-weight: 700;
    color: #007bff
}

#loading-ongkir {
    color: #bd760d;
    background: #fffce0
}

#notif-ongkir {
    color: #dc3545;
    background: #ffdfdf
}

.ongkir-item.active {
    background: #131313;
    color: #fff;
    font-weight: 600;
    border-color: #131313
}

/* Page Contact */
.contact-item::before,
.icon-wrapper::after {
    transition: transform .3s;
    content: '';
    position: absolute
}

.contact-item,
.email-link,
.icon-wrapper {
    transition: .3s;
    position: relative
}

.contact-container {
    margin: 100px 0
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px
}

.contact-item {
    text-align: center;
    padding: 30px 20px;
    border-radius: 20px;
    background: #fefefe;
    border: 1px solid #eee;
    overflow: hidden;
    animation: .6s forwards fadeInUp
}

.icon-wrapper,
.icon-wrapper::after {
    border-radius: 50%;
    background: #e13441
}

.contact-item::before {
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #e13441;
    transform: scaleX(0)
}

.contact-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, .1);
    border-color: #e13441
}

.contact-item:hover::before {
    transform: scaleX(1)
}

.icon-wrapper {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px
}

.icon-wrapper::after {
    width: 100%;
    height: 100%;
    opacity: .2;
    transform: scale(0)
}

.contact-item:hover .icon-wrapper::after {
    transform: scale(1.3)
}

.contact-item:hover .icon-wrapper {
    transform: scale(1.1);
    background: #131313
}

.icon-wrapper i {
    font-size: 32px;
    color: #fff;
    z-index: 1;
    position: relative
}

.contact-title {
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 20px;
    letter-spacing: -.5px
}

.contact-info {
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
    font-weight: 400
}

.email-link,
.phone-number {
    color: #e13441;
    font-weight: 500
}

.contact-info strong {
    color: #374151;
    font-weight: 500
}

.email-link {
    text-decoration: none
}

.email-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: #e13441;
    transition: width .3s
}

.email-link:hover::after {
    width: 100%
}

.email-link:hover {
    color: #131313
}

.phone-number {
    font-size: 18px;
    letter-spacing: .5px
}

@media (max-width:768px) {
    .contact-container {
        padding: 40px 20px;
        border-radius: 16px
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .contact-item {
        padding: 25px 15px
    }

    .icon-wrapper {
        width: 70px;
        height: 70px;
        margin-bottom: 20px
    }

    .icon-wrapper i {
        font-size: 28px
    }

    .contact-title {
        font-size: 20px;
        margin-bottom: 15px
    }

    .contact-info {
        font-size: 14px
    }
}

@media (max-width:480px) {
    .contact-container {
        padding: 30px 15px
    }

    .contact-title {
        font-size: 15px
    }

    .contact-info {
        font-size: 13px
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.contact-item:first-child {
    animation-delay: .1s
}

.contact-item:nth-child(2) {
    animation-delay: .2s
}

.contact-item:nth-child(3) {
    animation-delay: .3s
}

.contact-item:nth-child(4) {
    animation-delay: .4s
}

/* Comments */
.comment-box {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px
}

.comment-body,
.comment-header {
    margin-bottom: 12px
}

.comment-header {
    display: flex;
    align-items: center
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #dee2e6;
    margin-right: 12px;
    flex-shrink: 0
}

.comment-meta,
.reply-form form {
    display: flex;
    flex-direction: column
}

.comment-meta strong {
    font-size: 14px;
    color: #495057;
    font-weight: 600;
    margin-bottom: 2px
}

.comment-actions a,
.reply-form button {
    font-weight: 500;
    text-transform: uppercase
}

.comment-meta small {
    font-size: 12px;
    color: #6c757d;
    text-transform: uppercase
}

.comment-body p {
    margin: 0;
    color: #495057;
    font-size: 14px;
    line-height: 1.5
}

.comment-actions {
    margin-bottom: 5px
}

.comment-actions a {
    color: #6c757d;
    text-decoration: none;
    font-size: 12px;
    margin-right: 15px;
    transition: color .2s
}

.comment-actions a:hover {
    color: #495057
}

.reply-form {
    border-top: 1px solid #e9ecef;
    padding-top: 16px
}

.reply-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
    margin-bottom: 10px;
    background-color: #fff;
    transition: border-color .2s
}

.reply-form textarea:focus {
    outline: 0;
    border-color: #111
}

.reply-form textarea::placeholder {
    color: #6c757d
}

.reply-form button {
    align-self: flex-start;
    background-color: #131313;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color .2s
}

.reply-form button:hover {
    background-color: #111
}

.reply-form button:active {
    transform: translateY(1px)
}

input[type=hidden] {
    display: none
}

.comment-delete-form button {
    background: #bb2649;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 5px 15px;
    border: none;
    border-radius: 5px
}

.comment-delete-form {
    float: right
}

.comment-form h2,
.comment-form h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #000
}

.comment-form textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
    font-size: 15px;
    font-family: inherit;
    margin-bottom: 10px
}

.comment-form textarea:focus {
    outline: 0;
    border-color: #555
}

.comment-form label {
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px
}

.comment-form input[type=checkbox] {
    transform: scale(1.1);
    cursor: pointer
}

.comment-form button {
    background: #000;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: .2s
}

.comment-form button:hover {
    background: #333
}

.reply-box {
    padding: 15px;
    border-left: 2px solid #121212;
    background: #fff;
    margin: 10px 0;
    border-radius: 5px
}

.leave-reply .desc-reply a {
    color: #444
}

.leave-reply .desc-reply {
    color: #444;
    font-size: 14px
}

.leave-reply h3 {
    margin: 0 0 5px;
    font-weight: 700
}

.leave-reply {
    margin: 15px 0 25px
}

/* Product Tabs */
.specs-table table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background: var(--bg);
    box-shadow: 0 1px 0 rgba(16, 24, 40, .04);
    margin: 20px 0;
    overflow: hidden
}

.specs-table td,
.specs-table th {
    padding: 12px 14px;
    font-size: 14px;
    vertical-align: top;
    text-align: left;
    border-bottom: 1px solid rgba(16, 24, 40, .06);
    word-break: break-word
}

.specs-table td strong,
.specs-table th strong {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
    margin-right: 6px
}

.specs-table tbody tr:first-child td {
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(15, 111, 189, .08)
}

.specs-table tbody tr:nth-child(2n)td {
    background: var(--stripe)
}

.specs-table td {
    white-space: normal
}

.specs-table td[colspan="2"],
.specs-table td[colspan="3"],
.specs-table td[colspan="4"] {
    padding-top: 14px;
    padding-bottom: 14px
}

.specs-table td ol,
.specs-table td ul {
    margin: .25rem 0 0 1rem;
    padding: 0
}

@media(max-width:720px) {
    .specs-table {
        -webkit-overflow-scrolling: touch
    }

    .specs-table table {
        display: block;
        width: 100%
    }

    .specs-table tbody,
    .specs-table tr {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px 12px;
        align-items: start;
        grid-auto-rows: auto;
        padding: 8px 0;
        border-bottom: none
    }

    .specs-table td {
        display: block;
        padding: 10px 8px;
        border: 0;
        background: 0 0;
        min-width: 0
    }

    .specs-table td[colspan="2"],
    .specs-table td[colspan="3"],
    .specs-table td[colspan="4"] {
        grid-column: 1/-1;
        padding-left: 0;
        padding-right: 0
    }

    .specs-table tbody tr+tr {
        border-top: 1px solid rgba(16, 24, 40, .04);
        margin-top: 6px;
        padding-top: 10px
    }

    .specs-table td strong {
        margin-right: 8px;
        display: inline-block
    }

    .specs-table td:last-child {
        color: var(--muted);
        font-size: 13px
    }
}

@media print {
    .specs-table table {
        box-shadow: none;
        font-size: 12px
    }

    .specs-table td {
        padding: 6px
    }
}

@media (max-width:768px) {

    .specs-table table,
    .specs-table thead,
    .specs-table tbody,
    .specs-table tr,
    .specs-table td {
        display: block;
        width: 100%
    }

    .specs-table tr {
        margin-bottom: 1rem;
        border-bottom: 1px solid #ddd
    }

    .specs-table td {
        text-align: left !important;
        padding: 8px 10px;
        border: none !important
    }

    .specs-table td:empty {
        display: none
    }
}

/* WP Editor */
.wp-block-media-text {
    display: grid;
    grid-template-columns: 30% auto;
    gap: 1.5rem;
    align-items: center;
    margin: 2rem 0;
    background: #fff;
    border-radius: 20px
}

.wp-block-media-text__media img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block
}

.wp-block-media-text__content h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: .75rem
}

.wp-block-media-text__content p {
    font-size: 1rem;
    line-height: 1.6;
    color: #444;
    margin: 0
}

@media (max-width:768px) {
    .wp-block-media-text {
        grid-template-columns: 1fr !important;
        text-align: center
    }

    .wp-block-media-text__content {
        margin-top: 1rem
    }
}

.wp-block-buttons {
    display: flex;
    gap: 1rem;
    margin: 2rem 0
}

.wp-block-button__link {
    display: inline-block;
    padding: .65rem 1.5rem;
    background-color: #131313;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 40px;
    transition: .3s
}

.wp-block-button__link:hover {
    background-color: #000;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15)
}

.wp-block-button__link:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1)
}

.wp-block-pullquote {
    margin: 2rem auto;
    padding: 2rem;
    background: #fff;
    border-radius: 20px;
    text-align: center
}

.wp-block-pullquote blockquote {
    margin: 0;
    padding: 0
}

.wp-block-pullquote p {
    font-size: 1.5rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 1rem;
    line-height: 1.5
}

.wp-block-pullquote cite {
    display: block;
    font-size: .9rem;
    font-style: normal;
    font-weight: 500;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px
}

figure.wp-block-media-text__media {
    margin: 0
}

.wp-block-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 2rem 0
}

.wp-block-column {
    display: flex;
    justify-content: center;
    align-items: center
}

.wp-block-image {
    margin: 0;
    width: 100%
}

.wp-block-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    object-fit: cover;
    transition: transform .3s, box-shadow .3s
}

.wp-block-image img:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .15)
}

@media (max-width:768px) {
    .wp-block-columns {
        grid-template-columns: 1fr
    }

    .wp-block-buttons {
        display: block
    }
}

/* Responsive */
@media (max-width:992px) {
    .footer-container {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:600px) {
    .footer-container {
        grid-template-columns: 1fr
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px
    }
}

.order-total .total-price {
    font-size: 18px !important
}

.order-total {
    margin: 20px 0;
    text-align: center;
    font-size: 18px;
    padding: 20px;
    box-shadow: 0 2px 6px rgb(0 0 0 / .05);
    border: 1px solid #e0e0e0;
    border-radius: 15px
}

.halaman-cart {
    margin: 10px auto 50px
}

.form-section {
    margin: 0 0 10px
}

/* MEDIA RESPONSIVE */
@media (max-width:768px) {
    .data-sorting form {
        margin: 20px 0 0;
        font-size: 14px
    }

    .data-sorting {
        display: block;
        text-align: center;
        margin: 10px 0 20px
    }

    #custom-filters {
        display: none
    }

    #product-tab-details h2 {
        font-size: 17px
    }

    .product-tab-wrapper {
        margin-top: 20px
    }

    .q-noresult-box h3 {
        font-size: 16px
    }

    .product-tab p {
        font-size: 14px
    }

    .detail-product-column {
        box-shadow: none;
        padding: 10px
    }

    .title-header.mobile-only {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 5px 0 -5px
    }

    .title-header .shopping-cart a {
        width: 35px
    }

    .sale-feature {
        position: sticky;
        height: 35px;
        z-index: 999;
        top: 0;
        left: 0;
        right: 0;
        font-size: 12px
    }

    #ongkir-result ul {
        grid-template-columns: 100%
    }

    .footer-left p {
        margin: 0 0 15px;
        font-size: 12px
    }

    .footer-bottom .container {
        justify-content: center
    }

    .showevent-content {
        gap: 5px
    }

    .transactions-container .product-title,
    .transactions-container .order-id {
        font-size: 12px
    }

    .cart-coupon {
        margin: 0 0 20px
    }

    .mycart-checkout-wrap {
        display: block
    }

    #cart-form .action-buttons .btn {
        position: fixed;
        z-index: 999;
        bottom: 10px;
        left: 10px;
        right: 10px;
        width: auto
    }

    input#quantity {
        text-align: center
    }

    .product-info h1 {
        font-size: 20px
    }

    .thumbnail-container .ada-video {
        min-width: 80px;
    }

    .thumbnail-newsec {
        overflow-y: hidden;
        overflow-x: scroll;
        display: flex;
        gap: 10px;
        margin: 10px 0
    }

    .col.product-thumbnail {
        display: block;
        padding: 0
    }

    .auto-scrolldown {
        display: none
    }

    .product-thumbnail .carousel,
    .thumbnail-container {
        width: 100%
    }

    .show-product {
        padding: 0;
        margin: 10px 0
    }

    .product-info {
        padding: 0 5px
    }

    button.add-to-cart-home {
        font-size: 12.5px
    }

    #product-section p.info-harga.potong-harga {
        font-size: 12px
    }

    .potong-harga span.red-zone {
        font-size: 11px
    }

    button.add-to-cart-home i {
        display: none
    }

    .responsive-table tbody,
    .responsive-table td,
    .responsive-table th,
    .responsive-table thead,
    .responsive-table tr,
    .welcome-header .container {
        display: block
    }

    .category-menu ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin: 10px 0
    }

    .trx-buttons a.btn {
        display: block;
        margin: 0 0 5px;
        font-size: 13px
    }

    #box-cart {
        position: relative;
        top: 0;
        right: 0;
        width: 100%;
        box-shadow: none;
        margin: 10px 0
    }

    .control-filter,
    .control-filter .btn {
        font-size: 13px
    }

    .thumbnail-newsec {
        max-height: 300px
    }

    .responsive-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap
    }

    .responsive-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px
    }

    .responsive-table tr {
        border: 1px solid #ccc;
        margin: 0 0 10px
    }

    .responsive-table td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 40%;
        text-align: left
    }

    .responsive-table td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 40%;
        padding-right: 10px;
        white-space: nowrap;
        content: attr(data-label);
        font-weight: 700
    }
}

@media screen and (max-width:680px) {
    .image-category {
        grid-template-columns: 1fr 1fr
    }

    .label-date label:before {
        visibility: visible
    }

    #product-section .ribbon span,
    .hijab-info {
        font-size: 10px
    }

    #product-section .ribbon {
        top: -60px;
        right: -45px
    }

    .header-box .col-md-2 {
        margin: 0 auto
    }

    a.whatsapp-button {
        right: 15px;
        bottom: 95px
    }

    .responsive-table th {
        display: none
    }

    #filter-form .info-boxinput button {
        display: block;
        width: 100%
    }

    #filter-form .info-boxinput select,
    .header-box .col {
        margin: 10px 0
    }

    #filter-form .info-boxinput,
    .category-menu ul,
    .footer-menu ul li a,
    .form-data .form-grid-2,
    .form-data .form-grid-3,
    .row.header-box,
    .show-product .row {
        display: block
    }

    .navbar ul.navbar-nav,
    form#logout-form {
        margin: 0
    }

    #dashboard-section,
    .footer-menu ul {
        display: grid;
        grid-template-columns: 1fr 1fr
    }

    #dashboard-section a span,
    #product-section p.card-text,
    .mynote {
        font-size: 12px
    }

    #dashboard-section i {
        font-size: 30px
    }

    #product-section .card-title {
        font-size: 14px
    }

    #product-section .card .card-body {
        padding: 10px
    }

    .category-menu ul li a {
        display: block;
        text-align: left
    }

    .category-menu .mega-box {
        position: relative;
        margin: 5px 3px;
        width: auto;
        background: #2b2b2b;
        display: block
    }

    .category-menu .mega-box .column h3 {
        color: #fff
    }

    .category-menu .mega-box .column ul li a {
        color: #ddd
    }

    #product-section img.card-img-top {
        height: auto
    }

    .info-product-button a.btn {
        position: fixed;
        z-index: 9;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 10px
    }

    h1.mytitle,
    h2.mytitle,
    h3.mytitle {
        font-size: 17px
    }

    ul.pagination {
        padding: 0;
        margin: 0
    }

    .header-box a.button-grey {
        display: block;
        text-align: center
    }
}

.desktop-only {
    display: block
}

.mobile-only {
    display: none
}

@media (max-width:991px) {
    .desktop-only {
        display: none !important
    }

    .mobile-only {
        display: block
    }

    .navbar {
        position: sticky;
        z-index: 999;
        top: 0;
        left: 0;
        right: 0
    }

    .welcome-header {
        position: sticky;
        z-index: 999;
        top: 33px;
        left: 0;
        right: 0;
        padding: 0;
        overflow: hidden
    }

    .navbar {
        padding: 10px 0
    }

    #box-cart.active,
    #search-mobile.active,
    .welcome-header .container {
        display: block
    }

    form.input-search.search-class {
        margin: 0
    }

    nav.navbar .container {
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    nav.navbar .navbar-brand.mobile-only {
        margin: 0 auto
    }

    .search-cart-icons {
        gap: 15px
    }

    .search-cart-icons a {
        font-size: 18px;
        color: #ddd
    }

    #box-cart {
        display: none;
        padding: 10px
    }

    #search-box {
        display: block;
        padding: 10px 0;
        width: 100%
    }

    #search-box input.form-control {
        font-size: 13px;
        padding: 5px 15px
    }
}

.ck-content {
    white-space: pre-wrap !important;
    word-break: normal !important;
}

/* ==== Auth screens: mobile app-like layout ==== */
/* ==== Auth screens v2: mobile bottom-sheet app layout ==== */
@media (max-width:860px) {
    .auth-wrap {
        flex-direction: column;
        min-height: 100vh
    }

    .auth-visual {
        flex: 0 0 auto;
        max-width: 100%;
        min-height: 240px;
        padding: 30px 24px 70px
    }

    .auth-visual-inner {
        padding: 26px 4px 0;
        max-width: 100%
    }

    .auth-brand {
        margin: 0 0 22px
    }

    .auth-visual h2 {
        font-size: 24px;
        margin: 0 0 8px
    }

    .auth-visual p.auth-lead {
        font-size: 13.5px;
        margin: 0
    }

    .auth-points {
        display: none
    }

    .auth-ring.r1 {
        width: 260px;
        height: 260px;
        right: -110px;
        bottom: -140px
    }

    .auth-ring.r2 {
        width: 160px;
        height: 160px;
        right: -40px;
        bottom: -60px
    }

    .auth-ring.r3 {
        display: none
    }

    .auth-panel {
        flex: 1;
        background: #fff;
        border-radius: 26px 26px 0 0;
        margin-top: -34px;
        position: relative;
        z-index: 3;
        box-shadow: 0 -8px 24px rgb(0 0 0 / 6%);
        padding: 34px 22px 40px;
        align-items: flex-start
    }

    .auth-panel-inner {
        max-width: 100%
    }

    .auth-panel-head h1 {
        font-size: 22px
    }

    button.btn.auth-submit {
        padding: 15px;
        font-size: 14px
    }
}

/* Web Settings - Manual Payment Section */
.section-heading {
    padding: 14px 18px;
    background: linear-gradient(135deg, rgb(225 52 65 / 8%), rgb(225 52 65 / 2%));
    border-left: 4px solid #e13441;
    border-radius: 8px;
}

.section-heading-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    font-weight: 600;
}

.section-heading-title i {
    background: #e13441;
    color: #fff;
    padding: 7px;
    border-radius: 7px;
    font-size: .85em;
}

/* Web Settings - Layout Kategori */
.settings-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 15px 0 0;
}

.settings-nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: #444;
    text-decoration: none;
    transition: all .2s ease;
}

.settings-nav a:hover {
    background: #e13441;
    border-color: #e13441;
    color: #fff;
}

.settings-nav a i {
    font-size: .9em;
    opacity: .8;
}

.settings-form {
    padding: 0;
    background: transparent;
}

.settings-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 22px;
    margin-bottom: 18px;
    scroll-margin-top: 90px;
}

.settings-card .section-heading {
    padding: 0 0 14px;
    background: none;
    border-left: none;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
}

.settings-card .upload-item {
    padding: 14px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
}

.media-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
}

.settings-switch {
    padding: 10px 12px 10px 45px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
}

.code-area {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
}

.settings-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    padding: 14px 18px;
    margin-top: 18px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 -4px 16px rgb(0 0 0 / 5%);
    z-index: 5;
}

@media (max-width: 768px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }

    .settings-card {
        padding: 16px;
    }
}

.qris-preview {
    display: inline-flex;
    padding: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgb(0 0 0 / 6%);
}

.qris-preview-img {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    border-radius: 6px;
    object-fit: contain;
}

/* =========================================================
   TRANSACTION CARD v2 (.trxc-*) — dipakai di /transactions
   dan /admin/transaction. Mobile-first & responsive.
   ========================================================= */
.trxc-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.trxc-card {
    background: #fff;
    border: 1px solid #ececf1;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgb(16 24 40 / 5%);
    transition: box-shadow .2s ease, border-color .2s ease;
}

.trxc-card:hover {
    border-color: #e0e0ea;
    box-shadow: 0 10px 28px rgb(16 24 40 / 8%);
}

/* --- Header --- */
.trxc-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(180deg, #fbfbfd 0%, #f7f7fa 100%);
    border-bottom: 1px solid #f0f0f4;
}

.trxc-head-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    min-width: 0;
}

.trxc-head-side {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.trxc-order {
    font-weight: 800;
    font-size: 14px;
    color: #14161a;
    letter-spacing: .2px;
    word-break: break-all;
}

.trxc-date {
    font-size: 12px;
    color: #8a8a96;
}

.trxc-date i {
    margin-right: 4px;
}

.trxc-chip {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .4px;
    padding: 4px 8px;
    border-radius: 6px;
    background: #eef1f6;
    color: #4a5568;
    white-space: nowrap;
}

.trxc-status {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 5px 10px;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* status: 0 menunggu bayar, 5 menunggu konfirmasi, 1 diproses,
   2 ditolak, 3 pengiriman, 4 selesai */
.trxc-status-0 {
    background: #fff4e5;
    color: #b45309;
    border-color: #fde3bd;
}

.trxc-status-5 {
    background: #fff8db;
    color: #8a6d0b;
    border-color: #f6e7a8;
}

.trxc-status-1 {
    background: #e7f0ff;
    color: #1d4ed8;
    border-color: #cfe0ff;
}

.trxc-status-2 {
    background: #ffe9e9;
    color: #b91c1c;
    border-color: #ffd0d0;
}

.trxc-status-3 {
    background: #e6f6fb;
    color: #0e7490;
    border-color: #c9ecf6;
}

.trxc-status-4 {
    background: #e7f8ee;
    color: #15803d;
    border-color: #c9f0d8;
}

/* --- Meta bar --- */
.trxc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 10px 16px;
    border-bottom: 1px dashed #eeeef3;
    background: #fff;
}

.trxc-meta-item {
    font-size: 12px;
    color: #5b5b6b;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.trxc-meta-item i {
    color: #9a9aa8;
    font-size: 11px;
}

.trxc-meta-item code {
    background: #f4f4f8;
    padding: 1px 5px;
    border-radius: 4px;
    color: #14161a;
    font-size: 11px;
}

.trxc-meta-promo {
    color: #92600a;
    font-weight: 600;
}

.trxc-meta-promo i {
    color: #e0a106;
}

/* --- Items --- */
.trxc-items {
    padding: 6px 16px;
}

.trxc-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f4f4f8;
}

.trxc-item:last-child {
    border-bottom: none;
}

.trxc-item-thumb img,
.trxc-item-noimg {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    background: #f7f7fa;
    border: 1px solid #eeeef3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c2c2ce;
}

.trxc-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.trxc-item-name {
    font-size: 14px;
    font-weight: 700;
    color: #14161a;
    text-decoration: none;
    line-height: 1.35;
    display: block;
}

a.trxc-item-name:hover {
    color: #e13441;
    text-decoration: underline;
}

.trxc-item-name-off {
    color: #9a9aa8;
    font-style: italic;
}

.trxc-variants {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.trxc-variant {
    font-size: 11px;
    font-weight: 600;
    color: #3f4a5a;
    background: #f1f4f9;
    border: 1px solid #e4e9f2;
    border-radius: 6px;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.trxc-variant i {
    font-size: 9px;
    color: #8b97a8;
}

.trxc-item-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
}

.trxc-qty {
    font-size: 12px;
    color: #6b6b7b;
}

.trxc-item-price strong {
    font-size: 13.5px;
    color: #14161a;
}

/* --- Extras (ongkir / kupon) --- */
.trxc-extras {
    margin: 0 16px 4px;
    background: #fafafc;
    border: 1px solid #f0f0f4;
    border-radius: 10px;
    padding: 8px 12px;
}

.trxc-extra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    font-size: 12.5px;
    color: #4a4a5a;
}

.trxc-extra-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    flex-wrap: wrap;
}

.trxc-extra-label i {
    color: #9a9aa8;
}

.trxc-extra-label small {
    color: #8a8a96;
}

.trxc-extra-label code {
    background: #eff0f4;
    padding: 1px 5px;
    border-radius: 4px;
    color: #14161a;
}

.trxc-extra-price {
    font-weight: 700;
    color: #14161a;
    white-space: nowrap;
}

/* --- Footer --- */
.trxc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px solid #f0f0f4;
    background: #fcfcfe;
}

.trxc-total {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.trxc-total span {
    font-size: 11.5px;
    color: #8a8a96;
}

.trxc-total strong {
    font-size: 18px;
    color: #14161a;
    font-weight: 800;
}

.trxc-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.trxc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    transition: all .18s ease;
    white-space: nowrap;
}

.trxc-btn i {
    font-size: 12px;
}

.trxc-btn-primary {
    background: #e13441;
    color: #fff;
}

.trxc-btn-primary:hover {
    background: #c72a32;
    color: #fff;
}

.trxc-btn-success {
    background: #198754;
    color: #fff;
}

.trxc-btn-success:hover {
    background: #146c44;
    color: #fff;
}

.trxc-btn-outline {
    background: #fff;
    border-color: #dcdce6;
    color: #14161a;
}

.trxc-btn-outline:hover {
    border-color: #14161a;
    color: #14161a;
}

.trxc-btn-ghost {
    background: transparent;
    border-color: #e6e6ee;
    color: #5b5b6b;
}

.trxc-btn-ghost:hover {
    background: #f4f4f8;
    color: #14161a;
}

.trxc-btn-sm {
    font-size: 12px;
    padding: 7px 12px;
    border-radius: 8px;
}

/* --- Ulasan produk di kartu transaksi --- */
.trxc-review {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.trxc-review-done {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #198754;
}

.trxc-review-stars {
    color: #f5a623;
    letter-spacing: 1px;
}

.trxc-review-stars i {
    font-size: 11px;
}

/* --- Modal ulasan --- */
.trxc-review-modal {
    border-radius: 16px;
    border: none;
}

.trxc-review-product {
    font-weight: 700;
    color: #14161a;
    margin-bottom: 14px;
}

.trxc-review-input-stars {
    display: flex;
    gap: 6px;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

.trxc-review-input-stars .star {
    color: #dcdce6;
    transition: color .15s ease, transform .15s ease;
}

.trxc-review-input-stars .star:hover {
    transform: scale(1.12);
}

.trxc-review-input-stars .star.active {
    color: #f5a623;
}

/* --- Switch sensor nama pada form ulasan --- */
.review-anon {
    background: #f9fafb;
    border: 1px solid #ececf1;
    border-radius: 10px;
    padding: 10px 12px;
}

.review-anon .form-check-input {
    cursor: pointer;
}

.review-anon .form-check-input:checked {
    background-color: #e13441;
    border-color: #e13441;
}

.review-anon .form-check-input:focus {
    border-color: #e13441;
    box-shadow: 0 0 0 .2rem rgb(225 52 65 / 20%);
}

.review-anon .form-check-label {
    cursor: pointer;
}

/* ============ DASHBOARD ADMIN REVIEWS (adr-) ============ */
.adr-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.adr-stat {
    background: #fff;
    border: 1px solid #ececf1;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.adr-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: #8a8a99;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.adr-stat-value {
    font-size: 24px;
    font-weight: 800;
    color: #14161a;
    line-height: 1;
}

.adr-stat-star {
    color: #f59e0b;
    font-size: 16px;
    margin-left: 2px;
}

.adr-stat-warn .adr-stat-value {
    color: #e13441;
}

/* --- Toolbar --- */
.adr-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.adr-toolbar .q-search-wrap {
    flex: 1 1 240px;
}

.adr-select {
    height: 42px;
    padding: 0 12px;
    border: 1px solid #dcdce6;
    border-radius: 10px;
    background: #fff;
    color: #14161a;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.adr-select:focus {
    outline: none;
    border-color: #14161a;
}

/* --- Kartu review --- */
.adr-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.adr-card {
    background: #fff;
    border: 1px solid #ececf1;
    border-radius: 14px;
    padding: 16px 18px;
    transition: box-shadow .18s ease, border-color .18s ease;
}

.adr-card:hover {
    border-color: #dcdce6;
    box-shadow: 0 6px 18px rgb(20 22 26 / 7%);
}

.adr-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.adr-author {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.adr-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    background: rgb(225 52 65 / 10%);
    color: #e13441;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.adr-author-meta {
    min-width: 0;
}

.adr-name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #14161a;
    line-height: 1.3;
}

.adr-date {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #8a8a99;
}

.adr-badge-anon {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 20px;
    background: #f4f4f8;
    border: 1px solid #e6e6ee;
    color: #5b5b6b;
    font-size: 11px;
    font-weight: 600;
    cursor: help;
}

.adr-head-side {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.adr-rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 13px;
    color: #f59e0b;
}

.adr-rating b {
    margin-left: 5px;
    color: #14161a;
    font-size: 13px;
}

.adr-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.adr-chip-ok {
    background: rgb(25 135 84 / 10%);
    color: #198754;
}

.adr-chip-todo {
    background: rgb(225 52 65 / 10%);
    color: #e13441;
}

.adr-content {
    font-size: 14px;
    line-height: 1.6;
    color: #3a3a45;
    margin: 0 0 12px;
    white-space: pre-line;
}

/* --- Produk --- */
.adr-product {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #ececf1;
    border-radius: 10px;
    background: #f9fafb;
}

.adr-product-thumb {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    object-fit: cover;
    border-radius: 8px;
    background: #ececf1;
}

.adr-product-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b5b5c0;
}

.adr-product-name {
    font-size: 13px;
    font-weight: 600;
    color: #14161a;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.adr-product-name i {
    font-size: 10px;
    color: #8a8a99;
}

.adr-product-name:hover {
    color: #e13441;
}

.adr-product-off {
    color: #8a8a99;
    font-style: italic;
}

/* --- Balasan admin --- */
.adr-reply {
    margin-top: 12px;
    padding: 10px 12px;
    background: #f9fafb;
    border-left: 3px solid #14161a;
    border-radius: 8px;
}

.adr-reply-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #14161a;
}

.adr-reply p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: #5b5b6b;
}

/* --- Footer aksi --- */
.adr-foot {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f2f2f6;
    flex-wrap: wrap;
}

.adr-reply-form {
    flex: 1 1 320px;
    margin: 0;
}

.adr-reply-form textarea {
    width: 100%;
    border: 1px solid #dcdce6;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 8px;
}

.adr-reply-form textarea:focus {
    outline: none;
    border-color: #14161a;
}

.adr-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.adr-delete-form {
    margin: 0;
}

@media (max-width: 640px) {
    .adr-head-side {
        width: 100%;
        justify-content: space-between;
    }

    .adr-foot {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ============ FORM EDIT REVIEW ADMIN (adre-) ============ */
.adre-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.adre-topbar .mytitle {
    margin: 0;
}

.adre-card {
    background: #fff;
    border: 1px solid #ececf1;
    border-radius: 14px;
    padding: 24px;
    max-width: 720px;
}

.adre-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.adre-field {
    margin-bottom: 18px;
}

.adre-field:last-of-type {
    margin-bottom: 0;
}

.adre-field label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #14161a;
    margin-bottom: 6px;
}

.adre-input {
    width: 100%;
    border: 1px solid #dcdce6;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: #14161a;
    background: #fff;
}

.adre-input:focus {
    outline: none;
    border-color: #14161a;
}

textarea.adre-input {
    resize: vertical;
}

.adre-rating-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.adre-stars {
    font-size: 26px;
}

.adre-rating-value {
    font-size: 14px;
    font-weight: 700;
    color: #5b5b6b;
}

.adre-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #f2f2f6;
}

/* ============ FORM EDIT REVIEW USER (urev-) ============ */
.urev-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.urev-card {
    background: #fff;
    border: 1px solid #ececf1;
    border-radius: 14px;
    padding: 24px;
    max-width: 640px;
}

.urev-product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 22px;
    border: 1px solid #ececf1;
    border-radius: 12px;
    background: #f9fafb;
}

.urev-product-thumb {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    object-fit: cover;
    border-radius: 10px;
    background: #ececf1;
}

.urev-product-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #8a8a99;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.urev-product-name {
    display: block;
    font-size: 14px;
    color: #14161a;
    margin-top: 2px;
}

.urev-field {
    margin-bottom: 20px;
}

.urev-field:last-of-type {
    margin-bottom: 0;
}

.urev-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #14161a;
    margin-bottom: 8px;
}

.urev-stars {
    font-size: 30px;
}

.urev-input {
    width: 100%;
    border: 1px solid #dcdce6;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: #14161a;
    background: #fff;
    resize: vertical;
}

.urev-input:focus {
    outline: none;
    border-color: #14161a;
}

.urev-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #f2f2f6;
}

/* --- Detail pengiriman --- */
.trxc-ship {
    margin: 0 16px 16px;
    background: #f9fafb;
    border: 1px solid #ececf1;
    border-radius: 12px;
    padding: 14px 16px;
}

.trxc-ship h5 {
    font-size: 13px;
    font-weight: 700;
    color: #14161a;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.trxc-ship h5 i {
    color: #e13441;
}

.trxc-ship-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 18px;
}

.trxc-ship-grid>div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.trxc-ship-grid span {
    font-size: 11px;
    color: #8a8a96;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.trxc-ship-grid b {
    font-size: 13px;
    color: #2c2c38;
    font-weight: 600;
    word-break: break-word;
}

.trxc-ship-wide {
    grid-column: 1 / -1;
}

/* --- Tabs status (halaman user) --- */
.trxc-tabs {
    border-bottom: 2px solid #f1f1f1;
    gap: 14px;
    padding: 0 0 0 2px;
    margin: 0 0 1.5rem;
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.trxc-tabs::-webkit-scrollbar {
    display: none;
}

.trxc-tabs .nav-item {
    margin: 0;
    padding: 0;
}

.trxc-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: #8a8a8a;
    font-weight: 600;
    font-size: .88rem;
    padding: 12px 4px;
    border-radius: 0;
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
    margin-bottom: -2px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all .2s ease;
}

.trxc-tabs .nav-link:hover {
    color: #14161a;
}

.trxc-tabs .nav-link.active {
    color: #e13441;
    border-bottom-color: #e13441;
}

/* --- Mobile --- */
@media (max-width: 767px) {
    .trxc-list {
        gap: 12px;
    }

    .trxc-card {
        border-radius: 14px;
    }

    .trxc-head {
        padding: 12px 12px;
    }

    .trxc-order {
        font-size: 13px;
    }

    .trxc-head-side {
        width: 100%;
        justify-content: flex-start;
    }

    .trxc-meta,
    .trxc-items {
        padding-left: 12px;
        padding-right: 12px;
    }

    .trxc-extras,
    .trxc-ship {
        margin-left: 12px;
        margin-right: 12px;
    }

    .trxc-item-thumb img,
    .trxc-item-noimg {
        width: 56px;
        height: 56px;
    }

    .trxc-item-name {
        font-size: 13px;
    }

    .trxc-foot {
        padding: 12px;
        flex-direction: column;
        align-items: stretch;
    }

    .trxc-actions {
        justify-content: stretch;
    }

    .trxc-btn {
        flex: 1 1 auto;
        padding: 11px 12px;
    }

    .trxc-ship-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 400px) {
    .trxc-item-price {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .trxc-actions {
        flex-direction: column;
    }
}