/* ============================================ SHOPUP CHECKOUT (SCOPED) Requires: File: /css/storefront-styles.css ============================================ */ body.storefront { background: var(--gray-50); } /* Header on checkout (your .header) */ body.storefront .header { background: var(--white); border-bottom: 1px solid var(--gray-200); padding: var(--spacing-md) 0; position: sticky; top: 0; z-index: 99; box-shadow: var(--shadow-sm); } body.storefront .header-content { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-lg); } body.storefront .logo { font-size: var(--font-size-xl); font-weight: 900; background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; white-space: nowrap; } body.storefront .nav-links a { margin-left: 18px; text-decoration: none; color: var(--gray-700); font-weight: 700; transition: color var(--transition-fast); } body.storefront .nav-links a:hover { color: var(--primary); } /* Main layout */ body.storefront .wrap { max-width: 1200px; margin: 28px auto; padding: 0 var(--spacing-md); } body.storefront h1 { margin: 0 0 16px 0; font-size: var(--font-size-3xl); line-height: 1.1; } body.storefront h2 { margin: 0 0 12px 0; font-size: var(--font-size-lg); } /* Grid */ body.storefront .grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--spacing-lg); align-items: start; } /* Cards */ body.storefront .card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: var(--spacing-lg); box-shadow: var(--shadow-sm); } /* Form */ body.storefront .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } body.storefront .field { margin-bottom: 12px; } body.storefront label { display: block; font-size: 0.9em; margin-bottom: 6px; color: var(--gray-700); font-weight: 700; } body.storefront input, body.storefront select, body.storefront textarea { width: 100%; } body.storefront textarea { min-height: 96px; } /* Summary */ body.storefront .pill { display: inline-block; padding: 6px 10px; border-radius: var(--radius-full); background: var(--primary-light); color: var(--primary-dark); font-weight: 800; font-size: 0.9em; } body.storefront .summary-row { display: flex; justify-content: space-between; margin: 10px 0; color: var(--gray-800); } body.storefront .summary-total { margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--gray-200); font-size: 1.15em; font-weight: 900; color: var(--gray-900); } body.storefront .items { margin-top: 10px; border-top: 1px solid var(--gray-200); padding-top: 12px; } body.storefront .item { display: flex; justify-content: space-between; margin: 10px 0; gap: 12px; } body.storefront .item-name { font-weight: 800; color: var(--gray-900); } /* Buttons */ body.storefront .btn { width: 100%; margin-top: 12px; padding: 14px; border: none; border-radius: var(--radius-md); font-weight: 900; cursor: pointer; font-size: 1.02em; transition: transform var(--transition-fast), background var(--transition-fast); } body.storefront .btn:hover { transform: translateY(-1px); } body.storefront .btn-primary { background: var(--primary); color: var(--white); } body.storefront .btn-primary:hover { background: var(--primary-dark); } body.storefront .btn-secondary { background: var(--gray-900); color: var(--white); } body.storefront .btn-secondary:hover { background: var(--gray-800); } /* Alert */ body.storefront .alert { display: none; margin-top: 12px; padding: 12px; border-radius: var(--radius-md); background: #fff3cd; border: 1px solid #ffe69c; color: #664d03; font-size: 0.95em; } /* Responsive */ @media (max-width: 900px) { body.storefront .grid { grid-template-columns: 1fr; } body.storefront .row { grid-template-columns: 1fr; } body.storefront h1 { font-size: 28px; } }