.product-buy-row { display:flex; gap:10px; align-items:stretch; } .product-buy-row .order-button { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:transform 160ms ease, box-shadow 160ms ease, background 160ms ease; } .product-buy-row .order-button:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 6px 18px rgba(0, 0, 0, .15); } .product-buy-row .order-button:active:not(:disabled) { transform:translateY(0); box-shadow:0 2px 6px rgba(0, 0, 0, .10); } .order-button--buy-now { background:#111827; color:#fff; border:none; font-weight:600; } .order-button--buy-now:hover:not(:disabled) { background:#1f2937; } @media (max-width:359px) { .product-buy-row { flex-direction:column; } .product-buy-row .order-button { width:100%; } } @media (max-width:767.98px) { .product-buy-row { gap:6px; flex-direction:row; } .product-buy-row .order-button { width:auto; padding:10px 7px; font-size:13px; min-height:40px; min-width:0; } .product-buy-row .order-button i { font-size:15px; margin-right:4px; } } @media (max-width:374px) { .product-buy-row .order-button { padding:9px 5px; font-size:12px; min-height:38px; } .product-buy-row .order-button i { font-size:14px; margin-right:3px; } .product-buy-row .order-button span { display:inline-block; max-width:none; } .product-action-row .order-button--whatsapp { font-size:13px; min-height:38px; padding:9px 10px; } .product-action-row .order-button--whatsapp i { font-size:16px; margin-right:5px; } } .qc-overlay { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; background:rgba(0, 0, 0, 0); backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px); opacity:0; pointer-events:none; transition:opacity 260ms ease, background 260ms ease, backdrop-filter 260ms ease, -webkit-backdrop-filter 260ms ease; } .qc-overlay[hidden] { display:none !important; } .qc-overlay.qc-open { background:rgba(0, 0, 0, .55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:1; pointer-events:auto; } .qc-modal { position:relative; background:#fff; border-radius:14px; width:min(calc(100vw - 32px), 440px); max-height:calc(100dvh - 48px); overflow-y:auto; overscroll-behavior:contain; padding:28px 28px 24px; box-shadow:0 0 0 1px rgba(0,0,0,.06), 0 12px 48px rgba(0,0,0,.16); transform:scale(0.97) translateY(8px); opacity:0; transition:transform 280ms cubic-bezier(.34,1.56,.64,1), opacity 200ms ease; scrollbar-width:thin; } .qc-overlay.qc-open .qc-modal { transform:scale(1) translateY(0); opacity:1; } @media (max-width:767.98px) { .qc-overlay { align-items:flex-end; justify-content:stretch; } .qc-modal { width:100%; max-width:100%; border-radius:16px 16px 0 0; max-height:88dvh; padding:16px 16px calc(12px + env(safe-area-inset-bottom, 0)); transform:translateY(100%); opacity:1; margin-top:auto; } .qc-overlay.qc-open .qc-modal { transform:translateY(0); opacity:1; } .qc-header { margin-bottom:10px; } .qc-title { font-size:16px; } .qc-close { width:28px; height:28px; font-size:14px; } .qc-product-strip { padding:8px 10px; gap:8px; margin-bottom:10px; } .qc-product-img { width:40px; height:40px; } .qc-product-price { font-size:14px; } .qc-form { gap:10px; } .qc-field { gap:3px; } .qc-field--float .qc-input, .qc-field--float .qc-textarea { padding:14px 11px 4px; font-size:14px; } .qc-field--float .qc-textarea { padding-top:16px; min-height:52px; } .qc-field--float .qc-label { top:14px; left:12px; font-size:13px; } .qc-field--float:focus-within .qc-label, .qc-field--float .qc-input:not(:placeholder-shown) + .qc-label, .qc-field--float .qc-textarea:not(:placeholder-shown) + .qc-label { transform:translateY(-10px) scale(0.769); } .qc-submit-btn { padding:12px 20px; min-height:44px; font-size:14px; border-radius:8px; } .qc-qty-btn { width:28px; height:28px; font-size:14px; } .qc-qty-val { width:36px; font-size:13px; } .qc-select { padding:10px 11px; font-size:14px; } .qc-error-msg { font-size:11px; line-height:1.2; } .qc-success { gap:8px; padding:6px 0 2px; } .qc-success__icon { width:42px; height:42px; font-size:20px; } .qc-success__title { font-size:15px; } .qc-success__msg { font-size:13px; } .qc-success-actions { gap:8px; } .qc-success-close-btn, .qc-whatsapp-btn { padding:10px 18px; font-size:13px; } } @media (max-width:380px) and (max-height:700px) { .qc-modal { max-height:92dvh; padding:10px 14px calc(8px + env(safe-area-inset-bottom, 0)); } .qc-header { margin-bottom:6px; } .qc-title { font-size:15px; } .qc-product-strip { padding:5px 8px; margin-bottom:6px; border-radius:8px; } .qc-form { gap:6px; } .qc-field--float .qc-input, .qc-field--float .qc-textarea { padding:12px 10px 3px; font-size:13px; border-radius:7px; } .qc-field--float .qc-textarea { padding-top:14px; min-height:40px; } .qc-field--float .qc-label { top:12px; left:11px; font-size:12px; } .qc-label { font-size:10px; letter-spacing:.02em; } .qc-select { padding:9px 10px; font-size:13px; border-radius:7px; padding-right:34px; } .qc-submit-btn { padding:10px 16px; min-height:40px; font-size:14px; border-radius:8px; margin-top:2px; } .qc-low-stock { font-size:10px; padding:1px 6px; } } @media (max-width:365px) { .qc-product-strip { flex-wrap:wrap; } .qc-strip-controls { flex:0 0 100%; order:2; } .qc-product-price { order:1; margin-left:auto; } } @media (max-width:349px) { .qc-modal { max-height:94dvh; padding:8px 12px calc(6px + env(safe-area-inset-bottom, 0)); border-radius:14px 14px 0 0; } .qc-header { margin-bottom:5px; } .qc-title { font-size:14px; } .qc-close { width:26px; height:26px; font-size:13px; } .qc-product-strip { padding:4px 8px; margin-bottom:5px; gap:6px; border-radius:7px; } .qc-product-img { width:36px; height:36px; } .qc-product-price { font-size:13px; } .qc-form { gap:5px; } .qc-field { gap:2px; } .qc-field--float .qc-input, .qc-field--float .qc-textarea { padding:11px 9px 2px; font-size:12px; border-radius:6px; border-width:1px; } .qc-field--float .qc-textarea { padding-top:13px; min-height:36px; } .qc-field--float .qc-label { top:11px; left:10px; font-size:11px; } .qc-field--float:focus-within .qc-label, .qc-field--float .qc-input:not(:placeholder-shown) + .qc-label, .qc-field--float .qc-textarea:not(:placeholder-shown) + .qc-label { transform:translateY(-9px) scale(0.75); } .qc-label { font-size:9px; letter-spacing:.03em; } .qc-select { padding:8px 9px; font-size:12px; border-radius:6px; padding-right:30px; background-position:right 10px center; background-size:11px; } .qc-submit-btn { padding:9px 14px; min-height:38px; font-size:13px; border-radius:7px; margin-top:2px; } .qc-qty-stepper { border-radius:5px; } .qc-qty-btn { width:26px; height:26px; font-size:13px; } .qc-qty-val { width:32px; font-size:12px; } .qc-error-msg { font-size:10px; line-height:1.1; } .qc-low-stock { font-size:9px; padding:1px 5px; gap:2px; } .qc-error-banner { padding:7px 10px; font-size:11px; border-radius:6px; } } @media (prefers-reduced-motion:reduce) { .qc-overlay, .qc-modal { transition:none; } } .qc-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px; } .qc-title { margin:0; font-size:18px; font-weight:600; color:#111827; letter-spacing:-0.01em; line-height:1.2; } .qc-close { flex-shrink:0; width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#9ca3af; font-size:16px; background:transparent; border:none; cursor:pointer; transition:background 150ms, color 150ms; } .qc-close:hover { background:#f3f4f6; color:#374151; } .qc-product-strip { display:flex; align-items:center; gap:12px; padding:12px 14px; background:#f9fafb; border:1px solid #f3f4f6; border-radius:10px; margin-bottom:18px; } .qc-product-img { flex-shrink:0; width:48px; height:48px; border-radius:8px; object-fit:contain; background:#fff; border:1px solid #f3f4f6; } .qc-strip-controls { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; } .qc-product-price { margin:0; font-size:16px; font-weight:600; color:#111827; line-height:1.2; white-space:nowrap; flex-shrink:0; } .qc-low-stock { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; background:#fef3c7; color:#92400e; border-radius:5px; font-size:11px; font-weight:500; } .qc-form { display:flex; flex-direction:column; gap:16px; } .qc-field { display:flex; flex-direction:column; gap:5px; } .qc-field--float { position:relative; gap:4px; } .qc-field--float .qc-input, .qc-field--float .qc-textarea { width:100%; padding:16px 13px 6px; border:1.5px solid #e5e7eb; border-radius:9px; font-size:14px; font-family:inherit; font-weight:400; color:#111827; background:#fff; transition:border-color 180ms, box-shadow 180ms; line-height:1.45; -webkit-appearance:none; appearance:none; outline:none; } .qc-field--float .qc-textarea { resize:vertical; min-height:64px; padding-top:18px; } .qc-field--float .qc-label { position:absolute; top:16px; left:14px; right:14px; font-size:14px; font-weight:400; color:#9ca3af; pointer-events:none; transform-origin:top left; transition:transform 180ms cubic-bezier(.4,0,.2,1), color 180ms ease, font-size 180ms ease; line-height:1.45; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-transform:none; letter-spacing:0; } .qc-field--float:focus-within .qc-label, .qc-field--float .qc-input:not(:placeholder-shown) + .qc-label, .qc-field--float .qc-textarea:not(:placeholder-shown) + .qc-label { transform:translateY(-12px) scale(0.7857); color:#6b7280; font-weight:600; } .qc-field--float:focus-within .qc-input, .qc-field--float:focus-within .qc-textarea { border-color:#111827; box-shadow:0 0 0 3px rgba(17, 24, 39, .06); } .qc-field--float .qc-input.qc-error, .qc-field--float .qc-textarea.qc-error { border-color:#ef4444; } .qc-field--float .qc-input.qc-error + .qc-label, .qc-field--float .qc-textarea.qc-error + .qc-label { color:#ef4444; } .qc-label { font-size:12px; font-weight:600; color:#6b7280; letter-spacing:.01em; text-transform:uppercase; } .qc-label .qc-required { color:#ef4444; margin-left:1px; } .qc-input, .qc-select, .qc-textarea { width:100%; padding:11px 13px; border:1.5px solid #e5e7eb; border-radius:8px; font-size:14px; font-family:inherit; font-weight:400; color:#111827; background:#fff; transition:border-color 160ms, box-shadow 160ms; line-height:1.45; -webkit-appearance:none; appearance:none; } .qc-input::placeholder, .qc-textarea::placeholder { color:#9ca3af; } .qc-select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:38px; cursor:pointer; } .qc-input:focus, .qc-select:focus, .qc-textarea:focus { border-color:#111827; box-shadow:0 0 0 3px rgba(17, 24, 39, .06); outline:none; } .qc-input.qc-error, .qc-select.qc-error, .qc-textarea.qc-error { border-color:#ef4444; } .qc-error-msg { font-size:12px; color:#ef4444; line-height:1.3; } .qc-error-msg:empty { display:none; } .qc-qty-stepper { display:inline-flex; align-items:center; gap:0; border:1.5px solid #e5e7eb; border-radius:7px; overflow:hidden; background:#fff; } .qc-qty-btn { width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:500; background:#f9fafb; border:none; cursor:pointer; transition:background 150ms; flex-shrink:0; color:#374151; } .qc-qty-btn:hover:not(:disabled) { background:#e5e7eb; } .qc-qty-btn:disabled { opacity:.35; cursor:not-allowed; } .qc-qty-val { width:42px; min-width:0; padding:4px; border:none; border-left:1.5px solid #e5e7eb; border-right:1.5px solid #e5e7eb; text-align:center; font-size:13px; font-weight:600; font-family:inherit; -webkit-appearance:textfield; appearance:textfield; background:#fff; } .qc-qty-val::-webkit-inner-spin-button, .qc-qty-val::-webkit-outer-spin-button { -webkit-appearance:none; appearance:none; } .qc-submit-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:14px 24px; background:#111827; color:#fff; border:none; border-radius:10px; font-size:15px; font-weight:600; cursor:pointer; font-family:inherit; min-height:50px; letter-spacing:-0.005em; transition:background 180ms ease, transform 160ms ease, box-shadow 160ms ease; } .qc-submit-btn:hover:not(:disabled) { background:#1f2937; transform:translateY(-1px); box-shadow:0 4px 16px rgba(17, 24, 39, .20); } .qc-submit-btn:active:not(:disabled) { transform:translateY(0); box-shadow:0 1px 4px rgba(17, 24, 39, .12); } .qc-submit-btn:disabled { background:#9ca3af; cursor:not-allowed; transform:none; box-shadow:none; } .qc-spinner { display:inline-flex; align-items:center; gap:5px; } .qc-spinner span { display:inline-block; width:6px; height:6px; background:currentColor; border-radius:50%; animation:qc-dot-pulse 1.2s ease-in-out infinite; } .qc-spinner span:nth-child(2) { animation-delay:.2s; } .qc-spinner span:nth-child(3) { animation-delay:.4s; } @keyframes qc-dot-pulse { 0%, 80%, 100% { transform:scale(0.5); opacity:.35; } 40% { transform:scale(1); opacity:1; } } @media (prefers-reduced-motion:reduce) { .qc-spinner span { animation:none; opacity:1; transform:none; } } .qc-success[hidden] { display:none !important; } .qc-success { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:12px 0 4px; } .qc-success__icon { width:52px; height:52px; border-radius:50%; background:#ecfdf5; color:#059669; display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; } .qc-success__title { margin:0; font-size:17px; font-weight:600; color:#111827; } .qc-success__msg { margin:0; font-size:14px; color:#6b7280; line-height:1.5; max-width:320px; } .qc-success__order { display:flex; align-items:center; gap:8px; padding:10px 16px; background:#f9fafb; border:1px solid #f3f4f6; border-radius:8px; font-size:13px; color:#6b7280; } .qc-success__order strong { color:#111827; font-weight:600; } .qc-success-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; width:100%; margin-top:4px; } .qc-success-close-btn { padding:11px 22px; background:#f3f4f6; color:#374151; border:1px solid #e5e7eb; border-radius:8px; font-size:14px; font-weight:500; cursor:pointer; font-family:inherit; transition:background 150ms, border-color 150ms; } .qc-success-close-btn:hover { background:#e5e7eb; border-color:#d1d5db; } .qc-whatsapp-btn { display:inline-flex; align-items:center; gap:8px; padding:11px 22px; background:#25d366; color:#fff; border-radius:8px; font-size:14px; font-weight:500; text-decoration:none; transition:background 150ms, transform 150ms; } .qc-whatsapp-btn:hover { background:#20bd5a; transform:translateY(-1px); } .qc-modal.qc-modal--success { overflow-y:visible; max-height:none; } .qc-error-banner { padding:10px 14px; background:#fef2f2; color:#991b1b; border-radius:8px; font-size:13px; line-height:1.5; display:none; border:1px solid #fecaca; } .qc-error-banner.qc-visible { display:block; }