/*
 * Desktop layout (Figma "Desktop - Home" 547:2239, 1440px design, 1140px
 * content container). Below the breakpoint the mobile app frame stays as-is;
 * .dheader/.dfooter are mobile-hidden here and shown on desktop.
 */

.dheader,
.dfooter,
.pdp__desctitle {
	display: none; /* desktop-only elements (the PDP desc heading exists only in the desktop frame) */
}

@media (min-width: 1025px) {

	/* ---- Frame: drop the phone frame, widen the canvas ---- */

	.app {
		max-width: none;
		box-shadow: none;
	}

	.container {
		max-width: 1140px;
		margin-inline: auto;
		width: 100%; /* keeps flex/grid children from shrinking to fit-content */
	}

	.app__main {
		padding-bottom: 0;
	}

	/* Mobile chrome off */
	.site-header,
	.home-copyright,
	.tabbar {
		display: none;
	}

	/* ---- Desktop header (569:4272) ---- */

	.dheader {
		display: block;
		position: sticky;
		top: 0;
		z-index: 40;
		background: var(--c-surface);
		box-shadow: var(--shadow-sm);
	}

	.dheader__top {
		border-bottom: 1px solid var(--c-bg);
	}

	.dheader__row {
		display: flex;
		align-items: center;
		gap: 24px;
		height: 84px;
	}

	.dheader__nav .dheader__row {
		height: 50px;
		gap: 8px;
	}

	.dheader__logo {
		flex: 0 0 auto;
		display: flex;
	}

	.dheader__logo img {
		width: 80px;
		height: auto;
	}

	.dheader__search {
		flex: 1 1 auto;
		max-width: 609px;
		margin-inline: auto;
		display: flex;
		align-items: center;
		gap: 10px;
		height: 44px;
		padding-inline: 14px;
		background: var(--c-bg);
		border: 1px solid var(--c-line);
		border-radius: 8px;
	}

	.dheader__search svg {
		width: 18px;
		height: 18px;
		color: var(--c-gray-400);
		flex: 0 0 auto;
	}

	.dheader__search input {
		flex: 1 1 auto;
		border: 0;
		background: none;
		font: inherit;
		font-size: var(--fs-13);
		color: var(--c-ink);
		outline: none;
	}

	.dheader__actions {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.dheader__act {
		display: flex;
		align-items: center;
		gap: 8px;
		height: 44px;
		padding-inline: 12px;
		border: 1px solid var(--c-line);
		border-radius: 8px;
		background: var(--c-surface);
		font-size: var(--fs-13);
		font-weight: var(--fw-medium);
		color: var(--c-gray-700);
		position: relative;
	}

	.dheader__act svg {
		width: 20px;
		height: 20px;
	}

	.dheader__cart .icon-btn__count {
		position: absolute;
		top: -6px;
		inset-inline-start: -6px;
	}

	.dheader__navcat {
		display: flex;
		align-items: center;
		gap: 8px;
		height: 34px;
		padding-inline: 12px;
		border-radius: var(--r);
		background: var(--c-surface);
		font-size: var(--fs-13);
		font-weight: var(--fw-bold);
		color: var(--c-gray-700);
		margin-inline-end: 16px;
	}

	.dheader__navcat svg {
		width: 16px;
		height: 16px;
	}

	.dheader__navlink {
		height: 34px;
		display: flex;
		align-items: center;
		padding-inline: 14px;
		border-radius: var(--r);
		font-size: var(--fs-12);
		color: var(--c-gray-700);
	}

	.dheader__navlink:hover,
	.dheader__navcat:hover {
		background: var(--c-bg);
	}

	/* ---- Sections scale up ---- */

	/* Hero (549:4281): big slide RIGHT (751w), side column LEFT (361w), h459.
	   In RTL grid, column 1 sits on the right. */
	.hero {
		display: grid;
		grid-template-columns: 1fr 361px;
		gap: 28px;
		align-items: stretch;
		padding-block: 12px 8px; /* mobile raised its top pad for the header shadow; desktop keeps the approved spacing */
	}

	.hero__main {
		aspect-ratio: auto; /* the mobile ratio must not drive width inside the grid */
		height: 459px;
		border-radius: 16px;
		order: 1;
	}

	.hero__main img {
		height: 100%;
		object-fit: cover;
	}

	.bento {
		margin-top: 0;
		display: flex;
		flex-direction: column;
		order: 2;
	}

	.bento__cell--tall {
		display: none; /* the tall carpentry cell joins the side column on desktop */
	}

	.bento__col {
		height: 100%;
	}

	.bento__cell--sm,
	.bento__cell--md {
		aspect-ratio: auto;
		flex: 1;
	}

	/* Rails: desktop cards 165×238 (Figma Product Cards r8). */
	.pcard {
		width: 165px;
		border-radius: 8px;
	}

	.archive__grid .pcard {
		width: auto;
	}

	/* Carousel tracks live in the SAME 1140 box as every other section, so
	   nothing reads wider than the top of the page. */
	.rail__track,
	.flash__track,
	.bnpl__track,
	.coll__track,
	.insta__grid {
		max-width: 1140px;
		margin-inline: auto;
		padding-inline: var(--pad);
	}

	/* Popular categories: one row of 6. */
	.popcats__small {
		grid-template-columns: repeat(8, 1fr);
	}

	/* Banner grid & quick links stay 4-up on one row. */
	.bgrid {
		grid-template-columns: repeat(4, 1fr);
	}

	.qlinks {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Instagram: roomier carousel cards. */
	.insta__cell {
		width: 245px;
	}

	/* ---- Desktop footer (565:4192) ---- */

	.dfooter {
		display: block;
		background: var(--c-surface);
		margin-top: 40px;
		padding-top: 56px;
	}

	.dfooter__cols {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 60px;
		align-items: start;
	}

	.dfooter__logo {
		width: 80px;
		height: auto;
		margin-bottom: 20px;
	}

	.dfooter__about {
		font-size: var(--fs-12);
		line-height: 2;
		color: var(--c-gray-600);
		text-align: justify;
		margin: 0;
	}

	.dfooter__link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 56px;
		border-bottom: 1px solid var(--c-line);
		font-size: var(--fs-13);
		font-weight: var(--fw-medium);
		color: var(--c-ink);
	}

	.dfooter__link svg {
		width: 16px;
		height: 16px;
		color: var(--c-gray-400);
	}

	.dfooter__btn {
		display: flex;
		align-items: center;
		gap: 10px;
		height: 44px;
		padding-inline: 16px;
		border: 1px solid var(--c-line);
		border-radius: 8px;
		font-size: var(--fs-13);
		font-weight: var(--fw-medium);
		color: var(--c-ink);
		margin-bottom: 12px;
		width: fit-content;
	}

	.dfooter__btn svg {
		width: 20px;
		height: 20px;
		color: var(--c-teal);
	}

	.dfooter__btn img {
		width: 20px;
		height: 22px;
		object-fit: contain;
	}

	.dfooter__copy {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		text-align: center;
		color: #626C83;
		font-size: var(--fs-12);
		font-weight: var(--fw-regular);
		padding: 28px 0 24px;
		margin: 36px 0 0;
		border-top: 1px solid var(--c-bg);
	}

	.dfooter__by {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		color: #626C83;
	}

	.dfooter__by span {
		color: var(--c-teal-600);
		font-weight: var(--fw-medium);
	}
}

/* ===== v2 — corrections from the fresh Desktop-Home spec (547:2239) ===== */

@media (min-width: 1025px) {

	/* Hero stays the v1 two-column layout (549:4281: image 751 + side column
	   361) — the earlier "single slide" reading was wrong. */

	/* Categories (550:4290): one centered row of 153×148 tiles — no big cards. */
	.popcats__big {
		display: none;
	}

	.popcats__small {
		grid-template-columns: repeat(4, 153px);
		gap: 12px;
		justify-content: center;
	}

	.smallcat__box {
		height: 100px;
	}

	/* Trust (564:4082): one white 80px bar, items laid out inline.
	   Overrides the mobile 69px card height from main.css. */
	.trust__card {
		height: 80px;
		padding: 0 8px;
	}

	.trust__item {
		flex-direction: row;
		gap: 8px;
		font-size: var(--fs-13);
	}

	/* Brands (563:4038): big centered title + centered wrapped logo rows. */
	.brands__title {
		text-align: center;
		font-size: 24px;
		font-weight: 600;
		color: #40444C;
		margin-bottom: 32px;
	}

	/* Two even rows of five logos, 840 wide (Figma 563:4056/564:4071). */
	.brands__track {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		justify-items: center;
		row-gap: 32px;
		overflow: visible;
		max-width: 840px;
		margin-inline: auto;
		padding-inline: 0;
	}

	/* Instagram (564:4101): centered heading, larger gap, capped follow width. */
	.insta__follow {
		max-width: 503px;
		margin-inline: auto;
	}
}

/* ===== v3 — desktop-only section set and ordering (Figma 547:2239) =====
   Desktop Home has NO mid-banner, banner-grid, quick-links, socials row or
   SEO/link rows; and the bento trio sits AFTER the flash rail. The section
   order is remapped with flex `order` so mobile DOM stays untouched. */

@media (min-width: 1025px) {

	.app__main {
		display: flex;
		flex-direction: column;
	}

	.midbanner,
	.bgrid,
	.qlinks,
	.socials,
	.home-seo,
	.home-links {
		display: none;
	}

	/* Mobile re-cut its section rhythm to the frame's per-junction gaps
	   (see home.css). Desktop has its own frame, so the five sections it
	   still shows keep the flat --sec-y they were signed off with. */
	.popcats,
	.coll,
	.brands,
	.trust,
	.insta {
		padding-block: var(--sec-y);
	}

	.hero        { order: 1; }
	.popcats     { order: 2; }
	.bnpl        { order: 3; }
	.flash       { order: 4; }  /* از تخفیف‌ها جا نمونی */
	.bento-wrap  { order: 5; }
	.rail        { order: 6; }  /* نورسیده */
	.coll        { order: 7; }
	.flash ~ .flash { order: 8; }  /* پرطرفدارترین‌ها */
	.brands      { order: 9; }
	.trust       { order: 10; }
	.insta       { order: 11; }
}

/* ===== v3.1 — hero row height guard (image intrinsic size must not stretch
   the side column past the 459px row) ===== */
@media (min-width: 1025px) {
	.hero .bento {
		height: 459px;
		gap: 10px; /* mobile widened its bento gaps to the frame's 16; desktop keeps the approved 10 */
	}

	.hero .bento__col {
		min-height: 0;
		gap: 10px;
	}

	.hero .bento__cell--sm,
	.hero .bento__cell--md {
		flex: 1 1 0;
		min-height: 0;
		overflow: hidden;
	}
}

/* ===== Mega menu (Figma "Desktop - Category" 595:7008, 840×~500) ===== */

@media (min-width: 1025px) {

	.dmega-wrap {
		position: relative;
	}

	.dmega {
		position: absolute;
		top: 100%;
		inset-inline-start: 0;
		z-index: 60;
		display: none;
		width: 940px;
		max-height: 506px;
		background: var(--c-surface);
		border-radius: 8px;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
		padding: 8px;
		gap: 8px;
	}

	.dmega-wrap:hover .dmega,
	.dmega-wrap:focus-within .dmega {
		display: flex;
	}

	/* Top-level rail — first column (right in RTL). */
	.dmega__rail {
		flex: 0 0 270px;
		background: var(--c-bg);
		border-radius: 8px;
		padding: 6px;
		overflow-y: auto;
	}

	.dmega__cat {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 12px;
		border-radius: var(--r);
		font-size: var(--fs-14);
		color: #40444C;
	}

	/* Each rail row leads with the category's own picture, as in the frame. */
	.dmega__catic {
		flex: none;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.dmega__catic img {
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}

	.dmega__catname {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.dmega__cat svg {
		flex: none;
		width: 14px;
		height: 14px;
		color: var(--c-gray-400);
	}

	.dmega__cat.is-active {
		background: var(--c-surface);
		font-weight: var(--fw-medium);
	}

	/* Children pane. */
	.dmega__panes {
		flex: 1 1 auto;
		padding: 14px 16px;
		overflow-y: auto;
	}

	.dmega__pane {
		display: none;
	}

	.dmega__pane.is-active {
		display: block;
	}

	/* Children are picture tiles four-up, not a text list. */
	.dmega__grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 18px 16px;
	}

	.dmega__tile a {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		color: #40444C;
	}

	.dmega__tileimg {
		width: 100%;
		aspect-ratio: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--c-line);
		border-radius: 10px;
		background: var(--c-surface);
		padding: 10px;
		overflow: hidden;
	}

	.dmega__tileimg img {
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}

	.dmega__tilename {
		font-size: var(--fs-12);
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 100%;
	}

	.dmega__all {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-top: 18px;
		font-size: var(--fs-12);
		color: var(--c-blue);
	}

	.dmega__all svg {
		width: 14px;
		height: 14px;
	}

	/* Search dropdown — 609w, opens under the header field. */
	.dsearch-wrap {
		position: relative;
		flex: 1 1 auto;
		max-width: 609px;
		margin-inline: auto;
	}

	.dsearch-wrap .dheader__search {
		max-width: none;
		margin-inline: 0;
	}

	.dsearch {
		position: absolute;
		top: calc(100% + 6px);
		inset-inline: 0;
		z-index: 60;
		display: none;
		background: var(--c-surface);
		border-radius: 8px;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
		padding: 16px;
	}

	.dsearch-wrap:focus-within .dsearch {
		display: block;
	}

	.dsearch__group + .dsearch__group {
		margin-top: 16px;
	}

	.dsearch__label {
		font-size: var(--fs-12);
		font-weight: var(--fw-bold);
		color: #40444C;
		margin: 0 0 10px;
	}

	.dsearch__chips {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.dsearch__chip {
		display: inline-block;
		padding: 7px 14px;
		background: var(--c-bg);
		border-radius: var(--r);
		font-size: var(--fs-12);
		color: var(--c-gray-600);
		cursor: pointer;
		border: 0;
		font-family: inherit;
	}

	.dsearch__chip:hover {
		color: var(--c-teal-600);
	}

	/* Live result rows: thumb, title + category, price block (Desktop - Search). */
	.dsearch__rows {
		display: flex;
		flex-direction: column;
	}

	.dsearch__row {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 10px 4px;
		color: inherit;
		border-radius: var(--r);
	}

	.dsearch__row:hover {
		background: var(--c-bg);
	}

	.dsearch__rowthumb {
		flex: none;
		width: 56px;
		height: 56px;
		border: 1px solid var(--c-line);
		border-radius: var(--r);
		overflow: hidden;
		background: var(--c-surface);
	}

	.dsearch__rowthumb img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.dsearch__rowbody {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.dsearch__rowtitle {
		font-size: var(--fs-14);
		color: #40444C;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.dsearch__rowcat {
		font-size: var(--fs-12);
		color: var(--c-blue);
	}

	.dsearch__rowprice {
		flex: none;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 4px;
		font-size: var(--fs-14);
		color: #40444C;
	}

	.dsearch__rowtop {
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.dsearch__rowold {
		font-size: var(--fs-12);
		color: var(--c-gray-400);
		text-decoration: line-through;
	}

	.dsearch__rowoff {
		background: var(--c-red);
		color: #fff;
		border-radius: var(--r-pill);
		padding: 1px 7px;
		font-size: var(--fs-10);
	}

	.dsearch__empty {
		margin: 0;
		padding: 8px 4px;
		font-size: var(--fs-12);
		color: var(--c-gray-400);
	}

	/* Mini cart — 340w, opens under the cart button. */
	.dmini-wrap {
		position: relative;
	}

	.dmini {
		position: absolute;
		top: 100%;
		inset-inline-end: 0;
		z-index: 60;
		display: none;
		width: 340px;
		background: var(--c-surface);
		border-radius: 8px;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
		padding: 12px;
	}

	.dmini-wrap:hover .dmini,
	.dmini-wrap:focus-within .dmini {
		display: block;
	}

	.dmini__items {
		max-height: 200px;
		overflow-y: auto;
	}

	.dmini__item {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 8px 0;
		border-bottom: 1px solid var(--c-bg);
	}

	.dmini__thumb img {
		width: 48px;
		height: 48px;
		object-fit: contain;
		border-radius: var(--r);
		background: var(--c-bg);
	}

	.dmini__info {
		min-width: 0;
	}

	.dmini__title {
		display: block;
		font-size: var(--fs-12);
		font-weight: var(--fw-medium);
		color: #40444C;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.dmini__meta {
		font-size: var(--fs-11);
		color: var(--c-gray-500);
	}

	.dmini__info {
		flex: 1;
	}

	/* Line total on the far left, as in «Desktop - MIni Cart». */
	.dmini__price {
		flex: none;
		font-size: var(--fs-12);
		color: var(--c-gray-500);
		white-space: nowrap;
	}

	.dmini__foot {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding-top: 14px;
	}

	.dmini__totalrow {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		margin-bottom: 4px;
	}

	.dmini__totalk {
		font-size: var(--fs-14);
		color: #40444C;
	}

	.dmini__total {
		font-size: var(--fs-16);
		font-weight: var(--fw-bold);
		color: #40444C;
	}

	.dmini__btn {
		display: block;
		text-align: center;
		background: var(--c-blue);
		color: #fff;
		font-size: var(--fs-14);
		font-weight: var(--fw-medium);
		padding: 12px 14px;
		border-radius: var(--r);
	}

	.dmini__btn--ghost {
		background: var(--c-surface);
		border: 1px solid var(--c-blue);
		color: var(--c-blue);
	}

	.dmini__empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		padding: 24px 0;
		color: var(--c-gray-400);
	}

	.dmini__empty svg {
		width: 32px;
		height: 32px;
	}

	.dmini__empty p {
		margin: 0;
		font-size: var(--fs-13);
		color: var(--c-gray-600);
	}
}

/* ===== Inner pages on desktop (Products / PDP / Cart / Checkout / Account) ===== */

@media (min-width: 1025px) {

	/* --- Archive (Desktop - Products): filter rail RIGHT (278), four-up grid
	   LEFT (750, cards 165 with a 30 gap), 76 between them. --- */
	/*
	 * Must be `.archive.container`, not `.archive`: WordPress puts an
	 * `archive` class on <body> for archive views, so the bare selector
	 * turned the whole document into this grid.
	 */
	.archive.container {
		display: grid;
		grid-template-columns: 278px minmax(0, 1fr);
		column-gap: 76px;
		align-items: start;
		max-width: 1140px;
		margin-inline: auto;
		width: 100%;
		padding-inline: 0;
	}

	/* Heading, chip row, grid and pager all live in the left column; only the
	   rail takes column 1 (the right side in RTL). */
	.archive.container > * {
		grid-column: 2;
	}

	/* Needs to out-specify `.archive.container > *` above. */
	.archive.container > .archive__rail {
		grid-column: 1;
		grid-row: 1 / span 20;
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding-top: 24px;
	}

	.archive__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 30px;
	}

	.archive__head {
		padding-top: 24px;
	}

	/* The mobile chip row is redundant next to the rail. */
	.archive__filters {
		display: none;
	}

	.frail {
		background: var(--c-surface);
		border-radius: 8px;
		padding: 18px 16px;
	}

	.frail__title {
		font-size: 20px;
		font-weight: var(--fw-regular);
		color: #40444C;
		margin: 0 0 12px;
	}

	.frail__list {
		display: flex;
		flex-direction: column;
	}

	.frail__link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 9px 0;
		font-size: var(--fs-14);
		color: #40444C;
	}

	.frail__link.is-active {
		color: #007AFF;
	}

	.frail__count {
		font-style: normal;
		font-size: var(--fs-12);
		color: var(--c-gray-400);
	}

	/* --- PDP (Desktop - PDP 615:4850): gallery RIGHT (517w), info LEFT (583w),
	   gap 40 — per the real frame spec. In RTL grid, column 1 is the right. --- */
	/* 615:4921 — the 1140 container IS the content box: gallery 517 + gap 40 +
	   info 583. Any padding-inline here steals from the info column (it was
	   coming out 551) and insets every full-span row below by 16px a side. */
	.pdp {
		display: grid;
		grid-template-columns: 517px minmax(0, 583px);
		gap: 20px 40px;
		align-items: start;
		padding-top: 24px;
		max-width: 1140px;
		margin-inline: auto;
		padding-inline: 0;
		width: 100%;
	}

	/*
	 * Row 2 of the PDP frame (616:5091) is TWO columns: the spec card on the
	 * left beside the description on the right. `.pdp__specs` comes first in
	 * the markup, so auto-placement puts it in column 1 and the description
	 * lands beside it. Leaving the description full-span pushed the spec card
	 * onto a row of its own and the layout read as broken.
	 */
	/* `.pdp > *` sets grid-column:2 and is declared later, so these need the
	   extra specificity to win. Column 1 is the RIGHT side in RTL — the frame
	   puts the description there and the spec card on the left. */
	.pdp .pdp__descwrap {
		grid-column: 1;
		grid-row: 2;
		max-width: none;
		padding-inline: 0;
	}

	.pdp .pdp__specs {
		grid-column: 2;
		grid-row: 2;
		padding-inline: 0;
	}

	/* The accordion row below still spans the full 1140 (617:5390). */
	.pdp__lower {
		grid-column: 1 / -1 !important;
		max-width: none;
		padding-inline: 0;
	}

	/* The info column keeps its own gutter now that .pdp has none. */
	.pdp > .container:not(.pdp__descwrap):not(.pdp__lower) {
		padding-inline: 0;
	}

	/* Desktop PDP type scale, read off the frame: 24/400 headings, 20/400
	   price, 14/400 spec rows — a size up from mobile and all regular weight,
	   where this used to be 600. */
	.pdp__desctitle {
		display: block;
		font-size: 24px;
		font-weight: var(--fw-regular);
		color: #40444C;
		text-align: start;
		margin: 8px 0 16px;
	}

	.pdp__title {
		font-size: 24px;
		font-weight: var(--fw-regular);
		color: #333;
	}

	.pdp__specstitle {
		font-size: 20px;
	}

	.pdp__speck,
	.pdp__specv {
		font-size: var(--fs-14);
	}

	.buybar__price,
	.buybar .price {
		font-size: 20px;
		font-weight: var(--fw-regular);
		color: #40444C;
	}

	.buybar__btn {
		font-size: var(--fs-16);
		font-weight: var(--fw-regular);
	}

	.pdp__lower .pdp__acc {
		background: var(--c-surface);
		border-radius: 16px;
		padding: 20px 36px;
	}

	.pdp > * {
		grid-column: 2;
	}

	/* Gallery sits in the first row and scrolls with the page. It used to be
	   `position: sticky` with `grid-row: 1/span 30`, which spanned the
	   description, accordion and related rows as well — so the product image
	   trailed the reader all the way down to the footer. The PDP frame has no
	   sticky gallery. */
	.pdp__gallery {
		grid-column: 1;
		grid-row: 1;
		align-self: start;
		display: flex;
		flex-direction: row;
		gap: 16px;
		align-items: flex-start;
	}

	.pdp__stage {
		flex: 1 1 auto;
		background: var(--c-surface);
		border-radius: 12px;
	}

	/* Thumbnails become a vertical rail beside the stage (Figma 162372). */
	.pdp__thumbs {
		flex: 0 0 auto;
		flex-direction: column;
		order: -1;
	}

	/* Trust bar spans the full container (564:4082 = 1140×80). */
	.trust__card {
		max-width: none;
		width: 100%;
	}

	/* Per the PDP frame, the trust bar and related rail sit BELOW the two
	   columns at full container width — not inside the info column. */
	.pdp .pdp__trust,
	.pdp .rail {
		grid-column: 1 / -1;
	}

	.pdp .rail .rail__track {
		padding-inline: 0;
	}

	/* --- Cart (Desktop - Cart 577:2669): items + sticky summary column. --- */
	.cartpage {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 383px;
		gap: 24px;
		align-items: start;
		padding-top: 24px;
	}

	.cartpage > * {
		grid-column: 1;
	}

	.cartpage .cartbar {
		grid-column: 2;
		grid-row: 1 / span 10;
		position: sticky;
		top: 150px;
		bottom: auto;
		inset-inline: auto;
		width: 383px;
		height: auto;
		max-width: none;
		transform: none;
		left: auto;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 14px;
		background: var(--c-surface);
		border: 0;
		border-radius: 8px;
		box-shadow: var(--shadow-sm);
		padding: 20px;
	}

	/* The summary column's CTA is full width, not the mobile 164px pill. */
	.cartpage .cartbar__btn {
		width: 100%;
		min-height: 44px;
		order: 2;
	}

	.cartpage .cartbar__total {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		order: 1;
	}

	.cart-empty-wrap {
		grid-column: 1 / -1;
	}

	/* --- Checkout (Desktop - Payment): the step wizard, centred. ---
	   The mobile markup is a single column of steps, so desktop only needs to
	   cap the reading width and turn the fixed mobile bar into an in-flow
	   footer inside the card column. */
	.checkout {
		padding-top: 24px;
	}

	.cores {
		margin-bottom: 22px;
	}

	.checkout .costep {
		max-width: 820px;
		margin-inline: auto;
		margin-bottom: 14px;
	}

	.checkout .cocard {
		border-radius: 8px;
		box-shadow: var(--shadow-sm);
		padding: 26px 28px;
	}

	.checkout .costep__done {
		border-radius: 8px;
		box-shadow: var(--shadow-sm);
		padding: 18px 24px;
	}

	.checkout .costep__todo {
		min-height: 58px;
		padding: 14px 24px;
	}

	/* Two-up the address fields — there is room for it at this width. */
	.checkout .costep[data-step="1"] .form-row-first,
	.checkout .costep[data-step="1"] .form-row-last {
		display: inline-block;
		width: calc(50% - 7px);
		vertical-align: top;
	}

	.checkout .costep[data-step="1"] .form-row-first {
		margin-inline-end: 12px;
	}

	.cobtn,
	.checkout #place_order {
		max-width: 320px;
		margin-inline-start: auto;
	}

	/* --- Order received (Desktop - Success Payment) --- */
	.thanks {
		max-width: 720px;
		margin-inline: auto;
		padding-top: 32px;
	}

	.thanks__actions {
		flex-direction: row;
		justify-content: center;
	}

	.thanks__actions .btn {
		min-width: 200px;
	}

	/* --- Account (Desktop - My * frames): nav rail right, content left. --- */
	.account {
		display: grid;
		grid-template-columns: 280px minmax(0, 1fr);
		gap: 24px;
		align-items: start;
		padding-top: 24px;
	}

	.account > * {
		grid-column: 2;
	}

	.account .acctnav {
		grid-column: 1;
		grid-row: 1 / span 30;
		position: sticky;
		top: 150px;
		background: var(--c-surface);
		border-radius: 8px;
		box-shadow: var(--shadow-sm);
		padding: 8px;
	}

	/* Generic page templates keep a readable width.
	   Must be `.x.container`, never bare: WordPress puts `search` (and
	   `archive`) on <body> for search results, and a bare `.search` squeezed
	   the whole document to 720px while the product grid stayed 1140 —
	   the cards spilled out past the header on «?s=». */
	.addr.container,
	.search.container {
		max-width: 720px;
		margin-inline: auto;
	}
}

