:root{
  --final-red:#e30613;
  --final-red-dark:#b9040f;
  --final-red-soft:#fff0f1;
  --final-green:#14884f;
  --final-ink:#111821;
  --final-muted:#66717f;
  --final-line:#eadfda;
  --final-paper:#fffaf7;
  --final-shadow:0 28px 80px rgba(26,22,20,.12);
  --final-soft-shadow:0 16px 44px rgba(26,22,20,.08);
}
html{-webkit-text-size-adjust:100%}
body{
  background:
    radial-gradient(circle at 18% 0%,rgba(227,6,19,.09),transparent 34%),
    radial-gradient(circle at 90% 20%,rgba(227,6,19,.055),transparent 28%),
    #fbf4ef;
  color:var(--final-ink);
  overflow-x:hidden;
}
input,select,textarea{font-size:16px}
[hidden]{display:none!important}
.utility-bar,.topline{display:none}
.site-header,.catalog-header,.service-header,body>header{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(22px);
  border-bottom:1px solid var(--final-line);
  box-shadow:0 14px 45px rgba(25,23,22,.07);
}
.brand img,.catalog-brand img,.service-brand img,.logo img,.admin-brand img{
  background:#fff;
  box-shadow:0 16px 34px rgba(20,20,20,.08);
}
.site-header nav a,.catalog-header nav a,.service-header nav a,body>header nav a{
  color:#4f5863;
  font-weight:900;
}
.site-header nav a.active,.catalog-header nav a.active,.service-header nav a.active,body>header nav a.active{
  background:var(--final-red-soft);
  color:var(--final-red);
}
.button-primary,.primary-cta,.search-button,.order-submit,.submit-quote,.quote-button,.red-btn,.save-product,.save-homepage,.save-settings,.change-password,.add-product,.add-buyback,.new-orders-button{
  background:linear-gradient(135deg,var(--final-red),var(--final-red-dark));
  color:#fff;
  box-shadow:0 18px 38px rgba(227,6,19,.22);
}
.button-secondary,.secondary-cta,.header-help,.store-link,.button{
  border-radius:16px;
}
.site-header .shop-whatsapp,
.category-nav .shop-support,
.category-nav .nav-support,
.catalog-header .shop-whatsapp,
.service-header .shop-whatsapp,
body>header .shop-support,
body>header .shop-whatsapp:not(.whatsapp-float){
  display:none!important;
}
.whatsapp-float{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:120;
}
a[href*="wa.me"]:not(.whatsapp-float){
  display:none!important;
}

/* Option 1: homepage */
body:has(.hero.section-shell) .hero.section-shell{
  width:min(100% - 48px,1160px);
  margin:26px auto 34px;
  border-radius:34px;
  background:rgba(255,255,255,.90);
  border:1px solid var(--final-line);
  box-shadow:var(--final-shadow);
  grid-template-columns:minmax(0,.92fr) minmax(340px,.72fr);
  overflow:hidden;
  padding:clamp(34px,4.2vw,54px);
}
.hero.section-shell .section-label{color:var(--final-red);letter-spacing:.18em}
.hero.section-shell h1{
  font-size:clamp(2.85rem,5.5vw,4.95rem);
  line-height:.94;
  letter-spacing:-.06em;
  max-width:640px;
}
.hero.section-shell .hero-lead{
  max-width:600px;
  color:var(--final-muted);
  font-size:1.08rem;
}
.hero.section-shell .hero-media{
  min-height:390px;
  max-height:540px;
  border-radius:28px;
  box-shadow:0 30px 80px rgba(26,22,20,.16);
}
.hero.section-shell .hero-caption{
  left:20px;
  right:20px;
  bottom:20px;
  display:grid;
  gap:4px;
  border:1px solid rgba(255,255,255,.7);
}
.trust-list li{
  border-radius:999px;
  background:#fff;
  border:1px solid var(--final-line);
  box-shadow:0 12px 30px rgba(26,22,20,.06);
}
.service-card,.story-grid article,.why-grid article,.confidence-grid article,.panel,.homepage-editor-card{
  border-color:var(--final-line);
  box-shadow:var(--final-soft-shadow);
}
.service-card{
  border-radius:26px;
  min-height:190px;
}
.service-card:hover{transform:translateY(-3px)}
.home-shop-photo{
  margin:0;
  overflow:hidden;
}
.home-shop-photo,.home-shop-photo img,.home-shop-photo-caption{
  max-width:100%;
}
.cart-drawer:not(.open){
  right:0;
  transform:translateX(110%);
}

