@container (min-width: 700px){.wc-block-checkout__shipping-fields .wc-block-components-address-form .wc-block-components-text-input.wc-block-components-address-form__pagbank-tax-id,.wc-block-checkout__billing-fields .wc-block-components-address-form .wc-block-components-text-input.wc-block-components-address-form__pagbank-tax-id{flex:0 0 100%}}.pagbank-block-label{display:flex;gap:1rem}:root {
--sar-bg: #f6f2ea;
--sar-card: #ffffff;
--sar-text: #28231f;
--sar-muted: #716961;
--sar-primary: #36523e;
--sar-primary-hover: #263d2d;
--sar-gold: #b78a3b;
--sar-border: #ded6ca;
--sar-error: #a62d2d;
--sar-success: #236b3b;
}
.sar-cadastro-wrap {
max-width: 1080px;
margin: 38px auto 70px;
padding: 0 18px;
color: var(--sar-text);
}
.sar-cadastro-wrap *,
.sar-cadastro-wrap *::before,
.sar-cadastro-wrap *::after {
box-sizing: border-box;
}
.sar-form-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
margin-bottom: 26px;
}
.sar-form-header h1 {
margin: 3px 0 8px;
font-size: clamp(29px, 4vw, 46px);
line-height: 1.08;
color: var(--sar-text);
}
.sar-form-header p,
.sar-section-title p,
.sar-publish-card p {
margin: 0;
color: var(--sar-muted);
}
.sar-brand-kicker {
color: var(--sar-gold);
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
font-size: 12px;
}
.sar-user-box {
min-width: 190px;
padding: 14px 16px;
border: 1px solid var(--sar-border);
border-radius: 14px;
background: rgba(255,255,255,.72);
display: grid;
gap: 3px;
}
.sar-user-box span { font-size: 12px; color: var(--sar-muted); }
.sar-user-box a { color: var(--sar-primary); font-size: 13px; font-weight: 700; margin-top: 5px; }
.sar-card {
background: var(--sar-card);
border: 1px solid var(--sar-border);
border-radius: 18px;
padding: clamp(18px, 3vw, 30px);
margin-bottom: 20px;
box-shadow: 0 12px 35px rgba(51, 42, 33, .055);
}
.sar-section-title {
display: flex;
gap: 14px;
align-items: flex-start;
border-bottom: 1px solid #eee8df;
padding-bottom: 19px;
margin-bottom: 22px;
}
.sar-section-title > span {
width: 36px;
height: 36px;
flex: 0 0 36px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--sar-primary);
color: white;
font-weight: 800;
}
.sar-section-title h2,
.sar-publish-card h2,
.sar-login-card h2 {
margin: 0 0 4px;
color: var(--sar-text);
font-size: 21px;
}
.sar-grid { display: grid; gap: 18px; }
.sar-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sar-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sar-span-2 { grid-column: span 2; }
.sar-field { display: grid; gap: 7px; }
.sar-field > span { font-weight: 750; font-size: 14px; }
.sar-field small { color: var(--sar-muted); font-size: 12px; }
.sar-field input,
.sar-field textarea,
.sar-field select,
.sar-login-card input[type="text"],
.sar-login-card input[type="password"] {
width: 100%;
border: 1px solid var(--sar-border);
background: #fff;
color: var(--sar-text);
border-radius: 11px;
min-height: 46px;
padding: 11px 13px;
outline: none;
transition: border-color .2s, box-shadow .2s;
}
.sar-field textarea { resize: vertical; min-height: 115px; line-height: 1.55; }
.sar-field input:focus,
.sar-field textarea:focus,
.sar-field select:focus,
.sar-login-card input:focus {
border-color: var(--sar-primary);
box-shadow: 0 0 0 3px rgba(54,82,62,.12);
}
.sar-slug-row {
display: flex;
align-items: center;
border: 1px solid var(--sar-border);
border-radius: 11px;
overflow: hidden;
background: #f7f4ef;
}
.sar-slug-row span {
padding-left: 13px;
color: var(--sar-muted);
white-space: nowrap;
font-size: 13px;
}
.sar-slug-row input { border: 0; border-radius: 0; box-shadow: none !important; }
.sar-image-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 15px;
}
.sar-image-field {
min-width: 0;
cursor: pointer;
display: grid;
gap: 7px;
text-align: center;
}
.sar-image-field input { position: absolute; opacity: 0; pointer-events: none; }
.sar-image-field strong { font-size: 14px; }
.sar-image-field small { color: var(--sar-muted); font-size: 11px; }
.sar-image-preview {
position: relative;
aspect-ratio: 1 / 1;
border: 2px dashed #cfc4b4;
border-radius: 15px;
display: grid;
place-items: center;
overflow: hidden;
background: #faf8f4;
transition: border-color .2s, transform .2s;
}
.sar-image-field:hover .sar-image-preview { border-color: var(--sar-primary); transform: translateY(-2px); }
.sar-image-preview img { width: 100%; height: 100%; object-fit: cover; display: none; }
.sar-image-field.has-image .sar-image-preview img { display: block; }
.sar-image-icon {
color: var(--sar-primary);
font-size: 30px;
font-weight: 400;
}
.sar-image-field.has-image .sar-image-icon {
position: absolute;
z-index: 2;
bottom: 8px;
right: 8px;
font-size: 11px;
background: rgba(0,0,0,.72);
color: white;
padding: 5px 8px;
border-radius: 999px;
}
.sar-stock-row {
display: flex;
align-items: flex-end;
gap: 22px;
margin-top: 23px;
}
.sar-check {
display: flex;
gap: 9px;
align-items: center;
font-weight: 750;
min-height: 46px;
}
.sar-check input { width: 19px; height: 19px; accent-color: var(--sar-primary); }
.sar-stock-quantity { width: 180px; }
.is-hidden { display: none !important; }
.sar-product-type-note {
border: 1px solid var(--sar-border);
border-radius: 11px;
padding: 11px 13px;
background: #faf8f4;
}
.sar-product-type-note p { margin: 0; color: var(--sar-muted); font-size: 13px; line-height: 1.45; }
.sar-variation-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
margin-bottom: 18px;
}
.sar-variation-toolbar p { margin: 4px 0 0; color: var(--sar-muted); font-size: 13px; }
.sar-variation-toolbar .sar-btn { min-height: 42px; padding: 9px 14px; white-space: nowrap; }
.sar-variations-list { display: grid; gap: 14px; }
.sar-variation-row {
border: 1px solid var(--sar-border);
border-radius: 14px;
background: #fcfaf7;
padding: 16px;
}
.sar-variation-row-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.sar-variation-row-head > strong { color: var(--sar-primary); }
.sar-variation-actions { display: flex; gap: 7px; }
.sar-small-btn {
border: 1px solid var(--sar-border);
border-radius: 8px;
background: white;
color: var(--sar-text);
padding: 6px 10px;
font-size: 12px;
font-weight: 750;
cursor: pointer;
}
.sar-small-btn:hover { border-color: var(--sar-primary); color: var(--sar-primary); }
.sar-small-btn-danger:hover { border-color: var(--sar-error); color: var(--sar-error); }
.sar-variation-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 12px;
}
.sar-variation-grid .sar-field > span { font-size: 12px; }
.sar-variation-grid .sar-field input { min-height: 42px; padding: 9px 10px; }
.sar-variation-help { display: block; margin-top: 10px; color: var(--sar-muted); }
.sar-inheritance-note {
margin: 18px 0 0;
padding: 12px 14px;
border-radius: 10px;
background: #eef4ef;
color: var(--sar-primary);
font-size: 13px;
font-weight: 650;
}
.sar-publish-card {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 28px;
border-color: rgba(54,82,62,.35);
}
.sar-publish-controls {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
gap: 12px;
min-width: min(100%, 540px);
}
.sar-publish-controls .sar-field { flex: 1; }
.sar-featured-option {
flex: 0 0 100%;
min-height: auto;
padding: 11px 13px;
border: 1px solid var(--sar-border);
border-radius: 11px;
background: #faf8f4;
}
.sar-featured-option span::before {
content: "★";
margin-right: 7px;
color: var(--sar-gold);
}
.sar-status-field { min-width: 220px; }
.sar-btn,
.sar-login-card input[type="submit"] {
appearance: none;
border: 0;
border-radius: 11px;
min-height: 48px;
padding: 12px 20px;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 9px;
font-weight: 800;
text-decoration: none !important;
cursor: pointer;
transition: background .2s, transform .2s, opacity .2s;
}
.sar-btn-primary,
.sar-login-card input[type="submit"] { background: var(--sar-primary); color: white; }
.sar-btn-primary:hover,
.sar-login-card input[type="submit"]:hover { background: var(--sar-primary-hover); color: white; transform: translateY(-1px); }
.sar-btn-secondary { background: #ece6dc; color: var(--sar-text); }
.sar-btn:disabled { opacity: .7; cursor: wait; transform: none; }
.sar-spinner {
width: 17px;
height: 17px;
border: 2px solid rgba(255,255,255,.4);
border-top-color: white;
border-radius: 50%;
display: none;
animation: sar-spin .7s linear infinite;
}
.sar-btn.is-loading .sar-spinner { display: block; }
@keyframes sar-spin { to { transform: rotate(360deg); } }
.sar-notice {
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 18px;
border: 1px solid;
font-weight: 650;
}
.sar-notice-success { background: #eef8f1; border-color: #a9d3b5; color: var(--sar-success); }
.sar-notice-error { background: #fff0f0; border-color: #e5aaaa; color: var(--sar-error); }
.sar-notice-warning { background: #fff8e6; border-color: #e7cc86; color: #74530e; }
.sar-notice-info { background: #eef5fb; border-color: #b6d1e8; color: #285a80; }
.sar-notice ul { margin: 8px 0 0 20px; }
.sar-success-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.sar-honeypot { position: absolute !important; left: -10000px !important; opacity: 0 !important; }
.sar-login-wrap { max-width: 520px; }
.sar-login-card > p { color: var(--sar-muted); }
.sar-login-card form { margin-top: 22px; }
.sar-login-card form p { margin-bottom: 15px; }
.sar-login-card label { display: grid; gap: 6px; font-weight: 700; }
.sar-login-card .login-remember label { display: flex; align-items: center; gap: 7px; font-weight: 500; }
.sar-login-card input[type="checkbox"] { width: 18px; height: 18px; }
.sar-login-card input[type="submit"] { width: 100%; }
@media (max-width: 860px) {
.sar-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sar-image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sar-variation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sar-publish-card { align-items: stretch; flex-direction: column; }
.sar-publish-controls { min-width: 0; width: 100%; }
}
@media (max-width: 620px) {
.sar-cadastro-wrap { margin-top: 22px; padding: 0 12px; }
.sar-form-header { flex-direction: column; }
.sar-user-box { width: 100%; }
.sar-grid-2,
.sar-grid-4 { grid-template-columns: 1fr; }
.sar-span-2 { grid-column: auto; }
.sar-image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.sar-slug-row { display: block; }
.sar-slug-row span { display: block; padding: 9px 12px 0; white-space: normal; word-break: break-all; }
.sar-stock-row { align-items: stretch; flex-direction: column; }
.sar-stock-quantity { width: 100%; }
.sar-variation-toolbar { align-items: stretch; flex-direction: column; }
.sar-variation-toolbar .sar-btn { width: 100%; }
.sar-variation-row-head { align-items: flex-start; flex-direction: column; }
.sar-variation-actions { width: 100%; }
.sar-variation-actions .sar-small-btn { flex: 1; }
.sar-variation-grid { grid-template-columns: 1fr; }
.sar-publish-controls { flex-direction: column; align-items: stretch; }
.sar-btn { width: 100%; }
}