/* PDP buy bar: static card inside the info column on desktop (not fixed). */
@media (min-width: 1025px) {
	/* It is the last child in the markup (it is the fixed bottom bar on
	   mobile), so auto-placement dropped it into a row below the accordion and
	   the related rail — the price and «افزودن به سبد خرید» ended up floating
	   near the footer. Pin it to row 2 of the info column, directly under the
	   product details, which is where the PDP frame puts it. */
	.buybar {
		position: static;
		inset: auto;
		transform: none;
		width: auto;
		max-width: none;
		background: var(--c-surface);
		border: 0;
		border-radius: 8px;
		box-shadow: var(--shadow-sm);
		padding: 16px 20px;
		margin-top: 8px;
	}

	.trust__item {
		white-space: nowrap;
	}
}

/* ===== Desktop Home v4 — sections rebuilt from the user's frame captures
   + desktop-home.json specs (BNPL 559:2247, rails 560:3243/2811, banner
   mosaic 560:2945, instagram 564:4101, tiles 550:4290). ===== */

/* Mobile-only bits hidden on desktop / desktop-only bits hidden on mobile.
   `.bnpl-dt` is no longer in this list: since 2026-08-04 the designer uses the
   same panel on both widths, so it renders everywhere and only its geometry
   changes (mobile rules live in home.css). */