/* Option 3: customer shop */
.catalog-hero{
  width:min(100% - 48px,1160px);
  background:rgba(255,255,255,.92);
  border:1px solid var(--final-line);
  border-radius:34px;
  box-shadow:var(--final-shadow);
  padding:clamp(32px,4vw,52px);
}
.catalog-hero h1{
  font-family:"DM Sans",Inter,system-ui,sans-serif;
  font-size:clamp(2.4rem,4.2vw,4.3rem);
  line-height:.98;
}
.catalog-toolbar{
  width:min(100% - 48px,1160px);
  margin:24px auto;
  display:grid;
  grid-template-columns:minmax(280px,1.3fr) repeat(3,minmax(160px,.7fr));
  gap:12px;
  background:#fff;
  border:1px solid var(--final-line);
  border-radius:28px;
  padding:14px;
  box-shadow:var(--final-soft-shadow);
}
.catalog-toolbar label,.catalog-search{
  border:1px solid var(--final-line);
  background:#fff;
  border-radius:18px;
  padding:10px 12px;
  min-height:58px;
}
.catalog-search input,.catalog-toolbar select{
  border:0;
  outline:0;
  background:transparent;
}
.catalog-grid article,.product-card{
  border-radius:24px;
  box-shadow:0 16px 42px rgba(26,22,20,.08);
}
.catalog-grid img,.product-card img{
  border-radius:20px;
  background:#fff7f1;
  object-fit:contain;
}
.filter-row .filter,.chip-row span{
  border-radius:999px;
}

