/* Roop By Manisha - WordPress/WooCommerce additions (everything Tailwind does not generate) */

/* Admin bar offsets for the fixed header + sticky strip */
.admin-bar #roop-header { top: 32px; }
.admin-bar .roop-shop-strip { top: calc(60px + 32px); }
@media (min-width: 640px) { .admin-bar .roop-shop-strip { top: calc(72px + 32px); } }
@media (min-width: 1024px) { .admin-bar .roop-shop-strip { top: calc(90px + 32px); } }
@media (max-width: 782px) {
  .admin-bar #roop-header { top: 46px; }
  .admin-bar .roop-shop-strip { top: calc(60px + 46px); }
}
@media (max-width: 600px) { .admin-bar #roop-header { top: 0; } }
.admin-bar #roop-drawer { top: 32px; height: calc(100dvh - 32px); }

/* Entrance animations (framer-motion replacements) */
@keyframes roopFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes roopFadeIn { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }
.roop-fade-up { animation: roopFadeUp .9s cubic-bezier(.22,1,.36,1) both; }
.roop-fade-in { animation: roopFadeIn .6s ease both; }
.roop-reveal { opacity: 0; transition: opacity .9s ease, transform .9s ease; }
.roop-reveal[data-reveal="up"] { transform: translateY(24px); }
.roop-reveal[data-reveal="left"] { transform: translateX(-24px); }
.roop-reveal[data-reveal="right"] { transform: translateX(24px); }
.roop-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .roop-reveal { opacity: 1; transform: none; transition: none; } .roop-fade-up, .roop-fade-in { animation: none; } }

/* Hero slider */
.roop-slide { opacity: 0; visibility: hidden; transition: opacity 1.2s ease, visibility 0s linear 1.2s; }
.roop-slide img { transform: scale(1.06); transition: transform 7s ease-out; }
.roop-slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.2s ease; z-index: 1; }
.roop-slide.is-active img { transform: scale(1); }
.roop-slide .roop-slide-text { opacity: 0; transform: translateY(30px); transition: opacity .9s ease .3s, transform .9s ease .3s; }
.roop-slide.is-active .roop-slide-text { opacity: 1; transform: none; }
@keyframes roopBar { from { width: 0; } to { width: 100%; } }
.roop-hero-bar.is-running { animation: roopBar 6s linear forwards; }
.roop-hero-bar.is-done { width: 100% !important; }

/* Testimonials */
.roop-testi { position: absolute; inset: 0 0 auto 0; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s; }
.roop-testi.is-active { position: relative; opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease, transform .6s ease; }

/* Variation buttons */
.roop-attr-btn { border-color: color-mix(in oklab, var(--forest) 18%, transparent); color: var(--forest-deep); background: transparent; cursor: pointer; }
.roop-attr-btn.is-selected[data-attr-type="size"], .roop-attr-btn.is-selected[data-attr-type="other"] { background: var(--forest); border-color: var(--forest); color: var(--ivory); }
.roop-attr-btn.is-selected[data-attr-type="color"] { border-color: var(--forest); background: color-mix(in oklab, var(--sage) 18%, var(--ivory)); }
.roop-attr-btn.is-disabled { opacity: .35; text-decoration: line-through; }

/* Wishlist heart */
.roop-wish-btn.is-wished svg { fill: currentColor; }

/* Customize page */
.roop-size-btn { border-color: color-mix(in oklab, var(--forest) 22%, transparent); background: transparent; color: var(--forest-deep); }
.roop-size-btn.is-selected { border-color: var(--forest); background: var(--forest); color: var(--ivory); }