.smallcat--dt,
.insta__banners,
.flash__sideimg,
.collcard__sep,
.collcard__btn {
	display: none;
}

/* Mobile now shows the same trio of shots as desktop (the designer aligned
   the two on 2026-08-05), so the old single-image rules are gone; the mobile
   sizes live in home.css. */

@media (min-width: 1025px) {

	/* --- BNPL: light-blue panel, centred copy, side collages. --- */
	.bnpl {
		display: none;
	}

	.bnpl-dt {
		display: block;
		padding-block: 14px;
	}

	.bnpl-dt__panel {
		position: relative;
		height: 459px;
		border-radius: 16px;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #B0D6FF 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: visible;
	}

	.bnpl-dt__side {
		position: absolute;
		pointer-events: none;
	}

	.bnpl-dt__side--start {
		inset-inline-start: 0;
		top: -41px;
		width: 296px;
	}

	.bnpl-dt__side--end {
		inset-inline-end: 0;
		top: 37px;
		width: 337px;
	}

	.bnpl-dt__center {
		width: 527px;
		text-align: center;
	}

	.bnpl-dt__title {
		font-size: 32px;
		font-weight: 600;
		color: #007AFF;
		margin: 0 0 24px;
	}

	.bnpl-dt__sub {
		font-size: 18px;
		font-weight: 400;
		color: #40444C;
		line-height: 1.6;
		margin: 0 0 44px;
	}

	.bnpl-dt__btns {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}

	.bnpl-dt__btn {
		width: 283px;
		height: 43px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		border-radius: 8px;
		font-size: var(--fs-14);
		font-weight: var(--fw-medium);
	}

	.bnpl-dt__btn--solid {
		background: #007AFF;
		color: #fff;
	}

	.bnpl-dt__btn--ghost {
		background: var(--c-surface);
		border: 1px solid #8AC2FF;
		color: #007AFF;
	}

	/* --- Rails with a side image (560:3243 flash / 560:2811 new). --- */
	.flash--img {
		display: grid;
		grid-template-columns: 545px minmax(0, 1fr);
		gap: 40px;
		align-items: stretch;
		max-width: 1140px;
		margin-inline: auto;
		padding-inline: var(--pad);
		width: 100%;
	}

	.flash--img .flash__sideimg {
		display: block;
		width: 100%;
		height: 312px;
		object-fit: cover;
		border-radius: 16px;
	}

	/* RTL grid: column 1 = right. Image LEFT → image in column 2. */
	.flash--img-end .flash__sideimg { grid-column: 2; grid-row: 1; }
	.flash--img-end .flash__body    { grid-column: 1; grid-row: 1; }

	/* Image RIGHT → image in column 1; swap template so image col is first. */
	.flash--img-start { grid-template-columns: 545px minmax(0, 1fr); }
	.flash--img-start .flash__sideimg { grid-column: 1; grid-row: 1; }
	.flash--img-start .flash__body    { grid-column: 2; grid-row: 1; }

	.flash--img .flash__head,
	.flash--img .flash__track {
		max-width: none;
		padding-inline: 0;
	}

	.flash--img .flash__track > .pcard {
		width: 165px;
	}

	/* --- Banner mosaic (560:2945): tall / stacked-pair / tall. --- */
	.bgrid {
		grid-template-columns: 1fr 1.9fr 1fr;
		grid-template-rows: 216px 216px;
		gap: 28px;
	}

	.bgrid__cell {
		aspect-ratio: auto;
		border-radius: 16px;
	}

	.bgrid__cell:nth-child(1) { grid-column: 3; grid-row: 1 / span 2; } /* دریل — چپ بلند */
	.bgrid__cell:nth-child(2) { grid-column: 2; grid-row: 2; }          /* باغبانی — وسط پایین */
	.bgrid__cell:nth-child(3) { grid-column: 1; grid-row: 1 / span 2; } /* کنزاکس — راست بلند */
	.bgrid__cell:nth-child(4) { grid-column: 2; grid-row: 1; }          /* فرز — وسط بالا */

	/* --- Instagram two-column (564:4101). --- */
	.insta__cols {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 607px;
		gap: 30px;
		align-items: start;
	}

	/* Both columns pinned to row 1 — an explicit grid-column with an auto row
	   lets sparse auto-placement push the second item to a new row. */
	.insta__banners {
		display: flex;
		flex-direction: column;
		gap: 30px;
		grid-column: 2; /* LEFT in RTL */
		grid-row: 1;
	}

	.insta__banners img {
		width: 100%;
		height: 216px;
		object-fit: cover;
		border-radius: 16px;
	}

	.insta__side {
		grid-column: 1;
		grid-row: 1;
	}

	.insta__grid {
		max-width: none;
		padding-inline: 0;
		overflow: visible;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.insta__cell {
		width: auto;
	}

	.insta__cell:nth-child(n+3) {
		display: none; /* the desktop frame shows two posts */
	}

	.insta__follow {
		max-width: none;
		background: #007AFF;
		border-radius: 8px;
		margin-top: 12px;
	}

	/* --- Category tiles: full 7-tile row. --- */
	.smallcat--dt {
		display: flex;
	}

	.popcats__small {
		grid-template-columns: repeat(7, 1fr);
		gap: 16px;
		justify-content: stretch;
	}

	/* --- Collections: desktop headline + outline button. --- */
	/* Glyph sits at the START (right in RTL) of the titles and grows. */
	.coll__head {
		flex-direction: row;
		gap: 18px;
	}

	.coll__glyph {
		width: 104px;
		height: 92px;
	}

	.coll__title {
		font-size: 32px;
		font-weight: 600;
	}

	.coll__sub {
		font-size: 18px;
	}

	.collcard__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 42px;
		border: 1px solid #8AC2FF;
		border-radius: 8px;
		color: #007AFF;
		font-size: var(--fs-14);
		font-weight: var(--fw-medium);
		margin-top: 6px;
	}

	.collcard {
		width: 360px;
	}

	.coll__track {
		justify-content: center;
	}
}

