/* ============================================================
WIIZE FOCUS — FULL PAGE STYLES
Bricks → Settings → Custom Code → Custom CSS
============================================================ */
/* ============================================================
1. FOCUS DETAILS — INTRO SECTION
(eyebrow + date слева, sponsor справа)
============================================================ */
body #np-focus-intro {
max-width: 1240px;
width: 100%;
margin: 0 auto;
padding: 40px 20px;
box-sizing: border-box;
}
body .np-focus-intro-row {
display: flex ;
flex-direction: row ;
justify-content: space-between ;
align-items: flex-start ;
gap: 40px ;
}
/* ---- LEFT: title + date ---- */
body .np-focus-intro-text {
display: flex ;
flex-direction: column ;
align-items: flex-start ;
gap: 4px ;
}
body .np-focus-intro-eyebrow {
font-family: 'Cormorant Garamond', serif ;
font-weight: 500 ;
font-size: 48px ;
line-height: 1.1 ;
color: #000 ;
margin: 0 ;
text-transform: none ;
}
body .np-focus-intro-date {
font-family: 'Cormorant Garamond', serif ;
font-weight: 400 ;
font-size: 32px ;
line-height: 1.2 ;
color: #000 ;
margin: 0 ;
text-transform: capitalize ;
}
/* ---- RIGHT: sponsor placeholder ---- */
body .np-focus-intro-sponsor {
width: 180px ;
height: 110px ;
flex: 0 0 180px ;
background-color: #A6032F ;
border-radius: 5px ;
padding: 7px 16px 14px 16px ;
box-sizing: border-box ;
display: flex ;
flex-direction: column ;
gap: 6px ;
}
body .np-focus-intro-sponsor-label {
font-family: 'Red Hat Display', sans-serif;
font-weight: 900;
font-size: 16px;
line-height: 1.1;
color: #FFF;
white-space: pre-line; /* поддерживает \n из переводов для переноса строк */
}
body .np-focus-intro-sponsor-size {
font-family: 'Red Hat Display', sans-serif;
font-weight: 400;
font-size: 16px;
color: #FFF;
}
/* Responsive — intro */
@media (max-width: 1024px) {
body #np-focus-intro {
padding: 30px 40px ;
}
}
@media (max-width: 767px) {
body #np-focus-intro {
padding: 24px 16px ;
}
body .np-focus-intro-row {
flex-direction: column ;
gap: 20px ;
}
body .np-focus-intro-eyebrow {
font-size: 32px ;
}
body .np-focus-intro-sponsor {
align-self: flex-start ;
}
}
@media (max-width: 480px) {
body .np-focus-intro-eyebrow {
font-size: 26px ;
}
}
/* ============================================================
2. FOCUS DETAILS — TITLE + ICONS SECTION
(FOCUS TITLE + description слева, 4 серые иконки справа)
============================================================ */
body #np-focus-card,
body .np-focus-card {
max-width: 1240px ;
width: 100% ;
margin: 0 auto ;
padding: 0px 20px ;
box-sizing: border-box ;
display: grid ;
grid-template-columns: 1fr 1fr ;
grid-template-areas: "text icons" ;
gap: 80px ;
align-items: start ;
}
body .np-focus-card-text {
grid-area: text ;
display: flex ;
flex-direction: column ;
}
body .np-focus-card-title {
font-family: 'Cormorant Garamond', serif ;
font-weight: 500 ;
font-size: 80px ;
line-height: 1.05 ;
color: #000 ;
margin: 0 0 32px 0 ;
text-transform: uppercase ;
letter-spacing: -0.01em ;
word-break: break-word ;
}
body .np-focus-card-desc {
font-family: 'Red Hat Display', sans-serif ;
font-weight: 300 ;
font-size: 11px ;
line-height: 1.5 ;
letter-spacing: 0.1em ;
text-transform: uppercase ;
color: #000 ;
margin: 0 ;
}
/* Контейнер иконок переиспользует .np-g3-card-icons (см. секцию 4 ниже).
Здесь только привязываем его в правую колонку и убираем margin-bottom,
которое стоит на листинге (там после иконок ещё excerpt+кнопка). */
body .np-focus-card .np-g3-card-icons {
grid-area: icons ;
margin: 0 ;
}
/* Responsive — title+icons */
@media (max-width: 1024px) {
body #np-focus-card,
body .np-focus-card {
padding: 30px 40px ;
gap: 50px ;
}
body .np-focus-card-title {
font-size: 64px ;
}
}
@media (max-width: 767px) {
body #np-focus-card,
body .np-focus-card {
padding: 24px 16px ;
grid-template-columns: 1fr ;
grid-template-areas:
"text"
"icons" ;
gap: 32px ;
}
body .np-focus-card-title {
font-size: 48px ;
}
}
@media (max-width: 480px) {
body .np-focus-card-title {
font-size: 36px ;
}
}
/* ============================================================
3. PAST MONTH SECTION (на листинге Focus Of The Month)
============================================================ */
body #np-g3-cards {
padding: 40px 120px 60px 120px;
}
body #np-g3-cards-inner {
flex-direction: column ;
gap: 0 ;
}
body #np-g3-past-month {
font-family: 'Cormorant Garamond', serif ;
font-weight: 600 ;
font-size: 32px ;
line-height: 1.21 ;
color: #000 ;
margin: 0 0 12px 0 ;
}
body .np-g3-divider {
border-top: 0.5px solid #AAAAAA ;
width: 100% ;
margin: 0 0 40px 0 ;
}
body #np-g3-cards-grid {
display: flex ;
flex-wrap: wrap ;
gap: 24px ;
align-items: stretch ;
width: 100% ;
flex-direction: row ;
}
body .np-g3-card {
flex: 1 1 calc(50% - 12px) ;
max-width: calc(50% - 12px) ;
padding: 0 ;
display: flex ;
flex-direction: column ;
}
body .np-g3-card-month {
font-family: 'Cormorant Garamond', serif ;
font-weight: 600 ;
font-size: 32px ;
line-height: 1.21 ;
color: #000 ;
margin: 0 0 24px 0 ;
text-transform: capitalize ;
}
/* ============================================================
4. ICONS GRID (общая для листинга и детальной страницы)
Используется в [wiize_focus_month] и [wiize_focus_card]
============================================================ */
body .np-g3-card-icons {
display: grid ;
grid-template-columns: 1fr 1fr ;
gap: 16px ;
width: 100% ;
margin: 0 0 32px 0 ;
flex-direction: row ;
}
body .np-g3-icon-cell {
position: relative ;
width: 100% ;
aspect-ratio: 1 / 1.2 ;
border-radius: 0 ;
overflow: hidden ;
padding: 24px ;
display: block ;
background-size: cover ;
background-position: center ;
}
body .np-g3-icon-cell--wine,
body .np-g3-icon-cell--grapes,
body .np-g3-icon-cell--area,
body .np-g3-icon-cell--food {
background-color: #EBEBEB ;
background-repeat: no-repeat ;
background-position: center 60% ;
}
body .np-g3-icon-cell--wine {
background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2275%22%20height%3D%22212%22%20viewBox%3D%220%200%2075%20212%22%20fill%3D%22none%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20clip-path%3D%22url(%23clip_wine)%22%3E%3Cpath%20d%3D%22M42.0903%2051.3916V7.27434C42.0903%205.53675%2041.1404%203.91695%2039.5967%203.06288C39.3889%202.94508%2034.0752%200%2027.4851%200C20.8949%200%2015.6109%202.91563%2015.3734%203.06288C13.8298%203.91695%2012.8798%205.53675%2012.8798%207.27434V51.3916C1.36189%2056.8989%20-6.02979%2068.3847%20-6.02979%2080.9897V181.741C-6.02979%20185.452%20-2.9425%20188.485%200.857233%20188.485H54.1129C57.9126%20188.485%2060.9999%20185.452%2060.9999%20181.741V80.9897C60.9999%2068.3847%2053.6082%2056.8695%2042.0903%2051.3916ZM51.4412%20179.12H44.7917V154.057H51.4412V179.12ZM51.4412%20107.142V145.929H10.2378V154.057H15.5515V179.12H3.55861V80.9897C3.55861%2075.4824%205.54753%2070.2401%208.99104%2066.117C10.9206%2068.6498%2014.1563%2071.0353%2018.2232%2072.9201C16.5311%2076.0125%2015.5515%2079.5171%2015.5515%2082.5506V107.112H44.7917V82.5506C44.7917%2080.6362%2044.7026%2078.398%2044.4058%2076.1303C46.7509%2075.5118%2048.7398%2074.5988%2050.1647%2073.3913C50.9959%2075.8063%2051.4412%2078.3391%2051.4412%2080.9602V107.112V107.142Z%22%20fill%3D%22%23C8C8C8%22%20fill-opacity%3D%220.36%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip_wine%22%3E%3Crect%20width%3D%2275%22%20height%3D%22212%22%20fill%3D%22white%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") ;
background-size: auto 70% ;
}
body .np-g3-icon-cell--grapes {
background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%22177%22%20height%3D%22167%22%20viewBox%3D%220%200%20177%20167%22%20fill%3D%22none%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M86.9944%2096.2155L86.1741%2093.1181C76.9935%2086.3623%2076.8557%2076.6337%2077.2331%2072.9654C72.1703%2070.5439%2064.8731%2066.8592%2053.0873%2063.6864C49.7406%2062.8431%2050.8234%2057.9707%2054.0913%2058.3513C61.8479%2059.2634%2074.5097%2062.725%2079.7661%2064.7528C83.5131%2057.8132%2090.8562%2053.0851%2099.2821%2053.0851C103.131%2053.0851%20106.75%2054.0727%20109.906%2055.8018C110.996%2045.8567%20109.221%2036.7221%20109.119%2036.2102C108.768%2034.4614%20107.219%2033.2277%20105.438%2033.2408C96.0896%2033.3917%2087.4964%2037.4177%2081.7413%2040.9318C81.7216%2022.6592%2067.9048%202.56884%2067.2191%201.58123C66.1888%200.104716%2064.2431%20-0.413705%2062.6157%200.350798C46.7876%207.81208%2041.1572%2025.0971%2039.323%2033.336C26.6448%2029.6086%2011.6107%2031.7807%202.07582%2036.3644C-0.142211%2037.4308%20-0.1094%2039.6882%200.0809058%2040.5676C0.264647%2041.4239%204.48744%2060.3101%2020.5157%2071.8564C15.1281%2078.3563%204.92383%2093.397%208.72992%20110.475C9.12038%20112.231%2010.7314%20113.458%2012.5229%20113.356C13.7467%20113.294%2039.0376%20111.843%2053.3629%20100.038C54.6623%20106.315%2057.274%20115.22%2062.3532%20122.146C63.6886%20123.964%2065.7426%20123.708%2066.4612%20123.478C66.7827%20123.373%2070.8939%20122.015%2075.7106%20118.891C74.3424%20109.573%2078.9655%20100.632%2086.9944%2096.2155ZM97.6416%20100.868C89.4749%20100.868%2082.8569%20107.486%2082.8569%20115.653C82.8569%20123.82%2089.4749%20130.441%2097.6416%20130.441C105.808%20130.441%20112.43%20123.82%20112.43%20115.653C112.43%20107.486%20105.808%20100.868%2097.6416%20100.868ZM99.2821%2060.4676C91.1154%2060.4676%2084.4974%2067.0889%2084.4974%2075.2556C84.4974%2083.4224%2091.1154%2090.0404%2099.2821%2090.0404C107.449%2090.0404%20114.07%2083.4224%20114.07%2075.2556C114.07%2067.0889%20107.449%2060.4676%2099.2821%2060.4676ZM96.3882%20136.796C88.2215%20136.796%2081.6035%20143.414%2081.6035%20151.581C81.6035%20159.748%2088.2215%20166.369%2096.3882%20166.369C104.555%20166.369%20111.176%20159.748%20111.176%20151.581C111.176%20143.414%20104.555%20136.796%2096.3882%20136.796ZM128.34%20119.328C120.173%20119.328%20113.552%20125.949%20113.552%20134.116C113.552%20142.283%20120.173%20148.901%20128.34%20148.901C136.506%20148.901%20143.124%20142.283%20143.124%20134.116C143.124%20125.949%20136.506%20119.328%20128.34%20119.328ZM128.806%2082.753C120.639%2082.753%20114.021%2089.3743%20114.021%2097.5411C114.021%20105.708%20120.639%20112.329%20128.806%20112.329C136.972%20112.329%20143.594%20105.708%20143.594%2097.5411C143.594%2089.3743%20136.972%2082.753%20128.806%2082.753ZM133.16%2046.7066C124.996%2046.7066%20118.375%2053.3279%20118.375%2061.4913C118.375%2069.658%20124.996%2076.2793%20133.16%2076.2793C141.326%2076.2793%20147.948%2069.658%20147.948%2061.4913C147.948%2053.3279%20141.326%2046.7066%20133.16%2046.7066ZM162.204%2097.9053C170.371%2097.9053%20176.992%2091.2872%20176.992%2083.1205C176.992%2074.9538%20170.371%2068.3325%20162.204%2068.3325C154.037%2068.3325%20147.419%2074.9538%20147.419%2083.1205C147.419%2091.2872%20154.037%2097.9053%20162.204%2097.9053ZM161.981%20104.497C153.814%20104.497%20147.196%20111.118%20147.196%20119.285C147.196%20127.452%20153.814%20134.07%20161.981%20134.07C170.148%20134.07%20176.769%20127.452%20176.769%20119.285C176.769%20111.118%20170.148%20104.497%20161.981%20104.497ZM164.274%2059.0764C164.708%2058.64%20174.941%2048.1437%20175.968%2027.2035C176.136%2023.8109%20173.521%2020.9235%20170.125%2020.7594C166.732%2020.5953%20163.845%2023.2104%20163.681%2026.6031C162.9%2042.5297%20155.816%2050.1222%20155.514%2050.4372L155.56%2050.3913L164.274%2059.0764Z%22%20fill%3D%22%23C8C8C8%22%20fill-opacity%3D%220.36%22/%3E%3C/svg%3E") ;
background-size: 70% auto ;
}
body .np-g3-icon-cell--area {
background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%22167%22%20height%3D%22168%22%20viewBox%3D%220%200%20167%20168%22%20fill%3D%22none%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M101.294%2082.3736C100.811%2077.0763%2098.1534%2072.0041%2093.3885%2068.8764C90.3861%2066.8676%2086.9253%2065.8846%2083.5284%2065.8846C81.6026%2065.8846%2079.7229%2066.3064%2077.8966%2066.9069L41.7891%2053.4526C40.6805%2053.0308%2039.4369%2053.4526%2038.7902%2054.4356C38.1435%2055.4364%2038.2537%2056.7411%2039.0673%2057.6026L65.7234%2085.6192C66.2031%2090.9023%2068.8893%2095.9566%2073.647%2099.1128C76.6779%20101.122%2080.1316%20102.094%2083.5142%20102.094C85.4329%20102.094%2087.3019%20101.672%2089.1176%20101.068L125.214%20114.555C125.502%20114.658%20125.797%20114.705%20126.099%20114.705C126.934%20114.705%20127.741%20114.286%20128.228%20113.55C128.871%20112.567%20128.764%20111.252%20127.943%20110.387L101.294%2082.3736ZM91.047%2088.9828C89.3237%2091.61%2086.4527%2093.0434%2083.5142%2093.0434C81.8016%2093.0434%2080.1174%2092.5823%2078.5859%2091.5707C75.9352%2089.7942%2074.5246%2086.9168%2074.5175%2083.975C74.5175%2082.27%2074.983%2080.5721%2076.0028%2079.0243V79.01C77.7332%2076.3542%2080.5722%2074.9352%2083.5284%2074.9244C85.2233%2074.9244%2086.9253%2075.3927%2088.4638%2076.4186C91.1003%2078.1379%2092.518%2081.0332%2092.518%2084.0036C92.518%2085.7229%2092.049%2087.4351%2091.047%2088.9828ZM83.5284%200C37.4044%200.0142984%200.0142133%2037.6106%200%2084.0107C0.0142133%20130.4%2037.4044%20167.993%2083.5284%20168C129.613%20167.993%20167%20130.4%20167%2084.0107C167%2037.6106%20129.613%200.0142984%2083.5284%200ZM83.5284%20151.826C46.291%20151.765%2016.1741%20121.464%2016.1031%2084.0107C16.1741%2046.5431%2046.291%2016.2531%2083.5284%2016.1888C120.73%2016.2531%20150.84%2046.5431%20150.915%2084.0107C150.84%20121.464%20120.73%20151.765%2083.5284%20151.826ZM79.5169%2041.7283C79.5169%2038.0037%2079.4458%2034.5544%2079.2752%2031.4446H79.4138C80.5011%2034.2112%2081.9934%2037.321%2083.2513%2039.7445L87.1562%2047.3974H93.6088V24.3743H88.0054V29.8432C88.0054%2033.2568%2088.1404%2036.4667%2088.4816%2039.5086H88.3785C87.3587%2036.8099%2086.037%2033.7358%2084.7791%2031.4446L81.1442%2024.3743H73.9099V47.3974H79.5169V41.7283ZM24.2576%2075.0066L32.6432%2076.3721C35.3614%2076.7831%2038.044%2077.1906%2040.6272%2077.5338V77.6017C38.044%2077.9091%2035.7025%2078.2165%2033.0518%2078.6276L24.2576%2080.0645V86.6523L32.6432%2088.1214C35.4644%2088.6361%2038.2146%2089.1115%2040.7942%2089.4904V89.5583C38.4171%2089.8979%2035.3969%2090.3089%2032.7462%2090.7164L24.2576%2092.0497V98.6768L47.1473%2093.383V86.5522L38.1826%2084.8114C36.1786%2084.3968%2034.004%2084.0929%2031.3214%2083.714V83.6461C34.036%2083.3423%2036.1786%2083.0349%2038.1826%2082.6917L47.1473%2081.1547V74.424L24.2576%2068.7549V75.0066ZM84.3279%20125.271C86.6375%20125.271%2088.876%20125.989%2090.2688%20126.708L91.4236%20121.618C90.1338%20120.935%2087.4511%20120.217%2084.701%20120.217C78.0103%20120.217%2074.9546%20123.598%2074.9546%20127.562C74.9546%20130.772%2076.788%20132.956%2080.8991%20134.497C83.7842%20135.587%2085.0065%20136.034%2085.0065%20137.192C85.0065%20138.218%2083.9868%20138.9%2082.1178%20138.9C79.8438%20138.9%2078.1453%20138.25%2077.1611%20137.806L75.8713%20142.761C77.3636%20143.408%2079.3356%20143.922%2082.0503%20143.922C87.8242%20143.922%2091.2531%20140.777%2091.2531%20136.716C91.2531%20133.299%2088.6734%20131.179%2084.8005%20129.782C82.2208%20128.892%2081.2011%20128.277%2081.2011%20127.151C81.2011%20125.989%2082.2208%20125.271%2084.3279%20125.271ZM119.888%2076.9333V92.3678H124.912V83.1135H129.127V91.3777H134.083V83.1135H137.75V91.8924H142.778V76.9333H119.888Z%22%20fill%3D%22%23C8C8C8%22%20fill-opacity%3D%220.36%22/%3E%3C/svg%3E") ;
background-size: 65% auto ;
}
body .np-g3-icon-cell--food {
background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%22150%22%20height%3D%22191%22%20viewBox%3D%220%200%20150%20191%22%20fill%3D%22none%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M20.8352%20140.986C16.2028%20138.49%2010.6348%20132.811%208.9876%20122.104C7.07524%20109.711%209.6756%2097.1827%2021.3424%2093.7951L21.3628%2072.4326C8.52993%2068.1234%200%2055.9108%200%2041.8612C0%2018.2806%2024.3363%202.6507%2045.3609%2012.7014C61.5346%20-4.23677%2088.4713%20-4.23086%20104.639%2012.7014C125.678%202.64189%20150%2018.2983%20150%2041.8612C150%2055.9108%20141.082%2068.1234%20128.25%2072.4326L128.29%2093.798C139.931%2097.1945%20142.537%20109.72%20140.628%20122.104C138.983%20132.775%20133.447%20138.452%20128.824%20140.959C119.723%20174.806%2091.1533%20191%2074.8426%20191C58.0159%20191%2030.0939%20173.66%2020.8352%20140.986ZM20.4882%20120.282C22.2374%20131.638%2028.5255%20131.106%2030.7964%20131.458C35.2684%20160.872%2060.8524%20179.204%2074.8426%20179.204C86.1246%20179.204%20110.968%20167.089%20119.116%20131.399C121.647%20131.015%20127.442%20131.204%20129.124%20120.282C130.325%20112.491%20129.958%20104.806%20122.448%20104.806H122.422V114.204C122.422%20116.888%20120.274%20119.065%20117.621%20119.065C114.971%20119.065%20112.822%20116.888%20112.822%20114.204V104.185C80.8887%20114.555%2065.0387%20105.328%2057.5378%2096.5625C51.0194%20104.159%2040.5392%20108.483%2036.385%20108.778V114.204C36.385%20116.888%2034.2364%20119.065%2031.5865%20119.065C28.9366%20119.065%2026.788%20116.888%2026.788%20114.204V104.812C19.6078%20105.021%2019.3396%20112.819%2020.4882%20120.282ZM10.6639%2041.8612C10.6639%2052.2308%2017.9695%2061.0942%2028.0299%2062.9313C30.5691%2063.395%2032.4144%2065.6337%2032.4144%2068.2445V83.8626C58.8438%2078.059%2090.8297%2077.929%20117.586%2083.8448V68.2445C117.586%2065.6337%20119.431%2063.395%20121.97%2062.9313C132.031%2061.0942%20139.336%2052.2308%20139.336%2041.8612C139.336%2024.7457%20120.402%2014.568%20106.435%2024.0576C104.106%2025.6376%20100.969%2025.1238%2099.2518%2022.8762C86.9496%206.77679%2063.0389%206.79151%2050.7483%2022.8762C49.0312%2025.1238%2045.8944%2025.6376%2043.5652%2024.0576C39.8803%2021.553%2035.8543%2020.4188%2031.9159%2020.4188C20.9284%2020.4218%2010.6639%2029.2616%2010.6639%2041.8612ZM74.9068%20155.789C72.7466%20160.718%2066.3447%20165.854%2060.1528%20165.854C56.5175%20165.854%2051.445%20164.153%2047.9351%20156.049C47.3899%20154.784%2048.9175%20153.641%2049.9495%20154.545C52.5033%20156.784%2054.7771%20157.918%2056.7099%20157.918C62.5432%20157.918%2065.0271%20147.74%2070.5601%20147.74C72.2481%20147.74%2074.0992%20148.833%2074.9068%20150.021C75.7113%20148.827%2077.5683%20147.74%2079.2533%20147.74C84.7894%20147.74%2087.2673%20157.918%2093.1036%20157.918C95.0335%20157.918%2097.3073%20156.784%2099.864%20154.545C100.893%20153.641%20102.424%20154.784%20101.878%20156.049C98.3685%20164.15%2093.296%20165.854%2089.6606%20165.854C83.4717%20165.854%2077.0669%20160.718%2074.9068%20155.789ZM85.7631%20127.373C85.7631%20122.465%2089.6928%20118.483%2094.5378%20118.483C99.3742%20118.483%20103.301%20122.465%20103.301%20127.373C103.301%20132.276%2099.3742%20136.257%2094.5378%20136.257C89.6928%20136.257%2085.7631%20132.276%2085.7631%20127.373ZM46.4249%20127.373C46.4249%20122.465%2050.3489%20118.483%2055.1969%20118.483C60.0332%20118.483%2063.9689%20122.465%2063.9689%20127.373C63.9689%20132.276%2060.0332%20136.257%2055.1969%20136.257C50.3489%20136.257%2046.4249%20132.276%2046.4249%20127.373Z%22%20fill%3D%22%23C8C8C8%22%20fill-opacity%3D%220.36%22/%3E%3C/svg%3E") ;
background-size: auto 70% ;
}
body .np-g3-icon-label {
position: relative ;
z-index: 1 ;
font-family: 'Cormorant Garamond', serif ;
font-weight: 500 ;
font-size: 32px ;
line-height: 1.21 ;
color: #000 ;
text-transform: none ;
text-align: left ;
margin: 0 ;
}
/* ============================================================
5. CARD BODY + READ MORE BUTTON (только для листинга)
На детальной не используется
============================================================ */
body .np-g3-card-body {
font-family: 'Red Hat Display', sans-serif ;
font-weight: 300 ;
font-size: 12px ;
line-height: 1.32 ;
letter-spacing: 0.1em ;
text-transform: uppercase ;
color: #000 ;
flex: 1 ;
margin: 0 0 24px 0 ;
}
body .np-g3-card-btn-wrap {
margin-top: auto ;
}
body .np-g3-card-btn,
body .np-g3-card-btn > a {
display: block ;
width: 130px ;
padding: 14px 0 ;
background: rgba(200, 200, 200, 0.36) ;
border: 0.5px solid #AAAAAA ;
border-radius: 0 ;
font-family: 'Red Hat Display', sans-serif ;
font-weight: 700 ;
font-size: 11px ;
letter-spacing: 0.1em ;
text-transform: uppercase ;
color: #000 ;
text-align: center ;
text-decoration: none ;
cursor: pointer ;
}
/* ============================================================
FOCUS DETAILS — BANNER
============================================================ */
body .np-focus-banner {
max-width: 1240px !important;
width: 100%;
margin: 0 auto;
padding: 0px 0px;
box-sizing: border-box;
}
body .np-focus-banner-img {
display: block;
width: 100%;
height: auto;
border-radius: 5px;
}
@media (max-width: 1024px) {
body .np-focus-banner {
padding: 20px 40px ;
}
}
@media (max-width: 767px) {
body .np-focus-banner {
padding: 16px ;
}
}
/* ============================================================
FOCUS DETAILS — BLOCKS (Wine / Grapes / Area / Food)
============================================================ */
body .np-focus-blocks {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 40px 40px;
box-sizing: border-box;
}
/* Каждая секция-блок с разделителем */
body .np-focus-block {
padding: 40px 0;
border-bottom: 0.5px solid #AAAAAA;
}
body .np-focus-block:last-child {
border-bottom: none;
}
/* ---- Eyebrow (WINE / GRAPES / AREA / FOOD) ---- */
body .np-focus-block-header {
margin-bottom: 24px;
}
body .np-focus-block-eyebrow {
font-family: 'Cormorant Garamond', serif ;
font-weight: 500 ;
font-size: 32px ;
line-height: 1.2 ;
letter-spacing: 0 ;
text-transform: none ;
color: #000 ;
display: inline-block;
margin: 0 ;
}
/* ---- Row: text слева | media справа ---- */
body .np-focus-block-row {
display: grid ;
grid-template-columns: 1fr 1fr ;
gap: 60px ;
align-items: start ;
}
/* ---- LEFT: text column ---- */
body .np-focus-block-text {
display: flex ;
flex-direction: column ;
gap: 16px ;
}
/* Price (для wine) */
body .np-focus-block-price {
font-family: 'Red Hat Display', sans-serif;
font-weight: 700;
font-size: 18px;
color: #000;
margin: 0;
}
body .np-focus-block-price del {
color: #999;
margin-right: 8px;
}
/* Meta list (Region/Canton, Cat 1/2/3) */
body .np-focus-block-meta {
list-style: none ;
padding: 0 ;
margin: 0 ;
display: flex ;
flex-wrap: wrap ;
gap: 8px 20px ;
}
body .np-focus-block-meta li {
font-family: 'Red Hat Display', sans-serif;
font-weight: 400;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #554F4F;
margin: 0;
list-style: none;
}
/* Title (Wine name, Grape name, Region name, Recipe name) */
body .np-focus-block-title {
font-family: 'Cormorant Garamond', serif ;
font-weight: 500 ;
font-size: 36px ;
line-height: 1.1 ;
color: #000 ;
margin: 0 ;
text-transform: capitalize ;
}
body .np-focus-block-title a {
color: inherit ;
text-decoration: none ;
}
body .np-focus-block-title a:hover {
text-decoration: underline ;
}
/* Category badge (для wine) */
body .np-focus-block-category {
font-family: 'Red Hat Display', sans-serif;
font-weight: 400;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #554F4F;
}
/* Description */
body .np-focus-block-desc {
font-family: 'Red Hat Display', sans-serif ;
font-weight: 300 ;
font-size: 14px ;
line-height: 1.55 ;
color: #000 ;
margin: 0 ;
}
/* "256 wines" — count */
body .np-focus-block-count {
font-family: 'Red Hat Display', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.05em;
color: #A6032F;
margin: 0;
}
/* Aroma (для grapes) */
body .np-focus-block-aroma {
font-family: 'Red Hat Display', sans-serif;
font-weight: 300;
font-style: italic;
font-size: 13px;
line-height: 1.5;
color: #554F4F;
margin: 0;
}
/* ---- RIGHT: media column (image + stats) ---- */
body .np-focus-block-media {
display: flex ;
flex-direction: column ;
gap: 20px ;
}
body .np-focus-block-image {
display: block ;
width: auto ; /* было 100% — убрать */
height: auto ;
max-width: 100% ;
max-height: 580px ;
object-fit: contain ;
border-radius: 5px ;
margin: 0 auto ;
}
/* Stats под изображением: White / Heritage / Vineyard, или 128 winemakers / 258 wines */
body .np-focus-block-stats {
list-style: none ;
padding: 0 ;
margin: 0 ;
display: flex ;
flex-wrap: wrap ;
gap: 12px 32px ;
}
body .np-focus-block-stats li {
font-family: 'Red Hat Display', sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.05em;
color: #000;
margin: 0;
list-style: none;
}
/* ---- FULL-WIDTH extra (для area: extra_description_region) ---- */
body .np-focus-block-extra {
margin-top: 32px ;
padding-top: 32px ;
border-top: 0.5px solid #DDDDDD ;
font-family: 'Red Hat Display', sans-serif ;
font-weight: 300 ;
font-size: 14px ;
line-height: 1.6 ;
color: #000 ;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
body .np-focus-blocks {
padding: 30px 40px ;
}
body .np-focus-block-row {
gap: 40px ;
}
body .np-focus-block-title {
font-size: 28px ;
}
}
@media (max-width: 767px) {
body .np-focus-blocks {
padding: 24px 16px ;
}
body .np-focus-block {
padding: 24px 0 ;
}
body .np-focus-block-row {
grid-template-columns: 1fr ;
gap: 24px ;
}
body .np-focus-block-title {
font-size: 24px ;
}
body .np-focus-block-eyebrow {
font-size: 12px ;
}
}
/* ============================================================
FOCUS DETAILS — DESCRIPTION + WINES (для [wiize_focus_description])
============================================================ */
body .np-focus-desc {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 120px 0px 40px 0px;
box-sizing: border-box;
}
/* ---- post_content (длинное описание) ---- */
body .np-focus-desc-text {
font-family: 'Cormorant Garamond' ;
font-weight: 500 ;
font-size: 24px ;
line-height: 1em ;
letter-spacing: 0.05em ;
text-transform: uppercase ;
color: #211A15 ;
padding:0px 60px;
}
body .np-focus-desc-text p {
margin: 0 0 16px 0 ;
}
body .np-focus-desc-text p:last-child {
margin-bottom: 0 ;
}
body .np-focus-desc-text h1,
body .np-focus-desc-text h2,
body .np-focus-desc-text h3,
body .np-focus-desc-text h4 {
font-family: 'Cormorant Garamond', serif ;
font-weight: 600 ;
text-transform: none ;
letter-spacing: normal ;
color: #000 ;
margin: 24px 0 12px 0 ;
}
body .np-focus-desc-text h2 { font-size: 28px ; line-height: 1.2 ; }
body .np-focus-desc-text h3 { font-size: 22px ; line-height: 1.2 ; }
body .np-focus-desc-text h4 { font-size: 18px ; line-height: 1.2 ; }
body .np-focus-desc-text a {
color: #A6032F ;
text-decoration: underline ;
}
body .np-focus-desc-text ul,
body .np-focus-desc-text ol {
margin: 0 0 16px 24px ;
}
body .np-focus-desc-text li {
margin-bottom: 6px ;
}
/* ---- Products grid (список вин под описанием) ---- */
body .np-focus-desc-products {
margin-top: 40px;
}
body .np-focus-desc-products-grid {
display: grid ;
grid-template-columns: repeat(4, 1fr) ;
gap: 24px ;
}
body a.np-focus-product {
display: block ;
text-decoration: none ;
color: inherit ;
}
body .np-focus-product-img {
display: block ;
width: 100% ;
height: auto ;
max-width: 100% ;
object-fit: cover ;
border-radius: 5px ;
margin-bottom: 12px ;
}
body .np-focus-product-title {
font-family: 'Cormorant Garamond', serif ;
font-weight: 600 ;
font-size: 18px ;
line-height: 1.2 ;
color: #000 ;
margin: 0 0 4px 0 ;
text-transform: capitalize ;
}
body .np-focus-product-price {
font-family: 'Red Hat Display', sans-serif ;
font-weight: 700 ;
font-size: 14px ;
color: #A6032F ;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
body .np-focus-desc {
padding: 30px 40px ;
}
body .np-focus-desc-products-grid {
grid-template-columns: repeat(3, 1fr) ;
}
}
@media (max-width: 767px) {
body .np-focus-desc {
padding: 24px 16px ;
}
body .np-focus-desc-text {
max-width: none ;
font-size: 11px ;
}
body .np-focus-desc-products-grid {
grid-template-columns: repeat(2, 1fr) ;
gap: 16px ;
}
body .np-focus-product-title {
font-size: 16px ;
}
}
/* ============================================================
FOCUS DETAILS — UNIFIED SECTION (description + blocks внутри одной рамки)
============================================================ */
body #np-focus-description-section {
max-width: 1240px;
width: 100%;
margin: 60px auto;
border: 0.5px solid #AAAAAA;
border-radius: 5px;
overflow: hidden;
}
/* Внутренние блоки лишаются своих max-width и margin — рамку задаёт wrapper */
body #np-focus-description-section > .np-focus-desc,
body #np-focus-description-section > .np-focus-blocks {
max-width: none ;
margin: 0 ;
}
/* Серая линия между description и blocks */
body #np-focus-description-section > .np-focus-desc + .np-focus-blocks {
border-top: 0.5px solid #AAAAAA ;
}
/* У последнего блока (Food внутри .np-focus-blocks) убираем нижнюю границу,
иначе будет двойная линия с рамкой контейнера */
body #np-focus-description-section .np-focus-block:last-child {
border-bottom: none ;
}
/* Responsive */
@media (max-width: 1024px) {
body #np-focus-description-section {
margin: 30px 20px;
}
}
@media (max-width: 767px) {
body #np-focus-description-section {
margin: 20px 12px;
border-radius: 0;
}
}
/* ============================================================
Разделители с отступами (вместо border-top / border-bottom)
============================================================ */
/* Линия между description и blocks */
body #np-focus-description-section > .np-focus-desc + .np-focus-blocks {
border-top: none ;
position: relative ;
}
body #np-focus-description-section > .np-focus-desc + .np-focus-blocks::before {
content: '';
position: absolute;
top: 0;
left: 60px;
right: 60px;
height: 1px;
background-color: #AAAAAA;
}
/* Линии между блоками Wine / Grapes / Area / Food */
body .np-focus-block {
border-bottom: 0.5px solid #AAAAAA ;
position: relative ;
}
body .np-focus-block:not(:last-child)::after {
content: '';
position: absolute;
bottom: 0;
left: 60px;
right: 60px;
height: 1px;
background-color: #AAAAAA;
}
/* Mobile — уменьшаем отступы линий вместе с уменьшением padding'ов */
@media (max-width: 767px) {
body #np-focus-description-section > .np-focus-desc + .np-focus-blocks::before,
body .np-focus-block:not(:last-child)::after {
left: 16px;
right: 16px;
}
}
/* ============================================================
Fallback-иконки внутри np-focus-block (когда изображения нет)
============================================================ */
body .np-focus-block-media .np-g3-icon-cell {
width: 100% ;
max-width: 400px ;
max-height: 480px ;
aspect-ratio: 1 / 1.2 ;
margin: 0 auto ;
border-radius: 5px ;
}
/* Скрываем лейбл внутри fallback — eyebrow ("WINE", "GRAPES" и т.д.)
уже выведен над блоком, дублировать не нужно */
body .np-focus-block-media .np-g3-icon-label {
display: none ;
}
/* ============================================================
Caption под большим изображением (медиа-колонка)
============================================================ */
body .np-focus-block-caption {
display: block;
font-family: 'Red Hat Display', sans-serif;
font-weight: 300;
font-size: 12px;
line-height: 1.5;
color: #554F4F;
margin-top: 12px;
text-align: left;
}
/* ============================================================
Описание — uppercase (как было на скрине Figma)
============================================================ */
body .np-focus-block-desc {
text-transform: uppercase ;
letter-spacing: 0.08em ;
font-size: 13px ;
}
/* Серая подложка вокруг большого изображения */
body .np-focus-block-image-wrap {
background-color: #F2F2F2;
border-radius: 5px;
padding: 40px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
body .np-focus-block-image-wrap img.np-focus-block-image {
max-width: 100% ;
max-height: 500px ;
width: auto ;
height: auto ;
margin: 0 ;
border-radius: 0 ;
}
/* fallback-иконка внутри обёртки тоже подстраивается */
body .np-focus-block-image-wrap .np-g3-icon-cell {
background-color: transparent ;
width: 100% ;
max-width: 400px ;
max-height: 480px ;
margin: 0 auto ;
}
/* ============================================================
GRAPE CARD — фото слева с названием поверх
============================================================ */
body .np-focus-grape-card {
max-width: 280px;
margin-bottom: 0;
}
body .np-focus-grape-card-image {
position: relative;
background: #F8F8F8;
aspect-ratio: 1 / 1.05;
overflow: hidden;
border-radius: 5px 5px 0 0;
}
body .np-focus-grape-card-image img {
width: 100% ;
height: 100% ;
object-fit: cover ;
display: block ;
}
body .np-focus-grape-card-image .np-g3-icon-cell {
width: 100% ;
height: 100% ;
aspect-ratio: auto ;
max-width: none ;
max-height: none ;
border-radius: 0 ;
margin: 0 ;
}
/* Название белым в нижнем левом углу фото */
body .np-focus-grape-card-name {
position: absolute ;
left: 16px ;
bottom: 16px ;
margin: 0 ;
font-family: 'Work Sans', serif ;
font-weight: 600 ;
font-size: 26px ;
line-height: 1.1 ;
color: #FFFFFF ;
text-transform: capitalize ;
text-shadow: 0 1px 4px rgba(0,0,0,0.4);
z-index: 2;
}
/* Stats — белая полоска под фото с 3 ячейками */
body .np-focus-grape-card-stats {
list-style: none ;
margin: 0 ;
padding: 0 ;
display: grid ;
grid-template-columns: repeat(3, 1fr) ;
background: #fcf9f5 ;
border-radius: 0 0 5px 5px ;
}
body .np-focus-grape-card-stats li {
padding: 20px 0px 0px 0px;
font-family: 'Red Hat Display', sans-serif ;
font-weight: 700 ;
font-size: 10px ;
letter-spacing: 0.1em ;
text-transform: uppercase ;
color: #000 ;
text-align: center ;
list-style: none ;
border-right: 2px solid #e8e1db;
line-height:14px;
}
.np-focus-grape-card-stats li:first-child {
padding-right: 5px;
}
.np-focus-grape-card-stats li:last-child {
padding-left: 5px;
}
body .np-focus-grape-card-stats li:last-child {
border-right: none;
}
/* Короткое описание под stats — обычным регистром */
body .np-focus-grape-card-summary {
font-family: 'Red Hat Display', sans-serif ;
font-weight: 300 ;
font-size: 12px ;
line-height: 1.5 ;
color: #000 ;
margin: 0 ;
text-transform: none ;
letter-spacing: normal ;
background: #fbf8f5;
padding-top:10px;
}
/* ============================================================
GRAPE CTA — "Wines (16)" с красной стрелкой
============================================================ */
body .np-focus-grape-cta {
display: inline-flex ;
align-items: stretch ;
text-decoration: none ;
margin: 24px 0 32px 0 ;
border-radius: 4px;
overflow: hidden;
}
body .np-focus-grape-cta-arrow {
background: #F87060 ;
color: #FFFFFF ;
padding: 0 16px ;
font-size: 20px ;
font-weight: 700 ;
line-height: 1 ;
display: flex ;
align-items: center ;
justify-content: center ;
min-width: 44px;
border-radius: 5px;
}
body .np-focus-grape-cta-label {
background: #FFFFFF ;
border: 1px solid #000 ;
color: #000 ;
padding: 14px 24px ;
font-family: 'Red Hat Display', sans-serif ;
font-weight: 700 ;
font-size: 12px ;
letter-spacing: 0.15em ;
text-transform: uppercase ;
line-height: 1 ;
display: flex ;
align-items: center ;
margin-left:5px;
border-radius: 5px;
}
body .np-focus-grape-cta:hover .np-focus-grape-cta-arrow {
background: #C46355 ;
}
/* В Area-блоке только 2 stats (winemakers + wines), не 3 */
body .np-focus-block--area .np-focus-grape-card-stats {
grid-template-columns: repeat(2, 1fr) ;
}
/* Вариант CTA без надписи — только красный квадрат со стрелкой */
body .np-focus-grape-cta--icon-only .np-focus-grape-cta-label {
display: none ;
}
body .np-focus-grape-cta--icon-only {
overflow: visible;
}
body .np-focus-grape-cta--icon-only .np-focus-grape-cta-arrow {
border-radius: 4px ;
min-width: 44px;
min-height: 44px;
padding: 0 ;
}
/* Footer media-колонки food блока: caption слева, Past Month справа */
body .np-focus-block-media-footer {
display: flex ;
justify-content: space-between ;
align-items: flex-end ;
gap: 16px ;
margin-top: 12px ;
}
body .np-focus-block-media-footer .np-focus-block-caption {
margin-top: 0 ;
flex: 1 ;
}
/* Кнопка Past Month — серая плашка справа */
body .np-focus-past-month {
display: inline-block ;
background: #EFEFEF ;
color: #000 ;
padding: 14px 22px ;
font-family: 'Red Hat Display', sans-serif ;
font-weight: 700 ;
font-size: 11px ;
letter-spacing: 0.15em ;
text-transform: uppercase ;
text-decoration: none ;
border: 1px solid #D6D6D6 ;
flex-shrink: 0 ;
line-height: 1 ;
}
body .np-focus-past-month:hover {
background: #E6E6E6 ;
text-decoration: none ;
}
/* Mobile — Past Month уходит под caption */
@media (max-width: 767px) {
body .np-focus-block-media-footer {
flex-direction: column ;
align-items: flex-start ;
}
body .np-focus-past-month {
align-self: flex-start ;
}
}
/* ============================================================
OTHER SELECTION FROM THIS PLACE — 4 cards + ad block
============================================================ */
body .np-other-selection {
max-width: 1280px;
width: 100%;
margin: 60px auto;
padding: 0 20px;
box-sizing: border-box;
}
body .np-other-selection-heading {
font-family: 'Cormorant Garamond', serif ;
font-weight: 500 ;
font-size: 32px ;
line-height: 1.2 ;
color: #000 ;
margin: 0 0 16px 0 ;
text-transform: none ;
}
body .np-other-selection-divider {
height: 0.5px;
background: #AAAAAA;
margin-bottom: 40px;
}
/* Grid: 4 равные карточки + ad block 5-ой колонкой */
body .np-other-selection-grid {
display: grid ;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px ;
align-items: start ;
}
/* Каждая карточка занимает свою колонку */
body .np-other-selection-item {
margin: 0 ;
max-width: none ;
}
/* ---- Ad block (красная плашка справа) ---- */
body .np-other-selection-ad {
background: #A6032F;
border-radius: 5px;
padding: 32px 24px;
color: #FFFFFF;
align-self: stretch;
min-height: 380px;
display: flex;
align-items: flex-start;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
}
body .np-other-selection-ad-content {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
position: relative;
z-index: 1;
}
body .np-other-selection-ad-brand {
font-family: 'Work Sans', serif;
font-weight: 700;
font-size: 36px;
line-height: 1;
letter-spacing: 0.05em;
color: #FFFFFF;
margin-bottom: 16px;
}
body .np-other-selection-ad-label {
font-family: 'Work Sans', sans-serif;
font-weight: 600;
font-size: 24px;
text-transform: none;
margin-top:80px;
margin-left:10px;
}
body .np-other-selection-ad-name {
font-family: 'Work Sans', sans-serif;
font-weight: 600;
font-size: 24px;
line-height: 1.05;
color: #FFFFFF;
margin-left:10px;
margin-top:-10px;
}
body .np-other-selection-ad-size {
font-family: 'Work Sans', sans-serif;
font-weight: 400;
font-size: 20px;
opacity: 1;
color: #FFFFFF;
margin-top: 6px;
margin-left:10px;
margin-top:-10px;
}
/* ---- Дата на карточке Event (правый верхний угол) ---- */
body .np-focus-event-date {
position: absolute;
top: 12px;
right: 12px;
background: #FFFFFF;
padding: 8px 12px;
border-radius: 3px;
display: flex;
flex-direction: column;
align-items: center;
line-height: 1;
gap: 2px;
z-index: 2;
}
body .np-focus-event-date strong {
font-family: 'Red Hat Display', sans-serif;
font-weight: 700;
font-size: 18px;
color: #000;
}
body .np-focus-event-date span {
font-family: 'Red Hat Display', sans-serif;
font-weight: 700;
font-size: 10px;
color: #000;
letter-spacing: 0.1em;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1200px) {
body .np-other-selection-grid {
grid-template-columns: repeat(2, 1fr) ;
}
body .np-other-selection-ad {
grid-column: 1 / -1;
min-height: 200px;
}
}
@media (max-width: 600px) {
body .np-other-selection-grid {
grid-template-columns: 1fr ;
}
}
/* Затемняющий градиент на фото карточек — для читаемости белого названия */
body .np-focus-grape-card-image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.55) 0%,
rgba(0, 0, 0, 0.20) 50%,
rgba(0, 0, 0, 0) 100%
);
pointer-events: none;
z-index: 1;
}
/* Убедимся что название и дата события поверх overlay */
body .np-focus-grape-card-name,
body .np-focus-event-date {
z-index: 2 ;
}
/* ============================================================
Выравнивание карточек в other-selection
- все фото одной высоты (через aspect-ratio + stretch)
- stats полоски одной высоты
- красные кнопки на одном уровне
============================================================ */
/* Сетка растягивает все колонки на одинаковую высоту */
body .np-other-selection-grid {
align-items: stretch ;
}
/* Каждая карточка — flex column на всю высоту grid-item */
body .np-other-selection-item {
display: flex ;
flex-direction: column ;
height: 100% ;
max-width: none ;
}
/* Фото и stats не сжимаются */
body .np-other-selection-item .np-focus-grape-card-image,
body .np-other-selection-item .np-focus-grape-card-stats {
flex-shrink: 0 ;
}
/* Stats полоска — фиксированная минимальная высота */
body .np-other-selection-item .np-focus-grape-card-stats {
min-height: 20px ;
}
.np-other-selection-item .np-focus-grape-card-stats {
margin-top: auto;
}
/* Summary растягивается на всё свободное пространство — толкает кнопку вниз */
body .np-other-selection-item .np-focus-grape-card-summary {
flex: 1 1 auto ;
margin-bottom: 16px ;
}
/* Кнопка прижимается к низу карточки */
body .np-other-selection-item .np-focus-grape-cta {
margin-top: auto ;
align-self: flex-start ;
}
/* ============================================================
Actions row — две кнопки внутри grape card
============================================================ */
.np-focus-grape-card-actions {
display: flex;
align-items: stretch;
gap: 7px;
padding: 16px 0px 20px;
background: #fbf8f5;
}
.np-focus-grape-card-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 12px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.2;
text-decoration: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* WINES (count) — светлый outline-look */
.np-focus-grape-card-btn--wines {
background: #e1dad3;
color: #554F4F;
border-color: #e1dad3;
}
.np-focus-grape-card-btn--wines:hover {
background: #e8e8e8;
color: #1a1a1a;
}
/* DETAILS — burgundy filled */
.np-focus-grape-card-btn--details {
background: #A6032F;
color: #fff !important;
border-color: #A6032F;
}
.np-focus-grape-card-btn--details:hover {
background: #A6032F;
border-color: #A6032F;
color: #fff;
}
/* Mobile: кнопки в столбик */
@media (max-width: 480px) {
.np-focus-grape-card-actions {
flex-direction: column;
gap: 8px;
}
}
.np-focus-block--food .np-focus-grape-card-btn,
.np-other-selection-item .np-focus-grape-card-btn {
justify-content: center;
}
/* ============================================================
Other selection — два визуальных блока: image + body
============================================================ */
/* Карточка — flex column на всю высоту grid-ячейки */
.np-other-selection-item {
display: flex;
flex-direction: column;
height: 100%;
}
/* 1. ИЗОБРАЖЕНИЕ — фиксированная высота, обрезаем */
.np-other-selection-item .np-focus-grape-card-image {
height: 240px;
flex-shrink: 0;
overflow: hidden;
position: relative;
}
.np-other-selection-item .np-focus-grape-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* 2. BODY — единый блок под картинкой, занимает всю оставшуюся высоту,
тут вешаешь свой background */
.np-other-selection-item .np-focus-grape-card-body {
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 0px 10px 10px 10px;
/* background: #faf6f0; ← пропиши свой */
/* padding: 16px; ← по дизайну */
}
/* Stats — фиксированная высота, без margin, чтобы не было пробелов */
.np-other-selection-item .np-focus-grape-card-stats {
flex-shrink: 0;
min-height: 48px;
margin: 0;
}
/* Описание — тянется + line-clamp */
.np-other-selection-item .np-focus-grape-card-summary {
flex-grow: 1;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Actions прижаты к низу body */
.np-other-selection-item .np-focus-grape-card-actions {
margin-top: auto;
padding: 0; /* перебиваем общий padding из main rule, если он есть */
}
.np-focus-grape-card-body {
background: #fbf8f5;
}
/* Общее правило для body во всех местах */
.np-focus-grape-card-body {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 0px 20px;
/* background, padding, gap — задаёшь сама */
}
.np-focus-grape-card-body .np-focus-grape-card-stats { margin: 0; flex-shrink: 0; }
.np-focus-grape-card-body .np-focus-grape-card-summary { margin: 0; flex-grow: 1; }
.np-focus-grape-card-body .np-focus-grape-card-actions { margin-top: auto; }
.np-focus-grape-card-btn.is-disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.np-focus-banner {
display: flex;
align-items: center;
justify-content: flex-end;
background-color: #A6032F;
border-radius: 5px;
padding: 48px 80px;
min-height: 366px;
color: #FFFFFF;
text-decoration: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
background-size: auto 90%;
}
.np-focus-banner-section a:hover { width:1240px ;}
.np-focus-banner-content {
display: flex;
flex-direction: column;
gap: 4px;
width: 320px;
max-width: 100%;
}
.np-focus-banner-label {
font-family: 'Work Sans', sans-serif;
font-weight: 600;
font-size: 30px;
line-height: 1.2;
color: #FFFFFF;
}
.np-focus-banner-title {
font-family: 'Work Sans', sans-serif;
font-weight: 700;
font-size: 30px;
line-height: 1.1;
color: #FFFFFF;
margin-top: 2px;
}
.np-focus-banner-size {
font-family: 'Work Sans', sans-serif;
font-weight: 400;
font-size: 30px;
line-height: 1.2;
color: #FFFFFF;
margin-top: 6px;
}
/* ============================================================
Wine product card — новая раскладка по макету
============================================================ */
body .np-focus-wine-card {
max-width: 280px;
margin-bottom: 24px;
display: flex;
flex-direction: column;
}
/* 1. КАРТИНКА — серый блок, скруглённые края */
body .np-focus-wine-card-image {
position: relative;
background: #F8F8F8 ;
aspect-ratio: 4 / 4;
overflow: hidden;
border-radius: 5px;
}
body .np-focus-wine-card-image > a {
display: block;
width: 100%;
height: 100%;
padding: 20px 0px;
}
body .np-focus-wine-card-image img {
width: 100%;
height: 100%;
object-fit: contain;
box-sizing: border-box;
}
/* Дефолтная картинка / placeholder — contain с padding (бутылка вписывается целиком) */
body .np-focus-wine-card-image img.is-placeholder {
object-fit: contain;
}
body .np-focus-wine-card-image .np-g3-icon-cell {
width: 100% ;
height: 100% ;
aspect-ratio: auto ;
border-radius: 0 ;
max-width: none ;
max-height: none ;
margin: 0 ;
}
/* 2. INFO — бежевый блок под картинкой */
body .np-focus-wine-card-info {
background: #fcf9f5;
padding: 16px 18px 18px;
border-radius: 5px;
margin-top: -8px; /* небольшой нахлёст на картинку, как в макете */
display: flex;
flex-direction: column;
gap: 2px;
}
body .np-focus-wine-card-location {
display: block;
font-family: 'Red Hat Display', sans-serif;
font-weight: 500;
font-size: 11px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #211A15;
margin-bottom: 0px;
line-height: 12px;
margin-top: 10px;
}
body .np-focus-wine-card-name {
font-family: 'Cormorant Garamond', serif ;
font-weight: 500 ;
font-size: 22px ;
line-height: 1.1 ;
color: #000 ;
margin: 0 0 2px 0 ;
text-transform: none ;
}
body .np-focus-wine-card-name a {
color: inherit ;
text-decoration: none ;
font-family: 'Cormorant Garamond', serif ;
}
body .np-focus-wine-card-name a:hover {
text-decoration: underline ;
}
body .np-focus-wine-card-grape {
display: block;
font-family: 'Red Hat Display', sans-serif;
font-weight: 400;
font-size: 14px;
color: #C7BDB0;
text-transform: none;
margin-bottom: 2px;
line-height: 18px;
}
/* 3. FOOTER — цена + cart на одной строке */
body .np-focus-wine-card-footer {
display: flex ;
align-items: center ;
gap: 12px ; /* было — увеличь, если хочешь больше */
margin-top: auto ;
padding-top: 8px ;
justify-content: flex-start;
}
/* Толкаем counter + cart вправо от цены */
/*body .np-focus-wine-card-footer .np-focus-wine-counter {
margin-left: auto ;
}*/
/* Цена — серая плашка */
body .np-focus-wine-card-price {
position: static ;
display: inline-flex ;
align-items: center ;
background: #E8E5E0 ;
padding: 7px 10px ;
border-radius: 4px ;
font-family: 'Red Hat Display', sans-serif ;
font-weight: 800 ;
font-size: 18px ;
color: #000 ;
line-height: 1.2 ;
margin: 0 ;
}
body .np-focus-wine-card-price del {
color: #999 ;
font-weight: 400 ;
margin-right: 6px ;
}
body .np-focus-wine-card-price ins {
text-decoration: none ;
background: transparent ;
}
body .np-focus-wine-card-price,
body .np-focus-wine-card-price > a,
body .np-focus-wine-card-price > span {
text-decoration: none ;
}
/* Cart-кнопка — красная справа */
body .np-focus-wine-card .np-focus-wine-card-cart,
body a.np-focus-wine-card-cart {
position: static ;
width: 36px ;
height: 36px ;
min-width: 0 ;
max-width: 36px ;
min-height: 0 ;
max-height: 36px ;
background: #A6032F ;
border-radius: 4px ;
display: flex ;
align-items: center ;
justify-content: center ;
color: #FFFFFF ;
text-decoration: none ;
padding: 0 ;
margin: 0 ;
box-sizing: border-box ;
flex: 0 0 auto ;
}
body .np-focus-wine-card-cart svg {
width: 22px ;
height: 22px ;
flex-shrink: 0 ;
display: block ;
}
body .np-focus-wine-card-cart:hover {
background: #800023 ;
}
body .np-focus-wine-card-price del {
color: #999 ;
font-weight: 400 ;
font-size: 14px ; /* было 20px по наследству */
margin-right: 6px ;
}
/* ============================================================
Selection — grid 3 × 5
============================================================ */
.np-focus-selection-section {
max-width: 1240px;
width: 100%;
margin: 60px auto ;
padding: 0 20px;
box-sizing: border-box;
}
.np-focus-selection {
margin: 48px 0;
}
.np-focus-selection-header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 24px;
}
.np-focus-selection-heading {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: 28px;
color: #1a1a1a;
margin: 0;
}
.np-focus-selection-showall {
font-family: 'Red Hat Display', sans-serif;
font-size: 13px;
color: #999;
text-decoration: underline;
}
.np-focus-selection-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px;
}
.np-focus-selection-slot {
min-width: 0;
}
.np-focus-selection-slot--empty {
visibility: hidden;
}
/* В этой сетке wine-карточка не должна иметь max-width */
.np-focus-selection-grid .np-focus-wine-card {
max-width: none;
margin-bottom: 0;
}
/* ============================================================
Vignettes (red + brown)
============================================================ */
.np-focus-vignette {
display: flex;
align-items: flex-start;
padding: 32px 24px;
border-radius: 5px;
color: #FFFFFF;
min-height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: 70%;
}
/* ============================================================
Vignette — RED
Фон: #A6032F, виноград: #590232
============================================================ */
.np-focus-vignette--red {
background-color: #A6032F;
}
.np-focus-vignette--red {
background-image: url('data:image/svg+xml;utf8,');
}
/* ============================================================
Vignette — BROWN (Internal Ads / Self Promo)
Фон: #A89882, виноград: #7A6A52
============================================================ */
.np-focus-vignette--brown {
background-color: #A89882;
}
.np-focus-vignette--brown {
background-image: url('data:image/svg+xml;utf8,');
}
.np-focus-vignette-content {
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
z-index: 1;
}
.np-focus-vignette-label,
.np-focus-vignette-title,
.np-focus-vignette-subtitle,
.np-focus-vignette-size {
font-family: 'Work Sans', sans-serif;
color: #FFFFFF;
}
.np-focus-vignette-label { font-family: 'Work Sans', sans-serif;
font-weight: 600;
font-size: 24px;
text-transform: none;
margin-top: 80px;
margin-left: 10px; }
.np-focus-vignette-title { font-family: 'Work Sans', sans-serif;
font-weight: 600;
font-size: 24px;
line-height: 1.05;
color: #FFFFFF;
margin-left: 10px;
margin-top: -10px;}
.np-focus-vignette-subtitle { font-weight: 400; font-size: 14px; }
.np-focus-vignette-size { font-family: 'Work Sans', sans-serif;
font-weight: 400;
font-size: 20px;
opacity: 1;
color: #FFFFFF;
margin-top: 6px;
margin-left: 10px;
margin-top: -10px; }
/* ============================================================
Food mini card — изображение фоном, текст overlay снизу
============================================================ */
.np-focus-food-mini {
position: relative;
border-radius: 5px;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #2a2a2a; /* fallback если картинки нет */
min-height: 100%;
display: flex;
}
/* Фолбэк-фон когда нет картинки */
.np-focus-food-mini--no-image {
background-color: #d4d4d4;
}
.np-focus-food-mini-link {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end; /* текст внизу */
width: 100%;
height: 100%;
color: #FFFFFF;
text-decoration: none;
min-height: 100%;
}
/* Иконка-плейсхолдер если картинки нет */
.np-focus-food-mini .np-g3-icon-cell {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* Overlay с градиентом и текстом снизу */
.np-focus-food-mini-overlay {
position: relative;
z-index: 1;
padding: 24px 20px 20px;
/*background: linear-gradient(to top,
rgba(0,0,0,0.75) 0%,
rgba(0,0,0,0.35) 60%,
rgba(0,0,0,0) 100%);*/
text-align: center;
margin-bottom: 60px;
}
.np-focus-food-mini-title {
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
font-size: 32px;
line-height: 1.1;
margin: 0 0 6px;
color: #FFFFFF;
}
.np-focus-food-mini-sub {
display: block;
font-family: 'Work Sans', sans-serif;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #FFFFFF;
}
.np-focus-selection {
max-width: 1240px; /* подгони под свой контейнер */
margin: 48px auto; /* центрирование */
padding: 0 24px; /* боковые отступы */
}
/* ============================================================
Selection grid — выравнивание карточек по высоте
============================================================ */
/* Слот занимает всю высоту строки грида */
.np-focus-selection-slot {
display: flex;
flex-direction: column;
min-width: 0;
}
/* ---- WINE CARD внутри Selection-грида ---- */
.np-focus-selection-grid .np-focus-wine-card {
display: flex ;
flex-direction: column ;
height: 100% ;
margin-bottom: 0 ;
max-width: none ;
}
/* Картинка не сжимается, у всех одинаковая высота через aspect-ratio */
.np-focus-selection-grid .np-focus-wine-card-image {
flex-shrink: 0 ;
}
/* Info — забирает всё оставшееся пространство */
.np-focus-selection-grid .np-focus-wine-card-info {
display: flex ;
flex-direction: column ;
flex-grow: 1 ;
}
/* Location — резервирует одну строку, даже если пустая */
.np-focus-selection-grid .np-focus-wine-card-location {
min-height: 14px;
margin-bottom: 0px;
}
/* Title — место под 2 строки + обрезка длинных */
.np-focus-selection-grid .np-focus-wine-card-name {
min-height: 40px; */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0 0 0px 0;
}
/* Категория — резервирует строку */
.np-focus-selection-grid .np-focus-wine-card-grape {
min-height: 20px ;
}
/* Footer (цена + cart) прижат к низу карточки */
.np-focus-selection-grid .np-focus-wine-card-footer {
display: flex ;
align-items: center ;
gap: 10px ;
margin-top: auto ;
/*padding-top: 12px ;*/
justify-content: flex-start;
}
/* ---- ВИНЬЕТКИ растягиваются на всю высоту ячейки ---- */
.np-focus-selection-grid .np-focus-vignette {
height: 100% ;
box-sizing: border-box ;
margin: 0 ;
}
/* ---- FOOD card на всю высоту ---- */
.np-focus-selection-grid .np-focus-food-mini {
height: 100% ;
}
/* ============================================================
Featured content section
============================================================ */
.np-featured-content {
margin: 48px 0;
}
.np-featured-header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 24px;
}
.np-featured-heading {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: 32px;
color: #1a1a1a;
margin: 0;
}
.np-featured-showall {
font-family: 'Red Hat Display', sans-serif;
font-size: 13px;
color: #A6032F;
text-decoration: underline;
}
.np-featured-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 16px;
align-items: stretch;
}
/* ---- общий стиль карточки ---- */
.np-featured-card {
position: relative;
display: block;
border-radius: 8px;
overflow: hidden;
background-size: cover;
background-position: center;
background-color: #2a2a2a;
color: #FFFFFF;
text-decoration: none;
min-height: 100%;
transition: transform 0.2s ease;
}
.np-featured-card:hover {
transform: translateY(-2px);
}
.np-featured-card-content {
position: absolute;
inset: 0;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: flex-end;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
}
.np-featured-card-eyebrow {
font-family: 'Red Hat Display', sans-serif;
font-weight: 600;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #FFFFFF;
}
.np-featured-card-title {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: 26px;
line-height: 1.15;
margin: 0 0 16px;
color: #FFFFFF;
}
.np-featured-card-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: #F87060;
border-radius: 4px;
transition: background-color 0.2s ease;
align-self: flex-start;
}
.np-featured-card:hover .np-featured-card-arrow {
background: #F87060;
}
/* ---- Canton (большая карточка слева) ---- */
.np-featured-card--canton {
min-height: 400px;
}
.np-featured-card--canton .np-featured-card-title {
font-size: 38px;
}
/* ---- Side (Almanac + Story) ---- */
.np-featured-side {
display: flex;
flex-direction: column;
gap: 16px;
}
.np-featured-side .np-featured-card {
flex: 1;
min-height: 192px;
}
/* ---- Responsive ---- */
@media (max-width: 768px) {
.np-featured-grid {
grid-template-columns: 1fr;
}
.np-featured-card--canton {
min-height: 280px;
}
.np-featured-card--canton .np-featured-card-title {
font-size: 28px;
}
}
body .np-featured-content {
max-width: 1240px ;
margin: 40px auto !important;
padding: 0px ;
width: 100% ;
box-sizing: border-box ;
}
.np-selection-grid--full {
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.np-pagination {
display: flex;
justify-content: center;
gap: 8px;
list-style: none;
margin: 32px 0;
padding: 0;
}
.np-pagination__link {
display: inline-block;
padding: 8px 14px;
border: 1px solid #ddd;
text-decoration: none;
color: #333;
}
.np-pagination__link--current {
background: #333;
color: #fff;
border-color: #333;
}
/* ============================================================
Wine card — выравнивание по высоте в любой grid-сетке
============================================================ */
/* Карточка тянется на всю высоту ячейки */
body .np-focus-wine-card {
display: flex ;
flex-direction: column ;
height: 100% ;
max-width: none ; /* перебиваем 280px из основного правила */
margin-bottom: 0 ;
position: relative;
}
/* Картинка — фиксированные пропорции, не сжимается */
body .np-focus-wine-card-image {
flex-shrink: 0 ;
aspect-ratio: 4 / 4 ; /* у тебя уже стоит — оставляем */
}
/* Info-блок занимает всё оставшееся пространство */
body .np-focus-wine-card-info {
display: flex ;
flex-direction: column ;
flex-grow: 1 ;
}
/* Резервируем место под name (даже если короткое) и обрезаем длинное */
body .np-focus-wine-card-name {
/*min-height: 48px ; */ /* ~2 строки 22px line-height 1.1 */
display: -webkit-box ;
-webkit-line-clamp: 2 ;
-webkit-box-orient: vertical ;
overflow: hidden ;
margin: 0 0 4px 0 ;
}
/* Location и grape тоже резервируют по строке — чтобы footer не прыгал */
body .np-focus-wine-card-location {
min-height: 14px ;
}
body .np-focus-wine-card-grape {
min-height: 18px ;
}
/* Footer (цена + counter + cart) — прижат к низу */
body .np-focus-wine-card-footer {
margin-top: auto ;
}
/* Grid-родитель должен растягивать ячейки */
.np-focus-selection-grid,
.np-other-selection-grid,
.np-focus-desc-products-grid {
align-items: stretch;
}