/* Option 2: sell-phone page */
main>.sell-hero{
  background:rgba(255,255,255,.92);
  border:1px solid var(--final-line);
  border-radius:34px;
  box-shadow:var(--final-shadow);
  width:min(100% - 48px,1160px);
}
.sell-hero .hero-copy h1{
  font-family:"DM Sans",Inter,system-ui,sans-serif;
  font-size:clamp(2.7rem,4.7vw,4.8rem);
  line-height:.96;
  letter-spacing:-.065em;
}
.sell-hero .hero-copy h1 em{
  font-family:"Newsreader",Georgia,serif;
  color:var(--final-red);
}
.quote-card,.sell-model-intro,.phone-search-box,.offer-card,.otp-panel{
  border-color:var(--final-line);
  box-shadow:var(--final-soft-shadow);
}
.valuation-progress span.active{
  background:var(--final-red);
  border-color:var(--final-red);
}
.valuation-progress-cashify{
  grid-template-columns:repeat(6,minmax(0,1fr));
}
.condition-step.active + .condition-step.active{
  margin-top:16px;
}
.condition-step.active{
  border-top:1px solid var(--final-line);
  padding-top:18px;
}
.condition-step.active:first-of-type{
  border-top:0;
  padding-top:0;
}
.sell-model-intro{
  border:1px solid var(--final-line);
  border-radius:24px;
  background:linear-gradient(135deg,#fff,#fff8f8);
  padding:22px;
  margin-bottom:16px;
}
.sell-model-intro h3{
  margin:12px 0 8px;
  font-size:clamp(1.35rem,2.2vw,1.9rem);
  letter-spacing:-.03em;
}
.sell-model-intro p{
  margin:0;
  color:var(--final-muted);
  max-width:620px;
}
.offer-bonus-badge,.max-value-preview{
  background:linear-gradient(180deg,#fff,#fff6f6);
  border-color:#ffdadd;
}

/* Sell-page condition cards: clean Cashify-style selectable options */
.sell-form fieldset.issue-checks,
.sell-form fieldset.accessory-checks{
  min-inline-size:0;
  border:0!important;
  margin:18px 0 0;
  padding:0;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.sell-form fieldset.issue-checks legend,
.sell-form fieldset.accessory-checks legend{
  grid-column:1/-1;
  float:none;
  width:auto;
  margin:0 0 2px;
  padding:0;
  color:var(--final-ink);
  font-size:1rem;
  font-weight:800;
  line-height:1.2;
}
.sell-form fieldset.issue-checks label,
.sell-form fieldset.accessory-checks label{
  min-width:0;
  min-height:64px;
  margin:0;
  padding:13px 15px;
  border:1px solid var(--final-line);
  border-radius:18px;
  background:#fff;
  display:grid!important;
  grid-template-columns:18px minmax(0,1fr);
  align-items:center;
  gap:12px;
  color:#242a31;
  font-size:.94rem;
  font-weight:800;
  line-height:1.24;
  white-space:normal;
  box-shadow:0 10px 24px rgba(26,22,20,.04);
  cursor:pointer;
  overflow:hidden;
}
.sell-form fieldset.issue-checks label span,
.sell-form fieldset.accessory-checks label span{
  min-width:0;
  display:block;
  overflow-wrap:break-word;
}
.sell-form fieldset.issue-checks input[type="checkbox"],
.sell-form fieldset.accessory-checks input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:0;
  accent-color:var(--final-red);
  justify-self:start;
}
.sell-form fieldset.issue-checks label:has(input:checked),
.sell-form fieldset.accessory-checks label:has(input:checked){
  border-color:var(--final-red);
  background:linear-gradient(180deg,#fff,#fff7f7);
  box-shadow:0 14px 30px rgba(215,25,32,.10);
  transform:translateY(-1px);
}
.sell-form .condition-step .question-intro{
  max-width:680px;
  margin:0 0 10px;
  color:var(--final-red);
  font-size:.86rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* Option 5: mobile UI */
.device-app-header{
  background:#fff;
  border-bottom:1px solid var(--final-line);
}
.device-bottom-nav{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(20px);
  border:1px solid var(--final-line);
  box-shadow:0 22px 50px rgba(20,20,20,.14);
}
.device-bottom-nav a.active{
  background:var(--final-red-soft);
  color:var(--final-red);
}
.device-bottom-nav a.active::before{
  background:linear-gradient(135deg,var(--final-red),var(--final-red-dark));
}

/* Option 6: admin panel */
.login-screen,.admin-shell{
  background:#f6f1ec;
}
.login-card{
  border:1px solid var(--final-line);
  border-radius:34px;
  box-shadow:var(--final-shadow);
}
.sidebar{
  background:#1e2730;
  color:#eef3f6;
}
.sidebar .nav-item{
  border-radius:16px;
  color:#c8d0d7;
}
.sidebar .nav-item.active{
  background:#fff;
  color:var(--final-red);
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
.admin-main{
  background:#f7f2ed;
}
.admin-main>header{
  background:rgba(255,255,255,.88);
  border:1px solid var(--final-line);
  border-radius:28px;
  box-shadow:var(--final-soft-shadow);
}
.stat-grid article,.commerce-stat-grid article,.dashboard-grid .panel,.analytics-layout .panel,.table-wrap{
  border-radius:26px;
  border:1px solid var(--final-line);
  box-shadow:var(--final-soft-shadow);
}
.stat-grid strong,.commerce-stat-grid strong{
  color:var(--final-red);
}

/* Canva-style button proportion pass: softer, real product-sized controls */
.button,
.button-primary,
.button-secondary,
.primary-cta,
.secondary-cta,
.store-link,
.header-help,
.search-button,
.order-submit,
.submit-quote,
.quote-button,
.save-product,
.save-homepage,
.save-settings,
.change-password,
.add-product,
.add-buyback,
.new-orders-button,
.refresh-orders,
.checkout,
.tracking-submit,
.flow-submit,
.find-device,
.otp-panel button,
.valuation-actions .back-step{
  width:auto;
  min-width:0;
  min-height:44px;
  padding:10px 18px;
  border-radius:14px;
  font-size:.94rem;
  line-height:1.1;
  letter-spacing:-.01em;
  box-shadow:0 12px 26px rgba(26,22,20,.08);
}
.button-primary,
.primary-cta,
.order-submit,
.submit-quote,
.quote-button,
.save-product,
.save-homepage,
.save-settings,
.change-password,
.add-product,
.add-buyback,
.new-orders-button{
  box-shadow:0 14px 30px rgba(227,6,19,.18);
}
.hero .button-row,
.button-row,
.hero-actions,
.valuation-actions,
.contact-actions{
  gap:10px;
}
.hero.section-shell .button-row .button{
  min-width:168px;
}
.search-button{
  min-height:48px;
  padding-inline:22px;
  border-radius:0 16px 16px 0;
}
.header-link,
.orders-button,
.deliver-to,
.cart-button,
.menu-button{
  min-height:46px;
  padding:8px 13px;
  border-radius:16px;
}
.cart-button{
  gap:8px;
}
.store-link,
.header-help{
  min-height:46px;
  padding-inline:18px;
}
.service-card b,
.text-link,
.catalogue-note a{
  width:max-content;
  max-width:100%;
}
.filter-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.filter-row .filter{
  width:auto;
  min-height:40px;
  padding:9px 15px;
  border-radius:999px;
  font-size:.9rem;
  box-shadow:0 8px 20px rgba(26,22,20,.05);
}
.valuation-actions{
  align-items:center;
}
.valuation-actions .quote-button,
.valuation-actions .submit-quote{
  min-width:190px;
}
.whatsapp-float{
  min-height:48px;
  padding:0 18px;
  border-radius:16px;
  box-shadow:0 15px 34px rgba(20,136,79,.22);
}
.device-search button{
  min-height:38px;
  height:38px;
  padding:0 13px;
  border-radius:12px;
}
.device-bottom-nav a{
  min-height:auto;
}
.menu-category{
  display:none!important;
}
.section-heading h2,
.section-head h2,
.service-directory h2,
.faq h2,
.guide h2,
.why h2,
.contact-band h2,
.panel h2{
  font-size:clamp(1.9rem,3.2vw,3rem);
  line-height:1.04;
}
.services-hero h1,.wholesale-hero h1{
  font-size:clamp(2.6rem,4.8vw,4.6rem);
  line-height:.98;
}
.services-hero,.wholesale-hero{
  width:min(100% - 48px,1160px);
  border-radius:34px;
  padding:clamp(32px,4vw,52px);
}

@media(max-width:980px){
  .catalog-toolbar{grid-template-columns:1fr 1fr}
  body:has(.hero.section-shell) .hero.section-shell,
  .catalog-hero,
  main>.sell-hero{width:min(100% - 24px,760px);border-radius:30px}
}
@media(max-width:760px){
  body{background:#fff}
  .site-header,.catalog-header,.service-header,body>header,.category-nav,.mobile-channel-nav,.topline{display:none!important}
  body.device-ui-ready{padding-bottom:96px}
  body:has(.hero.section-shell) .hero.section-shell,
  .catalog-hero,
  main>.sell-hero{
    width:100%;
    margin:0;
    border-radius:0;
    border-left:0;
    border-right:0;
    box-shadow:none;
  }
  .hero.section-shell .hero-media{display:none}
  .hero.section-shell h1,.catalog-hero h1,.sell-hero .hero-copy h1{font-size:3.2rem}
  .catalog-toolbar{width:calc(100% - 28px);grid-template-columns:1fr;margin:18px auto}
  .service-grid,.services-grid,.catalog-grid,.product-grid{grid-template-columns:1fr 1fr}
  .service-card{min-height:190px;padding:18px}
  .service-card h3{font-size:1.5rem}
  .shop-section,.service-section,.section-shell,.catalog-results{padding-inline:14px}
  .button,
  .button-primary,
  .button-secondary,
  .primary-cta,
  .secondary-cta,
  .order-submit,
  .submit-quote,
  .quote-button{
    width:auto;
  }
  .hero.section-shell .button-row .button,
  .valuation-actions .quote-button,
  .valuation-actions .submit-quote,
  .order-submit{
    min-width:0;
  }
  .hero.section-shell .button-row{
    align-items:flex-start;
  }
  .sell-form fieldset.issue-checks,
  .sell-form fieldset.accessory-checks{
    grid-template-columns:1fr;
  }
  .sell-form fieldset.issue-checks label,
  .sell-form fieldset.accessory-checks label{
    min-height:54px;
    border-radius:16px;
    padding:12px 14px;
    font-size:.92rem;
  }
}
@media(max-width:460px){
  .service-grid,.services-grid,.catalog-grid,.product-grid{grid-template-columns:1fr}
  .hero.section-shell .button-row .button{
    width:100%;
    min-height:46px;
  }
  .valuation-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .valuation-actions .back-step,
  .valuation-actions .quote-button,
  .valuation-actions .submit-quote,
  .order-submit,
  .checkout{
    width:100%;
  }
}