/* ===== v5 — v3/v4 reconciliation. The v3 order map predates v4: the desktop
   BNPL panel is its own .bnpl-dt section (the mobile .bnpl it replaces held
   the order), the نورسیده rail is now a .flash part instead of .rail, and the
   banner mosaic is back per the v4 spec (560:2945) but was still hidden. ===== */

@media (min-width: 1025px) {

	.bnpl-dt {
		order: 3;
	}

	/* Rails told apart by their side-image modifier: تخفیف‌ها (image at the
	   end), نورسیده (image at the start), پرطرفدارترین‌ها (no image). */
	.flash.flash--img-end   { order: 4; }
	.flash.flash--img-start { order: 6; }

	/* Per 547:2239 the banner mosaic (560:2945, y=2025) sits BETWEEN the two
	   rails — تخفیف‌ها (y=1599) then the mosaic then نورسیده (y=2598) — not
	   after both of them. order:5 is free since .bento-wrap was removed. */
	.bgrid {
		display: grid;
		order: 5;
	}

	.coll                   { order: 8; }
	.flash:not(.flash--img) { order: 9; }
	.brands                 { order: 10; }
	.trust                  { order: 11; }
	.insta                  { order: 12; }
}

/* On narrow desktops the BNPL panel shrinks below the 1140 frame the side
   collages were sized for — scale them down so they stay clear of the copy. */
