/* Scoped to: clothing-template-pricing */
[data-component-slug="clothing-template-pricing"].pricing-section, [data-component-slug="clothing-template-pricing"] .pricing-section { width: 100%; padding: 100px 100px; background: #ffffff; } [data-component-slug="clothing-template-pricing"].pricing-grid, [data-component-slug="clothing-template-pricing"] .pricing-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: stretch; } [data-component-slug="clothing-template-pricing"].pricing-card, [data-component-slug="clothing-template-pricing"] .pricing-card { border: 1px solid #dcdcdc; border-radius: 16px; padding: 32px 28px; display: flex; flex-direction: column; justify-content: space-between; background: #ffffff; position: relative; } [data-component-slug="clothing-template-pricing"].pricing-card.featured, [data-component-slug="clothing-template-pricing"] .pricing-card.featured { background: #000000; color: #ffffff; padding-top: 60px; } [data-component-slug="clothing-template-pricing"].popular-badge, [data-component-slug="clothing-template-pricing"] .popular-badge { background: #bfbfbf; color: #000; text-align: center; font-size: 20px; padding: 10px 0; border-radius: 12px; position: absolute; top: -35px; left: 50%; transform: translateX(-50%); width: 100%; } [data-component-slug="clothing-template-pricing"].plan-title, [data-component-slug="clothing-template-pricing"] .plan-title { font-size: 20px; margin-bottom: 12px; } [data-component-slug="clothing-template-pricing"].plan-price, [data-component-slug="clothing-template-pricing"] .plan-price { font-size: 40px; margin-bottom: 8px; } [data-component-slug="clothing-template-pricing"].plan-note, [data-component-slug="clothing-template-pricing"] .plan-note { font-size: 16px; color: #7e7e7e; margin-bottom: 20px; } [data-component-slug="clothing-template-pricing"].pricing-card.featured .plan-note, [data-component-slug="clothing-template-pricing"] .pricing-card.featured .plan-note { color: #bfbfbf; } [data-component-slug="clothing-template-pricing"].plan-btn, [data-component-slug="clothing-template-pricing"] .plan-btn { width: 100%; height: 60px; border-radius: 12px; background: #010609; color: #ffffff; font-size: 20px; border: none; cursor: pointer; margin-bottom: 28px; } [data-component-slug="clothing-template-pricing"].pricing-card.featured .plan-btn, [data-component-slug="clothing-template-pricing"] .pricing-card.featured .plan-btn { background: #ffffff; color: #000000; } [data-component-slug="clothing-template-pricing"].features-title, [data-component-slug="clothing-template-pricing"] .features-title { font-size: 20px; margin-bottom: 20px; } [data-component-slug="clothing-template-pricing"].features-list, [data-component-slug="clothing-template-pricing"] .features-list { display: flex; flex-direction: column; gap: 14px; } [data-component-slug="clothing-template-pricing"].feature-item, [data-component-slug="clothing-template-pricing"] .feature-item { display: flex; align-items: center; gap: 12px; font-size: 20px; } [data-component-slug="clothing-template-pricing"].feature-item img, [data-component-slug="clothing-template-pricing"] .feature-item img { width: 20px; height: 20px; } [data-component-slug="clothing-template-pricing"].feature-item.not-included span, [data-component-slug="clothing-template-pricing"] .feature-item.not-included span { color: #7e7e7e; } @media (max-width: 1024px) { [data-component-slug="clothing-template-pricing"].pricing-grid, [data-component-slug="clothing-template-pricing"] .pricing-grid { grid-template-columns: 1fr; } } @media (max-width: 1024px) { [data-component-slug="clothing-template-pricing"].pricing-section, [data-component-slug="clothing-template-pricing"] .pricing-section { padding: 80px 40px; } [data-component-slug="clothing-template-pricing"].pricing-grid, [data-component-slug="clothing-template-pricing"] .pricing-grid { grid-template-columns: 1fr; gap: 28px; } [data-component-slug="clothing-template-pricing"].pricing-card, [data-component-slug="clothing-template-pricing"] .pricing-card { padding: 32px 24px; } [data-component-slug="clothing-template-pricing"].popular-badge, [data-component-slug="clothing-template-pricing"] .popular-badge { top: -28px; font-size: 18px; padding: 8px 0; } [data-component-slug="clothing-template-pricing"].plan-price, [data-component-slug="clothing-template-pricing"] .plan-price { font-size: 36px; } [data-component-slug="clothing-template-pricing"].feature-item, [data-component-slug="clothing-template-pricing"] .feature-item { font-size: 18px; } } @media (max-width: 768px) { [data-component-slug="clothing-template-pricing"].pricing-section, [data-component-slug="clothing-template-pricing"] .pricing-section { padding: 60px 20px; } [data-component-slug="clothing-template-pricing"].pricing-card, [data-component-slug="clothing-template-pricing"] .pricing-card { border-radius: 14px; padding: 28px 20px; } [data-component-slug="clothing-template-pricing"].popular-badge, [data-component-slug="clothing-template-pricing"] .popular-badge { font-size: 16px; padding: 12px 0; border-radius: 10px; margin-top: 10px; } [data-component-slug="clothing-template-pricing"].plan-title, [data-component-slug="clothing-template-pricing"] .plan-title { font-size: 18px; } [data-component-slug="clothing-template-pricing"].plan-price, [data-component-slug="clothing-template-pricing"] .plan-price { font-size: 32px; } [data-component-slug="clothing-template-pricing"].plan-note, [data-component-slug="clothing-template-pricing"] .plan-note { font-size: 14px; } [data-component-slug="clothing-template-pricing"].plan-btn, [data-component-slug="clothing-template-pricing"] .plan-btn { height: 54px; font-size: 18px; } [data-component-slug="clothing-template-pricing"].features-title, [data-component-slug="clothing-template-pricing"] .features-title { font-size: 18px; } [data-component-slug="clothing-template-pricing"].feature-item, [data-component-slug="clothing-template-pricing"] .feature-item { font-size: 16px; gap: 10px; } [data-component-slug="clothing-template-pricing"].feature-item img, [data-component-slug="clothing-template-pricing"] .feature-item img { width: 18px; height: 18px; } } @media (max-width: 480px) { [data-component-slug="clothing-template-pricing"].pricing-section, [data-component-slug="clothing-template-pricing"] .pricing-section { padding: 0px 16px; } [data-component-slug="clothing-template-pricing"].pricing-card, [data-component-slug="clothing-template-pricing"] .pricing-card { padding: 24px 16px; } [data-component-slug="clothing-template-pricing"].plan-price, [data-component-slug="clothing-template-pricing"] .plan-price { font-size: 28px; } [data-component-slug="clothing-template-pricing"].plan-btn, [data-component-slug="clothing-template-pricing"] .plan-btn { height: 50px; font-size: 16px; } [data-component-slug="clothing-template-pricing"].feature-item, [data-component-slug="clothing-template-pricing"] .feature-item { font-size: 15px; } }