/* Toasts (sonner replacement) */
.roop-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.roop-toast { pointer-events: auto; min-width: 240px; max-width: 340px; padding: 14px 16px; background: var(--ivory); color: var(--forest-deep); border: 1px solid color-mix(in oklab, var(--forest) 18%, transparent); box-shadow: 0 12px 30px rgba(7,39,24,.18); font-size: .85rem; animation: roopFadeUp .35s ease both; }
.roop-toast.is-error { border-left: 3px solid #b42318; }
.roop-toast.is-success { border-left: 3px solid var(--champagne); }
@media (max-width: 640px) { .roop-toasts { left: 16px; right: 16px; } .roop-toast { max-width: none; } }

/* Search dropdown rows */
.roop-search-row { display: flex; gap: 12px; align-items: center; padding: 10px 14px; color: var(--forest-deep); transition: background .2s; }
.roop-search-row:hover { background: color-mix(in oklab, var(--sage) 18%, var(--ivory)); }
.roop-search-row img { width: 40px; height: 52px; object-fit: cover; background: var(--cream); }

/* Scrollbar for size chart */
.size-chart-scroll { scrollbar-width: thin; }

/* Pagination */
.roop-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid color-mix(in oklab, var(--forest) 18%, transparent); color: var(--forest-deep); }
.roop-pagination .page-numbers.current { background: var(--forest); color: var(--ivory); border-color: var(--forest); }

/* Prose (policy pages / editor content) */
.roop-prose h2, .roop-prose h3, .roop-prose h4 { font-family: var(--font-display); color: var(--forest-deep); margin: 2rem 0 .75rem; }
.roop-prose h2 { font-size: 1.5rem; } .roop-prose h3 { font-size: 1.25rem; }
.roop-prose p { margin: 0 0 1rem; }
.roop-prose ul { list-style: disc; padding-left: 1.4rem; margin: 0 0 1rem; }
.roop-prose ol { list-style: decimal; padding-left: 1.4rem; margin: 0 0 1rem; }
.roop-prose a { text-decoration: underline; color: var(--forest); }
.roop-prose img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------------ */
/* WooCommerce (cart, checkout, account) - styled with the theme tokens */
/* ------------------------------------------------------------------ */
.woocommerce { color: var(--forest-deep); }
.woocommerce a { color: inherit; }
.woocommerce-notices-wrapper { margin-bottom: 1.5rem; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; padding: 14px 18px; margin: 0 0 1.25rem; border: 1px solid color-mix(in oklab, var(--forest) 18%, transparent); border-left: 3px solid var(--champagne); background: color-mix(in oklab, var(--sage) 14%, var(--ivory)); font-size: .9rem; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.woocommerce-error { border-left-color: #b42318; }
.woocommerce-message .button, .woocommerce-info .button { order: 2; }

.woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .woocommerce #respond input#submit, .wc-block-components-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .9rem 2rem; background: var(--forest); color: var(--ivory) !important; border: 1px solid var(--forest); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; cursor: pointer; transition: box-shadow .3s, opacity .3s; text-decoration: none; border-radius: 0; }
.woocommerce .button:hover { box-shadow: 0 12px 30px rgba(7,39,24,.18); }
.woocommerce .button.alt, .woocommerce button.button.alt { background: var(--forest); }
.woocommerce .button:disabled, .woocommerce .button.disabled { opacity: .55; cursor: not-allowed; }

.woocommerce form .form-row { margin: 0 0 1.1rem; padding: 0; }
.woocommerce form .form-row label { display: block; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: .5rem; color: var(--forest-deep); }
.woocommerce input[type="text"], .woocommerce input[type="email"], .woocommerce input[type="tel"], .woocommerce input[type="password"], .woocommerce input[type="number"], .woocommerce input[type="search"], .woocommerce textarea, .woocommerce select, .select2-container--default .select2-selection--single {
  width: 100%; background: transparent; border: 1px solid color-mix(in oklab, var(--forest) 25%, transparent); padding: .75rem 1rem; font-size: .9rem; color: var(--forest-deep); outline: none; border-radius: 0; height: auto; }
.woocommerce input:focus, .woocommerce textarea:focus, .woocommerce select:focus { border-color: var(--forest); }
.select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 1.5; color: var(--forest-deep); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; }
.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 48%; float: left; }
.woocommerce form .form-row-last { float: right; }
.woocommerce form .form-row-wide { clear: both; }
.woocommerce form::after { content: ""; display: table; clear: both; }
.woocommerce .required { color: #b42318; text-decoration: none; }

/* Tables */
.woocommerce table.shop_table { width: 100%; border-collapse: collapse; border: 1px solid color-mix(in oklab, var(--forest) 14%, transparent); font-size: .9rem; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 1rem; text-align: left; border-bottom: 1px solid color-mix(in oklab, var(--forest) 10%, transparent); vertical-align: middle; }
.woocommerce table.shop_table thead th { background: color-mix(in oklab, var(--sage) 16%, var(--ivory)); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }
.woocommerce table.cart img { width: 72px; height: auto; }
.woocommerce table.cart .product-name a { font-family: var(--font-display); font-size: 1.15rem; }
.woocommerce table.cart td.actions .coupon { display: flex; gap: 8px; flex-wrap: wrap; }
.woocommerce table.cart td.actions .coupon input { width: auto; min-width: 160px; }
.woocommerce a.remove { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid color-mix(in oklab, var(--forest) 25%, transparent); border-radius: 999px; text-decoration: none; color: var(--forest) !important; }
.woocommerce .quantity .qty { width: 72px; text-align: center; }

.woocommerce .cart-collaterals { margin-top: 2rem; display: flex; justify-content: flex-end; }
.woocommerce .cart_totals { width: 100%; max-width: 440px; padding: 1.5rem; background: color-mix(in oklab, var(--sage) 14%, var(--ivory)); border: 1px solid color-mix(in oklab, var(--forest) 14%, transparent); }
.woocommerce .cart_totals h2 { font-size: 1.6rem; margin-bottom: 1rem; }
.woocommerce .wc-proceed-to-checkout .checkout-button { width: 100%; margin-top: 1rem; }

/* Checkout */
.woocommerce-checkout .col2-set { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: start; } .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { grid-column: 2; } .woocommerce-checkout form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 3; } }
.woocommerce-checkout h3, #order_review_heading { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 1rem; }
.woocommerce-checkout #payment { background: color-mix(in oklab, var(--sage) 14%, var(--ivory)); border: 1px solid color-mix(in oklab, var(--forest) 14%, transparent); padding: 1.25rem; }
.woocommerce-checkout #payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 1rem; }
.woocommerce-checkout #payment ul.payment_methods li { margin-bottom: .75rem; font-size: .9rem; }
.woocommerce-checkout #payment div.payment_box { background: var(--ivory); padding: .85rem 1rem; margin-top: .5rem; font-size: .85rem; }
.woocommerce-checkout #place_order { width: 100%; }
.woocommerce form .woocommerce-form__label-for-checkbox { display: flex; gap: .5rem; align-items: center; text-transform: none; letter-spacing: 0; font-size: .85rem; }