@media (min-width: 1025px) and (max-width: 1280px) {
	.bnpl-dt__side--start { width: 240px; }
	.bnpl-dt__side--end   { width: 274px; top: 60px; }

	/* Smaller collages here, so the reserved gutter shrinks to match. */
	.bnpl-dt__panel { padding-inline: 285px; }
}

/* v5.1 — the v4 side-image rails squeezed the card track to a 545px column
   (3 cards) next to a half-width photo and read as broken. Rails go back to
   full width on desktop; the decorative side images stay off. */
@media (min-width: 1025px) {
	/* Undo the v4 two-column box so the section is full-bleed like plain .flash. */
	.flash--img {
		display: block;
		max-width: none;
		padding-inline: 0;
	}

	.flash--img .flash__sideimg {
		display: none;
	}

	/* Head and track go back to the shared centered 1140 box (v4 had zeroed
	   them out for the grid). */
	.flash--img .flash__head,
	.flash--img .flash__track {
		max-width: 1140px;
		margin-inline: auto;
		padding-inline: var(--pad);
	}
}

/* v5.3 — collections cards per the user's Figma capture: a white card with a
   trio of product shots on a tinted media panel, centred title + two-line
   grey description, a hairline divider, then a ghost "مشاهده محصولات" button.
   Exactly three cards fill the 1140 row; the extra cats are dropped. */
@media (min-width: 1025px) {

	.coll__track {
		gap: 24px;
		overflow: visible;
	}

	.collcard {
		/* Three cards + two 24px gaps fill the 1108px content box exactly. */
		width: 353px;
		padding: 12px 16px 16px;
		border: 1px solid #EEF1F6;
		box-shadow: var(--shadow-sm);
	}

	.collcard:nth-child(n + 4) {
		display: none;
	}

	/* Media per the Figma capture: three rounded teal tiles in a row — the
	   middle one taller and fully visible, the side ones cropped by the card
	   edges. Product shots (white background) sink into the tile colour via
	   multiply on the wrapper's background. */
	.collcard__media {
		aspect-ratio: 321 / 230;
		height: 160px; /* mobile shrank its strip to the frame's 101; desktop keeps the signed-off height */
		background: none;
		gap: 8px;
		padding: 0;
		overflow: hidden;
	}

	.collcard__thumb,
	.collcard__media .collcard__thumb:nth-child(n + 2) {
		display: flex;
		flex: 0 0 auto;
		width: 45%;
		height: 84%;
		background: #6D98A7;
		border-radius: 12px;
		overflow: hidden;
	}

	.collcard__media .collcard__thumb:nth-child(2) {
		width: 47%;
		height: 100%;
	}

	.collcard__thumb img {
		width: 88%;
		height: 88%;
		margin: auto;
	}

	.collcard__title {
		font-size: var(--fs-16);
		text-align: center;
		margin-top: 14px;
	}

	.collcard__desc {
		text-align: center;
		font-size: var(--fs-12);
		color: #626C83;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.collcard__sep {
		display: block;
		width: 100%;
		height: 1px;
		background: #EEF1F6;
		margin-top: 14px;
	}
}

/* v5.2 — the BNPL start-side collage popped 41px above the panel (a Figma
   pop-out effect) and landed on the category tiles row. Collages now stay
   inside the panel; overflow-hidden also rounds them into its corners. */
@media (min-width: 1025px) {
	.bnpl-dt__panel {
		overflow: hidden;
	}

	.bnpl-dt__side--start {
		top: auto;
		bottom: 0;
	}
}

/* v6 — the BNPL panel is now shared with mobile (the designer aligned the two
   on 2026-08-04), so home.css ships mobile geometry for the same classes.
   Undo the parts that must not reach desktop. */
@media (min-width: 1025px) {
	/* 559:2247 is 1140 wide: the container's own gutter would make it 1108. */
	.bnpl-dt {
		padding-top: 0;
		padding-inline: 0;
	}

	/*
	 * The mobile panel stacks its children (flex-direction: column) and lets
	 * the copy stretch across the full width. Both leak up here: the column
	 * direction turns `justify-content: center` into VERTICAL centring, and
	 * `align-self: stretch` then parks the 527px copy block against the start
	 * edge — right on top of the start-side collage. Restore the row layout.
	 */
	.bnpl-dt__panel {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		/*
		 * Reserve the collage columns instead of trusting fixed widths to add
		 * up. The copy was a rigid 527 and the two collages 296 + 337, so from
		 * 1160px of panel downwards they had to intersect — and below ~1041 at
		 * the narrow breakpoint the copy was visibly cut. With the space
		 * reserved here the copy just narrows and can never reach them.
		 */
		padding-inline: 340px;
	}

	.bnpl-dt__center,
	.bnpl-dt__btns {
		align-self: auto;
	}

	.bnpl-dt__center {
		width: auto;
		max-width: 527px;
	}

	/* Both collages are used at this width; the mobile-only one is off. */
	.bnpl-dt__side--start,
	.bnpl-dt__side--end {
		display: block;
	}

	.bnpl-dt__side--mobile {
		display: none;
	}

	/* Mobile reserves space beside the collage; desktop copy is centred. */
	.bnpl-dt__title,
	.bnpl-dt__sub {
		padding-inline: 0;
	}

	.bnpl-dt__btns {
		padding-inline: 0;
	}

	.bnpl-dt__btn {
		width: 283px;
	}
}

/* --- Cart (Desktop - Cart): 24/400 heading, and rows on an 86px pitch
   rather than the mobile 111. --- */
@media (min-width: 1025px) {
	.cartpage__title {
		font-size: 24px;
		font-weight: var(--fw-regular);
		grid-column: 1;
		margin-bottom: 18px;
	}

	.cartpage .cartitem {
		min-height: 74px;
		padding: 12px 16px;
	}

	.cartpage .cartlist {
		gap: 12px;
	}
}

/* --- Account screens (Desktop - My orders / my cheques / my addresses /
   support): the rail heads with the signed-in customer, the support cards sit
   two-up, and the success screen splits into two columns. --- */
