.tcp-order {
--tcp-navy: #0D2A52;
--tcp-gold: #C4933D;
--tcp-light-gold: #E7C56F;
--tcp-rose: #C9877B;
--tcp-ink: #172033;
--tcp-muted: #667085;
--tcp-line: #E8E1D7;
--tcp-soft: #FBF8F4;
color: var(--tcp-ink);
font-family: inherit;
margin: 0 auto;
max-width: 1180px;
padding: 28px 16px 96px;
}
.tcp-order * {
box-sizing: border-box;
}
.tcp-order__hero {
background: linear-gradient(135deg, #0D2A52 0%, #143B70 55%, #C4933D 150%);
border-radius: 8px;
color: #fff;
margin-bottom: 22px;
padding: clamp(24px, 5vw, 48px);
position: relative;
overflow: hidden;
}
.tcp-order__hero::after {
background: rgba(231, 197, 111, .18);
content: "";
height: 100%;
position: absolute;
right: -18%;
top: 0;
transform: skewX(-18deg);
width: 40%;
}
.tcp-order__eyebrow {
color: var(--tcp-light-gold);
font-size: 13px;
font-weight: 700;
letter-spacing: 0;
margin: 0 0 8px;
text-transform: uppercase;
}
.tcp-order h2 {
color: #fff;
font-size: clamp(30px, 5vw, 46px);
line-height: 1.08;
margin: 0 0 10px;
}
.tcp-order__hero p:last-child {
font-size: 17px;
margin: 0;
max-width: 720px;
opacity: .92;
}
.tcp-product-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-bottom: 22px;
}
.tcp-product-toolbar {
align-items: center;
background: rgba(255, 255, 255, .92);
border: 1px solid rgba(231, 197, 111, .36);
border-radius: 8px;
box-shadow: 0 12px 34px rgba(7, 25, 51, .12);
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: space-between;
margin: 0 0 16px;
padding: 12px 14px;
}
.tcp-product-toolbar label {
align-items: center;
color: var(--tcp-navy);
display: inline-flex;
font-size: 13px;
font-weight: 800;
gap: 8px;
}
.tcp-product-toolbar input {
border: 1px solid rgba(13, 42, 82, .2);
border-radius: 6px;
font-weight: 800;
max-width: 86px;
min-height: 38px;
padding: 6px 10px;
}
.tcp-product-pages {
align-items: center;
display: inline-flex;
gap: 8px;
}
.tcp-product-pages button {
background: var(--tcp-navy);
border: 0;
border-radius: 6px;
color: #fff;
cursor: pointer;
font-weight: 800;
min-height: 38px;
padding: 8px 12px;
}
.tcp-product-pages button:disabled {
cursor: not-allowed;
opacity: .45;
}
.tcp-product-pages span {
color: var(--tcp-navy);
font-size: 13px;
font-weight: 800;
}
.tcp-product-card {
background: #fff;
border: 1px solid var(--tcp-line);
border-radius: 8px;
box-shadow: 0 18px 46px rgba(7, 25, 51, .2), 0 3px 10px rgba(196, 147, 61, .14);
min-width: 0;
overflow: hidden;
position: relative;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tcp-product-card--selected {
border-color: var(--tcp-navy);
box-shadow: 0 16px 42px rgba(13, 42, 82, .16), 0 0 0 2px rgba(196, 147, 61, .18);
}
.tcp-product-card:hover {
transform: translateY(-2px);
}
.tcp-current-product,
.tcp-page-matched-product {
animation: tcpMatchedGlow 1.05s infinite ease-in-out;
border: 3px solid #d60000 !important;
box-shadow: 0 0 0 4px rgba(214,0,0,.16), 0 0 22px rgba(214,0,0,.65);
position: relative;
z-index: 2;
}
@keyframes tcpMatchedGlow {
0%, 100% {
box-shadow: 0 0 0 3px rgba(214,0,0,.14), 0 0 14px rgba(214,0,0,.5);
}
50% {
box-shadow: 0 0 0 7px rgba(214,0,0,.24), 0 0 32px rgba(214,0,0,.95);
}
}
.tcp-current-badge {
background: var(--tcp-navy);
border: 1px solid rgba(231, 197, 111, .7);
border-radius: 999px;
color: var(--tcp-light-gold);
font-size: 12px;
font-weight: 700;
left: 12px;
padding: 6px 10px;
position: absolute;
top: 12px;
z-index: 2;
}
.tcp-product-card__image-link {
background: linear-gradient(180deg, rgba(255,255,255,.96), var(--tcp-soft));
display: block;
aspect-ratio: 1 / 1;
padding: 8px;
}
.tcp-product-card img {
display: block;
height: 100%;
object-fit: contain;
width: 100%;
}
.tcp-product-card__body {
padding: 16px;
}
.tcp-product-card h3 {
color: var(--tcp-navy);
font-size: 18px;
line-height: 1.25;
margin: 0 0 8px;
}
.tcp-product-card__desc {
color: var(--tcp-muted);
font-size: 14px;
line-height: 1.5;
margin: 0 0 14px;
}
.tcp-product-card__meta {
display: block;
margin-bottom: 14px;
text-align: center;
}
.tcp-price-wrap {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin: 12px 0 11px;
text-align: center;
}
.tcp-regular-price {
color: #0D2A52;
display: inline-block;
font-size: var(--tcp-regular-price-size, 22px);
font-weight: 900;
line-height: 1;
position: relative;
white-space: nowrap;
}
.tcp-regular-price::after {
background: #8b0000;
content: "";
height: 3px;
left: -5%;
position: absolute;
right: -5%;
top: 50%;
transform: rotate(-7deg);
transform-origin: center;
}
.tcp-sale-price {
color: #8b0000;
font-size: var(--tcp-sale-price-size, 32px);
font-weight: 900;
line-height: 1;
}
.tcp-price-pulse {
align-items: center;
animation: tcpPricePulse 1.05s infinite ease-in-out;
background: rgba(255,255,255,.85);
border: 2px solid #d60000;
border-radius: 999px;
display: inline-flex;
justify-content: center;
padding: 8px 16px;
position: relative;
}
@keyframes tcpPricePulse {
0% {
box-shadow: 0 0 0 0 rgba(214,0,0,.45);
transform: scale(1);
}
70% {
box-shadow: 0 0 0 9px rgba(214,0,0,0);
transform: scale(1.035);
}
100% {
box-shadow: 0 0 0 0 rgba(214,0,0,0);
transform: scale(1);
}
}
.tcp-product-promo {
color: var(--tcp-rose);
display: block;
font-size: 13px;
font-weight: 700;
text-align: center;
}
.tcp-qty {
align-items: center;
border: 1px solid var(--tcp-line);
border-radius: 8px;
display: grid;
grid-template-columns: 44px 1fr 44px;
height: 46px;
overflow: hidden;
}
.tcp-qty__btn {
appearance: none;
background: var(--tcp-navy);
border: 0;
color: #fff;
cursor: pointer;
font-size: 24px;
height: 100%;
}
.tcp-qty input {
border: 0;
color: var(--tcp-navy);
font-size: 18px;
font-weight: 800;
height: 100%;
text-align: center;
width: 100%;
}
.tcp-subtotal {
color: var(--tcp-muted);
font-size: 13px;
font-weight: 700;
margin-top: 10px;
}
.tcp-checkout {
align-items: start;
display: grid;
gap: 18px;
grid-template-columns: minmax(0, 1fr) 360px;
}
.tcp-customer-form,
.tcp-summary {
background: #fff;
border: 1px solid var(--tcp-line);
border-radius: 8px;
box-shadow: 0 14px 38px rgba(13, 42, 82, .08);
padding: 20px;
}
.tcp-customer-form label {
display: block;
margin-bottom: 16px;
}
.tcp-customer-form span {
color: var(--tcp-navy);
display: block;
font-weight: 800;
margin-bottom: 7px;
}
.tcp-customer-form b,
.tcp-customer-form small {
color: #B42318;
}
.tcp-customer-form input,
.tcp-customer-form textarea {
background: #fff;
border: 1px solid #D9D2C8;
border-radius: 8px;
color: var(--tcp-ink);
font: inherit;
min-height: 48px;
padding: 12px 13px;
width: 100%;
}
.tcp-customer-form textarea {
min-height: 132px;
resize: vertical;
}
.tcp-customer-form .tcp-invalid {
border-color: #B42318;
box-shadow: 0 0 0 3px rgba(180, 35, 24, .1);
}
.tcp-customer-form small {
display: block;
font-size: 13px;
margin-top: 6px;
min-height: 18px;
}
.tcp-submit,
.tcp-mobile-total button {
appearance: none;
background: linear-gradient(135deg, var(--tcp-navy), #123A71);
border: 1px solid rgba(231, 197, 111, .75);
border-radius: 8px;
color: #fff;
cursor: pointer;
font-size: 17px;
font-weight: 800;
min-height: 52px;
padding: 13px 18px;
width: 100%;
}
.tcp-submit:hover,
.tcp-mobile-total button:hover {
background: linear-gradient(135deg, #123A71, var(--tcp-navy));
}
.tcp-submit:disabled {
cursor: wait;
opacity: .7;
}
.tcp-form-message {
border-radius: 8px;
color: var(--tcp-navy);
font-weight: 700;
margin: 4px 0 14px;
min-height: 22px;
}
.tcp-form-message--error {
color: #B42318;
}
.tcp-form-message--success {
background: #ECFDF3;
color: #027A48;
padding: 12px;
}
.tcp-legal {
color: var(--tcp-muted);
font-size: 13px;
line-height: 1.6;
margin: 14px 0 0;
}
.tcp-summary {
position: sticky;
top: 92px;
}
.tcp-summary h3 {
color: var(--tcp-navy);
font-size: 21px;
margin: 0 0 14px;
}
.tcp-summary__items > div {
border-bottom: 1px solid var(--tcp-line);
display: flex;
gap: 12px;
justify-content: space-between;
padding: 10px 0;
}
.tcp-summary__items span {
color: var(--tcp-muted);
}
.tcp-summary__empty {
color: var(--tcp-muted);
padding: 10px 0;
}
.tcp-summary__total {
align-items: center;
border-top: 2px solid var(--tcp-gold);
color: var(--tcp-navy);
display: flex;
font-size: 18px;
justify-content: space-between;
margin-top: 14px;
padding-top: 14px;
}
.tcp-summary__total strong {
font-size: 24px;
}
.tcp-mobile-total {
display: none;
}
@media (max-width: 980px) {
.tcp-product-grid,
.tcp-checkout {
grid-template-columns: 1fr;
}
.tcp-summary {
position: static;
}
}
@media (max-width: 680px) {
.tcp-order {
padding: 14px 12px 92px;
}
.tcp-order__hero {
padding: 24px 18px;
}
.tcp-price-wrap {
gap: 10px;
margin: 13px 0 12px;
}
.tcp-regular-price::after {
height: 4px;
}
.tcp-price-pulse {
border-width: 2px;
padding: 10px 18px;
}
.tcp-product-toolbar {
align-items: stretch;
flex-direction: column;
}
.tcp-product-pages {
justify-content: space-between;
width: 100%;
}
.tcp-qty {
grid-template-columns: 56px 1fr 56px;
height: 54px;
}
.tcp-mobile-total {
align-items: center;
background: #fff;
border-top: 1px solid var(--tcp-line);
bottom: 0;
box-shadow: 0 -10px 30px rgba(13, 42, 82, .12);
display: flex;
gap: 12px;
justify-content: space-between;
left: 0;
padding: 10px 12px;
position: fixed;
right: 0;
z-index: 9999;
}
.tcp-mobile-total span {
color: var(--tcp-navy);
font-weight: 800;
min-width: 110px;
}
.tcp-mobile-total button {
min-height: 46px;
width: auto;
}
}
@media (max-width: 380px) {
.tcp-price-pulse {
padding: 9px 14px;
}
}