Align catalog detail page geometry

app/components/catalog/CatalogConfigurator.vue

@@ -626,11 +626,11 @@ function productDetailPath(group: ProductGroup) {
   <section class="space-y-5">
     <div v-if="loading" class="alert surface-card border-0">Загрузка каталога...</div>
     <div v-else-if="error" class="alert alert-error">{{ error.message }}</div>
-    <div v-else-if="selectedGroup" class="relative mx-auto max-w-[1380px] px-1 pb-10 sm:px-0">
+    <div v-else-if="selectedGroup" class="relative pb-10">
       <NuxtLink
         v-if="previousGroup"
         :to="productDetailPath(previousGroup)"
-        class="absolute left-0 top-28 z-10 hidden w-44 -translate-x-[108%] rounded-[28px] border border-[#e6efe9] bg-white p-3 shadow-[0_20px_40px_rgba(18,56,36,0.08)] transition hover:-translate-x-[114%] hover:shadow-[0_28px_48px_rgba(18,56,36,0.12)] 2xl:block"
+        class="absolute left-[-212px] top-28 z-10 hidden w-44 rounded-[28px] border border-[#e6efe9] bg-white p-3 shadow-[0_20px_40px_rgba(18,56,36,0.08)] transition hover:-translate-x-2 hover:shadow-[0_28px_48px_rgba(18,56,36,0.12)] 2xl:block"
       >
         <img
           :src="createProductCover(previousGroup.typeLabel, previousGroup.key)"
@@ -644,7 +644,7 @@ function productDetailPath(group: ProductGroup) {
       <NuxtLink
         v-if="nextGroup"
         :to="productDetailPath(nextGroup)"
-        class="absolute right-0 top-28 z-10 hidden w-44 translate-x-[108%] rounded-[28px] border border-[#e6efe9] bg-white p-3 shadow-[0_20px_40px_rgba(18,56,36,0.08)] transition hover:translate-x-[114%] hover:shadow-[0_28px_48px_rgba(18,56,36,0.12)] 2xl:block"
+        class="absolute right-[-212px] top-28 z-10 hidden w-44 rounded-[28px] border border-[#e6efe9] bg-white p-3 shadow-[0_20px_40px_rgba(18,56,36,0.08)] transition hover:translate-x-2 hover:shadow-[0_28px_48px_rgba(18,56,36,0.12)] 2xl:block"
       >
         <img
           :src="createProductCover(nextGroup.typeLabel, nextGroup.key)"
@@ -655,7 +655,7 @@ function productDetailPath(group: ProductGroup) {
         <p class="mt-3 text-sm font-semibold leading-5 text-[#163624]">{{ nextGroup.typeLabel }}</p>
       </NuxtLink>
 
-      <header class="mb-5 flex items-center gap-4 px-3 sm:px-6 xl:px-8">
+      <header class="mb-5 flex items-center gap-4">
         <NuxtLink
           to="/products"
           class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-[#dce9e1] bg-white text-xl text-[#163624] shadow-[0_10px_24px_rgba(18,56,36,0.06)] transition hover:-translate-y-0.5"
@@ -669,7 +669,7 @@ function productDetailPath(group: ProductGroup) {
         </div>
       </header>
 
-      <div class="mb-5 grid gap-3 px-3 sm:px-6 2xl:hidden">
+      <div class="mb-5 grid gap-3 2xl:hidden">
         <NuxtLink
           v-if="previousGroup"
           :to="productDetailPath(previousGroup)"
@@ -699,7 +699,7 @@ function productDetailPath(group: ProductGroup) {
         </NuxtLink>
       </div>
 
-      <div class="grid gap-5 px-3 sm:px-6 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.15fr)_320px] xl:px-8">
+      <div class="grid gap-5 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.15fr)_320px]">
         <div class="space-y-3">
           <div class="overflow-hidden rounded-[32px] border border-[#e6efe9] bg-white p-4 shadow-[0_20px_40px_rgba(18,56,36,0.06)]">
             <img
@@ -765,7 +765,7 @@ function productDetailPath(group: ProductGroup) {
 
         <aside class="self-start xl:sticky xl:top-24">
           <div class="rounded-[30px] border border-[#e6efe9] bg-white p-5 shadow-[0_24px_48px_rgba(18,56,36,0.08)]">
-            <p class="mt-2 text-2xl font-bold leading-tight text-[#163624]">{{ articleLabel(selectedGroup) }}</p>
+            <p class="mt-1 text-lg font-medium leading-tight text-[#163624]">{{ articleLabel(selectedGroup) }}</p>
 
             <button
               v-if="selectedQty(selectedGroup) === 0"
@@ -800,11 +800,10 @@ function productDetailPath(group: ProductGroup) {
         </aside>
       </div>
 
-      <div class="mt-8 px-3 sm:px-6 xl:px-8">
+      <div class="mt-8">
-        <div class="rounded-[32px] border border-[#e6efe9] bg-white p-5 shadow-[0_20px_40px_rgba(18,56,36,0.06)]">
+        <p class="mb-4 text-base font-semibold text-[#163624]">Доступные варианты</p>
-          <p class="text-base font-semibold text-[#163624]">Доступные варианты</p>
 
-          <div class="mt-4 overflow-x-auto rounded-[24px] border border-[#edf4ef]">
+        <div class="overflow-x-auto rounded-[24px] border border-[#edf4ef] bg-white">
           <table class="table bg-white">
             <thead>
               <tr class="text-[#587064]">
@@ -870,7 +869,6 @@ function productDetailPath(group: ProductGroup) {
         </div>
       </div>
     </div>
-    </div>
     <div v-else class="alert surface-card border-0">Такой тип товара не найден.</div>
   </section>
 </template>