@media (min-width: 1025px) {
	.acctnav__who {
		display: flex;
	}

	.support__cards {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}

	/* Success Payment: confirmation on the right, the claim card on the left. */
	.thanks {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 40px;
		align-items: start;
		max-width: 1140px;
	}

	/* Right column carries the confirmation and the order breakdown; the left
	   column carries the claim card and the two CTAs. */
	.thanks__hero,
	.thanks__railcard,
	.thanks .orderd {
		grid-column: 1;
	}

	.thanks .orderd__heading {
		font-size: 24px;
	}

	.thanks__claim,
	.thanks__actions {
		grid-column: 2;
	}

	/* Hero + rail read as one card in the frame. */
	.thanks__hero {
		background: var(--c-surface);
		border-radius: 8px 8px 0 0;
		box-shadow: var(--shadow-sm);
		padding: 28px 24px 8px;
		margin-bottom: 0;
	}

	.thanks__railcard {
		border-radius: 0 0 8px 8px;
		box-shadow: var(--shadow-sm);
		margin: 0;
		padding: 8px 24px 20px;
	}

	.thanks__eta {
		border: 1px solid #E2E6EE;
		border-radius: var(--r-md);
		padding: 9px 14px;
	}

	.thanks__actions .btn {
		width: 100%;
	}

	.thanks__title {
		font-size: 24px;
		font-weight: var(--fw-regular);
	}

	.thanks__num {
		font-size: var(--fs-14);
		color: #626C83;
	}

	.oprog__label {
		font-size: var(--fs-14);
	}

	.thanks__claimtitle {
		font-size: 20px;
		font-weight: var(--fw-regular);
	}

	.thanks__claimsub {
		font-size: var(--fs-14);
	}

	.thanks__claimbtn {
		font-size: var(--fs-16);
	}

	/* --- Desktop - New Address: name/phone and province/city sit two-up. --- */

	/*
	 * The frame draws this as a wide modal card, and everything inside it is a
	 * step up from the mobile scale — 20px labels over 60px inputs, not 14/48.
	 * The card fills the account content column rather than sitting in a narrow
	 * strip beside the rail.
	 */
	.addrform {
		max-width: 1000px;
		padding: 34px 40px 40px;
	}

	.addrform__title {
		font-size: 30px;
	}

	.addrform__fields {
		grid-template-columns: 1fr 1fr;
		gap: 26px 30px;
	}

	.addrform .form-row {
		gap: 12px;
	}

	.addrform .form-row label {
		font-size: 20px;
		font-weight: var(--fw-medium);
	}

	.addrform .form-row input.input-text,
	.addrform .form-row select,
	.addrform .form-row .select2-selection {
		height: 60px;
		padding: 0 20px;
		border-radius: 12px;
		font-size: var(--fs-16);
	}

	.addrform__submit {
		margin-top: 34px;
	}

	/*
	 * address-i18n.js re-orders these rows in the DOM to suit the locale, so the
	 * frame's layout is pinned with `order` instead of relying on source order:
	 * name | phone, province | city, then address and postcode full width.
	 */
	.addrform #billing_first_name_field,
	.addrform #shipping_first_name_field {
		order: 1;
		grid-column: 1;
	}

	.addrform #billing_phone_field,
	.addrform #shipping_phone_field {
		order: 2;
		grid-column: 2;
	}

	.addrform #billing_state_field,
	.addrform #shipping_state_field {
		order: 3;
		grid-column: 1;
	}

	.addrform #billing_city_field,
	.addrform #shipping_city_field {
		order: 4;
		grid-column: 2;
	}

	.addrform #billing_address_1_field,
	.addrform #shipping_address_1_field {
		order: 5;
		grid-column: 1 / -1;
	}

	.addrform #billing_postcode_field,
	.addrform #shipping_postcode_field {
		order: 6;
		grid-column: 1 / -1;
	}

	.addrform .form-row-wide {
		grid-column: 1 / -1;
	}

	.addrform__submit .btn {
		height: 64px;
		border-radius: 12px;
		font-size: 20px;
	}

	/* --- Desktop - my orders- details: the meta strip runs four-up in one row
	   and the two actions sit side by side. --- */
	.orderd__heading {
		font-size: 20px;
		margin: 0;
	}

	.orderd__meta {
		flex-direction: row;
		gap: 0;
	}

	.orderd__metacell {
		flex: 1;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding: 6px 10px;
		font-size: var(--fs-14);
	}

	/* The frame reads مجموع on the far left, so the last cell is right-aligned
	   in RTL terms — i.e. its text hugs the end of the strip. */
	.orderd__metacell:last-child {
		align-items: flex-end;
		text-align: end;
	}

	.orderd__item {
		gap: 20px;
	}

	.orderd__itemqty {
		width: 90px;
		text-align: center;
	}

	.orderd__itemprice {
		width: 150px;
		text-align: end;
		font-size: var(--fs-14);
		color: var(--c-text);
	}

	.orderd__actions {
		flex-direction: row;
		gap: 16px;
	}

	.orderd__actions .btn {
		flex: 1;
	}

	/* --- Desktop - Tracking: the map and the rail on the right, the ETA,
	   courier, summary and support button stacked on the left. --- */
	.track {
		display: grid;
		/* RTL: the first track is the RIGHT column, which holds the map. */
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 20px;
		align-items: start;
	}

	/* The frame has no page heading here — the map carries the screen. */
	.track__title {
		display: none;
	}

	.track__map,
	.track__railcard {
		grid-column: 1;
		margin: 0;
	}

	.track__map.is-empty {
		min-height: 300px;
	}

	.track__etacard,
	.track__courier,
	.track__info,
	.track__support,
	.track__help {
		grid-column: 2;
		margin: 0;
	}

	.track__etacard {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		background: var(--c-surface);
		border-radius: var(--r-lg);
		padding: 16px 18px;
		text-align: start;
	}

	.track__etak {
		font-size: var(--fs-14);
		color: #96A0B6;
	}

	.track__etav {
		margin: 0;
		font-size: 24px;
		color: #40444C;
	}

	.track__info {
		display: block;
		background: var(--c-surface);
		border-radius: var(--r-lg);
		padding: 16px 18px;
	}

	.track__infotitle {
		margin: 0 0 12px;
		font-size: 20px;
		font-weight: var(--fw-medium);
		color: #40444C;
	}

	.track__inforow {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 12px;
		padding: 7px 0;
		font-size: var(--fs-14);
	}

	.track__infok {
		color: #626C83;
		flex: none;
	}

	.track__infov {
		color: #40444C;
		text-align: end;
	}

	.track__infoaddr {
		font-style: normal;
		line-height: 1.8;
	}

	.track__support {
		display: flex;
		width: 100%;
	}

	/* The button replaces the inline help line on desktop. */
	.track__help {
		display: none;
	}
}

/* ===== v7 — Desktop checkout is NOT the mobile wizard =====================
 * The designer drew two separate layouts. Mobile (Pay 1/2/3) is a stepped
 * accordion; the Desktop - Payment frame shows everything at once in two
 * columns: a 740 main column on the right holding cart items, delivery and
 * payment, and a 360 summary column on the left holding the coupon box, the
 * totals, the trust row and the pay button. Nothing is collapsed and there is
 * no step rail.
 */
@media (min-width: 1025px) {

	.checkout.container {
		display: grid;
		/* RTL: the first track is the RIGHT column. */
		grid-template-columns: 740px 360px;
		column-gap: 40px;
		align-items: start;
		max-width: 1140px;
		margin-inline: auto;
		width: 100%;
		padding-inline: 0;
	}

	/* The reservation strip and the form both span the grid; the form becomes
	   the real two-column container so its own children can be placed. */
	.checkout.container > .cores {
		grid-column: 1 / -1;
	}

	.checkout.container > form.checkout {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: 740px 360px;
		column-gap: 40px;
		align-items: start;
	}

	/* Right column: cart items, then delivery, then payment. */
	.checkout .coitems,
	.checkout .costep[data-step="1"],
	.checkout .costep[data-step="2"] {
		grid-column: 1;
	}

	/* Left column: the review / summary card. */
	.checkout .costep[data-step="3"] {
		grid-column: 2;
		grid-row: 1 / span 20;
		position: sticky;
		top: 150px;
	}

	/* Every step is open — no rail, no collapsed rows, no "next" button. */
	.checkout .costeps,
	.checkout .costep__done,
	.checkout .costep__todo,
	.checkout .cobtn {
		display: none !important;
	}

	.checkout .costep .cocard {
		display: block !important;
	}

	/*
	 * The older centred-wizard block above still sets `max-width: 820px;
	 * margin-inline: auto` on every step. On a grid item that auto margin means
	 * shrink-to-fit, so the steps collapsed to their content width (~376) inside
	 * the 740 track instead of filling it. Undo all three here.
	 */
	.checkout .costep {
		width: 100%;
		max-width: none;
		margin-inline: 0;
		margin-bottom: 20px;
	}

	.checkout .cocard {
		border-radius: 8px;
		padding: 20px 24px;
	}

	.checkout .cocard__title {
		font-size: var(--fs-16);
	}

	/* Address fields two-up — there is room at 740. */
	.checkout .costep[data-step="1"] .form-row-first,
	.checkout .costep[data-step="1"] .form-row-last {
		display: inline-block;
		width: calc(50% - 8px);
		vertical-align: top;
	}

	.checkout .costep[data-step="1"] .form-row-first {
		margin-inline-end: 14px;
	}

	/* Gateways sit in a row of chips rather than stacked cards. */
	.checkout .wc_payment_methods {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 14px;
	}

	.checkout .wc_payment_method {
		flex: 1 1 180px;
	}

	.checkout .wc_payment_method > label {
		justify-content: center;
		padding: 12px 14px;
		font-size: var(--fs-12);
	}

	/* Cart items card: full list, never collapsed. */
	.checkout .coitems {
		padding: 20px 24px;
	}

	.checkout .coitems__list {
		display: block !important;
	}

	.checkout .coitems__title {
		font-size: var(--fs-16);
	}

	/* Summary column. */
	.checkout .costep[data-step="3"] .cocard {
		padding: 20px;
	}

	.checkout .cotrust {
		display: flex;
		justify-content: space-between;
		gap: 8px;
		margin: 18px 0;
	}

	.checkout .cotrust li {
		flex-direction: column;
		gap: 6px;
		font-size: var(--fs-10);
		text-align: center;
	}
}

/* ===== v8 — Desktop BNPL: the collages are MEANT to pop out ===============
 * v5.2 clipped them because an earlier pop-out landed on the category tiles
 * above. The frame really does float them 142px above the panel, so instead of
 * clipping, the section now reserves that much headroom and lets them show.
 * Panel itself is 1140 x 443 at this width.
 */
