/* ============================================================
   Storefront Cloud — final design layer for the public site:
   homepage (sf-*), catalog/order flow (oc-*, studio-*, plan-*),
   configurator (cp-*, config-*). Loaded after every other
   storefront stylesheet so these overrides win.
   ============================================================ */

/* ---------- 0. Wordmark fix: logo.png already contains the name ---------- */
.catalog-site-brand:has(img) > span:last-child,
.sf-brand:has(img) > span:last-child {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ============================================================
   1. HOMEPAGE  (layouts/public + packages.blade.php)
   ============================================================ */

.storefront-home .sf-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .88) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
}
.storefront-home .sf-nav nav a {
    border-radius: 999px;
    padding: .45rem .85rem !important;
    font-weight: 700;
    color: #475569 !important;
    transition: background .18s, color .18s;
}
.storefront-home .sf-nav nav a:hover {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}
.storefront-home .sf-button.sf-outline {
    border-radius: 999px !important;
    border: 1px solid rgba(15, 23, 42, .16) !important;
    background: rgba(255, 255, 255, .8) !important;
    backdrop-filter: blur(8px);
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.storefront-home .sf-button.sf-outline:hover {
    transform: translateY(-2px);
    border-color: #93c5fd !important;
    box-shadow: 0 14px 28px -16px rgba(37, 99, 235, .55);
}

.storefront-home .sf-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(900px 420px at 82% 18%, rgba(56, 189, 248, .28), transparent 62%),
        linear-gradient(102deg, rgba(7, 17, 31, .96) 0%, rgba(9, 24, 47, .82) 44%, rgba(13, 38, 68, .45) 74%, rgba(37, 99, 235, .3) 100%);
}
.storefront-home .sf-hero-image { z-index: 0; }
.storefront-home .sf-hero-inner { position: relative; z-index: 2; }
.storefront-home .sf-hero .sf-eyebrow { color: #7dd3fc !important; font-weight: 800; letter-spacing: .04em; }
.storefront-home .sf-hero h1 { text-shadow: 0 18px 44px rgba(0, 0, 0, .45); }
.storefront-home .sf-button.sf-bright {
    background: linear-gradient(135deg, #10b981, #0d9488) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 16px 34px -14px rgba(13, 152, 136, .95) !important;
    transition: transform .18s, filter .18s, box-shadow .18s;
}
.storefront-home .sf-button.sf-bright:hover {
    transform: translateY(-2px);
    filter: brightness(1.07);
    box-shadow: 0 22px 42px -14px rgba(13, 152, 136, 1) !important;
}
.storefront-home .sf-hero-link {
    color: #e2e8f0 !important;
    border-radius: 999px;
    padding: .55rem .9rem;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(15, 23, 42, .35);
    backdrop-filter: blur(8px);
    transition: background .18s, border-color .18s;
}
.storefront-home .sf-hero-link:hover { background: rgba(37, 99, 235, .35) !important; border-color: rgba(147, 197, 253, .6); }
.storefront-home .sf-starting {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(15, 23, 42, .5);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    padding: .5rem .95rem !important;
    backdrop-filter: blur(10px);
    color: #e2e8f0 !important;
}
.storefront-home .sf-starting strong { color: #4ade80 !important; }

/* --- service tiles --- */
.storefront-home .sf-services > a {
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 44px -36px rgba(15, 23, 42, .7);
    transition: transform .22s, box-shadow .22s, border-color .22s;
}
.storefront-home .sf-services > a:hover {
    transform: translateY(-4px);
    border-color: #93c5fd !important;
    box-shadow: 0 30px 58px -34px rgba(37, 99, 235, .55);
}
.storefront-home .sf-service-icon { border-radius: 14px !important; box-shadow: 0 10px 20px -14px rgba(15, 23, 42, .55); }
.storefront-home .sf-service-icon.sf-vps { background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important; color: #047857 !important; }
.storefront-home .sf-service-icon.sf-dedicated { background: linear-gradient(135deg, #ffe4e6, #fecdd3) !important; color: #be123c !important; }
.storefront-home .sf-service-icon.sf-hosting { background: linear-gradient(135deg, #fef3c7, #fde68a) !important; color: #b45309 !important; }

/* --- product family tabs --- */
.storefront-home .sf-product-tabs {
    background: #eef2f7 !important;
    border: 1px solid rgba(15, 23, 42, .07) !important;
    border-radius: 16px !important;
    padding: 6px !important;
}
.storefront-home .sf-product-tabs a {
    border-radius: 12px !important;
    transition: background .18s, box-shadow .18s;
}
.storefront-home .sf-product-tabs a:hover { background: rgba(255, 255, 255, .7) !important; }
.storefront-home .sf-product-tabs a[aria-current="page"] {
    background: #fff !important;
    box-shadow: 0 12px 26px -16px rgba(15, 23, 42, .55);
}
.storefront-home .sf-product-tabs a[aria-current="page"] .sf-product-selected { color: #10b981 !important; display: block !important; }
.storefront-home .sf-product-logo { border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08); }

/* --- plan cards --- */
.storefront-home .sf-plan {
    position: relative;
    overflow: hidden;
    border-top: none !important;
    border-radius: 16px !important;
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, .09) !important;
    box-shadow: 0 24px 50px -40px rgba(15, 23, 42, .75);
    transition: transform .22s, box-shadow .22s, border-color .22s;
}
.storefront-home .sf-plan::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #3b82f6, #22d3ee);
}
.storefront-home .sf-plan[data-plan-kind="application"]::before { background: linear-gradient(90deg, #10b981, #6ee7b7); }
.storefront-home .sf-plan[data-plan-kind="dedicated"]::before { background: linear-gradient(90deg, #f43f5e, #fb923c); }
.storefront-home .sf-plan[data-plan-kind="hosting"]::before { background: linear-gradient(90deg, #f59e0b, #fde047); }
.storefront-home .sf-plan:hover {
    transform: translateY(-6px);
    border-color: #bfdbfe !important;
    box-shadow: 0 40px 72px -44px rgba(15, 23, 42, .8);
}
.storefront-home .sf-plan-type {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: #f1f5f9;
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 999px;
    padding: .32rem .7rem !important;
    font-weight: 700;
    color: #334155 !important;
}
.storefront-home .sf-promotion {
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    padding: .3rem .6rem !important;
}
.storefront-home .sf-promotion strong { color: #047857 !important; }
.storefront-home .sf-price strong { color: #0f1d36 !important; }
.storefront-home .sf-plan-locations span {
    background: #f1f5f9;
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 999px;
    padding: .28rem .6rem !important;
    color: #475569 !important;
}
.storefront-home .sf-plan-order {
    background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 999px !important;
    box-shadow: 0 18px 34px -18px rgba(37, 99, 235, .95) !important;
    transition: transform .18s, filter .18s, box-shadow .18s;
}
.storefront-home .sf-plan-order:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 24px 44px -18px rgba(37, 99, 235, 1) !important; }

/* --- account band --- */
.storefront-home .sf-account-band {
    background: linear-gradient(180deg, #eef6ff 0%, #f0fdfa 55%, #ecfdf5 100%) !important;
    border-top: 1px solid rgba(37, 99, 235, .1) !important;
    border-bottom: 1px solid rgba(13, 148, 136, .12) !important;
}
.storefront-home .sf-features article { background: rgba(255, 255, 255, .7); border: 1px solid rgba(15, 23, 42, .06); border-radius: 14px; padding: 18px; transition: transform .2s, box-shadow .2s; }
.storefront-home .sf-features article:hover { transform: translateY(-3px); box-shadow: 0 24px 46px -34px rgba(15, 23, 42, .6); }
.storefront-home .sf-features article i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: linear-gradient(135deg, #dbeafe, #e0f2fe);
    color: #2563eb !important;
    margin-bottom: 12px;
    box-shadow: 0 12px 22px -14px rgba(37, 99, 235, .8);
}

/* --- locations + FAQ + footer --- */
.storefront-home .sf-locations > div {
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 40px -34px rgba(15, 23, 42, .7);
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.storefront-home .sf-locations > div:hover {
    transform: translateY(-3px);
    border-color: #93c5fd !important;
    box-shadow: 0 26px 50px -34px rgba(37, 99, 235, .55);
}
.storefront-home .sf-faq details {
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 14px !important;
    margin-bottom: 10px !important;
    padding: 0 18px !important;
    transition: border-color .18s, box-shadow .18s;
}
.storefront-home .sf-faq details:hover { border-color: #bfdbfe !important; }
.storefront-home .sf-faq details[open] { border-color: #93c5fd !important; box-shadow: 0 24px 48px -38px rgba(37, 99, 235, .6); }
.storefront-home .sf-faq summary:hover { color: #1d4ed8 !important; }
.storefront-home .sf-faq summary i {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: #eff6ff;
    color: #2563eb !important;
}
.storefront-home .sf-faq details[open] summary i { background: #2563eb !important; color: #fff !important; transform: rotate(45deg); }
.storefront-home .sf-footer {
    background: linear-gradient(180deg, #0b1526, #0f1d36) !important;
    border-top: 1px solid rgba(148, 197, 255, .18) !important;
    color: #cbd5e1 !important;
}
.storefront-home .sf-footer .sf-wrap > span { color: #94a3b8 !important; }
.storefront-home .sf-footer nav a { color: #94a3b8 !important; transition: color .18s; }
.storefront-home .sf-footer nav a:hover { color: #7dd3fc !important; }

/* ============================================================
   2. CATALOG CHROME  (layouts/public-catalog header + footer)
   ============================================================ */

.catalog-site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .86) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
}
.catalog-site-nav { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.catalog-site-brand img { height: 30px; width: auto; }
.catalog-site-links a {
    border-radius: 999px !important;
    padding: .45rem .85rem !important;
    font-weight: 700;
    color: #475569 !important;
    transition: background .18s, color .18s;
}
.catalog-site-links a:hover { background: #eff6ff !important; color: #1d4ed8 !important; }
.catalog-site-links a.is-current {
    background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
    color: #fff !important;
    border-bottom: 0 !important;
    text-decoration: none !important;
    box-shadow: 0 12px 24px -12px rgba(37, 99, 235, .9) !important;
}
.catalog-site-primary {
    background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 14px 28px -14px rgba(37, 99, 235, .95) !important;
    transition: transform .18s, filter .18s;
}
.catalog-site-primary:hover { transform: translateY(-2px); filter: brightness(1.07); }
.catalog-site-signin { border-radius: 999px !important; border: 1px solid rgba(15, 23, 42, .15) !important; transition: border-color .18s, background .18s; }
.catalog-site-signin:hover { border-color: #93c5fd !important; background: #eff6ff !important; }
.catalog-site-menu { border-radius: 10px !important; }
.catalog-site-footer { background: linear-gradient(180deg, #0a1424, #0f1d36) !important; }
.catalog-site-footer strong { color: #fff !important; }
.catalog-site-footer a { transition: color .18s; }
.catalog-site-footer a:hover { color: #7dd3fc !important; }
.catalog-site-footer-bottom { border-top: 1px solid rgba(148, 197, 255, .16) !important; }
.catalog-site-footer-bottom a { color: #93c5fd !important; }

/* ============================================================
   3. ORDER — step 1: categories grid  (order-catalog)
   ============================================================ */

.order-catalog .oc-heading {
    position: relative;
    overflow: hidden;
    background: linear-gradient(125deg, #0b1526 0%, #123258 52%, #155e8a 100%) !important;
    border: 1px solid rgba(125, 211, 252, .28) !important;
    border-radius: 18px !important;
    padding: 34px !important;
    box-shadow: 0 36px 72px -48px rgba(8, 25, 50, .95);
}
.order-catalog .oc-heading::after {
    content: '';
    position: absolute;
    right: -70px;
    top: -90px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 189, 248, .4), transparent 62%);
    pointer-events: none;
}
.order-catalog .oc-heading > * { position: relative; z-index: 1; }
.order-catalog .oc-heading h1 { font-weight: 850; letter-spacing: -.02em; }
.order-catalog .oc-heading .oc-secondary-link {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(15, 23, 42, .35);
    padding: .55rem .95rem !important;
    backdrop-filter: blur(8px);
}

.order-catalog .oc-steps {
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 16px !important;
    padding: 6px 14px !important;
    box-shadow: 0 20px 44px -38px rgba(15, 23, 42, .7);
}
.order-catalog .oc-steps li > span {
    border-radius: 10px !important;
    background: #eef2f7 !important;
    border: 1px solid rgba(15, 23, 42, .1) !important;
    color: #64748b !important;
}
.order-catalog .oc-steps [aria-current] { color: #1d4ed8 !important; font-weight: 800; }
.order-catalog .oc-steps [aria-current] > span {
    background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 10px 18px -10px rgba(37, 99, 235, .95);
}

.order-catalog .oc-section-heading .oc-eyebrow { color: #0284c7 !important; }
.order-catalog .oc-totals span { background: #fff; border: 1px solid rgba(15, 23, 42, .08); border-radius: 999px; padding: .4rem .75rem !important; }

.order-catalog .oc-tools {
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 16px !important;
    padding: 10px !important;
    box-shadow: 0 18px 40px -36px rgba(15, 23, 42, .7);
}
.order-catalog .oc-filters button { border-radius: 999px !important; transition: background .18s, color .18s, box-shadow .18s; }
.order-catalog .oc-filters button:hover:not([aria-pressed="true"]) { background: #eff6ff !important; color: #1d4ed8 !important; }
.order-catalog .oc-filters button[aria-pressed="true"] {
    background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 12px 22px -12px rgba(20, 184, 166, .9);
}
.order-catalog .oc-filters button[aria-pressed="true"] > span { background: rgba(255, 255, 255, .22) !important; color: #fff !important; }
.order-catalog .oc-search input {
    border-radius: 999px !important;
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, .14) !important;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.order-catalog .oc-search input:focus {
    background: #fff !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .15) !important;
}

.order-catalog .oc-card {
    position: relative;
    overflow: hidden;
    border-top: none !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 52px -44px rgba(15, 23, 42, .8);
    transition: transform .22s, box-shadow .22s, border-color .22s;
}
.order-catalog .oc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    z-index: 2;
    background: linear-gradient(90deg, var(--oc-tone), color-mix(in srgb, var(--oc-tone) 35%, #22d3ee));
}
.order-catalog .oc-card:hover {
    transform: translateY(-5px);
    border-color: rgba(37, 99, 235, .45) !important;
    box-shadow: 0 38px 68px -44px rgba(15, 23, 42, .85);
}
.order-catalog .oc-icon { border-radius: 14px !important; box-shadow: 0 12px 22px -16px rgba(15, 23, 42, .6); }
.order-catalog .oc-pricing strong { color: #0f1d36 !important; }
.order-catalog .oc-locations span { border-radius: 999px; }
.order-catalog .oc-choose {
    background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 9px 16px !important;
    box-shadow: 0 16px 30px -16px rgba(37, 99, 235, .95);
    transition: transform .18s, filter .18s;
}
.order-catalog .oc-choose:hover { transform: translateY(-2px); filter: brightness(1.07); color: #fff !important; }
.order-catalog .oc-empty {
    background: #fff !important;
    border: 1px dashed rgba(37, 99, 235, .35) !important;
    border-radius: 16px !important;
}

/* ============================================================
   4. ORDER — step 2: plan selection  (catalog-plans)
   ============================================================ */

.studio-heading {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, #ffffff 42%, #eef6ff 100%) !important;
    border: 1px solid rgba(37, 99, 235, .14) !important;
    border-radius: 18px !important;
    box-shadow: 0 32px 64px -50px rgba(15, 23, 42, .8);
}
.studio-kicker { color: #0284c7 !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.studio-breadcrumb a { border-radius: 999px; }
.studio-starting strong { color: #0284c7 !important; }
.studio-config-price strong { color: #0284c7 !important; }
.studio-art { border-radius: 14px; overflow: hidden; }

.catalog-plans .plans-progress {
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 44px -40px rgba(15, 23, 42, .7);
}
.catalog-plans .plans-summary {
    background: linear-gradient(135deg, #f8fafc, #eef6ff) !important;
    border: 1px solid rgba(37, 99, 235, .14) !important;
    border-radius: 16px !important;
}
.catalog-plans .plans-summary-icon { border-radius: 13px !important; box-shadow: 0 12px 22px -16px rgba(15, 23, 42, .7); }
.catalog-plans .plan-region-filter { background: #fff !important; border: 1px solid rgba(15, 23, 42, .08) !important; border-radius: 16px !important; }
.catalog-plans .plan-region-pill {
    border-radius: 999px !important;
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, .12) !important;
    transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
}
.catalog-plans .plan-region-pill:hover { border-color: #93c5fd !important; color: #1d4ed8 !important; }
.catalog-plans .plan-region-pill.active {
    background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 12px 24px -12px rgba(37, 99, 235, .9) !important;
}
.catalog-plans .plan-region-pill.active * { color: #fff !important; }

.catalog-plans .plan-grid { gap: 22px; }
.catalog-plans .plan-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px !important;
    border: 1px solid rgba(15, 23, 42, .09) !important;
    box-shadow: 0 24px 54px -46px rgba(15, 23, 42, .8);
    transition: transform .22s, box-shadow .22s, border-color .22s;
}
.catalog-plans .plan-card:hover {
    transform: translateY(-5px);
    border-color: #bfdbfe !important;
    box-shadow: 0 40px 74px -46px rgba(15, 23, 42, .85);
}
.catalog-plans .plan-card-featured { border-color: #2563eb !important; box-shadow: 0 34px 66px -44px rgba(37, 99, 235, .7) !important; }
.catalog-plans .plan-card-featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #2563eb, #22d3ee);
    z-index: 2;
}
.catalog-plans .plan-featured-ribbon { background: linear-gradient(135deg, #2563eb, #0ea5e9) !important; }
.catalog-plans .plan-head { background: linear-gradient(180deg, #f8fbff, #fff); }
.catalog-plans .plan-name { color: #0f1d36 !important; }
.catalog-plans .plan-price strong { color: #0f1d36 !important; }
.catalog-plans .plan-spec { background: #f8fafc !important; border-radius: 12px; }
.catalog-plans .plan-badge { border-radius: 999px !important; }
.catalog-plans .plan-capacity { border-radius: 999px !important; }

/* ============================================================
   5. ORDER — step 3: configurator  (catalog-config)
   ============================================================ */

.catalog-config .cloud-order-strip { gap: 12px; }
.catalog-config .cloud-order-metric {
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 38px -36px rgba(15, 23, 42, .75);
}
.catalog-config .cloud-order-metric-icon { border-radius: 12px !important; }
.catalog-config .cloud-order-progress { gap: 8px; }
.catalog-config .cloud-order-step {
    border-radius: 999px !important;
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, .1) !important;
    transition: background .18s, color .18s, border-color .18s;
}
.catalog-config .cloud-order-step.is-complete { background: #ecfdf5 !important; border-color: #a7f3d0 !important; color: #047857 !important; }
.catalog-config .cloud-order-step.is-current {
    background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 12px 22px -12px rgba(37, 99, 235, .95);
}

.catalog-config .config-section-nav { gap: 8px !important; }
.catalog-config .config-section-nav a,
.catalog-config .config-section-nav button {
    border-radius: 999px !important;
    transition: background .18s, color .18s;
}
.catalog-config .config-section-nav a:hover,
.catalog-config .config-section-nav button:hover { background: #eff6ff !important; color: #1d4ed8 !important; }

.catalog-config .order-section,
.catalog-config .cp-card.order-section {
    border-radius: 16px !important;
    border-color: rgba(15, 23, 42, .09) !important;
    box-shadow: 0 26px 56px -50px rgba(15, 23, 42, .85);
    transition: box-shadow .22s;
}
.catalog-config .order-section:hover { box-shadow: 0 34px 66px -50px rgba(15, 23, 42, .9); }
.catalog-config .cp-card-title { font-weight: 800 !important; letter-spacing: -.01em; color: #0f1d36 !important; }

.catalog-config .cp-choice {
    border-radius: 14px !important;
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, .12) !important;
    transition: transform .18s, border-color .18s, box-shadow .18s;
}
.catalog-config .cp-choice:hover {
    border-color: #93c5fd !important;
    transform: translateY(-2px);
    box-shadow: 0 20px 42px -36px rgba(37, 99, 235, .85);
}
.catalog-config .btn-check:checked + .cp-choice,
.experience-page.catalog-config .order-section .btn-check:checked + .cp-choice {
    background: linear-gradient(180deg, #eff6ff, #fff) !important;
    border-color: #2563eb !important;
    box-shadow: 0 24px 48px -38px rgba(37, 99, 235, .85) !important;
}
.catalog-config .btn-check:checked + .cp-choice .config-selection-state { color: #1d4ed8 !important; font-weight: 800; }
.catalog-config .config-visual { border-radius: 12px !important; }

.catalog-config .order-summary-card,
.experience-page.catalog-config .order-summary-card,
.customer-studio.studio-config #catalogOrderForm .order-summary-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px !important;
    border-top: 0 !important;
    box-shadow: 0 34px 68px -52px rgba(15, 23, 42, .9) !important;
}
.catalog-config .order-summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #2563eb, #22d3ee);
    z-index: 2;
}
.catalog-config .config-summary-mark { background: linear-gradient(135deg, #2563eb, #0ea5e9) !important; color: #fff !important; border-radius: 11px !important; }
.catalog-config .cp-kv-row { border-radius: 8px; transition: background .15s; }
.catalog-config .cp-kv-row:hover { background: #f8fafc; }
.catalog-config .order-total,
.customer-studio.studio-config #catalogOrderForm .order-total {
    background: linear-gradient(135deg, #d1fae5, #ccfbf1) !important;
    border: 1px solid rgba(16, 185, 129, .4) !important;
    border-radius: 14px !important;
}
.catalog-config .order-total .cp-stat-value { color: #047857 !important; font-weight: 850; }
.catalog-config .order-total .cp-stat-label,
.catalog-config .order-total .cp-stat-note { color: #065f46 !important; }
.catalog-config .config-legal-box {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, .1) !important;
    border-radius: 12px !important;
}
.catalog-config .config-renewal-box { border-radius: 12px; }
.catalog-config .coupon-input-row .form-control { border-radius: 999px 0 0 999px !important; transition: border-color .18s, box-shadow .18s; }
.catalog-config .coupon-input-row .form-control:focus { border-color: #2563eb !important; box-shadow: 0 0 0 4px rgba(37, 99, 235, .15) !important; }
.catalog-config .coupon-icon-button { border-radius: 0 999px 999px 0 !important; background: linear-gradient(135deg, #2563eb, #0ea5e9) !important; border: 0 !important; color: #fff !important; }
.catalog-config .one-click-product { border-radius: 14px; }
.catalog-config .order-security-note,
.catalog-config .cp-card-note { border-radius: 12px; }

/* primary/secondary buttons across the order flow */
.order-catalog .cp-btn,
.catalog-plans .cp-btn,
.catalog-config .cp-btn {
    border-radius: 999px !important;
    font-weight: 800 !important;
    transition: transform .18s, filter .18s, box-shadow .18s, background .18s, border-color .18s;
}
.order-catalog .cp-btn-primary,
.catalog-plans .cp-btn-primary,
.catalog-config .cp-btn-primary {
    background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 18px 34px -18px rgba(37, 99, 235, .95) !important;
}
.order-catalog .cp-btn-primary:hover,
.catalog-plans .cp-btn-primary:hover,
.catalog-config .cp-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.07); color: #fff !important; }
.order-catalog .cp-btn-highlight,
.catalog-plans .cp-btn-highlight,
.catalog-config .cp-btn-highlight {
    background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
    border: 0 !important;
    color: #1f1300 !important;
    box-shadow: 0 16px 30px -16px rgba(245, 158, 11, .9) !important;
}
.order-catalog .cp-btn-highlight:hover,
.catalog-plans .cp-btn-highlight:hover,
.catalog-config .cp-btn-highlight:hover { transform: translateY(-2px); filter: brightness(1.05); color: #1f1300 !important; }
.order-catalog .cp-btn-ghost,
.catalog-plans .cp-btn-ghost,
.catalog-config .cp-btn-ghost {
    border: 1px solid rgba(15, 23, 42, .16) !important;
    background: #fff !important;
    color: #334155 !important;
}
.order-catalog .cp-btn-ghost:hover,
.catalog-plans .cp-btn-ghost:hover,
.catalog-config .cp-btn-ghost:hover { border-color: #93c5fd !important; background: #eff6ff !important; color: #1d4ed8 !important; }

/* ============================================================
   6. RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
    .order-catalog .oc-heading { padding: 24px 20px !important; border-radius: 14px !important; }
    .order-catalog .oc-heading::after { width: 240px; height: 240px; right: -60px; top: -70px; }
    .catalog-plans .plan-card:hover,
    .order-catalog .oc-card:hover,
    .storefront-home .sf-plan:hover { transform: none; }
    .storefront-home .sf-features article { padding: 14px; }
}

@media (max-width: 640px) {
    .catalog-site-nav { height: auto; padding: 10px 16px; }
    .catalog-site-brand img { height: 26px; }
    .order-catalog .oc-tools { padding: 8px !important; }
    .order-catalog .oc-steps { padding: 6px 10px !important; }
    .order-catalog .oc-steps li { padding: 12px 8px !important; }
    .studio-heading { border-radius: 14px !important; }
    .catalog-config .cloud-order-metric { border-radius: 12px !important; }
    .storefront-home .sf-nav nav a { padding: .4rem .6rem !important; font-size: 14px; }
    .storefront-home .sf-faq details { padding: 0 14px !important; }
}