/* ============================================================
   GOLDVERS native.css — lean, framework-free replacement for the
   Bootstrap 4 + StrikingDash utility/grid/component classes the
   storefront views use. Replaces bootstrap.css + style.css so the
   theme can no longer fight the Goldvers design. No jQuery, no BS.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* ---------- grid ---------- */
.container-fluid { width: 100%; margin: 0 auto; padding: 0 15px; }
.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.row > [class*="col-"], .row > [class*="cus-"] { padding: 0 15px; }
[class*="col-"] { position: relative; width: 100%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 576px) {
    .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .col-sm-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 768px) {
    .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
    .col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
    .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
    .d-md-none { display: none !important; }
}
@media (min-width: 992px) {
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
    .col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
    .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 1200px) {
    .col-xl-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
    .col-xl-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ---------- display / flex ---------- */
.d-flex { display: flex !important; }
.d-block { display: block !important; }
.d-none { display: none !important; }
.d-inline-block { display: inline-block !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-column { flex-direction: column !important; }
.flex-1 { flex: 1 !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-self-center { align-self: center !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-uppercase { text-transform: uppercase !important; }
.float-right { float: right !important; }
.float-left { float: left !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.mh-100 { min-height: 100%; }

/* ---------- spacing (bootstrap 0-5 rem + strikingdash px) ---------- */
.m-0{margin:0!important}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}
.p-0{padding:0!important}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.px-0{padding-left:0!important;padding-right:0!important}
.mt-1{margin-top:.25rem!important}.mb-1{margin-bottom:.25rem!important}.pt-1{padding-top:.25rem!important}.pb-1{padding-bottom:.25rem!important}
.mt-2{margin-top:.5rem!important}.mb-2{margin-bottom:.5rem!important}.p-2{padding:.5rem!important}.pt-2{padding-top:.5rem!important}.pb-2{padding-bottom:.5rem!important}.mt-3{margin-top:1rem!important}.mb-3{margin-bottom:1rem!important}.mr-3{margin-right:1rem!important}.pt-3{padding-top:1rem!important}.pb-3{padding-bottom:1rem!important}.px-3{padding-left:1rem!important;padding-right:1rem!important}
.mt-4{margin-top:1.5rem!important}.mb-4{margin-bottom:1.5rem!important}.pt-4{padding-top:1.5rem!important}.pb-4{padding-bottom:1.5rem!important}
.mt-5{margin-top:3rem!important}.mb-5{margin-bottom:3rem!important}
/* px scale */
.m-10{margin:10px!important}.mt-10{margin-top:10px!important}.mb-10{margin-bottom:10px!important}
.mt-15{margin-top:15px!important}.mb-15{margin-bottom:15px!important}.p-15{padding:15px!important}.pt-15{padding-top:15px!important}.pb-15{padding-bottom:15px!important}.px-15{padding-left:15px!important;padding-right:15px!important}
.mt-20{margin-top:20px!important}.mb-20{margin-bottom:20px!important}.pt-20{padding-top:20px!important}.pb-20{padding-bottom:20px!important}.px-20{padding-left:20px!important;padding-right:20px!important}.px-10{padding-left:10px!important;padding-right:10px!important}
.mt-25{margin-top:25px!important}.mb-25{margin-bottom:25px!important}.pt-25{padding-top:25px!important}.pb-25{padding-bottom:25px!important}.px-25{padding-left:25px!important;padding-right:25px!important}
.mt-30{margin-top:30px!important}.mb-30{margin-bottom:30px!important}.px-30{padding-left:30px!important;padding-right:30px!important}
.mt-40{margin-top:40px!important}.mb-40{margin-bottom:40px!important}
/* responsive spacing used in cart/checkout */
@media (min-width: 576px) {
    .p-sm-25{padding:25px!important}.p-sm-30{padding:30px!important}.p-sm-40{padding:40px!important}
    .px-sm-25{padding-left:25px!important;padding-right:25px!important}.px-sm-30{padding-left:30px!important;padding-right:30px!important}
    .py-sm-30{padding-top:30px!important;padding-bottom:30px!important}.pt-sm-30{padding-top:30px!important}.pt-sm-25{padding-top:25px!important}
    .pb-sm-0{padding-bottom:0!important}.mb-sm-0{margin-bottom:0!important}.pl-sm-30{padding-left:30px!important}.pr-sm-30{padding-right:30px!important}
    .my-sm-0{margin-top:0!important;margin-bottom:0!important}
}
@media (min-width: 992px) { .mt-lg-0{margin-top:0!important}.mt-lg-30{margin-top:30px!important}.mt-lg-15{margin-top:15px!important} }

/* ---------- type / color utilities ---------- */
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fs-13 { font-size: 13px !important; }
.fs-14 { font-size: 14px !important; }
.color-gray { color: var(--ink-2) !important; }
.color-dark { color: var(--ink) !important; }
.color-info { color: var(--gold-deep) !important; }
.color-white { color: #fff !important; }
.small, small { font-size: 85%; }

/* ---------- surfaces ---------- */
.bg-white { background: #fff !important; }
.bg-normal { background: var(--surface-2) !important; }
.bg-transparent { background: transparent !important; }
.bg-shadow, .global-shadow { box-shadow: var(--shadow-sm) !important; }
.bg-opacity-primary { background: var(--gold-wash) !important; }
.radius-xl { border-radius: var(--r) !important; }
.border { border: 1px solid var(--line) !important; }
.border-0 { border: 0 !important; }
.border-bottom { border-bottom: 1px solid var(--line) !important; }
.border-bottom-0 { border-bottom: 0 !important; }
.shadow-none { box-shadow: none !important; }
.overflow-hidden { overflow: hidden; }

/* ---------- card (Bootstrap-style, distinct from the product .card in core) ---------- */
.card-header { padding: 18px 24px; }
.card-header h5, .card-header h6 { margin: 0; font-family: var(--serif); font-weight: 600; }
.card-footer { padding: 18px 24px; }

/* ---------- forms ---------- */
.form-group { margin-bottom: 16px; }
.form-group label, .control-label { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.form-control {
    display: block; width: 100%; border: 1px solid var(--line-2); border-radius: var(--r-sm);
    padding: 11px 14px; font-size: 14px; font-family: inherit; color: var(--ink); background: #fff;
    outline: none; transition: border-color .2s, box-shadow .2s;
}
.form-control:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-wash); }
.form-control[readonly], .form-control:disabled { background: var(--surface-2); color: var(--ink-2); }
textarea.form-control { resize: vertical; }
.invalid-feedback, .valid-feedback { display: block; font-size: 12px; color: var(--sale); margin-top: 5px; }
.has-error .form-control { border-color: var(--sale); }
.custom-checkbox { position: relative; display: flex; align-items: center; gap: 9px; }
.custom-checkbox input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--gold); flex: none; }
.custom-checkbox label { margin: 0; text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
/* select wrapper */
.atbd-select { position: relative; }
.atbd-select select, select.form-control {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B847C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}

/* ---------- alerts ---------- */
.alert { padding: 14px 18px; border-radius: var(--r-sm); font-size: 14px; border: 1px solid transparent; }
.alert-info { background: #EFF4FB; border-color: #DCE8F7; color: #2A5DAA; }
.alert-warning { background: #FFF6E9; border-color: #F6E4C4; color: #B5760E; }
.alert-danger { background: #FBEBE8; border-color: #F3D6D0; color: var(--sale); }
.alert-success { background: #E9F5EE; border-color: #CFE9DA; color: #2E7D4F; }
.alert-heading { font-weight: 600; margin-bottom: 4px; }

/* ---------- avatar ---------- */
.avatar { display: inline-grid; place-items: center; font-weight: 600; }
.avatar-md { width: 44px; height: 44px; font-size: 16px; }
.avatar-sm { width: 34px; height: 34px; font-size: 13px; }
.avatar-circle { border-radius: 50%; }
.avatar-square { border-radius: 9px; }
.avatar-primary { background: var(--gold); color: #fff; }

/* ---------- tables ---------- */
.table-responsive { width: 100%; overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; }
table.table th, table.table td { padding: 12px 10px; text-align: left; }
table.table-borderless th, table.table-borderless td { border: 0; }

/* ---------- tabs (auth modal + account) ---------- */
.nav-tab { display: flex; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.nav-tab .nav-item { list-style: none; }
.nav-tab .nav-link {
    display: block; padding: 16px 22px; font-size: 14px; font-weight: 500; color: var(--ink-3);
    cursor: pointer; position: relative; background: none; border: none;
}
.nav-tab .nav-link.active { color: var(--ink); }
.nav-tab .nav-link.active::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: -1px; height: 2px; background: var(--gold); }
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active, .tab-content > .tab-pane.show.active { display: block; }
.tab-pane.fade { opacity: 0; transition: opacity .2s; }
.tab-pane.fade.show { opacity: 1; }

/* ---------- modal (native — mirrors the Goldvers .modal-scrim design) ----------
   NOTE: goldvers-core.css also defines `.modal` (the design's CARD). This overlay
   reuses the same class name, so reset the card props core would otherwise bleed in. */
.modal { display: none; position: fixed; inset: 0; z-index: 1050; overflow-y: auto; padding: 48px 20px;
    width: auto; max-width: none; margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; animation: none; }
.modal.show { display: flex; align-items: flex-start; justify-content: center; }
.modal-backdrop { position: fixed; inset: 0; z-index: 1040; background: rgba(22,19,15,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: modalScrim .2s ease; }
.modal-dialog { position: relative; z-index: 1051; width: 100%; max-width: 500px; margin: auto; }
.modal-md { max-width: 520px; }
.modal-lg { max-width: 640px; }
.modal-content { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 30px 80px -20px rgba(22,19,15,.45); animation: modalPop .22s var(--ease); }
.modal-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line); background: var(--surface); border-radius: var(--r) var(--r) 0 0; }
.modal-title { font-family: var(--serif); font-size: 23px; font-weight: 600; line-height: 1; margin: 0; }
.modal-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.modal-body { padding: 24px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 2px 24px 24px; }
.modal .close { background: none; border: none; cursor: pointer; color: var(--ink-3); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none; transition: all .2s var(--ease); }
.modal .close:hover { background: var(--surface-2); color: var(--ink); }
.modal .close svg { width: 18px; height: 18px; }
body.modal-open { overflow: hidden; }
@keyframes modalScrim { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
    .modal { padding: 0; }
    .modal-dialog, .modal-dialog.modal-md, .modal-dialog.modal-lg { max-width: 100%; min-height: 100%; margin: 0; }
    .modal-content { border-radius: 0; border: none; min-height: 100vh; animation: none; }
    .modal-header { border-radius: 0; }
    .modal-body { padding: 20px 18px 44px; }
}

/* ---------- spinner (overlayer) ---------- */
.atbd-spin-dots { display: inline-flex; gap: 6px; }
.spin-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); animation: gv-spin 1s infinite ease-in-out both; }
.spin-dot:nth-child(2){animation-delay:.15s}.spin-dot:nth-child(3){animation-delay:.3s}.spin-dot:nth-child(4){animation-delay:.45s}
@keyframes gv-spin { 0%,80%,100%{transform:scale(.5);opacity:.4} 40%{transform:scale(1);opacity:1} }
#overlayer { position: fixed; inset: 0; z-index: 2000; background: rgba(255,255,255,.85); display: grid; place-items: center; }

/* ---------- toast (native, replaces jquery-toast) ---------- */
.gv-toast-wrap { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: min(92vw, 440px); }
.gv-toast {
    display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #F0E7D6;
    border-radius: 100px; padding: 13px 22px; font-size: 13.5px; letter-spacing: .02em; box-shadow: var(--shadow);
    animation: gv-toast-in .25s var(--ease) both;
}
.gv-toast.leaving { animation: gv-toast-out .25s var(--ease) both; }
.gv-toast::before { content: ""; width: 16px; height: 16px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC4B0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat center / contain; }
.gv-toast.error { background: var(--sale); color: #fff; }
.gv-toast.error::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center / contain; }
@keyframes gv-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes gv-toast-out { to { opacity: 0; transform: translateY(10px); } }

/* brand logo (self-hosted from /resources) */
.header-row .brand-logo { height: 30px; width: auto; display: block; flex: none; }
.drawer-head .brand-logo { height: 26px; width: auto; }
.brand-logo--footer { height: 36px; width: auto; margin-bottom: 18px; filter: brightness(0) invert(1); }
@media (max-width: 720px) { .header-row .brand-logo { height: 26px; } }