@media (min-width: 1025px) {
	.bnpl-dt {
		/* room for the 142px the cards rise above the panel */
		padding-top: calc(var(--sec-y) + 142px);
	}

	.bnpl-dt__panel {
		overflow: visible;
		height: 443px;
	}

	.bnpl-dt__side {
		z-index: 0;
	}

	.bnpl-dt__side--start {
		inset-inline-start: 0;
		top: -142px;
		bottom: auto;
		width: 300px;
		height: auto;
	}

	.bnpl-dt__side--end {
		inset-inline-end: 0;
		top: -108px;
		bottom: auto;
		width: 340px;
		height: auto;
	}

	/* Copy sits above the artwork. */
	.bnpl-dt__center,
	.bnpl-dt__btns {
		position: relative;
		z-index: 2;
	}
}

/* ===== v8 — Desktop brands: 5x2 grid of white cards ======================
 * The mobile treatment (one faded scrolling row, teal heading) had leaked to
 * desktop. The frame shows a dark centred heading over ten 135x56 white cards
 * in two rows of five, 840 wide overall, logos in full colour with no mask.
 */
@media (min-width: 1025px) {
	.brands__title {
		font-size: 24px;
		font-weight: var(--fw-regular);
		color: #40444C;
		margin-bottom: 34px;
	}

	.brands__track {
		display: grid;
		grid-template-columns: repeat(5, 135px);
		justify-content: center;
		gap: 34px 40px;
		max-width: 840px;
		margin-inline: auto;
		overflow: visible;
		padding-inline: 0;
		/* the mobile edge fade has no place here */
		-webkit-mask-image: none;
		mask-image: none;
	}

	.brands__item {
		width: 135px;
		height: 56px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--c-surface);
		border-radius: 8px;
		padding: 8px 12px;
	}

	.brands__item img {
		filter: none;
		opacity: 1;
	}
}

/* ===== v8 — Desktop sign in is a centred two-up card =====================
 * Frame «Desktop - Sign in»: one 760-wide card, benefits panel on the RIGHT
 * (the first column in RTL) over a tinted background, form on the LEFT.
 * Nothing full-width, no tab strip, no greyed profile menu — mobile only.
 */
@media (min-width: 1025px) {
	.auth.container {
		display: grid;
		grid-template-columns: 380px 380px;
		justify-content: center;
		align-items: stretch;
		max-width: 1140px;
		margin-inline: auto;
		padding-block: 90px 120px;
		padding-inline: 0;
	}

	.authside {
		display: flex;
		grid-column: 1;
		flex-direction: column;
		gap: 18px;
		background: #E6F2FF;
		border-radius: 0 12px 12px 0;
		padding: 40px 34px;
	}

	.authside__title {
		font-size: 24px;
		font-weight: var(--fw-regular);
		color: #40444C;
		margin: 0;
	}

	.authside__intro {
		font-size: var(--fs-14);
		line-height: 2;
		color: #40444C;
		margin: 0;
	}

	.authside__list {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-top: 8px;
	}

	.authside__row {
		display: flex;
		align-items: center;
		gap: 10px;
		font-size: var(--fs-14);
		color: #40444C;
	}

	.authside__ic { display: inline-flex; color: #007AFF; }
	.authside__ic svg { width: 20px; height: 20px; }

	/* The form half. */
	.auth .authstep {
		grid-column: 2;
		grid-row: 1;
		background: var(--c-surface);
		border-radius: 12px 0 0 12px;
		padding: 40px 34px;
	}

	.auth .auth__title {
		font-size: 24px;
		font-weight: var(--fw-regular);
		text-align: start;
		margin-bottom: 10px;
	}

	.auth .auth__sub {
		font-size: var(--fs-14);
		color: #626C83;
		text-align: start;
		margin-bottom: 30px;
	}

	.auth .auth__input {
		height: 48px;
		font-size: var(--fs-16);
		text-align: start;
	}

	.auth .auth__input::placeholder { color: #96A0B6; }

	/* Blue CTA at this width, not the mobile teal. */
	.auth .auth__btn {
		height: 48px;
		background: #007AFF;
		font-size: var(--fs-16);
	}

	.auth .auth__btn:hover { background: #0063D1; }

	.auth .auth__switch {
		text-align: start;
		font-size: var(--fs-12);
	}

	/* Mobile-only chrome. The desktop frame leads with the benefits panel,
	   so the phone landing's avatar + greeting belong here too — left in the
	   grid they added a stray row under the card. */
	.auth .authtabs,
	.auth .authmenu,
	.auth .authhero {
		display: none;
	}
}

/* --- Desktop payment: shipping methods and gateways sit as chips in a row,
   not as a stacked radio list (Desktop - Payment frame). --- */
@media (min-width: 1025px) {
	.checkout .coship ul#shipping_method {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 12px;
	}

	.checkout .coship ul#shipping_method li {
		flex: 0 1 auto;
		border: 1px solid #E2E6EE;
		border-radius: 8px;
		padding: 10px 14px;
	}

	.checkout .coship ul#shipping_method li:has(input:checked) {
		border-color: var(--c-teal);
	}

	.checkout .coship ul#shipping_method label {
		gap: 14px;
	}

	.checkout .wc_payment_methods {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 12px;
	}

	.checkout .wc_payment_method {
		flex: 0 1 auto;
	}

	.checkout .wc_payment_method > label {
		padding: 12px 16px;
	}

	/* A gateway's own description panel still needs the full row. */
	.checkout .wc_payment_method .payment_box {
		flex-basis: 100%;
	}
}

/* --- Cart summary (Desktop - Cart): the CTA sits at the TOP of the card and
   is blue, with the totals underneath. The mobile bar has it the other way
   round and in the red brand colour. --- */
@media (min-width: 1025px) {
	.cartpage .cartbar {
		flex-direction: column;
		gap: 18px;
	}

	.cartpage .cartbar__btn {
		order: -1;
		width: 100%;
		height: 44px;
		background: #007AFF;
		color: #fff;
		border-radius: 8px;
		font-size: var(--fs-14);
		font-weight: var(--fw-regular);
	}

	.cartpage .cartbar__btn:hover {
		background: #0063D1;
	}

	.cartpage .cartbar__total {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
}

/* --- Products listing (Desktop - Prducts): sort control beside the count,
   checkbox-style filter rows, and centred pagination. --- */
@media (min-width: 1025px) {
	.archive__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}

	.archive__sort {
		position: relative;
		display: inline-flex;
		align-items: center;
		margin-inline-start: auto;
	}

	.archive__sort select {
		appearance: none;
		-webkit-appearance: none;
		height: 36px;
		padding-inline: 34px 14px;
		background: var(--c-surface);
		border: 1px solid #E2E6EE;
		border-radius: 8px;
		font: inherit;
		font-size: var(--fs-14);
		color: #40444C;
		cursor: pointer;
	}

	.archive__sort svg {
		position: absolute;
		inset-inline-start: 12px;
		width: 14px;
		height: 14px;
		color: var(--c-gray-400);
		pointer-events: none;
	}

	/* Filter rows read as checkboxes in the frame. */
	.frail__link {
		gap: 10px;
	}

	.frail__link::before {
		content: "";
		flex: 0 0 auto;
		order: 2;
		width: 16px;
		height: 16px;
		border: 1.5px solid #CCD2E0;
		border-radius: 4px;
	}

	.frail__link.is-active::before,
	.frail__link.is-on::before {
		background: var(--c-teal) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-6' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
		border-color: var(--c-teal);
	}

	.frail__link span {
		flex: 1;
	}

	.frail__back {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 42px;
		border: 1px solid var(--c-teal);
		border-radius: 8px;
		background: var(--c-surface);
		font-size: var(--fs-14);
		color: var(--c-teal);
	}

	.archive__pager {
		display: flex;
		justify-content: center;
		margin-top: 32px;
	}
}

/* --- PDP buy row (Desktop - PDP): blue CTA with a quantity stepper beside
   it, then a three-item reassurance row under it. --- */