/* My account */
.woocommerce-account .woocommerce { display: block; }
.woocommerce-account #customer_login { display: grid; gap: 2.5rem; grid-template-columns: 1fr; max-width: 980px; margin: 0 auto; }
@media (min-width: 820px) { .woocommerce-account #customer_login { grid-template-columns: 1fr 1fr; } }
.woocommerce-account #customer_login .u-column1, .woocommerce-account #customer_login .u-column2, .woocommerce form.login, .woocommerce form.register { padding: 2rem; background: color-mix(in oklab, var(--sage) 16%, var(--ivory)); border: 1px solid color-mix(in oklab, var(--forest) 14%, transparent); }
.woocommerce-account #customer_login h2 { font-size: 1.8rem; margin-bottom: 1rem; }
.woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 { font-size: 1.6rem; margin: 0 0 1rem; }
.woocommerce-MyAccount-content address { font-style: normal; line-height: 1.7; }
.woocommerce-Addresses { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .woocommerce-Addresses { grid-template-columns: 1fr 1fr; } }
.woocommerce-Address { padding: 1.5rem; border: 1px solid color-mix(in oklab, var(--forest) 14%, transparent); }
.woocommerce-Address-title { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.woocommerce-Address-title a { text-decoration: underline; font-size: .8rem; }
.woocommerce-order-details, .woocommerce-customer-details { margin-top: 2rem; }

/* Remove default Woo float layout on loops we don't use */
.woocommerce ul.products { display: none; }
@media (max-width: 640px) { .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; float: none; } .woocommerce table.shop_table_responsive tr td::before { font-weight: 600; } }