.woosw-list {
text-align: center !important;
width: 100%;
}
.woosw-list {
--w-bg: #fff;
--w-surface: #f7f7f8;
--w-border: #e7e7ea;
--w-text: #1f2328;
--w-muted: #6b7280;
--w-accent: #003875;
--w-accent-2: #111827;
--w-danger: #ef4444;
--w-radius: 14px;
--w-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
--w-gap: 14px;
--w-pad: 14px;
color: var(--w-text);
}
.woosw-list a {
color: inherit;
text-decoration: none;
}
.woosw-items {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--w-bg);
border: 1px solid var(--w-border);
border-radius: var(--w-radius);
overflow: hidden;
box-shadow: var(--w-shadow);
}
.woosw-items tbody tr {
background: var(--w-bg);
}
.woosw-items tbody tr + tr td {
border-top: 1px solid var(--w-border);
}
.woosw-items td {
padding: 14px 12px;
vertical-align: middle;
}
.woosw-item--image {
width: 92px;
}
.woosw-item--image img {
width: 72px;
height: 72px;
object-fit: cover;
border-radius: 12px;
background: var(--w-surface);
border: 1px solid var(--w-border);
display: block;
}
.woosw-item--info {
min-width: 220px;
}
.woosw-item--name a {
font-weight: 650;
line-height: 1.25;
display: inline-block;
margin-bottom: 6px;
}
.woosw-item--price {
display: flex;
gap: 10px;
align-items: baseline;
flex-wrap: wrap;
margin-bottom: 6px;
}
.woosw-item--price del {
color: var(--w-muted);
}
.woosw-item--price ins {
text-decoration: none;
font-weight: 700;
}
.woosw-item--time {
font-size: 12px;
color: var(--w-muted);
}
.woosw-item--actions {
width: 240px;
text-align: right;
}
.woosw-item--stock .stock {
margin: 0 0 10px 0;
font-size: 13px;
color: var(--w-muted);
}
.woosw-item--stock .in-stock {
color: #0f766e;
}
.woosw-item--atc .button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
border-radius: 12px;
border: 1px solid transparent;
background: var(--w-accent);
color: #fff;
font-weight: 650;
line-height: 1;
transition:
transform 0.06s ease,
filter 0.2s ease,
background 0.2s ease;
white-space: nowrap;
}
.woosw-item--atc .button:active {
transform: translateY(1px);
}
.woosw-item--atc .button:focus-visible {
outline: 3px solid rgba(14, 165, 233, 0.35);
outline-offset: 2px;
}
.woosw-item--remove {
width: 54px;
text-align: center;
}
.woosw-actions {
margin-top: 14px;
display: flex;
justify-content: flex-end;
}
.woosw-copy {
width: min(520px, 100%);
background: var(--w-bg);
border: 1px solid var(--w-border);
border-radius: var(--w-radius);
box-shadow: var(--w-shadow);
padding: 12px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.woosw-copy-label {
font-size: 13px;
color: var(--w-muted);
flex: 0 0 auto;
}
.woosw-copy-url {
flex: 1 1 260px;
}
.woosw-copy-url input {
width: 100%;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid var(--w-border);
background: var(--w-surface);
color: var(--w-text);
font-size: 13px;
outline: none;
}
.woosw-copy-url input:focus {
border-color: rgba(14, 165, 233, 0.55);
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
}
.woosw-copy-btn {
flex: 0 0 auto;
}
.woosw-copy-btn .button {
padding: 10px 12px;
border-radius: 12px;
border: 1px solid var(--w-border);
background: var(--w-bg);
color: var(--w-accent-2);
font-weight: 650;
transition:
filter 0.2s ease,
transform 0.06s ease,
border-color 0.2s ease;
}
.woosw-copy-btn .button:active {
transform: translateY(1px);
}
@media (max-width: 767px) {
.woosw-items,
.woosw-items tbody,
.woosw-items tr,
.woosw-items td {
display: block;
width: 100%;
}
.woosw-items {
border: none;
border-radius: 0;
box-shadow: none;
background: transparent;
}
.woosw-items tbody tr {
border: 1px solid var(--w-border);
border-radius: var(--w-radius);
box-shadow: var(--w-shadow);
overflow: hidden;
background: var(--w-bg);
margin-bottom: 12px;
}
.woosw-items tbody tr + tr td {
border-top: none;
}
.woosw-items td {
padding: var(--w-pad);
}
.woosw-item--remove {
position: absolute;
right: 10px;
top: 10px;
width: auto;
padding: 0;
}
.woosw-items tbody tr {
position: relative;
}
.woosw-item--image {
padding-top: 18px;
}
.woosw-item--image img {
width: 84px;
height: 84px;
}
.woosw-item--info {
padding-top: 0;
}
.woosw-item--actions {
width: 100%;
text-align: left;
padding-top: 0;
}
.woosw-item--stock .stock {
margin-bottom: 12px;
}
.woosw-item--atc .button {
width: 100%;
justify-content: center;
}
.woosw-copy {
padding: 12px;
}
.woosw-copy-label {
width: 100%;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.woosw-item--actions {
width: 210px;
}
.woosw-item--image {
width: 86px;
}
.woosw-items td {
padding: 14px 10px;
}
}
@media (min-width: 1024px) {
.woosw-items td {
padding: 16px 14px;
}
.woosw-item--image img {
width: 78px;
height: 78px;
}
}
.woosw-item--name,
.woosw-item--time {
text-align: left;
}
.woosw-list table.woosw-items tr:hover td {
background-color: #fff !important;
}
.woosw-item {
background-color: #fff !important;
}