@media (min-width: 1025px) {
	.buybar .cart {
		display: flex;
		align-items: center;
		gap: 12px;
		flex-wrap: wrap;
	}

	.buybar__qty {
		order: -1;
		display: flex;
		align-items: center;
		gap: 4px;
		height: 44px;
		padding-inline: 6px;
		border: 1px solid #E2E6EE;
		border-radius: 8px;
	}

	.buybar__step {
		width: 28px;
		height: 28px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #40444C;
		background: none;
		border: 0;
		cursor: pointer;
	}

	.buybar__step svg { width: 14px; height: 14px; }

	.buybar__qtyinput {
		width: 26px;
		border: 0;
		background: none;
		text-align: center;
		font: inherit;
		font-size: var(--fs-14);
		color: #40444C;
	}

	.buybar__btn {
		flex: 1;
		height: 44px;
		background: #007AFF;
		border-radius: 8px;
	}

	.buybar__btn:hover { background: #0063D1; }

	.buybar__prices {
		flex-basis: 100%;
		order: -2;
	}

	.pdp__assure {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		margin-top: 22px;
	}

	.pdp__assure li {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		font-size: var(--fs-12);
		color: #40444C;
	}

	.pdp__assure svg {
		width: 22px;
		height: 22px;
		color: var(--c-teal);
	}
}

/* --- Account rail + order cards (Desktop - My orders): the customer sits in
   their own white card, the current section is highlighted, and logout is a
   separate outlined button rather than another row. --- */
@media (min-width: 1025px) {
	.acctnav {
		background: none;
		box-shadow: none;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.acctnav__who {
		background: var(--c-surface);
		border-radius: 8px;
		box-shadow: var(--shadow-sm);
		padding: 16px;
	}

	.acctnav__list {
		background: var(--c-surface);
		border-radius: 8px;
		box-shadow: var(--shadow-sm);
		padding: 6px;
		gap: 0;
	}

	.acctnav__row a {
		border: 0;
		background: none;
		border-radius: 8px;
		padding: 13px 12px;
		font-weight: var(--fw-regular);
		color: #40444C;
	}

	.acctnav__row.is-active a {
		background: #E6F2FF;
		color: #007AFF;
	}

	.acctnav__row.is-active .acctnav__ic,
	.acctnav__row.is-active .acctnav__chev {
		color: #007AFF;
	}

	/* Logout leaves the list and becomes its own button. */
	.acctnav__row.woocommerce-MyAccount-navigation-link--customer-logout {
		order: 99;
	}

	.acctnav__row.woocommerce-MyAccount-navigation-link--customer-logout a {
		justify-content: center;
		border: 1px solid #E2E6EE;
		border-radius: 8px;
		background: var(--c-surface);
		color: #40444C;
	}

	.acctnav__row.woocommerce-MyAccount-navigation-link--customer-logout .acctnav__ic,
	.acctnav__row.woocommerce-MyAccount-navigation-link--customer-logout .acctnav__chev {
		display: none;
	}

	/* Order cards: actions sit inline on the right of the row. */
	.myorder__actions {
		justify-content: flex-end;
		gap: 10px;
	}

	.myorder__action {
		flex: 0 0 auto;
		min-width: 92px;
		border-radius: 8px;
	}

	.myorder__action--track {
		background: #007AFF;
		border-color: #007AFF;
		color: #fff;
	}

	.myorder__action--reorder {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		background: var(--c-teal);
		border-color: var(--c-teal);
		color: #fff;
	}

	.myorder__action--reorder svg { width: 15px; height: 15px; }

	.myorders__filters {
		justify-content: flex-end;
	}

	/* Cheques and addresses are two-up grids of cards at this width. */
	.mychq,
	.myaddr__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}

	.myaddr__card {
		border: 1.5px solid transparent;
	}

	.myaddr__card.is-default {
		border-color: var(--c-teal);
	}
}

/* =========================================================================
 * v6 — deltas found by the side-by-side pass of 2026-08-15.
 * Appended rather than merged into the blocks above: a range-replace in this
 * file has swallowed neighbouring sections before.
 * ====================================================================== */
@media (min-width: 1024px) {

	/* «تایید و پرداخت» is blue in Desktop - Payment, not the mobile teal. */
	.checkout #place_order {
		background: var(--c-blue);
	}

	.checkout #place_order:hover {
		background: #0063D1;
	}

	/* Saved addresses are cards side by side in the frame, not a radio list. */
	.coaddr__list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.coaddr__card {
		display: block;
		position: relative;
		height: 100%;
		border: 1.5px solid var(--c-border);
		border-radius: 8px;
		padding: 12px 14px;
		cursor: pointer;
	}

	.coaddr__card:has(input:checked) {
		border-color: var(--c-blue);
	}

	/* The radio itself becomes the check dot in the card's bottom corner. */
	.coaddr__card input {
		position: absolute;
		inset-block-end: 12px;
		inset-inline-start: 12px;
		accent-color: var(--c-blue);
		margin: 0;
	}

	.coaddr__body {
		display: block;
		padding-inline-start: 26px;
	}

	.coaddr__name {
		display: block;
		font-size: var(--fs-13);
		font-weight: var(--fw-medium);
		margin-bottom: 6px;
	}

	.coaddr__line {
		display: block;
		font-size: var(--fs-12);
		color: var(--c-text-muted);
		line-height: 1.9;
	}

	.coaddr__add {
		display: inline-flex;
		margin-top: 12px;
		font-size: var(--fs-12);
		color: var(--c-blue);
	}
}

/* --- Cart summary: itemised rows above the total, per «Desktop - Cart». --- */
.cartbar__rows { display: none; }
.cartbar__btntxt--dt { display: none; }

@media (min-width: 1024px) {
	.cartpage .cartbar__rows {
		display: block;
		order: 0;
		width: 100%;
	}

	.cartpage .cartbar__row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		font-size: var(--fs-12);
		color: var(--c-text-muted);
		margin-bottom: 10px;
	}

	.cartpage .cartbar__rowv { color: var(--c-text); }

	.cartpage .cartbar__btntxt--mb { display: none; }
	.cartpage .cartbar__btntxt--dt { display: inline; }
}

/* --- Step 3's heading: «بازبینی نهایی» on mobile, «خلاصه پرداخت» on desktop. --- */
.cocard__titledt { display: none; }

@media (min-width: 1024px) {
	.checkout .cocard__titlemb { display: none; }
	.checkout .cocard__titledt { display: inline; }

	/* Step 1 and 2 have no desktop variant, so keep their mobile label. */
	.checkout .costep[data-step="1"] .cocard__titlemb,
	.checkout .costep[data-step="2"] .cocard__titlemb { display: inline; }
}

/* --- Tracking drops the account rail, so the page must reclaim its column. --- */
@media (min-width: 1024px) {
	.account:not(:has(.acctnav)) {
		grid-template-columns: minmax(0, 1fr);
	}

	.account:not(:has(.acctnav)) > * {
		grid-column: 1;
	}
}

/* =========================================================================
 * v7 — My orders as one-line rows (Desktop - My orders), 2026-08-16.
 * The mobile card stacks head → meta → thumbs → foot; the frame lays the
 * same data out as a single row: thumb · id/title/price · status · actions.
 * Every wrapper between .myorder and its leaves becomes display:contents so
 * the row can be a grid without touching the mobile DOM.
 * ====================================================================== */
@media (min-width: 1024px) {

	.myorders__active {
		padding: 13px 16px;
		margin-bottom: 16px;
		font-size: var(--fs-13);
	}

	.myorders__list {
		gap: 12px;
	}

	.myorder {
		display: grid;
		grid-template-columns: 52px minmax(0, 1fr) auto auto;
		grid-template-areas:
			"thumb id    status actions"
			"thumb title status actions"
			"thumb total status actions";
		align-items: center;
		column-gap: 16px;
		row-gap: 4px;
		padding: 14px 16px;
		border-color: var(--c-line);
		box-shadow: var(--shadow-sm);
	}

	.myorder__link,
	.myorder__head {
		display: contents;
	}

	/* One thumbnail leads the row; the rest are implied by «+ n کالای دیگر». */
	.myorder__thumbs {
		grid-area: thumb;
		margin: 0;
		align-self: center;
	}

	.myorder__thumb {
		width: 52px;
		height: 52px;
	}

	.myorder__thumb:not(:first-child),
	.myorder__more,
	.myorder__meta,
	.myorder__chev {
		display: none;
	}

	.myorder__id {
		grid-area: id;
		font-size: var(--fs-11);
		color: var(--c-text-muted);
	}

	.myorder__num {
		font-size: var(--fs-11);
		font-weight: var(--fw-regular);
		color: var(--c-text-muted);
	}

	.myorder__date--dt {
		display: inline;
	}

	.myorder__date--dt::before {
		content: "·";
		margin-inline-end: 8px;
		color: var(--c-gray-300);
	}

	.myorder__title {
		display: block;
		grid-area: title;
		font-size: var(--fs-13);
		font-weight: var(--fw-medium);
		color: var(--c-ink);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.myorder__titlemore {
		color: var(--c-text-muted);
		font-weight: var(--fw-regular);
	}

	.myorder__foot {
		grid-area: total;
		margin: 0;
		padding: 0;
		border: 0;
		justify-content: flex-start;
	}

	.myorder__total {
		font-size: var(--fs-12);
		font-weight: var(--fw-regular);
		color: var(--c-text-muted);
	}

	.myorder__status {
		grid-area: status;
		align-self: center;
		font-size: var(--fs-11);
		padding: 6px 12px;
	}

	.myorder__actions {
		grid-area: actions;
		padding: 0;
		gap: 10px;
	}

	.myorder__action {
		padding: 9px 16px;
		min-width: 88px;
	}

	.myorder__action--track,
	.myorder__action--reorder {
		min-width: 110px;
	}
}